use brand colors

Author: earth-walker

website/src/assets/backgrounds/chevron.svg

@@ -14,7 +14,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Name:</label></div>
           <div>
             <input
-              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
               type="text"
               name="name"
               id="name"
@@ -24,7 +24,7 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Email:</label></div>
           <div>
             <input
-              class="my-3 p-3 w-full border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full border-2 border-bdt-blue rounded-2xl"
               type="text"
               name="email"
               id="email"
@@ -34,13 +34,13 @@ import wedge from "../assets/backgrounds/wedge.svg";
           <div><label for="name">Message:</label></div>
           <div>
             <textarea
-              class="my-3 p-3 w-full h-40 border-2 border-sky-500 rounded-2xl"
+              class="my-3 p-3 w-full h-40 border-2 border-bdt-blue rounded-2xl"
               name="message"
               id="message"
               placeholder="Your message"></textarea>
           </div>
           <input
-            class="px-6 py-2 pt-3 mt-3 font-serif bg-green-300 rounded-full text-xl cursor-pointer"
+            class="px-6 py-2 pt-3 mt-3 font-serif bg-bdt-green rounded-full text-xl cursor-pointer"
             type="submit"
             value="Submit"
             size=""

website/src/components/Contact.astro

@@ -1,4 +1,4 @@
-<footer class="py-12 text-center flex flex-col gap-3 bg-green-300">
+<footer class="py-12 text-center flex flex-col gap-3 bg-bdt-green">
   <a class="underline" href=`${import.meta.env.BASE_URL}/#top`>Return to top</a>
   <p class="text-2xl! font-serif mt-2">Benefit Decision Toolkit</p>
   <p>With ❤️ from Philly</p>

website/src/components/Footer.astro

@@ -4,7 +4,7 @@ import logo from "../assets/logos/bdt-logo-large-mono-dark.svg";
 import NavMenu from "./NavMenu.svelte";
 ---
 
-<header class="p-6 bg-sky-500 sm:static z-50">
+<header class="p-6 bg-bdt-blue sm:static z-50">
   <div
     class="flex flex-row justify-between items-baseline gap-6 max-w-[130ch] mx-auto"
   >

website/src/components/Header.astro

@@ -14,7 +14,7 @@ import { Content } from "../assets/copy/Hero.md";
     </div>
     <a href=`${import.meta.env.BASE_URL}/#projects`>
       <div
-        class="mt-6 w-fit px-6 py-2 pt-3 bg-white border-2 border-sky-500 rounded-full text-sky-700 font-serif text-xl"
+        class="mt-6 w-fit px-6 py-2 pt-3 bg-white border-2 border-bdt-blue rounded-full text-sky-700 font-serif text-xl"
       >
         <span>See what we can do</span>
       </div>

website/src/components/Hero.astro

@@ -2,7 +2,7 @@
 import { Content } from "../assets/copy/Overview.md";
 ---
 
-<section id="overview" class="bg-green-200">
+<section id="overview" class="bg-bdt-green">
   <div class="max-w-[85ch] mx-auto py-12 px-3 prose">
     <Content />
   </div>

website/src/components/Overview.astro

@@ -3,7 +3,7 @@ import { Content } from "../assets/copy/Process.md";
 const steps = ["Create a Screener", "Add Logic", "Deploy Your Tool"];
 ---
 
-<section id="process" class="border-b-2 border-sky-500">
+<section id="process" class="border-b-2 border-bdt-blue">
   <div class="max-w-[85ch] mx-auto py-12 px-3 flex flex-col gap-8 relative">
     <div class="prose max-w-[85ch]">
       <Content />

website/src/components/Process.astro

@@ -6,7 +6,7 @@ const projects = await getCollection("projects");
 
 <section
   id="projects"
-  class="bg-sky-500/50 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-multiply"
+  class="bg-bdt-blue/60 bg-[url(../assets/backgrounds/wavy.png)] bg-cover bg-blend-multiply"
 >
   <div class="max-w-[130ch] mx-auto py-12 px-3">
     <h2 class="font-bold font-serif text-2xl text-center mb-9">

website/src/components/Projects.astro

@@ -4,4 +4,6 @@
 @theme {
   --font-sans: "Inter", sans;
   --font-serif: "Ramaraja", serif;
+  --color-bdt-blue: #1a84d2;
+  --color-bdt-green: #cff7d3;
 }