/**
* SAP Migration Project Theme -- home page stylesheet.
*
* Every home-* (and .home-hero, .home-stats, etc.) rule for the front
* page / "Home" page template lives here, kept separate from
* assets/css/main.css so the home page's markup and styling stay in one
* place. Only enqueued on the home page -- see sapmig_enqueue_styles()
* in inc/enqueue/styles.php, gated by sapmig_is_home_page() in
* inc/helpers/template-functions.php.
*
* Depends on the shared design tokens declared in main.css's :root
* (--color-heading, --color-body-text, --color-eyebrow,
* --color-border-light, --color-btn-outline-border, --color-navy,
* --color-badge-icon-light-bg, --header-max-width,
* --header-padding-x*, --gradient-btn-start, --gradient-btn-end) --
* main.css is always enqueued sitewide, so those custom properties are
* already in scope wherever this file is loaded.
*
* Plain CSS, no build step -- edit this file directly. Organized into
* a shared-tokens section followed by one section per home-page
* component, in the same order they render on the page.
*/
/* ==========================================================================
Home Page
Shared tokens: --color-heading / --color-body-text / --color-eyebrow /
--color-border-light / --header-max-width / --header-padding-x* /
--gradient-btn-start / --gradient-btn-end already declared in :root
in main.css. Each home-* section follows the same container shape as
the service-* sections: max-width: var(--header-max-width);
margin-inline: auto; padding: 96px var(--header-padding-x) (64px
tablet / 48px mobile).
========================================================================== */
/* This stylesheet is only enqueued on the home page (see
sapmig_enqueue_styles() in inc/enqueue/styles.php), so setting the
body background here doesn't affect any other page. */
body {
background-color: #f8fafc;
}
/* Manual
line breaks an editor types into a heading/description
field (see sapmig_text_with_breaks() in
inc/helpers/template-functions.php) only apply on desktop -- below
the tablet breakpoint the break is hidden so text just wraps
naturally instead of breaking at a point sized for a wider screen. */
.home-break {
display: inline;
}
@media (max-width: 1024px) {
.home-break {
display: none;
}
}
/* Padding lives on the SECTION (not the __inner div below) so it only
ever acts as a narrow-viewport fallback gutter -- same split used on
the About/Contact pages' page-scoped stylesheets. Bundling padding
onto the same element that also carries `max-width` (the previous
setup here) permanently shrinks real content to
var(--header-max-width) minus 2x padding at every viewport, even ones
wide enough that the max-width cap + auto-centering alone would
already provide more side gutter than the padding ever would -- e.g.
at 1920px this left real content at only 1120px, not the intended
1280px, which is what made every section here look narrower / more
inset than the equivalent About/Contact page section. */
.home-hero,
.home-stats,
.home-decision,
.home-delay,
.home-stages,
.home-paths,
.home-framework,
.home-industry,
.home-outcomes,
.home-accel,
.home-why {
position: relative;
padding: 96px var(--header-padding-x);
}
@media (max-width: 1024px) {
.home-hero,
.home-stats,
.home-decision,
.home-delay,
.home-stages,
.home-paths,
.home-framework,
.home-industry,
.home-outcomes,
.home-accel,
.home-why {
padding: 64px var(--header-padding-x-tablet);
}
}
@media (max-width: 640px) {
.home-hero,
.home-stats,
.home-decision,
.home-delay,
.home-stages,
.home-paths,
.home-framework,
.home-industry,
.home-outcomes,
.home-accel,
.home-why {
padding: 48px var(--header-padding-x-mobile);
}
}
.home-hero__inner,
.home-stats__inner,
.home-decision__inner,
.home-delay__inner,
.home-stages__inner,
.home-paths__inner,
.home-framework__inner,
.home-industry__inner,
.home-outcomes__inner,
.home-accel__inner,
.home-why__inner {
position: relative;
max-width: var(--header-max-width);
margin-inline: auto;
}
/* Shared section header (badge + heading + subheading), centered. */
.home-hero__badge,
.home-stats__badge,
.home-decision__badge,
.home-delay__badge,
.home-stages__badge,
.home-paths__badge,
.home-framework__badge,
.home-industry__badge,
.home-outcomes__badge,
.home-accel__badge,
.home-why__badge {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gradient-btn-start);
}
.home-stats__header,
.home-decision__header,
.home-delay__header,
.home-stages__header,
.home-paths__header,
.home-framework__header,
.home-industry__header,
.home-outcomes__header {
margin: 0 auto 56px;
text-align: center;
}
.home-accel__header,
.home-why__header {
margin: 0 auto 48px;
text-align: center;
}
.home-stats__heading,
.home-decision__heading,
.home-delay__heading,
.home-stages__heading,
.home-paths__heading,
.home-framework__heading,
.home-industry__heading,
.home-outcomes__heading,
.home-accel__heading,
.home-why__heading {
margin: 0 0 16px;
font-size: 36px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--color-heading);
}
@media (max-width: 1024px) {
.home-stats__heading,
.home-decision__heading,
.home-delay__heading,
.home-stages__heading,
.home-paths__heading,
.home-framework__heading,
.home-industry__heading,
.home-outcomes__heading,
.home-accel__heading,
.home-why__heading {
font-size: 30px;
}
}
@media (max-width: 640px) {
.home-stats__heading,
.home-decision__heading,
.home-delay__heading,
.home-stages__heading,
.home-paths__heading,
.home-framework__heading,
.home-industry__heading,
.home-outcomes__heading,
.home-accel__heading,
.home-why__heading {
font-size: 30px;
}
}
.home-stats__subheading,
.home-decision__subheading,
.home-delay__subheading,
.home-stages__subheading,
.home-paths__subheading,
.home-framework__subheading,
.home-industry__subheading,
.home-outcomes__subheading {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: var(--color-body-text);
}
/* Shared pill CTA buttons (mirrors .service-hero__btn). */
.home-hero__btn,
.home-decision__cta,
.home-paths__btn,
.home-framework__cta,
.home-industry__cta,
.home-accel__cta,
.home-why__cta,
.home-banner__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 30px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.home-hero__btn--primary,
.home-paths__btn--primary,
.home-banner__btn--solid {
color: #fff;
border: none;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}
.home-hero__btn--primary:hover,
.home-hero__btn--primary:focus-visible,
.home-paths__btn--primary:hover,
.home-paths__btn--primary:focus-visible,
.home-banner__btn--solid:hover,
.home-banner__btn--solid:focus-visible {
opacity: 0.92;
}
.home-hero__btn--secondary,
.home-paths__btn--secondary {
color: var(--color-heading);
background-color: #fff;
border: 1px solid var(--color-btn-outline-border);
}
.home-hero__btn--secondary:hover,
.home-hero__btn--secondary:focus-visible,
.home-paths__btn--secondary:hover,
.home-paths__btn--secondary:focus-visible {
border-color: var(--color-navy);
}
.home-framework__cta,
.home-industry__cta,
.home-accel__cta,
.home-why__cta {
color: #fff;
border: none;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}
.home-framework__cta:hover,
.home-framework__cta:focus-visible,
.home-industry__cta:hover,
.home-industry__cta:focus-visible,
.home-accel__cta:hover,
.home-accel__cta:focus-visible,
.home-why__cta:hover,
.home-why__cta:focus-visible {
opacity: 0.92;
}
.home-decision__cta {
border: none;
border-radius: 999px;
color: #fff;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}
.home-decision__cta:hover,
.home-decision__cta:focus-visible {
opacity: 0.92;
}
.home-decision__cta-icon,
.home-framework__cta-icon,
.home-industry__cta-icon,
.home-accel__cta-icon,
.home-banner__btn-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.home-decision__cta-icon svg,
.home-framework__cta-icon svg,
.home-industry__cta-icon svg,
.home-banner__btn-icon svg {
width: 100%;
height: 100%;
}
.home-why__cta {
margin-top: 40px;
}
/* Centered as its own full-width row below .home-decision__content
(both the photo and the concerns list are left-aligned, so this
couldn't just inherit centering from either column). */
.home-decision__cta {
display: flex;
width: fit-content;
margin: 50px auto 0;
padding: 16px 30px;
}
/* Icon in a white circle, matching the other gradient CTA buttons on
the page (see .home-framework__cta-icon) instead of a bare arrow. */
.home-decision__cta-icon {
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-decision__cta-icon svg,
.home-decision__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* --------------------------------------------------------------------
Hero (auto-rotating slider)
-------------------------------------------------------------------- */
.home-hero {
overflow: hidden;
text-align: center;
background-color: #fff;
/* Pulled up to sit behind the floating header (16px top gap + 80px
pill height = 96px -- see .site-header in main.css) instead of
starting below it, so the background photo/glow shows through
around the header pill. .home-hero__inner's extra padding-top
below puts the actual heading back where it visually belongs. */
margin-top: -96px;
}
@media (max-width: 640px) {
.home-hero {
margin-top: -88px;
}
}
/* Optional shared background photo, at a fixed low opacity so it reads
as texture behind the slides rather than competing with the heading
text. Same image for every slide (see template-parts/home/hero.php). */
.home-hero__bg-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
}
/* Overrides just the top/bottom of .home-hero's own padding (set by the
shared section rule above) for the extra clearance the floating
header + its -96px pull-up need -- left/right stay whatever the
shared rule already set, unaffected by this. Lives on the section
now, not .home-hero__inner, matching where padding lives for every
other home section after the restructure above. */
.home-hero {
padding-top: 224px;
padding-bottom: 96px;
}
@media (max-width: 1024px) {
.home-hero {
padding-top: 184px;
padding-bottom: 64px;
}
}
@media (max-width: 640px) {
.home-hero {
padding-top: 152px;
padding-bottom: 48px;
}
}
.home-hero__slides {
display: grid;
}
.home-hero__slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease;
}
.home-hero__slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
}
.home-hero__heading {
margin: 0 0 24px;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 64px;
line-height: 80px;
letter-spacing: -1.5px;
text-align: center;
color: #0b1733;
}
@media (max-width: 1024px) {
.home-hero__heading {
font-size: 40px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-hero__heading {
font-size: 40px;
line-height: 1.25;
}
}
.home-hero__description {
margin: 0 auto 40px;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: normal;
text-align: center;
color: #6b7280;
}
.home-hero__buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 36px;
}
.home-hero__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.home-hero__dot {
width: 9px;
height: 9px;
padding: 0;
border: none;
border-radius: 999px;
background-color: var(--color-btn-outline-border);
cursor: pointer;
transition: width 0.2s ease, background-color 0.2s ease;
}
.home-hero__dot.is-active {
width: 26px;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}
/* Buttons -- typography and exact sizing from the design spec. Deliberately
more specific than the shared ".home-hero__btn, .home-decision__cta, ..."
rule earlier in this file so these values win for the hero only, without
changing every other section's CTA buttons. */
.home-hero__btn {
width: auto;
height: 42px;
padding: 16px 30px;
gap: 10px;
border-radius: 999px;
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: normal;
white-space: nowrap;
}
.home-hero__btn--secondary {
border: 1px solid #004195;
color: #004195;
background-color: #fff;
}
.home-hero__btn--secondary:hover,
.home-hero__btn--secondary:focus-visible {
background-color: #f2f8ff;
border-color: #004195;
}
.home-hero__btn--primary {
color: #fff;
}
.home-hero__btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
flex-shrink: 0;
}
.home-hero__btn-icon svg,
.home-hero__btn-icon img {
width: auto;
height: auto;
object-fit: contain;
}
.home-hero__btn--secondary .home-hero__btn-icon {
color: #004195;
}
.home-hero__btn--primary .home-hero__btn-icon {
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
/* --------------------------------------------------------------------
Enterprise Proof stats bar
-------------------------------------------------------------------- */
.home-stats {
border-width: 2px 0;
border-style: solid;
border-color: #e6f7fe;
background-color: #f8fafc;
background-image: radial-gradient(rgba(11, 77, 162, 0.14) 1px, transparent 1.5px);
background-size: 22px 22px;
}
.home-stats__badge,
.home-stats__heading,
.home-stats__subheading {
text-align: center;
}
/* Overrides on top of the shared badge/heading/subheading rules further
up this file -- scoped to this section only, matching the hero's
heading/description colors (see .home-hero__heading/__description)
and turning the plain eyebrow text into a proper pill badge. */
.home-stats__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-stats__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-stats__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-stats__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-stats__subheading {
margin-bottom: 40px;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
.home-stats__grid {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
gap: 30px;
}
.home-stats__stat {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 0;
min-width: 0;
max-width: 360px;
text-align: center;
padding: 8px 16px;
}
@media (max-width: 640px) {
.home-stats__grid {
flex-wrap: wrap;
}
.home-stats__stat {
flex: 1 1 100%;
max-width: 100%;
}
}
.home-stats__stat-value {
margin: 0 0 12px;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 60px;
line-height: 1;
letter-spacing: 0;
text-align: center;
color: #004195;
}
@media (max-width: 1024px) {
.home-stats__stat-value {
font-size: 44px;
}
}
@media (max-width: 640px) {
.home-stats__stat-value {
font-size: 34px;
}
}
.home-stats__stat-label {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
text-align: center;
color: #64748b;
}
.home-stats__divider {
/* No fixed height -- align-items: stretch on .home-stats__grid (above)
makes this match the tallest stat in the row automatically, instead
of a hardcoded height that falls short of taller/wrapped labels. */
align-self: stretch;
width: 2px;
background-color: #01aef04d;
}
@media (max-width: 768px) {
.home-stats__divider {
display: none;
}
}
/* --------------------------------------------------------------------
The Decision
-------------------------------------------------------------------- */
.home-decision {
background-color: #fff;
}
.home-decision__header {
margin: 0 auto 56px;
text-align: center;
}
/* Same pill badge style as the Enterprise Proof section above (see
.home-stats__badge) for consistency between the two sections. */
.home-decision__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
/* Heading/subheading typography matches the Enterprise Proof section
(see .home-stats__heading/__subheading) for consistency between the
two sections. */
.home-decision__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-decision__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-decision__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-decision__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
.home-decision__content {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: 56px;
}
@media (max-width: 1024px) {
.home-decision__content {
grid-template-columns: 1fr;
gap: 40px;
}
}
.home-decision__image {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
border-radius: 20px;
}
.home-decision__image--placeholder {
background-color: #e2e8f0;
}
.home-decision__list-heading {
margin: 0 0 40px;
font-size: 24px;
font-weight: 700;
color: var(--color-heading);
}
.home-decision__list {
display: flex;
flex-direction: column;
gap: 40px;
margin: 0 0 36px;
padding: 0;
list-style: none;
}
.home-decision__item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.home-decision__item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
color: var(--gradient-btn-start);
background-color: #e6f7fe;
}
.home-decision__item-icon svg {
width: 24px;
height: 24px;
}
.home-decision__item-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.home-decision__item-title {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
.home-decision__item-description {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
/* --------------------------------------------------------------------
Cost of Delay (dark)
-------------------------------------------------------------------- */
.home-delay {
background-color: #0b1733;
background-image: radial-gradient(circle at 15% 0%, rgba(1, 174, 240, 0.16) 0%, rgba(1, 174, 240, 0) 55%);
}
/* Uploaded Background Image replaces the above via an inline style
(see template-parts/home/delay.php) since the dark scrim has to layer
on top of that specific photo; this just adds the sizing the inline
style doesn't set. */
.home-delay--has-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.home-delay__header {
margin-bottom: 60px;
}
.home-delay__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #7db8f5;
}
.home-delay__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #fff;
}
@media (max-width: 1024px) {
.home-delay__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-delay__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-delay__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.8);
}
/* auto-fit (not a fixed repeat(N, ...)) so however many cards are
actually visible (the section currently ships a 5th "Shrinking
Talent and Skills Pool" card that defaults to hidden -- see
delay.php) fill the row evenly: with 4 visible cards this renders 4
equal columns exactly as before, and turning the 5th card on grows
it to 5 equal columns, with no manual CSS change required either
way. */
.home-delay__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
@media (max-width: 1024px) {
.home-delay__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.home-delay__grid {
grid-template-columns: 1fr;
}
}
.home-delay__card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 20px;
border: 1px solid rgba(1, 174, 240, 0.1);
border-radius: 16px;
background-color: rgba(1, 174, 240, 0.05);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}
.home-delay__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
color: #01aef0;
}
.home-delay__card-icon svg,
.home-delay__card-icon img {
width: 40px;
height: 40px;
object-fit: contain;
}
.home-delay__card-title {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #fff;
}
.home-delay__card-description {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.6);
}
/* --------------------------------------------------------------------
Three Stages
-------------------------------------------------------------------- */
.home-stages {
background-color: #f8fafc;
}
/* Same bordered pill badge as Enterprise Proof / The Decision / Cost of
Delay -- see .home-stats__badge, .home-decision__badge. */
.home-stages__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-stages__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-stages__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-stages__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-stages__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #6b7a99;
}
/* auto-fit (not a fixed repeat(N, ...)) so however many stage cards are
actually visible (the section currently ships a 4th "Innovate" card
that defaults to hidden -- see stages.php) fill the row evenly: with
3 visible cards this renders 3 equal columns exactly as before, and
turning the 4th card on grows it to 4 equal columns, with no manual
CSS change required either way. Below 900px this collapses to a
single column regardless of count (see the media query below). */
.home-stages__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 60px 24px;
}
@media (max-width: 900px) {
.home-stages__grid {
grid-template-columns: 1fr;
}
}
.home-stages__card {
display: flex;
flex-direction: column;
gap: 24px;
padding: 24px;
border: 1px solid #e6ecf5;
border-radius: 16px;
background-color: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-stages__card:hover {
border-color: var(--gradient-btn-end);
box-shadow: 0 12px 32px rgba(11, 77, 162, 0.1);
}
.home-stages__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
color: var(--gradient-btn-start);
background-color: #e6f7fe;
}
.home-stages__card-icon svg,
.home-stages__card-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.home-stages__card-title {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0d1b2e;
}
.home-stages__card-description {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
.home-stages__card-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Geist', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 0;
color: #004195;
text-decoration: none;
}
.home-stages__card-link:hover {
text-decoration: none;
}
.home-stages__card-link-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.home-stages__card-link-icon svg,
.home-stages__card-link-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* --------------------------------------------------------------------
Migration Paths
-------------------------------------------------------------------- */
.home-paths {
background-color: #eef6ff;
}
/* Same bordered pill badge as the sections above (see .home-stats__badge). */
.home-paths__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-paths__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-paths__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-paths__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-paths__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
.home-paths__content {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
align-items: stretch;
gap: 24px;
margin-bottom: 40px;
}
@media (max-width: 1024px) {
.home-paths__content {
grid-template-columns: 1fr;
}
}
.home-paths__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 640px) {
.home-paths__grid {
grid-template-columns: 1fr;
}
}
.home-paths__card {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px 24px;
border: 1px solid #e6ecf5;
border-radius: 16px;
background-color: #fff;
}
/* Rounded accent bar along the bottom edge (not a plain border). */
.home-paths__card::after {
content: '';
position: absolute;
left: 24px;
right: 24px;
bottom: 0;
height: 4px;
border-radius: 100px 100px 0 0;
background-color: rgba(1, 174, 240, 0.25);
}
.home-paths__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
color: var(--gradient-btn-start);
background-color: #e6f7fe;
}
.home-paths__card-icon svg,
.home-paths__card-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.home-paths__card-title {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
.home-paths__card-description {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
/* An editor can bold any word/phrase directly in the Description field
now (via sapmig_text_with_breaks() allowing real / through --
see inc/helpers/template-functions.php), not just a fixed "Best for:"
label the template used to search for and wrap itself. Styled here so
whatever gets bolded still reads as a highlighted label against the
muted body copy, matching the previous fixed-label look. */
.home-paths__card-description strong,
.home-paths__card-description b {
color: var(--color-heading);
}
.home-paths__media {
position: relative;
}
.home-paths__image {
display: block;
width: 100%;
height: 100%;
min-height: 260px;
object-fit: cover;
border-radius: 18px;
}
.home-paths__image--placeholder {
background-color: #d7e2ef;
}
.home-paths__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
/* Same 6/6/6/16 padding + icon-circle treatment as every other button on
the page (see .home-hero__btn--primary .home-hero__btn-icon). */
.home-paths__btn {
padding: 16px 30px;
}
.home-paths__btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.home-paths__btn-icon svg,
.home-paths__btn-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
.home-paths__btn--primary .home-paths__btn-icon {
color: #004195;
background-color: #fff;
}
.home-paths__btn--secondary .home-paths__btn-icon {
color: #004195;
background-color: #e6f7fe;
}
/* --------------------------------------------------------------------
Data Migration + closing CTA banners (shared .home-banner)
-------------------------------------------------------------------- */
/* width: min(...) caps this floating card at the sitewide 1280px
content width (it had no cap before, so it grew wider than every
other section's container as the viewport got wider) while still
keeping at least a --header-padding-x gutter on narrower viewports,
centered via margin-inline: auto. */
.home-banner {
position: relative;
width: min(var(--header-max-width), calc(100% - (var(--header-padding-x) * 2)));
margin: 64px auto;
border-radius: 26px;
overflow: hidden;
background: radial-gradient(circle at 85% 0%, #0d3f7a 0%, #0a1e3d 55%, #060f1f 100%);
}
.home-banner--datamig {
background-color: #0b1733;
background-image: radial-gradient(circle at 85% 15%, rgba(1, 174, 240, 0.3) 0%, rgba(1, 174, 240, 0) 60%);
}
/* Uploaded Background Image replaces the above via an inline style
(see template-parts/home/data-migration.php) since the dark scrim has
to layer on top of that specific photo; this just adds the sizing the
inline style doesn't set. */
.home-banner--has-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 1024px) {
.home-banner {
width: min(var(--header-max-width), calc(100% - (var(--header-padding-x-tablet) * 2)));
margin: 48px auto;
}
}
@media (max-width: 640px) {
.home-banner {
width: min(var(--header-max-width), calc(100% - (var(--header-padding-x-mobile) * 2)));
margin: 36px auto;
border-radius: 20px;
}
}
.home-banner__inner {
position: relative;
max-width: var(--header-max-width);
margin-inline: auto;
padding: 80px;
}
@media (max-width: 1024px) {
.home-banner__inner {
padding: 56px 40px;
}
}
@media (max-width: 640px) {
.home-banner__inner {
padding: 44px 24px;
}
}
.home-banner__inner--centered {
text-align: center;
padding-top: 88px;
padding-bottom: 88px;
}
.home-banner__badge {
display: block;
width: fit-content;
margin: 0 0 16px;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #7db8f5;
}
.home-banner__inner--centered .home-banner__badge {
margin-inline: auto;
}
.home-banner__heading {
margin: 0 0 20px;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #fff;
}
.home-banner__inner--centered .home-banner__heading {
margin-inline: auto;
}
@media (max-width: 1024px) {
.home-banner__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-banner__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-banner__description {
margin: 0 0 32px;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.6);
}
.home-banner__inner--centered .home-banner__description {
margin-inline: auto;
}
.home-banner__buttons {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.home-banner__btn--outline {
color: #fff;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.4);
}
.home-banner__btn--outline:hover,
.home-banner__btn--outline:focus-visible {
border-color: #fff;
}
/* Data Migration banner's own (unmodified) .home-banner__btn -- white
border on the section's own dark background, white icon circle with a
dark arrow. Scoped to this section only so it doesn't affect the
closing CTA banner's --solid/--outline buttons. */
.home-banner--datamig .home-banner__btn {
padding: 16px 30px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
}
.home-banner--datamig .home-banner__btn:hover,
.home-banner--datamig .home-banner__btn:focus-visible {
background-color: rgba(255, 255, 255, 0.08);
}
/* Closing CTA banner's two buttons -- same 6/6/6/16 padding and white
icon circle as the Data Migration banner's button, but only the
padding/icon are shared here (not color/background/border), since
this section has both a solid (gradient) and an outline button that
each keep their own base look. */
.home-banner--finalcta .home-banner__btn {
padding: 6px 6px 6px 16px;
}
.home-banner--datamig .home-banner__btn-icon,
.home-banner--finalcta .home-banner__btn-icon {
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
color: #0b1733;
}
.home-banner--datamig .home-banner__btn-icon svg,
.home-banner--datamig .home-banner__btn-icon img,
.home-banner--finalcta .home-banner__btn-icon svg,
.home-banner--finalcta .home-banner__btn-icon img {
width: 14px;
height: 14px;
object-fit: contain;
}
.home-banner__decor {
position: absolute;
pointer-events: none;
color: rgba(255, 255, 255, 0.14);
}
.home-banner__decor--cloud {
right: 0;
bottom: 32px;
width: 304px;
height: 191px;
}
@media (max-width: 900px) {
.home-banner__decor--cloud {
width: 220px;
height: 138px;
bottom: 16px;
}
}
@media (max-width: 640px) {
.home-banner__decor--cloud {
width: 150px;
height: 94px;
opacity: 0.6;
}
}
.home-banner__decor--cloud svg {
width: 100%;
height: 100%;
}
.home-banner__decor--image {
right: 0;
bottom: 32px;
width: min(304px, 40%);
height: 191px;
max-height: 100%;
object-fit: cover;
color: transparent;
}
@media (max-width: 900px) {
.home-banner__decor--image {
width: min(220px, 38%);
height: 138px;
bottom: 16px;
}
}
@media (max-width: 640px) {
.home-banner__decor--image {
width: min(150px, 32%);
height: 94px;
opacity: 0.6;
}
}
/* --------------------------------------------------------------------
Transformation Framework (circular diagram)
-------------------------------------------------------------------- */
.home-framework {
background-color: #fff;
}
/* Same bordered pill badge as the other sections (see .home-stats__badge),
and the shared 48/58 heading + 18/28 subheading typography. */
.home-framework__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-framework__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-framework__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-framework__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-framework__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
.home-framework__circle {
position: relative;
width: min(620px, 100%);
aspect-ratio: 1 / 1;
/* Extra top/bottom margin (vs. the 48px other sections use) reserves
room for the top/bottom stage's title+description, which sit
outside the ring and would otherwise overlap the section header
above / the CTA button below -- see .home-framework__nodes. Note
this margin -- not .home-framework__header's own margin-bottom --
is what actually controls the gap above the ring: adjacent block
margins collapse to the larger of the two, and this one is bigger. */
margin: 150px auto 100px;
}
.home-framework__ring {
position: absolute;
inset: 60px;
border-radius: 50%;
border: 2px solid rgba(1, 174, 240, 0.25);
background: radial-gradient(circle at 50% 50%, rgba(1, 174, 240, 0.08) 0%, rgba(0, 65, 149, 0.02) 55%, rgba(0, 65, 149, 0) 100%);
}
/* Positions the 8 stage nodes' (x%, y%) anchors against the same inset
box the ring is drawn in (not the outer .home-framework__circle box),
so each stage's icon lands exactly on the ring line instead of on a
larger, uninset circle floating outside it. */
.home-framework__nodes {
position: absolute;
inset: 60px;
}
/* No separate solid chip behind the label -- the soft radial glow
already comes from .home-framework__ring's own background, so this
just centers the "Business Case" text on top of it. */
.home-framework__center {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 148px;
padding: 12px;
text-align: center;
transform: translate(-50%, -50%);
}
.home-framework__center span {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
/* Each node is a zero-size anchor placed exactly on the ring at
(--sapmig-x, --sapmig-y). Its icon and text are positioned
independently off that single point rather than as a centered block,
so the icon always sits exactly on the ring line and the title/
description always sit fully outside the ring (on the side facing
away from the center) instead of the ring cutting through the text. */
.home-framework__node {
position: absolute;
top: var(--sapmig-y);
left: var(--sapmig-x);
width: 0;
height: 0;
}
/* Every stage icon uses the same plain white circle -- no highlighted
"active" variant -- with a faint navy border plus a normal (not
colored/ring-shaped) drop shadow, matching the Figma spec. */
.home-framework__node-icon {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(0, 65, 149, 0.1);
color: #004195;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03), 0 4px 24px rgba(0, 65, 149, 0.09);
transition: background 0.2s ease, color 0.2s ease;
}
.home-framework__node-icon:hover {
color: #fff;
background: linear-gradient(145deg, #004195 0%, #01aef0 100%);
}
.home-framework__node-icon svg,
.home-framework__node-icon img {
width: 28px;
height: 28px;
object-fit: contain;
}
.home-framework__node-text {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
gap: 6px;
width: 260px;
}
/* Icon radius (32px) + 24px gap = 56px clearance between the icon and
the text on every side. */
.home-framework__node--top .home-framework__node-text,
.home-framework__node--bottom .home-framework__node-text {
text-align: center;
transform: translate(-50%, 0);
}
.home-framework__node--top .home-framework__node-text {
transform: translate(-50%, calc(-100% - 56px));
}
.home-framework__node--bottom .home-framework__node-text {
transform: translate(-50%, 56px);
}
.home-framework__node--left .home-framework__node-text {
text-align: right;
transform: translate(calc(-100% - 56px), -50%);
}
.home-framework__node--right .home-framework__node-text {
text-align: left;
transform: translate(56px, -50%);
}
.home-framework__node-title {
display: block;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
.home-framework__node-description {
display: block;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
/* Tablet range (900-1140px): the ring stays a real circle here instead
of collapsing straight to the mobile list, just scaled down --
smaller circle, smaller icons, and a narrower/closer-set label so the
whole thing (icon + label hanging off each side) fits inside the
tablet content width without overflowing. Numbers below are measured
against this range's actual usable width (viewport minus the
tablet section padding), not guessed. */
@media (min-width: 900px) and (max-width: 1140px) {
.home-framework__circle {
width: min(420px, 100%);
margin: 100px auto 80px;
}
.home-framework__node-icon {
width: 44px;
height: 44px;
}
.home-framework__node-icon svg,
.home-framework__node-icon img {
width: 20px;
height: 20px;
}
.home-framework__node-text {
width: 165px;
gap: 4px;
}
/* Icon radius (22px) + 20px gap = 42px clearance, replacing the
desktop 56px figure that assumed a 64px icon. */
.home-framework__node--top .home-framework__node-text {
transform: translate(-50%, calc(-100% - 42px));
}
.home-framework__node--bottom .home-framework__node-text {
transform: translate(-50%, 42px);
}
.home-framework__node--left .home-framework__node-text {
transform: translate(calc(-100% - 42px), -50%);
}
.home-framework__node--right .home-framework__node-text {
transform: translate(42px, -50%);
}
.home-framework__node-title {
font-size: 16px;
line-height: 22px;
}
.home-framework__node-description {
font-size: 13px;
line-height: 19px;
}
.home-framework__center span {
font-size: 18px;
}
}
/* Below 900px: the circle itself (even shrunk) no longer has room for
labels hanging off both sides, so it switches to a plain stacked
list instead -- see .home-framework__node-icon etc. below. This used
to kick in as high as 1140px; the fixed 620px circle plus its
side-node text (each hanging 56-316px past the ring's own edge, see
.home-framework__node-text above) didn't actually fit again until
~1125px of viewport width (measured directly) at that original,
unshrunk size -- below that the side labels overflowed past the
viewport. Matches the sitewide header nav's own fix in main.css for
the same reason (measure first, then pick a safe breakpoint, not an
assumed one). */
@media (max-width: 899px) {
.home-framework__circle {
width: 100%;
aspect-ratio: auto;
height: auto;
margin: 0 auto 48px;
}
.home-framework__ring,
.home-framework__center {
display: none;
}
.home-framework__nodes {
position: static;
inset: auto;
display: flex;
flex-direction: column;
gap: 28px;
}
.home-framework__node {
position: static;
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
max-width: 480px;
height: auto;
margin: 0 auto;
}
.home-framework__node-icon {
position: static;
transform: none;
width: 52px;
height: 52px;
}
.home-framework__node-icon svg,
.home-framework__node-icon img {
width: 24px;
height: 24px;
}
.home-framework__node-text {
position: static;
width: auto;
}
.home-framework__node--top .home-framework__node-text,
.home-framework__node--right .home-framework__node-text,
.home-framework__node--bottom .home-framework__node-text,
.home-framework__node--left .home-framework__node-text {
text-align: left;
transform: none;
}
}
.home-framework__cta {
display: flex;
width: fit-content;
margin: 0 auto;
padding: 16px 30px;
}
/* Icon treatment matching the hero/paths buttons (see
.home-hero__btn--primary .home-hero__btn-icon) -- a white circle with
the navy icon inside it, instead of a bare white arrow. */
.home-framework__cta-icon {
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-framework__cta-icon svg,
.home-framework__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* --------------------------------------------------------------------
Industry Expertise
-------------------------------------------------------------------- */
.home-industry {
background-color: #eef6ff;
}
/* Same bordered pill badge and 48/58 heading + 18/28 subheading
typography as the other sections (see .home-stats__badge). */
.home-industry__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-industry__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-industry__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-industry__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-industry__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
/* 6 subcolumns so cards lay out 2-3-2 per row (the first 2 cards and
the last 2 cards each span 3, the cards in between span 2) instead
of an even 4-per-row grid, matching the reference design. This is
count-agnostic via nth-child/nth-last-child rather than fixed
nth-child numbers, so it keeps working when a card is added or
hidden (e.g. the section currently ships an 8th "Public Sector &
Government" card that defaults to hidden -- with 7 visible cards
this renders the classic 2-3-2 rows; if that 8th card is turned on
the middle group grows to 4 narrow cards, which doesn't divide
evenly into this 6-subcolumn scheme and will leave one narrow card
alone on its own row -- revisit this layout if 8 becomes the
permanent count). Falls back to a single column below the tablet
breakpoint. */
.home-industry__grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.home-industry__card:nth-child(1),
.home-industry__card:nth-child(2),
.home-industry__card:nth-last-child(1),
.home-industry__card:nth-last-child(2) {
grid-column: span 3;
}
.home-industry__card:nth-child(n + 3):nth-last-child(n + 3) {
grid-column: span 2;
}
@media (max-width: 900px) {
.home-industry__grid {
grid-template-columns: 1fr;
}
.home-industry__card {
grid-column: auto;
}
}
.home-industry__card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
border: 1px solid #e6ecf5;
border-radius: 16px;
background-color: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.home-industry__card:hover {
border-color: var(--gradient-btn-end);
box-shadow: 0 12px 32px rgba(11, 77, 162, 0.1);
}
.home-industry__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 8px;
color: #004195;
background-color: #e6f7fe;
}
.home-industry__card-icon svg,
.home-industry__card-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.home-industry__card-title {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
.home-industry__card-description {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
.home-industry__cta {
display: flex;
width: fit-content;
margin: 0 auto;
padding: 16px 30px;
}
/* Icon in a white circle, matching the other gradient CTA buttons on
the page (see .home-framework__cta-icon) instead of a bare arrow. */
.home-industry__cta-icon {
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-industry__cta-icon svg,
.home-industry__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* --------------------------------------------------------------------
Business Outcomes (image + vertical timeline)
-------------------------------------------------------------------- */
.home-outcomes {
background-color: #fff;
}
/* Same bordered pill badge and 48/58 heading + 18/28 subheading
typography as the other sections (see .home-stats__badge). */
.home-outcomes__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-outcomes__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-outcomes__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-outcomes__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-outcomes__subheading {
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
.home-outcomes__content {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: 56px;
margin-bottom: 40px;
}
@media (max-width: 1024px) {
.home-outcomes__content {
grid-template-columns: 1fr;
gap: 40px;
}
}
.home-outcomes__image {
display: block;
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
border-radius: 20px;
}
.home-outcomes__image--placeholder {
background-color: #e2e8f0;
}
.home-outcomes__timeline {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Was a single line spanning the whole timeline (`top:24px; bottom:24px`
on the timeline container), sized on the assumption every row is
exactly 48px tall (the icon's own height) -- but each row's actual
height is set by its card (title + description), which is much taller
than the icon, so the line ran well past the last icon into the empty
space below it. Replaced with a per-row segment (below) that only
ever spans its own row's real height, same fix as
.contact-services__item-icon / .about-approach__item-icon elsewhere
on this site: let each row supply its own segment length instead of
guessing one number for the whole list. */
.home-outcomes__row {
position: relative;
display: flex;
align-items: stretch;
gap: 20px;
}
.home-outcomes__row-icon {
position: relative;
display: flex;
justify-content: center;
}
.home-outcomes__row-icon::before {
content: '';
position: absolute;
left: 50%;
top: 0;
/* Extends 20px past this row's own bottom edge -- exactly the
timeline's row `gap` -- so the line bridges into the next row's
top edge instead of leaving a visible gap before the next segment
picks up. */
bottom: -20px;
width: 2px;
background-color: rgba(1, 174, 240, 0.25);
transform: translateX(-50%);
}
.home-outcomes__row--first .home-outcomes__row-icon::before {
top: 24px;
}
.home-outcomes__row--last .home-outcomes__row-icon::before {
top: 0;
bottom: auto;
height: 24px;
}
.home-outcomes__row-icon-circle {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
flex-shrink: 0;
border-radius: 50%;
border: 2px solid #e6ecf5;
color: #004195;
background-color: #fff;
}
.home-outcomes__row-icon-circle svg,
.home-outcomes__row-icon-circle img {
width: 24px;
height: 24px;
object-fit: contain;
}
.home-outcomes__row-card {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid #e6ecf5;
border-radius: 16px;
background-color: #fff;
box-shadow: 0 2px 12px rgba(0, 65, 149, 0.05);
}
.home-outcomes__row-title {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
}
.home-outcomes__row-description {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
.home-outcomes__cta {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0 auto;
padding: 16px 30px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
color: #fff;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
transition: opacity 0.15s ease;
}
.home-outcomes__cta:hover,
.home-outcomes__cta:focus-visible {
opacity: 0.92;
}
.home-outcomes__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-outcomes__cta-icon svg,
.home-outcomes__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* --------------------------------------------------------------------
Accelerators (dark)
-------------------------------------------------------------------- */
.home-accel {
position: relative;
z-index: 0;
overflow: hidden;
background: radial-gradient(circle at 15% 0%, #163258 0%, #0b1a33 45%, #060f1f 100%);
}
/* Uploaded Background Image replaces the above via an inline style
(see template-parts/home/accelerators.php) since the dark scrim has
to layer on top of that specific photo; this just adds the sizing
the inline style doesn't set. */
.home-accel--has-image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Same bordered pill badge and 48/58 heading typography as the other
sections (see .home-stats__badge), recolored for this dark band. */
.home-accel__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #7db8f5;
}
.home-accel__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #fff;
}
@media (max-width: 1024px) {
.home-accel__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-accel__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-accel__grid {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 32px;
margin-bottom: 40px;
}
/* Straight vertical divider down the middle, between the two columns --
matches the horizontal rules under each card row. */
.home-accel__grid::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 640px) {
.home-accel__grid {
grid-template-columns: 1fr;
}
.home-accel__grid::before {
display: none;
}
}
.home-accel__card {
display: flex;
gap: 14px;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Extends each row's horizontal divider halfway across the column gap
(16px = half of the grid's 32px gap) so it actually touches the
vertical divider at the center instead of stopping short of it. The
matching padding keeps the icon/title/description themselves from
shifting position. */
.home-accel__grid > .home-accel__card:nth-child(odd) {
margin-right: -16px;
padding-right: 16px;
}
.home-accel__grid > .home-accel__card:nth-child(even) {
margin-left: -16px;
padding-left: 16px;
}
/* Removes the border only from cards that are actually in the last row
of the 2-column grid. :last-child always qualifies (whether it's the
second card of a full last row, or the lone card of a final odd-count
row); :nth-last-child(2):nth-child(odd) additionally catches the
*other* card of a full last row -- that only happens when the total
count is even, since a row-starting (odd) position is the second-to-
last item only when nothing trails it but its own row partner. This
stays correct whether the visible count (via each slot's "Show"
toggle) is odd or even, not just for the current default count. */
.home-accel__grid > .home-accel__card:last-child,
.home-accel__grid > .home-accel__card:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
@media (max-width: 640px) {
.home-accel__grid > .home-accel__card:nth-child(odd),
.home-accel__grid > .home-accel__card:nth-child(even) {
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
}
/* Single column at this breakpoint, so every card is its own row --
restore the border the desktop rule above removed, then take it
off only the true last card. */
.home-accel__grid > .home-accel__card {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.home-accel__grid > .home-accel__card:last-child {
border-bottom: none;
}
}
.home-accel__card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 6px;
color: #01aef0;
background-color: rgba(1, 174, 240, 0.1);
}
.home-accel__card-icon svg,
.home-accel__card-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.home-accel__card-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 700;
color: #fff;
}
.home-accel__card-description {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.68);
}
.home-accel__cta {
display: flex;
width: fit-content;
margin: 0 auto;
padding: 16px 30px;
}
/* Icon in a white circle, matching the other gradient CTA buttons on
the page (see .home-framework__cta-icon) instead of a bare arrow. */
.home-accel__cta-icon {
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-accel__cta-icon svg,
.home-accel__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* Bottom-left decorative graphic -- a soft dotted glow by default,
fading out via a radial mask so it reads as a blob rather than a hard
rectangle; replaced by an uploaded photo when one is set. Sits behind
.home-accel__inner (painted first in the DOM -- see
template-parts/home/accelerators.php) since .home-accel establishes
its own stacking context (position: relative + z-index: 0 above). */
.home-accel__decor {
position: absolute;
left: 0;
bottom: 0;
width: auto;
height: auto;
bottom: 20px;
pointer-events: none;
}
/* The CSS dot pattern repeats infinitely with no natural edge, so it
needs an artificial fade -- a fixed-radius circle (not a percentage,
which stretches to the box's farthest corner and barely fades at
all) so it reads as a soft glow with no hard rectangle. White (not
black) for the visible stop -- some browsers apply -webkit-mask-image
using luminance rather than alpha, where black reads as fully
hidden. */
.home-accel__decor--dots {
background-image: radial-gradient(rgba(1, 174, 240, 0.6) 1.5px, transparent 2px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(circle 230px at 0% 100%, #fff 0%, transparent 100%);
mask-image: radial-gradient(circle 230px at 0% 100%, #fff 0%, transparent 100%);
}
/* An uploaded image already has its own real transparency/edges (see
the "Decorative Image" ACF field), so it isn't re-masked -- doing so
risks fading out whichever part of the artwork the mask doesn't
consider "close to the corner", hiding the graphic entirely. */
.home-accel__decor--image {
object-fit: contain;
object-position: left bottom;
}
/* --------------------------------------------------------------------
Why Choose Us (image + accordion)
-------------------------------------------------------------------- */
.home-why {
background-color: #fff;
}
/* Same bordered pill badge and 48/58 heading typography as the other
sections (see .home-stats__badge). */
.home-why__badge {
display: block;
width: fit-content;
margin-inline: auto;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
color: #004195;
}
.home-why__heading {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-why__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-why__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-why__content {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: center;
gap: 56px;
margin-bottom: 40px;
}
@media (max-width: 1024px) {
.home-why__content {
grid-template-columns: 1fr;
gap: 32px;
}
}
.home-why__image {
display: block;
width: 100%;
height: 100%;
min-height: 340px;
object-fit: cover;
border-radius: 20px;
}
.home-why__image--placeholder {
background-color: #e2e8f0;
}
.home-why__accordion {
display: flex;
flex-direction: column;
}
/* Collapsed rows are a fixed 62px (matching the Figma spec's "Height:
Fixed 62px" for a closed item); open items grow to fit the
description underneath ("Height: Hug"). */
.home-why__item {
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
height: 62px;
padding: 16px 0;
border-bottom: 1px solid #c4c4c4;
}
.home-why__item[open] {
height: auto;
justify-content: flex-start;
}
.home-why__item:first-child {
border-top: 1px solid #c4c4c4;
}
.home-why__item-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 4px;
list-style: none;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 28px;
letter-spacing: 0;
color: #0f172a;
cursor: pointer;
}
.home-why__item-title::-webkit-details-marker {
display: none;
}
/* A chevron (not the previous plus/minus cross) built from a single
rotated square's two visible borders -- points down when collapsed,
flips to point up when the item is open. */
.home-why__item-toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.home-why__item-toggle::before {
content: '';
width: 8px;
height: 8px;
border-right: 2px solid #004195;
border-bottom: 2px solid #004195;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.home-why__item[open] .home-why__item-toggle::before {
transform: rotate(-135deg);
}
.home-why__item-description {
margin: 0;
padding: 0 48px 0 4px;
}
.home-why__item-description p {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
.home-why__cta {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
margin: 0 auto;
padding: 16px 30px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
color: #fff;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
transition: opacity 0.15s ease;
}
.home-why__cta:hover,
.home-why__cta:focus-visible {
opacity: 0.92;
}
.home-why__cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: auto;
padding: 5px;
border-radius: 50%;
color: #004195;
background-color: #fff;
}
.home-why__cta-icon svg,
.home-why__cta-icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* --------------------------------------------------------------------
FAQ -- accordion of question/answer pairs built from native
/ elements (see template-parts/home/faq.php), so
expand/collapse, keyboard support and ARIA semantics come from the
browser for free. Its own .home-faq classes, independent from the
single-service page's near-identical .service-faq (assets/css/main.css)
-- the two used to share one set of classes, but this section needs
the sitewide 1280px container instead of the service page's narrower
900px, so they were split into separate copies.
-------------------------------------------------------------------- */
/* Padding lives on the section, not __inner -- same fix and same
reasoning as the main home-section rule near the top of this file. */
.home-faq {
background-color: #f8fafc;
padding: 96px var(--header-padding-x);
}
@media (max-width: 1024px) {
.home-faq {
padding: 64px var(--header-padding-x-tablet);
}
}
@media (max-width: 640px) {
.home-faq {
padding: 48px var(--header-padding-x-mobile);
}
}
.home-faq__inner {
max-width: var(--header-max-width);
margin-inline: auto;
}
.home-faq__header {
margin: 0 auto 48px;
text-align: center;
}
@media (max-width: 640px) {
.home-faq__header {
margin-bottom: 32px;
}
}
.home-faq__eyebrow {
display: block;
width: fit-content;
margin: 0 auto 16px;
padding: 6px 16px;
border: 1px solid rgba(1, 174, 240, 0.3);
border-radius: 999px;
background-color: rgba(1, 174, 240, 0.1);
font-size: 16px;
font-weight: 600;
color: #004195;
}
.home-faq__heading {
margin: 0 0 20px;
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 58px;
letter-spacing: 0;
color: #0f172a;
}
@media (max-width: 1024px) {
.home-faq__heading {
font-size: 30px;
line-height: 1.25;
}
}
@media (max-width: 640px) {
.home-faq__heading {
font-size: 30px;
line-height: 1.25;
}
}
.home-faq__subheading {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #64748b;
}
@media (max-width: 640px) {
.home-faq__subheading {
font-size: 15px;
}
}
.home-faq__list {
display: flex;
flex-direction: column;
gap: 16px;
}
.home-faq__item {
background-color: #fff;
border: 1px solid #e6ecf5;
border-radius: 16px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04);
}
.home-faq__item-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 24px 28px;
list-style: none;
cursor: pointer;
}
.home-faq__item-question::-webkit-details-marker {
display: none;
}
.home-faq__item-question-text {
font-family: 'Geist', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 28px;
letter-spacing: 0;
color: #111827;
}
@media (max-width: 640px) {
.home-faq__item-question {
padding: 20px;
}
.home-faq__item-question-text {
font-size: 15px;
}
}
.home-faq__item-toggle {
position: relative;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 999px;
color: #004195;
background-color: #e6f7fe;
transition: background-color 0.2s ease, color 0.2s ease;
}
.home-faq__item[open] .home-faq__item-toggle {
color: #fff;
background: linear-gradient(103.84deg, #004195 0%, #01aef0 100%);
}
.home-faq__item-toggle::before,
.home-faq__item-toggle::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background-color: currentColor;
border-radius: 1px;
transform: translate(-50%, -50%);
}
.home-faq__item-toggle::before {
width: 14px;
height: 2px;
}
.home-faq__item-toggle::after {
width: 2px;
height: 14px;
transition: opacity 0.15s ease;
}
.home-faq__item[open] .home-faq__item-toggle::after {
opacity: 0;
}
.home-faq__item-answer {
padding: 0 28px 24px;
border-top: 1px solid #e6f7fe;
margin-top: -1px;
padding-top: 20px;
}
.home-faq__item-answer p {
margin: 0;
font-family: 'Geist', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 26px;
letter-spacing: 0;
color: #64748b;
}
@media (max-width: 640px) {
.home-faq__item-answer {
padding-left: 20px;
padding-right: 20px;
}
}