Contact blurb (#357)

cal-itp · Jul 15, 2024 · 4101448 · 4101448
2 parents 48eba62 + b469489
commit 4101448
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 75 deletions.
diff --git a/src/_includes/contact.html b/src/_includes/contact.html
@@ -0,0 +1,68 @@
+<section id="reachout" class="row justify-content-center">
+  <div class="col-12 col-md-8 col-lg-6">
+    <h2 class="text-center text-md-start d-block mb-3">The time is now—reach out to learn more</h2>
+  </div>
+</section>
+
+<svg class="position-absolute">
+  <clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox">
+    <path
+      d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"
+    ></path>
+  </clipPath>
+</svg>
+
+<svg class="position-absolute">
+  <clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox">
+    <path
+      d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"
+    ></path>
+  </clipPath>
+</svg>
+
+<section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
+  <div class="col-12 col-md-4">
+    <div class="background-calitp-blue pt-3 pt-md-5 px-3 text-center clipped-end">
+      <picture
+        ><img
+          src="images/connect.png"
+          alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
+          width="105"
+      /></picture>
+      <h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
+      <span class="text-white"
+        >Drop us a line at
+        <a rel="noreferrer" target="_blank" class="fw-bolder text-white" href="mailto:[email protected]">[email protected]</a>
+        to:</span
+      >
+      <ul class="text-center mb-4 ms-2 ms-md-4 ms-lg-5">
+        <li class="text-white text-start">get more information</li>
+        <li class="text-white text-start">request technical assistance</li>
+        <li class="text-white text-start">meet our Customer Success team</li>
+      </ul>
+    </div>
+  </div>
+  <div class="col-md-auto">&nbsp;</div>
+  <div class="col-12 col-md-4">
+    <div class="background-calitp-blue pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
+      <picture
+        ><img
+          src="images/stay-up-to-date.png"
+          alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
+          width="86"
+      /></picture>
+      <h3 class="text-white d-block my-4">Stay up to date</h3>
+      <p class="text-white text-start ps-lg-3">
+        See our latest milestones on
+        <a class="text-white fw-bolder" href="/press">our Press page</a>, and subscribe to the
+        <a
+          class="text-white fw-bolder"
+          href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
+          rel="noreferrer"
+          target="_blank"
+          >Caltrans Mobility Newsletter</a
+        >, a free biweekly resource with frequent Cal-ITP project updates.
+      </p>
+    </div>
+  </div>
+</section>
diff --git a/src/index.html b/src/index.html
@@ -130,69 +130,4 @@ <h2 class="text-center text-md-start mb-4">Helping California achieve critical g
     alt="Another decorative element with dots and dashes, meant to resemble a transit map" />
 </picture>
 
-<section id="reachout" class="row justify-content-center">
-  <div class="col-12 col-md-8 col-lg-6">
-    <h2 class="text-center text-md-start d-block mb-3">The time is now—reach out to help and to learn more</h2>
-    <p>This initiative is critical now more than ever.</p>
-    <p>
-      Cal-ITP is working with transportation agencies across the country to launch a program that can immediately improve the
-      ridership experience. Contact us to learn more.
-    </p>
-  </div>
-</section>
-
-<svg class="position-absolute">
-  <clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox"><path d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"></path></clipPath>
-</svg>
-
-<svg class="position-absolute">
-  <clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox"><path d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"></path></clipPath>
-</svg>
-
-<section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
-  <div class="col-12 col-md-4 clipped-shadow">
-    <div class="background-slate-5 pt-3 pt-md-5 px-3 text-center clipped-end">
-      <picture><img
-          src="images/connect.png"
-          alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
-          width="105" /></picture>
-      <h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
-      <span class="text-white">Drop us a line at
-        <a
-          rel="noreferrer"
-          target="_blank"
-          class="fw-bolder text-white"
-          href="mailto:[email protected]">[email protected]</a>
-        to:</span>
-      <ul class="text-center mb-4 ms-2 ms-md-4 ms-lg-5">
-        <li class="text-white text-start">request technical assistance</li>
-        <li class="text-white text-start">get more information</li>
-        <li class="text-white text-start">offer collaborative support</li>
-        <li class="text-white text-start">join our email list for updates</li>
-      </ul>
-    </div>
-  </div>
-  <div class="col-md-auto">
-    &nbsp;
-  </div>
-  <div class="col-12 col-md-4 clipped-shadow">
-    <div class="background-slate-5 pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
-      <picture><img
-          src="images/stay-up-to-date.png"
-          alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
-          width="86" /></picture>
-      <h3 class="text-white d-block my-4">Stay up to date</h3>
-      <p class="text-white text-start ps-lg-3">
-        See our latest milestones on
-        <a
-          class="text-white fw-bolder"
-          href="/press">our Press page</a>, and subscribe to the
-        <a
-          class="text-white fw-bolder"
-          href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
-          rel="noreferrer"
-          target="_blank">Caltrans Mobility Newsletter</a>, a free biweekly resource with frequent Cal-ITP project updates.
-      </p>
-    </div>
-  </div>
-</section>
+{% include contact.html %}
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
@@ -27,7 +27,6 @@ body {
   --calitp-purple-5: rgb(41, 34, 120); /* #292278 */
   --calitp-red-4: rgb(192, 63, 77); /* #c03f4d */
   --calitp-red-5: rgb(160, 46, 59); /* #a02e3b */
-  --calitp-slate-5: rgb(36, 61, 81); /* #243d51 */
   --calitp-font-weight-bold: 700;
 }
 
@@ -54,10 +53,6 @@ body {
   background-color: var(--calitp-purple-4);
 }
 
-.background-slate-5 {
-  background-color: var(--calitp-slate-5);
-}
-
 .btn {
   --bs-btn-border-width: 2px;
 }
@@ -357,10 +352,6 @@ footer a:hover {
   min-height: 100%;
 }
 
-.clipped-shadow {
-  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
-}
-
 .mb-28 {
   margin-bottom: 28px;
 }