/* * ═══════════════════════════════════════════════════════════════ * about_fesyar_fj26.css * "#about_fesyar" — a clone of the #tentang section, redesigned as * a cool FESyar Jawa 2026 teaser: eyebrow, gradient title, copy, * info chips, a "More" button, and an all-CSS/SVG art thumbnail * with hover + scroll-reveal micro animation. * * Reuses the --fj26-* tokens declared in color_fj26_override.css. * Loaded LAST in (after footer_fj26.css) so nothing in any * existing CSS/JS file needs to change. * Pairs with /asset_easy/js_town/about_fesyar_fj26.js for the * scroll-reveal + pointer-tilt behavior (progressively enhanced — * the section is fully visible with no JS at all). * ═══════════════════════════════════════════════════════════════ */ #about_fesyar{ position:relative; background: radial-gradient(ellipse 60% 70% at 8% 20%, rgba(30,111,255,0.14), transparent 60%), radial-gradient(ellipse 55% 60% at 96% 80%, rgba(23,201,148,0.12), transparent 60%) !important; } #about_fesyar:before{ content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg, transparent, rgba(53,225,255,0.28), transparent); } .fj26-about-row{ display:flex; flex-wrap:wrap; align-items:center; } /* ══════════════════════════════════════════════════════ TEXT COLUMN ══════════════════════════════════════════════════════ */ .fj26-about-text{ text-align:left; padding:20px 10px; } .fj26-eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:7px 18px; border-radius:30px; background:rgba(53,225,255,0.08); border:1px solid rgba(53,225,255,0.28); color:var(--fj26-cyan,#35E1FF); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:18px; font-family:'Barlow', Arial, sans-serif; } .fj26-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--fj26-green,#17C994); box-shadow:0 0 8px 2px rgba(23,201,148,0.7); animation:fj26AboutBlink 1.6s ease-in-out infinite; } @keyframes fj26AboutBlink{ 0%, 100%{ opacity:1; } 50%{ opacity:.35; } } .fj26-about-title{ font-family:'Exo', sans-serif; font-weight:800; color:var(--fj26-white,#F3F7FF) !important; font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.2; margin:0 0 20px; } .fj26-grad-text{ background:linear-gradient(90deg, var(--fj26-blue,#1E6FFF), 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 18px rgba(53,225,255,0.25)); animation:fj26AboutShimmer 6s linear infinite; } @keyframes fj26AboutShimmer{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } } .fj26-about-desc{ color:var(--fj26-muted,rgba(230,240,255,0.68)) !important; font-size:15.5px; line-height:1.75; text-align:left !important; margin:0 0 16px !important; font-weight:400 !important; } .fj26-about-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 26px; } .fj26-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:30px; background:linear-gradient(135deg, rgba(10,20,66,0.75), rgba(10,23,112,0.5)); border:1px solid rgba(53,225,255,0.25); color:var(--fj26-white,#F3F7FF); font-size:12.5px; font-weight:600; letter-spacing:0.02em; } .fj26-chip svg{ color:var(--fj26-cyan,#35E1FF); flex:0 0 auto; } /* ── cool "More" button: gradient border + shine sweep + arrow slide ── */ .fj26-more-btn{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:13px 30px; border-radius:40px; 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:14.5px; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none !important; overflow:hidden; box-shadow:0 8px 26px rgba(30,111,255,0.3); transition:box-shadow .3s ease, transform .3s ease; } .fj26-more-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-more-btn:hover{ box-shadow:0 10px 34px rgba(53,225,255,0.5); transform:translateY(-3px); color:var(--fj26-white,#F3F7FF) !important; } .fj26-more-btn:hover:before{ left:130%; } .fj26-more-arrow{ display:inline-flex; transition:transform .3s ease; } .fj26-more-btn:hover .fj26-more-arrow{ transform:translateX(5px); } /* ══════════════════════════════════════════════════════ THUMBNAIL COLUMN — all-CSS/SVG art card, no external image ══════════════════════════════════════════════════════ */ .fj26-thumb-card{ position:relative; border-radius:22px; overflow:hidden; aspect-ratio:4 / 3; border:1px solid rgba(53,225,255,0.28); box-shadow:0 20px 60px rgba(0,0,0,0.45), inset 0 0 40px rgba(30,111,255,0.06); transition:box-shadow .4s ease, transform .4s ease; transform-style:preserve-3d; will-change:transform; } .fj26-thumb-card:hover{ box-shadow:0 26px 70px rgba(0,0,0,0.55), 0 0 50px rgba(53,225,255,0.25), inset 0 0 50px rgba(30,111,255,0.1); } .fj26-thumb-art{ position:absolute; inset:0; background: radial-gradient(ellipse 70% 60% at 20% 15%, rgba(30,111,255,0.45), transparent 60%), radial-gradient(ellipse 65% 55% at 85% 25%, rgba(53,225,255,0.3), transparent 60%), radial-gradient(ellipse 70% 60% at 60% 100%, rgba(23,201,148,0.35), transparent 65%), linear-gradient(160deg, #050B22 0%, #0A1442 55%, #0A2A5E 100%); transition:transform .5s ease; } .fj26-thumb-card:hover .fj26-thumb-art{ transform:scale(1.08); } .fj26-thumb-skyline{ position:absolute; left:0; right:0; bottom:0; width:100%; height:32%; } .fj26-thumb-wordmark{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; } .fj26-thumb-wordmark .yr{ font-family:'Exo', sans-serif; font-weight:900; font-size:clamp(2.6rem, 6vw, 3.6rem); line-height:1; background:linear-gradient(90deg, var(--fj26-white,#F3F7FF), var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 0 20px rgba(53,225,255,0.4)); } .fj26-thumb-wordmark .lbl{ margin-top:6px; font-family:'Barlow', Arial, sans-serif; font-weight:700; font-size:13px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(230,240,255,0.8); } .fj26-thumb-badge{ position:absolute; top:16px; right:16px; padding:6px 14px; border-radius:20px; background:rgba(53,225,255,0.14); border:1px solid rgba(53,225,255,0.4); color:var(--fj26-cyan,#35E1FF); font-family:'Barlow', Arial, sans-serif; font-size:11px; font-weight:800; letter-spacing:0.12em; animation:fj26ThumbBadgePulse 2.6s ease-in-out infinite; } @keyframes fj26ThumbBadgePulse{ 0%, 100%{ box-shadow:0 0 0 0 rgba(53,225,255,0.35); } 50%{ box-shadow:0 0 0 6px rgba(53,225,255,0); } } /* bottom reveal overlay (slides up on hover) */ .fj26-thumb-overlay{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:16px 22px; background:linear-gradient(0deg, rgba(3,7,20,0.92) 0%, rgba(3,7,20,0.55) 70%, transparent 100%); color:var(--fj26-white,#F3F7FF); font-family:'Exo', sans-serif; font-weight:700; font-size:14px; letter-spacing:0.02em; transform:translateY(100%); transition:transform .4s ease; } .fj26-thumb-card:hover .fj26-thumb-overlay{ transform:translateY(0); } .fj26-thumb-overlay i{ display:inline-flex; color:var(--fj26-cyan,#35E1FF); transition:transform .3s ease; } .fj26-thumb-card:hover .fj26-thumb-overlay i{ transform:translateX(4px); } /* corner brackets that draw in on hover */ .fj26-thumb-card:after{ content:''; position:absolute; inset:10px; border-radius:14px; border:1px solid rgba(53,225,255,0); transition:border-color .4s ease, inset .4s ease; pointer-events:none; } .fj26-thumb-card:hover:after{ border-color:rgba(53,225,255,0.5); inset:14px; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL MICRO ANIMATION (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.fj26-reveal-init{ opacity:0; transform:translateY(24px); } .fj26-thumb-card.fj26-reveal-init{ opacity:0; transform:translateY(24px) scale(.97); } .fj26-about-text.fj26-inview{ animation:fj26AboutRise .7s ease both; } .fj26-thumb-card.fj26-inview{ /* "backwards" only (not "both"): once the rise-in finishes, release transform back to the normal cascade so the mousemove pointer-tilt (which sets an inline transform) and the hover states aren't permanently overridden by this entrance animation's end state. */ animation:fj26ThumbRise .7s ease .12s backwards; } @keyframes fj26AboutRise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } } @keyframes fj26ThumbRise{ from{ opacity:0; transform:translateY(24px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } } @media (max-width:991px){ .fj26-about-text{ text-align:center; padding:10px 15px 30px; } .fj26-about-desc{ text-align:center !important; } .fj26-about-chips{ justify-content:center; } .fj26-thumb-card{ max-width:520px; margin:0 auto; } } /* Below 768px, this theme's own .col-sm-12{width:100%} rule is itself wrapped in @media(min-width:768px) — so it does nothing on real phones. Under the original float-based .row that didn't matter (an unclassed block div is 100% wide by default), but .fj26-about-row is display:flex, so its column children no longer get that free 100% fallback — they shrink-to-fit instead, and a mostly-empty thumbnail column (no text forcing a min width) can collapse to a sliver. Force full-width, non-shrinking columns here to restore the intended stack. */ @media (max-width:767px){ .fj26-about-row > div{ flex:0 0 100%; max-width:100%; width:100%; } } @media (prefers-reduced-motion: reduce){ .fj26-grad-text, .fj26-eyebrow .dot, .fj26-thumb-badge, .fj26-about-text.fj26-inview, .fj26-thumb-card.fj26-inview{ animation:none !important; } .fj26-about-text.fj26-reveal-init, .fj26-thumb-card.fj26-reveal-init{ opacity:1 !important; transform:none !important; } }