franklynews

<title>Frankly</title> <style> *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root { --bg: #F5F0E8; --bg-card: #F5F0E8; --bg-card-alt: #EDE8DD; --text: #1A1A1A; --text-muted: #6B6560; --red: #CC2A1E; --black: #111; --divider: #D4CFC5; --nav-bg: #F5F0E8; }

html { font-size: 16px; }

body { background: var(--bg); color: var(--text); font-family: 'Cormorant Garamond', Georgia, serif; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }

/* ── HEADER ── */ .header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid var(--divider); }

.logo { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.65rem; letter-spacing: -0.02em; color: var(--text); display: flex; align-items: baseline; gap: 0; cursor: default; user-select: none; }

.logo-h { display: inline-flex; align-items: center; justify-content: center; background: var(--red); color: #fff; width: 32px; height: 38px; font-size: 2rem; font-weight: 900; line-height: 1; margin-right: 2px; position: relative; top: 2px; }

.logo-rest { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; }

.header-actions { display: flex; align-items: center; gap: 18px; }

.icon-btn { background: none; border: none; cursor: pointer; padding: 6px; color: var(--text); transition: opacity 0.2s; } .icon-btn:hover { opacity: 0.6; } .icon-btn svg { display: block; }

/* ── CATEGORY NAV ── */ .cat-nav { display: flex; align-items: stretch; border-bottom: 3px solid var(--black); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; background: var(--nav-bg); } .cat-nav::-webkit-scrollbar { display: none; }

.cat-tab { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 20px; white-space: nowrap; cursor: pointer; border: none; background: transparent; color: var(--text); position: relative; transition: background 0.2s, color 0.2s; border-right: 1px solid var(--divider); }

.cat-tab:first-child { background: var(--bg-card); }

.cat-tab.active { color: var(--red); }

.cat-tab.active::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 3px; background: var(--red); }

.cat-tab:hover { background: rgba(0,0,0,0.03); }

.cat-tab .frankly { font-style: italic; font-weight: 700; color: var(--red); letter-spacing: 0.01em; font-family: 'Libre Franklin', sans-serif; }

/* ── NEWS LIST ── */ .news-list { max-width: 720px; margin: 0 auto; padding: 0; }

/* ── NEWS CARD ── */ .news-card { display: flex; align-items: flex-start; gap: 18px; padding: 28px 20px; border-bottom: 1px solid var(--divider); cursor: pointer; transition: background 0.25s; opacity: 0; transform: translateY(16px); animation: cardIn 0.5s ease forwards; }

.news-card:nth-child(1) { animation-delay: 0.08s; } .news-card:nth-child(2) { animation-delay: 0.16s; } .news-card:nth-child(3) { animation-delay: 0.24s; } .news-card:nth-child(4) { animation-delay: 0.32s; } .news-card:nth-child(5) { animation-delay: 0.40s; } .news-card:nth-child(6) { animation-delay: 0.48s; }

@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }

.news-card:hover { background: rgba(0,0,0,0.02); }

.news-card:nth-child(even) { background: var(--bg-card-alt); } .news-card:nth-child(even):hover { background: #E8E3D8; }

.card-thumb { width: 100px; height: 100px; min-width: 100px; border-radius: 10px; overflow: hidden; background: #ddd; display: flex; align-items: center; justify-content: center; }

.card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.card-thumb .thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #fff; }

.card-body { flex: 1; min-width: 0; }

.card-headline { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.3rem; line-height: 1.3; color: var(--text); margin-bottom: 14px; letter-spacing: -0.01em; }

.card-meta { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

.card-source { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

.card-time { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.72rem; color: var(--red); letter-spacing: 0.02em; }

/* ── SECTION DIVIDERS ── */ .section-bar { background: var(--black); height: 8px; width: 100%; }

/* ── RESPONSIVE ── */ @media (max-width: 480px) { .card-headline { font-size: 1.1rem; } .card-thumb { width: 80px; height: 80px; min-width: 80px; } .news-card { gap: 14px; padding: 22px 16px; } .logo-rest { font-size: 0.95rem; } }

/* ── SUBTLE GRAIN ── */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; z-index: 9999; }

/* scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 3px; } </style>

Frankly

franklyNEW U.S CANADA EUROPE ASIA AFRICA <script> const articles = [ { headline: "Markets React as Unexpected Announcement Shakes Investors", source: "FRANKLY", time: "10:40 PM", bg: "#1A1A1A", icon: ``, color: "#333" }, { headline: "Leaders Hold Emergency Talks as Tensions Continue to Rise", source: "FRANKLY", time: "10:40 PM", bg: "#2D8B5E", icon: ``, color: "#1B6B44" }, { headline: "Government Faces Growing Pressure After Major Policy Shift", source: "FRANKLY", time: "10:40 PM", bg: "#CC2A1E", icon: ``, color: "#CC2A1E" }, { headline: "New Report Raises Serious Questions About Future Trends", source: "FRANKLY", time: "10:40 PM", bg: "#E8E3D8", icon: ``, color: "#CC2A1E" }, { headline: "Tech Giants Face Scrutiny Over Data Privacy Practices", source: "FRANKLY", time: "9:15 PM", bg: "#2A2A5E", icon: ``, color: "#2A2A5E" }, { headline: "Climate Summit Delivers Landmark Agreement on Emissions", source: "FRANKLY", time: "8:30 PM", bg: "#1A5C3A", icon: ``, color: "#1A5C3A" } ]; function renderArticles() { const list = document.getElementById('newsList'); list.innerHTML = ''; articles.forEach((a, i) => { const showBar = i === 2 || i === 4; let html = ''; if (showBar) { html += `

`; } html += `

${a.icon}

${a.headline}

${a.source} ${a.time}

`; list.insertAdjacentHTML('beforeend', html); }); } // Tab switching document.getElementById('catNav').addEventListener('click', (e) => { const tab = e.target.closest('.cat-tab'); if (!tab) return; document.querySelectorAll('.cat-tab').forEach(t => t.classList.remove('active')); tab.classList.add('active'); // Re-trigger animation document.querySelectorAll('.news-card').forEach(c => { c.style.animation = 'none'; c.offsetHeight; c.style.animation = ''; }); }); renderArticles(); </script>