/* * ═══════════════════════════════════════════════════════════════ * news_fj26.css * "#newslist1" on news.html — two-column news layout: * left (col-md-8) = main news list, photo + title + meta * right (col-md-4) = smaller-thumbnail archive sidebar * * 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/news_fj26.js for the scroll-reveal * stagger (the section is fully visible with no JS at all). * ═══════════════════════════════════════════════════════════════ */ .fj26-news-section{ position:relative; background: radial-gradient(ellipse 55% 55% at 92% 8%, rgba(53,225,255,0.1), transparent 60%), radial-gradient(ellipse 55% 55% at 4% 92%, rgba(30,111,255,0.12), transparent 60%) !important; } .fj26-news-headwrap{ margin-bottom:34px; } /* ══════════════════════════════════════════════════════ LEFT — main news list ══════════════════════════════════════════════════════ */ .fj26-news-col-main{ display:flex; flex-direction:column; gap:20px; } .fj26-news-main-item{ display:flex; align-items:stretch; gap:22px; padding:14px; border-radius:18px; background:linear-gradient(160deg, rgba(10,20,66,0.65), rgba(10,23,112,0.35)); border:1px solid rgba(53,225,255,0.16); text-decoration:none !important; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; } .fj26-news-main-item:hover{ transform:translateY(-4px); border-color:rgba(53,225,255,0.45); background:linear-gradient(160deg, rgba(15,28,84,0.78), rgba(10,23,112,0.45)); box-shadow:0 16px 36px rgba(0,0,0,0.35), 0 0 24px rgba(53,225,255,0.14); } .fj26-news-main-thumb{ flex:0 0 auto; width:240px; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4 / 3; } .fj26-news-main-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; } .fj26-news-main-item:hover .fj26-news-main-thumb img{ transform:scale(1.08); } .fj26-news-main-body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; min-width:0; text-align:left; } .fj26-news-title{ font-family:'Exo', sans-serif; font-weight:700; font-size:19px; line-height:1.4; color:var(--fj26-cyan,#35E1FF) !important; text-align:left !important; text-shadow:0 0 18px rgba(53,225,255,0.25); margin:0; transition:color .25s ease, text-shadow .25s ease; } .fj26-news-main-item:hover .fj26-news-title{ color:var(--fj26-white,#F3F7FF) !important; text-shadow:0 0 22px rgba(53,225,255,0.5); } .fj26-news-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:16px; text-align:left; } .fj26-news-meta-item{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--fj26-muted,rgba(230,240,255,0.65)); letter-spacing:0.01em; } .fj26-news-meta-item svg{ color:var(--fj26-cyan,#35E1FF); flex:0 0 auto; } /* ══════════════════════════════════════════════════════ RIGHT — archive sidebar ══════════════════════════════════════════════════════ */ .fj26-news-archive-box{ position:sticky; top:20px; padding:22px; border-radius:18px; background:linear-gradient(160deg, rgba(10,20,66,0.55), rgba(10,23,112,0.3)); border:1px solid rgba(53,225,255,0.14); } .fj26-news-archive-title{ display:flex; align-items:center; gap:12px; font-family:'Exo', sans-serif; font-weight:800; font-size:17px; letter-spacing:0.03em; color:var(--fj26-white,#F3F7FF); margin:0 0 20px; padding-bottom:16px; position:relative; } .fj26-news-archive-title:after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:linear-gradient(90deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994), transparent); box-shadow:0 0 12px rgba(53,225,255,0.5); } .fj26-news-archive-icon{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:38px; height:38px; border-radius:50%; color:#fff; background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); box-shadow:0 6px 18px rgba(30,111,255,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset; animation:fj26ArchIconPulse 3.4s ease-in-out infinite; } .fj26-news-archive-title-text{ text-transform:uppercase; } @keyframes fj26ArchIconPulse{ 0%, 100%{ box-shadow:0 6px 18px rgba(30,111,255,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset; } 50%{ box-shadow:0 6px 22px rgba(53,225,255,0.65), 0 0 0 1px rgba(255,255,255,0.18) inset; } } @media (prefers-reduced-motion: reduce){ .fj26-news-archive-icon{ animation:none !important; } } .fj26-news-arch-item{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; text-decoration:none !important; border-bottom:1px solid rgba(255,255,255,0.06); transition:transform .25s ease; } .fj26-news-arch-item:last-child{ border-bottom:none; padding-bottom:0; } .fj26-news-arch-item:hover{ transform:translateX(3px); } .fj26-news-arch-thumb{ flex:0 0 auto; width:66px; height:66px; border-radius:10px; overflow:hidden; } .fj26-news-arch-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; } .fj26-news-arch-item:hover .fj26-news-arch-thumb img{ transform:scale(1.1); } .fj26-news-arch-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:6px; min-width:0; text-align:left; } .fj26-news-arch-title-txt{ font-family:'Exo', sans-serif; font-weight:600; font-size:13.5px; line-height:1.4; color:var(--fj26-white,#F3F7FF); text-align:left; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .25s ease; } .fj26-news-arch-item:hover .fj26-news-arch-title-txt{ color:var(--fj26-cyan,#35E1FF); } .fj26-news-meta-sm{ gap:10px; } .fj26-news-meta-sm .fj26-news-meta-item{ font-size:11px; } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL (progressive enhancement) ══════════════════════════════════════════════════════ */ .fj26-news-col-main.fj26-news-reveal-init > a{ opacity:0; transform:translateY(20px); } .fj26-news-col-main.fj26-news-inview > a{ animation:fj26NewsRise .6s ease both; } .fj26-news-col-main.fj26-news-inview > a:nth-child(1){ animation-delay:.05s; } .fj26-news-col-main.fj26-news-inview > a:nth-child(2){ animation-delay:.12s; } .fj26-news-col-main.fj26-news-inview > a:nth-child(3){ animation-delay:.19s; } .fj26-news-col-main.fj26-news-inview > a:nth-child(4){ animation-delay:.26s; } @keyframes fj26NewsRise{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } .fj26-news-col-archive.fj26-news-reveal-init{ opacity:0; transform:translateY(20px); } .fj26-news-col-archive.fj26-news-inview{ animation:fj26NewsRise .7s ease .1s both; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width:991px){ .fj26-news-archive-box{ position:static; margin-top:36px; } } @media (max-width:640px){ .fj26-news-main-item{ flex-direction:column; } .fj26-news-main-thumb{ width:100%; } .fj26-news-title{ font-size:17px; } } @media (prefers-reduced-motion: reduce){ .fj26-news-main-item, .fj26-news-arch-item, .fj26-news-main-thumb img, .fj26-news-arch-thumb img{ transition:none !important; } .fj26-news-col-main.fj26-news-inview > a, .fj26-news-col-archive.fj26-news-inview{ animation:none !important; } .fj26-news-col-main.fj26-news-reveal-init > a, .fj26-news-col-archive.fj26-news-reveal-init{ opacity:1 !important; transform:none !important; } }