/* ======================================== SECM HERO SECTION Category Description - First Impression ======================================== */ .sx-secm-hero { --brand: var(--color-brand-blue); --brand-gray: var(--color-brand-gray); --border: rgba(45, 132, 205, .07); --bg-soft: var(--color-bg-blue-tint); --bg-hover: var(--color-bg-light-gray); --text: var(--color-text); --text-muted: var(--color-brand-gray); --radius: 12px; --radius-sm: 8px; --shadow: var(--shadow-sm); } section.sx-secm-hero { background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%); padding: 80px 0 100px 0; position: relative; overflow: hidden; } /* Joomla may add module class to ; prevent global side effects */ body.sx-secm-hero { padding-top: 0 !important; background: inherit !important; } /* Safety: if module is injected inside header zones, disable section chrome there */ #astroid-header .sx-secm-hero, .border-bottom .sx-secm-hero { background: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Optional: Subtle accent element */ section.sx-secm-hero::before { content: ""; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(45, 132, 205, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .sx-secm-hero-container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } /* ======================================== SPLIT LAYOUT ======================================== */ .sx-secm-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* ======================================== LEFT: Hero Image ======================================== */ .sx-secm-hero-image { position: relative; } .sx-secm-hero-image img { width: 100%; height: auto; display: block; border-radius: var(--border-radius-lg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); transform: perspective(1000px) rotateY(-3deg); transition: all 0.5s ease; } .sx-secm-hero-image:hover img { transform: perspective(1000px) rotateY(0deg); box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2); } /* ======================================== RIGHT: Hero Content ======================================== */ .sx-secm-hero-content { padding: 20px 0; } .sx-secm-hero-title { font-family: var(--font-headings); font-size: 3.2rem; line-height: 1.1; font-weight: 700; color: var(--color-brand-gray); margin: 0 0 20px 0; } .sx-secm-hero-subtitle { font-size: 1.5rem; line-height: 1.4; color: var(--color-brand-blue); font-weight: 600; margin: 0 0 25px 0; font-style: italic; } .sx-secm-hero-description { font-size: var(--font-size-body); line-height: 1.7; color: var(--color-text); margin: 0 0 35px 0; } /* ======================================== MICRO-STATS BAR ======================================== */ .sx-secm-hero-stats { display: flex; gap: 40px; margin-bottom: 35px; padding: 25px 0; border-top: 2px solid rgba(45, 132, 205, 0.2); border-bottom: 2px solid rgba(45, 132, 205, 0.2); } .sx-secm-hero-stat { display: flex; flex-direction: column; gap: 5px; } .sx-secm-hero-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--color-brand-blue); font-family: var(--font-headings); line-height: 1; } .sx-secm-hero-stat-label { font-size: var(--font-size-small); color: var(--color-brand-gray); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } /* ======================================== CTA BUTTONS ======================================== */ .sx-secm-hero-content .sx-btn-row { margin-top: 35px; } .sx-secm-hero-down-arrow { display: inline-block; margin-left: 6px; line-height: 1; transition: transform 0.2s ease; } .sx-secm-hero-scroll-link:hover .sx-secm-hero-down-arrow { transform: translateY(2px); } /* Smooth scroll for anchor link */ .sx-secm-hero-scroll-link { scroll-behavior: smooth; } /* ======================================== RESPONSIVE DESIGN ======================================== */ /* Tablets (≤1024px) */ @media (max-width: 1024px) { .sx-secm-hero-split { grid-template-columns: 1fr; gap: 40px; } .sx-secm-hero-image { order: 2; /* Move image below content on tablet */ } .sx-secm-hero-content { order: 1; text-align: center; } .sx-secm-hero-stats { justify-content: center; } .sx-secm-hero-content .sx-btn-row { justify-content: center; } .sx-secm-hero-image img { transform: none; /* Remove 3D effect on mobile */ } } /* Mobile Landscape (≤768px) */ @media (max-width: 768px) { section.sx-secm-hero { padding: 60px 0 70px 0; } .sx-secm-hero-title { font-size: 2.4rem; } .sx-secm-hero-subtitle { font-size: 1.2rem; } .sx-secm-hero-stats { gap: 25px; padding: 20px 0; } .sx-secm-hero-stat-value { font-size: 1.4rem; } .sx-secm-hero-stat-label { font-size: 0.75rem; } } /* Mobile Portrait (≤480px) */ @media (max-width: 480px) { section.sx-secm-hero { padding: 50px 0 60px 0; } .sx-secm-hero-title { font-size: 2rem; } .sx-secm-hero-subtitle { font-size: 1.1rem; } .sx-secm-hero-description { font-size: var(--font-size-small); } .sx-secm-hero-stats { flex-direction: column; gap: 15px; align-items: center; text-align: center; } .sx-secm-hero-stat { align-items: center; } .sx-secm-hero-content .sx-btn-row { flex-direction: column; align-items: stretch; } .sx-secm-hero-content .sx-btn-row a { width: 100%; justify-content: center; } }