From 78e08046a701c1ad817f2b099de3068c667fa1c2 Mon Sep 17 00:00:00 2001 From: Ryan Salazar Date: Wed, 20 May 2026 13:13:25 +0000 Subject: [PATCH] =?UTF-8?q?ticker:=20redesign=20=E2=80=94=20news-wire=20ae?= =?UTF-8?q?sthetic,=20drop=20the=20bright=20label=20box?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous version used solid neon-green / neon-cyan blocks for the "Live Wire" / "On Calendar" labels which read as too aggressive against the otherwise dark-navy site. Replaced with a real news-wire look: - Pulse-dot indicator (animated breathing dot) + small-caps mono label on the left, separated from the feed by a thin rule. - Item codes (SONY / MTRX / NAB) become small bordered chips with subtle neon background tint instead of bare colored text. - Timestamps are mid-gray monospace; titles are clean Inter at 13px with slight letter-spacing. - Top + bottom of each bar get a hairline gradient (neon→cyan on row 1, dimmer cyan-only between rows) instead of a hard border. - Items are separated by faint vertical hairlines, padded consistently. - Marquee slowed slightly (110s / 170s) so titles are legible. Same data sources (news + events), same scroll directions, just better visual integration with the rest of the dark-navy site. --- src/components/DoubleTicker.tsx | 39 +++++++---- src/styles/redesign-tokens.css | 120 ++++++++++++++++++++++++++------ 2 files changed, 123 insertions(+), 36 deletions(-) diff --git a/src/components/DoubleTicker.tsx b/src/components/DoubleTicker.tsx index 5632542..4cfabd0 100644 --- a/src/components/DoubleTicker.tsx +++ b/src/components/DoubleTicker.tsx @@ -147,22 +147,25 @@ export default async function DoubleTicker() { return (
- {/* Row 1 — Live wire (news, right-to-left, fast). */} + {/* Row 1 — Live wire (news, right-to-left). */} {news.length > 0 && ( -
-
- Live Wire +
+
+ +
{[...news, ...news].map((it, i) => ( - [{hhmm(it.published_at)}] - [{it.source_code}] - {it.title} + {hhmm(it.published_at)} + {it.source_code} + {it.title} ))}
@@ -173,18 +176,24 @@ export default async function DoubleTicker() { {/* Row 2 — Industry calendar (events, left-to-right, slower). */} {events.length > 0 && ( -
-
- On Calendar +
+
+ +
{[...events, ...events].map((ev, i) => { const where = [ev.city, ev.country].filter(Boolean).join(", "); const inner = ( - - [{fmtEventDate(ev.start_date)}] - [{ev.short_name}] - {ev.name}{where ? ` — ${where}` : ""} + + {fmtEventDate(ev.start_date)} + {ev.short_name} + + {ev.name} + {where ? ` — ${where}` : ""} + ); return ev.slug ? ( diff --git a/src/styles/redesign-tokens.css b/src/styles/redesign-tokens.css index 028f5da..aed10d3 100644 --- a/src/styles/redesign-tokens.css +++ b/src/styles/redesign-tokens.css @@ -91,32 +91,110 @@ animation-duration: 140s; } -/* Neon dual-ticker tokens — used ONLY inside DoubleTicker. */ -.bb-neon-bar { - background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(5,10,8,0.55)); - border-top: 1px solid rgba(0,255,159,0.18); - border-bottom: 1px solid rgba(0,255,159,0.18); +/* ─── Dual-ticker (DoubleTicker.tsx) ────────────────────────────────────── + News-wire aesthetic: pulse dot + small-caps label on the left, the + feed scrolls in muted mid-gray with monospaced timestamps and a + single neon accent on the source code. No bright label boxes — + the neon shows up only as the pulse and on the code chip. */ +.bb-tick-bar { + position: relative; + background: + linear-gradient(180deg, rgba(8,12,10,0.92), rgba(10,14,12,0.92)); + border-top: 1px solid rgba(255,255,255,0.04); + border-bottom: 1px solid rgba(255,255,255,0.04); } -.bb-neon-bar + .bb-neon-bar { - border-top: 1px solid rgba(0,212,255,0.10); /* faint divider between the two */ +.bb-tick-bar::before { + /* thin neon hairline at the top of the FIRST bar only */ + content: ""; + position: absolute; + inset: 0 0 auto 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(0,255,159,0.45), rgba(0,212,255,0.45), transparent); + opacity: 0.65; } -.bb-neon-label { - background: #00ff9f; - color: #050a08; - font-weight: 700; +.bb-tick-bar + .bb-tick-bar::before { + /* divider between row 1 and row 2: dimmer + cyan-leaning */ + background: linear-gradient(90deg, transparent, rgba(0,212,255,0.25), transparent); + opacity: 0.5; +} + +.bb-tick-label { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; - letter-spacing: 0.15em; - padding: 2px 8px; - border-radius: 3px; + font-weight: 700; + letter-spacing: 0.22em; text-transform: uppercase; + color: #00ff9f; flex-shrink: 0; - text-shadow: none; + padding-right: 12px; + border-right: 1px solid rgba(255,255,255,0.07); } -.bb-neon-label--cyan { +.bb-tick-label--cyan { color: #00d4ff; } + +.bb-tick-pulse { + display: inline-block; + width: 6px; + height: 6px; + border-radius: 50%; + background: #00ff9f; + box-shadow: 0 0 8px rgba(0,255,159,0.7); + animation: bb-tick-blink 2.2s ease-in-out infinite; +} +.bb-tick-pulse--cyan { background: #00d4ff; + box-shadow: 0 0 8px rgba(0,212,255,0.7); } -.bb-neon-time { color: #707070; font-family: 'IBM Plex Mono', ui-monospace, monospace; } -.bb-neon-code { color: #00ff9f; font-family: 'IBM Plex Mono', ui-monospace, monospace; } -.bb-neon-code--cyan { color: #00d4ff; } -.bb-neon-text { color: #d4d4d4; } -.bb-neon-text:hover { color: #00ff9f; text-shadow: 0 0 8px rgba(0,255,159,0.4); } +@keyframes bb-tick-blink { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.45; transform: scale(0.85); } +} + +.bb-tick-time { + color: #5a6470; + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 11px; + margin-right: 6px; +} +.bb-tick-code { + color: #00ff9f; + font-family: 'IBM Plex Mono', ui-monospace, monospace; + font-size: 11px; + font-weight: 700; + padding: 1px 5px; + margin-right: 8px; + border: 1px solid rgba(0,255,159,0.25); + border-radius: 2px; + background: rgba(0,255,159,0.06); +} +.bb-tick-code--cyan { + color: #00d4ff; + border-color: rgba(0,212,255,0.25); + background: rgba(0,212,255,0.06); +} +.bb-tick-text { + color: #c8ccd1; + font-size: 13px; + letter-spacing: 0.01em; + font-weight: 400; +} +.bb-tick-text:hover { + color: #ffffff; +} +.bb-tick-item { + display: inline-flex; + align-items: center; + padding: 0 24px 0 0; + white-space: nowrap; +} +.bb-tick-item + .bb-tick-item { + border-left: 1px solid rgba(255,255,255,0.05); + padding-left: 24px; +} + +/* Smoother marquee easing — keep the linear feel (real tickers are linear) + but slightly slower so text is legible. */ +.bb-tick-bar .bb-marquee { animation-duration: 110s; } +.bb-tick-bar .bb-marquee--slow { animation-duration: 170s; }