/* ============================================================================== PulseNews AI - Modern Global News Design System Aesthetic: Editorial Luxury meets High-Tech Dark Mode & Glassmorphism Google Fonts loaded via tags in HTML for optimal performance. ============================================================================== */ :root { /* Color Palette - Dark Luxe (Default) */ --bg-primary: #070a12; --bg-secondary: #0d1322; --bg-card: rgba(18, 25, 43, 0.7); --bg-card-hover: rgba(28, 38, 65, 0.85); --border-color: rgba(255, 255, 255, 0.08); --border-highlight: rgba(14, 165, 233, 0.3); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --accent-cyan: #06b6d4; --accent-blue: #3b82f6; --accent-purple: #8b5cf6; --accent-amber: #f59e0b; --accent-emerald: #10b981; --accent-rose: #f43f5e; --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%); --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%); --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 25px rgba(6, 182, 212, 0.2); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 9999px; --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); } /* Light Theme Variable Overrides */ [data-theme="light"] { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-card: rgba(255, 255, 255, 0.85); --bg-card-hover: #ffffff; --border-color: rgba(0, 0, 0, 0.08); --border-highlight: rgba(14, 165, 233, 0.4); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); --shadow-glow: 0 0 20px rgba(6, 182, 212, 0.15); } /* -------------------------------------------------------------------------- */ /* Base & Reset */ /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-sans); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; transition: var(--transition); } img { max-width: 100%; height: auto; display: block; } svg { display: inline-block; vertical-align: middle; flex-shrink: 0; } ul, ol { list-style: none; } button, select, input { font-family: inherit; } /* Container */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; } /* -------------------------------------------------------------------------- */ /* Top Breaking News Bar */ /* -------------------------------------------------------------------------- */ .top-ticker-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); font-size: 0.825rem; padding: 0.5rem 0; position: relative; z-index: 50; } .ticker-inner { display: flex; align-items: center; gap: 1rem; } .ticker-label { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--accent-rose); color: #fff; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; white-space: nowrap; } .ticker-pulse { width: 6px; height: 6px; background-color: #fff; border-radius: 50%; animation: pulse-dot 1.5s infinite; } @keyframes pulse-dot { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1); } } .ticker-content { flex: 1; overflow: hidden; white-space: nowrap; position: relative; } .ticker-marquee { display: inline-block; white-space: nowrap; animation: ticker-slide 35s linear infinite; } .ticker-marquee:hover { animation-play-state: paused; } .ticker-item { display: inline-flex; align-items: center; margin-right: 2.5rem; color: var(--text-secondary); transition: color 0.2s; } .ticker-item:hover { color: var(--accent-cyan); } .ticker-item span.hot-count { margin-left: 0.4rem; font-size: 0.7rem; padding: 0.1rem 0.4rem; background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); border-radius: 4px; } @keyframes ticker-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* -------------------------------------------------------------------------- */ /* Main Header & Navbar */ /* -------------------------------------------------------------------------- */ .site-header { background: rgba(13, 19, 34, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; transition: var(--transition); } [data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.9); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; gap: 1.5rem; } .brand-wrapper { display: flex; align-items: center; gap: 0.75rem; } .brand-logo { width: 42px; height: 42px; background: var(--gradient-accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-glow); } .brand-logo svg { width: 24px; height: 24px; max-width: 24px; max-height: 24px; color: #fff; } .brand-text h1 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(135deg, #ffffff 30%, var(--accent-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="light"] .brand-text h1 { background: linear-gradient(135deg, #0f172a 30%, var(--accent-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .brand-text p { font-size: 0.725rem; color: var(--text-muted); font-weight: 500; } /* Header Controls */ .header-actions { display: flex; align-items: center; gap: 0.75rem; } /* Language Selector */ .lang-select-wrapper { position: relative; } .lang-select { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; outline: none; transition: var(--transition); appearance: none; padding-right: 2rem; } .lang-select:hover, .lang-select:focus { border-color: var(--accent-cyan); } .lang-icon-arrow { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.7rem; color: var(--text-muted); } /* Theme Toggle Button */ .btn-icon { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .btn-icon:hover { background: var(--bg-card-hover); border-color: var(--accent-cyan); color: var(--accent-cyan); } /* Live Cron Badge */ .live-cron-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(16, 185, 129, 0.12); color: var(--accent-emerald); border: 1px solid rgba(16, 185, 129, 0.25); padding: 0.35rem 0.75rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; } .live-cron-badge svg { width: 14px; height: 14px; animation: spin-slow 8s linear infinite; } @keyframes spin-slow { 100% { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- */ /* Navigation Categories Bar */ /* -------------------------------------------------------------------------- */ .nav-categories-bar { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); padding: 0.5rem 0; overflow-x: auto; scrollbar-width: none; } .nav-categories-bar::-webkit-scrollbar { display: none; } .categories-list { display: flex; align-items: center; gap: 0.5rem; list-style: none; white-space: nowrap; } .cat-btn { background: transparent; color: var(--text-secondary); border: 1px solid transparent; padding: 0.4rem 0.9rem; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--transition); } .cat-btn:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); } .cat-btn.active { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35); } /* -------------------------------------------------------------------------- */ /* AdSense Banner Container (Header Leaderboard & Slots) */ /* -------------------------------------------------------------------------- */ .ad-slot-container { margin: 1.5rem auto; text-align: center; background: var(--bg-card); border: 1px dashed var(--border-color); border-radius: var(--radius-md); padding: 0.75rem; position: relative; overflow: hidden; max-width: 100%; } .ad-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.4rem; display: block; } .ad-placeholder-box { min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-sm); } /* -------------------------------------------------------------------------- */ /* Main Content Layout Grid */ /* -------------------------------------------------------------------------- */ .main-layout { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; margin-top: 1.5rem; margin-bottom: 3rem; } /* Search and Filter Row */ .search-filter-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; } .search-box { position: relative; flex: 1; max-width: 450px; } .search-box input { width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.65rem 1rem 0.65rem 2.6rem; color: var(--text-primary); font-size: 0.9rem; outline: none; transition: var(--transition); } .search-box input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); } .search-box svg { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); } .section-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); } .section-title::before { content: ''; display: inline-block; width: 4px; height: 1.2rem; background: var(--accent-cyan); border-radius: 2px; } /* -------------------------------------------------------------------------- */ /* Featured Hero Article */ /* -------------------------------------------------------------------------- */ .hero-article-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 2rem; transition: var(--transition); position: relative; display: grid; grid-template-columns: 1.2fr 1fr; box-shadow: var(--shadow-md); } .hero-article-card:hover { border-color: var(--border-highlight); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .hero-img-wrap { position: relative; height: 100%; min-height: 320px; overflow: hidden; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .hero-article-card:hover .hero-img-wrap img { transform: scale(1.04); } .hero-badge-overlay { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.5rem; } .badge { font-size: 0.725rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); } .badge-cat { background: rgba(6, 182, 212, 0.9); color: #fff; backdrop-filter: blur(4px); } .badge-traffic { background: rgba(245, 158, 11, 0.9); color: #fff; backdrop-filter: blur(4px); } .hero-body { padding: 1.75rem; display: flex; flex-direction: column; justify-content: space-between; } .hero-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; } .hero-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.85rem; color: var(--text-primary); } .hero-summary { color: var(--text-secondary); font-size: 0.925rem; line-height: 1.6; margin-bottom: 1.25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Bullet Points in Hero / Cards */ .card-bullets { background: rgba(6, 182, 212, 0.06); border-left: 3px solid var(--accent-cyan); padding: 0.75rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 1.25rem; } .card-bullets ul { list-style: none; font-size: 0.825rem; color: var(--text-secondary); } .card-bullets li { position: relative; padding-left: 1.25rem; margin-bottom: 0.35rem; } .card-bullets li::before { content: '▸'; position: absolute; left: 0; color: var(--accent-cyan); font-weight: bold; } .card-bullets li:last-child { margin-bottom: 0; } /* Multi-Source Badges Row */ .sources-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .source-pill { font-size: 0.72rem; padding: 0.15rem 0.5rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); border-radius: var(--radius-full); color: var(--text-muted); } .read-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--gradient-accent); color: #fff; font-weight: 700; font-size: 0.875rem; padding: 0.6rem 1.25rem; border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(6, 182, 212, 0.25); transition: var(--transition); align-self: flex-start; } .read-btn:hover { transform: translateX(4px); box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4); } /* -------------------------------------------------------------------------- */ /* News Grid (Cards) */ /* -------------------------------------------------------------------------- */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .news-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); box-shadow: var(--shadow-sm); } .news-card:hover { border-color: var(--border-highlight); transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-img-wrap { position: relative; height: 180px; overflow: hidden; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .news-card:hover .card-img-wrap img { transform: scale(1.05); } .card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; } .card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.6rem; } .card-title { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.65rem; color: var(--text-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-summary { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .card-footer { border-top: 1px solid var(--border-color); padding-top: 0.85rem; display: flex; align-items: center; justify-content: space-between; } .card-link { color: var(--accent-cyan); font-size: 0.825rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; } .card-link:hover { text-decoration: underline; gap: 0.55rem; } /* -------------------------------------------------------------------------- */ /* Sidebar Elements */ /* -------------------------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: 1.75rem; } .sidebar-widget { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; box-shadow: var(--shadow-sm); } .widget-title { font-size: 1.05rem; font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); padding-bottom: 0.6rem; } .widget-title span.pulse-indicator { font-size: 0.7rem; color: var(--accent-emerald); font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; } /* Trending Ranking List */ .trending-rank-list { list-style: none; } .trending-rank-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border-color); transition: var(--transition); } .trending-rank-item:last-child { border-bottom: none; } .rank-number { font-size: 1.1rem; font-weight: 800; color: var(--accent-cyan); min-width: 24px; } .rank-info { flex: 1; } .rank-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; } .rank-traffic { font-size: 0.725rem; color: var(--text-muted); } /* Sticky Sidebar Ad Unit */ .sticky-ad-box { position: sticky; top: 85px; } /* -------------------------------------------------------------------------- */ /* Article Detail Page Styles */ /* -------------------------------------------------------------------------- */ .article-container { max-width: 880px; margin: 2rem auto; padding: 0 1.25rem; } .article-header { margin-bottom: 2rem; } .article-badge-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .article-headline { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 800; line-height: 1.25; margin-bottom: 1.25rem; color: var(--text-primary); } .article-author-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-muted); flex-wrap: wrap; gap: 1rem; } .author-info { display: flex; align-items: center; gap: 0.65rem; } .author-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-accent); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; } .article-hero-media { margin: 1.5rem 0 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .article-hero-media img { width: 100%; max-height: 480px; object-fit: cover; } .media-caption { font-size: 0.775rem; color: var(--text-muted); padding: 0.5rem 0.8rem; background: var(--bg-secondary); } /* Executive Summary Box */ .exec-summary-box { background: var(--bg-card); border: 1px solid var(--border-highlight); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 2rem; position: relative; } .exec-summary-title { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-cyan); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.5rem; } /* Key Takeaways Card (The Core Bullet Points Feature) */ .key-takeaways-card { background: linear-gradient(180deg, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 2.25rem; box-shadow: 0 8px 30px rgba(6, 182, 212, 0.08); } .takeaways-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; } .takeaways-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-cyan); color: #fff; display: flex; align-items: center; justify-content: center; } .takeaways-title { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); } .takeaways-list { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; } .takeaways-list li { position: relative; padding-left: 1.75rem; font-size: 0.95rem; line-height: 1.6; color: var(--text-primary); } .takeaways-list li::before { content: '✓'; position: absolute; left: 0; top: 0.1rem; color: var(--accent-cyan); font-weight: 900; font-size: 1.1rem; } /* Main Article Body Text */ .article-body-text { font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); margin-bottom: 2.5rem; } .article-body-text p { margin-bottom: 1.35rem; } /* Multi-Source Citations Card */ .multi-source-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 2.5rem; } .multi-source-title { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; color: var(--text-primary); } .multi-source-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; } .sources-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .source-item-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition); } .source-item-card:hover { border-color: var(--accent-cyan); transform: translateY(-2px); } .source-publisher-badge { font-size: 0.725rem; font-weight: 700; color: var(--accent-cyan); margin-bottom: 0.35rem; } .source-article-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.4; } .source-external-link { font-size: 0.775rem; font-weight: 600; color: var(--accent-blue); display: inline-flex; align-items: center; gap: 0.35rem; } /* Social Share Bar */ .share-bar { display: flex; align-items: center; gap: 0.75rem; padding: 1.25rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 2.5rem; } .share-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); } .share-btn { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.4rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; transition: var(--transition); } .share-btn:hover { background: var(--bg-card-hover); border-color: var(--accent-cyan); } /* -------------------------------------------------------------------------- */ /* Static Compliance Pages (About, Privacy, Terms, Editorial) */ /* -------------------------------------------------------------------------- */ .static-page-wrapper { max-width: 800px; margin: 3rem auto; padding: 0 1.25rem; } .static-page-header { margin-bottom: 2rem; text-align: center; } .static-page-header h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.75rem; } .static-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 2.25rem; box-shadow: var(--shadow-md); line-height: 1.75; color: var(--text-secondary); } .static-card h2 { color: var(--text-primary); font-size: 1.35rem; margin: 1.75rem 0 0.75rem; } .static-card h2:first-of-type { margin-top: 0; } .static-card p { margin-bottom: 1.15rem; } .static-card ul { padding-left: 1.5rem; margin-bottom: 1.25rem; } .static-card li { margin-bottom: 0.45rem; } /* -------------------------------------------------------------------------- */ /* Footer */ /* -------------------------------------------------------------------------- */ .site-footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 3.5rem 0 2rem; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 2.5rem; } .footer-brand p { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.75rem; max-width: 320px; } .footer-col h4 { font-size: 0.925rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 1.1rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .footer-links a { color: var(--text-muted); font-size: 0.85rem; } .footer-links a:hover { color: var(--accent-cyan); } .footer-bottom { border-top: 1px solid var(--border-color); padding-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); flex-wrap: wrap; gap: 1rem; } /* -------------------------------------------------------------------------- */ /* Responsive Breakpoints */ /* -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .main-layout { grid-template-columns: 1fr; } .sticky-ad-box { position: static; } .hero-article-card { grid-template-columns: 1fr; } .hero-img-wrap { min-height: 220px; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .header-inner { flex-direction: column; align-items: stretch; gap: 0.75rem; } .header-actions { justify-content: space-between; } .article-headline { font-size: 1.75rem; } .footer-grid { grid-template-columns: 1fr; } .search-filter-row { flex-direction: column; align-items: stretch; } .search-box { max-width: 100%; } } /* -------------------------------------------------------------------------- */ /* Cookie Consent Banner & CMP Modal (Google EU User Consent Policy) */ /* -------------------------------------------------------------------------- */ .cookie-consent-bar { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(13, 19, 34, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--accent-cyan); padding: 1rem 0; z-index: 9999; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5); animation: slide-up-bar 0.4s ease-out; } [data-theme="light"] .cookie-consent-bar { background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--accent-blue); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1); } @keyframes slide-up-bar { from { transform: translateY(100%); } to { transform: translateY(0); } } .cookie-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .cookie-bar-text { flex: 1; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; min-width: 280px; } .cookie-bar-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .cookie-btn { font-size: 0.825rem; font-weight: 700; padding: 0.5rem 1rem; border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); border: none; } .cookie-btn-primary { background: var(--gradient-accent); color: #fff; } .cookie-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .cookie-btn-secondary { background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); } .cookie-btn-secondary:hover { background: var(--bg-card-hover); border-color: var(--accent-cyan); } .cookie-btn-outline { background: transparent; color: var(--text-muted); border: 1px solid transparent; } .cookie-btn-outline:hover { color: var(--text-primary); } /* Modal CMP Backdrop */ .cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 1.25rem; } .cookie-modal-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); max-width: 540px; width: 100%; box-shadow: var(--shadow-lg); overflow: hidden; animation: scale-in-modal 0.25s ease-out; } @keyframes scale-in-modal { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } .cookie-modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; } .cookie-modal-header h3 { font-size: 1.1rem; font-weight: 800; } .cookie-modal-body { padding: 1.5rem; max-height: 65vh; overflow-y: auto; } .cookie-pref-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border-color); gap: 1rem; } .cookie-pref-item strong { font-size: 0.9rem; color: var(--text-primary); display: block; margin-bottom: 0.25rem; } .cookie-pref-item p { font-size: 0.775rem; color: var(--text-muted); margin: 0; } .cookie-status-locked { font-size: 0.75rem; font-weight: 700; color: var(--accent-emerald); background: rgba(16, 185, 129, 0.12); padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); white-space: nowrap; } .cookie-modal-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; } /* Switch Slider */ .switch-container { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .switch-container input { opacity: 0; width: 0; height: 0; } .switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--border-color); transition: 0.3s; border-radius: 24px; } .switch-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; } .switch-container input:checked + .switch-slider { background-color: var(--accent-cyan); } .switch-container input:checked + .switch-slider::before { transform: translateX(20px); } /* Financial / Misrepresentative Disclaimer Box */ .financial-disclaimer-box { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin: 1.25rem 0 2rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; display: flex; align-items: flex-start; gap: 0.75rem; } .financial-disclaimer-box span.disclaimer-icon { font-size: 1.25rem; line-height: 1; }