From d12e7224bac3f48f02fd61aa481b1ed6c08bbf99 Mon Sep 17 00:00:00 2001
From: Archos <archos@arch-linux.cz>
Date: Wed, 29 Apr 2026 21:01:29 +0200
Subject: [PATCH] design: landing page effects and polish

- radial gradient glow background
- card hover: translateY(-4px) + blue glow shadow
- gradient on cards for depth
- OSCloud logo in nav instead of blue M
- wider card grid and footer (1100px)
- footer separator between OSCloud and links
- vertically centered content
- faster transitions (0.15s)
---
 index.html       |  3 ++-
 style/mxchat.css | 10 +++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 15b9047..a8971f1 100755
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
 
   <nav class="site-nav">
     <a href="/" class="nav-logo">
-      <div class="nav-logo-icon">M</div>
+      <img src="./index/img/logo_oscloud.png" alt="OSCloud" style="width: 32px; height: auto; border-radius: 6px;" />
       <span class="nav-logo-text">mxchat.cz</span>
     </a>
     <button class="nav-menu-btn" onclick="document.querySelector('.nav-links').classList.toggle('open')" aria-label="Menu">&#9776;</button>
@@ -99,6 +99,7 @@
 
   <footer class="site-footer">
     <span>&copy; 2024-2026 OSCloud</span>
+    <span style="color: var(--text-dim); margin: 0 12px;">&middot;</span>
     <div class="footer-links">
       <a href="https://mamutovo.cz/@oscloud" target="_blank" rel="noopener"><i class="fa fa-mastodon"></i> Mastodon</a>
       <a href="https://matrix.to/#/#podpora:mxchat.cz" target="_blank" rel="noopener"><i class="fa fa-matrix-org"></i> Matrix</a>
diff --git a/style/mxchat.css b/style/mxchat.css
index 2b9a6ac..6869b9e 100644
--- a/style/mxchat.css
+++ b/style/mxchat.css
@@ -87,6 +87,7 @@ html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothin
 body {
   min-height: 100vh;
   display: flex;
+  justify-content: center;
   flex-direction: column;
   font-family: var(--font-body);
   font-size: 15px;
@@ -328,7 +329,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
-  max-width: 900px;
+  max-width: 1100px;
   margin: 0 auto;
   padding: 16px 24px 40px;
 }
@@ -344,7 +345,9 @@ a:hover { color: var(--accent); text-decoration: underline; }
   transition: all var(--transition);
 }
 .link-card:hover {
-  border-color: var(--border-hover);
+  transform: translateY(-4px);
+  border-color: var(--accent-light);
+  box-shadow: 0 4px 24px rgba(21, 101, 192, 0.25);
   background: var(--bg-card-hover);
   text-decoration: none;
 }
@@ -477,7 +480,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
    ============================================ */
 .site-footer {
   padding: 24px 32px;
-  max-width: 900px;
+  max-width: 1100px;
   margin: 48px auto 0;
   border-top: 0.5px solid var(--border);
   display: flex;
@@ -485,6 +488,7 @@ a:hover { color: var(--accent); text-decoration: underline; }
   align-items: center;
   font-size: 12px;
   color: var(--text-dim);
+  margin-top: auto;
 }
 .footer-links {
   display: flex;