/* * ═══════════════════════════════════════════════════════════════ * zawa_fj26.css * "#zawa" — ZAWA (Zakat & Wakaf) Walk 2026 promo section, on the * standalone zawa.html page. An animated banner card (rotating * gradient border + slow Ken-Burns zoom + periodic shine sweep) next * to a feature list (Tujuan / Rangkaian / Aktivitas) and two CTAs * (Registrasi — active, Donasi — disabled/"Segera Hadir"). * * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-about-row / .fj26-about-text / .fj26-eyebrow / .fj26-grad-text / * .fj26-more-btn / .fj26-thumb-badge components (about_fesyar_fj26.css) * — including that file's mobile flex-basis fix for .fj26-about-row, * so this section stacks correctly on phones too. * * Loaded LAST in so nothing existing needs to change. * Pairs with /asset_easy/js_town/zawa_fj26.js for the scroll-reveal * (the section is fully visible with no JS at all). * ═══════════════════════════════════════════════════════════════ */ #zawa{ position:relative; background: radial-gradient(ellipse 60% 65% at 6% 15%, rgba(30,111,255,0.15), transparent 60%), radial-gradient(ellipse 55% 60% at 95% 85%, rgba(23,201,148,0.13), transparent 60%) !important; } #zawa:before{ content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(53,225,255,0.28), transparent); } /* ══════════════════════════════════════════════════════ ANIMATED BANNER — rotating gradient border + Ken-Burns + shine ══════════════════════════════════════════════════════ */ @property --zawa-angle{ syntax:''; inherits:false; initial-value:0deg; } .fj26-zawa-banner{ position:relative; max-width:460px; margin:0 auto; padding:4px; border-radius:28px; background:conic-gradient(from var(--zawa-angle), var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); box-shadow:0 20px 60px rgba(0,0,0,0.45), 0 0 40px rgba(53,225,255,0.18); animation:fj26ZawaBorderSpin 6s linear infinite, fj26ZawaFloat 5s ease-in-out infinite; } @keyframes fj26ZawaBorderSpin{ to{ --zawa-angle:360deg; } } @keyframes fj26ZawaFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } .fj26-zawa-banner-frame{ position:relative; overflow:hidden; border-radius:25px; aspect-ratio:1 / 1; background:#0A1442; } .fj26-zawa-banner-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; animation:fj26ZawaKenBurns 16s ease-in-out infinite alternate; } @keyframes fj26ZawaKenBurns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.12) translate(-1.5%,-1.5%); } } /* periodic diagonal shine sweep */ .fj26-zawa-shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.32) 50%, transparent 58%); transform:translateX(-120%); animation:fj26ZawaShine 5s ease-in-out infinite; pointer-events:none; } @keyframes fj26ZawaShine{ 0%{ transform:translateX(-120%); } 35%, 100%{ transform:translateX(120%); } } .fj26-zawa-badge{ position:absolute; top:14px; right:14px; } /* ══════════════════════════════════════════════════════ FEATURE LIST — Tujuan / Rangkaian / Aktivitas ══════════════════════════════════════════════════════ */ .fj26-zawa-features{ display:flex; flex-direction:column; gap:16px; margin:22px 0 30px; } .fj26-zawa-feature{ display:flex; align-items:flex-start; gap:14px; text-align:left; padding:14px 16px; border-radius:16px; background:linear-gradient(135deg, rgba(10,20,66,0.6), rgba(10,23,112,0.35)); border:1px solid rgba(53,225,255,0.16); transition:border-color .3s ease, transform .3s ease, background .3s ease; } .fj26-zawa-feature:hover{ border-color:rgba(53,225,255,0.4); transform:translateX(4px); background:linear-gradient(135deg, rgba(10,20,66,0.8), rgba(10,23,112,0.5)); } .fj26-zawa-feature-ico{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; color:#fff; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); box-shadow:0 6px 18px rgba(30,111,255,0.35); } .fj26-zawa-feature:nth-child(2) .fj26-zawa-feature-ico{ background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); } .fj26-zawa-feature:nth-child(3) .fj26-zawa-feature-ico{ background:linear-gradient(135deg, var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); } .fj26-zawa-feature-ico svg{ width:20px; height:20px; } .fj26-zawa-feature-body{ flex:1 1 auto; min-width:0; } .fj26-zawa-feature-label{ display:block; font-family:'Exo', sans-serif; font-weight:700; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fj26-cyan,#35E1FF); margin-bottom:3px; } .fj26-zawa-feature-body p{ margin:0 !important; color:var(--fj26-muted,rgba(230,240,255,0.72)) !important; font-size:14.5px !important; line-height:1.6 !important; text-align:left !important; } /* ══════════════════════════════════════════════════════ ACTIONS — Registrasi (active) / Donasi (disabled) ══════════════════════════════════════════════════════ */ .fj26-zawa-actions{ display:flex; flex-wrap:wrap; gap:14px; } .fj26-zawa-btn-disabled{ background:rgba(230,240,255,0.07) !important; color:rgba(230,240,255,0.5) !important; box-shadow:none !important; border:1px solid rgba(230,240,255,0.14); cursor:not-allowed; pointer-events:none; font-family:inherit; position:relative; } .fj26-zawa-btn-disabled:before{ display:none; } .fj26-zawa-soon-tag{ font-style:normal; font-family:'Barlow', Arial, sans-serif; font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--fj26-gold,#E8C766); background:rgba(232,199,102,0.12); border:1px solid rgba(232,199,102,0.35); border-radius:20px; padding:3px 9px; margin-left:2px; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL (progressive enhancement) Default = fully visible; JS adds .fj26-reveal-init just before observing, then .fj26-inview once the section scrolls into view. .fj26-about-text reuses the shared rule from about_fesyar_fj26.css. ══════════════════════════════════════════════════════ */ /* applied to .fj26-zawa-banner-frame (not .fj26-zawa-banner) so this one-shot entrance transform doesn't fight the perpetual fj26ZawaFloat/fj26ZawaBorderSpin animations already running on the outer .fj26-zawa-banner — both would touch "transform" on the same element otherwise, and the later-listed animation always wins, silently cancelling the other's contribution. */ .fj26-zawa-banner-frame.fj26-reveal-init{ opacity:0; transform:scale(.9); } .fj26-zawa-banner-frame.fj26-inview{ animation:fj26ZawaBannerRise .7s ease backwards; } @keyframes fj26ZawaBannerRise{ from{ opacity:0; transform:scale(.9); } to{ opacity:1; transform:scale(1); } } @media (max-width:991px){ .fj26-zawa-feature{ text-align:left; } .fj26-zawa-actions{ justify-content:center; } } @media (prefers-reduced-motion: reduce){ .fj26-zawa-banner, .fj26-zawa-banner-img, .fj26-zawa-shine, .fj26-zawa-banner-frame.fj26-inview{ animation:none !important; } .fj26-zawa-banner-frame.fj26-reveal-init{ opacity:1 !important; transform:none !important; } .fj26-zawa-shine{ display:none; } }