/* ===== NeuralField — Dark Techy Sports Theme ===== */ /* --- Type Scale --- */ :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transitions */ --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1); /* Content widths */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px; --content-full: 100%; /* Fonts */ --font-display: 'Clash Display', 'Arial Black', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; } /* ===== DARK MODE (Default) ===== */ :root, [data-theme="dark"] { --color-bg: #0a0a0f; --color-surface: #12121a; --color-surface-2: #1a1a25; --color-surface-offset: #0f0f17; --color-surface-dynamic: #22222f; --color-divider: #2a2a3a; --color-border: #33334a; --color-text: #e0e0ec; --color-text-muted: #8888a0; --color-text-faint: #55556a; --color-text-inverse: #0a0a0f; /* Primary — electric cyan */ --color-primary: #00e5ff; --color-primary-hover: #00b8d4; --color-primary-active: #0097a7; --color-primary-dim: rgba(0, 229, 255, 0.12); /* Accent — vivid green (sports energy) */ --color-accent: #76ff03; --color-accent-dim: rgba(118, 255, 3, 0.12); /* Secondary accent — orange */ --color-orange: #ff9100; --color-orange-dim: rgba(255, 145, 0, 0.12); /* Status */ --color-error: #ff5252; --color-success: #69f0ae; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); /* Glow effects */ --glow-primary: 0 0 20px rgba(0, 229, 255, 0.15); --glow-accent: 0 0 20px rgba(118, 255, 3, 0.1); } /* ===== LIGHT MODE ===== */ [data-theme="light"] { --color-bg: #f4f4f8; --color-surface: #ffffff; --color-surface-2: #f8f8fc; --color-surface-offset: #eeeef3; --color-surface-dynamic: #e4e4ec; --color-divider: #d4d4de; --color-border: #c0c0d0; --color-text: #1a1a2e; --color-text-muted: #6a6a80; --color-text-faint: #a0a0b4; --color-text-inverse: #f4f4f8; --color-primary: #0097a7; --color-primary-hover: #00838f; --color-primary-active: #006064; --color-primary-dim: rgba(0, 151, 167, 0.1); --color-accent: #2e7d32; --color-accent-dim: rgba(46, 125, 50, 0.1); --color-orange: #e65100; --color-orange-dim: rgba(230, 81, 0, 0.1); --color-error: #d32f2f; --color-success: #2e7d32; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --glow-primary: none; --glow-accent: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #f4f4f8; --color-surface: #ffffff; --color-surface-2: #f8f8fc; --color-surface-offset: #eeeef3; --color-surface-dynamic: #e4e4ec; --color-divider: #d4d4de; --color-border: #c0c0d0; --color-text: #1a1a2e; --color-text-muted: #6a6a80; --color-text-faint: #a0a0b4; --color-text-inverse: #f4f4f8; --color-primary: #0097a7; --color-primary-hover: #00838f; --color-primary-active: #006064; --color-primary-dim: rgba(0, 151, 167, 0.1); --color-accent: #2e7d32; --color-accent-dim: rgba(46, 125, 50, 0.1); --color-orange: #e65100; --color-orange-dim: rgba(230, 81, 0, 0.1); --color-error: #d32f2f; --color-success: #2e7d32; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --glow-primary: none; --glow-accent: none; } } /* ===== GLOBAL ===== */ body { background: var(--color-bg); font-family: var(--font-body); color: var(--color-text); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } /* ===== DEV BANNER ===== */ .dev-banner { background: linear-gradient(90deg, #ff6d00, #ff9100); color: #fff; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; position: sticky; top: 0; z-index: 100; } /* ===== HEADER ===== */ .header { position: sticky; top: 32px; z-index: 50; background: oklch(from var(--color-bg) l c h / 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-divider); padding: var(--space-3) var(--space-4); } .header-inner { max-width: var(--content-wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .logo { display: flex; align-items: center; gap: var(--space-2); } .logo svg { width: 36px; height: 36px; } .logo-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); } .logo-text span { color: var(--color-primary); } .header-nav { display: flex; align-items: center; gap: var(--space-4); } .header-nav a { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); } .header-nav a:hover, .header-nav a.active { color: var(--color-primary); } .theme-toggle { color: var(--color-text-muted); padding: var(--space-2); border-radius: var(--radius-md); } .theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); } /* ===== HERO ===== */ .hero { position: relative; padding: clamp(var(--space-16), 10vw, var(--space-32)) var(--space-4); text-align: center; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -50%; left: -20%; width: 140%; height: 200%; background: radial-gradient(ellipse 600px 400px at 30% 50%, var(--color-primary-dim) 0%, transparent 70%), radial-gradient(ellipse 500px 350px at 70% 40%, var(--color-accent-dim) 0%, transparent 70%); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 1; max-width: var(--content-default); margin: 0 auto; } .hero h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.03em; margin-bottom: var(--space-4); color: var(--color-text); } .hero h1 .highlight { background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: var(--text-base); color: var(--color-text-muted); max-width: 560px; margin: 0 auto var(--space-6); } .hero-stats { display: flex; justify-content: center; gap: var(--space-8); margin-top: var(--space-8); } .hero-stat { text-align: center; } .hero-stat-value { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; } .hero-stat-label { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.08em; } /* ===== CONTAINER ===== */ .container { max-width: var(--content-wide); margin: 0 auto; padding: 0 var(--space-4); } /* ===== SECTION ===== */ .section { padding: clamp(var(--space-8), 6vw, var(--space-16)) 0; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3); } .section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; } /* ===== FILTER TABS ===== */ .filter-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; } .filter-tab { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 500; white-space: nowrap; } .filter-tab:hover { border-color: var(--color-primary); color: var(--color-primary); } .filter-tab.active { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } /* ===== NEWS GRID ===== */ .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--space-4); } /* ===== ARTICLE CARD ===== */ .article-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform 200ms ease; } .article-card:hover { border-color: var(--color-primary); box-shadow: var(--glow-primary); transform: translateY(-2px); } .article-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); } .article-category { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: var(--color-primary-dim); color: var(--color-primary); } .article-card h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.4; } .article-card h3 a { color: var(--color-text); } .article-card h3 a:hover { color: var(--color-primary); } .article-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .article-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-divider); } .article-source { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; } .article-link { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); display: flex; align-items: center; gap: var(--space-1); } .article-link:hover { color: var(--color-primary-hover); } /* ===== FEATURED CARD ===== */ .featured-card { background: var(--color-surface); border: 1px solid var(--color-primary); border-radius: var(--radius-xl); padding: var(--space-8); display: grid; gap: var(--space-4); box-shadow: var(--glow-primary); margin-bottom: var(--space-6); } .featured-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); background: var(--color-primary); color: var(--color-text-inverse); font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.06em; width: fit-content; } .featured-card h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; } .featured-card h2 a { color: var(--color-text); } .featured-card h2 a:hover { color: var(--color-primary); } .featured-desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; } /* ===== NEWSLETTER ===== */ .newsletter-section { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-12)); text-align: center; position: relative; overflow: hidden; } .newsletter-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 400px 300px at 20% 80%, var(--color-primary-dim), transparent), radial-gradient(ellipse 400px 300px at 80% 20%, var(--color-accent-dim), transparent); pointer-events: none; } .newsletter-content { position: relative; z-index: 1; } .newsletter-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); } .newsletter-section p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 auto var(--space-6); max-width: 480px; } .newsletter-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; margin: 0 auto; } .newsletter-form input[type="email"], .newsletter-form input[type="text"] { flex: 1; padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text); min-width: 0; } .newsletter-form input::placeholder { color: var(--color-text-faint); } .newsletter-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-dim); outline: none; } .btn-primary { padding: var(--space-3) var(--space-6); background: var(--color-primary); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-md); white-space: nowrap; border: none; } .btn-primary:hover { background: var(--color-primary-hover); } .btn-primary:active { background: var(--color-primary-active); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .newsletter-message { margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 500; min-height: 1.4em; } .newsletter-message.success { color: var(--color-success); } .newsletter-message.error { color: var(--color-error); } /* ===== ARCHIVES ===== */ .archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-4); } .archive-card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive); } .archive-card:hover { border-color: var(--color-orange); box-shadow: 0 0 20px rgba(255, 145, 0, 0.1); } .archive-date { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-2); } .archive-count { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-3); } /* ===== TAB SECTIONS ===== */ .tab-nav { display: flex; gap: 0; border-bottom: 1px solid var(--color-divider); margin-bottom: var(--space-6); } .tab-btn { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-btn:hover { color: var(--color-text); } .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } .tab-content { display: none; } .tab-content.active { display: block; } /* ===== LIVE INDICATOR ===== */ .live-dot { width: 8px; height: 8px; background: var(--color-accent); border-radius: 50%; display: inline-block; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ===== REFRESH BTN ===== */ .btn-ghost { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; gap: var(--space-1); } .btn-ghost:hover { color: var(--color-primary); border-color: var(--color-primary); } /* ===== CONTROLS BAR ===== */ .controls-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider); flex-wrap: wrap; } /* ===== BASKETBALL TOGGLE ===== */ .basketball-toggle { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); } .basketball-toggle:hover { border-color: #ff6d00; color: #ff6d00; } .basketball-toggle.active { background: linear-gradient(135deg, #ff6d00, #ff9100); border-color: #ff6d00; color: #fff; } /* ===== LOAD MORE ===== */ .load-more-wrap { text-align: center; padding: var(--space-8) 0; } .btn-load-more { padding: var(--space-3) var(--space-8); font-size: var(--text-sm); font-weight: 500; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .btn-load-more:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ===== FOOTER ===== */ .footer { border-top: 1px solid var(--color-divider); padding: var(--space-8) var(--space-4); text-align: center; } .footer-inner { max-width: var(--content-wide); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; } .footer-links { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .footer-links a { font-size: var(--text-xs); color: var(--color-text-faint); } .footer-links a:hover { color: var(--color-primary); } .footer-copy { font-size: var(--text-xs); color: var(--color-text-faint); } /* ===== DONATE SECTION ===== */ .donate-section { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: clamp(var(--space-8), 5vw, var(--space-12)); text-align: center; position: relative; overflow: hidden; margin-top: var(--space-8); } .donate-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 400px 300px at 30% 80%, rgba(255, 109, 0, 0.06), transparent), radial-gradient(ellipse 400px 300px at 70% 20%, rgba(255, 145, 0, 0.06), transparent); pointer-events: none; } .donate-content { position: relative; z-index: 1; } .donate-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-full); background: linear-gradient(135deg, rgba(255, 109, 0, 0.12), rgba(255, 145, 0, 0.12)); color: #ff9100; margin: 0 auto var(--space-4); font-size: 2rem; } .donate-section h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-3); } .donate-section p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 auto var(--space-6); max-width: 480px; } .donate-tiers { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; } .donate-tier { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); text-decoration: none; color: var(--color-text); min-width: 110px; transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform 200ms ease; } .donate-tier:hover { border-color: #ff9100; box-shadow: 0 0 24px rgba(255, 145, 0, 0.15); transform: translateY(-3px); color: var(--color-text); } .donate-tier-emoji { font-size: 1.75rem; line-height: 1; } .donate-tier-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; } .donate-tier-amount { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: #ff9100; } .donate-custom-link { display: inline-block; font-size: var(--text-sm); font-weight: 500; color: var(--color-primary); margin-bottom: var(--space-4); } /* ===== MOBILE ===== */ .mobile-menu-btn { display: none; color: var(--color-text-muted); padding: var(--space-2); } @media (max-width: 640px) { .mobile-menu-btn { display: block; } .header-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); flex-direction: column; padding: var(--space-4); gap: var(--space-2); } .header-nav.open { display: flex; } .hero-stats { gap: var(--space-4); } .newsletter-form { max-width: 100%; } .controls-bar { flex-direction: column; align-items: flex-start; } .news-grid { grid-template-columns: 1fr; } .featured-card { padding: var(--space-5); } .donate-tiers { gap: var(--space-2); } .donate-tier { padding: var(--space-3) var(--space-4); min-width: 90px; } } /* ===== SCROLL REVEAL (FIX APPLIED) ===== */
/* BUG FIX: Original had opacity:0 but IntersectionObserver wasn't initializing */
/* after dynamic card rendering. This version works with pre-rendered HTML. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* ===== SECTION DIVIDER ===== */ .section-divider { border: none; border-top: 1px solid var(--color-divider); margin: var(--space-8) 0; opacity: 0.4; }