dark theme :)

themes/agnes-hugo-theme/layouts/index.html

@@ -71,20 +71,20 @@
         <h2 id="pricing" class="section-title mt-0 text-center">Pricing</h2>
         {{ with index site.Params.pricing 0 }}
           <div class="pricing-table-inner">
-            <div class="font-color-dark pricing-table-header is-revealing">
+            <div class="font-color-light pricing-table-header is-revealing">
               <div class="pricing-table-title mt-12 mb-8">
                 {{ .PricingTitle }}
               </div>
               <div class="pricing-table-collection">
                 <div class="pricing-table-price">
-                  <span style="font-size: 16px;" class="font-color-dark"
+                  <span style="font-size: 16px;" class="font-color-light"
                     >{{ .PricingDesc }}</span
                   >
                 </div>
                 <a
                   href="{{ .ButtonURL }}"
                   style="margin-top:15px;"
-                  class="button button-primary-dark button-pricing"
+                  class="button button-primary-light button-pricing"
                   >{{ .ButtonText }}</a
                 >
               </div>
@@ -105,7 +105,7 @@
                       />
                     </svg>
                   </span>
-                  <span class="font-color-dark">{{ .Description }}</span>
+                  <span class="font-color-light">{{ .Description }}</span>
                 </li>
               {{ end }}
             </ul>

themes/agnes-hugo-theme/static/css/style.css

@@ -3,7 +3,7 @@
   --accent-1: linear-gradient(45deg, #0559b0, #be528a);
   --accent-2: linear-gradient(25deg, rgb(45, 85, 125), #0b2d4f);
   --accent-3: linear-gradient(45deg, #be528a, #762a51);
-  --font-color: #d2d2d2;
+  --font-color: #f1f0f0;
   --font-color-dark: #1f1f1f;
 }
 
@@ -11,6 +11,10 @@
   color: var(--font-color-dark) !important;
 }
 
+.font-color-light {
+  color: var(--font-color) !important;
+}
+
 html {
   line-height: 1.15;
   -ms-text-size-adjust: 100%;
@@ -255,6 +259,19 @@ p {
   width: 100%;
 }
 
+.contact-table {
+  position: relative;
+  display: flex;
+  background-color: #1f2b35;
+  padding: 25px;
+  height: 100%;
+  border-radius: 10px;
+  flex-direction: column;
+  gap: 25px;
+  width: 100%;
+  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);
+}
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -262,6 +279,17 @@ p {
   margin-bottom: 1.5rem;
 }
 
+.form-grid input,
+.form-grid textarea {
+  font-size: 16px;
+  width: 100%;
+  padding: 12px;
+  border-radius: 10px;
+  border: none;
+  background-color: #2a3945;
+  color: #fff;
+}
+
 .full-width {
   grid-column: span 2;
 }
@@ -269,7 +297,7 @@ p {
 .form-group label {
   font-size: 16px;
   font-weight: 700;
-  color: #1f2b35;
+  color: #fff;
 }
 
 .form-group {
@@ -381,7 +409,7 @@ p {
   background: var(--accent-2);
   color: #efefef !important;
   border: none;
-  border-radius: 4px;
+  border-radius: 10px;
   cursor: pointer;
   justify-content: center;
   padding: 16px 32px;
@@ -602,29 +630,11 @@ p {
   position: relative;
   display: flex;
   flex-direction: row;
-  background: #ffffff;
-  padding: 15px;
+  background: #2a3945;
+  padding: 25px;
   height: 100%;
-  border-radius: 5px;
-}
-
-.contact-table {
-  position: relative;
-  display: flex;
-  background: #ffffff;
-  padding: 15px;
-  height: 100%;
-  border-radius: 5px;
-  flex-direction: column;
-  gap: 25px;
-  width: 100%;
-}
-
-.contact-table input,
-.contact-table textarea {
-  width: 100%;
-  padding: 5px;
   border-radius: 10px;
+  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.45);
 }
 
 @media (max-width: 768px) {
@@ -676,7 +686,7 @@ p {
 }
 
 .pricing-table-title {
-  color: #1f2b35;
+  color: #ffffff;
   font-size: 20px;
   font-weight: 700;
 }