@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap'); /* ========================================================================== Zero Noise — redesign.css Monochrome-first editorial layer. Loaded AFTER bootstrap.min.css + blog.css so it wins the cascade. Dark mode rides Bootstrap's [data-bs-theme="dark"] attribute (set on by color-modes.js) — NOT a custom class. ========================================================================== */ :root { /* Typography */ --font-headline: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-label: 'Space Grotesk', 'Inter', sans-serif; --fs-hero: clamp(2.2rem, 5vw, 3.8rem); --fs-h2: clamp(1.4rem, 3vw, 2rem); --fs-h3: clamp(1.1rem, 2vw, 1.4rem); --fs-body: 1rem; --fs-label: 0.75rem; --lh-headline: 1.15; --lh-body: 1.7; /* Light mode */ --bg-primary: #FFFFFF; --bg-secondary: #F4F4F4; --bg-card: #FFFFFF; --text-primary: #0D0D0D; --text-secondary: #555555; --text-muted: #888888; --accent: #D0021B; /* Press red — functional signal only */ --accent-hover: #A80016; --accent-subtle: rgba(208, 2, 27, 0.08); --border: #E2E2E2; --tag-bg: #F0F0F0; --header-bg: #FFFFFF; --header-border: #E8E8E8; --header-blur-bg: rgba(255, 255, 255, 0.92); /* Category colour tokens — classification signal only */ --cat-technology: #2980B9; --cat-politics: #8E44AD; --cat-business: #27AE60; --cat-sports: #E67E22; --cat-world: #C0392B; --cat-health: #16A085; --cat-entertainment: #D35400; --cat-science: #2471A3; --cat-education: #1ABC9C; --cat-environment: #196F3D; --ease-card: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Dark mode — Bootstrap's mechanism (verified in Phase 0: color-modes.js sets data-bs-theme on document.documentElement) */ [data-bs-theme="dark"] { --bg-primary: #0F0F0F; --bg-secondary: #1A1A1A; --bg-card: #161616; --text-primary: #F0F0F0; --text-secondary: #B0B0B0; --text-muted: #777777; --accent: #E8001A; --accent-hover: #FF2030; --accent-subtle: rgba(232, 0, 26, 0.12); --border: #2A2A2A; --tag-bg: #222222; --header-bg: #0A0A0A; --header-border: #1E1E1E; --header-blur-bg: rgba(10, 10, 10, 0.92); } /* ── Base & typography ─────────────────────────────────────────────────── */ body { font-family: var(--font-body); line-height: var(--lh-body); background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); line-height: var(--lh-headline); color: var(--text-primary); } .blog-post-meta, .card-meta, time, small.text-muted, .section-title, .section-view-all, .category-badge, .breaking-ticker, .nav-scroller .nav-link, .lang-btn { font-family: var(--font-label); } /* ── Header (sticky masthead) ──────────────────────────────────────────── */ /* Phase 0:
is the logo/lang/search bar; the category .nav-scroller is its sibling and intentionally scrolls away beneath the sticky masthead (BBC/Guardian pattern). */ header.border-bottom { position: sticky; top: 0; z-index: 1000; background: var(--header-bg); border-bottom: 1px solid var(--header-border) !important; transition: padding 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; } header.border-bottom.header-scrolled { background: var(--header-blur-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } /* ── Logo ─────────────────────────────────────────────────────────────── */ .logo-wrap { display: inline-flex; align-items: center; } .logo-wrap img { height: 36px; width: auto; } @media (max-width: 575.98px) { .logo-wrap img { height: 28px; } } /* Logo's black border + ZERO box merge into the dark header — lift it onto a white plate in dark mode only. */ [data-bs-theme="dark"] .logo-wrap { background: #FFFFFF; padding: 4px 10px; border-radius: 3px; } [data-bs-theme="dark"] footer .logo-wrap { background: #FFFFFF; padding: 6px 12px; border-radius: 3px; margin-bottom: 16px; } /* ── Breaking news ticker ──────────────────────────────────────────────── */ .breaking-ticker { background: var(--accent); color: #FFFFFF; font-size: var(--fs-label); font-weight: 500; padding: 7px 0; margin-bottom: 1.25rem; /* breathing room before hero (esp. mobile) */ overflow: hidden; white-space: nowrap; position: relative; } @media (max-width: 767.98px) { .breaking-ticker { margin-bottom: 1.5rem; } } .ticker-track .ticker-item { color: #FFFFFF; text-decoration: none; } .ticker-track .ticker-item:hover { text-decoration: underline; } .ticker-track .ticker-sep { opacity: 0.7; } .breaking-ticker__label { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(0, 0, 0, 0.22); padding: 0 14px; position: absolute; left: 0; top: 0; height: 100%; z-index: 2; } .ticker-track { display: inline-block; padding-left: 120px; animation: ticker-scroll 40s linear infinite; } .ticker-track:hover { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } /* ── Category navigation (existing .nav-scroller) ──────────────────────── */ .nav-scroller .nav-link { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em; color: var(--text-secondary); transition: color 0.2s ease; } .nav-scroller .nav-link:hover { color: var(--text-primary); } .nav-scroller .nav-link.nav-active { color: var(--accent); font-weight: 600; } /* ── Category badges (added in templates) ──────────────────────────────── */ .category-badge { display: inline-block; border-radius: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; padding: 3px 8px; text-transform: uppercase; color: #FFFFFF; text-decoration: none; background: var(--text-primary); /* monochrome default */ transition: opacity 0.2s ease, letter-spacing 0.2s ease; } .category-badge:hover { opacity: 0.85; letter-spacing: 0.09em; color: #FFFFFF; } [data-category="technology"] .category-badge { background: var(--cat-technology); } [data-category="politics"] .category-badge { background: var(--cat-politics); } [data-category="business"] .category-badge { background: var(--cat-business); } [data-category="sports"] .category-badge { background: var(--cat-sports); } [data-category="world"] .category-badge { background: var(--cat-world); } [data-category="health"] .category-badge { background: var(--cat-health); } [data-category="entertainment"] .category-badge { background: var(--cat-entertainment); } [data-category="science"] .category-badge { background: var(--cat-science); } [data-category="education"] .category-badge { background: var(--cat-education); } [data-category="environment"] .category-badge { background: var(--cat-environment); } /* ── Featured / lead article (adapted: side-by-side editorial card) ────── */ .featured-article { position: relative; background: var(--bg-secondary) !important; border: 1px solid var(--border); border-radius: 6px; } .featured-article .display-5 { font-family: var(--font-headline); font-weight: 900; line-height: var(--lh-headline); } .featured-article .lead { color: var(--text-secondary); } .featured-article a.fw-bold { color: var(--accent) !important; font-family: var(--font-label); font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; } .featured-article a.fw-bold:hover { color: var(--accent-hover) !important; } /* Image zoom — wrapper already clips via .featured-img-wrap */ .featured-img { transition: transform 0.6s var(--ease-card); } .featured-article:hover .featured-img { transform: scale(1.04); } /* ── Category sections ─────────────────────────────────────────────────── */ .category-section { margin-bottom: 3rem; } .category-section-header { border-bottom: 1px solid var(--border); padding-bottom: 12px; } /* Restyle the existing

into an editorial section label */ .section-title { font-family: var(--font-label) !important; font-size: 0.72rem !important; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-primary); border-left: 3px solid var(--text-primary); padding-left: 12px; line-height: 1.2; } [data-bs-theme="dark"] .section-title { border-left-color: #FFFFFF; } /* Replace the bootstrap button "View all" with a quiet red link */ .section-view-all.btn { border: none !important; background: transparent !important; color: var(--accent) !important; font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0; } .section-view-all.btn:hover { color: var(--accent-hover) !important; } /* ── Lead article inside each section ──────────────────────────────────── */ .cat-main-wrap { overflow: hidden; border-radius: 6px; } .cat-main-img { transition: transform 0.5s var(--ease-card); margin-bottom: 0 !important; } .lead-article:hover .cat-main-img { transform: scale(1.05); } .lead-article h3 a, .article-list-item h4 a { color: var(--text-primary); text-decoration: none; transition: color 0.2s ease; } .lead-article:hover h3 a, .article-list-item:hover h4 a { color: var(--accent); } .lead-article h3 { font-family: var(--font-headline); font-weight: 700; } .article-list-item { transition: background 0.2s ease; border-bottom: 1px solid var(--border) !important; } .article-list-item img { transition: transform 0.4s var(--ease-card); } .article-list-item:hover img { transform: scale(1.04); } .lead-article .text-muted, .article-list-item .text-muted, .article-list-item small { color: var(--text-muted) !important; font-family: var(--font-label); font-size: var(--fs-label); } /* ── Footer (always dark — mirrors the ZERO box; red functional rule) ──── */ footer { background: #0A0A0A !important; color: #999999 !important; border-top: 3px solid var(--accent); margin-top: 4rem !important; } footer p, footer .small { color: #999999 !important; } footer a { color: #BBBBBB; text-decoration: none; transition: color 0.2s ease; } footer a:hover { color: #FFFFFF; } /* ── Skeleton / accessibility / motion ─────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skip-link { position: absolute; top: -100%; left: 0; background: var(--accent); color: #FFFFFF; padding: 8px 16px; font-family: var(--font-label); font-size: var(--fs-label); font-weight: 600; z-index: 9999; transition: top 0.2s ease; } .skip-link:focus { top: 0; } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Card entrance (JS adds .card-visible once in view) */ .card-visible { opacity: 1 !important; transform: translateY(0) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }