html,
body {
margin: 0;
padding: 0;
}
.mock-header,
.mock-footer {
background: #0a1f3d;
color: #fff;
font-family: 'Inter', sans-serif;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.mock-header__logo,
.mock-footer__logo {
font-family: 'Poppins', sans-serif;
font-weight: 700;
letter-spacing: .02em;
}
.mock-header__nav a,
.mock-footer__nav a {
color: #c7d3ea;
text-decoration: none;
margin-left: 20px;
font-size: .9rem;
}
.mock-footer {
flex-direction: column;
gap: 8px;
text-align: center;
padding: 28px 24px;
font-size: .85rem;
color: #c7d3ea;
}
.mock-note {
background: #fff3cd;
color: #664d03;
font-family: 'Inter', sans-serif;
font-size: .85rem;
text-align: center;
padding: 8px 16px;
border-bottom: 1px solid #ffe69c;
}
/* ===================================================================
AT DIGITALS — HIRING & STAFFING PAGE STYLES
-------------------------------------------------------------------
ALL selectors are scoped under body.page-template-hiring so this file
cannot affect any other page or component on the existing site.
Add class="staffing-template" to the tag of this page only.
Color / type tokens are declared as CSS custom properties on the
scoping selector itself, so they can be replaced with the site's
exact brand values in one place (see Integration Notes).
=================================================================== */
body.page-template-hiring {
--staffing-navy: #0a1f3d;
--staffing-navy-2: #122a52;
--staffing-blue: #2e6ff2;
--staffing-blue-dark: #1f52c2;
--staffing-blue-tint: #eaf1ff;
--staffing-ink: #16233d;
--staffing-gray: #5b6b85;
--staffing-line: #e3e8f2;
--staffing-white: #ffffff;
--staffing-radius-sm: 10px;
--staffing-radius-md: 16px;
--staffing-radius-lg: 24px;
--staffing-shadow: 0 20px 40px -24px rgba(10, 31, 61, 0.35);
--staffing-font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
--staffing-font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
}
/* ---------- layout helpers ---------- */
body.page-template-hiring .staffing-page {
font-family: var(--staffing-font-body);
color: var(--staffing-ink);
overflow-x: hidden;
}
body.page-template-hiring .staffing-container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
body.page-template-hiring .staffing-section-head {
max-width: 640px;
margin: 0 0 48px;
}
body.page-template-hiring .staffing-section-head--light {
max-width: 640px;
}
body.page-template-hiring .staffing-section-heading {
font-family: var(--staffing-font-heading);
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px;
color: var(--staffing-navy);
}
body.page-template-hiring .staffing-section-heading--light {
color: var(--staffing-white);
}
body.page-template-hiring .staffing-section-sub {
font-size: 1.05rem;
line-height: 1.6;
color: var(--staffing-gray);
margin: 0;
}
body.page-template-hiring .staffing-section-sub--light {
color: #c7d3ea;
}
body.page-template-hiring .staffing-eyebrow {
display: inline-block;
font-family: var(--staffing-font-heading);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--staffing-blue);
margin: 0 0 16px;
}
/* ---------- buttons ---------- */
body.page-template-hiring .staffing-btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--staffing-font-heading);
font-weight: 600;
font-size: 0.98rem;
text-decoration: none;
padding: 14px 30px;
border-radius: var(--staffing-radius-sm);
border: 2px solid transparent;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
body.page-template-hiring .staffing-btn:focus-visible {
outline: 3px solid var(--staffing-blue);
outline-offset: 3px;
}
body.page-template-hiring .staffing-btn--primary {
background-color: var(--staffing-blue);
color: var(--staffing-white);
box-shadow: 0 14px 30px -14px rgba(46, 111, 242, 0.65);
}
body.page-template-hiring .staffing-btn--primary:hover {
background-color: var(--staffing-blue-dark);
transform: translateY(-2px);
}
body.page-template-hiring .staffing-btn--ghost {
background-color: transparent;
border-color: rgba(10, 31, 61, 0.18);
color: var(--staffing-navy);
}
body.page-template-hiring .staffing-btn--ghost:hover {
border-color: var(--staffing-navy);
transform: translateY(-2px);
}
body.page-template-hiring .staffing-btn--cta {
background-color: var(--staffing-white);
color: var(--staffing-navy);
}
body.page-template-hiring .staffing-btn--cta:hover {
background-color: var(--staffing-blue-tint);
transform: translateY(-2px);
}
/* ===================================================================
HERO
=================================================================== */
body.page-template-hiring .staffing-hero {
position: relative;
background: linear-gradient(160deg, var(--staffing-navy) 0%, var(--staffing-navy-2) 60%, #16346a 100%);
padding: 200px 0 88px;
overflow: hidden;
}
body.page-template-hiring .staffing-hero__blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.35;
pointer-events: none;
}
body.page-template-hiring .staffing-hero__blob--one {
width: 420px;
height: 420px;
background: var(--staffing-blue);
top: -160px;
right: -120px;
}
body.page-template-hiring .staffing-hero__blob--two {
width: 300px;
height: 300px;
background: #4fd1c5;
bottom: -140px;
left: -80px;
opacity: 0.22;
}
body.page-template-hiring .staffing-hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 48px;
}
body.page-template-hiring .staffing-hero__heading {
font-family: var(--staffing-font-heading);
font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.25rem);
font-weight: 700;
line-height: 1.14;
color: var(--staffing-white);
margin: 0 0 20px;
}
body.page-template-hiring .staffing-hero__desc {
font-size: 1.1rem;
line-height: 1.65;
color: #c7d3ea;
max-width: 520px;
margin: 0 0 32px;
}
body.page-template-hiring .staffing-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
body.page-template-hiring .staffing-hero .staffing-btn--ghost {
border-color: rgba(255, 255, 255, 0.35);
color: var(--staffing-white);
}
body.page-template-hiring .staffing-hero .staffing-btn--ghost:hover {
border-color: var(--staffing-white);
background-color: rgba(255, 255, 255, 0.08);
}
body.page-template-hiring .staffing-hero__media {
display: flex;
justify-content: center;
}
body.page-template-hiring .staffing-hero__image {
width: 100%;
max-width: 460px;
height: auto;
border-radius: var(--staffing-radius-lg);
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
}
/* ===================================================================
OVERVIEW
=================================================================== */
body.page-template-hiring .staffing-overview {
padding: 84px 0;
background-color: var(--staffing-white);
}
body.page-template-hiring .staffing-overview__inner {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 56px;
align-items: start;
}
body.page-template-hiring .staffing-overview__lead {
font-size: 1.08rem;
line-height: 1.7;
color: var(--staffing-gray);
margin: 0;
}
body.page-template-hiring .staffing-overview__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
body.page-template-hiring .staffing-overview__point {
padding: 20px 22px;
border: 1px solid var(--staffing-line);
border-left: 4px solid var(--staffing-blue);
border-radius: var(--staffing-radius-sm);
background-color: #fafbfe;
}
body.page-template-hiring .staffing-overview__point-title {
display: block;
font-family: var(--staffing-font-heading);
font-weight: 600;
color: var(--staffing-navy);
margin-bottom: 6px;
}
body.page-template-hiring .staffing-overview__point-desc {
display: block;
font-size: 0.96rem;
line-height: 1.55;
color: var(--staffing-gray);
}
/* ===================================================================
ROLES GRID
=================================================================== */
body.page-template-hiring .staffing-roles {
padding: 84px 0;
background-color: #f6f8fc;
}
body.page-template-hiring .staffing-roles__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
body.page-template-hiring .staffing-role-card {
background-color: var(--staffing-white);
border: 1px solid var(--staffing-line);
border-radius: var(--staffing-radius-md);
padding: 26px 22px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
body.page-template-hiring .staffing-role-card:hover {
transform: translateY(-4px);
box-shadow: var(--staffing-shadow);
border-color: transparent;
}
body.page-template-hiring .staffing-role-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--staffing-radius-sm);
background-color: var(--staffing-blue-tint);
color: var(--staffing-blue);
margin-bottom: 16px;
}
body.page-template-hiring .staffing-role-card__icon svg {
width: 22px;
height: 22px;
}
body.page-template-hiring .staffing-role-card__title {
font-family: var(--staffing-font-heading);
font-size: 1.02rem;
font-weight: 600;
color: var(--staffing-navy);
margin: 0 0 8px;
}
body.page-template-hiring .staffing-role-card__desc {
font-size: 0.92rem;
line-height: 1.55;
color: var(--staffing-gray);
margin: 0;
}
body.page-template-hiring .staffing-role-card--custom {
background-color: var(--staffing-navy);
border-color: var(--staffing-navy);
}
body.page-template-hiring .staffing-role-card--custom .staffing-role-card__icon {
background-color: rgba(255, 255, 255, 0.12);
color: var(--staffing-white);
}
body.page-template-hiring .staffing-role-card--custom .staffing-role-card__title,
body.page-template-hiring .staffing-role-card--custom .staffing-role-card__desc {
color: var(--staffing-white);
}
body.page-template-hiring .staffing-role-card--custom .staffing-role-card__desc {
color: #c7d3ea;
}
/* ===================================================================
WHY CHOOSE US
=================================================================== */
body.page-template-hiring .staffing-why {
padding: 88px 0;
background: linear-gradient(160deg, var(--staffing-navy) 0%, var(--staffing-navy-2) 100%);
}
body.page-template-hiring .staffing-why__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 18px;
}
body.page-template-hiring .staffing-why__item {
background-color: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--staffing-radius-md);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: center;
}
body.page-template-hiring .staffing-why__item--feature {
grid-column: span 2;
grid-row: span 2;
background-color: var(--staffing-blue);
border-color: var(--staffing-blue);
justify-content: center;
}
body.page-template-hiring .staffing-why__item--feature .staffing-why__title {
font-size: 1.3rem;
}
body.page-template-hiring .staffing-why__title {
font-family: var(--staffing-font-heading);
font-weight: 600;
font-size: 1.05rem;
color: var(--staffing-white);
margin: 0 0 8px;
}
body.page-template-hiring .staffing-why__desc {
font-size: 0.92rem;
line-height: 1.55;
color: #c7d3ea;
margin: 0;
}
body.page-template-hiring .staffing-why__item--feature .staffing-why__desc {
color: rgba(255, 255, 255, 0.9);
}
/* ===================================================================
PROCESS
=================================================================== */
body.page-template-hiring .staffing-process {
padding: 88px 0;
background-color: var(--staffing-white);
}
body.page-template-hiring .staffing-process__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
counter-reset: staffing-step;
position: relative;
}
body.page-template-hiring .staffing-process__list::before {
content: '';
position: absolute;
top: 20px;
left: 5%;
right: 5%;
height: 2px;
background-color: var(--staffing-line);
z-index: 0;
}
body.page-template-hiring .staffing-process__step {
position: relative;
z-index: 1;
text-align: left;
}
body.page-template-hiring .staffing-process__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--staffing-blue);
color: var(--staffing-white);
font-family: var(--staffing-font-heading);
font-weight: 700;
font-size: 0.85rem;
margin-bottom: 16px;
}
body.page-template-hiring .staffing-process__title {
font-family: var(--staffing-font-heading);
font-size: 0.98rem;
font-weight: 600;
color: var(--staffing-navy);
margin: 0 0 6px;
}
body.page-template-hiring .staffing-process__desc {
font-size: 0.88rem;
line-height: 1.5;
color: var(--staffing-gray);
margin: 0;
}
/* ===================================================================
ENGAGEMENT MODELS
=================================================================== */
body.page-template-hiring .staffing-models {
padding: 84px 0;
background-color: #f6f8fc;
}
body.page-template-hiring .staffing-models__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
body.page-template-hiring .staffing-model-card {
background-color: var(--staffing-white);
border: 1px solid var(--staffing-line);
border-top: 3px solid var(--staffing-blue);
border-radius: var(--staffing-radius-sm);
padding: 22px 18px;
}
body.page-template-hiring .staffing-model-card__title {
font-family: var(--staffing-font-heading);
font-size: 0.98rem;
font-weight: 600;
color: var(--staffing-navy);
margin: 0 0 8px;
}
body.page-template-hiring .staffing-model-card__desc {
font-size: 0.88rem;
line-height: 1.5;
color: var(--staffing-gray);
margin: 0;
}
/* ===================================================================
CTA
=================================================================== */
body.page-template-hiring .staffing-cta {
padding: 88px 0;
background: linear-gradient(135deg, var(--staffing-navy) 0%, var(--staffing-blue-dark) 100%);
text-align: center;
}
body.page-template-hiring .staffing-cta__inner {
max-width: 620px;
}
body.page-template-hiring .staffing-cta__heading {
font-family: var(--staffing-font-heading);
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
font-weight: 700;
color: var(--staffing-white);
margin: 0 0 14px;
}
body.page-template-hiring .staffing-cta__desc {
font-size: 1.05rem;
line-height: 1.6;
color: #c7d3ea;
margin: 0 0 32px;
}
/* ===================================================================
RESPONSIVE — TABLET (≤ 1024px)
=================================================================== */
@media (max-width: 1024px) {
body.page-template-hiring .staffing-hero__inner {
grid-template-columns: 1fr;
text-align: center;
}
body.page-template-hiring .staffing-hero__desc {
margin-left: auto;
margin-right: auto;
}
body.page-template-hiring .staffing-hero__actions {
justify-content: center;
}
body.page-template-hiring .staffing-hero__media {
order: -1;
}
body.page-template-hiring .staffing-overview__inner {
grid-template-columns: 1fr;
}
body.page-template-hiring .staffing-roles__grid {
grid-template-columns: repeat(3, 1fr);
}
body.page-template-hiring .staffing-why__grid {
grid-template-columns: repeat(2, 1fr);
}
body.page-template-hiring .staffing-why__item--feature {
grid-column: span 2;
grid-row: span 1;
}
body.page-template-hiring .staffing-process__list {
grid-template-columns: repeat(3, 1fr);
row-gap: 36px;
}
body.page-template-hiring .staffing-process__list::before {
display: none;
}
body.page-template-hiring .staffing-models__grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ===================================================================
RESPONSIVE — MOBILE (≤ 640px)
=================================================================== */
@media (max-width: 640px) {
body.page-template-hiring .staffing-hero {
padding: 64px 0 56px;
}
body.page-template-hiring .staffing-overview,
body.page-template-hiring .staffing-roles,
body.page-template-hiring .staffing-why,
body.page-template-hiring .staffing-process,
body.page-template-hiring .staffing-models,
body.page-template-hiring .staffing-cta {
padding: 56px 0;
}
body.page-template-hiring .staffing-hero__actions {
flex-direction: column;
align-items: stretch;
}
body.page-template-hiring .staffing-btn {
width: 100%;
}
body.page-template-hiring .staffing-roles__grid,
body.page-template-hiring .staffing-why__grid,
body.page-template-hiring .staffing-process__list,
body.page-template-hiring .staffing-models__grid {
grid-template-columns: 1fr;
}
body.page-template-hiring .staffing-why__item--feature {
grid-column: span 1;
}
body.page-template-hiring .staffing-section-head {
margin-bottom: 32px;
}
}
/* ===================================================================
REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce) {
body.page-template-hiring .staffing-btn,
body.page-template-hiring .staffing-role-card {
transition: none;
}
}