From 343c6ab951b636a130b36320a037c042afe10045 Mon Sep 17 00:00:00 2001
From: ImpulsiveFPS <roberthrajala@gmail.com>
Date: Mon, 2 Feb 2026 15:32:33 +0100
Subject: [PATCH] Add private class for red styling, keep public services green

---
 index.html | 10 +++++-----
 styles.css | 21 ++++-----------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index f817fe7..7163b6a 100644
--- a/index.html
+++ b/index.html
@@ -322,7 +322,7 @@
                     Private Services
                 </h3>
                 <div class="services-grid">
-                    <a href="/services/nextcloud.html" class="service-card public" target="_blank" rel="noopener">
+                    <a href="/services/nextcloud.html" class="service-card private" target="_blank" rel="noopener">
                         <div class="service-glow"></div>
                         <div class="service-icon" style="--icon-color: #0082c9; font-size: 28px;">☁️</div>
                         <h3 class="service-name">Nextcloud</h3>
@@ -338,7 +338,7 @@
                         </div>
                     </a>
 
-                    <a href="/services/netdata.html" class="service-card public" target="_blank" rel="noopener">
+                    <a href="/services/netdata.html" class="service-card private" target="_blank" rel="noopener">
                         <div class="service-glow"></div>
                         <div class="service-icon" style="--icon-color: #00ab44; font-size: 28px;">📈</div>
                         <h3 class="service-name">Netdata</h3>
@@ -354,7 +354,7 @@
                         </div>
                     </a>
 
-                    <a href="/services/immich.html" class="service-card public" target="_blank" rel="noopener">
+                    <a href="/services/immich.html" class="service-card private" target="_blank" rel="noopener">
                         <div class="service-glow"></div>
                         <div class="service-icon" style="--icon-color: #ad5c5c; font-size: 28px;">🖼️</div>
                         <h3 class="service-name">Immich</h3>
@@ -370,7 +370,7 @@
                         </div>
                     </a>
 
-                    <a href="/services/portainer.html" class="service-card public" target="_blank" rel="noopener">
+                    <a href="/services/portainer.html" class="service-card private" target="_blank" rel="noopener">
                         <div class="service-glow"></div>
                         <div class="service-icon" style="--icon-color: #13b6a6; font-size: 28px;">🐳</div>
                         <h3 class="service-name">Portainer</h3>
@@ -386,7 +386,7 @@
                         </div>
                     </a>
 
-                    <a href="/services/pihole.html" class="service-card public" target="_blank" rel="noopener">
+                    <a href="/services/pihole.html" class="service-card private" target="_blank" rel="noopener">
                         <div class="service-glow"></div>
                         <div class="service-icon" style="--icon-color: #f97316; font-size: 28px;">🛡️</div>
                         <h3 class="service-name">Pi-hole</h3>
diff --git a/styles.css b/styles.css
index 6155eb3..9ad2b22 100644
--- a/styles.css
+++ b/styles.css
@@ -1754,7 +1754,7 @@ body {
     color: #ef4444;
 }
 
-/* Public Service Styling */
+/* Public Service Styling (Green) */
 .service-card.public {
     border-color: rgba(34, 197, 94, 0.2);
 }
@@ -1764,29 +1764,16 @@ body {
     box-shadow: 0 8px 32px rgba(34, 197, 94, 0.1);
 }
 
-/* Private Service Styling */
-.service-card.private-service {
+/* Private Service Styling (Red) */
+.service-card.private {
     border-color: rgba(239, 68, 68, 0.2);
-    cursor: pointer;
-    display: block;
-    z-index: 1;
 }
 
-.service-card.private-service a {
-    position: relative;
-    z-index: 10;
-}
-
-.service-card.private-service:hover {
+.service-card.private:hover {
     border-color: rgba(239, 68, 68, 0.5);
     box-shadow: 0 8px 32px rgba(239, 68, 68, 0.1);
 }
 
-.service-card.private-service .service-arrow svg {
-    width: 20px;
-    height: 20px;
-}
-
 
 /* ========================================
    Skills Section