From 7f7b82fdc4197951fd3108b5c7a64e67c52b74e0 Mon Sep 17 00:00:00 2001
From: AlacrisDevs <alacrisdevs@gmail.com>
Date: Thu, 26 Mar 2026 10:58:58 +0200
Subject: [PATCH] Button style changes, created secondary class

---
 src/app/globals.css                   | 34 ++++++++++++++++++++++++++-
 src/components/teaser/EndSection.tsx  |  2 +-
 src/components/teaser/HeroSection.tsx |  5 ++--
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 9ebeb67..db652f6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -144,7 +144,39 @@ body {
   justify-content: center;
   gap: 8px;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: background-color 0.1s, color 0.1s;
+
+  &:hover {
+    background-color: var(--color-text-light);
+  }
+
+  &:active {
+    background-color: var(--color-primary);
+  }
+}
+
+@utility btn-secondary-lg {
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+  color: var(--color-text-light);
+  box-shadow: inset 0 0 0 4px var(--color-primary);
+  padding: 16px;
+  min-width: 56px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: var(--color-primary);
+    color: var(--color-bg-dark);
+  }
+
+  &:active {
+    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
+    color: var(--color-text-light);
+  }
 }
 
 /* ===== Scrollbar hidden utility ===== */
diff --git a/src/components/teaser/EndSection.tsx b/src/components/teaser/EndSection.tsx
index 651a359..c69ed30 100644
--- a/src/components/teaser/EndSection.tsx
+++ b/src/components/teaser/EndSection.tsx
@@ -104,7 +104,7 @@ export default function EndSection() {
               <h2 className="text-h1 text-text-light text-center text-shadow-teaser">
                 {t("teaser.sponsors.cta")}
               </h2>
-              <a href="mailto:tipilan@ituk.ee" className="btn-primary-lg text-btn-lg hover:opacity-80" style={{ backgroundColor: "#FFAB00", color: "#1a1a1a" }}>
+              <a href="mailto:tipilan@ituk.ee" className="btn-secondary-lg text-btn-lg">
                 {t("teaser.sponsors.contactButton")}
               </a>
             </div>
diff --git a/src/components/teaser/HeroSection.tsx b/src/components/teaser/HeroSection.tsx
index 6704cc8..6017f42 100644
--- a/src/components/teaser/HeroSection.tsx
+++ b/src/components/teaser/HeroSection.tsx
@@ -37,7 +37,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
       </div>
 
       {/* Center content */}
-      <div className="relative z-[1] flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6">
+      <div className="relative z-1 flex flex-col items-center justify-center h-full gap-8 lg:gap-16 px-6">
         {/* Logo */}
         <Image
           src="/tipilan-logo.svg"
@@ -94,8 +94,7 @@ export default function HeroSection({ onScrollDown }: HeroSectionProps) {
           </a>
           <a
             href="mailto:tipilan@ituk.ee"
-            className="btn-primary-lg text-btn-lg hover:opacity-80 text-center"
-            style={{ backgroundColor: "#FFAB00", color: "#1a1a1a" }}
+            className="btn-secondary-lg text-btn-lg text-center"
           >
             {t("teaser.sponsors.contactButton")}
           </a>