/* Theme Name: Semanat Child Theme URI: https://semanat.pl Description: Child theme of Astra for semanat.pl — design tokens, self-hosted Inter, component classes for the SEMANAT B2B rebuild (Phase 2A). Author: SEMANAT Template: astra Version: 0.10.10 Text Domain: semanat-child */ /* ========================================================================== 1. DESIGN TOKENS (single source of truth: docs/SEMANAT_DESIGN_SYSTEM.md) ========================================================================== */ :root { /* colour */ --sem-green-700: #175F37; /* hover / pressed */ --sem-green-600: #1E7A46; /* PRIMARY — SEMANAT green (industrial) */ --sem-green-500: #2E9A5B; /* accents, icons */ --sem-green-100: #E6F2EB; /* tint surface */ --sem-green-050: #F2F8F4; /* subtle tint */ --sem-ink: #1B2228; /* headings / dark text */ --sem-ink-soft: #3A444C; /* body text */ --sem-muted: #66737D; /* secondary text */ --sem-steel: #8A96A0; /* icons, meta, dividers on dark */ --sem-border: #DDE3E7; --sem-bg: #FFFFFF; --sem-bg-alt: #F5F7F8; /* off-white section background */ --sem-surface: #FFFFFF; --sem-dark: #1F2A33; /* graphite panel (pillars band, supplier CTA) */ --sem-dark-2: #2A3843; /* cards on graphite */ --sem-white: #FFFFFF; /* radius */ --sem-radius-sm: 6px; --sem-radius-md: 12px; /* spacing scale (4-based) */ --sem-s-1: 4px; --sem-s-2: 8px; --sem-s-3: 12px; --sem-s-4: 16px; --sem-s-5: 24px; --sem-s-6: 32px; --sem-s-7: 48px; --sem-s-8: 64px; --sem-s-9: 96px; /* typography */ --sem-font: 'Inter', 'Inter Fallback', Helvetica, Arial, sans-serif; --sem-h1: 48px; --sem-h2: 36px; --sem-h3: 22px; --sem-body: 17px; --sem-small: 14px; --sem-lh-tight: 1.1; --sem-lh-heading: 1.2; --sem-lh-body: 1.6; /* shadow (one, soft) */ --sem-shadow: 0 6px 24px rgba(27, 34, 40, 0.08); --sem-transition: 160ms ease; } @media (max-width: 1024px) { :root { --sem-h1: 42px; --sem-h2: 32px; } } @media (max-width: 767px) { :root { --sem-h1: 34px; --sem-h2: 28px; --sem-h3: 20px; --sem-body: 16px; } } /* ========================================================================== 2. BASE ========================================================================== */ body.semanat-v2, body.semanat-v2 .elementor-widget-text-editor, body.semanat-v2 button, body.semanat-v2 input, body.semanat-v2 select, body.semanat-v2 textarea { font-family: var(--sem-font); } body.semanat-v2 { color: var(--sem-ink-soft); font-size: var(--sem-body); line-height: var(--sem-lh-body); background: var(--sem-bg); -webkit-font-smoothing: antialiased; } body.semanat-v2 h1, body.semanat-v2 h2, body.semanat-v2 h3, body.semanat-v2 h4 { font-family: var(--sem-font); color: var(--sem-ink); letter-spacing: -0.01em; line-height: var(--sem-lh-heading); } body.semanat-v2 h1 { font-size: var(--sem-h1); font-weight: 700; line-height: var(--sem-lh-tight); letter-spacing: -0.02em; } body.semanat-v2 h2 { font-size: var(--sem-h2); font-weight: 700; } body.semanat-v2 h3 { font-size: var(--sem-h3); font-weight: 600; } body.semanat-v2 a { color: var(--sem-green-600); } body.semanat-v2 a:hover { color: var(--sem-green-700); } body.semanat-v2 :focus-visible { outline: 3px solid var(--sem-green-500); outline-offset: 2px; } body.semanat-v2 .elementor-section-wrap, body.semanat-v2 .elementor { overflow-x: clip; } /* ========================================================================== 3. COMPONENTS (used as Elementor CSS classes) ========================================================================== */ /* eyebrow / kicker */ .sem-eyebrow .elementor-heading-title { font-size: var(--sem-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sem-green-600); } body.semanat-v2 .sem-eyebrow.on-dark .elementor-heading-title { color: #6CCB8F; } /* 8.4:1 on graphite */ /* lead paragraph */ .sem-lead .elementor-widget-container { font-size: 19px; color: var(--sem-ink-soft); } @media (max-width: 767px) { .sem-lead .elementor-widget-container { font-size: 17px; } } /* text on graphite panels */ body.semanat-v2 .on-dark.elementor-widget-text-editor .elementor-widget-container, body.semanat-v2 .on-dark .elementor-widget-container { color: #C9D1D8; } body.semanat-v2 .on-dark .elementor-heading-title { color: var(--sem-white); } /* material chips line under hero */ .sem-chips .elementor-widget-container { font-size: var(--sem-small); font-weight: 500; color: #5B6670; letter-spacing: 0.02em; } /* 5.4:1 on the hero tint */ /* ========================================================================================== KANONICZNY SYSTEM PRZYCISKÓW HANDLOWYCH (UI CONSISTENCY GATE 01, 20.09.2026) Właściciel znalazł to, czego nie widać w kodzie żadnego pojedynczego miejsca: „MAM MATERIAŁ” raz zielony, raz biały; „NAPISZ DO NAS” raz przyciskiem, raz luźnym tekstem; kupujący w trzech różnych błękitach. Audyt policzył skalę — 596 wezwań handlowych, KUPUJĄCY w 9 wyglądach, DOSTAWCA w 6. To nie były usterki stron, tylko brak jednego systemu. Odtąd obowiązuje jeden kontrakt, a rolę handlową niesie WYŁĄCZNIE kolor tła: KUPUJĄCY → --sem-cta-buyer-bg (błękit, ten z przyjętej pary na stronie głównej) DOSTAWCA → --sem-cta-supplier-bg (zieleń SEMANAT) KONTAKT → --sem-cta-contact-bg (TA SAMA zieleń — decyzja właściciela: „różnicę robi tekst/rola, nie kolejny odcień”) Typografia, geometria i interakcja są WSPÓLNE. Żadna sekcja, żaden generator i żadne tło nie mają prawa zmieniać koloru roli — wolno im najwyżej dołożyć obrys albo cień. Dlatego zniknęło nadpisanie `.sem-hero-b .sem-btn-buy` / `.sem-cta-band .sem-btn-buy`: istniało po to, żeby granat nie zginął na ciemnym paśmie, a skutkiem ubocznym było to, że ten sam przycisk miał dwa kolory zależnie od sekcji. Kanoniczny błękit jest czytelny na obu tłach i nadpisania nie potrzebuje. ========================================================================================== */ :root { --sem-cta-buyer-bg: var(--sem-blue-600); /* #0B6BB5 — biały tekst 5,6:1 */ --sem-cta-buyer-hover: var(--sem-blue-700); /* #0A5A9C — 7,1:1 */ --sem-cta-supplier-bg: var(--sem-green-600); /* #1E7A46 — biały tekst 5,4:1 */ --sem-cta-supplier-hover: var(--sem-green-700); /* #175F37 */ --sem-cta-contact-bg: var(--sem-green-600); /* ta sama zieleń co dostawca */ --sem-cta-contact-hover: var(--sem-green-700); --sem-cta-text: #FFFFFF; --sem-cta-focus: var(--sem-blue-500); --sem-cta-font-size: 14px; --sem-cta-weight: 600; --sem-cta-tracking: 0.02em; --sem-cta-radius: var(--sem-radius-sm); --sem-cta-pad-y: 16px; --sem-cta-pad-x: 30px; --sem-cta-min-h: 50px; } /* --- kontrakt wspólny: jedna typografia i geometria dla KAŻDEGO przycisku handlowego --------- Lista selektorów jest długa, bo przyciski powstają czterema drogami: widget Elementora, przycisk nagłówka Astry, surowy `` z generatorów bazy wiedzy i kart materiałowych oraz `` renderowany przez motyw w stopce. Wszystkie cztery mają wyglądać identycznie — i to jest jedyne miejsce, w którym o tym decydujemy. `.ast-builder-button-wrap` w selektorze przycisku Astry nie jest ozdobą: Astra generuje własną regułę `.ast-header-button-1[data-section*="…"] .ast-builder-button-wrap .ast-custom-button` z rozmiarem z Customizera. Bez tego jednego członu nasz kontrakt przegrywa z nią szczegółowością i przycisk nagłówka dostaje rozmiar spoza systemu. Wcześniej wygrywał przypadkiem — dzięki zawężeniu do `.site-header`, które jednocześnie wykluczało szufladę menu mobilnego. */ body.semanat-v2 .sem-btn .elementor-button, body.semanat-v2 .ast-header-button-1 .ast-builder-button-wrap .ast-custom-button, body.semanat-v2 .ast-custom-button, body.semanat-v2 .sem-finder-cta, body.semanat-v2 .sem-k-cta .sem-k-go, body.semanat-v2 a.sem-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sem-font); font-size: var(--sem-cta-font-size); font-weight: var(--sem-cta-weight); line-height: 1; letter-spacing: var(--sem-cta-tracking); text-transform: uppercase; text-decoration: none; padding: var(--sem-cta-pad-y) var(--sem-cta-pad-x); min-height: var(--sem-cta-min-h); box-sizing: border-box; border: 2px solid transparent; border-radius: var(--sem-cta-radius); color: var(--sem-cta-text); transition: background-color var(--sem-transition), border-color var(--sem-transition), color var(--sem-transition), transform var(--sem-transition); } /* --- rola: KUPUJĄCY ------------------------------------------------------------------------ */ body.semanat-v2 .sem-btn-buy .elementor-button, body.semanat-v2 .ast-header-button-1 .ast-builder-button-wrap .ast-custom-button, body.semanat-v2 .ast-custom-button, body.semanat-v2 .sem-finder-cta, body.semanat-v2 .sem-finder-cta:visited, body.semanat-v2 .sem-k-cta .sem-k-go, body.semanat-v2 a.sem-cta--buyer { background: var(--sem-cta-buyer-bg); border-color: var(--sem-cta-buyer-bg); color: var(--sem-cta-text); } body.semanat-v2 .sem-btn-buy .elementor-button:hover, body.semanat-v2 .sem-btn-buy .elementor-button:focus, body.semanat-v2 .ast-custom-button-link:hover .ast-custom-button, body.semanat-v2 .sem-finder-cta:hover, body.semanat-v2 .sem-finder-cta:focus-visible, body.semanat-v2 .sem-k-cta .sem-k-go:hover, body.semanat-v2 .sem-k-cta .sem-k-go:focus-visible, body.semanat-v2 a.sem-cta--buyer:hover, body.semanat-v2 a.sem-cta--buyer:focus-visible { background: var(--sem-cta-buyer-hover); border-color: var(--sem-cta-buyer-hover); color: var(--sem-cta-text); } /* --- rola: DOSTAWCA ------------------------------------------------------------------------ */ body.semanat-v2 .sem-btn-sell .elementor-button, body.semanat-v2 .sem-k-cta.is-seller .sem-k-go, body.semanat-v2 a.sem-cta--supplier { background: var(--sem-cta-supplier-bg); border-color: var(--sem-cta-supplier-bg); color: var(--sem-cta-text); } body.semanat-v2 .sem-btn-sell .elementor-button:hover, body.semanat-v2 .sem-btn-sell .elementor-button:focus, body.semanat-v2 .sem-k-cta.is-seller .sem-k-go:hover, body.semanat-v2 .sem-k-cta.is-seller .sem-k-go:focus-visible, body.semanat-v2 a.sem-cta--supplier:hover, body.semanat-v2 a.sem-cta--supplier:focus-visible { background: var(--sem-cta-supplier-hover); border-color: var(--sem-cta-supplier-hover); color: var(--sem-cta-text); } /* --- rola: KONTAKT OGÓLNY ------------------------------------------------------------------ */ body.semanat-v2 .sem-btn-contact .elementor-button, body.semanat-v2 a.sem-cta--contact { background: var(--sem-cta-contact-bg); border-color: var(--sem-cta-contact-bg); color: var(--sem-cta-text); } body.semanat-v2 .sem-btn-contact .elementor-button:hover, body.semanat-v2 .sem-btn-contact .elementor-button:focus, body.semanat-v2 a.sem-cta--contact:hover, body.semanat-v2 a.sem-cta--contact:focus-visible { background: var(--sem-cta-contact-hover); border-color: var(--sem-cta-contact-hover); color: var(--sem-cta-text); } /* --- akcje spoza handlu -------------------------------------------------------------------- */ /* `primary` to działanie, które nie jest ani zakupem, ani ofertą (np. „Porozmawiaj o aplikacji”). Zostaje zielone, żeby strony spoza handlu się nie zmieniły — ale korzysta z tego samego tokenu. */ body.semanat-v2 .sem-btn-primary .elementor-button { background: var(--sem-cta-contact-bg); border-color: var(--sem-cta-contact-bg); color: var(--sem-cta-text); } body.semanat-v2 .sem-btn-primary .elementor-button:hover, body.semanat-v2 .sem-btn-primary .elementor-button:focus { background: var(--sem-cta-contact-hover); border-color: var(--sem-cta-contact-hover); color: var(--sem-cta-text); } body.semanat-v2 .sem-btn-secondary .elementor-button { background: transparent; color: var(--sem-green-700); border-color: var(--sem-cta-supplier-bg); } body.semanat-v2 .sem-btn-secondary .elementor-button:hover, body.semanat-v2 .sem-btn-secondary .elementor-button:focus { background: var(--sem-green-100); color: var(--sem-green-700); } /* `ghost` to odnośnik czytany jak odnośnik — nawigacja wewnątrz karty, nie główna akcja handlowa. Audyt sprawdza, że nie trafi tu żadne wezwanie, które ma być przyciskiem (§5 bramki). */ body.semanat-v2 .sem-btn-ghost .elementor-button { background: transparent; color: var(--sem-green-600); border: 0; padding-left: 0; padding-right: 0; min-height: 0; box-shadow: none; } body.semanat-v2 .sem-btn-ghost .elementor-button:hover, body.semanat-v2 .sem-btn-ghost .elementor-button:focus { background: transparent; color: var(--sem-green-700); transform: translateX(2px); } /* Rola na odnośniku bez tła niesiona jest kolorem tekstu — klasę dokłada generator z celu odnośnika. */ body.semanat-v2 .sem-btn-ghost-buyer .elementor-button { color: var(--sem-cta-buyer-bg); } body.semanat-v2 .sem-btn-ghost-buyer .elementor-button:hover, body.semanat-v2 .sem-btn-ghost-buyer .elementor-button:focus { color: var(--sem-cta-buyer-hover); } body.semanat-v2 .sem-btn-ghost-supplier .elementor-button { color: var(--sem-cta-supplier-bg); } body.semanat-v2 .sem-btn-ghost-supplier .elementor-button:hover, body.semanat-v2 .sem-btn-ghost-supplier .elementor-button:focus { color: var(--sem-cta-supplier-hover); } body.semanat-v2 .sem-btn-ghost-contact .elementor-button { color: var(--sem-cta-contact-bg); } body.semanat-v2 .sem-btn-ghost-contact .elementor-button:hover, body.semanat-v2 .sem-btn-ghost-contact .elementor-button:focus { color: var(--sem-cta-contact-hover); } body.semanat-v2 .sem-btn-ghost-light .elementor-button { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.5); } body.semanat-v2 .sem-btn-ghost-light .elementor-button:hover, body.semanat-v2 .sem-btn-ghost-light .elementor-button:focus { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; } /* `buy-outline` / `sell-outline`: wariant obrysowany tej samej roli — kolor roli zostaje. */ body.semanat-v2 .sem-btn-buy-outline .elementor-button { background: transparent; color: var(--sem-cta-buyer-bg); border-color: var(--sem-cta-buyer-bg); } body.semanat-v2 .sem-btn-buy-outline .elementor-button:hover, body.semanat-v2 .sem-btn-buy-outline .elementor-button:focus { background: var(--sem-blue-050); color: var(--sem-navy-800); } body.semanat-v2 .sem-btn-sell-outline .elementor-button { background: transparent; color: var(--sem-green-700); border-color: var(--sem-cta-supplier-bg); } body.semanat-v2 .sem-btn-sell-outline .elementor-button:hover, body.semanat-v2 .sem-btn-sell-outline .elementor-button:focus { background: var(--sem-green-100); color: var(--sem-green-700); } /* Pozostałe przyciski Elementora spoza systemu handlowego — sama typografia, bez roli. */ .sem-btn .elementor-button, .semanat-v2 .ast-button, .semanat-v2 .elementor-button { font-family: var(--sem-font); font-weight: var(--sem-cta-weight); font-size: var(--sem-cta-font-size); letter-spacing: var(--sem-cta-tracking); border-radius: var(--sem-cta-radius); transition: background-color var(--sem-transition), color var(--sem-transition), border-color var(--sem-transition), transform var(--sem-transition); } /* Strzałka akcji — jeden rozmiar i jedna grubość kreski niezależnie od tego, czy narysował ją Elementor (Font Awesome), generator bazy wiedzy (SVG) czy motyw w stopce (SVG). */ body.semanat-v2 .sem-btn .elementor-button-icon svg, body.semanat-v2 .sem-finder-cta svg, body.semanat-v2 .sem-k-cta .sem-k-go svg, body.semanat-v2 a.sem-cta .sem-cta-arrow { width: 16px; height: 16px; flex: 0 0 auto; } body.semanat-v2 .sem-btn .elementor-button-icon i { font-size: 14px; } body.semanat-v2 .sem-finder-cta:hover svg, body.semanat-v2 a.sem-cta:hover .sem-cta-arrow { transform: translateX(3px); } body.semanat-v2 a.sem-cta .sem-cta-arrow { transition: transform var(--sem-transition); } /* Widoczny focus klawiatury na każdym przycisku handlowym — jeden kontrakt, nie pięć. */ body.semanat-v2 .sem-btn .elementor-button:focus-visible, body.semanat-v2 .ast-custom-button-link:focus-visible .ast-custom-button, body.semanat-v2 .sem-finder-cta:focus-visible, body.semanat-v2 .sem-k-cta .sem-k-go:focus-visible, body.semanat-v2 a.sem-cta:focus-visible { outline: 3px solid var(--sem-cta-focus); outline-offset: 3px; } /* cards */ .sem-card { background: var(--sem-surface); border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); transition: box-shadow var(--sem-transition), transform var(--sem-transition), border-color var(--sem-transition); } .sem-card:hover { box-shadow: var(--sem-shadow); transform: translateY(-2px); border-color: #CBD3D9; } .sem-card-dark { background: var(--sem-dark-2); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--sem-radius-md); } .sem-card-dark .elementor-heading-title, .sem-card-dark h3, .sem-card-dark .elementor-icon-box-title { color: var(--sem-white); } .sem-card-dark .elementor-widget-text-editor, .sem-card-dark .elementor-icon-box-description { color: #C9D1D8; } .sem-card-tint { background: var(--sem-green-050); border: 1px solid var(--sem-green-100); border-radius: var(--sem-radius-md); } /* icon boxes inside cards */ .semanat-v2 .elementor-icon-box-title { font-size: var(--sem-h3); font-weight: 600; color: var(--sem-ink); } .semanat-v2 .elementor-icon-box-description { color: var(--sem-ink-soft); font-size: 16px; } .semanat-v2 .elementor-icon-box-icon .elementor-icon { color: var(--sem-green-600); } /* material category card: small tag list */ .sem-tags .elementor-icon-list-item { font-size: var(--sem-small); color: var(--sem-muted); } .sem-tags .elementor-icon-list-icon svg { fill: var(--sem-green-500); } /* Znacznik trzyma się PIERWSZEGO wiersza pozycji, nie środka całego bloku tekstu. Elementor domyślnie centruje ikonę względem całej pozycji (`align-items: center`), więc przy pozycji dwuwierszowej kropka zjeżdżała o 9,7 px, a przy trzywierszowej o 19,3 px i optycznie należała już do innego wiersza. Wysokość pudełka ikony ustawiamy na JEDEN wiersz, a ikonę centrujemy w tym pudełku — dzięki temu pozycje jedno- i wielowierszowe mają dokładnie ten sam odstęp, a reguła skaluje się sama razem z rozmiarem pisma (12 px na telefonie, 17 px na desktopie). `1lh` to dokładna wysokość wiersza; `1.6em` zostaje jako wartość zapasowa dla przeglądarek, które tej jednostki nie znają — 1,6 to proporcja interlinii tego komponentu, zmierzona na wszystkich czterech szerokościach. Wyrównanie ustawiamy ZMIENNĄ, a nie własną regułą `align-items`. Elementor deklaruje `align-items: var(--icon-vertical-align, center)` i ładuje swój arkusz PO naszym, więc reguła o tej samej szczegółowości przegrywa z nim cicho. Zmienna jest hakiem, który framework sam udostępnia — działa bez licytowania się na selektory i przetrwa zmianę kolejności arkuszy. */ .sem-tags { --icon-vertical-align: flex-start; } body.semanat-v2 .sem-tags .elementor-icon-list-icon { align-items: center; height: 1.6em; height: 1lh; } /* process flow (APLIKACJA → PROCES → …) */ .sem-flow { display: flex; flex-wrap: wrap; gap: var(--sem-s-2); align-items: center; } .sem-flow-step { background: var(--sem-surface); border: 1px solid var(--sem-border); border-radius: var(--sem-radius-sm); padding: 10px 14px; font-size: var(--sem-small); font-weight: 600; color: var(--sem-ink); letter-spacing: 0.04em; text-transform: uppercase; } .sem-flow-step.is-accent { background: var(--sem-green-600); border-color: var(--sem-green-600); color: var(--sem-white); } .sem-flow-arrow { color: var(--sem-steel); font-size: 18px; line-height: 1; } @media (max-width: 767px) { .sem-flow { flex-direction: column; align-items: stretch; } .sem-flow-arrow { transform: rotate(90deg); text-align: center; } .sem-flow-step { text-align: center; } } /* numbered steps (JAK PRACUJEMY) */ .sem-step-num .elementor-heading-title { font-size: 40px; font-weight: 700; color: var(--sem-green-600); line-height: 1; letter-spacing: -0.02em; opacity: .9; } .sem-step-num.on-dark .elementor-heading-title { color: rgba(255,255,255,0.18); } /* checklist (DLACZEGO SEMANAT) */ .sem-checks .elementor-icon-list-item { font-size: 17px; color: var(--sem-ink); font-weight: 500; padding: 6px 0; } .sem-checks .elementor-icon-list-icon svg { fill: var(--sem-green-600); } /* image cards (fixed aspect ratio = no layout shift while loading) */ .sem-img-card img { border-radius: var(--sem-radius-md); display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } /* visually hidden (a11y heading order) */ .sem-visually-hidden, .sem-visually-hidden .elementor-heading-title { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; } /* footnote / legal small print */ .sem-note .elementor-widget-container { font-size: var(--sem-small); color: var(--sem-muted); } .sem-note.on-dark .elementor-widget-container { color: #AEB8C0; } /* forms (Elementor Pro) */ .semanat-v2 .elementor-form .elementor-field-group label { font-size: var(--sem-small); font-weight: 600; color: var(--sem-ink); margin-bottom: 6px; } .semanat-v2 .elementor-form .elementor-field-textual { border: 1px solid var(--sem-border); border-radius: var(--sem-radius-sm); background: var(--sem-white); color: var(--sem-ink); font-size: 16px; padding: 12px 14px; } .semanat-v2 .elementor-form .elementor-field-textual:focus { border-color: var(--sem-green-600); box-shadow: 0 0 0 3px var(--sem-green-100); outline: none; } .semanat-v2 .elementor-form .elementor-button[type="submit"] { background: var(--sem-green-600); color: #fff; border-radius: var(--sem-radius-sm); font-weight: 600; padding: 14px 28px; } .semanat-v2 .elementor-form .elementor-button[type="submit"]:hover { background: var(--sem-green-700); } .semanat-v2 .elementor-form .elementor-field-type-acceptance label { font-weight: 400; color: var(--sem-ink-soft); } /* ========================================================================== 4. ASTRA HEADER / FOOTER (global, visible on every page) ========================================================================== */ body.semanat-v2 .ast-primary-header-bar, body.semanat-v2 .ast-mobile-header-wrap .ast-primary-header-bar { background-color: var(--sem-white); border-bottom: 1px solid var(--sem-border); } body.semanat-v2 .main-header-menu .menu-item > .menu-link { font-family: var(--sem-font); font-weight: 500; font-size: 15px; color: var(--sem-ink); } body.semanat-v2 .main-header-menu .menu-item > .menu-link:hover, body.semanat-v2 .main-header-menu .menu-item-type-post_type.current-menu-item > .menu-link { color: var(--sem-green-600); } body.semanat-v2 .main-header-menu .menu-item-type-custom.current-menu-item > .menu-link, body.semanat-v2 .main-header-menu .menu-item-type-custom.current-menu-item > .menu-link:not(:hover) { color: var(--sem-ink); } /* anchor links to Home must not all light up on Home */ body.semanat-v2 .custom-logo-link img { background: transparent; } /* Kolor i geometria przycisku nagłówka mieszkają WYŁĄCZNIE w kanonicznym bloku CTA wyżej. Stały tu kiedyś dwie reguły malujące go na zielono — pozostałość sprzed ujednolicenia ról. W samym nagłówku nie było ich widać, bo kanoniczny selektor był bardziej szczegółowy, ale szuflada menu mobilnego renderuje się POZA `
` i tam wygrywała zieleń: ta sama akcja „SZUKAM MATERIAŁU” prowadząca pod ten sam adres była na telefonie zielona, a na desktopie niebieska. Dlatego kanoniczne selektory nie są już zawężone do `.site-header`. */ .semanat-v2 .ast-mobile-header-content .ast-header-button-1 { padding: 16px 0; } .semanat-v2 .ast-mobile-popup-drawer .ast-mobile-popup-inner { background: var(--sem-white); } .semanat-v2 .site-footer { background: var(--sem-dark); color: #C9D1D8; font-family: var(--sem-font); } .semanat-v2 .site-footer a { color: #E4E9ED; } .semanat-v2 .site-footer a:hover { color: var(--sem-green-500); } .semanat-v2 .site-footer .widget-title, .semanat-v2 .site-footer h2.widget-title, .semanat-v2 .site-footer .ast-footer-html-inner h4 { color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .semanat-v2 .site-footer .widget ul li { padding: 4px 0; } body.semanat-v2 .site-footer p, body.semanat-v2 .site-footer .ast-footer-html-inner, body.semanat-v2 .site-footer .textwidget { color: #C9D1D8; } body.semanat-v2 .site-footer .ast-footer-copyright, body.semanat-v2 .site-footer .ast-footer-copyright p, body.semanat-v2 .site-footer .ast-footer-html-2, body.semanat-v2 .site-footer .ast-footer-html-2 p { font-size: 13px; color: #B7C0C7; } /* 7.6:1 on graphite */ body.semanat-v2 .site-footer .ast-footer-html-1 .ast-footer-html-inner { text-align: left; } .semanat-v2 .site-below-footer-wrap { border-top: 1px solid rgba(255,255,255,0.1); } /* ========================================================================== 5. PHASE 2A.1 POLISH — header presence, service cards, form disclosure, mobile density ========================================================================== */ /* header: a little more brand presence, still compact (rozmiar przycisku nagłówka pochodzi z tokenów `--sem-cta-*`; osobne wartości stały tu z czasów sprzed jednego systemu przycisków i po zdjęciu zawężenia `.site-header` nadpisywałyby kontrakt) */ body.semanat-v2 .main-header-menu .menu-item > .menu-link { font-size: 16px; } body.semanat-v2 .site-header .custom-logo-link img { max-height: 76px; width: auto; } @media (max-width: 921px) { body.semanat-v2 .site-header .custom-logo-link img { max-height: 56px; } } /* service cards: Polish title + small English secondary label */ .sem-en .elementor-heading-title { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5B6670; margin-top: -6px; } /* 5.4:1 */ /* material cards: small material code badge */ .sem-badge .elementor-heading-title { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sem-green-700); background: var(--sem-green-100); border-radius: 4px; padding: 4px 8px; line-height: 1.2; } /* technology: customer-problem example */ .sem-callout { border-left: 3px solid var(--sem-green-600); background: var(--sem-green-050); border-radius: 0 var(--sem-radius-sm) var(--sem-radius-sm) 0; } .sem-callout .elementor-widget-container { padding: 14px 18px; font-size: 17px; color: var(--sem-ink); font-weight: 500; } /* form: progressive disclosure */ body.semanat-v2 .elementor-form .elementor-field-group.sem-hidden { display: none !important; } body.semanat-v2 .sem-tech-toggle { margin-top: 4px; } body.semanat-v2 .sem-tech-toggle button { background: transparent; border: 1px dashed var(--sem-border); color: var(--sem-green-700); font: 600 14px/1.2 var(--sem-font); border-radius: var(--sem-radius-sm); padding: 10px 14px; cursor: pointer; width: 100%; text-align: left; } body.semanat-v2 .sem-tech-toggle button:hover, body.semanat-v2 .sem-tech-toggle button:focus-visible { border-color: var(--sem-green-600); background: var(--sem-green-050); } body.semanat-v2 .elementor-form .elementor-field-group-typ { margin-bottom: 4px; } /* mobile density: shorter page without losing content */ @media (max-width: 767px) { body.semanat-v2 .e-con.sem-card, body.semanat-v2 .e-con.sem-card-dark, body.semanat-v2 .e-con.sem-card-tint { padding: 18px 18px !important; } body.semanat-v2 .sem-pillar { width: calc(50% - 6px) !important; padding: 16px 14px !important; } body.semanat-v2 .sem-pillar .elementor-icon-box-title { font-size: 15px; letter-spacing: 0.03em; } body.semanat-v2 .sem-pillar .elementor-icon-box-description { font-size: 14px; } body.semanat-v2 .sem-pillar .elementor-icon-box-icon .elementor-icon { font-size: 22px; } body.semanat-v2 .sem-step { width: calc(50% - 6px) !important; padding: 14px !important; } body.semanat-v2 .sem-step .elementor-heading-title { font-size: 28px; } body.semanat-v2 .sem-step h3 { font-size: 17px; } body.semanat-v2 .sem-step .elementor-widget-text-editor { font-size: 14px; } body.semanat-v2 .sem-mat-card .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 4px 14px; } body.semanat-v2 .sem-mat-card .elementor-icon-list-item { font-size: 13px; } body.semanat-v2 .sem-mat-card { gap: 8px !important; } body.semanat-v2 .elementor-widget-icon-box .elementor-icon-box-wrapper { display: flex; gap: 12px; align-items: flex-start; text-align: left; } body.semanat-v2 .sem-pillar .elementor-widget-icon-box .elementor-icon-box-wrapper { display: block; } body.semanat-v2 .elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 0 !important; } body.semanat-v2 .sem-section-mobile-tight { padding-top: 40px !important; padding-bottom: 40px !important; } body.semanat-v2 .sem-lead .elementor-widget-container { font-size: 16px; } } /* ========================================================================== REDUKCJA TREŚCI STRONY GŁÓWNEJ 01 (21.09.2026) Ta sama treść, mniejsza gęstość na telefonie. Nic tu nie zmniejsza czcionek globalnie — każda reguła albo zdejmuje POWTÓRZENIE, albo odzyskuje puste miejsce w pojemniku. ========================================================================== */ /* Element wnoszący coś wyłącznie do kompozycji desktopowej. Na telefonie kolumn nie ma, więc taki element nie stoi „obok” — stoi POD, i kosztuje ekran, nie dając nowej informacji. */ @media (max-width: 767px) { body.semanat-v2 .sem-only-desktop, body.semanat-v2 .elementor-widget.sem-only-desktop { display: none !important; } } /* Kreator w wariancie zwartym: stoi wewnątrz sekcji, która ma własny nagłówek, więc nie potrzebuje ani takiego oddechu jak wersja samodzielna, ani własnego marginesu górnego. */ .sem-finder.is-compact { padding: 26px 28px 24px; } @media (max-width: 767px) { body.semanat-v2 .sem-finder.is-compact { padding: 18px 16px 16px; } body.semanat-v2 .sem-finder.is-compact .sem-finder-steps { gap: 8px; } body.semanat-v2 .sem-finder.is-compact .sem-finder-step { padding: 12px 14px; } body.semanat-v2 .sem-finder.is-compact .sem-finder-arrow { height: 14px; } body.semanat-v2 .sem-finder.is-compact .sem-finder-foot { margin-top: 16px; } } /* Pięć kroków na telefonie: jeden ciąg zwartych wierszy zamiast siatki kart. Numer wchodzi do pierwszej kolumny i przestaje zajmować własny wiersz. */ @media (max-width: 767px) { body.semanat-v2 .sem-steps-flow .sem-step { width: 100% !important; padding: 12px 16px !important; display: grid !important; grid-template-columns: 38px 1fr; column-gap: 14px; row-gap: 2px; } body.semanat-v2 .sem-steps-flow .sem-step > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: start; } body.semanat-v2 .sem-steps-flow .sem-step > :nth-child(2) { grid-column: 2; grid-row: 1; } body.semanat-v2 .sem-steps-flow .sem-step > :nth-child(3) { grid-column: 2; grid-row: 2; } body.semanat-v2 .sem-steps-flow .sem-num .elementor-heading-title { font-size: 24px; } body.semanat-v2 .sem-steps-flow .sem-step h3 { font-size: 16px; } body.semanat-v2 .sem-steps-flow .sem-step .elementor-widget-text-editor { font-size: 14px; line-height: 1.45; } } /* Sześć obszarów materiałowych w dwóch kolumnach. Zakres bez zmian — znika tylko pusta wysokość. Przycisk musi zmieścić się w kolumnie ~170 px, więc łamie etykietę zamiast wychodzić poza kartę. */ @media (max-width: 767px) { /* Szerokość liczona w CSS, nie procentem Elementora: 48,4% z 370 px to 179,08 px, a dwie takie karty plus odstęp dają 370,16 px — o 0,16 px za dużo, więc każda karta lądowała w osobnym wierszu i sekcja po „zwężeniu” była WYŻSZA niż przed nim. `calc()` nie ma tego problemu. Tak samo rozwiązane są sąsiednie komponenty (`.sem-pillar`). */ body.semanat-v2 .sem-mat-card { width: calc(50% - 6px) !important; padding: 14px 14px !important; } body.semanat-v2 .sem-mat-card h3 { font-size: 16px; line-height: 1.25; } body.semanat-v2 .sem-mat-card .sem-badge .elementor-heading-title { font-size: 11px; } body.semanat-v2 .sem-mat-card .elementor-icon-list-item { font-size: 12px; } body.semanat-v2 .sem-mat-card .elementor-button { font-size: 12px; padding: 12px 14px; min-height: 42px; white-space: normal; text-align: center; line-height: 1.2; } } /* Karty trzech poziomów wsparcia mają równą wysokość (tak działa siatka), ale opisy są różnej długości — po skróceniu dwóch z nich akcje wisiały w połowie karty, a pod nimi zostawało puste dno. Akcja idzie na spód: trzy wezwania stoją wtedy w jednej linii i pustka czyta się jak odstęp, a nie jak brak treści. */ body.semanat-v2 .sem-help-card > .elementor-widget-button { margin-top: auto; } /* Trzy poziomy wsparcia: karty miały na telefonie dużo pustego dołu przy krótkim tekście. */ @media (max-width: 767px) { body.semanat-v2 .sem-help-card { padding: 16px 16px !important; } body.semanat-v2 .sem-help-card h3 { font-size: 18px; } body.semanat-v2 .sem-help-card .elementor-widget-text-editor { font-size: 15px; line-height: 1.5; } } /* Lista krótkich haseł w dwóch kolumnach — ta sama treść, połowa wysokości. Siatka, a nie kolumny CSS, żeby pozycja nie mogła się rozjechać między kolumnami przy zawijaniu. */ body.semanat-v2 .sem-checks-2col .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; } /* Przy dwóch kolumnach dłuższe hasło łamie się na trzy wiersze, a wyśrodkowany znacznik ląduje wtedy przy drugim z nich i wygląda, jakby należał do innej pozycji. Trzyma się pierwszego. */ body.semanat-v2 .sem-checks-2col .elementor-icon-list-item { align-items: flex-start; } body.semanat-v2 .sem-checks-2col .elementor-icon-list-icon { margin-top: 3px; } @media (max-width: 380px) { body.semanat-v2 .sem-checks-2col .elementor-icon-list-items { grid-template-columns: 1fr; } } /* Dwie krótkie listy haseł obok siebie także na telefonie. Elementor rozkłada kolumny pojemnika w pionie poniżej punktu łamania — tutaj to zbędne, bo hasła są krótkie, a dwie listy jedna pod drugą to ekran wysokości za nic. */ @media (max-width: 767px) { body.semanat-v2 .sem-checks-pair { flex-direction: row !important; gap: 14px !important; } body.semanat-v2 .sem-checks-pair > * { width: calc(50% - 7px) !important; } body.semanat-v2 .sem-checks-pair .elementor-icon-list-item { font-size: 14px; } } /* Zdjęcia pionowe (4:5) w sekcjach dwukolumnowych strony głównej. Na desktopie stoją OBOK tekstu i ich wysokość jest wysokością kolumny tekstowej — nic nie kosztują. Na telefonie kolumny nie ma: to samo zdjęcie zajmuje 438 px, czyli pół ekranu, zanim czytelnik dojdzie do treści pod spodem. Węższy kadr zostawia zdjęcie na miejscu i oddaje pół ekranu treści. Proporcja jest nadal zadeklarowana, więc układ nie skacze przy wczytywaniu. */ @media (max-width: 767px) { body.semanat-v2 #dobor .sem-pic.is-tall img, body.semanat-v2 #dlaczego .sem-pic.is-tall img { aspect-ratio: 3 / 2; } } /* ========================================================================== 6. PHASE 2B — core pages: material rows, FAQ accordion, small helpers ========================================================================== */ body.semanat-v2 .sem-card-tint h4.elementor-heading-title { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sem-green-700); } body.semanat-v2 .sem-card-tint .sem-small, body.semanat-v2 .sem-card-tint p.sem-small { font-size: 14px; color: var(--sem-ink-soft); margin: 0; } body.semanat-v2 .sem-mat-row { scroll-margin-top: 110px; } body.semanat-v2 .sem-mat-row .sem-badge .elementor-heading-title { font-size: 13px; } body.semanat-v2 [id] { scroll-margin-top: 100px; } /* FAQ (Elementor accordion) */ body.semanat-v2 .sem-faq .elementor-accordion .elementor-accordion-item { border: 1px solid var(--sem-border); border-radius: var(--sem-radius-sm); margin-bottom: 10px; background: var(--sem-surface); } body.semanat-v2 .sem-faq .elementor-accordion .elementor-tab-title { font-family: var(--sem-font); font-size: 17px; font-weight: 600; color: var(--sem-ink); padding: 16px 20px; } body.semanat-v2 .sem-faq .elementor-accordion .elementor-tab-title.elementor-active { color: var(--sem-green-700); } body.semanat-v2 .sem-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon { color: var(--sem-green-600); } body.semanat-v2 .sem-faq .elementor-accordion .elementor-tab-content { font-size: 16px; color: var(--sem-ink-soft); padding: 0 20px 18px; border-top: 0; } body.semanat-v2 .sem-faq-wrap { max-width: 860px; margin: 0 auto; } /* privacy / classic content pages */ body.semanat-v2.page-template-default:not(.elementor-page) .ast-container { max-width: 860px; } body.semanat-v2.page-template-default:not(.elementor-page) .entry-content h2 { font-size: 24px; margin-top: 32px; } @media (max-width: 767px) { body.semanat-v2 .sem-mat-row .sem-card-tint { padding: 14px !important; } body.semanat-v2 .sem-faq .elementor-accordion .elementor-tab-title { font-size: 15px; padding: 14px 16px; } } /* Phase 2B: desktop header between Astra's mobile breakpoint (921px) and ~1100px — keep the 6-item menu + CTA on one line */ @media (min-width: 922px) and (max-width: 1100px) { body.semanat-v2 .main-header-menu .menu-item > .menu-link { font-size: 14px; padding-left: 0.6em; padding-right: 0.6em; } body.semanat-v2 .ast-header-button-1 .ast-custom-button { font-size: 13px; padding: 11px 16px; white-space: nowrap; } body.semanat-v2 .site-header .custom-logo-link img { max-height: 60px; } } /* ========================================================================== 7. PHASE 2B.2 — PREMIUM LAYER: extended tokens (logo blue → cyan → green), brand motif, editorial modules, micro-interactions. Motion only under prefers-reduced-motion: no-preference. ========================================================================== */ :root { /* extended palette sampled from the SEMANAT logo (navy #003070 · blue #0070B0 · cyan #0090C0 · green #609050) */ --sem-navy-900: #0B1F3A; /* deep editorial panel */ --sem-navy-800: #0F3B78; /* 10.6:1 on white — headings on tint */ --sem-blue-700: #0A5A9C; /* 7.0:1 — text / links on white */ --sem-blue-600: #0B6BB5; /* 5.6:1 — eyebrows, icons */ --sem-blue-500: #1580C9; /* 4.2:1 — large text / decorative only */ --sem-cyan-500: #1F9AD6; /* decorative (lines, gradients) — never body text on white */ --sem-cyan-300: #7CCBEE; /* on dark panels: 9.9:1 on navy-900 */ --sem-blue-100: #DCEBF8; --sem-blue-050: #EEF5FB; --sem-tint-mix: #EDF5F6; /* blue/green neutral tint for large surfaces */ --sem-grad: linear-gradient(90deg, #0F3B78 0%, #1F9AD6 52%, #2E9A5B 100%); --sem-ease: cubic-bezier(.2,.7,.2,1); } /* ---- brand motif: one gradient line, used sparingly (hero, section heads, numbers, separators) ---- */ .sem-motif { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--sem-grad); } .sem-motif.is-center { margin-left: auto; margin-right: auto; } .sem-motif.is-wide { width: 120px; } .sem-sep { border: 0; height: 1px; background: var(--sem-grad); opacity: .45; margin: 0; } .sem-num, .sem-num .elementor-heading-title { font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.03em; background: var(--sem-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sem-eyebrow.is-blue .elementor-heading-title { color: var(--sem-blue-700); } body.semanat-v2 .sem-eyebrow.is-blue.on-dark .elementor-heading-title { color: var(--sem-cyan-300); } /* ---- responsive pictures produced by photo_pipeline.py (owner photos first, licensed fallback) ---- */ .sem-pic { display: block; margin: 0; overflow: hidden; border-radius: var(--sem-radius-md); background: var(--sem-tint-mix); } .sem-pic img { display: block; width: 100%; height: auto; object-fit: cover; } .sem-pic.is-wide img { aspect-ratio: 16 / 9; } .sem-pic.is-3x2 img { aspect-ratio: 3 / 2; } .sem-pic.is-tall img { aspect-ratio: 4 / 5; } .sem-pic.is-sq img { aspect-ratio: 1 / 1; } .sem-pic figcaption { font-size: 12px; color: var(--sem-muted); padding: 6px 2px 0; } /* ---- hero variant A: asymmetric, large material photo bleeding to the right edge ---- */ body.semanat-v2 .sem-hero-a { position: relative; background: #fff; overflow: hidden; } body.semanat-v2 .sem-hero-a::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 8% 20%, var(--sem-blue-050) 0%, rgba(238,245,251,0) 70%); pointer-events: none; } body.semanat-v2 .sem-hero-a .sem-hero-media { position: relative; } body.semanat-v2 .sem-hero-a .sem-hero-media .sem-pic { border-radius: 18px 0 0 18px; box-shadow: 0 30px 60px -30px rgba(11,31,58,.45); } @media (min-width: 1025px) { body.semanat-v2 .sem-hero-a .sem-hero-media { margin-right: calc(50% - 50vw); width: calc(52.4% + 50vw - 50% - 8px) !important; max-width: none; align-self: flex-start; margin-top: 6px; } /* top-anchored: the image no longer moves when the text column height changes on font swap (CLS) */ /* literal width (not var(--width)) so the box never depends on Elementor's CSS timing */ body.semanat-v2 .sem-hero-a .sem-hero-media .sem-pic img { aspect-ratio: 5 / 4; min-height: 520px; } } @media (max-width: 1024px) { body.semanat-v2 .sem-hero-a .sem-hero-media .sem-pic { border-radius: var(--sem-radius-md); box-shadow: none; } body.semanat-v2 .sem-hero-a::before { display: none; } } /* mobile/tablet: no shadow / radial paint on the LCP element */ body.semanat-v2 .sem-hero-a .sem-hero-media::after { content: ""; position: absolute; left: -18px; bottom: 28px; width: 120px; height: 3px; background: var(--sem-grad); border-radius: 2px; } /* ---- hero variant B: editorial split on navy with the logo gradient as a light layer ---- */ /* ---------------------------------------------------------------- rotacja bohatera (HERO ROTATION 01) Slot jest ten sam co przy pojedynczym zdjęciu: `figure.sem-pic.is-tall` ma już promień, cień, proporcje i mobilne nadpisanie. Pierwszy slajd zostaje w normalnym przepływie i wyznacza wysokość figury; pozostałe leżą nad nim absolutnie. Dzięki temu zmiana slajdu nie może przesunąć bohatera, tekstu ani następnej sekcji — CLS z definicji zero, nie „zmierzone, że małe”. */ .sem-hero-rot { position: relative; } .sem-hero-rot .sem-hero-slide { display: block; } .sem-hero-rot .sem-hero-slide + .sem-hero-slide, .sem-hero-rot .sem-hero-slide:not(:first-of-type) { position: absolute; inset: 0; } .sem-hero-rot .sem-hero-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .sem-hero-rot .sem-hero-slide:first-of-type img { height: auto; } /* Przenikanie, nie przesuwanie: spokojne i bez ruchu, który odciąga wzrok od nagłówka. */ .sem-hero-rot .sem-hero-slide { opacity: 0; transition: opacity 850ms ease-in-out; } .sem-hero-rot .sem-hero-slide.is-active { opacity: 1; } .sem-hero-rot .sem-hero-slide:first-of-type { opacity: 1; } /* bez JS widać pierwszy slajd */ .sem-hero-rot .sem-hero-slide:first-of-type:not(.is-active) { opacity: 0; } .sem-hero-rot .sem-hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 2; } .sem-hero-rot .sem-hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); box-shadow: 0 1px 3px rgba(0,0,0,.35); cursor: pointer; transition: background-color .2s ease, width .2s ease; } .sem-hero-rot .sem-hero-dot.is-active { background: #fff; width: 20px; border-radius: 4px; } .sem-hero-rot .sem-hero-dot:hover { background: rgba(255,255,255,.8); } .sem-hero-rot .sem-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Pole dotyku 44 px bez powiększania samej kropki — wymóg mobilny, nie ozdoba. */ .sem-hero-rot .sem-hero-dot::before { content: ""; position: absolute; width: 44px; height: 44px; transform: translate(-50%, -50%); margin-left: 4px; margin-top: 4px; } .sem-hero-rot .sem-hero-dot { position: relative; } @media (prefers-reduced-motion: reduce) { .sem-hero-rot .sem-hero-slide { transition: none; } } body.semanat-v2 .sem-hero-b { position: relative; background: var(--sem-navy-900); overflow: hidden; } body.semanat-v2 .sem-hero-b::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(15,59,120,.85) 0%, rgba(31,154,214,.35) 55%, rgba(46,154,91,.55) 100%); mix-blend-mode: screen; opacity: .55; pointer-events: none; } body.semanat-v2 .sem-hero-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--sem-grad); } body.semanat-v2 .sem-hero-b .elementor-heading-title, body.semanat-v2 .sem-hero-b h1 { color: #fff; } body.semanat-v2 .sem-hero-b .sem-lead .elementor-widget-container { color: #D6E2EE; } body.semanat-v2 .sem-hero-b .sem-chips .elementor-widget-container { color: var(--sem-cyan-300); } body.semanat-v2 .sem-hero-b .sem-eyebrow .elementor-heading-title { color: var(--sem-cyan-300); } body.semanat-v2 .sem-hero-b .sem-pic { border-radius: var(--sem-radius-md); box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); } body.semanat-v2 .sem-hero-b .sem-btn-secondary .elementor-button { color: #fff; border-color: rgba(255,255,255,.55); } body.semanat-v2 .sem-hero-b .sem-btn-secondary .elementor-button:hover { background: rgba(255,255,255,.12); color: #fff; } /* ---- editorial split module (photo + text), replaces part of the card grids ---- */ body.semanat-v2 .sem-split .sem-pic { box-shadow: 0 24px 48px -28px rgba(11,31,58,.35); } /* ---- highlighted technical fact ---- */ .sem-fact { position: relative; padding: 22px 24px 22px 28px; border-radius: var(--sem-radius-md); background: #fff; border: 1px solid var(--sem-border); } .sem-fact::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 2px; background: var(--sem-grad); } .sem-fact-value { display: block; font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--sem-navy-800); } .sem-fact-label { display: block; font-size: 14px; color: var(--sem-ink-soft); margin-top: 6px; line-height: 1.45; } .sem-fact-src { display: block; font-size: 12px; color: var(--sem-muted); margin-top: 6px; } .sem-fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } /* ---- editorial statement block ---- */ .sem-statement { font-size: 26px; line-height: 1.35; font-weight: 500; color: var(--sem-ink); letter-spacing: -0.01em; max-width: 880px; } .sem-statement strong { color: var(--sem-navy-800); font-weight: 600; } @media (max-width: 767px) { .sem-statement { font-size: 20px; } } /* ---- horizontal flows: gradient connectors + animated arrows ---- */ .sem-flow-arrow { color: var(--sem-blue-500); } .sem-flow-step { border-color: var(--sem-blue-100); } .sem-flow-step.is-accent { background: var(--sem-navy-800); border-color: var(--sem-navy-800); } .sem-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; } .sem-path-node { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sem-ink); background: #fff; border: 1px solid var(--sem-blue-100); border-radius: 999px; padding: 10px 16px; white-space: nowrap; } .sem-path-node.is-core { background: var(--sem-navy-800); border-color: var(--sem-navy-800); color: #fff; } .sem-path-link { flex: 1 1 28px; min-width: 28px; height: 2px; background: var(--sem-grad); opacity: .85; position: relative; } .sem-path-link::after { content: ""; position: absolute; right: -1px; top: -4px; width: 0; height: 0; border-left: 7px solid var(--sem-green-500); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sem-path.on-dark .sem-path-node { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; } .sem-path.on-dark .sem-path-node.is-core { background: var(--sem-cyan-500); border-color: var(--sem-cyan-500); color: var(--sem-navy-900); } .sem-path-label { flex-basis: 100%; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sem-muted); margin-top: 6px; } .sem-path.on-dark .sem-path-label { color: #9FB3C8; } @media (max-width: 767px) { .sem-path { flex-direction: column; align-items: stretch; gap: 0; } .sem-path-node { text-align: center; white-space: normal; } .sem-path-link { width: 2px; height: 26px; flex: 0 0 26px; margin: 0 auto; } .sem-path-link::after { right: -4px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--sem-green-500); border-bottom: 0; } } /* ---- CONFIDENTIAL INDUSTRY NETWORK module: categories only, SEMANAT in the middle, no company names ---- */ .sem-net { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px 32px; align-items: center; } .sem-net-col { display: grid; gap: 10px; } .sem-net-col h3 { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sem-blue-700); margin: 0 0 4px; } .sem-net-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--sem-border); border-radius: var(--sem-radius-sm); background: #fff; font-size: 15px; font-weight: 500; color: var(--sem-ink); } .sem-net-item svg { width: 22px; height: 22px; flex: 0 0 22px; stroke: var(--sem-blue-600); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sem-net-item::after { content: ""; position: absolute; top: 50%; width: 32px; height: 2px; background: var(--sem-grad); opacity: 0; transform: scaleX(0); } .sem-net-col.is-left .sem-net-item::after { right: -32px; transform-origin: left; } .sem-net-col.is-right .sem-net-item::after { left: -32px; transform-origin: right; } .sem-net-core { position: relative; text-align: center; width: 190px; height: 190px; border-radius: 50%; display: grid; place-content: center; gap: 4px; color: #fff; background: var(--sem-navy-800); box-shadow: 0 0 0 8px rgba(31,154,214,.10), 0 0 0 16px rgba(46,154,91,.06); } .sem-net-core::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--sem-grad); z-index: -1; } .sem-net-core strong { font-size: 20px; letter-spacing: .08em; } .sem-net-core span { font-size: 12px; color: #BFD7EA; letter-spacing: .04em; line-height: 1.35; padding: 0 22px; } .sem-net-note { font-size: 13px; color: var(--sem-muted); } @media (max-width: 900px) { .sem-net { grid-template-columns: 1fr; justify-items: stretch; gap: 20px; } .sem-net-core { width: 150px; height: 150px; margin: 0 auto; } .sem-net-item::after { display: none; } .sem-net-col.is-left { order: 1; } .sem-net-core-wrap { order: 2; } .sem-net-col.is-right { order: 3; } .sem-net-col { grid-template-columns: 1fr 1fr; } .sem-net-col h3 { grid-column: 1 / -1; } } @media (max-width: 520px) { .sem-net-col { grid-template-columns: 1fr; } } /* ---- 4-layer business model (RYNEK · SEMANAT · TECHNOLOGIA · KLIENT) ---- */ .sem-layers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sem-layer { position: relative; padding: 26px 22px 22px; border-radius: var(--sem-radius-md); background: #fff; border: 1px solid var(--sem-border); } .sem-layer::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 2px 2px; background: var(--sem-layer-c, var(--sem-grad)); } .sem-layer:nth-child(1) { --sem-layer-c: var(--sem-navy-800); } .sem-layer:nth-child(2) { --sem-layer-c: var(--sem-blue-600); } .sem-layer:nth-child(3) { --sem-layer-c: var(--sem-cyan-500); } .sem-layer:nth-child(4) { --sem-layer-c: var(--sem-green-600); } .sem-layer.is-core { background: var(--sem-navy-900); border-color: var(--sem-navy-900); color: #D6E2EE; } .sem-layer.is-core .sem-layer-t, .sem-layer.is-core li { color: #fff; } .sem-layer-n { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--sem-muted); margin-bottom: 8px; } .sem-layer.is-core .sem-layer-n { color: var(--sem-cyan-300); } .sem-layer-t { display: block; font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--sem-ink); margin-bottom: 12px; } .sem-layer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .sem-layer li { position: relative; padding-left: 14px; font-size: 15px; color: var(--sem-ink-soft); line-height: 1.4; } .sem-layer li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sem-layer-c, var(--sem-green-500)); } .sem-layer.is-core li::before { background: var(--sem-cyan-300); } @media (max-width: 1024px) { .sem-layers { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .sem-layers { grid-template-columns: 1fr; } } /* ---- Material Finder teaser (component + place for Phase 2C; no logic yet) ---- */ .sem-finder { position: relative; border-radius: 16px; padding: 36px 36px 32px; background: linear-gradient(135deg, var(--sem-blue-050) 0%, #F3F8F5 100%); border: 1px solid var(--sem-blue-100); overflow: hidden; } .sem-finder::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sem-grad); } .sem-finder-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; margin-bottom: 22px; } .sem-finder-head h3 { margin: 0; font-size: 24px; font-weight: 700; color: var(--sem-ink); letter-spacing: -0.01em; } .sem-finder-tag { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sem-blue-700); background: #fff; border: 1px solid var(--sem-blue-100); border-radius: 999px; padding: 5px 10px; } .sem-finder-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 12px; } .sem-finder-step { background: #fff; border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); padding: 18px 18px 16px; } .sem-finder-step b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--sem-navy-800); margin-bottom: 6px; } .sem-finder-step span { display: block; font-size: 14px; color: var(--sem-ink-soft); line-height: 1.45; } .sem-finder-step small { display: block; margin-top: 10px; font-size: 12px; color: var(--sem-muted); } .sem-finder-arrow { align-self: center; width: 36px; height: 2px; background: var(--sem-grad); position: relative; } .sem-finder-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--sem-green-500); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .sem-finder-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 22px; } .sem-finder-note { font-size: 13px; color: var(--sem-muted); } /* Kolor, typografia i geometria: KANONICZNY SYSTEM PRZYCISKÓW wyżej. Tutaj zostaje wyłącznie to, co jest własne dla tego komponentu — uniesienie i cień przy najechaniu. Wcześniej ta reguła miała własny granat i własny rozmiar czcionki, przez co ten sam przycisk kupującego wyglądał inaczej na stronie materiałowej niż w paśmie CTA. */ body.semanat-v2 .sem-finder-cta:hover, body.semanat-v2 .sem-finder-cta:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(11,107,181,.55); } .sem-finder-cta svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform var(--sem-transition); } .sem-finder-cta:hover svg { transform: translateX(3px); } @media (max-width: 767px) { .sem-finder { padding: 24px 18px 22px; } .sem-finder-steps { grid-template-columns: 1fr; } .sem-finder-arrow { width: 2px; height: 22px; margin: 0 auto; } .sem-finder-arrow::after { right: -4px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--sem-green-500); border-bottom: 0; } } /* ---- anonymous case study component (structure only — OWNER CONTENT REQUIRED) ---- */ .sem-case { border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); background: #fff; padding: 24px; display: grid; gap: 12px; position: relative; } .sem-case::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; background: var(--sem-grad); border-radius: 0 0 2px 2px; } .sem-case-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sem-blue-700); } .sem-case dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; } .sem-case dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sem-muted); padding-top: 2px; } .sem-case dd { margin: 0; font-size: 15px; color: var(--sem-ink-soft); } .sem-case-req { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A4B00; background: #FFF4E0; border: 1px solid #F6DFB4; border-radius: 4px; padding: 3px 7px; } .sem-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 767px) { .sem-cases { grid-template-columns: 1fr; } .sem-case dl { grid-template-columns: 1fr; gap: 2px 0; } .sem-case dd { margin-bottom: 8px; } } /* ---- section numbering (material rows etc.) ---- */ .sem-secnum, .sem-secnum .elementor-heading-title { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--sem-blue-700); } /* ---- micro-interactions ---- */ body.semanat-v2 .sem-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 40px -20px rgba(11,31,58,.35); } body.semanat-v2 .sem-pic.is-hover img { transition: transform 600ms var(--sem-ease); } body.semanat-v2 .sem-pic.is-hover:hover img { transform: scale(1.03); } body.semanat-v2 .elementor-button .elementor-button-icon { transition: transform var(--sem-transition); } body.semanat-v2 .elementor-button:hover .elementor-button-icon, body.semanat-v2 .elementor-button:focus .elementor-button-icon { transform: translateX(4px); } body.semanat-v2 .elementor-button:active, body.semanat-v2 .ast-custom-button:active, body.semanat-v2 .sem-finder-cta:active { transform: scale(.98); } body.semanat-v2 .sem-btn-primary .elementor-button:hover { box-shadow: 0 10px 24px -12px rgba(30,122,70,.7); transform: translateY(-1px); } body.semanat-v2 .main-header-menu .menu-item > .menu-link { position: relative; } body.semanat-v2 .main-header-menu .menu-item > .menu-link::after { content: ""; position: absolute; left: 1em; right: 1em; bottom: .45em; height: 2px; background: var(--sem-grad); border-radius: 1px; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--sem-ease); } body.semanat-v2 .main-header-menu .menu-item > .menu-link:hover::after, body.semanat-v2 .main-header-menu .menu-item > .menu-link:focus-visible::after, body.semanat-v2 .main-header-menu .current-menu-item > .menu-link::after { transform: scaleX(1); } body.semanat-v2 .elementor-widget-text-editor a:not(.elementor-button), body.semanat-v2 .site-footer .widget a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%; text-decoration: none; transition: background-size 220ms var(--sem-ease); } body.semanat-v2 .elementor-widget-text-editor a:not(.elementor-button):hover, body.semanat-v2 .site-footer .widget a:hover { background-size: 100% 1px; } @media (prefers-reduced-motion: no-preference) { .sem-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--sem-ease), transform 600ms var(--sem-ease); } .sem-reveal.is-in { opacity: 1; transform: none; } .sem-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--sem-ease), transform 520ms var(--sem-ease); } .sem-stagger.is-in > * { opacity: 1; transform: none; } .sem-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; } .sem-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; } .sem-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; } .sem-stagger.is-in > *:nth-child(5) { transition-delay: 280ms; } .sem-stagger.is-in > *:nth-child(6) { transition-delay: 350ms; } .sem-stagger.is-in > *:nth-child(7) { transition-delay: 420ms; } .sem-stagger.is-in > *:nth-child(n+8) { transition-delay: 490ms; } .sem-img-reveal .sem-pic img, .sem-img-reveal.elementor-widget-image img { clip-path: inset(0 0 0 100%); transition: clip-path 900ms var(--sem-ease); } .sem-img-reveal.is-in .sem-pic img, .sem-img-reveal.is-in.elementor-widget-image img { clip-path: inset(0 0 0 0); } .sem-net .sem-net-item::after { transition: transform 500ms var(--sem-ease), opacity 400ms; } .sem-net.is-in .sem-net-item::after { opacity: 1; transform: scaleX(1); } .sem-net.is-in .sem-net-col .sem-net-item:nth-child(3)::after { transition-delay: 120ms; } .sem-net.is-in .sem-net-col .sem-net-item:nth-child(4)::after { transition-delay: 200ms; } .sem-net.is-in .sem-net-col .sem-net-item:nth-child(5)::after { transition-delay: 280ms; } .sem-net.is-in .sem-net-core::before { animation: sem-ring 4s ease-in-out 3; } @keyframes sem-ring { 0%, 100% { opacity: .85; } 50% { opacity: 1; } } /* connectors: composited transform nudge on the arrow heads only (no background-position repaints), 3 iterations after reveal */ .sem-path.is-in .sem-path-link::after, .sem-finder.is-in .sem-finder-arrow::after { animation: sem-nudge 1.6s ease-in-out 3; } .sem-flow-arrow { display: inline-block; animation: sem-nudge 1.8s ease-in-out 4; } @keyframes sem-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes sem-nudge-y { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(4px); } } .sem-layer::before { transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--sem-ease); } .sem-layers.is-in .sem-layer::before { transform: scaleX(1); } .sem-layers.is-in .sem-layer:nth-child(2)::before { transition-delay: 120ms; } .sem-layers.is-in .sem-layer:nth-child(3)::before { transition-delay: 240ms; } .sem-layers.is-in .sem-layer:nth-child(4)::before { transition-delay: 360ms; } } @media (prefers-reduced-motion: no-preference) and (max-width: 767px) { .sem-flow-arrow { animation-name: sem-nudge-y; } } @media (prefers-reduced-motion: reduce) { body.semanat-v2 *, body.semanat-v2 *::before, body.semanat-v2 *::after { animation: none !important; transition-duration: 1ms !important; } body.semanat-v2 .sem-card:hover, body.semanat-v2 .sem-pic.is-hover:hover img { transform: none; } } /* ========================================================================== 8. PHASE 2B.3 — FINAL POLISH: hero B mobile rhythm, draft-hidden, material index/accordion, mobile perf pass (no new colours, no new animations, no new sections) ========================================================================== */ /* hero B on tablet/mobile: lower dark first screen — 16:9 photo, tighter spacing, gradient base + breathing room before the pillars */ @media (max-width: 1024px) { body.semanat-v2 .sem-hero-b .sem-hero-media .sem-pic img { aspect-ratio: 16 / 9; } body.semanat-v2 .sem-hero-b .sem-hero-media .sem-pic { box-shadow: none; } body.semanat-v2 .sem-hero-b::before { display: none; } /* no blend layer to paint on mobile (perf) */ body.semanat-v2 .sem-hero-b + .e-con { margin-top: 12px; } /* rhythm: light gap between the navy hero and the graphite pillars */ } @media (max-width: 767px) { body.semanat-v2 .sem-hero-b .sem-lead .elementor-widget-container { font-size: 16px; } body.semanat-v2 .sem-hero-b .sem-chips .elementor-widget-container { font-size: 13px; } body.semanat-v2 .sem-hero-b .elementor-widget-button .elementor-button { padding: 12px 20px; font-size: 14px; } } @media (min-width: 1025px) { body.semanat-v2 .sem-hero-b { flex-direction: row-reverse; } } /* backup for the Elementor setting: text left, photo right */ @media (max-width: 1024px) { body.semanat-v2 .sem-hero-b { flex-direction: column; } } /* components kept in the template but not shown until the owner supplies content */ body.semanat-v2 .sem-draft-hidden { display: none !important; } /* material groups: compact jump index (chips) */ .sem-mat-index { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 8px; } .sem-mat-index a { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sem-blue-700); background: #fff; border: 1px solid var(--sem-blue-100); border-radius: 999px; padding: 8px 14px; text-decoration: none; transition: background-color var(--sem-transition), border-color var(--sem-transition); } .sem-mat-index a:hover, .sem-mat-index a:focus-visible { background: var(--sem-blue-050); border-color: var(--sem-blue-500); color: var(--sem-navy-800); } @media (max-width: 767px) { .sem-mat-index { justify-content: flex-start; gap: 6px; } .sem-mat-index a { font-size: 12px; padding: 7px 11px; } } /* material groups on mobile: collapsible rows (JS adds the toggle; all content stays in the HTML) */ @media (max-width: 767px) { body.semanat-v2 .sem-mat-acc > .e-con:last-child { display: none; } body.semanat-v2 .sem-mat-acc.is-open > .e-con:last-child { display: flex; } body.semanat-v2 .sem-mat-acc .sem-mat-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; background: transparent; border: 1px solid var(--sem-blue-100); color: var(--sem-blue-700); font: 600 13px/1.2 var(--sem-font); letter-spacing: .04em; border-radius: var(--sem-radius-sm); padding: 9px 12px; cursor: pointer; } body.semanat-v2 .sem-mat-acc .sem-mat-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; } body.semanat-v2 .sem-mat-acc.is-open .sem-mat-toggle::after { transform: rotate(-135deg); margin-top: 3px; } body.semanat-v2 .sem-mat-acc > .e-con:first-child { gap: 8px !important; } } @media (min-width: 768px) { body.semanat-v2 .sem-mat-toggle { display: none !important; } } /* mobile performance pass: static presentation of the reveal/stagger/network/layers on phones (content identical) */ @media (max-width: 767px) { .sem-reveal, .sem-stagger > *, .sem-img-reveal .sem-pic img, .sem-img-reveal.elementor-widget-image img { opacity: 1 !important; transform: none !important; transition: none !important; clip-path: none !important; } .sem-net .sem-net-item::after, .sem-net-core::before, .sem-layer::before, .sem-path-link::after, .sem-finder-arrow::after, .sem-flow-arrow { animation: none !important; transition: none !important; } .sem-layer::before { transform: none !important; } .sem-net-core::before { opacity: 1; } /* skip rendering work for sections far below the fold until they approach the viewport */ body.semanat-v2 [data-elementor-type="wp-page"] > .e-parent:nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 720px; } } /* ===================================================================== Phase 2C.2 — material pages + knowledge hub */ .sem-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--sem-muted); } .sem-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--sem-steel); } .sem-crumbs a { color: var(--sem-muted); text-decoration: none; } .sem-crumbs a:hover, .sem-crumbs a:focus-visible { color: var(--sem-green-700); text-decoration: underline; } .sem-crumbs li[aria-current] { color: var(--sem-ink-soft); font-weight: 500; } .sem-prose .elementor-widget-container { max-width: 780px; font-size: 17px; line-height: 1.65; } .sem-prose h2 { font-size: 26px; margin: 36px 0 12px; } .sem-prose h3 { font-size: 20px; margin: 24px 0 8px; } .sem-prose p { margin: 0 0 14px; } .sem-prose ul, .sem-prose ol { margin: 0 0 16px 22px; } .sem-prose li { margin: 0 0 8px; } .sem-prose strong { color: var(--sem-ink); } .sem-article { max-width: 860px; } .sem-review { border-left: 4px solid var(--sem-blue-500, #1580C9); background: var(--sem-blue-050, #EEF5FB); color: var(--sem-ink-soft); padding: 12px 16px; border-radius: 0 var(--sem-radius-sm) var(--sem-radius-sm) 0; font-size: 14px; max-width: 780px; } .sem-rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; } .sem-rel { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--sem-surface); border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); text-decoration: none; color: var(--sem-ink-soft); transition: border-color var(--sem-transition), box-shadow var(--sem-transition), transform var(--sem-transition); } .sem-rel:hover, .sem-rel:focus-visible { border-color: var(--sem-green-500); box-shadow: var(--sem-shadow); transform: translateY(-2px); color: var(--sem-ink-soft); } .sem-rel-k { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sem-green-600); } .sem-rel strong { color: var(--sem-ink); font-size: 17px; line-height: 1.25; } .sem-rel span:last-child { font-size: 14px; color: var(--sem-muted); } .sem-conf { border: 1px solid var(--sem-border); border-left: 4px solid var(--sem-green-600); border-radius: var(--sem-radius-md); background: var(--sem-surface); padding: 16px 20px; font-size: 15px; } .sem-conf p { margin: 0 0 6px; } .sem-conf p:last-child { margin: 0; } .sem-conf .sem-small { color: var(--sem-muted); } .sem-checks.is-warn .elementor-icon-list-icon svg, .sem-checks.is-warn .elementor-icon-list-icon i { color: #7A4B00 !important; fill: #7A4B00 !important; } .sem-mat-index.is-links a { text-transform: none; letter-spacing: 0; font-size: 15px; padding: 10px 16px; } @media (max-width: 767px) { .sem-prose .elementor-widget-container { font-size: 16px; } .sem-prose h2 { font-size: 22px; margin: 28px 0 10px; } .sem-rel-grid { grid-template-columns: 1fr; } .sem-crumbs ol { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .sem-rel { transition: none; } .sem-rel:hover { transform: none; } } /* ========================================================================== Phase 2C.2.1 — professional QA: web typography, legal/editorial blocks, contrast ========================================================================== */ body.semanat-v2 h1, body.semanat-v2 h2, body.semanat-v2 h3, body.semanat-v2 .sem-finder-head h3, body.semanat-v2 .sem-fw-title { text-wrap: balance; } body.semanat-v2 p, body.semanat-v2 li, body.semanat-v2 .sem-lead .elementor-widget-container, body.semanat-v2 .sem-statement { text-wrap: pretty; } .sem-fact-src { color: #5B6670; } /* 5.4:1 on white (was --sem-muted 4.3:1) */ .sem-legal { border: 1px solid var(--sem-border); border-left: 4px solid var(--sem-navy-800); border-radius: var(--sem-radius-md); background: #fff; padding: 14px 18px; font-size: 14px; color: var(--sem-ink-soft); } .sem-legal p { margin: 0; } .sem-sources { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sem-border); max-width: 780px; } .sem-sources h2 { font-size: 20px; margin: 0 0 10px; } .sem-sources ul { margin: 0 0 10px 18px; padding: 0; font-size: 14px; color: var(--sem-ink-soft); } .sem-sources li { margin: 0 0 6px; } .sem-sources .sem-small { font-size: 13px; color: #5B6670; } .sem-model { border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); background: var(--sem-surface); padding: 18px 22px; } .sem-model h3 { margin: 0 0 8px; font-size: 20px; } .sem-model p { margin: 0 0 6px; } .sem-model .sem-small { color: #5B6670; margin: 0; } .sem-form-privacy p, .sem-form-terms p, .sem-form-upload-note { font-size: 13px; line-height: 1.5; color: var(--sem-ink-soft); margin: 0; } .sem-form-privacy a, .sem-form-terms a, .sem-fw-privacy a, .sem-fw-terms a { text-decoration: underline; } .sem-fw-privacy { margin: 14px 0 6px; } .sem-fw-terms { margin: 10px 0 0; } body.semanat-v2 .page-id-3 .entry-content, body.semanat-v2 .page-regulamin-uslug-elektronicznych .entry-content { max-width: 820px; } body.semanat-v2 .page-id-3 .entry-content h2, body.semanat-v2 .page-regulamin-uslug-elektronicznych .entry-content h2 { font-size: 24px; margin-top: 32px; } body.semanat-v2 .page-id-3 .entry-content li, body.semanat-v2 .page-regulamin-uslug-elektronicznych .entry-content li { margin-bottom: 8px; } /* ---- Phase 2D.5: semanat-core forms (Elementor Pro exit) — skin parity with the former Pro form ---- */ .sem-form-embed .elementor-widget-container { width: 100%; } .semanat-v2 .sem-form .elementor-field-label { font-size: var(--sem-small); font-weight: 600; color: var(--sem-ink); margin-bottom: 6px; } .semanat-v2 .sem-form .elementor-field-textual { border: 1px solid var(--sem-border); border-radius: var(--sem-radius-sm); background: var(--sem-white); color: var(--sem-ink); font-size: 16px; padding: 12px 14px; } .semanat-v2 .sem-form .elementor-field-textual:focus { border-color: var(--sem-green-600); box-shadow: 0 0 0 3px var(--sem-green-100); outline: none; } .semanat-v2 .sem-form .elementor-button[type="submit"] { background: var(--sem-green-600); color: #fff; border-radius: var(--sem-radius-sm); font-weight: 600; padding: 14px 28px; } .semanat-v2 .sem-form .elementor-button[type="submit"]:hover, .semanat-v2 .sem-form .elementor-button[type="submit"]:focus-visible { background: var(--sem-green-700); } .semanat-v2 .sem-form .elementor-field-type-acceptance label { font-weight: 400; color: var(--sem-ink-soft); } .semanat-v2 .sem-form .elementor-field-group.sem-hidden { display: none !important; } /* ---- 2D a11y fixes from Lighthouse (Kontakt): file input contrast, link distinguishability in the information layer and footer credit ---- */ body.semanat-v2 .sem-form .elementor-upload-field { color: var(--sem-ink-soft); } body.semanat-v2 .sem-form .sem-form-privacy a, body.semanat-v2 .sem-form .sem-form-terms a, body.semanat-v2 .sem-fw-privacy a, body.semanat-v2 .sem-fw-terms a, body.semanat-v2 .sem-form-upload-note a { text-decoration: underline !important; text-underline-offset: 2px; color: var(--sem-green-700); } body.semanat-v2 .site-footer a[rel~="license"], body.semanat-v2 .ast-builder-html-element a { text-decoration: underline; text-underline-offset: 2px; } /* ---- knowledge base series 1 (levels, research brief, infographic, tables, inline CTA) ---- */ .sem-kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--sem-ink-soft); max-width: 780px; } .sem-level { display: inline-block; font-weight: 700; letter-spacing: .08em; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sem-border); background: #fff; } .sem-level.is-podstawy { color: var(--sem-green-700); border-color: var(--sem-green-100); background: var(--sem-green-050); } .sem-level.is-praktyka { color: var(--sem-blue-700); border-color: var(--sem-blue-100); background: var(--sem-blue-050); } .sem-level.is-ekspert { color: var(--sem-navy-800); border-color: var(--sem-navy-800); background: #fff; } .sem-brief { display: inline-block; font-weight: 700; letter-spacing: .08em; font-size: 12px; padding: 4px 10px; border-radius: 4px; background: var(--sem-navy-800); color: #fff; } .sem-kb-cats { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 12px; } .sem-kb-date { color: var(--sem-muted); } .sem-kb-level-h { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--sem-blue-700); margin: 8px 0 -6px; } .sem-prose blockquote { margin: 18px 0; padding: 12px 20px; border-left: 4px solid var(--sem-green-600); background: var(--sem-green-050); border-radius: 0 var(--sem-radius-sm) var(--sem-radius-sm) 0; } .sem-prose blockquote p { margin: 0; font-weight: 500; } .sem-table-wrap { overflow-x: auto; margin: 18px 0; -webkit-overflow-scrolling: touch; } .sem-table { width: 100%; border-collapse: collapse; font-size: 15px; } .sem-table th, .sem-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--sem-border); vertical-align: top; } .sem-table th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--sem-blue-700); background: var(--sem-bg-alt); } .sem-info3 { margin: 24px 0; padding: 22px 20px; border: 1px solid var(--sem-border); border-radius: var(--sem-radius-md); background: #fff; } .sem-info3-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sem-info3-card { position: relative; padding: 18px 16px 16px; border-radius: var(--sem-radius-md); background: var(--sem-bg-alt); border: 1px solid var(--sem-border); text-align: center; } .sem-info3-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--sem-grad); } .sem-info3-type { display: block; font-weight: 700; font-size: 18px; color: var(--sem-navy-800); } .sem-info3-mfr { display: block; font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: var(--sem-green-700); margin-top: 6px; } .sem-info3-unit { display: block; font-size: 12px; color: var(--sem-muted); margin-top: 2px; } .sem-info3-name { display: block; font-size: 14px; font-weight: 600; margin-top: 10px; } .sem-info3-grade { display: block; font-size: 12px; color: var(--sem-ink-soft); margin-top: 4px; } .sem-info3 figcaption { margin-top: 14px; font-size: 14px; color: var(--sem-ink-soft); text-align: center; } .sem-cta-inline { margin: 28px 0 8px; padding: 22px 24px; border-radius: var(--sem-radius-md); background: var(--sem-blue-050); border: 1px solid var(--sem-blue-100); max-width: 780px; } .sem-cta-inline p { margin: 0 0 14px; font-size: 16px; } .sem-methodnote { max-width: 780px; margin-top: 18px; } @media (max-width: 767px) { .sem-info3-row { grid-template-columns: 1fr; } .sem-info3-mfr { font-size: 28px; } .sem-table { font-size: 14px; } } /* ========================================================================== MOBILE VISUAL POLISH 01 — korekta responsywna, bez zmiany projektu -------------------------------------------------------------------------- Wszystko poniżej żyje wyłącznie poniżej 768 px. Desktop nie jest ruszany. Zdiagnozowane na wyrenderowanej produkcji, nie „na oko”: · wiersz formularza był flexem w poziomie, a pole miało sztywne 312 px — przy widoku 390 px pola kończyły się na 403, 468 i 520 px, każde w innym miejscu, bo przesuwała je etykieta o innej długości; · karty `.sem-card` trzymały desktopowe 48,4 % i nie mieściły się po dwie w wierszu, więc stały w kolumnie jako połówki z ~190 px pustki obok; · sekcje z `.sem-note` miały ZEROWY margines boczny — tekst dotykał krawędzi. Strona główna w stanie zaakceptowanym jest chroniona wykluczeniami: `.sem-mat-card`, `.sem-help-card` i wnętrze `.sem-steps-flow` zostają bez zmian. ========================================================================== */ @media (max-width: 767px) { /* --- 1. Jeden margines boczny dla całej strony --------------------------- Margines siada na `.e-con-inner`, a nie na kontenerze zewnętrznym: dzięki temu tła sekcji i panorama stopki dalej idą od krawędzi do krawędzi, a treść nie. */ body.semanat-v2 .elementor > .e-con.e-con-boxed > .e-con-inner { padding-left: 20px !important; padding-right: 20px !important; } /* Wewnętrzne kontenery miały własne 10 px — bez tego margines zrobiłby się 30 px. */ body.semanat-v2 .elementor > .e-con.e-con-boxed > .e-con-inner > .e-con.e-con-full { padding-left: 0 !important; padding-right: 0 !important; } /* --- 2. Formularze: jedna kolumna, etykieta NAD polem -------------------- */ body.semanat-v2 .sem-form .elementor-form-fields-wrapper { display: block; } body.semanat-v2 .sem-form .elementor-field-group { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 0 0 100% !important; box-sizing: border-box; margin-bottom: 16px; } body.semanat-v2 .sem-form .elementor-field-group > .elementor-field-label { display: block; width: 100%; margin: 0 0 6px; } body.semanat-v2 .sem-form .elementor-field-group > .elementor-field, body.semanat-v2 .sem-form .elementor-select-wrapper, body.semanat-v2 .sem-form input.elementor-field-textual, body.semanat-v2 .sem-form select.elementor-field-textual, body.semanat-v2 .sem-form textarea.elementor-field-textual { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } body.semanat-v2 .sem-form textarea.elementor-field-textual { resize: vertical; } body.semanat-v2 .sem-form .elementor-field-type-submit .elementor-button { width: 100%; } /* --- 3. Karty: pełna szerokość zamiast połówki w kolumnie ---------------- */ body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card:not(.sem-mat-card):not(.sem-help-card) { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; padding: 24px !important; } /* --- 4. Kompozycja krótkiej karty: ikona, tytuł, opis — wyśrodkowane ----- Ikona nad tytułem, nie obok niego: obok zjadała połowę i tak wąskiej karty. */ body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card:not(.sem-mat-card):not(.sem-help-card) .elementor-icon-box-wrapper { display: block; text-align: center; } body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card:not(.sem-mat-card):not(.sem-help-card) .elementor-icon-box-icon { margin: 0 auto 12px !important; float: none !important; } body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card:not(.sem-mat-card):not(.sem-help-card) .elementor-icon-box-content { width: 100% !important; text-align: center; } body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card:not(.sem-mat-card):not(.sem-help-card) .elementor-icon-box-description { width: 100% !important; max-width: 100% !important; } /* --- 5. Karty procesu: numer i tytuł na środku, treść do lewej ---------- Długi akapit czyta się lepiej wyrównany do lewej — ale ma dostać CAŁĄ szerokość karty, a nie wąską kolumnę obok numeru. */ body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card.sem-step > .elementor-widget-heading, body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card.sem-step .elementor-heading-title { text-align: center; } body.semanat-v2 .sem-stagger:not(.sem-steps-flow) > .e-con.sem-card.sem-step .elementor-widget-text-editor { text-align: left; width: 100% !important; max-width: 100% !important; } } /* ========================================================================== MENU GŁÓWNE — zmieszczenie ósmej pozycji („Oferty") -------------------------------------------------------------------------- Kolumna menu w nagłówku Astry ma STAŁĄ szerokość 875 px — taką samą na 1366 i na 1920 px. Siedem pozycji zajmowało 804 px. Ósma podniosła sumę do 904 px, czyli 29 px ponad kolumnę, więc „Oferty" spadały do drugiego wiersza i przy okazji rozbijały wysokość nagłówka oraz łamały przycisk CTA. Zmierzone, nie założone: menu 875 px, pozycje 904 px, padding 18 px na stronę. Zwężamy padding do 14 px wyłącznie w widoku desktopowego menu: 8 pozycji × 2 × 4 px = 64 px odzyskane, suma schodzi do ~840 px i zostaje zapas. Nie zmieniamy kroju, wielkości, koloru ani kolejności pozycji — to korekta odstępów, nie nowy projekt nagłówka. ========================================================================== */ @media (min-width: 922px) { .ast-desktop .main-header-menu > .menu-item > .menu-link, .ast-desktop #ast-hf-menu-1 > .menu-item > .menu-link { padding-left: 14px; padding-right: 14px; } } /* ========================================================================== PRÓG NAGŁÓWKA — druga połowa przełącznika (patrz filtr `astra_header_break_point`) -------------------------------------------------------------------------- Sam filtr NIE wystarczy. Astra przełącza nagłówek desktopowy na mobilny DWOMA niezależnymi mechanizmami: 1. klasą `ast-header-break-point` na , dokładaną przez JS — tę przestawia filtr, 2. wygenerowaną regułą `@media (max-width: 921.99px) { #ast-desktop-header{display:none} }` — ta jest wpisana na sztywno i filtr jej nie dotyka. Po samym filtrze w paśmie 922–1199 px widoczne były JEDNOCZEŚNIE oba nagłówki: hamburger oraz menu desktopowe rozbite na osiem wierszy, nagłówek 439 px wysokości. Zmierzone, nie założone. Poniżej przesuwamy drugi mechanizm na ten sam próg. Przełączenie jest tu czysto CSS-owe, więc nie zależy od tego, kiedy JS zdąży dołożyć klasę — na każdej szerokości widoczny jest DOKŁADNIE jeden nagłówek. Próg treści strony (`tablet` = 921 px) pozostaje nietknięty. ========================================================================== */ @media (max-width: 1198.99px) { #ast-desktop-header { display: none !important; } } @media (min-width: 1200px) { .ast-mobile-header-wrap { display: none !important; } }