/*
Theme Name: Admore Group
Theme URI: https://admoregroup.com
Author: Admore Group
Author URI: https://admoregroup.com
Description: Custom WordPress theme for Admore Group, built from the approved "We Show Up" brand system (Punchy, Balanced direction). Includes Customizer controls for contact info and hero copy, a Primary nav menu, two footer nav menus, and lightweight Testimonial/FAQ post types.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: admore-group
*/
/* =========================================================
0. RESET + BRAND VARIABLES
========================================================= */
:root {
/* --- Official brand palette (Sept 2026) --------------------------------
Replaces every earlier placeholder pass (the teal/soft-blue softening,
then the exploratory floral variant) with the CEO's actual approved
brand colors: #6e9cd0 (medium blue), #62d2e0 (turquoise), #7591b0
(muted slate blue), #f8ff92 (light yellow-green), and white. These are
final, not placeholder — no more swapping pending.
The brand guide is 4 colors + white, all light/mid-tone — none of them
work as a dark "ink" color for body text or a dark hero/footer
background (contrast-checked: white text on any of the 4 only clears
~3.2:1, enough for large bold headings but not body copy). --ink below
is therefore a derived dark blue-gray in the same muted-slate family as
--slate, added so text stays readable — it is not itself one of the 4
brand colors. --cream/--sub/--line are similarly derived supporting
neutrals (card backgrounds, secondary text, dividers), tinted cool-blue
instead of the old warm-peach/mauve versions so they sit quietly behind
the brand colors instead of clashing with them. Variable names kept
from the previous passes so this is still just a palette swap — every
rule below already references these names. */
--ink: #2E3A47; /* derived dark blue-gray (not a guide color) — needed for text/dark-bg contrast; see note above */
--coral: #6E9CD0; /* brand medium blue — primary accent (buttons, blobs, icons) */
--coral-dark: #4E7BA0; /* derived — darker shade of the medium blue, for hover states and for legible white-on-color button fills */
--teal: #62D2E0; /* brand turquoise — secondary accent */
--teal-dark: #3AA0AC; /* derived — darker turquoise, same reasoning as --coral-dark */
--slate: #7591B0; /* brand muted slate blue — quaternary accent (icon cycling, secondary blob layer, footer accent) */
--yellow: #F8FF92; /* brand light yellow-green — tertiary accent, backgrounds/badges only (too light for text/number color on white) */
--cream: #F2F7FA; /* derived — cool pale blue-white for card backgrounds (was warm peach, then floral pink-tinted) */
--paper: #FFFFFF; /* brand white */
--sub: #56636E; /* derived — muted cool gray for secondary text, in the --ink family */
--line: #E1EAF0; /* derived — pale blue-gray for dividers/borders */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow-x: hidden;
line-height: 1.5;
}
h1, h2, h3, h4, .display {
font-family: 'Sora', 'Inter', sans-serif;
margin: 0;
text-transform: uppercase;
letter-spacing: -0.01em;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; position: relative; }
svg.icon {
width: 24px; height: 24px; stroke: currentColor; fill: none;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block;
}
/* Screen-reader only utility (skip link, form labels) */
.screen-reader-text {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 999999;
background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* =========================================================
1. TOP BANNER + HEADER
========================================================= */
.site-banner {
background: var(--ink); color: #fff; font-size: 12px; padding: 6px 0;
display: flex; justify-content: center; gap: 28px; font-weight: 700; flex-wrap: wrap; text-align: center;
}
.site-banner a { color: #fff; }
.site-banner span.dot { color: var(--yellow); }
.site-header {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 0; border-bottom: 2px solid color-mix(in srgb, var(--ink) 15%, transparent); gap: 16px; flex-wrap: wrap;
min-height: 0;
}
.site-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; color: var(--ink); }
.site-logo .mark {
width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
background: linear-gradient(135deg, var(--coral), var(--yellow));
display: inline-block; flex-shrink: 0;
}
/* Logo sizing — applies to WP's custom-logo output wherever it's used
(header, footer) so an oversized uploaded image can never blow out
the layout. Constrains height, not just width, and caps width too.
Belt-and-suspenders: the first block targets the exact markup this
theme outputs (.site-logo-wrap > .custom-logo-link > img.custom-logo);
the second, broader block is a safety net that clamps ANY ![]()
that
ends up directly inside the header/footer/banner, in case a logo is
ever added a different way (e.g. hard-coded into a widget or a page
builder block) rather than through Customizer > Site Identity. If the
header still looks oversized after installing this update, it almost
always means the browser or a caching plugin is still serving the
OLD style.css — hard-refresh and purge any cache/CDN first. */
.site-logo-wrap { display: flex; align-items: center; line-height: 0; max-height: 46px; overflow: hidden; }
.site-logo-wrap .custom-logo-link { display: inline-flex; align-items: center; }
.site-logo-wrap img,
.site-logo-wrap img.custom-logo {
height: 40px !important;
width: auto !important;
max-width: 200px !important;
max-height: 40px !important;
object-fit: contain;
}
.footer-logo img.custom-logo,
.footer-logo .site-logo { filter: none; }
.footer-logo,
.footer-logo img,
.footer-logo img.custom-logo { max-height: 34px !important; height: 34px !important; }
/* Safety net: clamp any stray ![]()
placed directly in these regions
(not just ones wrapped in .site-logo-wrap) so a logo added outside
the intended Customizer flow still can't blow out the layout. */
.site-header > .wrap img,
.site-banner img,
.site-footer .foot-grid > div:first-child img {
max-height: 40px !important;
width: auto !important;
}
.primary-nav ul { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.primary-nav a {
font-size: 14.5px; font-weight: 800; color: var(--ink); text-transform: uppercase;
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--coral); }
/* "Resources" dropdown in the primary nav.
Rules below are deliberately over-specified with !important: this site
has had page-builder/plugin CSS (Elementor) override plain theme
selectors before (see the footer.php note on the old teal footer), and
a stray global "button { border: ...; padding: ...; }" rule is exactly
the kind of thing that would make the toggle render as a raw bordered
box with an oversized icon instead of inline nav text. */
.primary-nav li.has-dropdown { position: relative !important; }
.primary-nav .dropdown-toggle {
display: inline-flex !important; align-items: center !important; gap: 6px !important;
font-size: 14.5px !important; font-weight: 800 !important; color: var(--ink) !important;
text-transform: uppercase !important; text-decoration: none !important;
background: none !important; background-color: transparent !important;
border: none !important; box-shadow: none !important; outline: none !important;
margin: 0 !important; padding: 0 !important; border-radius: 0 !important;
font-family: inherit !important; line-height: inherit !important;
-webkit-appearance: none !important; appearance: none !important;
cursor: pointer;
}
.primary-nav .dropdown-toggle:hover,
.primary-nav .dropdown-toggle:focus,
.primary-nav .dropdown-toggle:active { color: var(--coral) !important; background: none !important; border: none !important; box-shadow: none !important; }
.primary-nav .dropdown-toggle .caret {
width: 10px !important; height: 7px !important; max-width: 10px !important; max-height: 7px !important;
display: inline-block !important; flex-shrink: 0; transition: transform .15s ease;
}
.primary-nav li.has-dropdown.is-open .dropdown-toggle .caret,
.primary-nav li.has-dropdown:hover .dropdown-toggle .caret { transform: rotate(180deg); }
.primary-nav .dropdown-menu {
display: none !important; position: absolute; top: 100%; left: 0; margin-top: 14px;
background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 12px;
box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent); padding: 8px; min-width: 250px; z-index: 20;
flex-direction: column; gap: 2px; list-style: none;
}
.primary-nav li.has-dropdown:hover .dropdown-menu,
.primary-nav li.has-dropdown.is-open .dropdown-menu { display: flex !important; }
.primary-nav .dropdown-menu li { width: 100%; margin: 0 !important; padding: 0 !important; }
.primary-nav .dropdown-menu a {
display: block !important; padding: 9px 12px !important; border-radius: 8px; font-size: 13px !important;
white-space: nowrap; color: var(--ink) !important; font-weight: 700 !important;
text-transform: none !important; border: none !important; background: none !important;
}
.primary-nav .dropdown-menu a:hover { background: var(--cream) !important; color: var(--coral) !important; }
.menu-toggle { display: none; }
/* Unified referral CTA. Feedback (Sept 2026): "Submit referral button has
different color buttons" — this one class-set had drifted into three
different looks (navy .cta-btn, yellow .cta-btn.yellow, dark .btn-solid
inside .final-cta), all pointing at the same /refer/ action. All three
selectors now share one solid-teal treatment so every "Submit/Make a
Referral" button on the site matches, wherever it appears. */
.cta-btn, .cta-btn.yellow, .final-cta .btn-solid {
/* --teal-dark, not --teal, for the fill — in the floral palette --teal
is a very pale "light blue" meant for backgrounds/accents, too washed
out behind white button text for good contrast/legibility. */
background: var(--teal-dark); color: #fff !important; font-weight: 800; font-size: 14px;
padding: 13px 24px; border-radius: 999px; display: inline-block;
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); box-shadow: 0 8px 20px color-mix(in srgb, var(--teal-dark) 45%, transparent);
text-transform: uppercase; white-space: nowrap;
}
.cta-btn:hover, .cta-btn.yellow:hover, .final-cta .btn-solid:hover { background: color-mix(in srgb, var(--teal-dark) 80%, black); }
.cta-btn.small { padding: 10px 18px; font-size: 12.5px; box-shadow: 0 6px 15px color-mix(in srgb, var(--teal-dark) 35%, transparent); }
.btn-outline {
border: 2.5px solid #fff; color: #fff !important; padding: 12px 22px; border-radius: 999px;
font-weight: 800; font-size: 14px; text-transform: uppercase; display: inline-block;
}
.btn-outline.dark { border-color: var(--ink); color: var(--ink) !important; }
/* =========================================================
2. HERO
========================================================= */
.hero { position: relative; background: var(--ink); overflow: hidden; padding: 60px 0 110px; } /* was 76px 0 150px — tightened per "homepage too busy" feedback, light-trim pass */
.hero .diag-coral {
/* Was a sharp diagonal panel (clip-path polygon). "Curved lines" request
(Sept 2026) swaps it for a soft organic blob instead — border-radius
percentages scale with the element's own box, so this stays smooth
across breakpoints without a fixed-pixel clip-path. */
position: absolute; top: -15%; right: -12%; width: 58%; height: 130%;
background: var(--slate);
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
opacity: .85;
}
.hero .diag-coral::after {
content: ""; position: absolute; top: 30%; left: -18%; width: 55%; height: 55%;
background: var(--coral); border-radius: 63% 37% 41% 59% / 37% 63% 42% 58%;
opacity: .9;
}
.hero-content { position: relative; z-index: 2; max-width: 740px; }
.eyebrow-sticker {
display: inline-flex; align-items: center; gap: 8px; background: var(--yellow); color: var(--ink);
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); padding: 7px 16px; border-radius: 999px; transform: rotate(-1deg);
text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 800; margin-bottom: 26px;
}
h1.mega { font-size: clamp(2.3rem, 5.6vw, 4.4rem); line-height: 1.02; font-weight: 800; margin-bottom: 24px; }
h1.mega .line { display: block; }
h1.mega .l1 { color: #fff; }
h1.mega .l2 { color: var(--yellow); }
h1.mega .l3 { color: var(--teal); }
.hero p.sub {
font-size: 17.5px; line-height: 1.6; color: #FFF3EC; margin-bottom: 32px; max-width: 460px;
font-weight: 500; text-transform: none;
}
.hero .btns { display: flex; gap: 16px; flex-wrap: wrap; }
.floating-badge {
position: absolute; top: 54px; right: 48px; z-index: 3; width: 132px; height: 132px; border-radius: 50%;
background: var(--yellow); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
display: flex; align-items: center; justify-content: center; text-align: center;
font-weight: 800; font-size: 12px; line-height: 1.35; padding: 14px;
transform: rotate(5deg); box-shadow: 0 10px 25px color-mix(in srgb, var(--ink) 35%, transparent);
}
/* Trust strip — floats over the bottom of the hero */
.trust-outer {
position: relative; z-index: 2; margin-top: -70px; background: var(--cream);
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 18px; box-shadow: 0 10px 26px rgba(46,58,71,.10);
}
.trust-inner {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 24px 32px;
}
.trust-stat { font-size: 13.5px; color: var(--ink); font-weight: 800; text-transform: uppercase; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.insurers-line { font-size: 12.5px; color: var(--sub); text-transform: none; margin-top: 12px; font-weight: 600; } /* replaces the removed scrolling logo marquee — see front-page.php comment */
.badge { background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 800; }
.badge.t { background: var(--teal); }
/* Insurer/partner logo marquee — replaces the old plain-text insurer line.
Logos are unmodified PNGs (assets/partners/*.png); the navy fill is done
purely in CSS via mask-image, using each PNG's own alpha channel as the
shape. Swap --ink for --coral below in .partner-logo if navy doesn't
stand out enough against this section's cream background once live. */
.insurers-marquee {
position: relative;
flex: 1 1 320px;
min-width: 220px;
max-width: 420px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.insurers-track {
display: flex;
align-items: center;
gap: 36px;
width: max-content;
animation: insurers-scroll 30s linear infinite;
}
.insurers-marquee:hover .insurers-track { animation-play-state: paused; }
.partner-logo {
flex: 0 0 auto;
display: inline-block;
width: 116px;
height: 30px;
background-color: var(--ink);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
opacity: .8;
transition: opacity .2s ease;
}
.insurers-marquee:hover .partner-logo { opacity: 1; }
@keyframes insurers-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.insurers-track { animation: none; }
}
/* =========================================================
3. GENERIC SECTION LAYOUT
========================================================= */
section.block { padding: 60px 0 54px; } /* was 84px 0 76px — tightened per "homepage too busy" feedback, light-trim pass */
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-head .kicker {
display: inline-block; color: var(--ink); font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; font-size: 12px; margin-bottom: 14px; background: var(--teal);
padding: 6px 16px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.3rem); line-height: 1.14; font-weight: 800; }
.section-head p { color: var(--sub); font-size: 15.5px; margin-top: 16px; line-height: 1.6; text-transform: none; }
/* Steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 16px; padding: 24px 20px; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent); }
.step:nth-child(1) { transform: rotate(-0.7deg); } .step:nth-child(2) { transform: rotate(0.5deg); }
.step:nth-child(3) { transform: rotate(-0.4deg); } .step:nth-child(4) { transform: rotate(0.7deg); }
.step .num {
width: 40px; height: 40px; border-radius: 50%; font-weight: 800; font-size: 17px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--ink);
}
.step:nth-child(1) .num { background: var(--coral); color: #fff; } .step:nth-child(2) .num { background: var(--teal); color: #fff; }
.step:nth-child(3) .num { background: var(--slate); color: #fff; } .step:nth-child(4) .num { background: var(--yellow); }
.step h3 { font-size: 15.5px; color: var(--ink); margin-bottom: 8px; font-weight: 800; }
.step p { font-size: 13.5px; color: var(--sub); line-height: 1.5; margin: 0; text-transform: none; }
/* Services */
.services-fan { display: flex; justify-content: center; align-items: flex-start; padding: 10px 0 30px; flex-wrap: wrap; gap: 20px; }
.svc-card { width: 300px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 20px; padding: 30px 26px; box-shadow: 0 10px 25px color-mix(in srgb, var(--ink) 35%, transparent); position: relative; background: var(--paper); }
.svc-card.c1 { background: #D8E0F2; transform: rotate(-1.5deg); z-index: 3; }
.svc-card.c2 { background: #C6EEE7; transform: rotate(1deg) translateY(6px); z-index: 2; }
.svc-card.c3 { background: #E2D5FF; transform: rotate(-0.8deg); z-index: 1; }
.svc-icon { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; color: #fff; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.svc-card.c1 .svc-icon { background: var(--coral); } .svc-card.c2 .svc-icon { background: var(--teal); } .svc-card.c3 .svc-icon { background: var(--slate); }
.svc-card h3 { font-size: 20px; color: var(--ink); margin-bottom: 10px; font-weight: 800; }
.svc-card p { font-size: 13.5px; color: var(--sub); line-height: 1.6; margin: 0 0 16px; text-transform: none; }
.svc-card .link { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; }
.integrated-wrap { text-align: center; margin-top: 34px; }
.integrated-note {
display: inline-block; font-size: 14px; color: var(--ink); font-weight: 800; background: var(--yellow);
padding: 11px 22px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); box-shadow: 0 8px 18px rgba(46,58,71,.14); text-transform: uppercase;
}
/* Why Admore */
.why { background: var(--ink); color: #fff; position: relative; }
.why .section-head h2 { color: #fff; }
.why .section-head .kicker { background: var(--coral); color: #fff; }
.why .section-head p { color: #C7D9E2; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card { background: #fff; border-radius: 18px; padding: 26px 20px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.14); }
.why-card .wic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.why-card:nth-child(4n+1) .wic { background: var(--coral); color: #fff; } .why-card:nth-child(4n+2) .wic { background: var(--teal); color: #fff; }
.why-card:nth-child(4n+3) .wic { background: var(--yellow); color: var(--ink); } .why-card:nth-child(4n+4) .wic { background: var(--slate); color: #fff; }
.why-card h3 { font-size: 15.5px; color: var(--ink); margin-bottom: 8px; font-weight: 800; }
.why-card p { font-size: 13px; color: var(--sub); line-height: 1.55; margin: 0; text-transform: none; }
/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-top: 10px; }
.t-card { background: var(--cream); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 10px; padding: 28px 24px 22px; position: relative; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent); }
.t-card:nth-child(1) { transform: rotate(-1deg); } .t-card:nth-child(2) { transform: rotate(0.8deg); } .t-card:nth-child(3) { transform: rotate(-0.6deg); }
.t-card p.quote { font-size: 14.5px; color: var(--ink); line-height: 1.6; margin: 0 0 18px; text-transform: none; font-weight: 500; }
.t-card .who { display: flex; align-items: center; gap: 10px; }
.t-card .avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); background: var(--coral); }
.t-card .who span { font-size: 13px; font-weight: 800; color: var(--ink); text-transform: uppercase; }
/* Partner band */
.partner-band {
background: var(--coral); color: #fff; border-radius: 22px; padding: 46px 44px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: 0 14px 32px rgba(46,58,71,.16);
}
.partner-band h2 { color: #fff; font-size: 25px; margin-bottom: 10px; font-weight: 800; }
.partner-band p { color: #EDE7FF; font-size: 14.5px; margin: 0; max-width: 440px; line-height: 1.55; text-transform: none; }
/* FAQ */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
display: flex; gap: 18px; align-items: flex-start; background: var(--paper);
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 14px; padding: 22px 22px;
margin-bottom: 16px; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}
.faq-list .faq-item:last-child { margin-bottom: 0; }
.faq-list .faq-item:nth-child(odd) { transform: rotate(-0.4deg); }
.faq-list .faq-item:nth-child(even) { transform: rotate(0.35deg); }
.faq-item .qmark { width: 32px; height: 32px; border-radius: 8px; background: var(--yellow); color: var(--ink); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.faq-item h3 { font-size: 16px; color: var(--ink); margin-bottom: 6px; font-weight: 800; }
.faq-item p { font-size: 14px; color: var(--sub); margin: 0; line-height: 1.6; text-transform: none; }
.faq-more { text-align: center; margin-top: 28px; }
.faq-more a { color: var(--coral-dark); font-weight: 800; font-size: 14px; text-transform: uppercase; }
/* "Admore by the Numbers" stat band — homepage only. Added Sept 2026 per
client feedback; sits right under the hero/trust strip. Big numbers cycle
through the softened accent colors (teal/blue/green/violet) so "blues and
greens" both actually show up, not just teal. */
.stats-band { padding: 8px 0 12px; }
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.stat-card {
background: var(--cream); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 16px;
padding: 26px 18px; text-align: center; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}
.stat-num {
font-family: 'Sora', 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem);
line-height: 1; margin-bottom: 8px;
}
/* -dark variants (or a darkened color-mix, for --green which has no -dark
twin) here, not the plain pastel — a big number is the whole point of
this section, and the plain pastels read as too washed-out/low-contrast
against the cream card at this size. */
.stat-card:nth-child(4n+1) .stat-num { color: var(--coral-dark); }
.stat-card:nth-child(4n+2) .stat-num { color: var(--teal-dark); }
.stat-card:nth-child(4n+3) .stat-num { color: var(--slate); }
.stat-card:nth-child(4n+4) .stat-num { color: var(--ink); }
.stat-label {
font-size: 13.5px; color: var(--sub); font-weight: 700; text-transform: uppercase;
letter-spacing: .01em; line-height: 1.35;
}
@media (max-width: 760px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Embedded Zoho forms (Contact, Connect, Intake — inserted as raw wp:html
blocks, so they arrive with zero styling: default browser text inputs and
a tiny gray "Submit" button). While investigating "the Connect/Refer
button doesn't work" (Sept 2026 feedback) this unstyled submit button was
the one concrete thing found that could read as broken — it's a real,
functioning Zoho form (not touched here, only its appearance), just
visually easy to miss/mistake for non-functional next to the rest of the
branded page. Scoped to .page-content so it can't leak onto admin forms. */
.page-content form input[type="text"],
.page-content form input[type="email"],
.page-content form input[type="tel"],
.page-content form textarea {
width: 100%; max-width: 420px; padding: 10px 14px; margin: 4px 0 14px;
border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; font-size: 14px;
display: block; box-sizing: border-box;
}
.page-content form input[type="submit"],
.page-content form button[type="submit"] {
/* --teal-dark, not --teal — see the same fix/comment on .cta-btn above:
--teal is a pale "light blue" in the floral palette, too washed out
behind white button text. */
background: var(--teal-dark); color: #fff !important; font-weight: 800; font-size: 14px;
padding: 12px 26px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
box-shadow: 0 8px 20px color-mix(in srgb, var(--teal-dark) 45%, transparent); text-transform: uppercase; cursor: pointer;
}
.page-content form input[type="reset"] {
background: none; border: 1.5px solid var(--line); color: var(--sub) !important;
padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 13px;
text-transform: uppercase; cursor: pointer; margin-left: 8px;
}
/* Final CTA */
.final-cta {
text-align: center; background: var(--coral); border-radius: 24px; padding: 64px 30px; color: #fff;
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 35%, transparent); position: relative; overflow: hidden;
}
.final-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.5rem); margin-bottom: 14px; font-weight: 800; position: relative; }
.final-cta p { color: #EAF4FA; margin-bottom: 28px; font-size: 16px; text-transform: none; position: relative; }
.final-cta .btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }
/* .final-cta .btn-solid's real color rule now lives in section 1 above,
unified with .cta-btn/.cta-btn.yellow — see the comment there. Keeping
this selector's sizing-only remnants out entirely so there's exactly one
place that sets this button's look. */
.final-cta .btn-line { border: 2.5px solid #fff; color: #fff !important; padding: 14px 26px; border-radius: 999px; font-weight: 800; font-size: 14.5px; text-transform: uppercase; display: inline-block; }
/* =========================================================
4. FOOTER
========================================================= */
.site-footer { background: var(--ink); color: #D7E6ED; padding: 38px 0 22px; font-size: 13px; border-top: 4px solid var(--teal); }
.foot-cta {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
padding: 28px 0; margin-bottom: 24px;
border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14);
}
.foot-cta h3 { color: #fff; font-size: 19px; margin-bottom: 4px; text-transform: uppercase; }
.foot-cta p { color: #C7D9E2; font-size: 13.5px; margin: 0; text-transform: none; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.foot-grid h4 { color: var(--yellow); font-size: 12px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.foot-grid a { display: block; color: #C7D9E2; margin-bottom: 6px; font-weight: 500; text-transform: none; font-size: 13px; }
.foot-grid a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; text-align: center; color: #93A9B7; font-size: 12px; }
/* =========================================================
5. INNER PAGES (page.php / single.php / index.php)
---------------------------------------------------------
.page-banner reuses several homepage-hero classes as-is (they aren't
scoped to .hero, so they already apply here): .hero-content,
.eyebrow-sticker, h1.mega, .cta-btn. The rules below cover what's
specific to the shorter inner-page banner — sizing/positioning, plus
.sub and .btns variants (the homepage's own .hero .sub / .hero .btns
are scoped to .hero and don't reach here), and the .accent highlight
color used to punch up one phrase in an inner page's title the same
way the homepage hero highlights individual lines.
========================================================= */
.page-banner { background: var(--ink); padding: 72px 0 60px; position: relative; overflow: hidden; }
.page-banner .diag-coral {
/* Same "curved lines" swap as .hero .diag-coral above — soft blob instead
of a sharp diagonal clip-path. */
position: absolute; top: -20%; right: -10%; width: 50%; height: 140%;
background: var(--slate); border-radius: 63% 37% 41% 59% / 37% 63% 42% 58%; opacity: .85;
}
.page-banner .diag-coral::after {
content: ""; position: absolute; top: 35%; left: -15%; width: 50%; height: 50%;
background: var(--coral); border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; opacity: .9;
}
.page-banner .banner-badge {
position: absolute; top: 50%; right: 40px; z-index: 3; width: 88px; height: 88px; border-radius: 50%;
background: var(--yellow); color: var(--ink); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
display: flex; align-items: center; justify-content: center; text-align: center;
font-weight: 800; font-size: 9.5px; line-height: 1.3; padding: 8px;
transform: translateY(-50%) rotate(6deg); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}
@media (max-width: 680px) { .page-banner .banner-badge { display: none; } }
.page-banner h1 { position: relative; z-index: 2; color: #fff; font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; }
.page-banner h1 .accent { color: var(--yellow); }
.page-banner .breadcrumb { position: relative; z-index: 2; color: #C7D9E2; font-size: 13px; margin-top: 10px; text-transform: none; }
.page-banner .breadcrumb a { color: var(--yellow); }
.page-banner p.sub {
position: relative; z-index: 2; font-size: 15.5px; line-height: 1.6; color: #FFF3EC;
margin: 16px 0 26px; max-width: 520px; font-weight: 500; text-transform: none;
}
.page-banner .btns { position: relative; z-index: 2; display: flex; gap: 16px; flex-wrap: wrap; }
.page-content-wrap { max-width: 840px; margin: 0 auto; padding: 76px 28px 100px; }
.page-content { font-size: 16.5px; line-height: 1.8; color: #2A2A2A; }
.page-content h2 { font-size: 28px; font-weight: 800; color: var(--ink); margin: 52px 0 18px; letter-spacing: -0.01em; }
.page-content h3 { font-size: 20px; color: var(--ink); margin: 38px 0 14px; text-transform: none; font-weight: 800; }
.page-content p { margin: 0 0 22px; }
.page-content ul, .page-content ol { margin: 0 0 18px 22px; padding: 0; }
.page-content li { margin-bottom: 8px; }
.page-content a { color: var(--coral-dark); text-decoration: underline; }
.page-content img { border-radius: 14px; margin: 20px 0; }
.page-content blockquote {
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); background: var(--cream); border-radius: 14px; padding: 20px 24px;
margin: 28px 0; font-style: italic; box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent);
}
/* Blog / archive list (index.php, single.php meta) */
.blog-list { max-width: 840px; margin: 0 auto; padding: 64px 28px 90px; display: flex; flex-direction: column; gap: 28px; }
.blog-card { border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 16px; padding: 26px 28px; background: var(--paper); box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent); }
.blog-card .meta { font-size: 12px; color: var(--sub); text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.blog-card h2 { font-size: 22px; margin-bottom: 10px; }
.blog-card h2 a { color: var(--ink); }
.blog-card p { color: var(--sub); font-size: 14.5px; line-height: 1.6; text-transform: none; margin: 0 0 14px; }
.blog-card .read-more { color: var(--coral-dark); font-weight: 800; font-size: 13px; text-transform: uppercase; }
.single-meta { font-size: 12px; color: var(--sub); text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pagination a, .pagination span {
border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: 13px; color: var(--ink);
}
.pagination .current { background: var(--ink); color: #fff; }
.no-results { text-align: center; padding: 60px 0; color: var(--sub); }
/* =========================================================
6. RESPONSIVE
========================================================= */
@media (max-width: 980px) {
.steps, .why-grid, .foot-grid, .testimonials { grid-template-columns: 1fr 1fr; }
.primary-nav { display: none; width: 100%; order: 3; }
.primary-nav.is-open { display: block; }
.primary-nav ul { flex-direction: column; gap: 6px; padding: 16px 0; align-items: flex-start; }
.primary-nav li.has-dropdown { width: 100%; }
.primary-nav .dropdown-menu {
display: none !important; position: static; margin-top: 8px; margin-left: 12px; box-shadow: none;
border-width: 2px; width: calc(100% - 12px);
}
.primary-nav li.has-dropdown:hover .dropdown-menu { display: none !important; }
.primary-nav li.has-dropdown.is-open .dropdown-menu { display: flex !important; }
.menu-toggle {
display: inline-flex; align-items: center; gap: 8px; background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--ink) 20%, transparent);
border-radius: 8px; padding: 8px 14px; font-weight: 800; font-size: 13px; color: var(--ink);
}
.hero { padding-bottom: 200px; }
.floating-badge { width: 110px; height: 110px; font-size: 10.5px; top: 30px; right: 20px; }
.svc-card { width: 100%; max-width: 340px; }
.services-fan { flex-direction: column; align-items: center; }
}
@media (max-width: 640px) {
.why-grid, .testimonials, .foot-grid { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr 1fr; }
.site-header { flex-wrap: wrap; }
.insurers-marquee { max-width: 100%; flex-basis: 100%; }
}
/* Bolder treatment for .why-card when reused on white inner-page content
(as opposed to its original dark .why homepage section, which keeps its
own whitish shadow further up this file). */
.page-content .why-card { box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 35%, transparent); }
.page-content .why-grid > .why-card:nth-child(odd) { transform: rotate(-0.6deg); }
.page-content .why-grid > .why-card:nth-child(even) { transform: rotate(0.5deg); }
/* =========================================================
6. TEAM GRID (Meet the Team page)
---------------------------------------------------------
Same card/border/shadow language as .svc-card and .why-card, sized for
a staff directory: a circular photo slot on top, name/role below. Until
real headshots are uploaded, .team-avatar holds a plain silhouette icon
on a cycling brand-color background instead of an ![]()
— swap in a
real photo per person by replacing that inner