/* * B08 - Promotion Hero Styles * * Full-bleed marketing hero (background image or brand gradient + dark overlay) * with the text constrained to a centred container. * * CSS Isolation: EVERY rule is scoped under .saly-ps-block-promotion-hero. * This is deliberate — other blocks reuse the generic .saly-ps-hero-* names * (e.g. B05_CategoryShowcase defines .saly-ps-hero-title), so unscoped rules * collide and lose the cascade. Scoping also raises specificity enough to beat * the storefront theme's h2 / dashboard-link rules. * Brand accent uses runtime tokens (var(--brand-500/-700), injected by the * storefront head.tpl) with literal Front-palette fallbacks for /preview. */ .saly-ps-block-promotion-hero { margin: 0; } /* Full-bleed band: break out of the centred layout container to span the * viewport width. Safe because has overflow-x: hidden. */ .saly-ps-block-promotion-hero .saly-ps-hero { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; min-height: var(--saly-ps-hero-height, 500px); display: flex; align-items: center; background-color: #2e3033; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* Brand gradient when no background image is configured */ .saly-ps-block-promotion-hero .saly-ps-hero--no-image { background-image: linear-gradient( 120deg, #2e3033 0%, var(--brand-700, #3d10be) 60%, var(--brand-500, #5e2ced) 100% ); } .saly-ps-block-promotion-hero .saly-ps-hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Text container — keeps the content aligned with the rest of the page even * though the background runs full width. */ .saly-ps-block-promotion-hero .saly-ps-hero-container { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); display: flex; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-left .saly-ps-hero-container { justify-content: flex-start; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-center .saly-ps-hero-container { justify-content: center; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-right .saly-ps-hero-container { justify-content: flex-end; } .saly-ps-block-promotion-hero .saly-ps-hero-content { max-width: 600px; color: #ffffff; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-left .saly-ps-hero-content { text-align: left; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-center .saly-ps-hero-content { text-align: center; } .saly-ps-block-promotion-hero .saly-ps-hero--pos-right .saly-ps-hero-content { text-align: right; } /* Title scale matches the B01 slider banner title (.saly-ps-slider-title: 36px/700). */ .saly-ps-block-promotion-hero .saly-ps-hero-title { margin: 0 0 14px; font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15; font-weight: 700; color: #ffffff; } .saly-ps-block-promotion-hero .saly-ps-hero-subtitle { margin: 0 0 24px; font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.45; color: rgba(255, 255, 255, 0.92); } /* CTA — color forced over the dashboard's high-specificity link rule * (.saly-ps-personalized-dashboard a:not(...) { color: var(--brand-500) }). */ /* Sizing matches the B09 newsletter "Zapisz się" button for cross-block * consistency: 48px tall, 4px radius, 14px/600. */ .saly-ps-block-promotion-hero .saly-ps-hero-cta-button { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: 4px; font-weight: 600; font-size: 0.875rem; line-height: 1; text-decoration: none; color: #ffffff !important; background: var(--brand-500, #5e2ced); transition: background 0.2s ease; } .saly-ps-block-promotion-hero .saly-ps-hero-cta-button:hover, .saly-ps-block-promotion-hero .saly-ps-hero-cta-button:focus { color: #ffffff !important; background: var(--brand-700, #3d10be); } @media (max-width: 640px) { .saly-ps-block-promotion-hero .saly-ps-hero-content { max-width: 100%; } }