initial commit: rocket.new export of broadcastbeat

src/styles/tailwind.css

@@ -0,0 +1,810 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --color-primary: #0d0d0d;
+  --color-secondary: #161616;
+  --color-accent: #3b82f6;
+  --color-accent-dark: #2563eb;
+  --color-accent-muted: #1e3a5f;
+  --color-accent-red: #cc0000;
+  --color-accent-red-dark: #aa0000;
+  --color-bg: #111111;
+  --color-card: #1a1a1a;
+  --color-foreground: #e8e8e8;
+  --color-muted: #888888;
+  --color-border: #2a2a2a;
+  --color-top-bar: #1a2535;
+  --color-sub-nav: #161c28;
+  --font-heading: Georgia, 'Times New Roman', serif;
+  --font-body: Arial, Helvetica, sans-serif;
+  --font-mono: 'Courier New', Courier, monospace;
+  --transition-fast: 0.18s ease;
+  --transition-base: 0.25s ease;
+  --transition-slow: 0.4s ease;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-body);
+  background-color: var(--color-bg);
+  color: var(--color-foreground);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* =====================
+   PAGE TRANSITIONS
+   ===================== */
+@keyframes page-enter {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.page-transition {
+  animation: page-enter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* Staggered section entrance */
+@keyframes section-enter {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.section-enter {
+  animation: section-enter 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+.section-enter-1 { animation-delay: 0.05s; }
+.section-enter-2 { animation-delay: 0.12s; }
+.section-enter-3 { animation-delay: 0.19s; }
+.section-enter-4 { animation-delay: 0.26s; }
+.section-enter-5 { animation-delay: 0.33s; }
+
+/* =====================
+   LOADING SKELETONS
+   ===================== */
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position:  200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #1e1e1e 25%,
+    #2a2a2a 50%,
+    #1e1e1e 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.6s infinite linear;
+  border-radius: 2px;
+}
+
+.skeleton-card {
+  background: var(--color-card);
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+/* =====================
+   EMPTY STATES
+   ===================== */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+  color: var(--color-muted);
+  font-family: var(--font-body);
+}
+
+.empty-state-icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+  opacity: 0.35;
+  color: var(--color-accent);
+}
+
+.empty-state-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #aaaaaa;
+  margin-bottom: 6px;
+  letter-spacing: 0.02em;
+}
+
+.empty-state-desc {
+  font-size: 13px;
+  color: #666666;
+  max-width: 280px;
+  line-height: 1.6;
+}
+
+/* =====================
+   TICKER
+   ===================== */
+@keyframes ticker-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+
+.ticker-track {
+  display: flex;
+  width: max-content;
+  animation: ticker-scroll 45s linear infinite;
+  will-change: transform;
+}
+
+.ticker-track:hover {
+  animation-play-state: paused;
+}
+
+/* =====================
+   SPOTLIGHT FADE
+   ===================== */
+@keyframes fadeSlide {
+  from { opacity: 0; transform: translateX(12px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+.spotlight-slide-in {
+  animation: fadeSlide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* =====================
+   ARTICLE HOVER
+   ===================== */
+.article-card {
+  transition: background-color var(--transition-fast);
+}
+
+.article-card:hover {
+  background-color: #1c1c1c;
+}
+
+/* =====================
+   IMAGE ZOOM
+   ===================== */
+.img-zoom {
+  overflow: hidden;
+}
+
+.img-zoom img {
+  transition: transform var(--transition-slow);
+}
+
+.img-zoom:hover img {
+  transform: scale(1.05);
+}
+
+/* =====================
+   NAV LINK
+   ===================== */
+.nav-link-bb {
+  position: relative;
+  font-family: var(--font-body);
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #cccccc;
+  text-decoration: none;
+  padding: 4px 0;
+  transition: color var(--transition-fast);
+}
+
+.nav-link-bb::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background: var(--color-accent);
+  transition: width var(--transition-base);
+}
+
+.nav-link-bb:hover {
+  color: var(--color-accent);
+}
+
+.nav-link-bb:hover::after {
+  width: 100%;
+}
+
+/* =====================
+   SECTION LABEL
+   ===================== */
+.section-label {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  border-left: 3px solid var(--color-accent);
+  padding-left: 8px;
+}
+
+/* =====================
+   SCROLLBAR
+   ===================== */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #1a1a1a;
+}
+::-webkit-scrollbar-thumb {
+  background: #2a3a50;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-accent);
+  transition: background var(--transition-fast);
+}
+
+/* =====================
+   SEARCH INPUT
+   ===================== */
+.search-input {
+  font-family: var(--font-body);
+  background: #1e1e1e;
+  border: 1px solid #3a3a3a;
+  border-radius: 2px;
+  padding: 6px 10px;
+  font-size: 13px;
+  color: var(--color-foreground);
+  outline: none;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+.search-input:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
+}
+
+.search-input::placeholder {
+  color: #666666;
+}
+
+/* Enhanced search bar */
+.search-input-enhanced {
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), width var(--transition-base), background var(--transition-fast);
+}
+
+.search-input-enhanced:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18), 0 2px 8px rgba(0,0,0,0.4);
+  background: #222222;
+}
+
+/* Search bar wrapper — expands on focus */
+.search-bar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-bar-wrapper .search-input {
+  width: 140px;
+  transition: width var(--transition-base), border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
+}
+
+.search-bar-expanded .search-input {
+  width: 220px;
+}
+
+/* Keyboard hint badge */
+.search-kbd-hint {
+  position: absolute;
+  right: 2.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  color: #555;
+  background: #2a2a2a;
+  border: 1px solid #3a3a3a;
+  border-radius: 2px;
+  padding: 1px 5px;
+  line-height: 1.4;
+  pointer-events: none;
+  transition: opacity var(--transition-fast);
+}
+
+/* Clear button */
+.search-clear-btn {
+  position: absolute;
+  right: 2.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #666;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: color var(--transition-fast), background var(--transition-fast);
+}
+
+.search-clear-btn:hover {
+  color: #cccccc;
+  background: #2a2a2a;
+}
+
+/* =====================
+   SCROLL REVEAL
+   ===================== */
+.scroll-reveal {
+  opacity: 0;
+  transform: translateY(18px);
+  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.scroll-reveal.scroll-revealed {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Stagger delays for child elements */
+.scroll-reveal-delay-1 { transition-delay: 0.05s; }
+.scroll-reveal-delay-2 { transition-delay: 0.12s; }
+.scroll-reveal-delay-3 { transition-delay: 0.19s; }
+.scroll-reveal-delay-4 { transition-delay: 0.26s; }
+.scroll-reveal-delay-5 { transition-delay: 0.33s; }
+
+/* Fade-in from left variant */
+.scroll-reveal-left {
+  opacity: 0;
+  transform: translateX(-16px);
+  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.scroll-reveal-left.scroll-revealed {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Scale-in variant for cards */
+.scroll-reveal-scale {
+  opacity: 0;
+  transform: scale(0.97) translateY(10px);
+  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.scroll-reveal-scale.scroll-revealed {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+/* =====================
+   AD PLACEHOLDER
+   ===================== */
+.ad-placeholder {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-body);
+  font-size: 10px;
+  color: #555555;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  position: relative;
+  overflow: hidden;
+}
+
+/* =====================
+   HERO OVERLAY
+   ===================== */
+.hero-overlay {
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.92) 0%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0.1) 100%
+  );
+}
+
+/* =====================
+   PAGINATION
+   ===================== */
+.page-btn {
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border: 1px solid #333333;
+  background: #1a1a1a;
+  color: #cccccc;
+  cursor: pointer;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+  border-radius: 2px;
+}
+
+.page-btn:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: #ffffff;
+  transform: translateY(-1px);
+}
+
+.page-btn.active {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: #ffffff;
+}
+
+.page-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* =====================
+   MOBILE MENU
+   ===================== */
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.mobile-menu-open {
+  animation: slideDown 0.2s ease forwards;
+}
+
+/* =====================
+   HEADINGS
+   ===================== */
+h1, h2, h3 {
+  font-family: var(--font-heading);
+}
+
+/* =====================
+   READ MORE
+   ===================== */
+.read-more {
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: color var(--transition-fast), letter-spacing var(--transition-fast);
+}
+
+.read-more:hover {
+  color: var(--color-accent-dark);
+  letter-spacing: 0.07em;
+  text-decoration: underline;
+}
+
+/* =====================
+   ARTICLE BODY
+   ===================== */
+.article-body p {
+  margin-bottom: 1.25rem;
+  line-height: 1.75;
+}
+
+.article-body h2 {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #e8e8e8;
+  margin-top: 2rem;
+  margin-bottom: 0.875rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #2a2a2a;
+}
+
+.article-body h3 {
+  font-family: var(--font-heading);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #e0e0e0;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.article-body ul,
+.article-body ol {
+  margin-bottom: 1.25rem;
+  padding-left: 1.5rem;
+}
+
+.article-body ul {
+  list-style-type: disc;
+}
+
+.article-body ol {
+  list-style-type: decimal;
+}
+
+.article-body li {
+  margin-bottom: 0.5rem;
+  line-height: 1.65;
+  color: #cccccc;
+}
+
+.article-body strong {
+  color: #e8e8e8;
+  font-weight: 700;
+}
+
+.article-body a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  transition: color var(--transition-fast);
+}
+
+.article-body a:hover {
+  color: var(--color-accent-dark);
+}
+
+.article-body blockquote {
+  border-left: 3px solid var(--color-accent);
+  padding-left: 1rem;
+  margin: 1.5rem 0;
+  color: #aaaaaa;
+  font-style: italic;
+}
+
+/* =====================
+   SPOTLIGHT CARD
+   ===================== */
+.spotlight-card {
+  background: #1a1a1a;
+  border: 1px solid #2a2a2a;
+  overflow: hidden;
+  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
+}
+
+.spotlight-card:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.3);
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+}
+
+/* =====================
+   CATEGORY BADGE
+   ===================== */
+.cat-badge {
+  display: inline-block;
+  font-family: var(--font-body);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  background: var(--color-accent);
+  color: #ffffff;
+  padding: 2px 7px;
+  border-radius: 1px;
+  transition: background var(--transition-fast);
+}
+
+.cat-badge:hover {
+  background: var(--color-accent-dark);
+}
+
+/* =====================
+   SUBSCRIBE BUTTON
+   ===================== */
+.btn-subscribe {
+  background: var(--color-accent);
+  color: #ffffff;
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 4px 12px;
+  border: none;
+  cursor: pointer;
+  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
+  text-decoration: none;
+  display: inline-block;
+}
+
+.btn-subscribe:hover {
+  background: var(--color-accent-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4);
+}
+
+/* =====================
+   CAROUSEL BUTTONS
+   ===================== */
+.carousel-btn {
+  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
+}
+
+.carousel-btn:hover {
+  transform: scale(1.1);
+}
+
+/* =====================
+   FOOTER LINKS
+   ===================== */
+.footer-link {
+  transition: color var(--transition-fast), padding-left var(--transition-fast);
+}
+
+.footer-link:hover {
+  padding-left: 4px;
+}
+
+/* =====================
+   SOCIAL ICONS
+   ===================== */
+.social-icon {
+  transition: color var(--transition-fast), transform var(--transition-fast);
+}
+
+.social-icon:hover {
+  transform: translateY(-2px);
+}
+
+/* =====================
+   CARD ACCENT HOVER
+   ===================== */
+.card-accent-hover {
+  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
+}
+
+.card-accent-hover:hover {
+  border-color: var(--color-accent) !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.25);
+  transform: translateY(-1px);
+}
+
+/* =====================
+   KEYBOARD FOCUS STYLES
+   ===================== */
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+/* Skip to main content link */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 8px;
+  z-index: 9999;
+  background: var(--color-accent);
+  color: #fff;
+  font-family: var(--font-body);
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 16px;
+  border-radius: 2px;
+  text-decoration: none;
+  transition: top 0.15s ease;
+}
+
+.skip-link:focus {
+  top: 8px;
+}
+
+/* =====================
+   FILTER CHIPS
+   ===================== */
+.filter-chip {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  padding: 4px 10px;
+  border: 1px solid #333;
+  background: #1a1a1a;
+  color: #888;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.filter-chip:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: #1e2a3a;
+}
+
+.filter-chip-active {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: #ffffff;
+}
+
+.filter-chip-active:hover {
+  background: var(--color-accent-dark);
+  border-color: var(--color-accent-dark);
+  color: #ffffff;
+}
+
+/* =====================
+   NEWSLETTER CHIPS
+   ===================== */
+.newsletter-chip {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-body);
+  font-size: 12px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border: 1px solid #2a3a50;
+  background: #111d2e;
+  color: #888;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+  user-select: none;
+}
+
+.newsletter-chip:hover {
+  border-color: var(--color-accent);
+  color: #ccc;
+  background: #1a2a3e;
+}
+
+.newsletter-chip-active {
+  border-color: var(--color-accent);
+  color: var(--color-foreground);
+  background: #1a2a3e;
+}
+
+/* =====================
+   TIPTAP RICH TEXT EDITOR
+   ===================== */
+.ProseMirror {
+  outline: none;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #444;
+  pointer-events: none;
+  height: 0;
+}
+
+.ProseMirror h1 { font-size: 1.75rem; font-weight: 700; margin: 1rem 0 0.5rem; color: #fff; }
+.ProseMirror h2 { font-size: 1.4rem; font-weight: 700; margin: 0.9rem 0 0.4rem; color: #e8e8e8; }
+.ProseMirror h3 { font-size: 1.15rem; font-weight: 700; margin: 0.8rem 0 0.35rem; color: #cccccc; }
+.ProseMirror p { margin: 0.5rem 0; line-height: 1.7; }
+.ProseMirror ul { list-style: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
+.ProseMirror ol { list-style: decimal; padding-left: 1.5rem; margin: 0.5rem 0; }
+.ProseMirror li { margin: 0.25rem 0; }
+.ProseMirror blockquote { border-left: 3px solid #3b82f6; padding-left: 1rem; margin: 0.75rem 0; color: #888; font-style: italic; }
+.ProseMirror pre { background: #1a1a1a; border: 1px solid #252525; border-radius: 6px; padding: 1rem; overflow-x: auto; margin: 0.75rem 0; }
+.ProseMirror code { background: #1a1a1a; border-radius: 3px; padding: 0.15em 0.4em; font-family: 'Courier New', monospace; font-size: 0.875em; color: #3b82f6; }
+.ProseMirror pre code { background: none; padding: 0; color: #cccccc; }
+.ProseMirror hr { border: none; border-top: 1px solid #252525; margin: 1.25rem 0; }
+.ProseMirror a { color: #3b82f6; text-decoration: underline; }
+.ProseMirror img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.75rem 0; }
+.ProseMirror strong { font-weight: 700; color: #fff; }
+.ProseMirror em { font-style: italic; }
+.ProseMirror u { text-decoration: underline; }
+.ProseMirror s { text-decoration: line-through; }