/* ------------------------------------------------------ GLOBAL BRAND TYPOGRAPHY ------------------------------------------------------ */ body { font-family: "Inter", "Segoe UI", sans-serif; margin: 0; padding: 0; background: #f7f7f7; color: #222; line-height: 1.6; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.5px; } p { font-weight: 400; opacity: 0.85; } /* ------------------------------------------------------ PAGE HEADER ------------------------------------------------------ */ .page-header { text-align: center; padding: 2rem 1rem 1.5rem; background: linear-gradient(135deg, #ff7a1a, #ffd54a); color: #fff; } .page-header h1 { font-size: 2rem; margin-bottom: 0.3rem; } .page-header p { font-size: 1rem; opacity: 0.9; } /* ------------------------------------------------------ FEATURED STORY ------------------------------------------------------ */ .news-featured { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; } .featured-img { width: 100%; border-radius: 14px; object-fit: cover; } .featured-content h2 { margin: 0; font-size: 1.4rem; } .featured-summary { margin-top: 0.4rem; } /* ------------------------------------------------------ NEWS GRID ------------------------------------------------------ */ .news-grid { display: grid; gap: 1.2rem; padding: 1.5rem; grid-template-columns: 1fr; } /* Tablet */ @media (min-width: 600px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } /* Desktop */ @media (min-width: 900px) { .news-grid { grid-template-columns: repeat(3, 1fr); } } /* ------------------------------------------------------ NEWS CARDS ------------------------------------------------------ */ .news-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.08); transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer; } .news-card img { width: 100%; height: 160px; object-fit: cover; } .news-card h3 { margin: 0.8rem 1rem 0.4rem; font-size: 1.1rem; } .news-card p { margin: 0 1rem 1rem; font-size: 0.9rem; } /* Hover animation */ .news-card:hover { transform: translateY(-6px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); } /* ------------------------------------------------------ DARK MODE SUPPORT ------------------------------------------------------ */ /* Auto dark mode (system preference) */ @media (prefers-color-scheme: dark) { body { background: #0f0f0f; color: #eaeaea; } .page-header { background: linear-gradient(135deg, #ff8c3a, #ffce4d); } .news-card { background: #1a1a1a; box-shadow: 0 4px 14px rgba(0,0,0,0.5); } .news-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.7); } } /* Manual dark mode override (add class="dark-mode" to ) */ .dark-mode { background: #0f0f0f !important; color: #eaeaea !important; } .dark-mode .news-card { background: #1a1a1a !important; box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important; } .dark-mode .news-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.7) !important; } .dark-mode .page-header { background: linear-gradient(135deg, #ff8c3a, #ffce4d) !important; }