Work Archive Template: Audit & Fix (LS-2244)

assets/css/animations.css

@@ -406,6 +406,19 @@
   gap: var(--wp--preset--spacing--10);
 }
 
+/* Card - Work Project (Case Study) */
+.is-style-card-case-study {
+  --ls-card-case-study-border-active: var(--wp--custom--color--link--accent);
+  --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover);
+  --ls-card-case-study-lift: -4px;
+  transition: border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard), box-shadow var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--standard), transform var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--emphasised);
+}
+.is-style-card-case-study:hover, .is-style-card-case-study:focus-within {
+  border-color: var(--ls-card-case-study-border-active);
+  box-shadow: var(--ls-card-case-study-shadow-active);
+  transform: translateY(var(--ls-card-case-study-lift));
+}
+
 /* Card - Services */
 .is-style-card-services {
   --ls-card-services-border-rest: var(--wp--custom--color--border--card);
@@ -672,6 +685,7 @@
   .is-style-card-feature,
   .is-style-card-feature :is(.ls-card__icon-shell, .ls-card-feature__icon-shell),
   .is-style-card-category,
+  .is-style-card-case-study,
   .is-style-card-link-row,
   .is-style-card-services,
   .is-style-card-services::before,
@@ -687,6 +701,8 @@
   .is-style-card-feature:focus-within,
   .is-style-card-category:hover,
   .is-style-card-category:focus-within,
+  .is-style-card-case-study:hover,
+  .is-style-card-case-study:focus-within,
   .is-style-card-services:hover,
   .is-style-card-services:focus-within {
     transform: none;
@@ -2001,3 +2017,20 @@
   background-color: var(--wp--custom--color--card--platform--wordpress);
   color: var(--wp--custom--color--text--on-dark);
 }
+
+@media (max-width: 833.98px) {
+  .is-style-card-divider-both {
+    flex-wrap: wrap !important;
+  }
+  .is-style-card-divider-both > .wp-block-column {
+    flex-basis: 100% !important;
+  }
+  .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment {
+    border-inline-end: none !important;
+  }
+}
+@media (min-width: 601px) and (max-width: 800px) {
+  .work-selected-projects-grid .wp-block-post-template.is-layout-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+}

patterns/cards/work-engagement-stat.php

@@ -13,10 +13,10 @@
  */
 
 ?>
-<!-- wp:group {"tagName":"article","className":"is-style-stat-segment","style":{"layout":{"selfStretch":"fill"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
-<article class="wp-block-group is-style-stat-segment">
+<!-- wp:group {"tagName":"article","className":"is-style-stat-segment","style":{"border":{"right":{"color":"var(--wp--custom--color--border--card)","width":"1px","style":"solid"}}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->
+<article class="wp-block-group is-style-stat-segment" style="border-right-color:var(--wp--custom--color--border--card);border-right-width:1px;border-right-style:solid">
 
-	<!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"nowrap"}} -->
+	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","justifyContent":"space-between","flexWrap":"wrap"}} -->
 	<div class="wp-block-group">
 		<!-- wp:paragraph {"style":{"typography":{"fontFamily":"var:preset|font-family|monospace","textTransform":"uppercase","letterSpacing":"1.2px","fontWeight":"var:custom|typography|font-weight|bold"},"color":{"text":"var(--wp--custom--color--text--subtle)"}},"fontSize":"100"} -->
 		<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--subtle);font-family:var(--wp--preset--font-family--monospace);font-weight:var(--wp--custom--typography--font-weight--bold);letter-spacing:1.2px;text-transform:uppercase"><?php echo esc_html__( 'Subscribers', 'ls-theme' ); ?></p>
@@ -33,7 +33,7 @@
 	<!-- /wp:paragraph -->
 
 	<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"100"} -->
-	<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'Self-serve subscription accounts moved without billing interruption', 'ls-theme' ); ?></p>
+	<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'Self-serve accounts moved without disruption', 'ls-theme' ); ?></p>
 	<!-- /wp:paragraph -->
 </article>
 <!-- /wp:group -->

patterns/cards/work-next-steps-card.php

@@ -13,7 +13,7 @@
  */
 
 ?>
-<!-- wp:group {"tagName":"article","className":"is-style-card-link-row","layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"top","flexWrap":"wrap"}} -->
+<!-- wp:group {"tagName":"article","className":"is-style-card-link-row","layout":{"type":"flex","justifyContent":"space-between","verticalAlignment":"center","flexWrap":"wrap"}} -->
 <article class="wp-block-group is-style-card-link-row">
 
 	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|5"}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap"}} -->

patterns/hero/work-hero.php

@@ -31,7 +31,7 @@
 
 			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 			<div class="wp-block-group">
-				<!-- wp:outermost/icon-block {"iconName":"","className":"has-text-color","width":"8px","style":{"color":{"text":"var(--wp--custom--color--icon--background)"}}} -->
+				<!-- wp:outermost/icon-block {"iconName":"","width":"8px","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--icon--background)"}}} -->
 				<div class="wp-block-outermost-icon-block has-text-color"><div class="icon-container" style="color:var(--wp--custom--color--icon--background);width:8px;transform:rotate(0deg) scaleX(1) scaleY(1)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="12"></circle></svg></div></div>
 				<!-- /wp:outermost/icon-block -->