From c9603e96a5d72cffa7ecebe4129c4324ea761a3c Mon Sep 17 00:00:00 2001
From: CosmeValera <cosmevalerareales@gmail.com>
Date: Sat, 12 Oct 2024 01:59:34 +0200
Subject: [PATCH] Add missing styles to sponsor page

---
 sass/_main.scss        |  3 +--
 sass/_mixins.scss      |  9 +++++++++
 sass/_variables.scss   |  2 ++
 sass/sponsor.scss      | 11 +++++++++++
 templates/sponsor.html |  2 +-
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/sass/_main.scss b/sass/_main.scss
index 8d44e42..f476d5b 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -4,5 +4,4 @@
 @import 'helpers';
 @import 'layout';
 @import 'responsive';
-@import 'shared-components';
-@import 'sponsor';
\ No newline at end of file
+@import 'shared-components';
\ No newline at end of file
diff --git a/sass/_mixins.scss b/sass/_mixins.scss
index a795dae..ace75f5 100644
--- a/sass/_mixins.scss
+++ b/sass/_mixins.scss
@@ -64,3 +64,12 @@
         text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
     }
 }
+
+@mixin card-a-colors-dark {
+    background-color: $color-bg-secondary;
+    border: 4px solid $color-fg-secondary;
+}
+@mixin card-b-colors-dark {
+    background-color: $color-bg-secondary-2;
+    border: 1px solid $color-fg-secondary;
+} 
\ No newline at end of file
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 9fc8a92..c8b7133 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -4,6 +4,8 @@ $color-bg-secondary: #0e3c3c;
 $color-fg: #ffffff;
 $color-fg-secondary: #4ff5f5;
 
+$color-bg-secondary-2: #185146;
+
 // Fonts
 $sans-serif: Montserrat, 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 
diff --git a/sass/sponsor.scss b/sass/sponsor.scss
index 11fbc94..35da446 100644
--- a/sass/sponsor.scss
+++ b/sass/sponsor.scss
@@ -1,7 +1,10 @@
+@import 'main';
+
 #sponsor {
   text-align: center;
 
   #section-reasons-sponsor {
+    @include card-a-colors-dark;
     margin-bottom: 1rem;
     padding: 24px;
     border-radius: 8px;
@@ -48,12 +51,17 @@
       justify-content: space-between;
 
       .tier-card {
+        @include card-b-colors-dark;
         flex: 1;
         border-radius: 8px;
         padding: 24px;
         transition: box-shadow 0.3s ease-in-out;
         margin-bottom: 1.5rem;
 
+        &:hover {
+            box-shadow: 0px 8px 16px rgba(0,0,0, 0.7);
+        }
+
         &.tier-card-silver {
           border: 1px solid #C0C0C0;
           hr.tier-card-hr {
@@ -147,6 +155,7 @@
   }
 
   #section-current-sponsors {
+    @include card-a-colors-dark;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 24px;
@@ -161,6 +170,7 @@
     gap: 20px;
     
     .contribution {
+      @include card-a-colors-dark;
       border-radius: 12px;
       padding: 20px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
@@ -178,6 +188,7 @@
           background-color: #f3f4f6;
           color: #000;
           padding: 12px 24px;
+          border: 1px solid #454545;
           border-radius: 8px;
           text-decoration: none;
           font-weight: 600;
diff --git a/templates/sponsor.html b/templates/sponsor.html
index d8e42b9..f536e8f 100644
--- a/templates/sponsor.html
+++ b/templates/sponsor.html
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block styles %}
-    <link rel="stylesheet" href="{{ get_url(path="index.css") | safe }}">
+    <link rel="stylesheet" href="{{ get_url(path="sponsor.css") | safe }}">
 {% endblock %}
 
 {% block content %}