From 701fc431db0c2e294256abd5de231f34bb509e4b Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 19 Dec 2025 10:02:15 -0600
Subject: [PATCH] Website: Update case study article template (#37438)

Changes:
- Updated the template page used for case study articles to match the
latest wireframes.
---
 .../styles/pages/articles/case-study.less     | 111 +++++++++---------
 website/views/pages/articles/case-study.ejs   |   4 +-
 2 files changed, 60 insertions(+), 55 deletions(-)

diff --git a/website/assets/styles/pages/articles/case-study.less b/website/assets/styles/pages/articles/case-study.less
index 47bc741f89..7341671c5f 100644
--- a/website/assets/styles/pages/articles/case-study.less
+++ b/website/assets/styles/pages/articles/case-study.less
@@ -21,27 +21,27 @@
   h3 {
     padding-top: 32px;
     color: #192147;
-
-    /* Title S (FKA h4) */
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
-    font-weight: 600;
-    line-height: 24px; /* 120% */
+    font-weight: 700;
+    line-height: 120%;
     margin-bottom: 24px;
   }
   h4 {
     color: #192147;
-
-    /* Title XS */
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
-    font-weight: 600;
-    line-height: 19.2px; /* 120% */
+    font-weight: 700;
+    line-height: 120%;
     margin-bottom: 24px;
   }
 
+  p {
+    line-height: 150%;
+  }
+
   [purpose='page-content'] {
     max-width: 1072px;
     margin-left: auto;
@@ -54,7 +54,7 @@
 
   [purpose='article-title-and-quote'] {
     max-width: 663px;
-    margin-bottom: 64px;
+    margin-bottom: 48px;
   }
   [purpose='article-title'] {
     h1 {
@@ -125,6 +125,9 @@
     border: 1px solid #E2E4EA;
     background: #FFF;
     padding: 0 32px 32px 32px;
+    p {
+      margin-bottom: 0px;
+    }
     ul {
       margin-bottom: 0px;
       list-style-type: none;
@@ -137,7 +140,7 @@
         padding-left: 40px;
         text-indent: -40px;
         margin-bottom: 0px;
-        padding-top: 16px;
+        padding-top: 8px;
         padding-bottom: 16px;
       }
       li::before {
@@ -201,22 +204,24 @@
   }
 
   [purpose='company-information'] {
+    h4 {
+      margin-bottom: 16px;
+    }
     p {
-      margin-bottom: 40px;
-      color: #515774;
 
-      /* Body MD (FKA p) */
+      color: #515774;
       font-family: Inter;
-      font-size: 16px;
+      font-size: 14px;
       font-style: normal;
-      font-weight: 400;
-      line-height: 24px; /* 150% */
     }
   }
   [purpose='case-study-links'] {
     display: flex;
     flex-direction: column;
     gap: 4px;
+    h4 {
+      padding-top: 16px;// "More Customer stories" link
+    }
   }
   [purpose='case-study-link'] {
     display: flex;
@@ -537,7 +542,7 @@
         padding-left: 40px;
         text-indent: -40px;
         margin-bottom: 0px;
-        padding-top: 12px;
+        padding-top: 8px;
         padding-bottom: 12px;
         &:last-of-type {
           margin-bottom: 0px;
@@ -677,35 +682,7 @@
       padding: 0 24px 16px 24px;
     }
     [purpose='article-content'] {
-      [purpose='attribution-quote'] {
-        text-align: center;
-        margin: 64px 0px;
-        &::before {
-          height: 0px;
-          background: none;
-          display: none;
-        }
-        &:last-of-type {
-          margin-bottom: 96px;
-        }
-        p:first-of-type {
-          font-style: italic;
-          line-height: 150%;
-          margin-bottom: 16px;
-          font-size: 16px;
-        }
-        p {
-          font-size: 12px;
-          margin-bottom: 4px;
-        }
-        strong {
-          color: #515774;
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 700;
-          line-height: 18px;
-        }
-      }
+
       [purpose='attribution-quote'] + h2 {
         margin-top: 128px;
       }
@@ -720,17 +697,14 @@
       }
     }
     [purpose='page-container'] {
-      padding: 48px 24px;
+      padding: 48px 32px;
 
     }
-    [purpose='page-content'] {
-      max-width: 560px;
-    }
     [purpose='case-study-quote'] {
       display: flex;
       align-items: center;
       padding-top: 48px;
-      padding-bottom: 64px;
+      padding-bottom: 48px;
       [purpose='quote-author-image'] {
         margin-right: 32px;
       }
@@ -754,6 +728,9 @@
       }
       p {
         margin-bottom: 0px;
+        &:nth-of-type(2) {
+          padding-top: 32px;
+        }
         color: #515774;
 
         /* Body MD (FKA p) */
@@ -784,6 +761,33 @@
         top: 4px;
         margin-bottom: 16px;
       }
+      [purpose='attribution-quote'] {
+        text-align: center;
+        margin: 64px 0px;
+        &::before {
+          left: calc(~'50% - 10.5px');
+        }
+        &:last-of-type {
+          margin-bottom: 96px;
+        }
+        p:first-of-type {
+          font-style: italic;
+          line-height: 150%;
+          margin-bottom: 16px;
+          font-size: 16px;
+        }
+        p {
+          font-size: 12px;
+          margin-bottom: 4px;
+        }
+        strong {
+          color: #515774;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 18px;
+        }
+      }
     }
 
   }
@@ -800,8 +804,9 @@
     [purpose='case-study-quote'] {
       display: flex;
       flex-direction: column;
-      align-items: center;
-      text-align: center;
+      align-items: flex-start;
+      padding-top: 32px;
+      padding-bottom: 32px;
       [purpose='quote-author-image'] {
         margin-right: 0px;
         margin-bottom: 16px;
diff --git a/website/views/pages/articles/case-study.ejs b/website/views/pages/articles/case-study.ejs
index e995153f1b..7010684af2 100644
--- a/website/views/pages/articles/case-study.ejs
+++ b/website/views/pages/articles/case-study.ejs
@@ -42,7 +42,7 @@
                 <%= thisPage.meta.companyInfoLineTwo %>
               </p>
             </div>
-            <div>
+            <div purpose="case-study-links">
               <h4>More customer stories</h4>
               <div purpose="case-study-links" >
                 <a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
@@ -111,7 +111,7 @@
       <div purpose="bottom-case-study-links" class="d-flex d-md-none flex-column">
         <div>
           <h4>More customer stories</h4>
-          <div purpose="case-study-links" >
+          <div purpose="case-study-links">
             <a href="/case-study/foursquare" purpose="case-study-link" v-if="thisPage.url !== '/case-study/foursquare'">
               <div purpose="link-image">
                 <img alt="Foursquare" src="/images/nav-icon-foursquare-40x40@2x.png">