/* * ═══════════════════════════════════════════════════════════════ * highlight_fj26.css * "#highlight" — Program & Highlight section: a grid of 8 clickable * activity thumbnails (Lomba & Kompetisi, Business Matching, ...) * with medium icon badges + hover/entrance micro animation. * * 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/highlight_fj26.js for the * scroll-reveal stagger (the section is fully visible with no JS). * ═══════════════════════════════════════════════════════════════ */ #highlight{ position:relative; background: radial-gradient(ellipse 55% 60% at 92% 10%, rgba(53,225,255,0.12), transparent 60%), radial-gradient(ellipse 60% 55% at 6% 90%, rgba(30,111,255,0.14), transparent 60%) !important; } /* ══════════════════════════════════════════════════════ HEADER: eyebrow + cool title + divider + casual copy ══════════════════════════════════════════════════════ */ .fj26-hl-headwrap{ text-align:center; margin-bottom:44px; } .fj26-hl-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-hl-divider{ display:flex; align-items:center; justify-content:center; gap:10px; margin:0 auto 18px; width:140px; } .fj26-hl-divider:before, .fj26-hl-divider:after{ content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(53,225,255,0.5)); } .fj26-hl-divider:after{ background:linear-gradient(90deg, rgba(53,225,255,0.5), transparent); } .fj26-hl-divider span{ width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); transform:rotate(45deg); box-shadow:0 0 10px rgba(53,225,255,0.6); flex:0 0 auto; } .fj26-hl-desc{ max-width:680px; 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 ══════════════════════════════════════════════════════ */ .fj26-hl-grid{ display:flex; flex-wrap:wrap; row-gap:22px; } .fj26-hl-grid > div{ margin-bottom:0; } .fj26-hl-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; height:100%; min-height:190px; margin:0 8px; padding:30px 16px 24px; border-radius:20px; text-align:center; text-decoration:none !important; 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); overflow:hidden; cursor:pointer; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; } .fj26-hl-card:before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(53,225,255,0.16), transparent 65%); opacity:0; transition:opacity .35s ease; } .fj26-hl-card:hover{ transform:translateY(-8px); border-color:rgba(53,225,255,0.55); 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.18); } .fj26-hl-card:hover:before{ opacity:1; } .fj26-hl-icon{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; color:var(--fj26-white,#F3F7FF); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); box-shadow:0 8px 22px rgba(30,111,255,0.35), inset 0 0 0 1px rgba(255,255,255,0.12); transition:transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; } .fj26-hl-icon svg{ width:26px; height:26px; } .fj26-hl-card:hover .fj26-hl-icon{ transform:scale(1.12) rotate(-6deg); box-shadow:0 10px 28px rgba(53,225,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.25); } /* cycle icon-badge tint across the 8 cards for visual rhythm */ .fj26-hl-grid > div:nth-child(3n+2) .fj26-hl-icon{ background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); } .fj26-hl-grid > div:nth-child(3n+3) .fj26-hl-icon{ background:linear-gradient(135deg, var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); } .fj26-hl-label{ 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; } .fj26-hl-go{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; color:var(--fj26-cyan,#35E1FF); background:rgba(53,225,255,0.1); border:1px solid rgba(53,225,255,0.3); opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease, background .3s ease, color .3s ease; } .fj26-hl-card:hover .fj26-hl-go{ opacity:1; transform:translateY(0); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); color:var(--fj26-white,#F3F7FF); border-color:transparent; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL STAGGER (progressive enhancement) Default = fully visible; JS adds .fj26-hl-reveal-init just before observing the row, then .fj26-hl-inview once it enters view. ══════════════════════════════════════════════════════ */ .fj26-hl-grid.fj26-hl-reveal-init > div{ opacity:0; transform:translateY(26px); } .fj26-hl-grid.fj26-hl-inview > div{ animation:fj26HlRise .6s ease both; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(1){ animation-delay:.02s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(2){ animation-delay:.08s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(3){ animation-delay:.14s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(4){ animation-delay:.2s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(5){ animation-delay:.26s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(6){ animation-delay:.32s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(7){ animation-delay:.38s; } .fj26-hl-grid.fj26-hl-inview > div:nth-child(8){ animation-delay:.44s; } @keyframes fj26HlRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } } .fj26-hl-headwrap.fj26-hl-reveal-init{ opacity:0; transform:translateY(20px); } .fj26-hl-headwrap.fj26-hl-inview{ animation:fj26HlHeadRise .7s ease both; } @keyframes fj26HlHeadRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:767px){ .fj26-hl-card{ margin:0 6px; min-height:170px; padding:24px 10px 20px; } .fj26-hl-icon{ width:52px; height:52px; } .fj26-hl-icon svg{ width:22px; height:22px; } .fj26-hl-label{ font-size:13px; } } @media (prefers-reduced-motion: reduce){ .fj26-hl-card, .fj26-hl-icon, .fj26-hl-go{ transition:none !important; } .fj26-hl-grid.fj26-hl-inview > div, .fj26-hl-headwrap.fj26-hl-inview{ animation:none !important; } .fj26-hl-grid.fj26-hl-reveal-init > div, .fj26-hl-headwrap.fj26-hl-reveal-init{ opacity:1 !important; transform:none !important; } }