/*
* GO CLINIC MD — home.css
* Step 1: Design tokens + Figtree font foundation
*
* FONT SETUP (add to header.php , replacing old font links):
*
*
*
*
* Also in functions.php, remove the local @font-face woff2 files for
* Work Sans, Poppins, Sora, Inter — Figtree replaces all of them.
* The four woff/woff2 files in /fonts/ can be deleted once confirmed working.
*/
/* =====================================================================
1. DESIGN TOKENS
===================================================================== */
:root {
/* Brand */
--blue: #0064DD;
--blue-2: #3385E4;
--blue-hover: #0052B8;
--blue-soft: #EEF4FE; /* button hover, badges */
--blue-softer: #F7FAFE; /* tinted backgrounds */
--peach: #F4F8FE; /* hero gradient top */
/* Ink */
--navy: #000F1C;
--ink: #000F1C;
--text: #000F1C;
--muted: #4A5560; /* body copy */
--muted-2: #808892; /* meta, hints */
/* Surface */
--white: #FFFFFF;
--surface: #FAFAFD; /* alt section backgrounds */
--border: #E5E7EB;
--border-2: #EDF0F4; /* softer card borders */
/* Status */
--success: #10b981;
--danger: #dc2626;
--accent: #FFC107;
/* Radius */
--radius: 6px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Shadow */
--shadow-sm: 0 2px 8px rgba(0, 15, 28, 0.04);
--shadow-md: 0 8px 24px rgba(0, 15, 28, 0.06);
--shadow-lg: 0 20px 60px rgba(0, 15, 28, 0.09);
/* Layout */
--max: 1280px;
}
/* =====================================================================
2. RESET & BASE
===================================================================== */
* { box-sizing: border-box; }
/* Prevent horizontal scroll without breaking position:sticky.
overflow-x:clip clips visually like 'hidden' but does NOT create
a scroll container, so sticky headers keep working. */
html {
overflow-x: clip;
}
body {
font-family: 'Figtree', system-ui, sans-serif;
color: var(--text);
background: #fff;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
max-width: 100%;
}
/* Ensure the WP page wrapper never exceeds viewport */
#page.site {
overflow-x: clip;
max-width: 100%;
}
/* Content-width centering — overrides Bootstrap's responsive .container */
.container {
max-width: var(--max);
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
width: 100%;
}
/* =====================================================================
2b. GLOBAL TYPE SCALE
===================================================================== */
h1, h2, h3, h4 { margin: 0; font-family: 'Figtree', system-ui, sans-serif; color: var(--navy); }
h1 { font-size: clamp(36px, 4.8vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-size: 17px; font-weight: 700; line-height: 1.3; }
/* Eyebrow label — used above headings throughout */
.eyebrow {
display: block;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 14px;
}
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb span.sep { color: var(--muted-2); }
a {
color: inherit;
text-decoration: none;
}
a:focus {
outline: 0;
}
p {
margin-bottom: 0;
}
/* =====================================================================
3. GLOBAL TYPOGRAPHY CLASSES
===================================================================== */
.text-main {
font-family: 'Figtree', system-ui, sans-serif;
font-size: 16px;
color: var(--muted);
line-height: 150%;
font-weight: 400;
}
.text-small {
font-family: 'Figtree', system-ui, sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: var(--muted);
}
.text-large {
font-family: 'Figtree', system-ui, sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 150%;
text-transform: capitalize;
color: var(--navy);
}
.text-main_dark {
font-family: 'Figtree', system-ui, sans-serif;
font-size: 16px;
color: var(--navy);
line-height: 150%;
font-weight: 400;
}
.title-main {
font-family: 'Figtree', system-ui, sans-serif;
font-size: 56px;
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--navy);
}
.section-subtitle {
font-family: 'Figtree', system-ui, sans-serif;
font-size: 13px;
font-weight: 600;
line-height: 142%;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blue);
}
.section-title {
font-family: 'Figtree', system-ui, sans-serif;
font-weight: 700;
font-size: 32px;
line-height: 125%;
letter-spacing: -0.02em;
color: var(--navy);
}
/* =====================================================================
4. BUTTONS
===================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Figtree', system-ui, sans-serif;
font-weight: 600;
font-size: 15px;
padding: 13px 26px;
border-radius: 999px;
border: 1.5px solid transparent;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
white-space: nowrap;
}
.btn-primary.button-main,
.btn-primary {
font-family: 'Figtree', system-ui, sans-serif;
font-weight: 600;
font-size: 15px;
padding: 13px 26px;
border-radius: 999px;
background-color: var(--blue);
color: var(--white);
border-color: var(--blue);
}
.btn-primary.button-main:hover,
.btn-primary:hover:not(:disabled) {
background-color: var(--blue-hover);
border-color: var(--blue-hover);
color: var(--white);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0, 100, 221, 0.28);
transition: all 0.2s;
}
.btn-primary.button-main svg {
fill: var(--white);
}
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
background-color: #7e8182;
border-color: #7e8182;
opacity: 1;
}
.btn-outline {
background: #fff;
color: var(--blue);
border-color: var(--blue);
}
.btn-outline:hover {
background: var(--blue-soft);
}
.btn-ghost {
background: transparent;
color: var(--navy);
border-color: var(--border);
}
.btn-ghost:hover {
border-color: var(--blue);
color: var(--blue);
}
/* =====================================================================
5. HEADER — announcement strip, sticky nav, mobile drawer, sticky CTA
===================================================================== */
/* Announcement strip — homepage only, scrolls away */
.announce {
background: var(--navy);
color: #fff;
font-size: 13px;
padding: 9px 32px;
text-align: center;
letter-spacing: 0.01em;
}
.announce b { color: #9FC6FF; font-weight: 600; }
.announce a {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
margin-left: 6px;
}
/* Sticky header shell */
header.site-header {
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-2);
z-index: 50;
}
/* Inner nav row */
.site-header .nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 32px;
max-width: var(--max);
margin: 0 auto;
}
/* Logo */
.logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
flex-shrink: 0;
}
.logo-img {
display: block;
height: 30px;
width: auto;
object-fit: contain;
}
/* Desktop nav links */
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
font-family: 'Figtree', system-ui, sans-serif;
color: var(--text);
font-weight: 500;
font-size: 14.5px;
padding: 6px 0;
position: relative;
text-decoration: none;
transition: color 0.15s;
}
.nav-links a:hover { color: var(--blue); }
.nav-links a.active { color: var(--navy); }
.nav-links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -4px;
height: 2px;
background: var(--blue);
border-radius: 2px;
}
/* Medical Team "page link" — separated + arrow */
.nav-links a.page-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding-left: 16px;
margin-left: 4px;
border-left: 1px solid var(--border-2);
font-weight: 600;
color: var(--navy);
}
.nav-links a.page-link::after {
content: '';
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
opacity: 0.85;
transform: translateY(-1px);
}
.nav-links a.page-link:hover { color: var(--blue); }
.nav-links a.page-link:hover::after { opacity: 1; }
.nav-links a.page-link.active {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
}
.nav-links a.page-link.active::after { display: none; }
/* CTA buttons row */
.nav-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* Hamburger toggle — hidden on desktop */
.nav-toggle {
display: none;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 12px;
cursor: pointer;
color: var(--navy);
flex-shrink: 0;
}
.nav-toggle svg {
width: 26px;
height: 26px;
}
.nav-toggle:active { background: var(--surface); }
/* Mobile drawer overlay */
.nav-drawer {
position: fixed;
inset: 0;
background: rgba(0, 15, 28, 0.45);
z-index: 100;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.nav-drawer.on {
opacity: 1;
pointer-events: auto;
}
/* Drawer panel (slides in from right) */
.nav-drawer-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(360px, 86vw);
background: #fff;
padding: 24px 24px 32px;
display: flex;
flex-direction: column;
gap: 8px;
transform: translateX(100%);
transition: transform 0.25s ease-out;
overflow-y: auto;
}
.nav-drawer.on .nav-drawer-panel { transform: translateX(0); }
.nav-drawer-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
border-bottom: 1px solid var(--border-2);
margin-bottom: 14px;
}
.nav-drawer-close {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
color: var(--navy);
font-size: 22px;
font-weight: 300;
line-height: 1;
}
.nav-drawer-panel a.drawer-link {
font-family: 'Figtree', system-ui, sans-serif;
color: var(--navy);
font-weight: 600;
font-size: 17px;
padding: 14px 8px;
border-radius: 8px;
display: block;
text-decoration: none;
transition: background 0.15s;
}
.nav-drawer-panel a.drawer-link:hover,
.nav-drawer-panel a.drawer-link:active { background: var(--blue-softer); }
.nav-drawer-panel a.drawer-link.active { color: var(--blue); }
.nav-drawer-panel a.drawer-link.page-link {
display: flex;
align-items: center;
gap: 8px;
color: var(--blue);
}
.nav-drawer-panel a.drawer-link.page-link::after {
content: '';
width: 12px;
height: 12px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: contain;
}
.nav-drawer-cta {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-2);
}
.nav-drawer-cta .btn { width: 100%; padding: 14px 20px; }
/* Mobile sticky CTA bar — hidden on desktop */
.mobile-cta-bar {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 80;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--border);
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
gap: 10px;
}
.mobile-cta-bar .btn {
flex: 1;
padding: 13px 16px;
font-size: 14.5px;
}
/* Responsive rules moved to Section 15 at the bottom of the file,
after all component base styles, so media queries correctly override them. */
/* =====================================================================
6. HERO (rewritten in Step 4)
===================================================================== */
.hero {
padding: 72px 0 120px;
background: linear-gradient(180deg, var(--peach) 0%, #fff 70%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(0,100,221,0.05) 1px, transparent 0);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at top right, black 0%, transparent 55%);
pointer-events: none;
}
.hero-grid {
display: grid;
grid-template-columns: 1.08fr 0.92fr;
column-gap: 72px;
row-gap: 8px;
align-items: start;
position: relative;
}
.hero .sub {
font-size: 18px;
margin-bottom: 14px;
max-width: 540px;
line-height: 1.55;
}
.guidelines-badge {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 28px;
font-size: 13px;
color: var(--navy);
background: #fff;
border: 1px solid var(--border);
padding: 8px 16px 8px 8px;
border-radius: 16px;
max-width: 100%;
font-weight: 500;
box-shadow: var(--shadow-sm);
}
.guidelines-badge .dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--blue-soft);
color: var(--blue);
}
.guidelines-badge b {
color: var(--navy);
font-weight: 600;
}
.guidelines-badge span.sep {
width: 1px;
height: 12px;
background: var(--border);
margin: 0 2px;
}
.hero-cta-row {
margin-top: 28px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Pathway (Variant A) */
.pathway {
position: relative;
}
.path-step {
display: flex;
align-items: center;
gap: 18px;
background: #fff;
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
padding: 18px 22px;
box-shadow: var(--shadow-sm);
transition: transform .2s, box-shadow .2s;
}
.path-step:hover {
transform: translateX(4px);
box-shadow: var(--shadow-md);
}
.path-step .num {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--blue);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.path-step h4 {
color: var(--navy);
font-size: 16px;
margin-bottom: 2px;
}
.path-step .meta {
font-size: 13px;
color: var(--muted);
line-height: 1.45;
}
.path-step .tag {
font-size: 11px;
font-weight: 600;
color: var(--blue);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.path-connector {
width: 2px;
height: 20px;
margin-left: 40px;
background: repeating-linear-gradient(to bottom, var(--blue) 0, var(--blue) 3px, transparent 3px, transparent 6px);
opacity: .5;
}
/* Director card */
.director-card {
display: flex;
align-items: stretch;
gap: 0;
background: #fff;
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
padding: 0;
box-shadow: var(--shadow-md);
margin-top: 12px;
overflow: hidden;
}
.director-card .dc-portrait-col {
flex-shrink: 0;
width: 96px;
background: linear-gradient(180deg, #EAF3FF 0%, #DCEAFB 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
border-right: 1px solid var(--border-2);
}
.director-card .portrait-wrap {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.director-card .portrait {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(160deg, #c8dff8 0%, #a8c8f0 100%);
flex-shrink: 0;
}
.director-card .portrait img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.director-card .verified-badge {
position: absolute;
bottom: 0;
right: -4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #10b981;
border: 2.5px solid #fff;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 1;
}
.director-card .dc-body {
flex: 1;
padding: 14px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
}
.director-card .dc-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
font-weight: 700;
color: var(--blue);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.director-card .dc-eyebrow::before {
content: '';
width: 14px;
height: 1.5px;
background: var(--blue);
}
.director-card .name {
font-weight: 700;
color: var(--navy);
font-size: 15px;
line-height: 1.25;
margin-top: 3px;
}
.director-card .cred {
font-size: 12.5px;
color: var(--muted);
line-height: 1.4;
}
/* Hero contact card */
.hero-contact {
grid-column: 1 / -1;
margin-top: 8px;
background: #fff;
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
padding: 22px;
box-shadow: var(--shadow-sm);
}
.hero-contact .hc-head {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 16px;
}
.hero-contact .hc-title {
font-size: 15px;
font-weight: 600;
color: var(--navy);
letter-spacing: -0.01em;
}
.hero-contact .hc-sub {
font-size: 12.5px;
color: var(--muted);
line-height: 1.45;
}
/* =====================================================================
7. CARE MODEL (rewritten in Step 5)
===================================================================== */
/* Shared section layout tokens */
section.block {
padding: 80px 0;
}
section.block.alt {
background: var(--surface);
}
.section-header {
max-width: 780px;
margin-bottom: 64px;
}
.section-header h2 {
margin-bottom: 18px;
}
.section-header p {
font-size: 17px;
line-height: 1.55;
max-width: 680px;
}
/* Care grid */
.care-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.care-card {
background: #fff;
border-radius: var(--radius-lg);
padding: 32px;
border: 1px solid var(--border-2);
transition: transform .25s, box-shadow .25s, border-color .25s;
position: relative;
overflow: hidden;
}
.care-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--blue);
}
.care-card .icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-bottom: 24px;
}
.care-card .num-stamp {
position: absolute;
top: 24px;
right: 24px;
font-size: 11px;
font-weight: 600;
color: var(--muted-2);
letter-spacing: 0.08em;
}
.care-card h3 {
margin-bottom: 12px;
color: var(--navy);
}
.care-card p {
font-size: 14.5px;
line-height: 1.55;
}
.care-card .chips {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.care-card .chips span {
font-size: 11px;
padding: 4px 8px;
background: var(--blue-softer);
color: var(--blue);
border-radius: 4px;
font-weight: 500;
}
/* =====================================================================
8. HOW IT WORKS (rewritten in Step 7)
===================================================================== */
.steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.step {
position: relative;
padding-top: 68px;
}
.step .step-num {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
background: #fff;
border: 2px solid var(--blue);
color: var(--blue);
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
z-index: 2;
}
.step h4 {
font-size: 17px;
color: var(--navy);
margin-bottom: 10px;
line-height: 1.25;
}
.step p {
font-size: 14px;
line-height: 1.55;
}
/* =====================================================================
9. EVIDENCE STRIP (rewritten in Step 8)
===================================================================== */
.evidence-strip {
padding: 100px 0;
background: var(--navy);
color: #fff;
position: relative;
overflow: hidden;
}
.evidence-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(159,198,255,0.08) 1px, transparent 0);
background-size: 32px 32px;
mask-image: radial-gradient(ellipse at 20% 20%, black 0%, transparent 60%);
pointer-events: none;
}
.evidence-strip .container {
position: relative;
}
.evidence-strip .ev-lead {
max-width: 820px;
margin-bottom: 56px;
}
.evidence-strip h2 {
color: #fff;
max-width: 22ch;
}
.evidence-strip h2 em {
color: #9FC6FF;
font-style: normal;
}
.ev-intro {
margin-top: 20px;
color: rgba(255,255,255,0.72);
font-size: 17px;
line-height: 1.6;
max-width: 62ch;
}
.ev-quote-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 56px;
}
.ev-quote {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(159,198,255,0.18);
border-radius: var(--radius-lg);
padding: 28px;
position: relative;
transition: border-color .25s, background .25s;
}
.ev-quote:hover {
border-color: rgba(159,198,255,0.45);
background: rgba(255,255,255,0.06);
}
.ev-q-mark {
position: absolute;
top: 10px;
left: 22px;
font-family: Georgia, serif;
font-size: 72px;
line-height: 1;
color: rgba(159,198,255,0.35);
font-weight: 700;
pointer-events: none;
}
.ev-quote blockquote {
position: relative;
margin: 12px 0 22px;
font-size: 16px;
line-height: 1.55;
color: rgba(255,255,255,0.92);
font-weight: 400;
font-style: italic;
letter-spacing: -0.005em;
}
.ev-quote figcaption {
border-top: 1px solid rgba(159,198,255,0.18);
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ev-quote figcaption strong {
color: #fff;
font-size: 13.5px;
font-weight: 600;
letter-spacing: -0.005em;
}
.ev-quote figcaption span {
color: rgba(255,255,255,0.55);
font-size: 12px;
line-height: 1.45;
}
.ev-endorsers {
padding: 28px 32px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(159,198,255,0.12);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.ev-end-label {
font-size: 11px;
font-weight: 600;
color: #9FC6FF;
letter-spacing: 0.1em;
text-transform: uppercase;
flex-shrink: 0;
}
.ev-end-list {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.ev-end-item {
font-size: 13.5px;
color: rgba(255,255,255,0.88);
font-weight: 500;
letter-spacing: -0.005em;
}
.ev-end-sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(159,198,255,0.4);
}
.ev-footnote {
margin-top: 28px;
color: rgba(255,255,255,0.4);
font-size: 12px;
}
/* =====================================================================
10. BENEFITS (rewritten in Step 9)
===================================================================== */
/* Centred section-header variant (used by Benefits & FAQ) */
.section-header.center {
margin: 0 auto 64px;
text-align: center;
}
.section-header.center .eyebrow {
justify-content: center;
}
/* 3-column card grid */
.cards-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.benefit {
background: #fff;
padding: 32px;
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
transition: transform .2s, box-shadow .2s;
}
.benefit:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.benefit .icon {
width: 46px;
height: 46px;
margin-bottom: 20px;
border-radius: 14px;
background: var(--blue-soft);
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
}
.benefit h3 {
margin-bottom: 10px;
}
.benefit p {
font-size: 15px;
}
/* =====================================================================
10. FAQ (rewritten in Step 10)
===================================================================== */
.faq-list {
max-width: 860px;
margin: 0 auto;
}
details.faq {
border-bottom: 1px solid var(--border);
transition: background .2s;
}
details.faq summary {
list-style: none;
padding: 22px 8px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
color: var(--navy);
font-size: 17px;
gap: 20px;
}
details.faq summary::-webkit-details-marker {
display: none;
}
details.faq summary::after {
content: '+';
font-size: 26px;
color: var(--blue);
font-weight: 300;
flex-shrink: 0;
transition: transform .2s;
}
details.faq[open] summary::after {
transform: rotate(45deg);
}
details.faq[open] {
background: #fff;
}
details.faq .a {
padding: 0 8px 22px;
color: var(--muted);
font-size: 15px;
line-height: 1.65;
max-width: 78ch;
}
/* =====================================================================
11. CONTACT (rewritten in Step 11)
===================================================================== */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.contact-info p {
font-size: 17px;
margin-bottom: 28px;
line-height: 1.5;
}
.contact-line {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 18px;
}
.contact-line .label {
font-size: 12px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.contact-line .val {
font-size: 17px;
color: var(--navy);
font-weight: 600;
}
.contact-line .val a {
color: var(--navy);
}
.contact-line .val a:hover {
color: var(--blue);
}
.contact-form-full {
padding: 32px;
background: #fff;
border: 1px solid var(--border-2);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
/* =====================================================================
12. CONTACT FORM (CF7)
===================================================================== */
form.wpcf7-form {
text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--blue);
border-radius: var(--radius-lg);
}
.wpcf7-form-control-wrap input {
border: 1px solid var(--border);
border-radius: 20px;
padding: 16px 16px 16px 50px;
width: 100%;
margin-bottom: 16px;
font-family: 'Figtree', system-ui, sans-serif;
}
.contacts .wpcf7 {
margin-top: 32px;
}
.wpcf7-form-control.wpcf7-submit {
margin-top: 32px;
}
input.wpcf7-text {
background-repeat: no-repeat;
background-position: 3% 50%;
position: relative;
z-index: 5;
}
.hero-contact input.wpcf7-text {
background-position: 1.5% 50%;
}
.wpcf7-spinner {
display: none;
margin-left: auto;
margin-right: auto;
}
input.wpcf7-text.form-name {
background-image: url(../img/contacts/user.svg);
}
input.wpcf7-text.wpcf7-email {
background-image: url(../img/contacts/email_c.svg);
}
input.wpcf7-text.wpcf7-tel {
background-image: url(../img/contacts/tel.svg);
}
.wpcf7-form-control:focus {
box-shadow: none;
outline: 0;
}
.wpcf7-acceptance .wpcf7-list-item {
margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item label {
display: flex;
}
.wpcf7-acceptance .wpcf7-list-item-label {
font-weight: 400;
font-size: 14px;
line-height: 143%;
color: var(--muted);
font-family: 'Figtree', system-ui, sans-serif;
padding: 0 16px 0 11px;
text-align: left;
}
.wpcf7 input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
min-width: 18px;
border: 1.5px solid var(--blue);
border-radius: 3px;
cursor: pointer;
position: relative;
display: inline-block;
vertical-align: middle;
padding: 0;
margin: auto;
}
.wpcf7 input[type="checkbox"]:checked {
background-color: var(--blue);
border-color: var(--blue);
}
.wpcf7 input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wpcf7-list-item-label a {
text-decoration: underline;
text-decoration-skip-ink: none;
color: var(--blue);
}
/* =====================================================================
13. FOOTER (rewritten in Step 3)
===================================================================== */
footer.site-footer {
background: #fff;
border-top: 1px solid var(--border);
padding: 80px 0 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 40px;
}
.footer-col h4 {
font-size: 13px;
color: var(--muted);
margin-bottom: 18px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-col a {
display: block;
color: var(--navy);
font-size: 14.5px;
margin-bottom: 10px;
font-weight: 500;
text-decoration: none;
}
.footer-col a:hover {
color: var(--blue);
}
.footer-tagline {
color: var(--muted);
font-size: 14px;
margin: 14px 0 24px;
max-width: 300px;
line-height: 1.55;
}
.app-badges {
display: flex;
gap: 10px;
}
.app-badge {
display: inline-flex;
text-decoration: none;
transition: opacity 0.15s;
}
.app-badge:hover { opacity: 0.85; }
.app-badge img { display: block; height: 44px; width: auto; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
margin-top: 48px;
border-top: 1px solid var(--border-2);
flex-wrap: wrap;
gap: 20px;
}
.trust-badges {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.trust-badge {
display: inline-flex;
align-items: center;
padding: 7px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.trust-badge img {
display: block;
height: 28px;
width: auto;
object-fit: contain;
}
.copyright {
font-size: 13px;
color: var(--muted);
}
/* =====================================================================
14. MAP / LICENSED STATES (Step 6: section wrapper → block; map plugin CSS preserved)
===================================================================== */
.map {
padding: 120px 0;
}
.map__title {
margin-bottom: 16px;
}
.map__desc {
margin-bottom: 25px;
}
.igm-map-content {
background: #F8FAFD;
padding: 32px;
border-radius: var(--radius-xl);
margin-top: 70px;
}
.map_wrapper .map_container {
margin-top: 44px;
}
.map-legend::before {
content: url('data:image/svg+xml,');
display: block;
}
#default_322, #default_312, #default_324, #default_326, #default_329, #default_398,
#default_388, #default_393, #default_396, #default_400, #default_484, #default_471,
#default_469, #default_476, #default_478, #default_485, #default_486, #default_487, #default_488 {
background: #F8FAFD;
padding: 32px;
border-radius: var(--radius-xl);
margin-top: 70px;
}
.igm_content_right_1_3 ul {
margin: 0;
padding-left: 20px;
}
.igm_content_right_1_3 .text-large {
margin-bottom: 16px;
}
.igm_content_right_1_3 .igm-map-content {
background: #F8FAFD;
padding: 32px;
border-radius: var(--radius-xl);
}
#states .nav-tabs .nav-link {
border: none;
font-size: 14px;
padding-top: 10px;
}
#states .nav-tabs .nav-item.show .nav-link, #states .nav-tabs .nav-link.active {
border-color: transparent;
border-bottom: 1.5px solid #0064DD;
color: #0064DD;
font-weight: 500;
}
#states .nav-tabs {
border-bottom: none;
}
#states .nav-link {
font-size: 16px;
color: #5C6370;
line-height: 150%;
font-weight: 400;
}
/* =====================================================================
15. RESPONSIVE
All breakpoints live here — AFTER all component base styles — so
media-query rules correctly override them via the CSS cascade.
===================================================================== */
/* Wide tablet — 1080px */
@media (max-width: 1080px) {
.nav-links { gap: 22px; }
.hero-grid { column-gap: 40px; }
/* Care grid: 2+2 to avoid very narrow cards on tablet */
.care-grid { grid-template-columns: repeat(2, 1fr); }
/* Steps: 2-col on tablets */
.steps { grid-template-columns: 1fr 1fr; gap: 20px; }
.step { padding-top: 60px; }
.contact-grid { gap: 48px; }
}
/* Tablet — 992px */
@media (max-width: 992px) {
details.faq summary { font-size: 15.5px; padding: 18px 8px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
/* Mobile — 900px: everything collapses to single column (matches Claude Design) */
@media (max-width: 900px) {
/* Header */
.site-header .nav { padding: 14px 20px; }
.nav-links,
.nav-actions { display: none; }
.nav-toggle { display: inline-flex; }
.mobile-cta-bar { display: flex; }
.announce { padding: 8px 16px; font-size: 12px; line-height: 1.5; }
/* Sections */
section.block { padding: 56px 0; }
.section-header { margin-bottom: 36px; }
.section-header p { font-size: 15.5px; }
/* Hero — single column */
.hero { padding: 48px 0 64px; overflow: hidden; }
.hero-grid { grid-template-columns: 1fr; gap: 28px; }
.hero-grid > * { min-width: 0; max-width: 100%; }
.hero .sub { font-size: 16.5px; max-width: none; }
.hero-cta-row { margin-top: 24px; }
.hero-cta-row .btn { flex: 1; min-width: 140px; justify-content: center; }
.path-step { padding: 14px 16px; gap: 14px; }
.path-step .num { width: 40px; height: 40px; }
.path-step h4 { font-size: 15px; }
.path-step .meta { font-size: 12.5px; }
.path-connector { margin-left: 36px; height: 16px; }
.director-card .dc-portrait-col { width: 72px; padding: 10px 6px; }
.director-card .portrait-wrap { width: 46px; height: 46px; }
.director-card .portrait { width: 46px; height: 46px; }
.director-card .dc-body { padding: 12px 14px; }
.director-card .name { font-size: 14px; }
.director-card .cred { font-size: 11.5px; }
.hero-contact { padding: 18px; }
/* Care model — single column */
.care-grid { grid-template-columns: 1fr; gap: 16px; }
.care-card { padding: 24px; }
.care-card .icon { width: 44px; height: 44px; margin-bottom: 18px; }
/* How It Works — vertical list, number circle on left */
.steps { grid-template-columns: 1fr; gap: 16px; }
.step { padding-top: 0; padding-left: 64px; min-height: 48px; }
.step .step-num { top: 0; left: 0; }
/* Benefits — single column */
.cards-3 { grid-template-columns: 1fr; gap: 16px; }
.benefit { padding: 24px; }
/* Contact — single column */
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.contact-form-full { padding: 24px; }
/* Evidence Strip — single column */
.evidence-strip { padding: 64px 0; }
.evidence-strip .ev-lead { margin-bottom: 32px; }
.ev-intro { font-size: 15.5px; }
.ev-quote-grid { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
.ev-quote { padding: 22px; }
.ev-endorsers { padding: 20px; }
/* Map */
.map { padding: 56px 0; }
.igm-map-content { padding: 22px; margin-top: 32px; }
}
/* Small phones — 768px */
@media (max-width: 768px) {
footer.site-footer { padding: 56px 0 120px; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-top: 24px;
margin-top: 32px;
}
.app-badges { flex-wrap: wrap; }
}
/* Very small phones — 520px */
@media (max-width: 520px) {
.container { padding-left: 16px; padding-right: 16px; }
.hero-cta-row { flex-direction: column; }
.hero-cta-row .btn { width: 100%; justify-content: center; }
.nav-actions .btn-outline { display: none; }
}
/* =====================================================================
WIDE SCREENS — 1440px+
On ultra-wide / 4K displays, clamp the nav padding and let
.container handle centering. Full-bleed section backgrounds
naturally extend to viewport width.
===================================================================== */
@media (min-width: 1440px) {
.site-header .nav { padding-left: 48px; padding-right: 48px; }
.hero { padding: 96px 0 140px; }
section.block { padding: 100px 0; }
}