/* * ═══════════════════════════════════════════════════════════════ * stakeholders_fj26.css * "#stakeholders" — Kementerian & Lembaga / Pemerintah Provinsi: * redesigns the old gold-shadow white cards + green/red gradient * caption bars into FJ26-toned glass cards with a light "logo * plate" (the sponsor artwork is flat-white JPGs, so a plate is * kept for contrast) and a hover + scroll-reveal micro animation. * * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-eyebrow / .fj26-about-title / .fj26-grad-text components * (about_fesyar_fj26.css). Loaded LAST in so nothing existing * needs to change. Pairs with /asset_easy/js_town/stakeholders_fj26.js * for the scroll-reveal stagger (fully visible with no JS). * ═══════════════════════════════════════════════════════════════ */ #stakeholders{ position:relative; background: radial-gradient(ellipse 60% 60% at 92% 8%, rgba(53,225,255,0.12), transparent 60%), radial-gradient(ellipse 55% 55% at 4% 92%, rgba(23,201,148,0.1), transparent 60%) !important; } /* ══════════════════════════════════════════════════════ GROUP HEADERS ══════════════════════════════════════════════════════ */ .fj26-stake-headwrap{ text-align:left; margin-bottom:28px; } .fj26-stake-headwrap-b{ margin-top:56px; } .fj26-stake-headwrap .fj26-about-title{ margin:14px 0 0; font-size:clamp(1.4rem, 2.6vw, 2rem); } /* ══════════════════════════════════════════════════════ CARDS ══════════════════════════════════════════════════════ */ .fj26-stake-row{ display:flex; flex-wrap:wrap; margin-bottom:10px; } .fj26-stake-row > div{ margin-bottom:24px; } .fj26-stake-card{ position:relative; display:flex; flex-direction:column; align-items:center; height:100%; padding:22px 16px 20px; border-radius:18px; text-align:center; text-decoration:none !important; background:linear-gradient(160deg, rgba(10,20,66,0.72), rgba(10,23,112,0.42)); border:1px solid rgba(53,225,255,0.18); box-shadow:0 10px 30px rgba(0,0,0,0.25); overflow:hidden; cursor:pointer; transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } .fj26-stake-card:before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(53,225,255,0.16), transparent 65%); opacity:0; transition:opacity .35s ease; pointer-events:none; } .fj26-stake-card:hover{ transform:translateY(-8px); border-color:rgba(53,225,255,0.5); background:linear-gradient(160deg, rgba(15,28,84,0.85), rgba(10,23,112,0.55)); box-shadow:0 20px 44px rgba(0,0,0,0.4), 0 0 30px rgba(53,225,255,0.2); } .fj26-stake-card:hover:before{ opacity:1; } /* light "logo plate" — the sponsor artwork is flat-white JPGs, so a near-white plate keeps them legible against the dark card */ .fj26-stake-plate{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:100%; height:108px; padding:12px; margin-bottom:16px; border-radius:14px; background:linear-gradient(160deg, #f5f8ff, #e7edf9); box-shadow:inset 0 0 0 1px rgba(10,20,66,0.06), 0 6px 16px rgba(0,0,0,0.18); transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; } .fj26-stake-plate img{ max-width:100%; max-height:100%; object-fit:contain; } .fj26-stake-card:hover .fj26-stake-plate{ transform:scale(1.06); box-shadow:inset 0 0 0 1px rgba(10,20,66,0.06), 0 10px 24px rgba(53,225,255,0.25); } .fj26-stake-name{ position:relative; z-index:1; font-family:'Exo', sans-serif; font-weight:700; font-size:14.5px; line-height:1.35; color:var(--fj26-white,#F3F7FF); letter-spacing:0.01em; } /* corner glow accent that draws in on hover */ .fj26-stake-card:after{ content:''; position:absolute; inset:8px; border-radius:12px; border:1px solid rgba(53,225,255,0); transition:border-color .4s ease, inset .4s ease; pointer-events:none; } .fj26-stake-card:hover:after{ border-color:rgba(53,225,255,0.35); inset:11px; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL STAGGER (progressive enhancement) Default = fully visible; JS adds .fj26-stake-reveal-init just before observing each row, then .fj26-stake-inview once it enters view. ══════════════════════════════════════════════════════ */ .fj26-stake-headwrap.fj26-stake-reveal-init{ opacity:0; transform:translateY(18px); } .fj26-stake-headwrap.fj26-stake-inview{ animation:fj26StakeHeadRise .6s ease both; } @keyframes fj26StakeHeadRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } .fj26-stake-row.fj26-stake-reveal-init > div{ opacity:0; transform:translateY(24px); } .fj26-stake-row.fj26-stake-inview > div{ animation:fj26StakeRise .6s ease backwards; } .fj26-stake-row.fj26-stake-inview > div:nth-child(1){ animation-delay:.02s; } .fj26-stake-row.fj26-stake-inview > div:nth-child(2){ animation-delay:.08s; } .fj26-stake-row.fj26-stake-inview > div:nth-child(3){ animation-delay:.14s; } .fj26-stake-row.fj26-stake-inview > div:nth-child(4){ animation-delay:.2s; } .fj26-stake-row.fj26-stake-inview > div:nth-child(5){ animation-delay:.26s; } .fj26-stake-row.fj26-stake-inview > div:nth-child(6){ animation-delay:.32s; } @keyframes fj26StakeRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:767px){ .fj26-stake-headwrap{ text-align:center; } .fj26-stake-plate{ height:88px; } } @media (prefers-reduced-motion: reduce){ .fj26-stake-card, .fj26-stake-plate{ transition:none !important; } .fj26-stake-headwrap.fj26-stake-inview, .fj26-stake-row.fj26-stake-inview > div{ animation:none !important; } .fj26-stake-headwrap.fj26-stake-reveal-init, .fj26-stake-row.fj26-stake-reveal-init > div{ opacity:1 !important; transform:none !important; } }