/* * ═══════════════════════════════════════════════════════════════ * uha_fj26.css * "#uha" — Kajian Ustad Hanan Attaki promo + registration/payment * flow, on the standalone uha.html page. * * Parts: * 1. Animated hero banner (all-CSS/SVG "kajian senja" art — the * real uha.jpg photo asset was not found in the project, see * the HTML comment above .fj26-uha-banner-art for the swap-in * note) + promo text, reusing zawa_fj26.css's .fj26-zawa-feature * row and about_fesyar_fj26.css's .fj26-about-row/.fj26-more-btn/ * .fj26-eyebrow/.fj26-grad-text/.fj26-thumb-badge components. * 2. A 4-step flow (form → qr → success / failed) inside one card, * cross-faded by uha_fj26.js. Fully usable with no JS: with * script disabled every step's [hidden] stays as authored (only * the form step is visible, matching a real first paint). * * Loaded LAST in so nothing existing needs to change. * ═══════════════════════════════════════════════════════════════ */ #uha{ position:relative; background: radial-gradient(ellipse 60% 65% at 6% 10%, rgba(232,199,102,0.10), transparent 60%), radial-gradient(ellipse 55% 60% at 95% 90%, rgba(30,111,255,0.15), transparent 60%) !important; } #uha:before{ content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(53,225,255,0.28), transparent); } /* ══════════════════════════════════════════════════════ 1. HERO BANNER — "kajian senja" art (dusk sky → night, crescent glow, mosque silhouette), animated ══════════════════════════════════════════════════════ */ .fj26-uha-banner{ position:relative; max-width:460px; margin:0 auto; padding:4px; border-radius:28px; background:linear-gradient(135deg, var(--fj26-gold,#E8C766), var(--fj26-blue,#1E6FFF)); box-shadow:0 20px 60px rgba(0,0,0,0.45), 0 0 40px rgba(232,199,102,0.16); animation:fj26UhaFloat 5.5s ease-in-out infinite; } @keyframes fj26UhaFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } .fj26-uha-banner-frame{ position:relative; overflow:hidden; border-radius:25px; aspect-ratio:1 / 1; background:#0A1442; } .fj26-uha-banner-art{ position:absolute; inset:0; z-index:0; overflow:hidden; /* dusk gradient stays as the base layer — shows through instantly on first paint, and gracefully covers for the photo if the file is ever missing/renamed, instead of a broken-image icon */ background:linear-gradient(180deg, #E8C766 0%, #C9822F 14%, #3A2E63 42%, #12234F 68%, #050B22 100%); animation:fj26UhaSkyDrift 18s ease-in-out infinite alternate; background-size:100% 140%; } @keyframes fj26UhaSkyDrift{ from{ background-position:0% 0%; } to{ background-position:0% 100%; } } .fj26-uha-banner-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; /* soft dusk color-grade so the photo matches the section's tone instead of sitting on top of it as a flat, unrelated insert */ filter:saturate(1.05) brightness(0.96); animation:fj26UhaKenBurns 16s ease-in-out infinite alternate; } @keyframes fj26UhaKenBurns{ from{ transform:scale(1) translate(0,0); } to{ transform:scale(1.1) translate(-1.5%,-1%); } } /* the moon / skyline / wordmark sit in front of the photo as a decorative overlay layer */ .fj26-uha-moon, .fj26-uha-skyline, .fj26-uha-wordmark{ z-index:1; } .fj26-uha-moon{ position:absolute; top:16%; right:18%; width:22%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFF7DE, #F3D98A 55%, #E8C766 100%); box-shadow:0 0 40px 14px rgba(232,199,102,0.55); animation:fj26UhaMoonPulse 4s ease-in-out infinite; } @keyframes fj26UhaMoonPulse{ 0%, 100%{ box-shadow:0 0 40px 14px rgba(232,199,102,0.5); } 50%{ box-shadow:0 0 56px 20px rgba(232,199,102,0.75); } } .fj26-uha-skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:34%; } .fj26-uha-wordmark{ position:absolute; left:0; right:0; bottom:12%; display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none; } .fj26-uha-wordmark .lbl{ font-family:'Exo', sans-serif; font-weight:800; font-size:clamp(1.4rem, 4vw, 2rem); color:var(--fj26-white,#F3F7FF); text-shadow:0 0 22px rgba(232,199,102,0.6); letter-spacing:0.02em; } .fj26-uha-wordmark .nm{ margin-top:6px; font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:13px; letter-spacing:0.22em; text-transform:uppercase; color:var(--fj26-gold,#E8C766); } .fj26-uha-shine{ position:absolute; inset:0; background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.28) 50%, transparent 58%); transform:translateX(-120%); animation:fj26UhaShine 6s ease-in-out infinite; pointer-events:none; } @keyframes fj26UhaShine{ 0%{ transform:translateX(-120%); } 35%, 100%{ transform:translateX(120%); } } .fj26-uha-badge{ position:absolute; top:14px; right:14px; } .fj26-uha-scrollto{ margin-top:6px; } /* ══════════════════════════════════════════════════════ 2. STEP FLOW CARD (form / qr / success / failed) ══════════════════════════════════════════════════════ */ .fj26-uha-flow{ position:relative; } .fj26-uha-step{ animation:fj26UhaStepIn .45s ease both; } @keyframes fj26UhaStepIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } .fj26-uha-card{ background:linear-gradient(160deg, rgba(10,20,66,0.75), rgba(10,23,112,0.45)); border:1px solid rgba(53,225,255,0.2); border-radius:22px; padding:34px 32px; box-shadow:0 20px 60px rgba(0,0,0,0.4), inset 0 0 40px rgba(30,111,255,0.05); } .fj26-uha-card-center{ text-align:center; display:flex; flex-direction:column; align-items:center; } .fj26-uha-card-head{ margin-bottom:22px; text-align:left; } .fj26-uha-card-head h3, .fj26-uha-card-center h3{ font-family:'Exo', sans-serif; font-weight:800; color:var(--fj26-white,#F3F7FF) !important; font-size:clamp(1.3rem, 2.6vw, 1.7rem); margin:8px 0 0; } /* ── form fields ── */ .fj26-uha-field{ margin-bottom:20px; text-align:left; } .fj26-uha-field-row{ display:flex; gap:18px; flex-wrap:wrap; } .fj26-uha-field-row .fj26-uha-field{ flex:1 1 20px; } .fj26-uha-field label{ display:block; font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:13px; letter-spacing:0.04em; color:rgba(230,240,255,0.85); margin-bottom:8px; } .fj26-uha-field input[type="text"], .fj26-uha-field input[type="email"], .fj26-uha-field input[type="tel"]{ width:100%; padding:13px 16px; border-radius:12px; background:rgba(5,11,34,0.55); border:1px solid rgba(53,225,255,0.22); color:var(--fj26-white,#F3F7FF); font-size:14.5px; font-family:'Barlow', Arial, sans-serif; transition:border-color .25s ease, box-shadow .25s ease; } .fj26-uha-field input::placeholder{ color:rgba(230,240,255,0.35); } .fj26-uha-field input:focus{ outline:none; border-color:var(--fj26-cyan,#35E1FF); box-shadow:0 0 0 3px rgba(53,225,255,0.15); } .fj26-uha-error{ display:none; margin-top:7px; color:#FF8FA3; font-size:12.5px; font-weight:600; } .fj26-uha-field.is-invalid input, .fj26-uha-field.is-invalid .fj26-uha-radio-group{ border-color:#FF6B81; } .fj26-uha-field.is-invalid input{ border-color:#FF6B81 !important; box-shadow:0 0 0 3px rgba(255,107,129,0.15) !important; } .fj26-uha-field.is-invalid .fj26-uha-error{ display:block; } /* ── donation radio "card" ── */ .fj26-uha-radio-group{ display:flex; flex-wrap:wrap; gap:12px; } .fj26-uha-radio-card{ position:relative; display:flex; align-items:center; gap:10px; padding:12px 20px; border-radius:14px; background:rgba(53,225,255,0.06); border:1.5px solid rgba(53,225,255,0.25); cursor:pointer; transition:border-color .25s ease, background .25s ease; } .fj26-uha-radio-card input{ position:absolute; opacity:0; width:1px; height:1px; } .fj26-uha-radio-mark{ width:18px; height:18px; border-radius:50%; border:2px solid rgba(53,225,255,0.5); flex:0 0 auto; position:relative; transition:border-color .25s ease; } .fj26-uha-radio-mark:before{ content:''; position:absolute; inset:3px; border-radius:50%; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); transform:scale(0); transition:transform .2s cubic-bezier(.34,1.56,.64,1); } .fj26-uha-radio-card input:checked ~ .fj26-uha-radio-mark{ border-color:var(--fj26-cyan,#35E1FF); } .fj26-uha-radio-card input:checked ~ .fj26-uha-radio-mark:before{ transform:scale(1); } .fj26-uha-radio-card:has(input:checked){ border-color:var(--fj26-cyan,#35E1FF); background:rgba(53,225,255,0.14); } .fj26-uha-radio-text{ font-family:'Exo', sans-serif; font-weight:700; color:var(--fj26-white,#F3F7FF); font-size:15px; } .fj26-uha-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; } /* ── QR step ── */ .fj26-uha-qr-caption{ max-width:480px; color:var(--fj26-muted,rgba(230,240,255,0.72)) !important; font-size:14.5px !important; line-height:1.7 !important; text-align:center !important; margin:6px 0 22px !important; } .fj26-uha-qr-wrap{ position:relative; width:220px; height:220px; margin:0 auto 16px; border-radius:20px; overflow:hidden; background:#0A1442; border:1px solid rgba(53,225,255,0.28); box-shadow:0 16px 40px rgba(0,0,0,0.4), 0 0 30px rgba(53,225,255,0.15); } .fj26-uha-qr{ width:100%; height:100%; display:block; } .fj26-uha-qr-scanline{ position:absolute; left:6%; right:6%; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, var(--fj26-cyan,#35E1FF), transparent); box-shadow:0 0 12px 2px rgba(53,225,255,0.7); top:6%; animation:fj26UhaScan 2.4s ease-in-out infinite; } @keyframes fj26UhaScan{ 0%, 100%{ top:6%; } 50%{ top:90%; } } .fj26-uha-qr-amount{ font-family:'Exo', sans-serif; font-size:15px; color:rgba(230,240,255,0.85); margin-bottom:26px; } .fj26-uha-qr-amount strong{ color:var(--fj26-cyan,#35E1FF); font-size:18px; } /* how-to-pay icon row */ .fj26-uha-howto{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-bottom:28px; max-width:520px; } .fj26-uha-howto-step{ display:flex; flex-direction:column; align-items:center; gap:10px; width:140px; text-align:center; } .fj26-uha-howto-ico{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; color:#fff; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); box-shadow:0 8px 20px rgba(30,111,255,0.35); } .fj26-uha-howto-step:nth-child(2) .fj26-uha-howto-ico{ background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); } .fj26-uha-howto-step:nth-child(3) .fj26-uha-howto-ico{ background:linear-gradient(135deg, var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); } .fj26-uha-howto-ico svg{ width:24px; height:24px; } .fj26-uha-howto-step span:last-child{ font-size:12.5px; color:rgba(230,240,255,0.75); line-height:1.4; } /* simulation panel (temporary, until the real QRIS gateway is wired up) */ .fj26-uha-simulate{ width:100%; max-width:480px; padding-top:20px; border-top:1px dashed rgba(230,240,255,0.18); } .fj26-uha-simulate p{ font-size:11.5px !important; color:rgba(230,240,255,0.45) !important; text-align:center !important; margin:0 0 12px !important; line-height:1.5 !important; } .fj26-uha-simulate-btns{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .fj26-uha-sim-btn{ padding:9px 18px; border-radius:30px; font-size:12px; font-weight:700; font-family:'Barlow', Arial, sans-serif; letter-spacing:0.03em; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; } .fj26-uha-sim-ok{ background:rgba(23,201,148,0.14); border:1px solid rgba(23,201,148,0.5); color:#4CE0B3; } .fj26-uha-sim-fail{ background:rgba(255,107,129,0.12); border:1px solid rgba(255,107,129,0.45); color:#FF8FA3; } .fj26-uha-sim-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.3); } /* ── result steps (success / failed) ── */ .fj26-uha-result-ico{ position:relative; display:flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; margin-bottom:20px; } .fj26-uha-result-ico svg{ width:46px; height:46px; position:relative; z-index:1; } .fj26-uha-result-ok{ color:#4CE0B3; background:rgba(23,201,148,0.12); box-shadow:0 0 0 0 rgba(23,201,148,0.5); animation:fj26UhaResultPop .5s cubic-bezier(.34,1.56,.64,1) both, fj26UhaPulseRing 2s ease-out .5s infinite; } .fj26-uha-result-bad{ color:#FF8FA3; background:rgba(255,107,129,0.12); animation:fj26UhaResultPop .5s cubic-bezier(.34,1.56,.64,1) both, fj26UhaShake .5s ease .5s both; } @keyframes fj26UhaResultPop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } } @keyframes fj26UhaPulseRing{ 0%{ box-shadow:0 0 0 0 rgba(23,201,148,0.45); } 100%{ box-shadow:0 0 0 22px rgba(23,201,148,0); } } @keyframes fj26UhaShake{ 0%, 100%{ transform:translateX(0) scale(1); } 20%{ transform:translateX(-6px) scale(1); } 40%{ transform:translateX(6px) scale(1); } 60%{ transform:translateX(-4px) scale(1); } 80%{ transform:translateX(4px) scale(1); } } .fj26-uha-confetti{ position:absolute; inset:-30px; pointer-events:none; background-image: radial-gradient(circle, var(--fj26-cyan,#35E1FF) 3px, transparent 3px), radial-gradient(circle, var(--fj26-green,#17C994) 3px, transparent 3px), radial-gradient(circle, var(--fj26-gold,#E8C766) 3px, transparent 3px), radial-gradient(circle, var(--fj26-blue,#1E6FFF) 3px, transparent 3px); background-position:10% 15%, 85% 20%, 20% 85%, 80% 80%; background-repeat:no-repeat; opacity:0; animation:fj26UhaConfetti 1.1s ease-out .35s both; } @keyframes fj26UhaConfetti{ 0%{ opacity:0; transform:scale(.3) rotate(0deg); } 35%{ opacity:1; } 100%{ opacity:0; transform:scale(1.5) rotate(35deg); } } .fj26-uha-card-center p{ max-width:440px; color:var(--fj26-muted,rgba(230,240,255,0.72)) !important; font-size:14.5px !important; line-height:1.7 !important; text-align:center !important; margin:0 0 26px !important; } .fj26-uha-btn-ghost{ background:rgba(230,240,255,0.06) !important; box-shadow:none !important; border:1px solid rgba(230,240,255,0.2); } .fj26-uha-btn-ghost:before{ display:none; } @media (max-width:767px){ .fj26-uha-card{ padding:26px 20px; } .fj26-uha-field-row{ flex-direction:column; gap:0; } .fj26-uha-howto{ gap:16px; } .fj26-uha-howto-step{ width:100px; } } @media (prefers-reduced-motion: reduce){ .fj26-uha-banner, .fj26-uha-banner-art, .fj26-uha-banner-img, .fj26-uha-moon, .fj26-uha-shine, .fj26-uha-qr-scanline, .fj26-uha-step, .fj26-uha-result-ok, .fj26-uha-result-bad, .fj26-uha-confetti{ animation:none !important; } }