banner section updated

Author: hmillersarah

ims-gold.html

@@ -311,18 +311,14 @@ <h4>To enroll:</h4>
         </div>
       </section>
 
-      <!-- Banner  -->
-      <div class="banner-notification pure-g gold-cta">
+      <!-- =========================== Banner =========================== -->
+      <section class="blue-bg cta-banner cta-gold-banner">
         <div>
-          <img src="wp-content/Icon_EMail_White.svg" alt="Contact" />
-          <p>
-            For questions contact Amanda Stephens at:
-            <a href="mailto:amanda.stephens@ibm.com"
-              ><b><em>amanda.stephens@ibm.com</em></b></a
-            >
-          </p>
+          <img src="wp-content/Icon_EMail_White.svg" alt="" />
+          <h4>Have questions? Contact Amanda Stephens at:</h4>
+          <a href="mailto:amanda.stephens@ibm.com">amanda.stephens@ibm.com</a>
         </div>
-      </div>
+      </section>
     </main>
 
     <!-- Footer -->

index.html

@@ -87,7 +87,7 @@
     <main id="content" class="main-content">
 
       <!-- =========================== Banner =========================== -->
-       <section class="blue-bg home-banner">
+       <section class="blue-bg cta-banner">
         <div>
           <img src="wp-content/icons/icon_trial.svg" alt="" class="icon-invert">
           <a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a>

wp-includes/css/page.css

@@ -300,7 +300,7 @@ a {
 /* Content containers */
 /* -------------------------------------------------------- */
 /* Targets all sections after hero */
-.main-content section:not(:first-child) {
+.main-content section:not(:first-child):not(.cta-banner) {
   padding: 4em;
 } 
 
@@ -512,34 +512,43 @@ a {
 
 /* Banner */
 /* -------------------------------------------------------- */
-.home-banner {
+.cta-banner {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   padding: 1em 2em;
   background-color: #0072c3;
 }
 
-.home-banner div {
+.cta-banner div {
   display: flex;
   align-items: center;
   gap: 1em;
 }
 
-.home-banner > div:first-of-type {
+.cta-banner > div:first-of-type {
   margin-right: auto;
 }
 
-.home-banner a {
+.cta-banner h4 {
+  padding: 0;
+  margin: 0;
+}
+
+.cta-banner a {
   color: var(--white);
   font-weight: bold;
   font-size: var(--plex-20);
 }
 
-.home-banner .icon-sm {
+.cta-banner .icon-sm {
   margin-bottom: 0;
 }
 
+.cta-gold-banner {
+  padding: 1em 4em;
+}
+
 /* Custom styling */
 /* -------------------------------------------------------- */
 /* For links under headers */
@@ -610,7 +619,7 @@ a {
   }
 
   /* Decrease section padding for smaller screens */
-  .main-content section:not(:first-child) {
+  .main-content section:not(:first-child):not(.cta-banner) {
     padding: 2em;
   }