✨feature: Set up contact info block and map

views/blocks/contact-info/contact-info.css

@@ -1,8 +1,11 @@
 /* Contact Info block styles */
 
+main#maincontent {
+    padding: 0;
+}
+
 .contact-info {
     background: var(--color-white);
-    padding-block: clamp(3rem, 6vw, 4rem);
     position: relative;
 }
 
@@ -14,25 +17,27 @@
 }
 
 .contact-info__details {
+    padding: 5rem 0;
     max-width: 36rem;
-    padding-inline: clamp(1.5rem, 5vw, 3rem);
 }
 
 .contact-info__heading {
-    color: var(--color-cwc-blue-01);
-    font-family: var(--font-quincy, 'Quincy', serif);
-    font-size: clamp(2.5rem, 6vw, 4.5rem);
-    font-weight: 400;
-    line-height: 1.05;
-    margin: 0 0 1.5rem;
+    @apply text-cwc-blue-02 font-bold text-34px/9;
+
+    margin: 0 0 1rem;
+
+    span { @apply text-cwc-blue-01; }
+
+    em { @apply text-secondary; }
 }
 
 .contact-info__items {
     display: flex;
     flex-direction: column;
+    font-weight: 300;
     gap: 0.75rem;
     list-style: none;
-    margin: 0 0 2.5rem;
+    margin: 0 0 3rem;
     padding: 0;
 }
 
@@ -72,11 +77,49 @@ a.contact-info__value:hover {
 
 .contact-info__map {
     background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
-    border-radius: 0.5rem;
+    height: 100%;
     min-height: 24rem;
+    overflow: hidden;
     position: relative;
 }
 
+.contact-info__map .leaflet-container {
+    height: 100%;
+    isolation: isolate;
+    width: 100%;
+}
+
+.contact-info__map .leaflet-tile-pane {
+    filter: grayscale(0.35) saturate(0.7) brightness(1.05) contrast(0.98);
+}
+
+.contact-info__map::after {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, transparent);
+    content: '';
+    inset: 0;
+    mix-blend-mode: normal;
+    pointer-events: none;
+    position: absolute;
+    z-index: 410;
+}
+
+.contact-info__map .leaflet-control-attribution {
+    color: color-mix(in oklch, var(--color-cwc-blue-01) 45%, black);
+    font-size: 0.625rem;
+    opacity: 0.65;
+}
+
+.contact-info__leaflet-pin {
+    display: block;
+    filter: drop-shadow(0 0.2rem 0.45rem rgba(0, 0, 0, 0.08));
+}
+
+.contact-info__leaflet-pin svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
 @media (min-width: 1024px) {
     .contact-info__grid {
         grid-template-columns: 1fr 1fr;
@@ -112,11 +155,11 @@ a.contact-info__value:hover {
 .contact-info__form .gform_wrapper {
     margin: 0;
     max-width: none;
+
+    .gform_required_legend { display: none; }
 }
 
-.contact-info__form .gfield {
-    margin-bottom: 1.25rem;
-}
+.contact-info__form .gfield { margin-bottom: 1.25rem; }
 
 .contact-info__form .gfield_label {
     color: var(--color-cwc-blue-01);
@@ -143,12 +186,12 @@ a.contact-info__value:hover {
 .contact-info__form textarea,
 .contact-info__form select {
     background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, white);
-    border: 1px solid var(--color-cwc-blue-03);
-    border-radius: 0.375rem;
+    border: 2px solid var(--color-cwc-blue-03);
+    border-radius: 0.25rem;
     color: var(--color-dark);
     font-size: 1rem;
-    line-height: 1.5;
-    padding: 0.75rem 1rem;
+    line-height: 1;
+    padding: 0.25rem 0.5rem;
     width: 100%;
 }
 
@@ -165,6 +208,7 @@ a.contact-info__value:hover {
 
 .contact-info__form textarea {
     min-height: 10rem;
+    padding: 0.5rem;
     resize: vertical;
 }
 
@@ -175,8 +219,8 @@ a.contact-info__value:hover {
 .contact-info__form .gform_footer input[type="submit"],
 .contact-info__form .gform_footer button[type="submit"] {
     background: var(--background-image-button-gradient);
-    border: 3px solid var(--color-secondary);
-    border-radius: 1.25rem 0.25rem 1.25rem 0.25rem;
+    border: 3px solid transparent;
+    border-radius: 1.25rem 0.25rem;
     color: var(--color-white);
     cursor: pointer;
     font-size: 1.125rem;
@@ -187,12 +231,5 @@ a.contact-info__value:hover {
 
 .contact-info__form .gform_footer input[type="submit"]:hover,
 .contact-info__form .gform_footer button[type="submit"]:hover {
-    background: var(--color-secondary);
-    border-color: var(--color-secondary);
-}
-
-.contact-info__form .validation_message {
-    color: var(--color-danger);
-    font-style: italic;
-    margin-top: 0.25rem;
+    border: 3px solid #D24D32;
 }