design: careers-page - Add the Hero and Sections 2-5 patterns and the warm accent token (LSA-197)

functions.php

@@ -130,6 +130,7 @@ function ls_theme_setup() {
 	add_editor_style( 'assets/css/hero-split-form.css' );
 	add_editor_style( 'assets/css/scroll-timeline.css' );
 	add_editor_style( 'assets/css/details-card-grid.css' );
+	add_editor_style( 'assets/css/about-careers.css' );
 }
 add_action( 'after_setup_theme', 'ls_theme_setup' );
 

inc/animations.php

@@ -115,6 +115,7 @@ function ls_theme_get_bundle_render_markers() {
 		'legal-page'                => array( 'classes' => array( 'ls-page-hero', 'ls-legal-toc', 'ls-legal-body', 'ls-related-trust-grid' ) ),
 		'hero-split-form'           => array( 'classes' => array( 'ls-hero-form-intro' ) ),
 		'scroll-timeline'           => array( 'classes' => array( 'ls-scroll-timeline' ) ),
+		'about-careers'             => array( 'classes' => array( 'ls-careers-statement', 'ls-careers-goal', 'ls-bento' ) ),
 		'details-card-grid'         => array( 'classes' => array( 'ls-year-card' ) ),
 	);
 }
@@ -743,6 +744,15 @@ function ls_theme_get_effect_styles( $context = 'front' ) {
 				return is_page( 'about/history' );
 			},
 		),
