Styles for other buttons

index.html

@@ -79,7 +79,7 @@
             <p class="slide-down">Hi, welcome to krzak.org</p>
             <ul>
                 <li class="slide-up" style="animation-delay: 0.1s">
-                    <a href="https://fedi.krzak.org">
+                    <a href="https://fedi.krzak.org" class="sharkey-link">
                         <strong>Fediverse</strong>
                         <span>Sharkey</span>
                     </a>
@@ -91,7 +91,7 @@
                     </a>
                 </li>
                 <li class="slide-up" style="animation-delay: 0.2s">
-                    <a href="https://music.krzak.org">
+                    <a href="https://music.krzak.org" class="music-link">
                         <strong>Music</strong>
                         <span>Jellyfin</span>
                     </a>
@@ -110,63 +110,62 @@
                     </a>
                 </li>
                 <li class="slide-up" style="animation-delay: 0.3s">
+                    <a href="/applications.html" class="applications-link">
+                        <strong>Recommended applications</strong>
+                    </a>
+                </li>
+                <li class="slide-up" style="animation-delay: 0.35s">
+                    <a href="/discord.html" class="discord-link">
+                        <strong>Discord server</strong>
+                    </a>
+                </li>
+                <li class="slide-up" style="animation-delay: 0.4s">
                     <a href="https://mu.krzak.org">
                         <strong>Music Upload</strong>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.35s">
+                <li class="slide-up" style="animation-delay: 0.45s">
                     <a href="https://git.krzak.org">
                         <strong>Git</strong>
                         <span>Gitea</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.4s">
+                <li class="slide-up" style="animation-delay: 0.5s">
                     <a href="https://liberapay.com/krzak" class="support-link">
                         <strong>Support</strong>
                         <span>Liberapay</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.45s">
+                <li class="slide-up" style="animation-delay: 0.55s">
                     <a href="https://rss.krzak.org">
                         <strong>RSS</strong>
                         <span>Miniflux</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.5s">
+                <li class="slide-up" style="animation-delay: 0.6s">
                     <a href="https://paste.krzak.org">
                         <strong>Paste</strong>
                         <span>Opengist</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.55s">
+                <li class="slide-up" style="animation-delay: 0.65s">
                     <a href="https://share.krzak.org">
                         <strong>Share</strong>
                         <span>FilePizza</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.6s">
+                <li class="slide-up" style="animation-delay: 0.7s">
                     <a href="https://link.krzak.org">
                         <strong>Link Shortener</strong>
                         <span>Shlink</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.65s">
+                <li class="slide-up" style="animation-delay: 0.75s">
                     <a href="/mc.html">
                         <strong>Minecraft Server</strong>
                         <span>Fabric 1.21.10</span>
                     </a>
                 </li>
-                <li class="slide-up" style="animation-delay: 0.7s">
-                    <a href="/applications.html">
-                        <strong>Recommended applications</strong>
-                    </a>
-                </li>
-                <li class="slide-up" style="animation-delay: 0.75s">
-                    <a href="/discord.html">
-                        <strong>Discord server</strong>
-                    </a>
-                </li>
-
                 <li class="slide-up" style="animation-delay: 0.8s">
                     <a href="/contact.html">
                         <strong>Contact</strong>

styles.css

@@ -57,10 +57,9 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    overflow-x: hidden; /* Prevent horizontal scroll from effects */
+    overflow-x: hidden;
 }
 
