/* * ═══════════════════════════════════════════════════════════════ * tentang_fj26.css * "#subheader" — a 400px sub-page hero banner (bgSub1.jpg) with an * animated title + breadcrumb, used above "#tentang", plus the * redesigned #tentang content itself (Profil FESyar Jawa material). * * 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/tentang_fj26.js for the agenda-card * scroll-reveal stagger (fully visible with no JS). * ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════ 1. SUB-PAGE HEADER (400px hero) ══════════════════════════════════════════════════════ */ .fj26-subhdr{ position:relative; height:270px; display:flex; align-items:center; justify-content:center; overflow:hidden; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; } .fj26-subhdr-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,11,34,0.35) 0%, rgba(5,11,34,0.55) 55%, var(--fj26-navy-deepest,#050B22) 100%), radial-gradient(ellipse 60% 70% at 50% 40%, rgba(30,111,255,0.12), transparent 70%); pointer-events:none; } .fj26-subhdr .container{ position:relative; z-index:2; } .fj26-subhdr-inner{ text-align:center; display:flex; flex-direction:column; align-items:center; } .fj26-subhdr-eyebrow{ opacity:0; animation:fj26SubUp .6s ease .1s both; } /* animated title */ .fj26-subhdr-title{ font-family:'Exo', sans-serif; font-weight:900; font-size:clamp(2.4rem, 6vw, 4rem); line-height:1.1; color:var(--fj26-white,#F3F7FF); margin:16px 0 14px; letter-spacing:0.01em; opacity:0; animation:fj26SubUp .7s ease .22s both; } .fj26-subhdr-title .fj26-grad-text{ filter:drop-shadow(0 0 26px rgba(53,225,255,0.4)); } .fj26-subhdr-underline{ display:block; width:0; height:3px; 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); margin-bottom:22px; animation:fj26SubGrow .8s ease .5s both; } @keyframes fj26SubGrow{ from{ width:0; } to{ width:96px; } } @keyframes fj26SubUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } /* cool breadcrumb */ .fj26-breadcrumb{ display:inline-flex; align-items:center; gap:10px; padding:9px 20px; border-radius:30px; background:rgba(10,20,66,0.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(53,225,255,0.25); box-shadow:0 6px 20px rgba(0,0,0,0.3); opacity:0; animation:fj26SubUp .6s ease .65s both; } .fj26-breadcrumb a{ display:inline-flex; align-items:center; gap:6px; color:rgba(230,240,255,0.75) !important; font-size:13px; font-weight:600; text-decoration:none !important; transition:color .25s ease; } .fj26-breadcrumb a:hover{ color:var(--fj26-cyan,#35E1FF) !important; } .fj26-bc-sep{ display:inline-flex; color:rgba(53,225,255,0.5); } .fj26-bc-current{ color:var(--fj26-cyan,#35E1FF); font-size:13px; font-weight:700; letter-spacing:0.02em; } @media (prefers-reduced-motion: reduce){ .fj26-subhdr-eyebrow, .fj26-subhdr-title, .fj26-breadcrumb{ animation:none !important; opacity:1 !important; transform:none !important; } .fj26-subhdr-underline{ animation:none !important; width:96px !important; } } @media (max-width:767px){ .fj26-subhdr{ height:280px; } } /* ══════════════════════════════════════════════════════ 2. #tentang — redesigned "Profil Kegiatan" content ══════════════════════════════════════════════════════ */ .fj26-tentang-section{ position:relative; background: radial-gradient(ellipse 60% 55% at 92% 8%, rgba(23,201,148,0.10), transparent 60%), radial-gradient(ellipse 55% 55% at 6% 90%, rgba(30,111,255,0.12), transparent 60%) !important; } .fj26-tentang-intro{ text-align:left; margin-bottom:8px; } .fj26-tentang-intro .fj26-about-title{ margin-bottom:22px; } .fj26-tentang-intro .fj26-about-desc{ max-width:900px; } /* theme quote */ .fj26-tentang-quote{ position:relative; max-width:760px; margin:8px 0 26px; padding:24px 34px; border-radius:18px; background:linear-gradient(135deg, rgba(30,111,255,0.10), rgba(23,201,148,0.08)); border:1px solid rgba(53,225,255,0.24); box-shadow:0 16px 44px rgba(0,0,0,0.32), inset 0 0 26px rgba(30,111,255,0.06); font-family:'Exo', sans-serif; font-style:italic; font-weight:700; font-size:clamp(1.05rem, 2.2vw, 1.3rem); line-height:1.55; color:var(--fj26-white,#F3F7FF); } .fj26-tentang-quote .mark{ color:var(--fj26-cyan,#35E1FF); font-family:Georgia, serif; font-size:1.5em; font-style:normal; line-height:0; vertical-align:-0.26em; opacity:0.85; } /* agenda pillar cards */ .fj26-agenda-row{ margin-top:34px; margin-bottom:12px; display:flex; flex-wrap:wrap; } .fj26-agenda-row > div{ margin-bottom:24px; display:flex; } .fj26-agenda-card{ position:relative; width:100%; padding:30px 26px 28px; border-radius:20px; text-align:left; 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 14px 34px rgba(0,0,0,0.3); transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .fj26-agenda-card:hover{ transform:translateY(-6px); border-color:rgba(53,225,255,0.5); box-shadow:0 20px 46px rgba(0,0,0,0.4), 0 0 30px rgba(53,225,255,0.16); } .fj26-agenda-icon{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; margin-bottom:18px; 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); transition:transform .4s cubic-bezier(.34,1.56,.64,1); } .fj26-agenda-card:hover .fj26-agenda-icon{ transform:scale(1.1) rotate(-6deg); } .fj26-agenda-row > div:nth-child(2) .fj26-agenda-icon{ background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); } .fj26-agenda-row > div:nth-child(3) .fj26-agenda-icon{ background:linear-gradient(135deg, var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); } .fj26-agenda-icon svg{ width:26px; height:26px; } .fj26-agenda-card h3{ font-family:'Exo', sans-serif; font-weight:800; font-size:19px; color:var(--fj26-white,#F3F7FF); margin:0 0 12px; } .fj26-agenda-card > p{ color:var(--fj26-muted,rgba(230,240,255,0.68)); font-size:14px; line-height:1.65; margin:0 0 14px; text-align:left; } .fj26-agenda-list{ list-style:none; margin:0; padding:0; } .fj26-agenda-list li{ position:relative; padding-left:22px; margin-bottom:11px; font-size:13.5px; line-height:1.6; color:rgba(230,240,255,0.82); } .fj26-agenda-list li:last-child{ margin-bottom:0; } .fj26-agenda-list li:before{ content:''; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:2px; background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); box-shadow:0 0 6px rgba(53,225,255,0.55); transform:rotate(45deg); } .fj26-agenda-list strong{ color:var(--fj26-white,#F3F7FF); font-weight:700; } .fj26-tentang-closing{ text-align:center; max-width:900px; margin:10px auto 0 !important; color:var(--fj26-muted,rgba(230,240,255,0.68)) !important; font-size:15px !important; line-height:1.75 !important; font-style:italic; } /* ── scroll-reveal (progressive enhancement) ── */ .fj26-tentang-intro.fj26-tt-reveal-init{ opacity:0; transform:translateY(22px); } .fj26-tentang-intro.fj26-tt-inview{ animation:fj26TtRise .7s ease both; } @keyframes fj26TtRise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:translateY(0); } } .fj26-agenda-row.fj26-tt-reveal-init > div{ opacity:0; transform:translateY(26px); } .fj26-agenda-row.fj26-tt-inview > div{ animation:fj26TtCardRise .6s ease both; } .fj26-agenda-row.fj26-tt-inview > div:nth-child(1){ animation-delay:.05s; } .fj26-agenda-row.fj26-tt-inview > div:nth-child(2){ animation-delay:.16s; } .fj26-agenda-row.fj26-tt-inview > div:nth-child(3){ animation-delay:.27s; } @keyframes fj26TtCardRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } } @media (max-width:991px){ .fj26-tentang-intro{ text-align:center; } .fj26-tentang-intro .fj26-about-desc{ text-align:center !important; margin-left:auto; margin-right:auto; } .fj26-tentang-quote{ margin-left:auto; margin-right:auto; text-align:center; } } @media (prefers-reduced-motion: reduce){ .fj26-agenda-card{ transition:none !important; } .fj26-tentang-intro.fj26-tt-inview, .fj26-agenda-row.fj26-tt-inview > div{ animation:none !important; } .fj26-tentang-intro.fj26-tt-reveal-init, .fj26-agenda-row.fj26-tt-reveal-init > div{ opacity:1 !important; transform:none !important; } }