/* ========================================================= S247 Life SMART - COMPLETE HERO SLIDER CSS Desktop + Tablet + Mobile ========================================================= */ /* --------------------------------------------------------- 1. HERO ROW / SLIDE LAYOUT --------------------------------------------------------- */ .zprow:has(.zshero-banner-transparent-bg-box) { min-height: 560px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* --------------------------------------------------------- 2. HERO CONTENT BOX --------------------------------------------------------- */ .zshero-banner-transparent-bg-box { background: transparent !important; padding: 30px 24px !important; max-width: 760px !important; } /* --------------------------------------------------------- 3. MAIN HERO HEADING --------------------------------------------------------- */ .zshero-banner-transparent-bg-box .zpheading { color: #ffffff !important; font-size: clamp(40px, 5vw, 68px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-align: left !important; margin: 0 0 18px 0 !important; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.55), 0 10px 28px rgba(0, 0, 0, 0.30); } /* --------------------------------------------------------- 4. HERO DESCRIPTION AREA --------------------------------------------------------- */ .zshero-banner-transparent-bg-box .zpelem-text { background: transparent !important; background-color: transparent !important; color: #ffffff !important; margin-top: 8px !important; max-width: 680px !important; } /* Description text */ .zshero-banner-transparent-bg-box .zptext, .zshero-banner-transparent-bg-box .zptext span { color: #ffffff !important; font-size: 17px !important; font-weight: 500 !important; line-height: 1.65 !important; letter-spacing: 0.15px !important; text-align: left !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.60) !important; } /* --------------------------------------------------------- 5. HERO BUTTON CONTAINER --------------------------------------------------------- */ .zprow:has(.zshero-banner-transparent-bg-box) .zpelem-button { margin-block-start: 28px !important; margin-top: 28px !important; } .zprow:has(.zshero-banner-transparent-bg-box) .zpbutton-container { text-align: left !important; } /* ========================================================= 6. ANIMATED LIFESMART BUTTON ========================================================= */ @property --lifesmart-angle { syntax: ''; inherits: false; initial-value: 135deg; } .zpbutton-wrapper.zpbutton { --c1: #6d28d9; /* violet */ --c2: #22d3ee; /* cyan */ --c3: #dfff00; /* electric lime */ --body: #111217; --ink: #ffffff; position: relative !important; isolation: isolate !important; background: radial-gradient( 120% 140% at 15% 0%, rgba(109, 40, 217, 0.50), transparent 60% ), radial-gradient( 120% 140% at 90% 100%, rgba(34, 211, 238, 0.32), transparent 60% ), #111217 !important; background-size: 150% 150%, 150% 150%, 100% 100% !important; background-position: 0% 0%, 100% 100%, 0 0 !important; color: var(--ink) !important; border: 0 !important; /* full rounded pill */ border-radius: 50px !important; padding: 14px 34px !important; min-height: 48px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28); transition: transform 0.30s cubic-bezier(.16,1,.3,1), background-position 0.60s cubic-bezier(.16,1,.3,1), box-shadow 0.35s ease, color 0.30s ease !important; } /* Keep inner Zoho text synced */ .zpbutton-wrapper.zpbutton span { color: inherit !important; position: relative; z-index: 2; } /* --------------------------------------------------------- 7. ANIMATED BORDER --------------------------------------------------------- */ .zpbutton-wrapper.zpbutton::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: inherit; background: conic-gradient( from var(--lifesmart-angle), var(--c1), var(--c2), var(--c3), var(--c1) ); animation: lifesmart-button-spin 4.5s linear infinite; } /* --------------------------------------------------------- 8. GLOW LAYER --------------------------------------------------------- */ .zpbutton-wrapper.zpbutton::after { content: ""; position: absolute; inset: 2px; z-index: -3; border-radius: inherit; background: conic-gradient( from var(--lifesmart-angle), var(--c1), var(--c2), var(--c3), var(--c1) ); filter: blur(18px); opacity: 0.45; transition: opacity 0.35s ease, filter 0.35s ease; } @keyframes lifesmart-button-spin { to { --lifesmart-angle: 495deg; } } /* ========================================================= 9. DESKTOP HOVER Same rounded multi-color hover ========================================================= */ .zpbutton-wrapper.zpbutton:hover { background: linear-gradient( 135deg, #6d28d9 0%, #22d3ee 52%, #dfff00 100% ) !important; color: #111111 !important; border-radius: 50px !important; transform: translateY(-3px) scale(1.025) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), 0 0 16px rgba(109, 40, 217, 0.30), 0 0 22px rgba(34, 211, 238, 0.28), 0 0 28px rgba(223, 255, 0, 0.22) !important; } /* maintain rounded border and glow */ .zpbutton-wrapper.zpbutton:hover::before, .zpbutton-wrapper.zpbutton:hover::after { border-radius: 50px !important; } /* stronger glow on hover */ .zpbutton-wrapper.zpbutton:hover::after { opacity: 0.78 !important; filter: blur(22px) !important; } /* hover text */ .zpbutton-wrapper.zpbutton:hover span { color: #111111 !important; } /* --------------------------------------------------------- 10. CLICK / TAP --------------------------------------------------------- */ .zpbutton-wrapper.zpbutton:active { transform: translateY(0) scale(0.98) !important; } /* --------------------------------------------------------- 11. KEYBOARD ACCESSIBILITY --------------------------------------------------------- */ .zpbutton-wrapper.zpbutton:focus-visible { outline: 2px solid #dfff00 !important; outline-offset: 5px !important; } /* ========================================================= 12. TABLET ========================================================= */ @media screen and (max-width: 1024px) { .zprow:has(.zshero-banner-transparent-bg-box) { min-height: 500px !important; } .zshero-banner-transparent-bg-box { padding: 26px 20px !important; max-width: 680px !important; } .zshero-banner-transparent-bg-box .zpheading { font-size: 44px !important; line-height: 1.12 !important; letter-spacing: -0.6px !important; } .zshero-banner-transparent-bg-box .zptext, .zshero-banner-transparent-bg-box .zptext span { font-size: 16px !important; line-height: 1.6 !important; } .zprow:has(.zshero-banner-transparent-bg-box) .zpelem-button { margin-top: 24px !important; margin-block-start: 24px !important; } .zpbutton-wrapper.zpbutton { padding: 13px 28px !important; min-height: 46px !important; font-size: 14px !important; border-radius: 50px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media screen and (max-width: 768px) { .zprow:has(.zshero-banner-transparent-bg-box) { min-height: 460px !important; align-items: center !important; } .zshero-banner-transparent-bg-box { padding: 22px 16px !important; max-width: 100% !important; } .zshero-banner-transparent-bg-box .zpheading { font-size: 34px !important; line-height: 1.14 !important; letter-spacing: -0.4px !important; text-align: left !important; margin-bottom: 14px !important; } .zshero-banner-transparent-bg-box .zptext, .zshero-banner-transparent-bg-box .zptext span { font-size: 15px !important; line-height: 1.55 !important; text-align: left !important; } .zprow:has(.zshero-banner-transparent-bg-box) .zpelem-button { margin-top: 22px !important; margin-block-start: 22px !important; } .zpbutton-wrapper.zpbutton { padding: 12px 24px !important; min-height: 44px !important; font-size: 13px !important; border-radius: 50px !important; max-width: 100% !important; white-space: normal !important; text-align: center !important; } /* tap feedback */ .zpbutton-wrapper.zpbutton:active { background: linear-gradient( 135deg, #6d28d9, #22d3ee, #dfff00 ) !important; color: #111111 !important; transform: scale(0.97) !important; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(34, 211, 238, 0.22), 0 0 18px rgba(223, 255, 0, 0.22) !important; } } /* ========================================================= 14. SMALL MOBILE ========================================================= */ @media screen and (max-width: 480px) { .zprow:has(.zshero-banner-transparent-bg-box) { min-height: 420px !important; } .zshero-banner-transparent-bg-box { padding: 18px 14px !important; } .zshero-banner-transparent-bg-box .zpheading { font-size: 29px !important; line-height: 1.16 !important; margin-bottom: 12px !important; } .zshero-banner-transparent-bg-box .zptext, .zshero-banner-transparent-bg-box .zptext span { font-size: 14px !important; line-height: 1.5 !important; } .zpbutton-wrapper.zpbutton { padding: 11px 20px !important; min-height: 42px !important; font-size: 12px !important; border-radius: 50px !important; } } /* ========================================================= 15. VERY SMALL PHONES ========================================================= */ @media screen and (max-width: 360px) { .zshero-banner-transparent-bg-box .zpheading { font-size: 26px !important; } .zshero-banner-transparent-bg-box .zptext, .zshero-banner-transparent-bg-box .zptext span { font-size: 13px !important; } .zpbutton-wrapper.zpbutton { padding: 10px 17px !important; font-size: 11px !important; letter-spacing: 0.3px !important; } } /* ========================================================= 16. REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { .zpbutton-wrapper.zpbutton::before, .zpbutton-wrapper.zpbutton::after { animation: none !important; } .zpbutton-wrapper.zpbutton { transition: none !important; } }