/** * Blok: hero-banner-form-strategy * Style dla elementów, które używają arbitralnych klas Tailwinda * (portret + czerwony dymek). Potrzebne, gdy CSS nie jest przebudowywany * Tailwindem. Wartości są 1:1 z klasami w index.php. * * Zakładam 1rem = 10px (font-size: 62.5% na ), jak w reszcie motywu. */ /* ===== Portret ===== */ .hero-banner-form-strategy-section .hs-portrait { position: relative; /* Wypełnia kolumnę (kolumna jest ograniczona przez .container), dosunięty do prawej. Przywrócony rozmiar z makiety. */ width: 100%; max-width: none; margin-left: auto; } .hero-banner-form-strategy-section .hs-portrait__img { display: block; width: 100%; height: auto; aspect-ratio: 283 / 312; object-fit: cover; object-position: top; } /* ===== Czerwony dymek ===== */ .hero-banner-form-strategy-section .hs-badge { position: absolute; top: -3.5rem; left: 0; z-index: 1; /* ⚠︎ DOSTOSUJ: szerokość dymka */ width: 33rem; /* ⚠︎ DOSTOSUJ: realne proporcje Twojego SVG (width/height z viewBox) */ aspect-ratio: 130 / 68; /* Ścieżka do SVG — root-relative z mediów. Jeśli przeniesiesz plik do motywu, podmień na jego lokalizację. */ background-image: url("/wp-content/uploads/2026/07/dymek-strategy.svg"); background-repeat: no-repeat; background-position: left top; background-size: contain; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.2rem; /* ⚠︎ DOSTOSUJ: żeby tekst siedział w bańce, nad ogonkiem */ padding: 4.6rem 2rem 1.8rem 1.6rem; } @media (min-width: 1024px) { .hero-banner-form-strategy-section .hs-badge { left: -2.5rem; } } .hero-banner-form-strategy-section .hs-badge__name { font-weight: 700; color: #FCFCFD; line-height: 1.15; font-size: 1.3em; } .hero-banner-form-strategy-section .hs-badge__role { /* ⚠︎ DOSTOSUJ: kolor pod Twój token "gray" z motywu */ color: #FCFCFD; line-height: 1.15; font-size: 1em; } /* ===== Przycisk outline ("Zobacz pakiety") — czerwony border ===== */ .hero-banner-form-strategy-section .hs-btn--outline { /* Czerwony z motywu (--color-red) */ border-color: #D11317; color: #fff; background-color: transparent; } @media (min-width: 1024px) { .hero-banner-form-strategy-section .hs-btn--outline:hover, .hero-banner-form-strategy-section .hs-btn--outline:focus-visible { background-color: #D11317; color: #fff; } }