/* ============================================================
3HC INNER PAGES — Shared design tokens + sub-page hero + CTA
Used by services, projects, technology, careers, news, contact.
============================================================ */
:root {
--ip-navy: #0F2A44;
--ip-steel: #1B4F72;
--ip-orange: #F27A1A;
--ip-orange-700: #C95F0E;
--ip-charcoal: #2E3A46;
--ip-concrete: #F4F6F8;
--ip-line: #E5E9EE;
--ip-white: #FFFFFF;
--ip-mute: #6E7A87;
--ip-mute-light: #B0BEC5;
--ip-font-display: 'Montserrat', system-ui, sans-serif;
--ip-font-sub: 'Poppins', system-ui, sans-serif;
--ip-font-body: 'Inter', system-ui, sans-serif;
--ip-max: 1280px;
--ip-pad-section: 100px;
--ip-radius-card: 10px;
--ip-radius-btn: 6px;
--ip-shadow-card: 0 10px 30px rgba(15,42,68,.08);
--ip-shadow-lift: 0 18px 50px rgba(15,42,68,.18);
--ip-ease: cubic-bezier(.22,.61,.36,1);
}
/* ============================================================
SUB-PAGE HERO — shared shell.
Usage:
============================================================ */
.ip-hero {
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
color: var(--ip-white);
overflow: hidden;
/* Compensate base.html body-padding so hero shows full-height feel */
margin-top: calc(var(--r-header-h, 80px) * -1);
padding-top: var(--r-header-h, 80px);
}
.ip-hero-bg {
position: absolute;
inset: 0;
background: var(--ip-navy) center/cover no-repeat;
z-index: 0;
}
.ip-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(15,42,68,.85) 0%, rgba(15,42,68,.55) 50%, rgba(27,79,114,.65) 100%);
}
.ip-hero-bg::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(242,122,26,.18) 0%, transparent 50%),
repeating-linear-gradient(90deg, transparent 0, transparent 78px, rgba(255,255,255,.025) 78px, rgba(255,255,255,.025) 80px);
z-index: 1;
pointer-events: none;
}
.ip-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--ip-max);
margin: 0 auto;
padding: 110px 24px 90px;
}
.ip-eyebrow-static {
font-family: var(--ip-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--ip-orange);
position: relative;
padding-left: 38px;
display: inline-block;
margin-bottom: 20px;
}
.ip-eyebrow-static::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 26px; height: 2px;
background: var(--ip-orange);
transform: translateY(-50%);
}
.ip-hero h1 {
font-family: var(--ip-font-display);
font-size: clamp(36px, 5.4vw, 60px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.8px;
margin: 0 0 20px;
max-width: 900px;
color: var(--ip-white);
}
.ip-hero h1 .ip-accent { color: var(--ip-orange); }
.ip-hero p {
font-family: var(--ip-font-body);
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,.85);
max-width: 640px;
margin: 0;
}
/* Breadcrumb pill (optional, sits below the hero text) */
.ip-hero-crumbs {
margin-top: 28px;
font-family: var(--ip-font-body);
font-size: 13px;
color: rgba(255,255,255,.7);
letter-spacing: .3px;
}
.ip-hero-crumbs a {
color: rgba(255,255,255,.85);
text-decoration: none;
transition: color .25s var(--ip-ease);
}
.ip-hero-crumbs a:hover { color: var(--ip-orange); }
.ip-hero-crumbs span { margin: 0 8px; opacity: .6; }
@media (max-width: 720px) {
.ip-hero { min-height: 50vh; }
.ip-hero-content { padding: 90px 20px 70px; }
}
/* ============================================================
CTA BANNER — closing call-to-action used on every inner page
============================================================ */
.ip-cta {
background:
linear-gradient(135deg, rgba(15,42,68,.94) 0%, rgba(27,79,114,.94) 100%),
var(--ip-navy);
padding: 80px 24px;
text-align: center;
position: relative;
overflow: hidden;
}
.ip-cta::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(242,122,26,.18) 0%, transparent 45%),
radial-gradient(circle at 85% 70%, rgba(242,122,26,.12) 0%, transparent 50%);
pointer-events: none;
}
.ip-cta-shell {
position: relative;
z-index: 1;
max-width: 860px;
margin: 0 auto;
}
.ip-cta .ip-eyebrow-static { margin-bottom: 18px; }
.ip-cta h2 {
font-family: var(--ip-font-display);
font-size: clamp(28px, 4vw, 40px);
font-weight: 700;
line-height: 1.2;
color: var(--ip-white);
margin: 0 0 14px;
letter-spacing: -0.4px;
}
.ip-cta p {
font-family: var(--ip-font-body);
font-size: 17px;
line-height: 1.6;
color: rgba(255,255,255,.82);
margin: 0 0 28px;
}
.ip-cta-actions {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
/* ============================================================
SHARED BUTTON STYLES (.ip-btn family)
============================================================ */
.ip-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: var(--ip-font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
border: 2px solid transparent;
border-radius: var(--ip-radius-btn);
text-decoration: none;
cursor: pointer;
transition: all .3s var(--ip-ease);
}
.ip-btn .ip-arrow {
display: inline-block;
transition: transform .3s var(--ip-ease);
}
.ip-btn:hover .ip-arrow { transform: translateX(4px); }
.ip-btn-primary {
background: var(--ip-orange);
color: var(--ip-white);
}
.ip-btn-primary:hover {
background: var(--ip-orange-700);
color: var(--ip-white);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(242,122,26,.35);
}
.ip-btn-ghost-light {
background: transparent;
color: var(--ip-white);
border-color: rgba(255,255,255,.7);
}
.ip-btn-ghost-light:hover {
background: var(--ip-white);
color: var(--ip-navy);
}
.ip-btn-ghost-dark {
background: transparent;
color: var(--ip-navy);
border-color: var(--ip-navy);
}
.ip-btn-ghost-dark:hover {
background: var(--ip-navy);
color: var(--ip-white);
}
/* ============================================================
SHARED SECTION HEADING — small / centered.
Reusable for inner pages that don't define their own.
============================================================ */
.ip-section-head { margin-bottom: 56px; }
.ip-section-head.ip-center { text-align: center; }
.ip-section-head.ip-center .ip-lead { margin-left: auto; margin-right: auto; }
.ip-eyebrow {
font-family: var(--ip-font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--ip-orange);
position: relative;
padding-left: 38px;
display: inline-block;
margin-bottom: 16px;
}
.ip-eyebrow::before {
content: '';
position: absolute;
left: 0; top: 50%;
width: 26px; height: 2px;
background: var(--ip-orange);
transform: translateY(-50%);
}
.ip-h2 {
font-family: var(--ip-font-display);
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
line-height: 1.15;
color: var(--ip-navy);
margin: 0 0 16px;
letter-spacing: -0.5px;
}
.ip-lead {
font-family: var(--ip-font-body);
font-size: 17px;
line-height: 1.65;
color: var(--ip-mute);
max-width: 720px;
margin: 0;
}
/* ============================================================
HIDE LEGACY THEME CHUNKS on redesigned inner pages.
Pages that opt in by adding `data-ip-clean` to the body get
their old `