/* SoftLegal.cz – STABLE HERO v7 Use as the only SoftLegal hero CSS in . Built to avoid Shoptet Classic collisions. */ /* wrapper reset */ .sl-home-final, .sl-home-final * { box-sizing: border-box !important; } .sl-home-final { --sl-navy: #061a33; --sl-blue: #236fe4; --sl-blue-dark: #0f5bc7; --sl-green: #27b34a; --sl-green-dark: #1f9d3f; --sl-text: #42516a; --sl-border: #d8e8ff; --sl-bg: #f4f9ff; --sl-white: #fff; width: min(1580px, calc(100% - 72px)) !important; margin: 34px auto 72px !important; padding: 0 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; color: var(--sl-navy) !important; } /* HERO: open section, no card border */ .sl-home-final .sl-hero-final { position: relative !important; overflow: hidden !important; min-height: 610px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: radial-gradient(circle at 0% 100%, rgba(40, 179, 74, .13) 0, rgba(40,179,74,0) 24%), linear-gradient(90deg, #ffffff 0%, #ffffff 38%, #f7fbff 55%, #edf6ff 100%) !important; } /* the actual product image behaves as a background layer, not a card */ .sl-home-final .sl-hero-final__visual { position: absolute !important; inset: 0 0 0 auto !important; width: 64% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 1 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .sl-home-final .sl-hero-final__visual::before { content: "" !important; position: absolute !important; inset: 0 auto 0 0 !important; width: 35% !important; z-index: 2 !important; pointer-events: none !important; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.96) 18%, rgba(255,255,255,.62) 58%, rgba(255,255,255,0) 100%) !important; } .sl-home-final .sl-hero-final__visual::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 16%, rgba(255,255,255,0) 82%, rgba(255,255,255,.30) 100%) !important; } .sl-home-final .sl-hero-final__visual img { display: block !important; position: absolute !important; right: -16px !important; top: 50% !important; width: 108% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .sl-home-final .sl-hero-final__inner { position: relative !important; z-index: 4 !important; width: 100% !important; min-height: 610px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 74px 0 108px 78px !important; } .sl-home-final .sl-hero-final__content { position: relative !important; z-index: 5 !important; width: min(630px, 48%) !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .sl-home-final .sl-hero-final__badge { display: inline-flex !important; align-items: center !important; gap: 9px !important; width: auto !important; margin: 0 0 28px !important; padding: 9px 18px !important; border: 1px solid #bdd8ff !important; border-radius: 999px !important; background: rgba(255,255,255,.88) !important; color: #075fc9 !important; box-shadow: 0 10px 28px rgba(26,98,199,.08) !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0 !important; text-decoration: none !important; } .sl-home-final .sl-hero-final__badge svg { width: 18px !important; height: 18px !important; min-width: 18px !important; stroke: #236fe4 !important; } .sl-home-final .sl-hero-final h1 { margin: 0 0 26px !important; padding: 0 !important; max-width: 650px !important; color: var(--sl-navy) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: clamp(44px, 4.4vw, 68px) !important; line-height: .985 !important; letter-spacing: -0.055em !important; font-weight: 900 !important; text-transform: none !important; } .sl-home-final .sl-hero-final h1 span { color: var(--sl-blue) !important; display: inline !important; } .sl-home-final .sl-hero-final__lead { margin: 0 !important; padding: 0 !important; max-width: 610px !important; color: #40516b !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 19px !important; line-height: 1.68 !important; font-weight: 650 !important; letter-spacing: 0 !important; } .sl-home-final .sl-hero-final__actions { display: flex !important; align-items: center !important; gap: 18px !important; margin: 38px 0 0 !important; padding: 0 !important; } .sl-home-final a.sl-hero-final__btn, .sl-home-final a.sl-hero-final__btn:link, .sl-home-final a.sl-hero-final__btn:visited { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; height: 66px !important; min-width: 218px !important; padding: 0 29px !important; border-radius: 14px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 18px !important; line-height: 1 !important; font-weight: 900 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important; } .sl-home-final a.sl-hero-final__btn:hover { transform: translateY(-1px) !important; text-decoration: none !important; } .sl-home-final a.sl-hero-final__btn svg { width: 24px !important; height: 24px !important; min-width: 24px !important; } .sl-home-final a.sl-hero-final__btn--primary { color: #fff !important; background: linear-gradient(135deg, #2fc353 0%, #20a941 100%) !important; border: 1px solid rgba(31,157,63,.14) !important; box-shadow: 0 18px 34px rgba(39,179,74,.26) !important; } .sl-home-final a.sl-hero-final__btn--primary svg { stroke: #fff !important; } .sl-home-final a.sl-hero-final__btn--primary:hover { background: linear-gradient(135deg, #35cf5c 0%, #20a941 100%) !important; color: #fff !important; } .sl-home-final a.sl-hero-final__btn--secondary { color: var(--sl-navy) !important; background: rgba(255,255,255,.92) !important; border: 1px solid #b9d4ff !important; box-shadow: 0 12px 28px rgba(6,26,51,.06) !important; } .sl-home-final a.sl-hero-final__btn--secondary::after { content: "→" !important; margin-left: 4px !important; font-size: 28px !important; line-height: .75 !important; font-weight: 900 !important; } .sl-home-final a.sl-hero-final__btn--secondary:hover { border-color: #236fe4 !important; color: var(--sl-navy) !important; } /* BENEFITS */ .sl-home-final .sl-benefits-final { position: relative !important; z-index: 9 !important; width: calc(100% - 64px) !important; margin: -64px auto 0 !important; padding: 0 !important; border-radius: 28px !important; background: #fff !important; border: 1px solid #dbeaff !important; box-shadow: 0 26px 60px rgba(6,26,51,.09) !important; overflow: hidden !important; } .sl-home-final .sl-benefits-final__grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } .sl-home-final .sl-benefit-final { position: relative !important; min-height: 150px !important; padding: 28px 20px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; background: #fff !important; } .sl-home-final .sl-benefit-final:not(:last-child)::after { content: "" !important; position: absolute !important; top: 31px !important; right: 0 !important; width: 1px !important; height: calc(100% - 62px) !important; background: #d8e8ff !important; } .sl-home-final .sl-benefit-final__icon { width: 52px !important; height: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 0 14px !important; border-radius: 16px !important; border: 1px solid #bdd8ff !important; background: #f2f8ff !important; } .sl-home-final .sl-benefit-final__icon svg { width: 28px !important; height: 28px !important; stroke: #236fe4 !important; } .sl-home-final .sl-benefit-final strong { display: block !important; margin: 0 0 8px !important; color: var(--sl-navy) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 18px !important; line-height: 1.12 !important; font-weight: 900 !important; } .sl-home-final .sl-benefit-final span { display: block !important; color: #4e607a !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; font-size: 14.5px !important; line-height: 1.35 !important; font-weight: 650 !important; } @media (max-width: 1200px) { .sl-home-final { width: min(100% - 40px, 1280px) !important; } .sl-home-final .sl-hero-final__inner { padding-left: 42px !important; } .sl-home-final .sl-hero-final h1 { font-size: clamp(40px, 4.4vw, 58px) !important; } } @media (max-width: 991px) { .sl-home-final { width: calc(100% - 28px) !important; margin-top: 24px !important; } .sl-home-final .sl-hero-final { min-height: 0 !important; background: linear-gradient(180deg, #fff 0%, #f3f9ff 100%) !important; } .sl-home-final .sl-hero-final__visual { position: relative !important; width: 100% !important; height: auto !important; order: 2 !important; margin-top: 24px !important; } .sl-home-final .sl-hero-final__visual::before, .sl-home-final .sl-hero-final__visual::after { display: none !important; } .sl-home-final .sl-hero-final__visual img { position: relative !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; object-fit: contain !important; } .sl-home-final .sl-hero-final__inner { min-height: 0 !important; display: flex !important; flex-direction: column !important; padding: 36px 22px 92px !important; text-align: center !important; } .sl-home-final .sl-hero-final__content { width: 100% !important; max-width: 720px !important; text-align: center !important; } .sl-home-final .sl-hero-final__actions { justify-content: center !important; } .sl-home-final .sl-benefits-final { margin-top: -54px !important; width: calc(100% - 20px) !important; } .sl-home-final .sl-benefits-final__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sl-home-final .sl-benefit-final:not(:last-child)::after { display: none !important; } } @media (max-width: 560px) { .sl-home-final .sl-hero-final h1 { font-size: 37px !important; line-height: 1.02 !important; } .sl-home-final .sl-hero-final__lead { font-size: 16px !important; } .sl-home-final .sl-hero-final__actions { flex-direction: column !important; gap: 12px !important; } .sl-home-final a.sl-hero-final__btn { width: 100% !important; min-width: 0 !important; } .sl-home-final .sl-benefits-final__grid { grid-template-columns: 1fr !important; } }