/* * ═══════════════════════════════════════════════════════════════ * segerahadir_fj26.css * "#tentang" on segerahadir.html — replaced with a cool centered * "Segera Hadir." placeholder display: eyebrow, big gradient-shimmer * headline, animated underline, supporting line, plus two slow * orbiting glow rings behind it for atmosphere. * * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-eyebrow / .fj26-grad-text components (about_fesyar_fj26.css). * Loaded LAST in so nothing existing needs to change. * ═══════════════════════════════════════════════════════════════ */ .fj26-soon-section{ position:relative; overflow:hidden; min-height:360px; display:flex; align-items:center; background: radial-gradient(ellipse 60% 65% at 50% 45%, rgba(30,111,255,0.14), transparent 70%) !important; } .fj26-soon-wrap{ text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; } .fj26-soon-title{ font-family:'Exo', sans-serif; font-weight:900; font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1.08; color:var(--fj26-white,#F3F7FF) !important; margin:20px 0 18px; letter-spacing:0.01em; opacity:0; animation:fj26SoonRise .7s ease .1s both; } .fj26-soon-title .fj26-grad-text{ filter:drop-shadow(0 0 30px rgba(53,225,255,0.45)); } .fj26-soon-underline{ display:block; width:0; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); box-shadow:0 0 14px rgba(53,225,255,0.6); margin-bottom:22px; animation:fj26SoonGrow .8s ease .5s both; } @keyframes fj26SoonGrow{ from{ width:0; } to{ width:110px; } } .fj26-soon-desc{ max-width:520px; color:var(--fj26-muted,rgba(230,240,255,0.68)) !important; font-size:16.5px !important; line-height:1.75 !important; text-align:center !important; margin:0 auto !important; font-weight:400 !important; opacity:0; animation:fj26SoonRise .7s ease .68s both; } @keyframes fj26SoonRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } /* slow orbiting glow rings behind the text, for a bit of "cool" motion */ .fj26-soon-orbit{ position:absolute; border-radius:50%; border:1px solid rgba(53,225,255,0.16); pointer-events:none; z-index:1; } .fj26-soon-orbit-a{ width:520px; height:520px; top:50%; left:50%; margin:-260px 0 0 -260px; border-color:rgba(30,111,255,0.14); animation:fj26SoonSpin 26s linear infinite; } .fj26-soon-orbit-a::before{ content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--fj26-cyan,#35E1FF); box-shadow:0 0 12px 3px rgba(53,225,255,0.7); } .fj26-soon-orbit-b{ width:340px; height:340px; top:50%; left:50%; margin:-170px 0 0 -170px; border-color:rgba(23,201,148,0.18); animation:fj26SoonSpin 18s linear infinite reverse; } .fj26-soon-orbit-b::before{ content:''; position:absolute; bottom:-4px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--fj26-green,#17C994); box-shadow:0 0 10px 3px rgba(23,201,148,0.7); } @keyframes fj26SoonSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @media (max-width:767px){ .fj26-soon-section{ min-height:280px; } .fj26-soon-orbit-a{ width:340px; height:340px; margin:-170px 0 0 -170px; } .fj26-soon-orbit-b{ width:220px; height:220px; margin:-110px 0 0 -110px; } } @media (prefers-reduced-motion: reduce){ .fj26-soon-orbit{ animation:none !important; } .fj26-soon-title, .fj26-soon-underline, .fj26-soon-desc{ animation:none !important; opacity:1 !important; transform:none !important; width:auto !important; } .fj26-soon-underline{ width:110px !important; } }