EDS Migration Updates - Nov 10, 2025

blocks/hero-trends/hero-trends.css

@@ -0,0 +1,113 @@
+.hero-trends {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0;
+  background-color: rgba(139, 254, 248, 0.5); /* Light cyan/turquoise accent */
+  padding: 80px 24px;
+  min-height: 600px;
+}
+
+.hero-trends-content {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  max-width: 600px;
+}
+
+.hero-trends-author {
+  font-family: var(--body-font-family);
+  font-size: 14.4px;
+  color: rgba(0, 0, 0, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.144px;
+  line-height: 18.72px;
+}
+
+.hero-trends-heading {
+  font-family: var(--heading-font-family);
+  font-size: 72px;
+  font-weight: 400;
+  line-height: 1.04;
+  letter-spacing: -0.904px;
+  margin: 0;
+  color: var(--text-color);
+}
+
+.hero-trends-description {
+  font-family: var(--body-font-family);
+  font-size: 32px;
+  line-height: 1.6;
+  color: var(--text-color);
+  margin: 0;
+}
+
+.hero-trends-cta-text {
+  font-family: var(--body-font-family);
+  font-size: 16px;
+  line-height: 1.6;
+  color: rgba(0, 0, 0, 0.6);
+  margin: 0;
+}
+
+.hero-trends-button {
+  align-self: flex-start;
+  margin-top: 8px;
+}
+
+.hero-trends-image {
+  width: 100%;
+  margin-top: 40px;
+}
+
+.hero-trends-image img {
+  width: 100%;
+  height: auto;
+  border-radius: 20px;
+  object-fit: cover;
+}
+
+/* Desktop layout - side by side */
+@media (width >= 900px) {
+  .hero-trends {
+    grid-template-columns: 1fr 576px;
+    gap: 96px;
+    padding: 80px 32px;
+    align-items: center;
+  }
+
+  .hero-trends-content {
+    padding-right: 0;
+  }
+
+  .hero-trends-heading {
+    font-size: 90.4px;
+    line-height: 94.02px;
+  }
+
+  .hero-trends-description {
+    font-size: 32px;
+    line-height: 51.2px;
+  }
+
+  .hero-trends-image {
+    margin-top: 0;
+    height: 100%;
+    min-height: 700px;
+  }
+
+  .hero-trends-image img {
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+/* Tablet adjustments */
+@media (width >= 600px) and (width < 900px) {
+  .hero-trends-heading {
+    font-size: 60px;
+  }
+
+  .hero-trends-description {
+    font-size: 24px;
+  }
+}

blocks/hero-trends/hero-trends.js

@@ -0,0 +1,87 @@
+export default function decorate(block) {
+  // Hero trends block structure:
+  // Row 1: Author byline (optional)
+  // Row 2: Heading
+  // Row 3: Description
+  // Row 4: CTA text (optional)
+  // Row 5: Button
+  // Row 6: Image
+
+  const rows = [...block.children];
+
+  // Create the content wrapper
+  const content = document.createElement('div');
+  content.className = 'hero-trends-content';
+
+  // Process author byline (Row 1)
+  if (rows[0]) {
+    const author = rows[0].querySelector('p');
+    if (author && author.textContent.trim()) {
+      const authorDiv = document.createElement('div');
+      authorDiv.className = 'hero-trends-author';
+      authorDiv.textContent = author.textContent;
+      content.appendChild(authorDiv);
+    }
+  }
+
+  // Process heading (Row 2)
+  if (rows[1]) {
+    const heading = rows[1].querySelector('h1, h2, h3, h4, h5, h6, p');
+    if (heading) {
+      const h1 = document.createElement('h1');
+      h1.className = 'hero-trends-heading';
+      h1.innerHTML = heading.innerHTML;
+      content.appendChild(h1);
+    }
+  }
+
+  // Process description (Row 3)
+  if (rows[2]) {
+    const desc = rows[2].querySelector('p');
+    if (desc) {
+      const descDiv = document.createElement('div');
+      descDiv.className = 'hero-trends-description';
+      descDiv.innerHTML = desc.innerHTML;
+      content.appendChild(descDiv);
+    }
+  }
+
+  // Process CTA text (Row 4)
+  if (rows[3]) {
+    const ctaText = rows[3].querySelector('p');
+    if (ctaText && ctaText.textContent.trim()) {
+      const ctaTextDiv = document.createElement('div');
+      ctaTextDiv.className = 'hero-trends-cta-text';
+      ctaTextDiv.innerHTML = ctaText.innerHTML;
+      content.appendChild(ctaTextDiv);
+    }
+  }
+
+  // Process button (Row 5)
+  if (rows[4]) {
+    const button = rows[4].querySelector('a, .button');
+    if (button) {
+      button.className = 'button hero-trends-button';
+      content.appendChild(button);
+    }
+  }
+
+  // Process image (Row 6)
+  let imageDiv = null;
+  if (rows[5]) {
+    const img = rows[5].querySelector('img');
+    if (img) {
+      imageDiv = document.createElement('div');
+      imageDiv.className = 'hero-trends-image';
+      imageDiv.appendChild(img);
+    }
+  }
+
+  // Clear the block and rebuild
+  block.innerHTML = '';
+  block.appendChild(content);
+
+  if (imageDiv) {
+    block.appendChild(imageDiv);
+  }
+}

styles/styles.css

@@ -229,8 +229,8 @@ button {
   line-height: 1.2;
   text-align: center;
   text-decoration: none;
-  background-color: transparent;
-  color: var(--text-color);
+  background-color: var(--dark-color);
+  color: var(--text-color-inverse);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;