/* ========================================================= SPECTRA BETTA — HERO.CSS Cinematic hero section. ========================================================= */ .sb-hero { position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: center; padding: 56px 0; background-color: var(--sb-bg); } /* Ambient cinematic red glow di background hero */ .sb-hero__glow-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 60% 80% at 78% 50%, rgba(255, 45, 45, 0.16), transparent 60%), radial-gradient(ellipse 40% 60% at 20% 20%, rgba(255, 45, 45, 0.06), transparent 60%); pointer-events: none; } .sb-hero__container { position: relative; z-index: 2; } .sb-hero__content { max-width: 540px; } /* Badge */ .sb-hero__badge { color: var(--sb-yellow); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; } /* Heading */ .sb-hero__heading { font-size: 76px; font-weight: 900; line-height: 0.98; letter-spacing: -0.02em; margin-bottom: 22px; } .sb-hero__heading-line { display: block; } .sb-hero__heading-line--white { color: var(--sb-white); } .sb-hero__heading-line--yellow { color: var(--sb-yellow); } /* Description */ .sb-hero__desc { max-width: 440px; color: #d0d0d0; font-size: 16px; line-height: 1.6; margin-bottom: 30px; } /* Trust features */ .sb-hero__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; margin-bottom: 34px; } .sb-hero__trust li { display: flex; align-items: flex-start; gap: 10px; } .sb-hero__trust svg { flex-shrink: 0; color: var(--sb-red); margin-top: 2px; } .sb-hero__trust div { display: flex; flex-direction: column; line-height: 1.35; } .sb-hero__trust strong { font-size: 13px; font-weight: 700; color: var(--sb-white); } .sb-hero__trust span { font-size: 12px; color: var(--sb-muted); } /* CTA buttons */ .sb-hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sb-btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: var(--sb-radius-md); font-size: 14px; font-weight: 700; letter-spacing: 0.4px; transition: transform var(--sb-transition), box-shadow var(--sb-transition), background-color var(--sb-transition), border-color var(--sb-transition); } .sb-btn--primary { background-color: var(--sb-red); color: var(--sb-white); border: 1px solid var(--sb-red); } .sb-btn--primary:hover { background-color: var(--sb-red-bright); box-shadow: 0 10px 30px -8px var(--sb-glow); transform: translateY(-2px); } .sb-btn--outline { background-color: transparent; color: var(--sb-white); border: 1px solid rgba(255, 255, 255, 0.5); } .sb-btn--outline:hover { border-color: var(--sb-white); background-color: rgba(255, 255, 255, 0.06); transform: translateY(-2px); } /* --------------------------------------------------------- HERO VISUAL (gambar ikan cupang) --------------------------------------------------------- */ .sb-hero__visual { position: absolute; z-index: 1; top: 50%; right: 0; transform: translateY(-50%); width: 52vw; max-width: 760px; pointer-events: none; } .sb-hero__glow { position: absolute; inset: -15%; z-index: -1; background: radial-gradient(circle at 55% 50%, var(--sb-glow), transparent 68%); filter: blur(50px); } .sb-hero__fish { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(255, 45, 45, 0.35)); animation: sbFloat 6s ease-in-out infinite; } @keyframes sbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* --------------------------------------------------------- FADE-UP entrance animation (dipicu class .sb-loaded di lewat main.js begitu DOM siap) --------------------------------------------------------- */ .sb-hero__badge, .sb-hero__heading, .sb-hero__desc, .sb-hero__trust, .sb-hero__cta { opacity: 0; transform: translateY(18px); } .sb-loaded .sb-hero__badge, .sb-loaded .sb-hero__heading, .sb-loaded .sb-hero__desc, .sb-loaded .sb-hero__trust, .sb-loaded .sb-hero__cta { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } .sb-loaded .sb-hero__badge { transition-delay: 0.05s; } .sb-loaded .sb-hero__heading { transition-delay: 0.12s; } .sb-loaded .sb-hero__desc { transition-delay: 0.2s; } .sb-loaded .sb-hero__trust { transition-delay: 0.28s; } .sb-loaded .sb-hero__cta { transition-delay: 0.36s; } /* Hormati preferensi user yang menonaktifkan animasi */ @media (prefers-reduced-motion: reduce) { .sb-hero__fish { animation: none; } .sb-hero__badge, .sb-hero__heading, .sb-hero__desc, .sb-hero__trust, .sb-hero__cta { opacity: 1; transform: none; transition: none; } }