From f42e02b26f9ca70ed2a6e3170048dc0407498b23 Mon Sep 17 00:00:00 2001
From: Stefan Koelle <stefan.koelle@gmail.com>
Date: Sat, 15 Aug 2026 21:30:29 +0200
Subject: [PATCH] welcome intro /w hover and pulse call to action

---
 src/components/ModemIntro.tsx | 2 +-
 src/styles/global.css         | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/ModemIntro.tsx b/src/components/ModemIntro.tsx
index 71b0a47..61882e0 100644
--- a/src/components/ModemIntro.tsx
+++ b/src/components/ModemIntro.tsx
@@ -14,7 +14,7 @@ export default function ModemIntro() {
 |  28k8   [MODEM]   ATDT +49-821-2191-038  |
 +------------------------------------------+`}</pre>
       {state === 'idle' && (
-        <pre style={{ textAlign: 'center' }}><a href="#" onClick={(e) => { e.preventDefault(); selectLine(1); }}>{`> Line 1: +49-821-2191-038 [VFC V34] 28800 <`}</a>{'\n\n'}<a href="#" onClick={(e) => { e.preventDefault(); selectLine(2); }}>{`> Line 2: +49-821-2191-036 [X75]     64000 <`}</a></pre>
+        <pre style={{ textAlign: 'center' }}><a href="#" onClick={(e) => { e.preventDefault(); selectLine(1); }}>{`> Line 1: +49-821-2191-038 [VFC V34] 28800 <`}</a>{'\n\n'}<a href="#" onClick={(e) => { e.preventDefault(); selectLine(2); }}>{`> Line 2: +49-821-2191-036 [X75]     64000 <`}</a>{'\n\n'}<span className="select-line-hint">{`>>>>>>>>> SELECT A LINE TO CONNECT <<<<<<<<<`}</span></pre>
       )}
       {state === 'dialing' && <p style={{ textAlign: 'center' }}>Dialing... please wait.</p>}
     </div>
diff --git a/src/styles/global.css b/src/styles/global.css
index dff6731..b1b4ba7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -3,7 +3,7 @@
 :root {
   --bg:#000; --fg:#c0c0c0; --fg-bright:#fff;
   --red-dark:#8b0000; --red-bright:#ff2828; --red-shadow:#4a0000; --pink:#ff69b4; --yellow:#ffd23f; --grey:#969696;
-  --blue-dark:#00008b; --blue-bright:#55aaff; --blue-shadow:#000050; --cyan:#50e6e6;
+  --blue-dark:#00008b; --blue-bright:#55aaff; --blue-shadow:#000050; --cyan:#50e6e6; --green:#55ff55;
   --font-ansi:'Px437 IBM VGA 8x16','Perfect DOS VGA 437',monospace; --font-body:'IBM Plex Mono',ui-monospace,monospace; --terminal-width-ch:calc(84ch + 23px);
 }
 * { box-sizing: border-box; }
@@ -36,6 +36,10 @@ a { color: inherit; }
 @media (max-width:640px) { .tile-grid { grid-template-columns: 1fr; } }
 @media (max-width:640px) { .ansi-text { font-size: 9px; } }
 .welcome-modem { transform: scaleY(2); transform-origin: top center; line-height: 0.84; }
+.welcome-modem a { color: var(--fg); text-decoration: none; transition: color 0.15s; }
+.welcome-modem a:hover { color: var(--yellow); }
+.select-line-hint { color: var(--green); animation: hint-pulse 2s ease-in-out infinite; }
+@keyframes hint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
 @media (max-width:640px) { .welcome-modem { font-size: 12px; } }
 @media (max-width:640px) { .ansi-text .c-main-red, .ansi-text .c-main-blue, .ansi-text .c-white, .ansi-text .c-pink, .ansi-text .c-cyan { font-weight: normal; } }
 .status-bar { border-top:1px solid var(--red-dark); margin-top:1rem; padding-top:0.5rem; font-size:0.85em; }