/* ============================================================ STI ASSETS MANAGEMENT NEWS & ARTICLES PAGE ============================================================ */ /* ============================================================ NEWS LISTING SECTION ============================================================ */ .news-listing-section { width: 100%; padding: var(--page-section-space) 0; background: var(--page-surface); } .news-listing-shell { width: min(calc(100% - 48px), var(--page-shell)); margin: 0 auto; } /* ============================================================ NEWS GRID ============================================================ */ .news-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; width: 100%; } /* ============================================================ NEWS CARD ============================================================ */ .news-card { display: flex; flex-direction: column; min-width: 0; height: 100%; color: inherit; background: #ffffff; border: 1px solid var(--page-line); border-radius: var(--page-radius); box-shadow: 0 2px 2px rgba(3, 54, 105, 0.04), 0 8px 16px -4px rgba(3, 54, 105, 0.06); overflow: hidden; text-decoration: none; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), border-color 280ms ease, box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ NEWS CARD MEDIA ============================================================ */ .news-card-media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #eef3f7; overflow: hidden; } .news-card-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .news-card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(3, 54, 105, 0.34); background: linear-gradient( 145deg, #eef3f7 0%, #f8fafc 100% ); } .news-card-placeholder .ui-icon { width: 42px; height: 42px; } /* ============================================================ NEWS CARD BODY ============================================================ */ .news-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 25px 24px 24px; } /* ============================================================ NEWS CARD META ============================================================ */ .news-card-meta { display: inline-flex; align-items: center; gap: 7px; width: fit-content; margin-bottom: 14px; color: var(--color-text-muted); } .news-card-meta .ui-icon { width: 15px; height: 15px; color: var(--page-muted); flex: 0 0 auto; } .news-card-date { color: inherit; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================================ NEWS CARD TITLE ============================================================ */ .news-card-title { margin: 0 0 12px; color: var(--color-primary); font-size: clamp(1.08rem, 1.8vw, 1.22rem); font-weight: 600; line-height: 1.42; letter-spacing: -0.015em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-wrap: pretty; } /* ============================================================ NEWS CARD EXCERPT ============================================================ */ .news-card-excerpt { margin: 0 0 24px; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.72; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* ============================================================ NEWS CARD ACTION ============================================================ */ .news-card-cta { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: auto; color: var(--color-primary); font-size: 0.86rem; font-weight: 600; line-height: 1.4; } .news-card-arrow { width: 17px; height: 17px; color: var(--page-navy); transition: translate 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* ============================================================ NEWS CARD INTERACTIONS ============================================================ */ @media (hover: hover) { .news-card:hover { transform: translateY(-4px); border-color: rgba(3, 54, 105, 0.18); box-shadow: 0 2px 2px rgba(3, 54, 105, 0.05), 0 8px 16px -4px rgba(3, 54, 105, 0.08), 0 24px 32px -8px rgba(3, 54, 105, 0.06); } .news-card:hover .news-card-cover { transform: scale(1.035); } .news-card:hover .news-card-arrow { translate: 4px 0; } } .news-card:focus-visible { outline: 3px solid var(--color-focus-on-light); outline-offset: 4px; } /* ============================================================ NEWS RESPONSIVE GRID ============================================================ */ @media (min-width: 620px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } } /* ============================================================ NEWS MOBILE ============================================================ */ @media (max-width: 619px) { .news-listing-section { padding: 64px 16px; } .news-card { border-radius: var(--page-radius); } .news-card-body { padding: 22px 20px 21px; } .news-card-title { font-size: 1.05rem; } .news-card-excerpt { font-size: 0.87rem; } } @media (max-width: 360px) { .news-listing-section { padding-right: 14px; padding-left: 14px; } } /* ============================================================ NEWS EMPTY STATE ============================================================ */ .news-empty-state { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(100%, 520px); margin: 0 auto; padding: 48px 28px; text-align: center; background: #ffffff; border: 1px solid rgba(3, 54, 105, 0.085); border-radius: var(--page-radius); box-shadow: 0 12px 34px rgba(3, 54, 105, 0.045); } .news-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--color-primary); background: rgba(3, 54, 105, 0.06); border-radius: var(--page-radius); } .news-empty-icon .ui-icon { width: 24px; height: 24px; } .news-empty-state p { margin: 0; color: var(--color-text-muted); line-height: 1.7; } /* ============================================================ NEWS REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .news-card, .news-card-cover, .news-card-arrow { transition: none; } } /* ============================================================ NEWS SCROLL REVEALS ============================================================ */ .news-reveal { opacity: 0; translate: 0 22px; transition: opacity 660ms cubic-bezier(0.22, 1, 0.36, 1), translate 660ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, translate; } .news-reveal.is-visible { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .news-reveal { opacity: 1; translate: none; transition: none; will-change: auto; } }