From c6cd9855e87b20b4f9199d249e67aacd73cf8fba Mon Sep 17 00:00:00 2001
From: Archos <archos@arch-linux.cz>
Date: Wed, 29 Apr 2026 21:31:58 +0200
Subject: [PATCH] design: add glow effects, noise texture, vivid accent colors

- text-shadow glow on hero title and badge
- brighter accent colors (#1e88e5)
- stronger card hover glow
- subtle noise texture on background
- nav CTA button glow
- badge pulse animation
---
 style/mxchat.css | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/style/mxchat.css b/style/mxchat.css
index 6869b9e..0fd00e9 100644
--- a/style/mxchat.css
+++ b/style/mxchat.css
@@ -15,9 +15,9 @@
   --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;
 
-  --accent: #1565c0;
-  --accent-light: #1e88e5;
-  --accent-hover: #1976d2;
+  --accent: #1e88e5;
+  --accent-light: #42a5f5;
+  --accent-hover: #1565c0;
   --accent-subtle: rgba(21, 101, 192, 0.12);
 
   --radius-sm: 6px;
@@ -93,7 +93,10 @@ body {
   font-size: 15px;
   line-height: 1.65;
   color: var(--text);
-  background: var(--bg);
+  background-image: radial-gradient(900px 500px at 20% -10%, rgba(21, 101, 192, .06), transparent 60%),
+    radial-gradient(900px 500px at 120% 10%, rgba(30, 136, 229, .06), transparent 60%),
+    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)' opacity='0.03'/%3E%3C/svg%3E");
+  background-color: var(--bg);
   transition: background var(--transition), color var(--transition);
 }
 img { max-width: 100%; display: block; }
@@ -168,9 +171,10 @@ a:hover { color: var(--accent); text-decoration: underline; }
   padding: 6px 16px;
   border-radius: var(--radius-sm);
   text-decoration: none;
-  transition: background var(--transition);
+  transition: background var(--transition), box-shadow var(--transition);
+  box-shadow: 0 0 12px rgba(30, 136, 229, 0.3);
 }
-.nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; }
+.nav-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; box-shadow: 0 0 20px rgba(30, 136, 229, 0.5); }
 
 /* Theme toggle */
 .theme-toggle {
@@ -250,6 +254,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
   padding: 5px 16px;
   border-radius: var(--radius-full);
   margin-bottom: 24px;
+  animation: badge-pulse 3s ease-in-out infinite;
+  text-shadow: 0 0 20px rgba(30, 136, 229, 0.4);
 }
 .hero h1 {
   font-size: 44px;
@@ -258,6 +264,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
   line-height: 1.12;
   margin-bottom: 16px;
   color: var(--text);
+  text-shadow: 0 0 40px rgba(30, 136, 229, 0.3);
 }
 .hero p {
   font-size: 17px;
@@ -347,7 +354,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
 .link-card:hover {
   transform: translateY(-4px);
   border-color: var(--accent-light);
-  box-shadow: 0 4px 24px rgba(21, 101, 192, 0.25);
+  box-shadow: 0 8px 32px rgba(30, 136, 229, 0.35);
   background: var(--bg-card-hover);
   text-decoration: none;
 }
@@ -525,3 +532,8 @@ a:hover { color: var(--accent); text-decoration: underline; }
   background: var(--accent);
   color: #fff;
 }
+
+@keyframes badge-pulse {
+  0%, 100% { border-color: rgba(30, 136, 229, 0.25); }
+  50% { border-color: rgba(66, 165, 245, 0.6); }
+}