+		'about-careers'             => array(
+			'handle'    => 'ls-theme-about-careers',
+			'path'      => 'assets/css/about-careers.css',
+			'contexts'  => array( 'front', 'editor' ),
+			// The About Careers page patterns: the statement measure and the bento reflow on small screens. The render-marker fallback loads it wherever the patterns render.
+			'condition' => static function () {
+				return is_page( 'about/careers' );
+			},
+		),
 	);
 
 	/**

patterns/hero/hero-split-photo.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Title: Hero - Split Photo
+ * Slug: ls-theme/hero-split-photo
+ * Categories: hero
+ * Block Types: core/pattern
+ * Description: A split hero for careers and team pages: breadcrumb trail across the top, then on the left (about 58%) a dot eyebrow, a large H1 with one brand-coloured word and a lede paragraph, and on the right (about 42%) a team photo cropped to the image's natural 3:2 ratio with a large rounded corner. The shared corner-glow class supplies the soft background glow. The photo is a core/image, so swap it for any image from the Media Library; the columns stack on mobile with the photo below the text. Falls back to core/columns and core/group because no semantic core block fits a split hero. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page; edit the eyebrow, heading, lede and photo after inserting.
+ * Keywords: hero, split, careers, team, photo, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_hero_photo_url = 'https://ls-agency.lightspeedwp.dev/wp-content/uploads/2024/06/lightspeed-team-photo-edited.png';
+?>
+<!-- wp:group {"align":"full","tagName":"section","className":"ls-corner-glow","style":{"border":{"bottom":{"color":"var:custom|color|border|card","style":"solid","width":"1px"}},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|80","right":"var:preset|spacing|30","bottom":"var:preset|spacing|80","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull ls-corner-glow" style="border-bottom-color:var(--wp--custom--color--border--card);border-bottom-style:solid;border-bottom-width:1px;margin-top:0;padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<?php if ( WP_Block_Type_Registry::get_instance()->is_registered( 'yoast-seo/breadcrumbs' ) ) : ?>
+		<!-- wp:yoast-seo/breadcrumbs {"className":"alignwide"} /-->
+		<?php endif; ?>
+
+		<!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+		<div class="wp-block-columns are-vertically-aligned-center">
+
+			<!-- wp:column {"verticalAlignment":"center","width":"58%","style":{"spacing":{"blockGap":"var:preset|spacing|30"}}} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:58%">
+
+				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+				<div class="wp-block-group">
+					<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+					<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+					<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'About – Careers', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:heading {"level":1,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|extrabold","letterSpacing":"var:custom|typography|letter-spacing|tight","lineHeight":"var:custom|line-height|heading-tight"}},"fontSize":"900"} -->
+				<h1 class="wp-block-heading has-900-font-size" style="font-weight:var(--wp--custom--typography--font-weight--extrabold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight);line-height:var(--wp--custom--line-height--heading-tight)"><?php echo esc_html__( 'Careers at', 'ls-theme' ); ?> <span style="color:var(--wp--custom--color--text--brand)"><?php echo esc_html__( 'LightSpeed', 'ls-theme' ); ?></span></h1>
+				<!-- /wp:heading -->
+
+				<!-- wp:group {"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+				<div class="wp-block-group">
+					<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+					<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We’re interested in thoughtful people who care about WordPress, design systems, maintainable work and the kind of collaboration that improves with clarity.', 'ls-theme' ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:column -->
+
+			<!-- wp:column {"verticalAlignment":"center","width":"42%"} -->
+			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:42%">
+				<!-- wp:image {"aspectRatio":"3/2","scale":"cover","width":"100%","sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":"var:preset|border-radius|400"}}} -->
+				<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( $ls_hero_photo_url ); ?>" alt="<?php echo esc_attr__( 'The LightSpeed team together', 'ls-theme' ); ?>" style="border-radius:var(--wp--preset--border-radius--400);aspect-ratio:3/2;object-fit:cover;width:100%"/></figure>
+				<!-- /wp:image -->
+			</div>
+			<!-- /wp:column -->
+		</div>
+		<!-- /wp:columns -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->

patterns/sections/intro-icon-card-trio.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * Title: Section - Intro Icon Card Trio
+ * Slug: ls-theme/intro-icon-card-trio
+ * Categories: featured
+ * Block Types: core/pattern
+ * Description: A "growth and learning" section on the page canvas: a dot eyebrow, H2 and two intro paragraphs above a row of three equal-height icon cards. Each card is a surface.card card with a brand Icon block well pinned to the top and an H3 and paragraph pinned to the bottom. The row is a core/group grid with a minimum column width, so the cards share one height (grid items stretch) and wrap to a single column on small screens without any custom CSS. Falls back to core/group because no semantic core block fits an icon card. Adapts between light and dark mode through surface, text, border and brand tokens. Authored for the About Careers page "Growth and Upskilling" section; edit the copy and icons after inserting.
+ * Keywords: cards, icons, trio, growth, careers, about, section
+ * Viewport Width: 1280
+ * Inserter: true
+ *
+ * @package ls-theme
+ */
+
+$ls_trio_cards = array(
+	array(
+		'icon'        => 'users-three',
+		'title'       => __( 'AI Study Groups & Hackathons', 'ls-theme' ),
+		'description' => __( 'Dedicated time to experiment with new AI capabilities, APIs, and prompt engineering.', 'ls-theme' ),
+	),
+	array(
+		'icon'        => 'graduation-cap',
+		'title'       => __( 'Mentorship', 'ls-theme' ),
+		'description' => __( 'We actively support junior developers through structured internships and senior mentorship.', 'ls-theme' ),
+	),
+	array(
+		'icon'        => 'book',
+		'title'       => __( 'Continuous Learning Allowances', 'ls-theme' ),
+		'description' => __( 'We provide resources to help you master GitHub, Copilot, and modern block theme practices.', 'ls-theme' ),
+	),
+);
+?>
+<!-- wp:group {"align":"full","tagName":"section","style":{"color":{"background":"var:custom|color|surface|canvas"},"spacing":{"margin":{"top":"0"},"padding":{"top":"var:preset|spacing|100","right":"var:preset|spacing|30","bottom":"var:preset|spacing|100","left":"var:preset|spacing|30"}}},"layout":{"type":"constrained"}} -->
+<section class="wp-block-group alignfull has-background" style="background-color:var(--wp--custom--color--surface--canvas);margin-top:0;padding-top:var(--wp--preset--spacing--100);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--100);padding-left:var(--wp--preset--spacing--30)">
+
+	<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|60"}},"layout":{"type":"default"}} -->
+	<div class="wp-block-group alignwide">
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained","justifyContent":"left"}} -->
+		<div class="wp-block-group">
+
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left","verticalAlignment":"center"}} -->
+			<div class="wp-block-group">
+				<!-- wp:icon {"icon":"lightspeed/dot","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"8px"}}} /-->
+
+				<!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|widest","fontWeight":"var:custom|typography|font-weight|semibold"},"color":{"text":"var(--wp--custom--color--text--brand)"}},"fontSize":"100"} -->
+				<p class="has-text-color has-100-font-size" style="color:var(--wp--custom--color--text--brand);font-weight:var(--wp--custom--typography--font-weight--semibold);letter-spacing:var(--wp--custom--typography--letter-spacing--widest);text-transform:uppercase"><?php echo esc_html__( 'Growth', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+
+			<!-- wp:heading {"level":2,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold"}},"fontSize":"600"} -->
+			<h2 class="wp-block-heading has-600-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold)"><?php echo esc_html__( 'Riding the AI Wave: Growth & Upskilling', 'ls-theme' ); ?></h2>
+			<!-- /wp:heading -->
+
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"constrained","contentSize":"720px","justifyContent":"left"}} -->
+			<div class="wp-block-group">
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'We believe that continuous growth is the key to innovation. We actively drive developer upskilling through internships, senior hires, and AI-powered workflows. Our culture ensures that our team evolves alongside the current of technology.', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"300"} -->
+				<p class="has-text-color has-300-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html__( 'When you join LightSpeed, you will be supported by cultural initiatives designed for professional development, including:', 'ls-theme' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"grid","columnCount":3,"minimumColumnWidth":"18rem"}} -->
+		<div class="wp-block-group">
+			<?php foreach ( $ls_trio_cards as $ls_trio_card ) : ?>
+			<!-- wp:group {"tagName":"article","style":{"color":{"background":"var:custom|color|surface|card"},"border":{"color":"var:custom|color|border|card","radius":"var:preset|border-radius|300","style":"solid","width":"1px"},"spacing":{"blockGap":"var:preset|spacing|10","padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between","flexWrap":"nowrap"}} -->
+			<article class="wp-block-group has-border-color has-background" style="border-color:var(--wp--custom--color--border--card);border-style:solid;border-width:1px;border-radius:var(--wp--preset--border-radius--300);background-color:var(--wp--custom--color--surface--card);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
+				<!-- wp:group {"className":"ls-icon-well-brand"} -->
+				<div class="wp-block-group ls-icon-well-brand">
+					<!-- wp:icon {"icon":"lightspeed/<?php echo esc_attr( $ls_trio_card['icon'] ); ?>","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--brand)"},"dimensions":{"width":"20px"}}} /-->
+				</div>
+				<!-- /wp:group -->
+
+				<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"default"}} -->
+				<div class="wp-block-group">
+					<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"var:custom|typography|font-weight|bold","letterSpacing":"var:custom|typography|letter-spacing|tight"}},"fontSize":"300"} -->
+					<h3 class="wp-block-heading has-300-font-size" style="font-weight:var(--wp--custom--typography--font-weight--bold);letter-spacing:var(--wp--custom--typography--letter-spacing--tight)"><?php echo esc_html( $ls_trio_card['title'] ); ?></h3>
+					<!-- /wp:heading -->
+
+					<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--custom--color--text--muted)"}},"fontSize":"200"} -->
+					<p class="has-text-color has-200-font-size" style="color:var(--wp--custom--color--text--muted)"><?php echo esc_html( $ls_trio_card['description'] ); ?></p>
+					<!-- /wp:paragraph -->
+				</div>
+				<!-- /wp:group -->
+			</article>
+			<!-- /wp:group -->
+			<?php endforeach; ?>
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</section>
+<!-- /wp:group -->