/* ==========================================================================
SUMMIT SHIELD INSURANCE — MASTER STYLESHEET
Paste this entire file into GoHighLevel: Settings > Custom CSS
Built mobile-first. Organized in numbered sections for easy editing.
========================================================================== */
/* ==========================================================================
1. FONT IMPORTS
GHL Note: If GHL blocks @import, add these two tags in the page
/ Custom Code instead:
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700;800&display=swap');
/* ==========================================================================
2. CSS VARIABLES — BRAND SYSTEM
========================================================================== */
:root {
/* Brand colors */
--ss-primary: #0B2D5C; /* Deep navy — headings, nav, footer */
--ss-primary-dark: #081F42; /* Darker navy for hover/pressed states */
--ss-secondary: #1E5AA8; /* Trust blue — links, accents, secondary buttons */
--ss-secondary-light: #2E6FC4;
--ss-accent: #C98A3E; /* Warm gold accent — CTAs, highlights (used sparingly) */
--ss-accent-dark: #B3782F; /* Gold hover state (backgrounds only) */
--ss-accent-text: #96621F; /* Gold dark enough for small text on light bg (WCAG AA) */
--ss-bg: #F5F7FA; /* Page background */
--ss-white: #FFFFFF;
--ss-ink: #101828; /* Body copy near-black */
--ss-ink-muted: #4B5A72; /* Secondary text */
--ss-ink-faint: #5C6B80; /* Tertiary / captions (4.5:1+ on white) */
--ss-border: #E2E8F0;
--ss-border-strong: #CBD5E1;
--ss-success: #1E7A4C;
--ss-success-bg: #EAF7EF;
/* Typography */
--font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
--font-body: 'Inter', 'Segoe UI', Arial, sans-serif;
/* Spacing scale */
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 40px;
--space-xl: 64px;
--space-2xl: 96px;
--space-3xl: 128px;
/* Layout */
--container-max: 1200px;
--container-narrow: 800px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(11, 45, 92, 0.06);
--shadow-md: 0 4px 16px rgba(11, 45, 92, 0.08);
--shadow-lg: 0 12px 40px rgba(11, 45, 92, 0.12);
--shadow-card: 0 2px 8px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
/* Transitions */
--transition-fast: 150ms ease;
--transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
3. RESET & BASE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--ss-ink);
background: var(--ss-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Sticky footer: short pages (404, legal) never strand the footer mid-viewport */
min-height: 100vh;
display: flex;
flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ss-secondary); text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--ss-primary);
font-weight: 600;
line-height: 1.2;
margin: 0 0 var(--space-sm);
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h1, h2, h3 { text-wrap: balance; }
/* Keep anchor targets clear of the sticky header */
[id] { scroll-margin-top: 96px; }
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
p { margin: 0 0 var(--space-sm); color: var(--ss-ink-muted); }
p:last-child { margin-bottom: 0; }
/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--ss-secondary-light);
outline-offset: 2px;
border-radius: 4px;
}
/* Skip link for keyboard/screen reader users */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--ss-primary);
color: #fff;
padding: 12px 20px;
z-index: 1000;
border-radius: 0 0 8px 0;
font-weight: 600;
}
.skip-link:focus {
left: 0;
}
/* ==========================================================================
4. LAYOUT UTILITIES
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-md);
}
.container--narrow {
max-width: var(--container-narrow);
}
.section {
padding: var(--space-2xl) 0;
}
.section--tight {
padding: var(--space-xl) 0;
}
.section--navy {
background: var(--ss-primary);
color: #fff;
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: rgba(255,255,255,0.78); }
.section--white { background: var(--ss-white); }
.section--bg { background: var(--ss-bg); }
.section-head {
max-width: 680px;
margin: 0 auto var(--space-xl);
text-align: center;
}
.section-head--left {
margin: 0 0 var(--space-xl);
text-align: left;
}
.eyebrow {
display: inline-block;
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ss-accent-text);
margin-bottom: var(--space-xs);
}
.section--navy .eyebrow { color: #E8B87A; }
.grid {
display: grid;
gap: var(--space-lg);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
.grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.text-center { text-align: center; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
5. BUTTONS
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 1rem;
line-height: 1;
padding: 16px 28px;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@media (max-width: 480px) {
.btn { white-space: normal; text-align: center; overflow-wrap: anywhere; }
}
.btn--primary {
background: var(--ss-accent);
color: var(--ss-primary);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
background: var(--ss-accent-dark);
box-shadow: var(--shadow-md);
}
.btn--secondary {
background: transparent;
color: var(--ss-primary);
border-color: var(--ss-primary);
}
.btn--secondary:hover {
background: var(--ss-primary);
color: #fff;
}
.btn--on-navy {
background: transparent;
color: #fff;
border-color: rgba(255,255,255,0.5);
}
.btn--on-navy:hover {
background: rgba(255,255,255,0.1);
border-color: #fff;
}
.btn--ghost {
background: transparent;
color: var(--ss-secondary);
padding: 16px 8px;
}
.btn--ghost:hover { color: var(--ss-primary); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 20px; font-size: 0.9375rem; }
.btn-arrow { transition: transform var(--transition-fast); }
.btn:hover .btn-arrow { transform: translateX(3px); }
/* ==========================================================================
6. HEADER / NAVIGATION
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 500;
background: rgba(245, 247, 250, 0.92);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--ss-border);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
}
.nav-logo {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 1.125rem;
color: var(--ss-primary);
}
.nav-logo img { height: 38px; width: auto; }
.nav-links {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav-links a {
color: var(--ss-primary);
font-weight: 500;
font-size: 0.9375rem;
padding: 8px 2px;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; right: 100%;
bottom: 0;
height: 2px;
background: var(--ss-accent);
transition: right var(--transition-base);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
right: 0;
}
.nav-links a[aria-current="page"] {
color: var(--ss-secondary);
}
.nav-cta {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid var(--ss-border-strong);
border-radius: var(--radius-sm);
}
.nav-toggle span {
display: block;
height: 2px;
width: 22px;
margin: 0 auto;
background: var(--ss-primary);
transition: transform var(--transition-base), opacity var(--transition-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 880px) {
.nav-toggle { display: flex; }
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
background: var(--ss-white);
border-bottom: 1px solid var(--ss-border);
box-shadow: var(--shadow-md);
padding: var(--space-sm) var(--space-md) var(--space-md);
gap: 0;
max-height: 0;
overflow: hidden;
visibility: hidden;
transition: max-height var(--transition-base), padding var(--transition-base);
}
.nav-links.is-open {
max-height: 480px;
visibility: visible;
padding: var(--space-sm) var(--space-md) var(--space-md);
}
.nav-links a {
padding: 14px 4px;
border-bottom: 1px solid var(--ss-border);
}
.nav-cta .btn--secondary { display: none; }
}
@media (min-width: 881px) {
.nav-links { display: flex !important; }
}
/* ==========================================================================
7. HERO
========================================================================== */
.hero {
padding: var(--space-2xl) 0 var(--space-xl);
background: linear-gradient(180deg, #F5F7FA 0%, #EEF2F8 100%);
overflow: hidden;
}
.hero .container {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-2xl);
align-items: center;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ss-secondary);
background: rgba(30, 90, 168, 0.08);
padding: 8px 16px;
border-radius: var(--radius-pill);
margin-bottom: var(--space-md);
}
.hero h1 { margin-bottom: var(--space-md); }
.hero-sub {
font-size: 1.125rem;
color: var(--ss-ink-muted);
max-width: 46ch;
margin-bottom: var(--space-lg);
}
.hero-actions {
display: flex;
align-items: center;
gap: var(--space-md);
flex-wrap: wrap;
margin-bottom: var(--space-lg);
}
.hero-note {
font-size: 0.875rem;
color: var(--ss-ink-faint);
}
.hero-stats {
display: flex;
gap: var(--space-lg);
flex-wrap: wrap;
padding-top: var(--space-md);
border-top: 1px solid var(--ss-border-strong);
}
.hero-stat strong {
display: block;
font-family: var(--font-heading);
font-size: 1.375rem;
color: var(--ss-primary);
}
.hero-stat span {
font-size: 0.8125rem;
color: var(--ss-ink-faint);
}
.hero-media {
position: relative;
}
.hero-media-frame {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4/5;
background: var(--ss-primary);
}
.hero-media-frame > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Navy scrim anchors the floating card and ties the photo to the brand */
.hero-scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 31, 66, 0) 40%, rgba(8, 31, 66, 0.82) 100%);
}
.hero-badge {
position: absolute;
top: 16px; right: 16px;
background: var(--ss-accent);
color: var(--ss-primary);
font-weight: 700;
font-size: 0.8125rem;
padding: 8px 14px;
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
z-index: 2;
}
/* Floating policy summary card — makes the product concrete */
.policy-card {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: min(300px, calc(100% - 40px));
background: #fff;
border-radius: var(--radius-md);
box-shadow: 0 20px 50px rgba(4, 15, 34, 0.45);
padding: 18px 20px;
z-index: 2;
}
.policy-card-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--ss-border);
margin-bottom: 12px;
}
.policy-card-head img { height: 26px; width: auto; }
.policy-card-head strong {
font-family: var(--font-heading);
font-size: 0.875rem;
color: var(--ss-primary);
}
.policy-status {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--ss-success);
background: var(--ss-success-bg);
padding: 4px 10px;
border-radius: var(--radius-pill);
}
.policy-status::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ss-success);
}
.policy-card-title {
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.0625rem;
color: var(--ss-primary);
margin-bottom: 10px;
}
.policy-card-rows { display: grid; gap: 7px; }
.policy-card-row {
display: flex;
justify-content: space-between;
font-size: 0.8438rem;
color: var(--ss-ink-faint);
}
.policy-card-row strong {
color: var(--ss-ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 980px) {
.hero .container { grid-template-columns: 1fr; gap: var(--space-xl); }
/* Copy first on mobile — the headline is the hook, not the illustration */
.hero-media { max-width: 460px; margin: 0 auto; width: 100%; }
}
/* ==========================================================================
8. TRUST BAR
========================================================================== */
.trust-bar {
padding: var(--space-lg) 0;
background: var(--ss-white);
border-top: 1px solid var(--ss-border);
border-bottom: 1px solid var(--ss-border);
}
.trust-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-lg);
}
.trust-item {
display: flex;
align-items: center;
gap: 10px;
color: var(--ss-ink-muted);
font-size: 0.9375rem;
font-weight: 500;
}
.trust-item svg { flex-shrink: 0; color: var(--ss-secondary); }
/* ==========================================================================
9. CARDS
========================================================================== */
.card {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.card-icon {
width: 52px; height: 52px;
border-radius: var(--radius-sm);
background: rgba(30, 90, 168, 0.1);
color: var(--ss-secondary);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-md);
}
.card h3 { margin-bottom: 10px; }
.card p { margin-bottom: var(--space-sm); }
.card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
font-size: 0.9375rem;
color: var(--ss-secondary);
}
.card-link svg { transition: transform var(--transition-fast); }
.card-link:hover svg { transform: translateX(3px); }
/* Numbered process card */
.step-card {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
}
.step-number {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 700;
color: var(--ss-accent);
margin-bottom: var(--space-sm);
}
/* Feature checklist card (for "who this is for") */
.check-card {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
}
.check-card h4 { margin-bottom: 6px; }
.check-card p { font-size: 0.9375rem; margin-bottom: 0; }
/* ==========================================================================
9b. PROBLEM / PAIN / PROMISE / WHY-NOW (narrative sections)
========================================================================== */
.problem-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
max-width: 900px;
}
.problem-cols p { margin-bottom: 0; }
@media (max-width: 700px) {
.problem-cols { grid-template-columns: 1fr; }
}
.pain-card {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
box-shadow: var(--shadow-card);
}
.pain-card h3 {
font-size: 1.0625rem;
margin-bottom: 6px;
}
.pain-card p { font-size: 0.9375rem; margin-bottom: 0; }
.promise-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.promise-inner p {
font-size: 1.0938rem;
max-width: 62ch;
margin: 0 auto;
}
.why-now-block {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: var(--space-xl);
align-items: center;
}
.why-now-block .btn { margin-top: var(--space-md); }
.rate-visual {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-lg);
}
.rate-visual h4 { font-size: 0.9375rem; margin-bottom: var(--space-md); }
.rate-bars { display: grid; gap: 14px; }
.rate-bar-row {
display: grid;
grid-template-columns: 64px 1fr 64px;
align-items: center;
gap: 12px;
font-size: 0.8438rem;
color: var(--ss-ink-faint);
}
.rate-bar-row strong {
color: var(--ss-ink);
font-variant-numeric: tabular-nums;
text-align: right;
}
.rate-bar {
height: 10px;
border-radius: var(--radius-pill);
background: var(--ss-secondary);
}
.rate-bar.is-now { background: var(--ss-accent); }
.rate-visual small {
display: block;
margin-top: var(--space-md);
color: var(--ss-ink-faint);
font-size: 0.8125rem;
}
@media (max-width: 820px) {
.why-now-block { grid-template-columns: 1fr; }
}
/* ==========================================================================
10. STATS STRIP (navy)
========================================================================== */
.stats-strip {
display: flex;
flex-wrap: wrap;
gap: var(--space-lg);
padding-top: var(--space-lg);
margin-top: var(--space-lg);
border-top: 1px solid rgba(255,255,255,0.15);
}
.stat {
padding-left: var(--space-md);
border-left: 2px solid var(--ss-accent);
min-width: 140px;
}
.stat strong {
display: block;
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 700;
color: #fff;
}
.stat span {
font-size: 0.875rem;
color: rgba(255,255,255,0.7);
}
/* ==========================================================================
11. COMPARISON TABLE
========================================================================== */
.compare-table-wrap {
overflow-x: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
border: 1px solid var(--ss-border);
}
.compare-table {
width: 100%;
border-collapse: collapse;
min-width: 560px;
background: var(--ss-white);
}
.compare-table th {
background: var(--ss-primary);
color: #fff;
text-align: left;
padding: 16px 20px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.9375rem;
}
.compare-table td {
padding: 14px 20px;
border-bottom: 1px solid var(--ss-border);
font-size: 0.9375rem;
color: var(--ss-ink-muted);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: var(--ss-bg); }
.compare-table td:nth-child(2) { color: var(--ss-primary); font-weight: 600; }
.compare-table td:nth-child(3) { color: var(--ss-ink-faint); }
/* ==========================================================================
12. PRICING / COST CALLOUT
========================================================================== */
.cost-block {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-xl);
align-items: center;
}
.cost-card {
background: var(--ss-primary);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.cost-card .eyebrow { color: #E8B87A; }
.cost-figure {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 700;
color: #fff;
}
.cost-figure sup {
font-size: 1.125rem;
font-weight: 500;
color: rgba(255,255,255,0.7);
}
.cost-card hr {
border: none;
border-top: 1px solid rgba(255,255,255,0.2);
margin: var(--space-md) 0;
}
.cost-card small {
color: rgba(255,255,255,0.7);
font-size: 0.8125rem;
line-height: 1.6;
}
@media (max-width: 780px) {
.cost-block { grid-template-columns: 1fr; }
}
/* ==========================================================================
13. TESTIMONIALS
========================================================================== */
.testimonial-card {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
}
.stars {
color: var(--ss-accent);
font-size: 1rem;
letter-spacing: 2px;
margin-bottom: var(--space-sm);
}
.testimonial-card blockquote {
margin: 0 0 var(--space-md);
font-size: 1rem;
color: var(--ss-ink);
font-style: normal;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
}
.testimonial-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--ss-secondary);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.9375rem;
flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.9375rem; color: var(--ss-primary); }
.testimonial-author span { font-size: 0.8125rem; color: var(--ss-ink-faint); }
/* ==========================================================================
14. GUARANTEE / CALLOUT BOX
========================================================================== */
.callout-box {
background: #FBF3E7;
border: 1px solid #EFD8AF;
border-radius: var(--radius-md);
padding: var(--space-lg);
}
.callout-box h4 { margin-bottom: 8px; }
.callout-box p { font-size: 0.9375rem; margin-bottom: 0; color: var(--ss-ink-muted); }
.promise-block {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: var(--space-xl);
align-items: start;
}
@media (max-width: 780px) {
.promise-block { grid-template-columns: 1fr; }
}
/* ==========================================================================
15. FAQ ACCORDION
========================================================================== */
.faq-list {
border-top: 1px solid var(--ss-border);
}
.faq-item {
border-bottom: 1px solid var(--ss-border);
}
.faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
background: transparent;
border: none;
text-align: left;
padding: 22px 4px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 1.0625rem;
color: var(--ss-primary);
}
.faq-icon {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
border: 1.5px solid var(--ss-border-strong);
display: flex; align-items: center; justify-content: center;
position: relative;
transition: transform var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}
.faq-icon::before, .faq-icon::after {
content: '';
position: absolute;
background: var(--ss-primary);
transition: transform var(--transition-base), opacity var(--transition-base);
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; }
.faq-question[aria-expanded="true"] .faq-icon {
background: var(--ss-primary);
border-color: var(--ss-primary);
}
.faq-question[aria-expanded="true"] .faq-icon::before,
.faq-question[aria-expanded="true"] .faq-icon::after {
background: #fff;
}
.faq-question[aria-expanded="true"] .faq-icon::after { opacity: 0; }
.faq-answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--transition-base);
}
.faq-item.is-open .faq-answer {
grid-template-rows: 1fr;
}
.faq-answer-inner {
overflow: hidden;
min-height: 0;
padding: 0 4px;
color: var(--ss-ink-muted);
font-size: 0.9688rem;
max-width: 68ch;
}
.faq-item.is-open .faq-answer-inner {
padding-bottom: var(--space-md);
}
/* ==========================================================================
16. CTA BANDS
========================================================================== */
.cta-band {
padding: var(--space-2xl) 0;
background: var(--ss-primary);
background-image: radial-gradient(circle at 15% 20%, rgba(30,90,168,0.35), transparent 45%),
radial-gradient(circle at 85% 80%, rgba(201,138,62,0.18), transparent 45%);
color: #fff;
text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: var(--space-sm); }
.cta-band p {
color: rgba(255,255,255,0.78);
max-width: 560px;
margin: 0 auto var(--space-lg);
font-size: 1.0625rem;
}
.cta-band-actions {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
flex-wrap: wrap;
}
/* ==========================================================================
17. FOOTER
========================================================================== */
.site-footer {
background: var(--ss-primary-dark);
color: rgba(255,255,255,0.7);
padding: var(--space-xl) 0 var(--space-md);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: var(--space-lg);
padding-bottom: var(--space-lg);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 40px; margin-bottom: var(--space-sm); }
.footer-brand p { color: rgba(255,255,255,0.6); font-size: 0.9375rem; max-width: 32ch; }
.footer-col h5 {
color: #fff;
font-family: var(--font-heading);
font-size: 0.9375rem;
margin-bottom: var(--space-sm);
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
color: rgba(255,255,255,0.65);
font-size: 0.9375rem;
}
.footer-col a:hover { color: #fff; }
.footer-contact li {
display: flex;
gap: 10px;
align-items: flex-start;
color: rgba(255,255,255,0.65);
font-size: 0.9375rem;
min-width: 0;
}
.footer-contact a { overflow-wrap: anywhere; }
.footer-contact svg { flex-shrink: 0; margin-top: 2px; color: var(--ss-accent); }
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
padding-top: var(--space-md);
font-size: 0.8125rem;
color: rgba(255,255,255,0.5);
}
.footer-legal { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-legal a { color: rgba(255,255,255,0.5); font-size: 0.8125rem; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 880px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
18. BREADCRUMB / PAGE HEADER (Services & Contact pages)
========================================================================== */
.page-header {
padding: var(--space-xl) 0 var(--space-lg);
background: linear-gradient(180deg, #F5F7FA 0%, #EEF2F8 100%);
text-align: center;
}
.page-header .eyebrow { display: block; }
.page-header p { max-width: 620px; margin: 0 auto; font-size: 1.0625rem; }
.anchor-nav {
position: sticky;
top: 66px;
z-index: 400;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--ss-border);
}
.anchor-nav-inner {
display: flex;
gap: var(--space-lg);
overflow-x: auto;
padding: 14px var(--space-md);
max-width: var(--container-max);
margin: 0 auto;
scrollbar-width: thin;
}
.anchor-nav a {
white-space: nowrap;
font-weight: 600;
font-size: 0.9375rem;
color: var(--ss-ink-muted);
padding-bottom: 4px;
border-bottom: 2px solid transparent;
}
.anchor-nav a:hover, .anchor-nav a.is-active {
color: var(--ss-secondary);
border-color: var(--ss-secondary);
}
/* ==========================================================================
19. SERVICE DETAIL BLOCKS (Services page)
========================================================================== */
.service-block {
padding: var(--space-2xl) 0;
scroll-margin-top: 96px;
}
.service-block--alt { background: var(--ss-white); }
.service-block-inner {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: var(--space-2xl);
align-items: center;
}
.service-block.is-reversed .service-block-inner { direction: rtl; }
.service-block.is-reversed .service-block-inner > * { direction: ltr; }
.service-media {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
aspect-ratio: 4/3;
}
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-icon-badge {
width: 56px; height: 56px;
border-radius: var(--radius-sm);
background: var(--ss-primary);
color: #fff;
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--space-md);
}
.service-meta-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
margin: var(--space-md) 0 var(--space-lg);
}
.service-meta-grid h5 {
font-family: var(--font-heading);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ss-secondary);
margin-bottom: 10px;
}
.service-meta-grid ul li {
font-size: 0.9375rem;
color: var(--ss-ink-muted);
padding-left: 22px;
position: relative;
margin-bottom: 8px;
}
.service-meta-grid ul li::before {
content: '';
position: absolute;
left: 0; top: 7px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--ss-success-bg);
border: 1.5px solid var(--ss-success);
}
.service-ideal-for {
background: var(--ss-bg);
border-radius: var(--radius-sm);
padding: var(--space-md);
margin-bottom: var(--space-lg);
font-size: 0.9375rem;
}
.service-ideal-for strong { color: var(--ss-primary); }
@media (max-width: 900px) {
.service-block-inner { grid-template-columns: 1fr; }
.service-block.is-reversed .service-block-inner { direction: ltr; }
.service-media { order: -1; }
.service-meta-grid { grid-template-columns: 1fr; }
}
/* Services overview grid (top of services page) */
.services-overview-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--space-sm);
}
.service-chip {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-md);
padding: var(--space-md);
text-align: center;
transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.service-chip:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--ss-secondary);
}
.service-chip .card-icon { margin: 0 auto var(--space-sm); }
.service-chip h4 { font-size: 1rem; margin-bottom: 4px; }
.service-chip p { font-size: 0.8438rem; margin-bottom: 0; }
@media (max-width: 980px) {
.services-overview-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
.services-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ==========================================================================
20. CONTACT PAGE
========================================================================== */
.contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: var(--space-2xl);
align-items: start;
}
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; }
}
.contact-info-card {
background: var(--ss-primary);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.contact-info-card h3 { color: #fff; }
.contact-info-list { margin-top: var(--space-md); }
.contact-info-list li {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.15);
}
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-list .icon-badge {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: var(--ss-accent);
}
.contact-info-list strong { display: block; color: #fff; font-size: 0.9375rem; }
.contact-info-list span, .contact-info-list a { color: rgba(255,255,255,0.75); font-size: 0.9375rem; overflow-wrap: anywhere; }
.contact-info-list li > div { min-width: 0; }
.contact-info-list a:hover { color: #fff; }
.contact-hours {
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255,255,255,0.15);
}
.contact-hours dl {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 0;
font-size: 0.9375rem;
}
.contact-hours dt { color: rgba(255,255,255,0.65); }
.contact-hours dd { margin: 0; color: #fff; font-weight: 500; text-align: right; }
.embed-panel {
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
box-shadow: var(--shadow-card);
scroll-margin-top: 96px; /* keep tabs clear of the sticky header after hash scroll */
}
.embed-tabs {
display: flex;
gap: 8px;
margin-bottom: var(--space-lg);
border-bottom: 1px solid var(--ss-border);
}
.embed-tab {
background: transparent;
border: none;
padding: 12px 6px;
font-weight: 600;
font-size: 0.9375rem;
color: var(--ss-ink-faint);
border-bottom: 2px solid transparent;
margin-right: var(--space-md);
}
.embed-tab.is-active {
color: var(--ss-primary);
border-color: var(--ss-accent);
}
.embed-panel-content { display: none; }
.embed-panel-content.is-active { display: block; }
/* Simple quote-request form (email only) */
.quote-form {
display: grid;
gap: var(--space-sm);
max-width: 460px;
}
.quote-form label {
font-weight: 600;
font-size: 0.9375rem;
color: var(--ss-primary);
}
.quote-form input[type="email"] {
font-family: var(--font-body);
font-size: 1rem;
padding: 14px 18px;
border: 1.5px solid var(--ss-border-strong);
border-radius: var(--radius-sm);
background: var(--ss-white);
color: var(--ss-ink);
width: 100%;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.quote-form input[type="email"]:focus {
outline: none;
border-color: var(--ss-secondary);
box-shadow: 0 0 0 3px rgba(30, 90, 168, 0.15);
}
.quote-form-note {
font-size: 0.8438rem;
color: var(--ss-ink-faint);
}
/* GHL embed placeholder styling */
.ghl-embed-placeholder {
border: 2px dashed var(--ss-border-strong);
border-radius: var(--radius-md);
padding: var(--space-2xl) var(--space-lg);
text-align: center;
background: var(--ss-bg);
color: var(--ss-ink-faint);
}
.ghl-embed-placeholder svg { margin: 0 auto var(--space-sm); color: var(--ss-secondary); }
.ghl-embed-placeholder strong {
display: block;
color: var(--ss-primary);
font-family: var(--font-heading);
font-size: 1.0625rem;
margin-bottom: 6px;
}
.ghl-embed-placeholder p { font-size: 0.875rem; max-width: 40ch; margin: 0 auto; }
.ghl-embed-placeholder code {
display: inline-block;
margin-top: var(--space-sm);
background: var(--ss-white);
border: 1px solid var(--ss-border);
border-radius: 6px;
padding: 4px 10px;
font-size: 0.8125rem;
color: var(--ss-secondary);
}
.map-wrap {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--ss-border);
margin-top: var(--space-lg);
aspect-ratio: 16/7;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }
/* ==========================================================================
20b. SERVICE MEDIA PANELS (ridge motif + stat chip)
========================================================================== */
.service-media { position: relative; }
.service-stat-chip {
position: absolute;
left: 16px;
bottom: 16px;
background: #fff;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
padding: 10px 16px;
z-index: 2;
}
.service-stat-chip strong {
display: block;
font-family: var(--font-heading);
font-size: 1.125rem;
color: var(--ss-primary);
font-variant-numeric: tabular-nums;
}
.service-stat-chip span {
font-size: 0.75rem;
color: var(--ss-ink-faint);
}
/* ==========================================================================
20c. PROSE PAGES (privacy / terms) & 404
========================================================================== */
.prose {
max-width: 720px;
margin: 0 auto;
}
.prose h2 {
font-size: 1.375rem;
margin-top: var(--space-xl);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 24px; margin-bottom: var(--space-sm); }
.prose ul li { color: var(--ss-ink-muted); margin-bottom: 6px; }
.prose-updated {
font-size: 0.875rem;
color: var(--ss-ink-faint);
margin-bottom: var(--space-xl);
}
.error-page {
min-height: 55vh;
display: flex;
align-items: center;
text-align: center;
padding: var(--space-2xl) 0;
}
.error-page .container { max-width: 560px; }
.error-code {
font-family: var(--font-heading);
font-size: 5rem;
font-weight: 700;
color: var(--ss-secondary);
line-height: 1;
margin-bottom: var(--space-sm);
}
.error-page .cta-row {
display: flex;
justify-content: center;
gap: var(--space-sm);
flex-wrap: wrap;
margin-top: var(--space-lg);
}
/* ==========================================================================
20d. BRAND MARKS (nav / footer)
========================================================================== */
.nav-logo-mark { height: 38px; width: auto; }
.footer-lockup {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--space-sm);
}
.footer-mark {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
flex-shrink: 0;
background: #fff;
border-radius: 12px;
}
.footer-mark img { height: 34px; width: auto; }
.footer-lockup strong {
font-family: var(--font-heading);
font-weight: 700;
color: #fff;
font-size: 1.0625rem;
line-height: 1.3;
}
/* ==========================================================================
21. MISC UTILITIES
========================================================================== */
.divider {
border: none;
border-top: 1px solid var(--ss-border);
margin: var(--space-2xl) 0;
}
.badge-pill {
display: inline-block;
background: rgba(30, 90, 168, 0.1);
color: var(--ss-secondary);
font-size: 0.8125rem;
font-weight: 600;
padding: 6px 14px;
border-radius: var(--radius-pill);
}
/* Print */
@media print {
.site-header, .cta-band, .site-footer, .nav-toggle { display: none; }
}