/* ====================================================================
"FORTUNE 100 FINANCIAL SERVICES" THEME — Custom CSS for GoHighLevel
====================================================================
PASTE THIS EXACTLY AS-IS into: Settings (gear icon) > Custom CSS
Do NOT wrap it in around it if you're instead pasting
into an HTML/Code Embed element rather than the Custom CSS field.)
==================================================================== */
/* ---------- 1. FONT IMPORT ---------- */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,
[email protected],400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700;800&display=swap');
/* ---------- 2. DESIGN TOKENS ---------- */
:root{
/* Core palette */
--sc-navy-950:#0a1830;
--sc-navy-900:#0e2245;
--sc-navy-800:#15315f;
--sc-navy-700:#1d4079;
--sc-charcoal:#1c1f24;
--sc-ink:#212833;
--sc-paper:#fbfaf7;
--sc-white:#ffffff;
--sc-line:#e2e1da;
--sc-line-dark:#2a3a57;
--sc-gold:#b08d57;
--sc-gold-dark:#8d6f43;
--sc-gold-tint:#f4ecdd;
--sc-success:#2e6b4f;
--sc-text-muted:#5b6373;
/* Typography */
--sc-font-headline:'Source Serif 4', Georgia, 'Times New Roman', serif;
--sc-font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
/* Radius / shadow / spacing */
--sc-radius-sm:2px;
--sc-radius-md:4px;
--sc-shadow-card:0 1px 2px rgba(10,24,48,.06), 0 8px 24px rgba(10,24,48,.06);
--sc-shadow-lift:0 12px 32px rgba(10,24,48,.14);
--sc-section-pad:96px;
--sc-section-pad-mobile:56px;
}
/* ---------- 3. GLOBAL RESET / BASE TYPE ---------- */
body, .hl_page-wrapper, #main-content{
background:var(--sc-paper) !important;
font-family:var(--sc-font-body) !important;
color:var(--sc-ink) !important;
-webkit-font-smoothing:antialiased;
letter-spacing:.1px;
}
h1, h2, h3, .elHeadline, .elHeadline *{
font-family:var(--sc-font-headline) !important;
color:var(--sc-navy-950) !important;
font-weight:600 !important;
letter-spacing:-0.01em;
line-height:1.15 !important;
}
h1, .elHeadline h1{ font-size:clamp(2.1rem, 4vw, 3.4rem) !important; }
h2, .elHeadline h2{ font-size:clamp(1.6rem, 3vw, 2.4rem) !important; }
h3, .elHeadline h3{ font-size:clamp(1.2rem, 2vw, 1.6rem) !important; }
p, .elText, .elText *, li, label{
font-family:var(--sc-font-body) !important;
color:var(--sc-ink);
line-height:1.65;
font-size:1.05rem;
}
a{ color:var(--sc-navy-800); text-decoration:none; }
a:hover{ color:var(--sc-gold-dark); }
.elHeadline{ position:relative; }
.elHeadline::after{
content:"";
display:block;
width:56px;
height:3px;
background:var(--sc-gold);
margin-top:14px;
}
.elHeadline[style*="text-align: center"]::after,
.elHeadline[style*="text-align:center"]::after{
margin-left:auto; margin-right:auto;
}
/* ---------- 4. HEADER / NAV ---------- */
.hl_header, header, .elHeader{
background:var(--sc-white) !important;
border-bottom:1px solid var(--sc-line) !important;
box-shadow:none !important;
}
.hl_header .elMenuLink, header a, .elNavigation a{
font-family:var(--sc-font-body) !important;
font-weight:600 !important;
font-size:.92rem !important;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--sc-ink) !important;
}
.hl_header .elMenuLink:hover, .elNavigation a:hover{ color:var(--sc-navy-800) !important; }
/* ---------- 5. SECTIONS / LAYOUT RHYTHM ---------- */
.elFullWidthSection, .elSection, section{
padding-top:var(--sc-section-pad);
padding-bottom:var(--sc-section-pad);
}
@media (max-width:768px){
.elFullWidthSection, .elSection, section{
padding-top:var(--sc-section-pad-mobile);
padding-bottom:var(--sc-section-pad-mobile);
}
}
.sc-dark-section{
background:var(--sc-navy-950) !important;
color:var(--sc-white) !important;
}
.sc-dark-section h1, .sc-dark-section h2, .sc-dark-section h3,
.sc-dark-section .elHeadline, .sc-dark-section .elHeadline *{
color:var(--sc-white) !important;
}
.sc-dark-section p, .sc-dark-section .elText, .sc-dark-section .elText *{
color:#cdd6e6 !important;
}
.sc-dark-section .elHeadline::after{ background:var(--sc-gold); }
/* ---------- 6. HERO ---------- */
.elHero, .sc-hero{
background:linear-gradient(180deg, var(--sc-navy-950) 0%, var(--sc-navy-900) 100%) !important;
color:var(--sc-white) !important;
}
.elHero h1, .sc-hero h1, .elHero .elHeadline, .elHero .elHeadline *{
color:var(--sc-white) !important;
}
.elHero p, .sc-hero p{ color:#cdd6e6 !important; }
.elHero .elHeadline::after, .sc-hero .elHeadline::after{ background:var(--sc-gold); }
/* ---------- 7. BUTTONS / CTAs ---------- */
.elButton, button, input[type="submit"], .hl-button, .elFormSubmitButton, .elSubmitButton{
background:var(--sc-navy-900) !important;
color:var(--sc-white) !important;
border:1px solid var(--sc-navy-900) !important;
border-radius:var(--sc-radius-sm) !important;
font-family:var(--sc-font-body) !important;
font-weight:700 !important;
font-size:.95rem !important;
letter-spacing:.04em;
text-transform:uppercase;
padding:16px 36px !important;
box-shadow:none !important;
transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.elButton:hover, button:hover, input[type="submit"]:hover,
.hl-button:hover, .elFormSubmitButton:hover, .elSubmitButton:hover{
background:var(--sc-navy-800) !important;
border-color:var(--sc-navy-800) !important;
transform:translateY(-1px);
}
.sc-btn-outline{
background:transparent !important;
color:var(--sc-navy-900) !important;
border:1px solid var(--sc-navy-900) !important;
}
.sc-btn-outline:hover{
background:var(--sc-navy-950) !important;
color:var(--sc-white) !important;
}
.sc-btn-gold{
background:var(--sc-gold) !important;
border-color:var(--sc-gold) !important;
color:var(--sc-navy-950) !important;
}
.sc-btn-gold:hover{
background:var(--sc-gold-dark) !important;
border-color:var(--sc-gold-dark) !important;
}
/* ---------- 8. CARDS / FEATURE BLOCKS ---------- */
.elColumn .elContainer, .elCard, .sc-card{
background:var(--sc-white);
border:1px solid var(--sc-line);
border-radius:var(--sc-radius-md);
box-shadow:var(--sc-shadow-card);
padding:32px;
}
.sc-stat{ text-align:center; }
.sc-stat .sc-stat-number{
font-family:var(--sc-font-headline);
font-size:clamp(2rem, 4vw, 3rem);
font-weight:700;
color:var(--sc-navy-900);
display:block;
line-height:1;
}
.sc-stat .sc-stat-label{
font-size:.85rem;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--sc-text-muted);
display:block;
margin-top:6px;
}
.sc-trust-strip{
background:var(--sc-white) !important;
border-top:1px solid var(--sc-line);
border-bottom:1px solid var(--sc-line);
}
.sc-trust-strip img{
filter:grayscale(100%) opacity(.65);
transition:filter .2s ease;
}
.sc-trust-strip img:hover{ filter:grayscale(0%) opacity(1); }
/* ---------- 9. FORMS ---------- */
.elFormWrapper, .elSurveyWrapper, .sc-card form{
background:var(--sc-white);
border:1px solid var(--sc-line);
border-radius:var(--sc-radius-md);
box-shadow:var(--sc-shadow-lift);
padding:40px !important;
}
.elInput, .elTextarea, .elSelect, input[type="text"], input[type="email"],
input[type="tel"], textarea, select{
font-family:var(--sc-font-body) !important;
border:1px solid var(--sc-line) !important;
border-radius:var(--sc-radius-sm) !important;
background:var(--sc-paper) !important;
padding:14px 16px !important;
font-size:1rem !important;
color:var(--sc-ink) !important;
transition:border-color .15s ease, box-shadow .15s ease;
}
.elInput:focus, .elTextarea:focus, input:focus, textarea:focus, select:focus{
border-color:var(--sc-navy-800) !important;
box-shadow:0 0 0 3px rgba(14,34,69,.10) !important;
outline:none !important;
}
.elLabel, label{
font-weight:600 !important;
font-size:.85rem !important;
letter-spacing:.03em;
text-transform:uppercase;
color:var(--sc-navy-900) !important;
margin-bottom:6px !important;
display:inline-block;
}
/* ---------- 10. DISCLOSURES / FINE PRINT ---------- */
.sc-disclosure, .elText.disclosure{
font-size:.78rem !important;
line-height:1.6 !important;
color:var(--sc-text-muted) !important;
border-top:1px solid var(--sc-line);
padding-top:20px;
margin-top:32px;
}
/* ---------- 11. FOOTER ---------- */
.hl_footer, footer, .elFooter{
background:var(--sc-navy-950) !important;
color:#aab6cc !important;
border-top:3px solid var(--sc-gold);
}
.hl_footer a, footer a, .elFooter a{ color:#d8deec !important; }
.hl_footer a:hover, footer a:hover, .elFooter a:hover{ color:var(--sc-gold) !important; }
.hl_footer h1, .hl_footer h2, .hl_footer h3,
footer h1, footer h2, footer h3{ color:var(--sc-white) !important; }
/* ---------- 12. DIVIDERS ---------- */
.elDivider, hr{
border-color:var(--sc-line) !important;
opacity:1 !important;
}
/* ---------- 13. RESPONSIVE TIGHTENING ---------- */
@media (max-width:480px){
.elFormWrapper, .elSurveyWrapper{ padding:24px !important; }
.elButton, button, input[type="submit"]{ width:100% !important; padding:16px 20px !important; }
}
