From 9254e9d631fd5c3bbd446d7e25999d54b16bf2b6 Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Mon, 13 Apr 2026 21:46:47 +0200
Subject: [PATCH] Fix SSO banner: force horizontal layout with smaller elements

Use higher specificity selectors to override base card styles.
Smaller icon, font sizes, and tighter padding for compact banner.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html |  2 +-
 style.css  | 29 ++++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 1d7c457..7032320 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MischLabs - Services</title>
-    <link rel="stylesheet" href="style.css?v=2">
+    <link rel="stylesheet" href="style.css?v=3">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
diff --git a/style.css b/style.css
index c8f13aa..3a8a457 100644
--- a/style.css
+++ b/style.css
@@ -127,20 +127,39 @@ main {
 }
 
 /* ===== Banner Card (Auth) ===== */
-.card-banner {
-    flex-direction: row;
+.card.card-banner {
+    flex-direction: row !important;
     align-items: center;
     gap: 1rem;
-    padding: 0.5rem 1.5rem;
+    padding: 0.75rem 1.5rem;
     margin-bottom: 1.25rem;
     animation: fadeInUp 0.5s ease backwards;
 }
 
-.card-banner .card-content {
+.card.card-banner .card-icon {
+    width: 36px;
+    height: 36px;
+    border-radius: 8px;
+}
+
+.card.card-banner .card-icon svg {
+    width: 18px;
+    height: 18px;
+}
+
+.card.card-banner .card-content {
     flex: 1;
 }
 
-.card-banner .card-domain {
+.card.card-banner .card-content h2 {
+    font-size: 0.95rem;
+}
+
+.card.card-banner .card-content p {
+    font-size: 0.75rem;
+}
+
+.card.card-banner .card-domain {
     border-top: none;
     padding-top: 0;
     border-left: 1px solid var(--border);