/* * ═══════════════════════════════════════════════════════════════ * program_fj26.css * "#program" — Jadwal Program: three day-columns (Day 1/2/3), each * holding a vertical stack of program items (thumbnail icon, title, * Stage + Tipe tags, date/time, location, Registrasi + Info Acara * buttons). Each day column gets its own accent color (blue / cyan * / green) so the three read as distinct at a glance. * * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-eyebrow / .fj26-grad-text / .fj26-pub-headwrap components * (about_fesyar_fj26.css / publikasi_fj26.css). Loaded LAST in * so nothing existing needs to change. * Pairs with /asset_easy/js_town/program_fj26.js for the click-to- * enlarge thumbnail lightbox. All content is always visible (no * scroll-reveal gating), since long program lists span many rows. * ═══════════════════════════════════════════════════════════════ */ /* left-align the section intro (eyebrow/title/underline/description) — the shared .fj26-pub-headwrap block defaults to centered, scoped override here so publikasi.html / competition.html are unaffected */ #program .fj26-pub-headwrap{ text-align:left; } #program .fj26-pub-underline{ margin:0 0 18px; } #program .fj26-pub-desc{ margin:0 !important; text-align:left !important; } #program{ position:relative; background: radial-gradient(ellipse 55% 60% at 92% 6%, rgba(30,111,255,0.13), transparent 60%), radial-gradient(ellipse 60% 55% at 4% 94%, rgba(23,201,148,0.13), transparent 60%) !important; } .fj26-prog-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; } /* ══════════════════════════════════════════════════════ DAY COLUMN ══════════════════════════════════════════════════════ */ .fj26-prog-daycol{ --day-accent: var(--fj26-blue,#1E6FFF); --day-accent-2: var(--fj26-cyan,#35E1FF); display:flex; flex-direction:column; gap:16px; margin:0 8px 24px; } .fj26-prog-day2{ --day-accent: var(--fj26-cyan,#35E1FF); --day-accent-2: var(--fj26-green,#17C994); } .fj26-prog-day3{ --day-accent: var(--fj26-green,#17C994); --day-accent-2: var(--fj26-gold,#E8C766); } /* row above dayhead: the ready-made "Hari ke-N / date" badge graphic */ .fj26-prog-daybadge{ display:flex; } .fj26-prog-daybadge-img{ width:100%; max-width:340px; height:auto; filter:drop-shadow(0 6px 16px rgba(0,0,0,0.35)); } .fj26-prog-dayhead{ display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:2px; border-bottom:1px solid rgba(53,225,255,0.18); } .fj26-prog-daynum{ flex:0 0 auto; padding:7px 16px; border-radius:20px; font-family:'Exo', sans-serif; font-weight:800; font-size:13px; letter-spacing:0.04em; color:var(--fj26-navy-deepest,#050B22); background:linear-gradient(135deg, var(--day-accent), var(--day-accent-2)); box-shadow:0 6px 16px rgba(0,0,0,0.3); } .fj26-prog-daydate{ font-family:'Barlow', Arial, sans-serif; font-weight:600; font-size:13px; color:rgba(230,240,255,0.75); } /* ══════════════════════════════════════════════════════ PROGRAM ITEM ══════════════════════════════════════════════════════ */ .fj26-prog-item{ display:flex; flex-direction:column; overflow:hidden; border-radius:16px; background:linear-gradient(160deg, rgba(10,20,66,0.65), rgba(10,23,112,0.35)); border:1px solid rgba(53,225,255,0.14); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .fj26-prog-item:hover{ transform:translateY(-4px); border-color:rgba(53,225,255,0.4); box-shadow:0 16px 34px rgba(0,0,0,0.35), 0 0 22px rgba(53,225,255,0.12); } /* ── row 1: banner thumbnail — full width, height follows the image's own natural aspect ratio (no crop/aspect-ratio box), with a per-day color wash + slow idle zoom + a light-sweep that plays on hover ── */ .fj26-prog-thumb{ position:relative; width:100%; overflow:hidden; line-height:0; } .fj26-prog-thumb-img{ display:block; width:100%; height:auto; transform:scale(1); animation:fj26ProgThumbBreathe 6s ease-in-out infinite; transition:transform .6s ease, filter .4s ease; } @keyframes fj26ProgThumbBreathe{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } .fj26-prog-item:hover .fj26-prog-thumb-img{ transform:scale(1.1) !important; animation-play-state:paused; filter:brightness(1.08) saturate(1.1); } .fj26-prog-thumb-tint{ position:absolute; inset:0; background:linear-gradient(160deg, color-mix(in srgb, var(--day-accent) 40%, transparent) 0%, transparent 55%, rgba(5,11,34,0.85) 100%); mix-blend-mode:multiply; } .fj26-prog-thumb-fade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(6,12,40,0.92) 0%, transparent 55%); } .fj26-prog-thumb-sheen{ position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg); transition:left .8s ease; pointer-events:none; } .fj26-prog-item:hover .fj26-prog-thumb-sheen{ left:130%; } /* clickable affordance — the thumb opens the full image in a modal */ .fj26-prog-thumb-clickable{ cursor:zoom-in; } .fj26-prog-thumb-clickable:focus-visible{ outline:2px solid var(--fj26-cyan,#35E1FF); outline-offset:-2px; } .fj26-prog-thumb-zoom{ position:absolute; left:12px; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(5,11,34,0.55); border:1px solid rgba(255,255,255,0.28); color:#fff; opacity:0; transform:scale(.7); transition:opacity .3s ease, transform .3s ease; pointer-events:none; } .fj26-prog-item:hover .fj26-prog-thumb-zoom{ opacity:1; transform:scale(1); } .fj26-prog-icon{ position:absolute; right:12px; bottom:12px; z-index:2; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; color:var(--fj26-white,#F3F7FF); background:linear-gradient(135deg, var(--day-accent), var(--day-accent-2)); box-shadow:0 8px 18px rgba(0,0,0,0.35); transition:transform .4s cubic-bezier(.34,1.56,.64,1); } .fj26-prog-icon svg{ width:19px; height:19px; } .fj26-prog-item:hover .fj26-prog-icon{ transform:scale(1.12) rotate(-6deg); } /* ── row 2: body ── */ .fj26-prog-body{ flex:1; min-width:0; padding:22px 16px 16px; } .fj26-prog-body h4{ font-family:'Exo', sans-serif; font-weight:700; font-size:15px; line-height:1.35; color:var(--fj26-white,#F3F7FF); margin:0 0 9px; } .fj26-prog-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; } .fj26-prog-tag{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:14px; background:rgba(53,225,255,0.09); border:1px solid rgba(53,225,255,0.22); color:var(--fj26-cyan,#35E1FF); font-size:10.5px; font-weight:700; letter-spacing:0.02em; } .fj26-prog-tag svg{ flex:0 0 auto; } .fj26-prog-tag-type{ background:rgba(23,201,148,0.1); border-color:rgba(23,201,148,0.28); color:var(--fj26-green,#17C994); } .fj26-prog-time, .fj26-prog-loc{ display:flex; align-items:flex-start; gap:6px; color:rgba(230,240,255,0.6); font-size:11.5px; line-height:1.5; margin-bottom:5px; } .fj26-prog-time svg, .fj26-prog-loc svg{ flex:0 0 auto; margin-top:1px; color:var(--day-accent-2); } .fj26-prog-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .fj26-prog-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:7px 15px; border-radius:20px; font-family:'Exo', sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.02em; text-decoration:none !important; overflow:hidden; transition:box-shadow .3s ease, transform .3s ease, background .3s ease, color .3s ease; } .fj26-prog-btn-primary{ color:var(--fj26-white,#F3F7FF) !important; background:linear-gradient(135deg, var(--day-accent), var(--day-accent-2)); box-shadow:0 6px 16px rgba(30,111,255,0.28); } .fj26-prog-btn-primary: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-prog-btn-primary:hover{ box-shadow:0 8px 22px rgba(53,225,255,0.4); transform:translateY(-2px); } .fj26-prog-btn-primary:hover:before{ left:130%; } .fj26-prog-btn-ghost{ color:rgba(230,240,255,0.8) !important; background:transparent; border:1px solid rgba(230,240,255,0.28); } .fj26-prog-btn-ghost:hover{ color:var(--fj26-white,#F3F7FF) !important; border-color:var(--day-accent-2); background:rgba(53,225,255,0.08); transform:translateY(-2px); } @media (max-width:767px){ .fj26-prog-daycol{ margin:0 4px 22px; } .fj26-prog-body{ padding:18px 14px 14px; } .fj26-prog-icon{ width:38px; height:38px; } .fj26-prog-icon svg{ width:17px; height:17px; } } @media (prefers-reduced-motion: reduce){ .fj26-prog-item, .fj26-prog-icon, .fj26-prog-btn, .fj26-prog-thumb-img, .fj26-prog-thumb-sheen{ transition:none !important; } .fj26-prog-thumb-img{ animation:none !important; transform:none !important; } } /* ══════════════════════════════════════════════════════ LIGHTBOX — click a thumb to see the banner full-size ══════════════════════════════════════════════════════ */ body.fj26-prog-lightbox-lock{ overflow:hidden; } .fj26-prog-lightbox{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:40px 24px; visibility:hidden; opacity:0; transition:opacity .3s ease, visibility 0s linear .3s; } .fj26-prog-lightbox.is-open{ visibility:visible; opacity:1; transition:opacity .3s ease, visibility 0s linear 0s; } .fj26-prog-lightbox-backdrop{ position:absolute; inset:0; background:rgba(3,7,20,0.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .fj26-prog-lightbox-inner{ position:relative; z-index:1; max-width:min(90vw, 720px); max-height:88vh; display:flex; flex-direction:column; align-items:center; transform:scale(.92); transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .fj26-prog-lightbox.is-open .fj26-prog-lightbox-inner{ transform:scale(1); } .fj26-prog-lightbox-img{ display:block; max-width:100%; max-height:76vh; width:auto; height:auto; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(53,225,255,0.18); border:1px solid rgba(53,225,255,0.28); } .fj26-prog-lightbox-caption{ margin-top:16px; color:rgba(230,240,255,0.9); font-family:'Exo', sans-serif; font-weight:700; font-size:14.5px; text-align:center; } .fj26-prog-lightbox-close{ position:absolute; top:-48px; right:0; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(10,20,66,0.75); border:1px solid rgba(53,225,255,0.35); color:var(--fj26-white,#F3F7FF); cursor:pointer; padding:0; transition:background .25s ease, transform .25s ease, border-color .25s ease; } .fj26-prog-lightbox-close:hover{ background:rgba(53,225,255,0.22); border-color:var(--fj26-cyan,#35E1FF); transform:rotate(90deg); } .fj26-prog-lightbox-close:focus-visible{ outline:2px solid var(--fj26-cyan,#35E1FF); outline-offset:2px; } @media (max-width:600px){ .fj26-prog-lightbox-close{ top:auto; bottom:calc(100% + 10px); right:0; } } @media (prefers-reduced-motion: reduce){ .fj26-prog-lightbox, .fj26-prog-lightbox-inner, .fj26-prog-lightbox-close{ transition:none !important; } }