-/* Subtle grain texture overlay */
 body::after {
     content: "";
     position: fixed;
@@ -79,11 +78,11 @@ body::after {
     border-radius: 24px;
     padding: 32px;
     border: 1px solid var(--container-border);
-    border-top: 1px solid var(--container-highlight); /* Highlight for 3D feel */
+    border-top: 1px solid var(--container-highlight);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     width: 100%;
-    max-width: 700px; /* Slightly narrower for a more focused look */
+    max-width: 700px;
     margin: auto;
     box-shadow:
         0 8px 32px 0 rgba(0, 0, 0, 0.4),
@@ -101,7 +100,7 @@ h1 {
     text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
-    justify-content: center; /* Center the title */
+    justify-content: center;
     gap: 16px;
 }
 
@@ -124,7 +123,6 @@ h2 {
     transition: transform 0.5s ease;
 }
 
-/* Rotate icon on hover */
 h1:hover .icon {
     transform: rotate(15deg) scale(1.1);
 }
@@ -165,10 +163,9 @@ li a {
     transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     position: relative;
     overflow: hidden;
-    backdrop-filter: blur(4px); /* Extra glass layer */
+    backdrop-filter: blur(4px);
 }
 
-/* Shine effect on hover */
 li a::after {
     content: "";
     position: absolute;
@@ -223,7 +220,7 @@ li a span {
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: flex;
-    flex-direction: column; /* Stack on mobile, row on desktop if needed */
+    flex-direction: column;
     align-items: center;
     gap: 12px;
 }
@@ -259,7 +256,7 @@ li a span {
     position: fixed;
     bottom: 32px;
     right: 32px;
-    width: 56px; /* Slightly larger */
+    width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(42, 26, 94, 0.8);
@@ -360,7 +357,7 @@ li a span {
     }
 }
 
-/* App Gallery Styles (preserved & enhanced) */
+/* App Gallery Styles */
 .app-gallery {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -399,70 +396,50 @@ li a span {
 
 .app-card h4 {
     color: var(--accent-color);
-
     margin-bottom: 8px;
 }
 
 .app-card p {
     font-size: 0.9rem;
-
     color: var(--text-muted);
-
     margin-bottom: 16px;
-
     flex-grow: 1;
-
     line-height: 1.4;
 }
 
 .app-platforms {
     display: flex;
-
     flex-wrap: wrap;
-
     gap: 8px;
-
     justify-content: center;
 }
 
 .app-platforms a {
     background: rgba(255, 255, 255, 0.1);
-
     border: 1px solid var(--container-border);
-
     color: var(--text-color);
-
     text-decoration: none;
-
     font-size: 0.8rem;
-
     padding: 6px 12px;
-
     border-radius: 12px;
-
     transition: all 0.2s ease;
 }
 
 .app-platforms a:hover {
     background: var(--accent-color);
-
+    color: #1a103c;
-    color: #1a103c; /* Dark text for contrast on accent bg */
-
     transform: scale(1.05);
-
     box-shadow: 0 0 10px var(--accent-glow);
 }
 
 .app-card.highlighted {
     border-color: var(--accent-color);
-
     box-shadow:
         0 0 20px var(--accent-glow),
         inset 0 0 20px rgba(244, 162, 97, 0.1);
 }
 
-/* --- Parody Section: Kreatyw --- */
+/* --- Kreatyw Link - AI Powered --- */
-
 .kreatyw-link {
     background:
         radial-gradient(
@@ -474,11 +451,8 @@ li a span {
             padding-box,
         linear-gradient(var(--link-bg), var(--link-bg)) padding-box,
         linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff) border-box !important;
-
     border: 2px solid transparent !important;
-
     animation: borderRotate 4s linear infinite;
-
     background-size:
         100% 100%,
         100% 100%,
@@ -486,7 +460,7 @@ li a span {
 }
 
 .kreatyw-link::after {
-    display: none !important; /* Remove sideways flash */
+    display: none !important;
 }
 
 @keyframes borderRotate {
@@ -496,14 +470,12 @@ li a span {
             0 0,
             0% 50%;
     }
-
     50% {
         background-position:
             0 0,
             0 0,
             100% 50%;
     }
-
     100% {
         background-position:
             0 0,
@@ -514,27 +486,20 @@ li a span {
 
 .kreatyw-link strong {
     color: #fff !important;
-
     display: flex;
-
     align-items: center;
-
     gap: 12px;
 }
 
 .kreatyw-link img {
     display: block;
-
     flex-shrink: 0;
 }
 
 .kreatyw-link span {
     color: #00ffff !important;
-
     font-weight: 600 !important;
-
     text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
-
     animation: aiGlow 2s ease-in-out infinite alternate;
 }
 
@@ -543,7 +508,6 @@ li a span {
         opacity: 0.7;
         filter: drop-shadow(0 0 2px #00ffff);
     }
-
     to {
         opacity: 1;
         filter: drop-shadow(0 0 8px #00ffff);
@@ -552,15 +516,13 @@ li a span {
 
 .kreatyw-link:hover {
     animation: borderRotate 1s linear infinite !important;
-
     box-shadow:
         0 0 25px rgba(255, 0, 255, 0.4),
         0 0 50px rgba(0, 255, 255, 0.2) !important;
-
     border-color: transparent !important;
 }
 
-/* Support Button - Shimmer Effect Style */
+/* --- Support Link - Shimmer Effect --- */
 .support-link {
     background: linear-gradient(
         135deg,
@@ -590,7 +552,7 @@ li a span {
 }
 
 .support-link::after {
-    display: none !important; /* Remove the standard shine effect */
+    display: none !important;
 }
 
 @keyframes shimmer {
@@ -622,3 +584,255 @@ li a span {
 .support-link span {
     opacity: 0.85 !important;
 }
+
+/* --- Sharkey Link - Fediverse Theme --- */
+.sharkey-link {
+    background: linear-gradient(
+        135deg,
+        rgba(244, 114, 182, 0.2) 0%,
+        rgba(139, 92, 246, 0.2) 100%
+    ) !important;
+    border: 2px solid rgba(244, 114, 182, 0.4) !important;
+    position: relative;
+}
+
+.sharkey-link::before {
+    content: "🦈";
+    position: absolute;
+    left: 20px;
+    font-size: 1.5rem;
+    opacity: 0.3;
+    transition: all 0.3s ease;
+}
+
+.sharkey-link:hover::before {
+    opacity: 0.6;
+    transform: scale(1.2) rotate(10deg);
+}
+
+.sharkey-link::after {
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(244, 114, 182, 0.3),
+        transparent
+    ) !important;
+}
+
+.sharkey-link:hover {
+    border-color: rgba(244, 114, 182, 0.8) !important;
+    box-shadow: 0 0 30px rgba(244, 114, 182, 0.4) !important;
+    background: linear-gradient(
+        135deg,
+        rgba(244, 114, 182, 0.3) 0%,
+        rgba(139, 92, 246, 0.3) 100%
+    ) !important;
+}
+
+.sharkey-link strong {
+    color: #fbbf24 !important;
+}
+
+.sharkey-link span {
+    color: #f472b6 !important;
+}
+
+/* --- Music Link - Audio Wave Theme --- */
+.music-link {
+    background: linear-gradient(
+        135deg,
+        rgba(168, 85, 247, 0.2) 0%,
+        rgba(236, 72, 153, 0.2) 100%
+    ) !important;
+    border: 2px solid rgba(168, 85, 247, 0.4) !important;
+    position: relative;
+}
+
+.music-link::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(168, 85, 247, 0.1) 25%,
+        transparent 50%,
+        rgba(236, 72, 153, 0.1) 75%,
+        transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: musicPulse 3s ease-in-out infinite;
+    z-index: 0;
+}
+
+@keyframes musicPulse {
+    0%,
+    100% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+}
+
+.music-link::after {
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(168, 85, 247, 0.3),
+        transparent
+    ) !important;
+}
+
+.music-link:hover {
+    border-color: rgba(168, 85, 247, 0.8) !important;
+    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5) !important;
+    background: linear-gradient(
+        135deg,
+        rgba(168, 85, 247, 0.3) 0%,
+        rgba(236, 72, 153, 0.3) 100%
+    ) !important;
+}
+
+.music-link strong,
+.music-link span {
+    position: relative;
+    z-index: 1;
+}
+
+.music-link strong {
+    color: #c084fc !important;
+}
+
+.music-link span {
+    color: #ec4899 !important;
+}
+
+/* --- Discord Link - Gaming Theme --- */
+.discord-link {
+    background: linear-gradient(
+        135deg,
+        rgba(88, 101, 242, 0.2) 0%,
+        rgba(114, 137, 218, 0.2) 100%
+    ) !important;
+    border: 2px solid rgba(88, 101, 242, 0.4) !important;
+    position: relative;
+}
+
+.discord-link::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    border-radius: 50%;
+    background: radial-gradient(
+        circle,
+        rgba(88, 101, 242, 0.3) 0%,
+        transparent 70%
+    );
+    transform: translate(-50%, -50%);
+    transition: all 0.5s ease;
+}
+
+.discord-link:hover::before {
+    width: 300px;
+    height: 300px;
+}
+
+.discord-link::after {
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(114, 137, 218, 0.3),
+        transparent
+    ) !important;
+}
+
+.discord-link:hover {
+    border-color: rgba(88, 101, 242, 0.8) !important;
+    box-shadow: 0 0 30px rgba(88, 101, 242, 0.5) !important;
+    background: linear-gradient(
+        135deg,
+        rgba(88, 101, 242, 0.3) 0%,
+        rgba(114, 137, 218, 0.3) 100%
+    ) !important;
+}
+
+.discord-link strong {
+    color: #7289da !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* --- Applications Link - App Grid Theme --- */
+.applications-link {
+    background: linear-gradient(
+        135deg,
+        rgba(59, 130, 246, 0.2) 0%,
+        rgba(16, 185, 129, 0.2) 100%
+    ) !important;
+    border: 2px solid rgba(59, 130, 246, 0.4) !important;
+    position: relative;
+}
+
+.applications-link::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:
+        linear-gradient(
+            45deg,
+            transparent 48%,
+            rgba(59, 130, 246, 0.1) 49%,
+            rgba(59, 130, 246, 0.1) 51%,
+            transparent 52%
+        ),
+        linear-gradient(
+            -45deg,
+            transparent 48%,
+            rgba(16, 185, 129, 0.1) 49%,
+            rgba(16, 185, 129, 0.1) 51%,
+            transparent 52%
+        );
+    background-size: 20px 20px;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    z-index: 0;
+}
+
+.applications-link:hover::before {
+    opacity: 1;
+}
+
+.applications-link::after {
+    background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(59, 130, 246, 0.3),
+        transparent
+    ) !important;
+}
+
+.applications-link:hover {
+    border-color: rgba(59, 130, 246, 0.8) !important;
+    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4) !important;
+    background: linear-gradient(
+        135deg,
+        rgba(59, 130, 246, 0.3) 0%,
+        rgba(16, 185, 129, 0.3) 100%
+    ) !important;
+}
+
+.applications-link strong {
+    color: #3b82f6 !important;
+    position: relative;
+    z-index: 1;
+}