/* * ═══════════════════════════════════════════════════════════════ * wakaf_fj26.css * "#menu_popup_wakaf" — the "Wakaf Corner" popup modal. * 1) Brightens the popup panel background (it was the same near- * black navy as every other panel on the site). * 2) Replaces the leftover login-form markup inside its #tab-1 with * 3 clickable, image-led "cool buttons": Wakaf Fun Walk, Wakaf * Kajian Ustadz Hanan Attaki, Wakafein. * * Reuses --fj26-* tokens (color_fj26_override.css). Loaded LAST in * so nothing existing needs to change. * ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ 1. BRIGHTER POPUP PANEL ══════════════════════════════════════════════════════ */ #menu_popup_wakaf .main-register{ background: radial-gradient(ellipse 70% 60% at 15% 0%, rgba(53,225,255,0.35), transparent 60%), radial-gradient(ellipse 70% 60% at 100% 100%, rgba(23,201,148,0.32), transparent 60%), linear-gradient(150deg, #123A94 0%, #0E6FA8 55%, #0B9E86 100%) !important; border:1px solid rgba(53,225,255,0.4) !important; box-shadow:0 24px 70px rgba(0,0,0,0.55), 0 0 60px rgba(53,225,255,0.18) !important; } #menu_popup_wakaf .main-register_title{ background:linear-gradient(120deg, #0B2A72 0%, #0E6FA8 100%) !important; background-image:none !important; border-bottom:1px solid rgba(255,255,255,0.18) !important; } #menu_popup_wakaf .main-register_title span strong{ color:#8CF3D8 !important; } #menu_popup_wakaf .close-reg{ color:#F3F7FF !important; } #menu_popup_wakaf .close-reg:hover{ color:#8CF3D8 !important; } /* wider, centered popup panel on desktop (base theme caps .main-register-holder at max-width:420px for every modal) */ @media (min-width:768px){ #menu_popup_wakaf .main-register-holder{ max-width:1000px !important; } #menu_popup_wakaf .main-register{ /*min-width:1000px; */ margin-left:auto; margin-right:auto; } } /* ══════════════════════════════════════════════════════ 2. THREE WAKAF PROGRAM BUTTONS ══════════════════════════════════════════════════════ */ .fj26-wakaf-grid{ display:flex; flex-wrap:wrap; gap:16px; padding:6px 4px 4px; } .fj26-wakaf-btn{ position:relative; flex:1 1 0; min-width:96px; aspect-ratio:3 / 4; border-radius:18px; overflow:hidden; display:block; text-decoration:none !important; cursor:pointer; border:1px solid rgba(255,255,255,0.28); box-shadow:0 14px 34px rgba(0,0,0,0.35); transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, border-color .35s ease; } .fj26-wakaf-btn:hover{ transform:translateY(-6px) scale(1.04); border-color:rgba(140,243,216,0.7); box-shadow:0 22px 46px rgba(0,0,0,0.45), 0 0 34px rgba(53,225,255,0.35); z-index:2; } .fj26-wakaf-img{ position:absolute; inset:0; background-size:cover; background-position:center top; background-repeat:no-repeat; transition:transform .5s ease; } .fj26-wakaf-btn:hover .fj26-wakaf-img{ transform:scale(1.09); } .fj26-wakaf-overlay{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; background:linear-gradient(0deg, rgba(3,7,20,0.92) 0%, rgba(3,7,20,0.55) 65%, transparent 100%); } .fj26-wakaf-label{ font-family:'Exo', sans-serif; font-weight:700; font-size:13px; line-height:1.3; color:#F3F7FF; } .fj26-wakaf-go{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; color:#F3F7FF; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.3); transform:translateX(-3px); opacity:.8; transition:transform .3s ease, opacity .3s ease, background .3s ease, color .3s ease; } .fj26-wakaf-btn:hover .fj26-wakaf-go{ transform:translateX(0); opacity:1; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); border-color:transparent; } @media (max-width:480px){ .fj26-wakaf-grid{ flex-wrap:wrap; } .fj26-wakaf-btn{ flex:1 1 42%; min-width:120px; aspect-ratio:1 / 1; } } @media (prefers-reduced-motion: reduce){ .fj26-wakaf-btn, .fj26-wakaf-img, .fj26-wakaf-go{ transition:none !important; } }