css changes last min

Author: pballai

site/app/styles/sigma-dev-8020.css

@@ -1034,7 +1034,7 @@ figure {
 
 .g-section-padding-medium {
   padding-top: 5rem;
-  padding-bottom: 5rem;
+  /* padding-bottom: 5rem; */
 }
 
 .g-section-padding-small {

site/app/views/archive/index.html

@@ -97,49 +97,84 @@
             display: none;
             }
 
-            /* Card grid layout */
+            /* Header section - gradient background */
+            .section-hero {
+               background: linear-gradient(to bottom, rgba(243, 234, 252, 0.5), #FFFFFF) !important;
+               border-bottom: 1px solid #E5E7EB !important;
+               padding-top: 6rem !important;
+               padding-bottom: 2rem !important;
+            }
+
+            /* Responsive Grid System */
             #cards {
-               display: flex !important;
-               flex-wrap: wrap !important;
-               gap: 24px !important;
-               justify-content: flex-start !important;
+               display: grid !important;
+               grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
+               gap: 1rem !important;
             }
 
-            /* Header section - light background with grid pattern */
-            .section-hero {
-               background-color: #FFFFFF !important;
-               background-image: url('https://cdn.prod.website-files.com/666bbba4ff7240a20f4ccccf/685106838d461923ec10fc64_0ae8ba725281d3ce0757318ef80f6942_grid-fade.svg') !important;
-               border-bottom: 1px solid #E5E7EB !important;
+            @media (min-width: 640px) {
+            #cards {
+               grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+            }
+            }
+
+            @media (min-width: 768px) {
+            #cards {
+               grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+            }
+            }
+
+            @media (min-width: 1024px) {
+            #cards {
+               grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+            }
+            }
+
+            @media (min-width: 1280px) {
+            #cards {
+               grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+            }
+            }
+
+            @media (min-width: 1536px) {
+            #cards {
+               grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
+            }
             }
 
             /* Card styling updates */
             .codelab-card {
+               background-color: #FFFFFF !important;
                border-radius: 6px !important;
-               border: 1px solid #4D4344 !important;
-               /* display: flex !important; */
+               border: 1px solid #D1D5DB !important;
+               box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+               transition: all 0.2s ease !important;
+               overflow: hidden !important;
+               padding: 0 !important;
+               display: flex !important;
                flex-direction: column !important;
-               /* height: 200px !important;
-               width: 300px !important; */
-               max-width: 300px !important;
-               flex: 0 0 300px !important;
+               cursor: pointer !important;
+            }
+
+            .codelab-card:hover {
+               transform: translateY(-2px) !important;
+               box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
+               border-color: #2563EB !important;
             }
 
             /* Make card title a clickable link */
             .codelab-card .description {
+               color: #374151 !important;
+               font-size: 1rem !important;
+               line-height: 1.25rem !important;
+               padding: 1rem 1rem 0.5rem 1rem !important;
+               transition: color 0.2s ease !important;
+               min-height: 3.5rem !important;
                cursor: pointer !important;
-               transition: opacity 0.2s ease !important;
-               padding: 16px 16px 12px 16px !important;
-               text-align: left !important;
-               line-height: 1.3 !important;
-               font-size: 15px !important;
-               overflow: hidden !important;
-               display: -webkit-box !important;
-               -webkit-line-clamp: 4 !important;
-               -webkit-box-orient: vertical !important;
             }
 
             .codelab-card:hover .description {
-               opacity: 0.7 !important;
+               color: #2563EB !important;
             }
 
             /* Hide the old Start button */
@@ -150,14 +185,20 @@
             /* Category bar at bottom */
             .card-footer {
                margin-top: auto !important;
-               padding: 0 !important;
+               padding: 1rem !important;
+               display: flex !important;
+               align-items: flex-start !important;
+               justify-content: flex-start !important;
             }
 
             .card-footer .category-icon {
                display: none !important;
             }
 
-            /* Category bars with proper padding */
+            /* Category pills with proper styling */
+            .card-footer .category-bar,
+            .codelab-card .card-footer .category-bar,
+            .category-bar,
             .administration-bg,
             .aiapps-bg,
             .dataapps-bg,
@@ -170,17 +211,22 @@
             .tables-bg,
             .templates-bg,
             .use-cases-bg {
-               width: 100% !important;
-               padding: 1px 1px !important;
+               display: inline-block !important;
+               width: auto !important;
+               padding: 0.25rem 0.75rem !important;
                text-align: center !important;
                font-family: 'Lato', sans-serif !important;
-               font-weight: 700 !important;
-               font-size: 13px !important;
+               font-weight: 600 !important;
+               font-size: 0.75rem !important;
                text-transform: uppercase !important;
-               letter-spacing: 0.5px !important;
-               border-radius: 0 !important;
+               letter-spacing: 0.025em !important;
+               border-radius: 9999px !important;
+               -webkit-border-radius: 9999px !important;
+               -moz-border-radius: 9999px !important;
                margin: 0 !important;
-               display: block !important;
+               color: #FFFFFF !important;
+               border: none !important;
+               box-shadow: none !important;
                cursor: pointer !important;
             }
 
@@ -204,7 +250,7 @@
             .buttons-wrapper a.button-secondary:visited,
             .section-hero a.button-secondary,
             a.button-secondary.w-button {
-               background-color: transparent !important;
+               background-color: #d4ff00 !important;
                background-image: none !important;
                border: 1px solid #000 !important;
                color: #000 !important;