Support Corporate Sponsorship page

Author: bigtiger

src/css/layout/navigation.css

@@ -12,14 +12,18 @@ footer ul {
   font-size: var(--small);
 }
 
-nav, nav ul {
+nav,
+nav ul {
   display: flex;
   width: 100%;
+  align-items: center;
+  max-width: 1024px;
   justify-content: space-between;
+  margin: 0 auto;
 }
 
 nav .logo-circle {
-  transition: transform .25s ease-in-out;
+  transition: transform 0.25s ease-in-out;
   flex-shrink: 0;
   width: 30px;
   height: 30px;
@@ -28,18 +32,14 @@ nav .logo-circle {
   margin: 10px 0 0 0;
   border-radius: 30px;
   box-shadow: 0 9px 18px rgba(129, 0, 0, 0.3), 0 2px 5px rgba(137, 0, 0, 0.2);
-  background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg), linear-gradient(to top, #DF3434 0%, #FB5E55 100%);
+  background: no-repeat center 6px / 80% url(/assets/images/gem-logo.svg),
+    linear-gradient(to top, #df3434 0%, #fb5e55 100%);
 }
 
 nav .logo-circle {
   transform: scale(1.05);
 }
 
-nav > ul > li:last-child {
-  margin-left: auto;
-  margin-right: 1.5rem;
-}
-
 footer {
   padding: 130px 0;
   text-align: center;
@@ -60,15 +60,15 @@ nav > ul > li:last-child > a {
 }
 
 nav li.subitem {
-    text-align: center;
+  text-align: center;
 }
 
 footer ul.nav a {
   padding: 15px 20px;
 }
 footer .nav .nav-contact-us > a > span {
   background-attachment: local;
-  background-image: url("/assets/images/contact-icon.svg");
+  background-image: url('/assets/images/contact-icon.svg');
   background-clip: padding-box;
   background-origin: padding-box;
   background-repeat: no-repeat;
@@ -133,19 +133,19 @@ nav .menu-icon.close {
     margin: 4.5rem 0px;
     z-index: 2;
     background: #fff;
-    border: 2px solid #F4EEE6;
+    border: 2px solid #f4eee6;
     border-top: none;
     border-radius: 0 0 0 20px;
-    transition: right .4s ease-in-out;
+    transition: right 0.4s ease-in-out;
     box-shadow: -4px 4px 5px rgba(253, 204, 204, 0.3);
   }
 
   nav ul:before {
-    content: "";
+    content: '';
     position: absolute;
     left: -203%;
     top: 0;
-    border: 2px solid #F4EEE6;
+    border: 2px solid #f4eee6;
     border-left: none;
     border-bottom: none;
     border-radius: 0 20px 0 0;
@@ -174,7 +174,7 @@ nav .menu-icon.close {
   }
 
   nav ul {
-    width: 50%
+    width: 50%;
   }
 
   nav ul::before {

src/css/modern.css

@@ -237,9 +237,9 @@
         margin-bottom: 2.5rem;
     }
     @media (min-width: 1350px) {
-        .grid {
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-        }
+      .grid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      }
     }
     .team-photo {
         width: 100%;
@@ -261,4 +261,66 @@
     .team-title {
         font-size: 0.9rem;
     }
+    .level {
+        margin-bottom: 2.5rem;
+        box-shadow: 5px 5px 15px rgba(120, 120, 120, 0.1);
+    }
+    .level.silver, .level.major {
+        width: 45%;
+    }
+    .level .name {
+        text-align: center;
+        padding: 1rem 0 0.25rem 0;
+        margin: auto;
+        border-top-left-radius: .75rem;
+        border-top-right-radius: .75rem;
+    }
+
+    .corporate-sponsors {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        gap: 1rem;
+    }
+    .level.ruby, .level.gold {
+        flex: 1 1 100%;
+    }
+    .level.silver, .level.major {
+        flex: 1 1 100%;
+    }
+    @media (min-width: 1024px) {
+        .level.silver, .level.major {
+            flex: 1 1 auto;
+            /* flex-basis: calc(50% - 8px); */
+        }
+    }
+    .level.ruby .name {
+        background-color: var(--red);
+        color: var(--white);
+    }
+    .level.gold .name {
+        background-color: var(--yellow);
+    }
+    .level.silver .name {
+        background-color: var(--blue);
+        color: var(--white);
+    }
+    .level.major .name {
+        background-color: var(--green);
+        color: var(--white);
+    }
+    .level .bucket {
+        border-bottom-left-radius: .75rem;
+        border-bottom-right-radius: .75rem;
+        display: flex;
+        justify-content: space-evenly;
+        padding: 1rem;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        img {
+            height: 66px;
+            margin: 2.5rem;
+        }
+    }
 }