/* * ═══════════════════════════════════════════════════════════════ * publikasi_fj26.css * "#publikasi" — E-Katalog & Kajian: a 3-column grid of publication * cards (Materi Dakwah, Kajian KEKSI 2025, E-Katalog UMKM), each with * an all-CSS/SVG "book cover" thumbnail (no real cover art exists * yet) + a cool download button. Third card's button ships disabled * (E-Katalog UMKM isn't live yet), per the source content. * * 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. * Pairs with /asset_easy/js_town/publikasi_fj26.js for the card * scroll-reveal stagger (fully visible with no JS). * ═══════════════════════════════════════════════════════════════ */ #publikasi{ position:relative; background: radial-gradient(ellipse 55% 60% at 90% 8%, rgba(53,225,255,0.12), transparent 60%), radial-gradient(ellipse 60% 55% at 8% 92%, rgba(30,111,255,0.14), transparent 60%) !important; } /* ══════════════════════════════════════════════════════ HEADER ══════════════════════════════════════════════════════ */ .fj26-pub-headwrap{ text-align:center; margin-bottom:46px; } .fj26-pub-title{ font-family:'Exo', sans-serif; font-weight:800; color:var(--fj26-white,#F3F7FF) !important; font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin:0 0 16px; } .fj26-pub-underline{ display:block; width:96px; height:3px; margin:0 auto 18px; border-radius:3px; background:linear-gradient(90deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); box-shadow:0 0 12px rgba(53,225,255,0.6); } .fj26-pub-desc{ max-width:640px; margin:0 auto !important; color:var(--fj26-muted,rgba(230,240,255,0.68)) !important; font-size:16px !important; line-height:1.75 !important; text-align:center !important; font-weight:400 !important; } /* ══════════════════════════════════════════════════════ GRID + CARD ══════════════════════════════════════════════════════ */ .fj26-pub-grid{ display:flex; flex-wrap:wrap; } .fj26-pub-card{ display:flex; flex-direction:column; height:100%; margin:0 8px 28px; border-radius:20px; overflow:hidden; background:linear-gradient(160deg, rgba(10,20,66,0.7), rgba(10,23,112,0.4)); border:1px solid rgba(53,225,255,0.18); transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .fj26-pub-card:hover{ transform:translateY(-6px); border-color:rgba(53,225,255,0.45); box-shadow:0 20px 44px rgba(0,0,0,0.4), 0 0 30px rgba(53,225,255,0.15); } /* ── "cool" book-cover thumbnail (all CSS/SVG, no photo asset needed) ── */ .fj26-pub-thumb{ position:relative; aspect-ratio:16 / 12.5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow:hidden; background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(30,111,255,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(53,225,255,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); } .fj26-pub-grid > div:nth-child(2) .fj26-pub-thumb{ background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(53,225,255,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(23,201,148,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); } .fj26-pub-grid > div:nth-child(3) .fj26-pub-thumb{ background: radial-gradient(ellipse 75% 65% at 20% 15%, rgba(23,201,148,0.5), transparent 60%), radial-gradient(ellipse 70% 60% at 85% 85%, rgba(30,111,255,0.35), transparent 62%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); } .fj26-pub-dots{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.4px, transparent 1.4px); background-size:20px 20px; pointer-events:none; } .fj26-pub-tag{ position:absolute; top:14px; right:14px; padding:4px 11px; border-radius:20px; background:rgba(5,11,34,0.55); border:1px solid rgba(53,225,255,0.35); color:var(--fj26-cyan,#35E1FF); font-family:'Exo', sans-serif; font-size:10.5px; font-weight:800; letter-spacing:0.1em; z-index:2; } /* real book-cover art, floating with a slow idle bob + tilt, popping forward a bit more on hover */ .fj26-pub-icon{ position:relative; z-index:1; max-height:82%; max-width:78%; -o-object-fit:contain; object-fit:contain; filter:drop-shadow(0 14px 22px rgba(0,0,0,0.45)); transition:transform .45s cubic-bezier(.34,1.56,.64,1), filter .35s ease; animation:fj26PubCoverFloat 5s ease-in-out infinite; } .fj26-pub-grid > div:nth-child(2) .fj26-pub-icon{ animation-delay:.6s; } .fj26-pub-grid > div:nth-child(3) .fj26-pub-icon{ animation-delay:1.2s; } @keyframes fj26PubCoverFloat{ 0%, 100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-9px) rotate(1deg); } } .fj26-pub-card:hover .fj26-pub-icon{ transform:translateY(-6px) scale(1.06) rotate(0deg) !important; filter:drop-shadow(0 20px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(53,225,255,0.35)); animation-play-state:paused; } .fj26-pub-thumb-label{ position:relative; z-index:1; font-family:'Exo', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(243,247,255,0.85); } /* ── body ── */ .fj26-pub-body{ flex:1; display:flex; flex-direction:column; padding:22px 22px 20px; } /* colorful per-card gradient title — each card gets its own hue pairing so the three don't all read as the same flat white heading */ .fj26-pub-body h3{ font-family:'Exo', sans-serif; font-weight:800; font-size:17px; line-height:1.35; margin:0 0 10px; background:linear-gradient(90deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 14px rgba(30,111,255,0.35)); animation:fj26PubTitleShimmer 6s linear infinite; } .fj26-pub-grid > div:nth-child(2) .fj26-pub-body h3{ background:linear-gradient(90deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 14px rgba(53,225,255,0.35)); } .fj26-pub-grid > div:nth-child(3) .fj26-pub-body h3{ background:linear-gradient(90deg, var(--fj26-green,#17C994), var(--fj26-gold,#E8C766)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 14px rgba(23,201,148,0.35)); } @keyframes fj26PubTitleShimmer{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } } .fj26-pub-body p{ flex:1; color:var(--fj26-muted,rgba(230,240,255,0.68)); font-size:13.5px; line-height:1.7; margin:0 0 18px; text-align:left; } .fj26-pub-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; border-top:1px solid rgba(53,225,255,0.14); } .fj26-pub-size{ display:inline-flex; align-items:center; gap:6px; color:rgba(230,240,255,0.6); font-size:12.5px; font-weight:600; } .fj26-pub-size svg{ color:var(--fj26-cyan,#35E1FF); flex:0 0 auto; } /* ── cool download button (shine sweep, matches .fj26-more-btn family) ── */ .fj26-pub-btn{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:9px 18px; border-radius:30px; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); color:var(--fj26-white,#F3F7FF) !important; font-family:'Exo', sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.03em; text-decoration:none !important; overflow:hidden; box-shadow:0 6px 18px rgba(30,111,255,0.3); transition:box-shadow .3s ease, transform .3s ease; } .fj26-pub-btn:before{ content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform:skewX(-20deg); transition:left .6s ease; } .fj26-pub-btn:hover{ box-shadow:0 8px 24px rgba(53,225,255,0.45); transform:translateY(-2px); color:var(--fj26-white,#F3F7FF) !important; } .fj26-pub-btn:hover:before{ left:130%; } .fj26-pub-btn-disabled{ background:rgba(255,255,255,0.06) !important; color:rgba(230,240,255,0.45) !important; box-shadow:none !important; cursor:not-allowed; border:1px dashed rgba(230,240,255,0.22); } .fj26-pub-btn-disabled:before{ display:none; } .fj26-pub-btn-disabled:hover{ transform:none; box-shadow:none !important; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL STAGGER (progressive enhancement) ══════════════════════════════════════════════════════ */ .fj26-pub-headwrap.fj26-pub-reveal-init{ opacity:0; transform:translateY(20px); } .fj26-pub-headwrap.fj26-pub-inview{ animation:fj26PubHeadRise .7s ease both; } @keyframes fj26PubHeadRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } .fj26-pub-grid.fj26-pub-reveal-init > div{ opacity:0; transform:translateY(26px); } .fj26-pub-grid.fj26-pub-inview > div{ animation:fj26PubCardRise .6s ease both; } .fj26-pub-grid.fj26-pub-inview > div:nth-child(1){ animation-delay:.05s; } .fj26-pub-grid.fj26-pub-inview > div:nth-child(2){ animation-delay:.15s; } .fj26-pub-grid.fj26-pub-inview > div:nth-child(3){ animation-delay:.25s; } @keyframes fj26PubCardRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:767px){ .fj26-pub-card{ margin:0 4px 22px; } } @media (prefers-reduced-motion: reduce){ .fj26-pub-card, .fj26-pub-icon, .fj26-pub-btn{ transition:none !important; } .fj26-pub-headwrap.fj26-pub-inview, .fj26-pub-grid.fj26-pub-inview > div, .fj26-pub-icon, .fj26-pub-body h3{ animation:none !important; } .fj26-pub-headwrap.fj26-pub-reveal-init, .fj26-pub-grid.fj26-pub-reveal-init > div, .fj26-pub-icon{ opacity:1 !important; transform:none !important; } }