/*
Theme Name: Hireashark (Goldman Law Firm)
Theme URI: https://hireashark.com
Description: Custom Kadence child theme for Goldman Law Firm. Implements the goldman-mobile-clean / goldman-elite design system pixel-for-pixel with responsive breakpoints. Owns the full visual stack — Kadence parent only supplies plumbing.
Author: Goldman Law Firm
Author URI: https://hireashark.com
Template: kadence
Version: 1.0.0
Text Domain: hireashark
*/
/* ════════════════════════════════════════════
GOLDMAN LAW FIRM — DESIGN TOKENS
════════════════════════════════════════════ */
:root {
--gl-gold: #fdd72e;
--gl-gold-dark: #c89a0a;
--gl-gold-hover: #f5c518;
--gl-bg-dark: #0c0c0c;
--gl-bg-charcoal: #161616;
--gl-bg-light: #f6f4ef;
--gl-navy: #0e1f3b;
--gl-text: #111111;
--gl-text-muted: #666666;
--gl-text-faint: #888888;
--gl-border: #e0ddd5;
--gl-border-alt: #e8e5de;
--gl-whatsapp: #25d366;
--gl-urgent: #e53935;
--gl-chat-blue: #6db3ff;
--gl-font-headline: 'Bebas Neue', Impact, 'Arial Narrow Bold', sans-serif;
--gl-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--gl-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
}
/* ════════════════════════════════════════════
KADENCE PALETTE OVERRIDE (semantic fallback)
════════════════════════════════════════════ */
:root {
--global-palette1: #fdd72e;
--global-palette2: #0e1f3b;
--global-palette3: #0c0c0c;
--global-palette4: #111111;
--global-palette5: #444444;
--global-palette6: #777777;
--global-palette7: #e8e5de;
--global-palette8: #f6f4ef;
--global-palette9: #ffffff;
--global-palette-btn: #0c0c0c;
--global-palette-btn-bg: #fdd72e;
--global-palette-btn-hover: #0c0c0c;
--global-palette-btn-bg-hover: #d9aa1f;
--global-palette-highlight: #fdd72e;
--global-palette-highlight-alt: #d9aa1f;
--global-palette-highlight-alt2: #0e1f3b;
}
/* ════════════════════════════════════════════
RESETS / BASE — high specificity to outlast Kadence
════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html { font-size: 16px; scroll-behavior: smooth; }
html body.gl-body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: none !important;
font-family: var(--gl-font-body);
font-weight: 400;
background: #fff;
color: var(--gl-text);
overflow-x: hidden;
}
/* Homepage main wrapper goes full-bleed regardless of Kadence's content-style-boxed */
body.gl-body > .gl-es-bar,
body.gl-body > .gl-nav,
body.gl-body > main.gl-page,
body.gl-body > .gl-footer,
body.gl-body > .gl-sticky-bar {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
float: none !important;
}
body.gl-body main.gl-page {
display: block !important;
padding: 0 !important;
}
/* Kill any Kadence page-template wrappers if they sneak in */
body.gl-body #wrapper,
body.gl-body .site-container,
body.gl-body .content-area,
body.gl-body .site-main,
body.gl-body .entry-content,
body.gl-body article.page {
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.gl-body .entry-header,
body.gl-body .content-title-wrap,
body.gl-body .entry-content > .wp-block-template-part,
body.gl-body article.page > .entry-content > p:empty {
display: none !important;
}
img { max-width: 100%; height: auto; display: block; }
/* Reset list defaults inside our custom sections */
body.gl-body .gl-nav-menu,
body.gl-body .gl-nav-menu li,
body.gl-body .gl-fc-col ul,
body.gl-body .gl-fc-col ul li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Heading font everywhere headings appear */
h1, h2, h3, h4, h5, h6 {
font-family: var(--gl-font-headline);
letter-spacing: 0.01em;
font-weight: 400;
margin: 0;
}
/* Hide content padding leftover from Kadence */
.gl-page > * { margin: 0; }
/* ════════════════════════════════════════════
TOP SPANISH BAR — black bg, white text centered, WhatsApp pinned right
════════════════════════════════════════════ */
.gl-es-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gl-bg-dark);
padding: 5px 16px;
text-align: center;
position: relative;
line-height: 1.4;
}
.gl-es-bar > a:not(.gl-wa-dot) {
color: #ffffff;
font-size: 11px;
font-weight: 600;
text-decoration: underline;
letter-spacing: 0.02em;
text-underline-offset: 2px;
}
.gl-es-bar > a:not(.gl-wa-dot):hover {
color: var(--gl-gold);
}
.gl-es-bar .gl-availability {
display: none;
font-size: 10px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.1em;
text-transform: uppercase;
}
a.gl-wa-dot {
width: 22px !important;
height: 22px !important;
background: var(--gl-whatsapp) !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
flex-shrink: 0;
transition: transform 0.15s ease;
}
a.gl-wa-dot svg {
width: 12px !important;
height: 12px !important;
}
a.gl-wa-dot:hover {
transform: scale(1.12) !important;
}
@media (min-width: 768px) {
.gl-es-bar { padding: 5px 24px; gap: 12px; }
.gl-es-bar > a:not(.gl-wa-dot) { font-size: 12px; }
}
/* ════════════════════════════════════════════
PRIMARY NAV (high specificity, !important — Kadence-proof)
════════════════════════════════════════════ */
body.gl-body nav.gl-nav {
background: #fff !important;
padding: 22px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
border-bottom: 3px solid var(--gl-gold) !important;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 20px rgba(0,0,0,0.05);
width: 100% !important;
max-width: none !important;
}
/* Logo on left; menu + CTA group together on the right with a small gap between them */
body.gl-body nav.gl-nav ul.gl-nav-menu { margin-left: auto !important; }
body.gl-body nav.gl-nav a.gl-nav-cta { margin-left: 28px !important; }
.gl-nav-cta {
font-size: 11px !important;
padding: 10px 14px !important;
}
@media (min-width: 480px) {
.gl-nav-cta { font-size: 12px !important; padding: 11px 16px !important; }
}
@media (min-width: 768px) {
body.gl-body nav.gl-nav {
padding: 22px 28px !important;
gap: 24px !important;
}
.gl-nav-cta { font-size: 13px !important; padding: 13px 22px !important; }
}
@media (min-width: 1024px) {
body.gl-body nav.gl-nav {
padding: 24px 36px !important;
gap: 32px !important;
}
}
@media (min-width: 1280px) {
body.gl-body nav.gl-nav {
padding: 26px 48px !important;
gap: 44px !important;
}
}
body.gl-body nav.gl-nav a.gl-nav-logo {
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-decoration: none !important;
flex-shrink: 0;
}
body.gl-body nav.gl-nav a.gl-nav-logo img {
height: 40px !important;
width: auto !important;
max-width: 60vw !important;
max-height: 40px !important;
display: block !important;
object-fit: contain !important;
}
body.gl-body nav.gl-nav a.gl-nav-logo {
flex: 0 1 auto !important;
min-width: 0 !important;
}
body.gl-body nav.gl-nav a.gl-nav-cta {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
@media (min-width: 768px) {
body.gl-body nav.gl-nav a.gl-nav-logo img {
height: 44px !important;
max-height: 44px !important;
max-width: none !important;
}
}
@media (min-width: 1024px) {
body.gl-body nav.gl-nav a.gl-nav-logo img {
height: 46px !important;
max-height: 46px !important;
}
}
@media (min-width: 1280px) {
body.gl-body nav.gl-nav a.gl-nav-logo img {
height: 50px !important;
max-height: 50px !important;
}
body.gl-body nav.gl-nav ul.gl-nav-menu { gap: 30px !important; }
.gl-nav-menu a { font-size: 13px; }
}
.gl-nav-firm {
font-family: var(--gl-font-headline);
font-size: 18px;
letter-spacing: 0.04em;
color: var(--gl-bg-dark);
line-height: 1;
}
.gl-nav-sub {
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--gl-text-faint);
}
body.gl-body nav.gl-nav ul.gl-nav-menu {
display: none !important;
list-style: none !important;
gap: 22px !important;
margin: 0 !important;
padding: 0 !important;
flex-wrap: nowrap !important;
}
@media (min-width: 1024px) {
body.gl-body nav.gl-nav ul.gl-nav-menu { gap: 26px !important; }
}
body.gl-body nav.gl-nav ul.gl-nav-menu li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.gl-nav-menu a {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gl-bg-dark);
text-decoration: none;
position: relative;
white-space: nowrap;
display: inline-block;
}
@media (min-width: 1280px) {
.gl-nav-menu a { font-size: 13px; letter-spacing: 0.08em; }
}
.gl-nav-menu a::after {
content: '';
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 2px;
background: var(--gl-gold);
transition: width 0.25s ease;
}
.gl-nav-menu a:hover { color: var(--gl-gold-hover); }
.gl-nav-menu a:hover::after { width: 100%; }
.gl-nav-cta {
background: var(--gl-gold);
color: var(--gl-bg-dark);
padding: 11px 18px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
border-radius: 6px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 4px 14px rgba(253,215,46,0.45);
transition: all 0.2s;
}
.gl-nav-cta:hover {
background: var(--gl-gold-hover);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0,0,0,0.22), 0 8px 22px rgba(253,215,46,0.55);
}
/* ════════════════════════════════════════════
HERO
════════════════════════════════════════════ */
.gl-hero {
background: var(--gl-bg-dark) !important;
padding: 40px 20px 36px;
text-align: center;
position: relative;
overflow: hidden;
}
/* ════════════════════════════════════════════
HOMEPAGE CREAM HERO — text stack on left + form on right, light bg
════════════════════════════════════════════ */
.gl-hero.gl-hero-cream {
background: #f6f4ef !important;
padding: 18px 24px 0;
text-align: center;
color: var(--gl-bg-dark);
}
/* Mobile inner stack stays centered (desktop overrides above) */
@media (max-width: 899px) {
.gl-hero.gl-hero-cream .gl-hero-inner { padding-bottom: 20px; text-align: center; }
.gl-hero.gl-hero-cream .gl-hero-inner > * { text-align: center !important; }
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"inner ribbon"
"inner form";
gap: 0 72px;
/* Full-bleed cream: outer fills viewport, padding centers content around 1240px max */
padding: 56px max(56px, calc((100% - 1240px) / 2)) 64px;
align-items: start;
text-align: center !important;
}
/* SL banner sits above form — the downward triangle visually points at the form */
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon-wrap {
grid-area: ribbon !important;
justify-self: center !important;
align-self: start !important;
width: 100% !important;
max-width: 400px !important;
margin: 0 0 24px !important;
padding: 0 !important;
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon {
width: 100%;
max-width: 400px;
margin: 0;
}
.gl-hero.gl-hero-cream .gl-hero-form-wrap {
grid-area: form !important;
justify-self: center !important;
align-self: start !important;
width: 100% !important;
max-width: 400px !important;
margin: 0 !important;
padding: 0 !important;
}
.gl-hero.gl-hero-cream .gl-hero-inner {
grid-area: inner;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
max-width: 560px;
margin: 0 auto;
align-self: center; /* keep text vertically centered against the right column stack */
padding-top: 12px;
}
.gl-hero.gl-hero-cream .gl-hero-inner > * {
text-align: center !important;
}
.gl-hero.gl-hero-cream .gl-hero-form-wrap {
grid-area: form;
align-self: center;
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon-wrap {
grid-area: ribbon;
display: flex !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
}
/* On desktop, SL banner sits directly below the form (no gap, same width) */
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon {
display: inline-block;
max-width: 400px;
width: 100%;
margin: 0 auto;
padding: 18px 24px 22px;
background: var(--gl-bg-dark);
text-align: center;
}
}
/* Mobile: SL ribbon glues to bottom of form card so they read as one element */
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon-wrap {
display: flex;
justify-content: center;
margin-top: 0;
}
@media (max-width: 899px) {
/* WhatsApp pill between badges and form on mobile */
.gl-hero.gl-hero-cream .gl-wa-cta-above-form {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 100%;
width: calc(100% + 0px);
margin: 0 auto 20px !important;
}
/* Mobile: form sits on the cream hero background (no white band).
SL banner is glued flush to the form's bottom with the downward triangle pointer. */
.gl-hero.gl-hero-cream .gl-hero-form-wrap {
margin-bottom: 0;
background: transparent;
padding: 0;
}
.gl-hero.gl-hero-cream .gl-hero-form {
border-radius: 10px 10px 0 0 !important;
box-shadow:
0 -3px 0 var(--gl-gold),
0 24px 60px rgba(0, 0, 0, 0.22),
0 10px 24px rgba(0, 0, 0, 0.12),
0 2px 6px rgba(0, 0, 0, 0.08) !important;
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon-wrap {
display: flex !important;
justify-content: center !important;
background: transparent !important;
margin-top: 0 !important;
padding: 0 0 32px !important; /* room for the downward triangle */
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon {
display: inline-block !important;
position: relative !important;
max-width: 460px !important;
width: 100% !important;
margin: 0 auto !important; /* flush against the form above */
border-radius: 0 !important; /* rectangular — triangle is the bottom point */
padding: 18px 24px 22px !important;
background: var(--gl-bg-dark) !important;
overflow: visible !important; /* allow the triangle pseudo to bleed out */
}
/* Restore + force the downward triangle below the banner */
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon::after {
content: '' !important;
display: block !important;
position: absolute !important;
bottom: -18px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 28px solid transparent !important;
border-right: 28px solid transparent !important;
border-top: 18px solid var(--gl-bg-dark) !important;
background: transparent !important;
}
}
/* Mobile-only form section + navy SL banner removed per user request 2026-05-21 */
/* Headlines on the cream hero */
.gl-hero.gl-hero-cream .gl-hero-firm-h1 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: 44px !important;
font-weight: 700 !important;
color: var(--gl-bg-dark) !important;
text-transform: none !important;
text-shadow: none !important;
letter-spacing: -0.005em !important;
line-height: 1.02;
margin: 0 auto 18px;
max-width: 14ch;
text-wrap: balance;
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream .gl-hero-firm-h1 {
font-size: 64px !important;
margin: 0 0 22px;
max-width: none;
line-height: 1.0;
}
}
@media (min-width: 1280px) {
.gl-hero.gl-hero-cream .gl-hero-firm-h1 { font-size: 76px !important; }
}
/* Desktop-only line break inside H1 */
.gl-br-desktop { display: none; }
@media (min-width: 900px) { .gl-br-desktop { display: inline; } }
/* 24 Hour Helpline — navy Lato 900, matching the old hiretheshark.com hero */
.gl-hero.gl-hero-cream .gl-hero-helpline-h2 {
font-family: var(--gl-font-body);
font-size: 30px;
font-weight: 900;
font-style: normal;
color: var(--gl-navy);
letter-spacing: -0.005em;
line-height: 1.05;
margin: 0 0 6px;
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream .gl-hero-helpline-h2 { font-size: 38px; margin-bottom: 12px; }
}
@media (min-width: 1280px) {
.gl-hero.gl-hero-cream .gl-hero-helpline-h2 { font-size: 44px; }
}
.gl-hero.gl-hero-cream .gl-hero-nights {
font-family: var(--gl-font-body);
font-size: 12px;
font-weight: 900;
color: var(--gl-gold-dark, #8a6f12);
letter-spacing: 0.18em;
margin: 0 0 12px;
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream .gl-hero-nights { font-size: 14px; margin-bottom: 26px; }
}
.gl-hero.gl-hero-cream .gl-hero-tag-cream {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-style: normal !important;
font-size: 16px !important;
color: var(--gl-bg-dark) !important;
margin: 0 0 16px !important;
line-height: 1.35 !important;
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream .gl-hero-tag-cream { font-size: 20px !important; margin-bottom: 34px !important; }
}
/* Yellow pill phone CTA */
.gl-hero.gl-hero-cream .gl-phone-cta.gl-phone-cta-pill {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gl-gold);
color: var(--gl-bg-dark);
padding: 14px 38px;
font-size: 18px;
font-weight: 900;
letter-spacing: 0.08em;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 12px 30px rgba(0,0,0,0.18), 0 4px 12px rgba(253,215,46,0.4);
margin-bottom: 28px;
transition: transform 0.2s, box-shadow 0.2s;
/* Anchor a baseline width so the WhatsApp pill below matches */
min-width: 300px;
}
.gl-hero.gl-hero-cream .gl-phone-cta.gl-phone-cta-pill:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,0.22), 0 6px 18px rgba(253,215,46,0.5);
}
/* Green WhatsApp pill — paired CTA directly under the gold pill */
.gl-hero.gl-hero-cream .gl-phone-cta.gl-phone-cta-pill {
margin-bottom: 10px;
}
.gl-hero.gl-hero-cream .gl-wa-cta-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gl-whatsapp, #25D366);
color: #ffffff;
padding: 12px 32px;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.06em;
text-decoration: none;
border-radius: 999px;
box-shadow: 0 10px 24px rgba(0,0,0,0.14), 0 4px 10px rgba(37,211,102,0.35);
margin-bottom: 10px;
transition: transform 0.2s, box-shadow 0.2s;
}
.gl-hero.gl-hero-cream .gl-wa-cta-pill:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,0.18), 0 6px 14px rgba(37,211,102,0.45);
}
.gl-hero.gl-hero-cream .gl-wa-cta-pill svg {
flex-shrink: 0;
}
/* "Secondary CTA" variant — sized to match the gold Call pill's WIDTH so the
two pills stack as aligned siblings. Less vertical height + smaller text
keeps the primary/secondary hierarchy clear. */
.gl-hero.gl-hero-cream .gl-wa-cta-pill.gl-wa-cta-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
/* Same horizontal padding as the gold pill (44px sides) so widths match.
Less vertical padding (12px vs 18px) keeps it visibly secondary. */
padding: 12px 44px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--gl-whatsapp, #25D366);
color: #ffffff;
border-radius: 999px;
box-shadow:
0 8px 22px rgba(37, 211, 102, 0.28),
0 3px 8px rgba(0, 0, 0, 0.10);
margin-top: 24px;
margin-bottom: 10px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.22);
/* Match gold pill width with a sensible minimum, never wider */
min-width: 320px;
max-width: 100%;
}
.gl-hero.gl-hero-cream .gl-wa-cta-pill.gl-wa-cta-secondary:hover {
transform: translateY(-2px);
box-shadow:
0 12px 28px rgba(37, 211, 102, 0.38),
0 5px 12px rgba(0, 0, 0, 0.12);
}
.gl-hero.gl-hero-cream .gl-wa-cta-pill.gl-wa-cta-secondary svg {
width: 18px;
height: 18px;
}
/* Override the inherited large margin-bottom on the gold Call pill when followed
by a secondary WhatsApp pill — the secondary pill controls the gap now. */
.gl-hero.gl-hero-cream .gl-phone-cta.gl-phone-cta-pill:has(+ .gl-wa-cta-secondary),
.gl-hero.gl-hero-cream .gl-phone-cta.gl-phone-cta-pill {
margin-bottom: 0 !important;
}
/* Navy ribbon banner — Super Lawyers */
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon {
position: relative;
display: inline-block;
background: var(--gl-bg-dark);
color: #ffffff;
padding: 18px 32px 26px;
margin-top: 8px;
max-width: 380px;
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon::after {
content: '';
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-top: 18px solid var(--gl-bg-dark);
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon p {
margin: 0;
font-family: var(--gl-font-body);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
line-height: 1.5;
}
.gl-hero.gl-hero-cream .gl-hero-sl-ribbon strong { color: var(--gl-gold); }
/* Right column: form sits on cream. WhatsApp + OR stack above the form. */
.gl-hero.gl-hero-cream .gl-hero-form-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.gl-hero.gl-hero-cream .gl-hero-form-wrap .gl-form-wa-cta,
.gl-hero.gl-hero-cream .gl-hero-form-wrap .gl-form-or,
.gl-hero.gl-hero-cream .gl-hero-form-wrap .gl-hero-form {
width: 100%;
max-width: 400px;
}
.gl-hero.gl-hero-cream .gl-hero-form-wrap .gl-form-wa-cta { margin: 0 auto; }
.gl-hero.gl-hero-cream .gl-hero-form-wrap .gl-form-or { margin: 14px auto; }
.gl-hero.gl-hero-cream .gl-hero-form {
background: #ffffff;
border-radius: 8px;
padding: 32px 26px;
box-shadow: 0 -3px 0 var(--gl-gold), 0 36px 96px rgba(0,0,0,0.20), 0 14px 28px rgba(0,0,0,0.10);
max-width: 400px;
width: 100%;
text-align: left;
}
@media (min-width: 900px) {
.gl-hero.gl-hero-cream .gl-hero-form { padding: 36px 30px; max-width: 400px; }
}
/* Dropdown styled to match the other text fields */
.gl-hero.gl-hero-cream .gl-hero-form .gl-field-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
cursor: pointer;
color: var(--gl-bg-dark);
}
.gl-hero.gl-hero-cream .gl-hero-form .gl-field-select:invalid {
color: #9ca3af; /* placeholder-tone when nothing chosen */
}
.gl-hero.gl-hero-cream .gl-hero-form-title {
font-family: var(--gl-font-headline);
font-size: 28px;
color: var(--gl-bg-dark);
text-align: center !important;
margin: 0 auto 4px !important;
letter-spacing: 0.04em;
}
.gl-hero.gl-hero-cream .gl-hero-form-note {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 14px;
color: var(--gl-text-muted);
text-align: center !important;
margin: 0 auto 18px !important;
}
.gl-hero::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-55deg,
transparent, transparent 60px,
rgba(253,215,46,0.025) 60px, rgba(253,215,46,0.025) 61px
);
pointer-events: none;
}
.gl-hero-inner { position: relative; z-index: 2; }
.gl-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(253,215,46,0.1);
border: 1px solid rgba(253,215,46,0.3);
padding: 6px 14px;
border-radius: 2px;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gl-gold);
margin-bottom: 20px;
}
.gl-hero h1 {
font-family: var(--gl-font-headline);
font-size: 64px;
line-height: 0.95;
letter-spacing: 0.02em;
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
margin-bottom: 8px;
}
/* Homepage hero H1 — Cormorant Garamond uppercase
Mobile: "TOP RATED" / "NEW JERSEY LAW FIRM" (forced by
)
Tablet+: single line (
hidden) */
.gl-hero h1.gl-hero-firm-h1 {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
font-size: 36px;
font-weight: 600 !important;
letter-spacing: 0.025em;
line-height: 1.1;
text-transform: uppercase;
text-shadow: 0 2px 12px rgba(0,0,0,0.6);
color: #ffffff !important;
margin: 0 auto 14px;
max-width: 100%;
}
@media (min-width: 768px) {
.gl-hero h1.gl-hero-firm-h1 { font-size: 56px; }
.gl-br-mobile { display: none; }
}
@media (min-width: 1024px) {
.gl-hero h1.gl-hero-firm-h1 { font-size: 72px; }
}
/* Stars-only badge (no text) under the H1 */
.gl-hero-badge.gl-hero-badge-stars {
font-size: 16px;
letter-spacing: 0.35em;
padding: 4px 18px;
margin-bottom: 14px;
}
.gl-hero h1 .gl-gold-text { color: var(--gl-gold) !important; }
/* Subhead under H1 — SEO-rich practice keyword line */
.gl-hero-sub {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin: 0 0 18px;
line-height: 1.4;
}
.gl-hero-tag {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 17px;
color: rgba(255,255,255,0.92);
margin-bottom: 28px;
line-height: 1.5;
}
.gl-phone-cta {
display: block;
background: var(--gl-gold);
color: var(--gl-bg-dark);
padding: 20px;
font-size: 22px;
font-weight: 900;
letter-spacing: 0.04em;
text-decoration: none;
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 8px 28px rgba(253,215,46,0.45);
font-family: var(--gl-font-headline);
transition: all 0.2s;
}
.gl-phone-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 38px rgba(0,0,0,0.4), 0 12px 34px rgba(253,215,46,0.55);
}
.gl-phone-cta span {
display: block;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 3px;
opacity: 0.7;
font-family: var(--gl-font-body);
}
.gl-wa-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gl-whatsapp);
color: #fff;
padding: 16px;
border-radius: 2px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
margin-bottom: 20px;
}
.gl-hero-avail {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
.gl-hero-avail strong { color: rgba(255,255,255,0.6); }
/* ════════════════════════════════════════════
HERO VIDEO BACKGROUND — autoplay muted loop with dark overlay
════════════════════════════════════════════ */
.gl-pillar-hero {
position: relative;
overflow: hidden;
}
.gl-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Shift video right so more of the subject's face is visible (mobile sees less width) */
object-position: 72% center;
z-index: 0;
pointer-events: none;
}
.gl-hero-video-overlay {
position: absolute;
inset: 0;
/* Middle-ground darkness — video visible but text reads cleanly on top */
background: linear-gradient(180deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.82) 60%, rgba(0,0,0,0.9) 100%);
z-index: 1;
pointer-events: none;
}
@media (min-width: 768px) {
.gl-hero-video { object-position: center center; }
.gl-hero-video-overlay {
background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.65) 100%);
}
}
.gl-pillar-hero .gl-hero-inner,
.gl-pillar-hero .gl-hero-form-wrap {
position: relative;
z-index: 2;
}
/* Honor reduced motion + slow connections */
@media (prefers-reduced-motion: reduce) {
.gl-hero-video { display: none; }
}
/* ════════════════════════════════════════════
CUSTOM HERO PATTERN — per-page question/CTA style
Used on pillar pages: TOP RATED NJ X LAW FIRM → ★★★★★ → Q? → Experience Matters → Button
════════════════════════════════════════════ */
.gl-hero-custom {
text-align: center;
padding: 48px 24px 20px;
}
.gl-hero-custom .gl-hero-inner {
max-width: 700px;
margin: 0 auto;
}
.gl-hero-custom .gl-hero-avail {
margin-top: 8px;
}
/* Pillar hero firm-positioning H1 — Cormorant Garamond (matches homepage; classical premium law firm) */
.gl-hero h1.gl-hero-firm-title {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
font-style: normal;
font-size: 24px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.15;
text-transform: uppercase;
color: #ffffff;
text-shadow: 0 2px 14px rgba(0,0,0,0.7);
margin: 0 auto 18px;
text-wrap: balance;
max-width: 100%;
}
@media (min-width: 400px) {
.gl-hero h1.gl-hero-firm-title { font-size: 26px; }
}
@media (min-width: 768px) {
.gl-hero h1.gl-hero-firm-title { font-size: 28px; }
/* Hide all
s in pillar H1 on tablet+ — the mobile break shouldn't apply */
.gl-hero h1.gl-hero-firm-title br { display: none; }
}
@media (min-width: 1024px) {
.gl-hero h1.gl-hero-firm-title { font-size: 34px; }
}
@media (min-width: 1280px) {
.gl-hero h1.gl-hero-firm-title { font-size: 40px; }
}
/* ════════════════════════════════════════════
OUR PROCESS — cream/gold timeline (Traffic + DUI pillar bottom section)
════════════════════════════════════════════ */
.gl-our-process {
background: linear-gradient(180deg, #f6f4ef 0%, #ece5d2 100%);
padding: 56px 24px 64px;
margin: 48px 0 8px;
border-top: 1px solid rgba(252,211,77,0.4);
border-bottom: 1px solid rgba(252,211,77,0.4);
}
@media (min-width: 768px) {
.gl-our-process { padding: 80px 40px; }
}
.gl-our-process-inner {
max-width: 980px;
margin: 0 auto;
}
.gl-our-process-header {
text-align: center;
margin-bottom: 44px;
}
.gl-our-process-eyebrow {
font-family: 'Lora', Georgia, serif;
font-style: italic;
font-size: 13px;
color: #8a6f12;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.gl-our-process-header h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 36px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
line-height: 1.1;
color: var(--gl-bg-dark);
max-width: 18ch;
margin: 0 auto;
text-wrap: balance;
text-align: center;
}
@media (min-width: 768px) {
.gl-our-process-header h2 { font-size: 46px; max-width: 24ch; }
}
@media (min-width: 1024px) {
.gl-our-process-header h2 { font-size: 54px; max-width: 28ch; }
}
.gl-our-process-track {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
position: relative;
}
@media (min-width: 768px) {
.gl-our-process-track {
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
}
.gl-our-process-line { display: none; }
@media (min-width: 768px) {
.gl-our-process-line {
display: block;
position: absolute;
top: 45px;
left: 18%;
right: 18%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gl-gold) 15%, var(--gl-gold) 85%, transparent);
z-index: 0;
}
}
.gl-our-process-step {
text-align: center !important;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.gl-our-process-step > * { text-align: center; }
.gl-our-process-icon-circle {
position: relative;
width: 70px;
height: 70px;
border-radius: 50%;
background: #ffffff;
border: 2px solid var(--gl-gold);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
box-shadow: 0 8px 22px rgba(0,0,0,0.10), inset 0 0 0 5px rgba(252,211,77,0.06);
}
.gl-our-process-icon { font-size: 28px; line-height: 1; }
.gl-our-process-icon-svg { width: 36px; height: 36px; display: block; }
.gl-our-process-num {
position: absolute;
bottom: -5px;
right: -5px;
background: var(--gl-bg-dark);
color: var(--gl-gold);
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 700;
font-size: 11px;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
border: 2px solid #f6f4ef;
}
.gl-our-process-step h3 {
font-family: var(--gl-font-body) !important;
font-size: 17px !important;
font-weight: 900 !important;
color: var(--gl-bg-dark) !important;
margin: 0 0 10px !important;
letter-spacing: 0.01em !important;
text-align: center !important;
border: none !important;
padding-top: 0 !important;
}
.gl-our-process-step p {
font-family: var(--gl-font-body) !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--gl-text-muted) !important;
max-width: 280px !important;
margin: 0 auto !important;
text-align: center !important;
}
@media (min-width: 768px) {
.gl-our-process-step h3 { font-size: 18px !important; }
.gl-our-process-step p { font-size: 15px !important; }
}
/* ────────────────────────────────────────────
OUR PROCESS — DARK VARIANT (Traffic page: replaces "It's Easy to Get Started")
Bigger title, navy background, gold accents to match the brand How It Works section.
──────────────────────────────────────────── */
.gl-our-process.gl-our-process-dark {
background: var(--gl-bg-dark);
border-top: none;
border-bottom: none;
margin: 0;
padding: 72px 24px 80px;
}
@media (min-width: 768px) {
.gl-our-process.gl-our-process-dark { padding: 96px 40px 112px; }
}
.gl-our-process-dark .gl-our-process-eyebrow {
color: var(--gl-gold);
font-family: var(--gl-font-body);
font-style: normal;
font-weight: 800;
font-size: 18px;
letter-spacing: 0.22em;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.gl-our-process-dark .gl-our-process-eyebrow { font-size: 20px; }
}
.gl-our-process-dark .gl-our-process-header { margin-bottom: 64px; }
.gl-our-process-dark .gl-our-process-header h2 {
font-family: var(--gl-font-headline);
font-size: 30px;
color: #ffffff;
letter-spacing: 0.02em;
line-height: 1.05;
max-width: 20ch;
}
@media (min-width: 768px) {
.gl-our-process-dark .gl-our-process-header h2 { font-size: 42px; max-width: 26ch; }
}
@media (min-width: 1024px) {
.gl-our-process-dark .gl-our-process-header h2 { font-size: 52px; max-width: 30ch; }
}
.gl-our-process-dark .gl-our-process-line {
background: linear-gradient(90deg, transparent, var(--gl-gold) 15%, var(--gl-gold) 85%, transparent);
top: 55px;
}
.gl-our-process-dark .gl-our-process-icon-circle {
width: 90px;
height: 90px;
background: #ffffff;
border: 3px solid var(--gl-gold);
box-shadow: 0 12px 28px rgba(0,0,0,0.45), inset 0 0 0 6px rgba(252,211,77,0.08);
margin-bottom: 22px;
}
.gl-our-process-dark .gl-our-process-icon-svg { width: 46px; height: 46px; }
.gl-our-process-dark .gl-our-process-num {
width: 30px;
height: 30px;
font-size: 13px;
border: 2px solid var(--gl-bg-dark);
bottom: -6px;
right: -6px;
}
.gl-our-process-dark .gl-our-process-step h3 {
font-size: 22px !important;
font-weight: 900 !important;
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: 0.04em !important;
margin: 0 0 12px !important;
}
@media (min-width: 768px) {
.gl-our-process-dark .gl-our-process-step h3 { font-size: 24px !important; }
}
.gl-our-process-dark .gl-our-process-step p {
font-size: 15px !important;
color: rgba(255,255,255,0.72) !important;
max-width: 300px !important;
line-height: 1.65 !important;
}
@media (min-width: 768px) {
.gl-our-process-dark .gl-our-process-step p { font-size: 16px !important; max-width: 320px !important; }
}
/* Make Snap-a-Photo step clickable — scrolls to the form */
a.gl-our-process-step-link {
text-decoration: none !important;
color: inherit !important;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.25s ease, filter 0.25s ease;
cursor: pointer;
}
a.gl-our-process-step-link:hover {
transform: translateY(-4px);
}
a.gl-our-process-step-link:hover .gl-our-process-icon-circle {
box-shadow: 0 16px 36px rgba(252,211,77,0.35), inset 0 0 0 6px rgba(252,211,77,0.18) !important;
}
.gl-our-process-dark a.gl-our-process-step-link h3::after {
content: ' →';
color: var(--gl-gold);
font-weight: 900;
opacity: 0;
margin-left: 4px;
transition: opacity 0.25s ease;
}
.gl-our-process-dark a.gl-our-process-step-link:hover h3::after {
opacity: 1;
}
/* Override gl-prose default h2 styling for the section header */
.gl-our-process-header h2 {
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ════════════════════════════════════════════
HOW IT WORKS — OffTheRecord-style 3-phone visual section
Used on pillar pages right under the form section.
════════════════════════════════════════════ */
.gl-howit-otr {
background: #0e1f3b;
padding: 80px 24px 90px;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.gl-howit-otr { padding: 100px 40px; }
}
.gl-howit-otr-inner {
max-width: 1200px;
margin: 0 auto;
}
.gl-howit-otr-grid {
display: grid;
grid-template-columns: 1fr;
gap: 56px;
align-items: start;
}
@media (min-width: 900px) {
.gl-howit-otr-grid { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}
.gl-howit-otr-step {
text-align: center;
position: relative;
}
.gl-howit-otr-step h3 {
font-family: var(--gl-font-body);
font-size: 20px;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.01em;
margin: 28px 0 12px;
}
.gl-howit-otr-step p {
font-family: var(--gl-font-body);
font-size: 14px;
line-height: 1.6;
color: rgba(255,255,255,0.72);
max-width: 320px;
margin: 0 auto;
}
@media (min-width: 768px) {
.gl-howit-otr-step h3 { font-size: 22px; }
.gl-howit-otr-step p { font-size: 15px; }
}
/* Phone + blue circle accent */
.gl-howit-otr-phone-wrap {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 320px;
}
.gl-howit-otr-circle {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle, #2c6df6 0%, #1c4ec2 100%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.85;
z-index: 0;
}
.gl-howit-otr-phone {
position: relative;
z-index: 1;
width: 150px;
height: 300px;
background: #1a1a1a;
border: 6px solid #0a0a0a;
border-radius: 24px;
box-shadow: 0 18px 40px rgba(0,0,0,0.4);
overflow: hidden;
}
.gl-howit-otr-phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 14px;
background: #000;
border-radius: 0 0 10px 10px;
z-index: 2;
}
.gl-howit-otr-phone-screen {
position: absolute;
inset: 0;
background: #ffffff;
display: flex;
flex-direction: column;
padding: 24px 14px 14px;
}
/* Screen 1 — photo upload mockup */
.gl-howit-screen-photo { background: #f7f7f8; align-items: center; justify-content: center; gap: 14px; }
.gl-howit-photo-icon {
font-size: 36px;
width: 64px;
height: 64px;
border-radius: 50%;
background: #fcd34d;
display: flex;
align-items: center;
justify-content: center;
}
.gl-howit-photo-lines {
display: flex;
flex-direction: column;
gap: 6px;
width: 80%;
}
.gl-howit-photo-lines span {
display: block;
height: 6px;
background: #e0dccf;
border-radius: 3px;
}
.gl-howit-photo-lines span:nth-child(1) { width: 100%; }
.gl-howit-photo-lines span:nth-child(2) { width: 80%; }
.gl-howit-photo-lines span:nth-child(3) { width: 90%; }
.gl-howit-photo-lines span:nth-child(4) { width: 60%; }
.gl-howit-photo-lines span:nth-child(5) { width: 75%; }
/* Screen 2 — lawyer review mockup */
.gl-howit-screen-review { background: #ffffff; gap: 10px; }
.gl-howit-review-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.gl-howit-attorney-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #fcd34d;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.gl-howit-attorney-name {
font-size: 10px;
font-weight: 700;
color: #0e1f3b;
}
.gl-howit-review-msg {
background: #eef6ff;
border-radius: 10px;
padding: 8px 10px;
font-size: 9px;
color: #1a1a1a;
line-height: 1.4;
}
.gl-howit-review-checks {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.gl-howit-review-checks div {
font-size: 9px;
color: #16a34a;
font-weight: 700;
}
/* Screen 3 — case resolved mockup */
.gl-howit-screen-done { background: #f0fdf4; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.gl-howit-done-confetti { font-size: 30px; }
.gl-howit-done-title {
font-size: 11px;
font-weight: 900;
color: #14532d;
}
.gl-howit-done-status {
background: #16a34a;
color: #ffffff;
font-size: 10px;
font-weight: 700;
padding: 3px 10px;
border-radius: 12px;
margin-top: 2px;
}
.gl-howit-done-meta {
font-size: 8px;
color: #14532d;
opacity: 0.7;
margin-top: 4px;
}
/* Inline reviews block when embedded inside .gl-prose body content — break out to full width */
.gl-prose .gl-inline-reviews {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-top: 40px;
margin-bottom: 40px;
}
/* ════════════════════════════════════════════
PILLAR CALLOUT — inline "Learn more →" box pointing to a deeper resource
════════════════════════════════════════════ */
.gl-pillar-callout {
display: flex;
align-items: center;
gap: 18px;
background: linear-gradient(180deg, #faf7ef 0%, #f6f0e0 100%);
border-left: 4px solid var(--gl-gold);
border-radius: 6px;
padding: 22px 24px;
margin: 28px 0 36px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.gl-pillar-callout-icon {
font-size: 36px;
line-height: 1;
flex-shrink: 0;
}
.gl-pillar-callout-body h3 {
font-family: var(--gl-font-body);
font-size: 18px;
font-weight: 900;
color: var(--gl-bg-dark);
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.gl-pillar-callout-body p {
font-size: 14px;
color: var(--gl-text-muted);
margin: 0 0 8px;
line-height: 1.5;
}
.gl-pillar-callout-cta {
display: inline-block;
font-size: 14px;
font-weight: 900;
color: var(--gl-bg-dark);
text-decoration: none;
border-bottom: 2px solid var(--gl-gold);
padding-bottom: 1px;
letter-spacing: 0.02em;
transition: color 0.15s;
}
.gl-pillar-callout-cta:hover { color: var(--gl-gold-dark, #b8860b); }
/* ════════════════════════════════════════════
ANATOMY-OF-TICKET STANDALONE PAGE — smaller framed image + icon-grid
════════════════════════════════════════════ */
.gl-anatomy-intro {
font-size: 17px;
line-height: 1.6;
color: var(--gl-text-muted);
max-width: 640px;
margin: 0 auto 28px;
text-align: center;
}
.gl-anatomy-figure {
margin: 0 auto 40px;
max-width: 380px;
text-align: center;
}
.gl-anatomy-figure img {
width: 100%;
height: auto;
border: 1px solid var(--gl-border);
border-radius: 6px;
box-shadow: 0 18px 40px rgba(0,0,0,0.14);
display: block;
}
.gl-anatomy-figure figcaption {
font-family: var(--gl-font-body);
font-size: 12px;
color: var(--gl-text-muted);
margin-top: 12px;
font-style: italic;
line-height: 1.4;
}
@media (min-width: 768px) {
.gl-anatomy-figure { max-width: 460px; }
}
.gl-anatomy-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0 auto 44px;
max-width: 1100px;
}
@media (min-width: 640px) {
.gl-anatomy-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
.gl-anatomy-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
.gl-anatomy-card {
background: #ffffff;
border: 1px solid var(--gl-border);
border-radius: 8px;
padding: 22px 20px 20px;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.gl-anatomy-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
.gl-anatomy-num {
font-family: var(--gl-font-headline);
font-size: 28px;
color: var(--gl-gold);
line-height: 1;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.gl-anatomy-card h3 {
font-family: var(--gl-font-body);
font-size: 16px;
font-weight: 900;
color: var(--gl-bg-dark);
margin: 0 0 8px;
letter-spacing: 0.01em;
}
.gl-anatomy-card p {
font-size: 14px;
line-height: 1.55;
color: var(--gl-text-muted);
margin: 0;
}
/* ════════════════════════════════════════════
HERO ENTRANCE ANIMATION — secondary elements rise + scale in
Skipped: pillar H1 firm-title (stays still as the anchor) and
homepage H1 firm-h1 (per user: "not for the H1 tag")
════════════════════════════════════════════ */
@keyframes gl-rise-in {
from {
opacity: 0;
transform: translateY(28px) scale(0.65);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Pillar pages (DUI, traffic, PI, etc.) — H2 + body + CTA scale-in */
.gl-hero-stars,
.gl-hero-question,
.gl-hero-experience,
.gl-hero-primary-cta-pillar,
.gl-hero-wa-cta-pillar {
animation: gl-rise-in 0.85s cubic-bezier(0.34, 1.3, 0.5, 1) backwards;
transform-origin: center center;
}
/* All hero elements animate together (no stagger) per user request */
.gl-hero-stars,
.gl-hero-question,
.gl-hero-experience,
.gl-hero-primary-cta-pillar,
.gl-hero-wa-cta-pillar { animation-delay: 0.15s; }
/* Homepage cream hero — animate the 2 lines above the button + the button itself
(H1 + helpline H2 stay still as anchors) */
.gl-hero.gl-hero-cream .gl-hero-nights,
.gl-hero.gl-hero-cream .gl-hero-tag-cream,
.gl-hero.gl-hero-cream .gl-phone-cta-pill,
.gl-hero.gl-hero-cream .gl-wa-cta-pill {
animation: gl-rise-in 0.85s cubic-bezier(0.34, 1.3, 0.5, 1) backwards;
transform-origin: center center;
}
.gl-hero.gl-hero-cream .gl-hero-nights,
.gl-hero.gl-hero-cream .gl-hero-tag-cream,
.gl-hero.gl-hero-cream .gl-phone-cta-pill,
.gl-hero.gl-hero-cream .gl-wa-cta-pill { animation-delay: 0.15s; }
/* Legacy homepage hero (dark) — kept in case dark hero ever reappears */
.gl-hero:not(.gl-hero-cream) .gl-hero-badge.gl-hero-badge-stars,
.gl-hero:not(.gl-hero-cream) .gl-hero-tag,
.gl-hero:not(.gl-hero-cream) .gl-phone-cta,
.gl-hero:not(.gl-hero-cream) .gl-wa-cta {
animation: gl-rise-in 0.85s cubic-bezier(0.34, 1.3, 0.5, 1) backwards;
transform-origin: center center;
}
.gl-hero:not(.gl-hero-cream) .gl-hero-badge.gl-hero-badge-stars,
.gl-hero:not(.gl-hero-cream) .gl-hero-tag,
.gl-hero:not(.gl-hero-cream) .gl-phone-cta,
.gl-hero:not(.gl-hero-cream) .gl-hero-wa-cta { animation-delay: 0.15s; }
@media (prefers-reduced-motion: reduce) {
.gl-hero-stars,
.gl-hero-question,
.gl-hero-experience,
.gl-hero-primary-cta-pillar,
.gl-hero-wa-cta-pillar,
.gl-hero.gl-hero-cream .gl-hero-nights,
.gl-hero.gl-hero-cream .gl-hero-tag-cream,
.gl-hero.gl-hero-cream .gl-phone-cta-pill,
.gl-hero.gl-hero-cream .gl-wa-cta-pill,
.gl-hero:not(.gl-hero-cream) .gl-hero-badge.gl-hero-badge-stars,
.gl-hero:not(.gl-hero-cream) .gl-hero-tag,
.gl-hero:not(.gl-hero-cream) .gl-phone-cta,
.gl-hero:not(.gl-hero-cream) .gl-wa-cta {
animation: none;
}
}
/* Legacy eyebrow class kept in case any other page still uses it */
.gl-hero-caps-eyebrow {
font-family: var(--gl-font-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 16px;
line-height: 1.5;
text-wrap: balance;
max-width: 32ch;
margin-left: auto;
margin-right: auto;
}
.gl-hero-stars {
color: var(--gl-gold);
font-size: 22px;
letter-spacing: 4px;
margin-bottom: 18px;
}
/* Secondary question — supporting H2 role under the firm title */
.gl-hero-question {
font-family: var(--gl-font-body);
font-size: 32px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0;
color: #ffffff;
margin: 0 0 14px;
text-wrap: balance;
}
@media (min-width: 768px) {
.gl-hero-question { font-size: 18px; }
}
@media (min-width: 1024px) {
.gl-hero-question { font-size: 20px; }
}
@media (min-width: 1280px) {
.gl-hero-question { font-size: 22px; }
}
/* Criminal Defense page — long-form headline takes the primary role.
Eyebrow shrinks, question becomes the dominant H1-scale text,
and any inside renders in elegant yellow italic serif. */
.page-id-16 .gl-hero-firm-title {
font-size: 13px !important;
letter-spacing: 0.22em;
font-weight: 700;
margin-bottom: 4px;
}
.page-id-16 .gl-hero-stars {
font-size: 14px;
margin-bottom: 14px;
}
.page-id-16 .gl-hero-question {
font-size: 30px;
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.01em;
margin-bottom: 24px;
max-width: 720px;
}
@media (min-width: 768px) {
.page-id-16 .gl-hero-question { font-size: 38px; }
}
@media (min-width: 1024px) {
.page-id-16 .gl-hero-question { font-size: 46px; }
}
@media (min-width: 1280px) {
.page-id-16 .gl-hero-question { font-size: 52px; }
}
.page-id-16 .gl-hero-question em {
font-family: var(--gl-font-serif);
font-style: italic;
font-weight: 500;
color: var(--gl-gold);
}
.gl-hero-experience {
font-family: var(--gl-font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.55;
color: rgba(255,255,255,0.88);
margin: 0 auto 28px;
max-width: 36ch;
text-wrap: pretty;
}
@media (min-width: 768px) {
.gl-hero-experience { font-size: 17px; max-width: 44ch; }
}
/* Optional longer description below the subline — hidden on mobile, shown desktop+ */
.gl-hero-paragraph {
display: none;
font-family: var(--gl-font-body);
font-size: 15px;
font-weight: 400;
line-height: 1.6;
color: rgba(255,255,255,0.72);
margin: 0 auto 28px;
max-width: 44ch;
text-wrap: pretty;
}
@media (min-width: 768px) {
.gl-hero-paragraph { display: block; font-size: 17px; max-width: 52ch; }
}
.gl-hero-primary-cta {
display: inline-block;
background: var(--gl-gold);
color: var(--gl-bg-dark);
padding: 18px 36px;
font-size: 16px;
font-weight: 900;
letter-spacing: 0.04em;
text-decoration: none;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0,0,0,0.3), 0 6px 22px rgba(253,215,46,0.45);
transition: all 0.2s;
margin-bottom: 16px;
font-family: var(--gl-font-body);
}
.gl-hero-primary-cta:hover {
background: var(--gl-gold-hover);
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.35), 0 10px 30px rgba(253,215,46,0.55);
color: var(--gl-bg-dark);
}
/* Pillar-page CTA — chunkier than the standard primary CTA, but not oversized */
.gl-hero-primary-cta.gl-hero-primary-cta-pillar {
display: block;
width: 100%;
max-width: 320px;
margin: 0 auto 14px;
padding: 17px 24px;
font-size: 16px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 10px;
}
@media (min-width: 768px) {
.gl-hero-primary-cta.gl-hero-primary-cta-pillar {
max-width: 380px;
padding: 21px 28px;
font-size: 18px;
}
}
/* Pillar WhatsApp pill — DESKTOP ONLY. Hidden on mobile (sticky bottom bar already
provides WhatsApp/Call/Free Consult, so the hero pill would duplicate it).
!important guards against any future CSS or Kadence override. */
.gl-hero-wa-cta-pillar {
display: none !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 320px;
margin: 0 auto 24px;
padding: 14px 24px;
background: var(--gl-whatsapp);
color: #ffffff;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(37,211,102,0.35);
transition: all 0.2s ease;
font-family: var(--gl-font-body);
}
@media (min-width: 768px) {
.gl-hero-wa-cta-pillar { display: flex !important; }
}
.gl-hero-wa-cta-pillar:hover {
background: #1ebd5b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(37,211,102,0.5);
}
.gl-hero-wa-cta-pillar svg {
flex-shrink: 0;
}
@media (min-width: 768px) {
.gl-hero-wa-cta-pillar {
max-width: 380px;
padding: 16px 28px;
font-size: 15px;
}
}
/* Mobile/Desktop CTA swap — mobile shows "Free X Consultation", desktop shows the phone number */
.gl-cta-desktop { display: none; }
@media (min-width: 1024px) {
.gl-cta-mobile { display: none; }
.gl-cta-desktop { display: inline-block; }
}
/* WhatsApp secondary button under primary CTA */
.gl-hero-wa-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--gl-whatsapp);
color: #ffffff;
padding: 12px 24px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
border-radius: 6px;
box-shadow: 0 6px 18px rgba(37,211,102,0.4);
transition: all 0.2s;
margin-bottom: 24px;
}
.gl-hero-wa-secondary:hover {
background: #1ebd5b;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(37,211,102,0.5);
}
@media (min-width: 768px) {
.gl-hero-custom { padding: 72px 40px 36px; }
.gl-hero-caps-eyebrow { font-size: 13px; }
.gl-hero-experience { font-size: 19px; }
.gl-hero-primary-cta { padding: 20px 44px; font-size: 17px; }
}
@media (min-width: 1024px) {
/* Pillar hero: cap content at 1240px and center on the page — matches homepage cream hero */
.gl-hero-custom {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0 64px;
align-items: center;
text-align: center !important;
padding: 88px max(40px, calc((100% - 1240px) / 2)) 64px !important;
}
.gl-hero-custom .gl-hero-inner {
max-width: 560px;
margin: 0 auto !important;
justify-self: center;
text-align: center !important;
}
.gl-hero-custom .gl-hero-inner > * { text-align: center !important; }
.gl-hero-custom .gl-hero-form-wrap {
width: 100%;
max-width: 440px;
justify-self: center;
margin: 0 !important;
}
/* Desktop spacing — give each element breathing room so the hero feels balanced */
.gl-hero-custom .gl-hero-firm-title { margin-bottom: 26px !important; }
.gl-hero-stars { font-size: 22px; margin-bottom: 30px; letter-spacing: 6px; }
.gl-hero-custom .gl-hero-question { margin-bottom: 20px !important; }
.gl-hero-custom .gl-hero-experience { margin-bottom: 36px !important; max-width: 42ch; }
.gl-hero-custom .gl-hero-primary-cta-pillar { margin-top: 4px; }
}
@media (min-width: 1280px) {
/* At ≥1280px the .gl-hero wide-screen rule sets calc padding which would override the
pillar-hero centering. Re-assert the constraint so pillar hero stays centered. */
.gl-hero-custom {
padding-left: max(40px, calc((100% - 1240px) / 2)) !important;
padding-right: max(40px, calc((100% - 1240px) / 2)) !important;
}
}
/* Hero embedded form — hidden by default, shown at ≥1024px via media query */
.gl-hero-form-wrap {
display: none;
}
.gl-hero-form {
background: #fff;
border-radius: 8px;
padding: 36px 32px;
width: 100%;
max-width: 440px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
position: relative;
}
.gl-hero-form::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gl-gold), var(--gl-gold-hover));
border-radius: 8px 8px 0 0;
}
.gl-hero-form-badge {
display: inline-block;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gl-gold-dark);
margin-bottom: 8px;
}
.gl-hero-form-title {
font-family: var(--gl-font-headline);
font-size: 28px;
letter-spacing: 0.02em;
color: var(--gl-bg-dark);
line-height: 1;
margin-bottom: 6px;
}
.gl-hero-form-note {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 14px;
color: var(--gl-text-faint);
margin-bottom: 20px;
line-height: 1.4;
}
/* ════════════════════════════════════════════
TRUST BADGES — horizontal continuous marquee
The badge row scrolls infinitely. Duplicate set in HTML
for seamless loop (50% translate per cycle).
════════════════════════════════════════════ */
.gl-trust-section {
background: #fff;
padding: 24px 0;
border-bottom: 1px solid var(--gl-border-alt);
overflow: hidden;
}
/* ════════════════════════════════════════════
WHAT YOU CAN EXPECT — 3-card explainer (Sweet James-style)
Light bg, navy number circles popping above each card.
════════════════════════════════════════════ */
.gl-expect {
background: #ffffff;
padding: 72px 24px 80px;
text-align: center;
}
@media (min-width: 900px) { .gl-expect { padding: 104px 24px 112px; } }
.gl-expect .gl-eyebrow-dark {
color: var(--gl-bg-dark);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
margin: 0 auto 18px;
display: block;
}
.gl-expect-h2 {
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 30px;
font-weight: 900;
color: var(--gl-navy, #0e1f3b);
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0 auto 56px;
text-transform: none !important;
max-width: 18ch;
}
@media (min-width: 900px) { .gl-expect-h2 { font-size: 48px; margin-bottom: 80px; max-width: none; } }
@media (min-width: 1280px) { .gl-expect-h2 { font-size: 56px; } }
.gl-expect-grid {
display: grid;
grid-template-columns: 1fr;
gap: 64px 32px;
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 900px) {
.gl-expect-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.gl-expect-card {
position: relative;
background: #f3f4f6;
border-radius: 18px;
padding: 62px 24px 28px;
text-align: left;
margin-top: 44px;
}
@media (min-width: 900px) { .gl-expect-card { padding: 70px 28px 36px; } }
.gl-expect-num {
position: absolute;
top: -44px;
left: 50%;
transform: translateX(-50%);
width: 88px;
height: 88px;
border-radius: 50%;
background: var(--gl-navy, #0e1f3b);
color: #ffffff;
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
font-size: 44px;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 8px 24px rgba(14,31,59,0.22);
}
.gl-expect-title {
font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif !important;
font-size: 20px;
font-weight: 900;
color: var(--gl-navy, #0e1f3b);
margin: 0 0 10px;
letter-spacing: -0.005em;
line-height: 1.25;
text-transform: none !important;
}
@media (min-width: 900px) { .gl-expect-title { font-size: 22px; } }
.gl-expect-desc {
font-family: var(--gl-font-body);
font-size: 15px;
line-height: 1.6;
color: #1f2937;
margin: 0;
}
@media (min-width: 900px) { .gl-expect-desc { font-size: 16px; } }
/* Standalone (post-hero) badges bar — desktop only, full-bleed */
.gl-trust-section.gl-trust-standalone {
margin: 0;
padding: 28px 0;
border-top: 1px solid var(--gl-border-alt);
}
@media (min-width: 900px) {
.gl-trust-section.gl-trust-standalone { padding: 40px 0; }
}
@media (max-width: 899px) {
.gl-trust-section.gl-trust-standalone { display: none; }
}
/* In-hero badges bar — mobile only, breaks out of hero padding to be full-bleed.
Sits between hero text/button and the form, with space before the form. */
.gl-trust-section.gl-trust-in-hero {
width: 100vw;
margin-left: -24px;
margin-right: -24px;
margin-top: 0;
margin-bottom: 20px;
padding: 18px 0;
border-top: 1px solid var(--gl-border-alt);
border-bottom: 1px solid var(--gl-border-alt);
}
@media (max-width: 899px) {
.gl-trust-section.gl-trust-in-hero .gl-trust-card img { max-height: 64px; }
}
@media (min-width: 900px) {
.gl-trust-section.gl-trust-in-hero { display: none; }
}
.gl-trust-inner {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 56px;
width: max-content;
animation: gl-marquee 40s linear infinite;
will-change: transform;
}
/* Phantom gap restorer — without this, after translateX(-50%) the seam
between the 5th and 6th badge looks identical to all other gaps, but
only if there's no leading padding. Keep this clean. */
.gl-trust-section:hover .gl-trust-inner {
animation-play-state: paused;
}
.gl-trust-card {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: none;
box-shadow: none;
text-decoration: none;
min-height: auto;
}
.gl-trust-card img {
max-height: 54px;
width: auto;
object-fit: contain;
display: block;
}
/* Blue Super Lawyers badge follows the default trust-card max-height — same as other badges */
a.gl-trust-card { text-decoration: none; }
@keyframes gl-marquee {
from { transform: translateX(0); }
to { transform: translateX(-33.3333%); }
}
@media (min-width: 768px) {
.gl-trust-section { padding: 36px 0; }
.gl-trust-inner { gap: 80px; padding-left: 80px; }
.gl-trust-card img { max-height: 78px; }
}
@media (min-width: 1024px) {
.gl-trust-inner { gap: 100px; }
.gl-trust-card img { max-height: 90px; }
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.gl-trust-inner { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* ════════════════════════════════════════════
SUPER LAWYERS BANNER
════════════════════════════════════════════ */
.gl-sl-banner {
background: var(--gl-navy);
padding: 20px;
text-align: center;
}
.gl-sl-banner p {
font-family: var(--gl-font-headline);
font-size: 18px;
letter-spacing: 0.1em;
color: #fff;
line-height: 1.3;
margin: 0;
}
.gl-sl-banner strong { color: var(--gl-gold); }
/* ════════════════════════════════════════════
SECTION BASE
════════════════════════════════════════════ */
.gl-section { padding: 48px 20px; }
.gl-section-alt { padding: 48px 20px; background: var(--gl-bg-light); }
.gl-section-dark { padding: 48px 20px; background: var(--gl-bg-dark); }
.gl-eyebrow {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gl-gold);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.gl-eyebrow::before {
content: '';
display: block;
width: 20px;
height: 2px;
background: var(--gl-gold);
flex-shrink: 0;
}
.gl-eyebrow.gl-eyebrow-dark { color: var(--gl-text-faint); }
.gl-eyebrow.gl-eyebrow-dark::before { background: #444; }
.gl-h2 {
font-family: var(--gl-font-headline);
font-size: clamp(28px, 8vw, 38px);
letter-spacing: 0.02em;
line-height: 1;
color: var(--gl-text);
margin-bottom: 12px;
}
.gl-h2.gl-light { color: #fff; }
.gl-h2 em {
font-style: italic;
color: var(--gl-gold-dark);
font-family: var(--gl-font-serif);
}
.gl-h2.gl-light em { color: var(--gl-gold); }
.gl-body {
font-size: 15px;
line-height: 1.75;
color: var(--gl-text-muted);
margin-bottom: 24px;
}
.gl-body.gl-light { color: rgba(255,255,255,0.45); }
/* ════════════════════════════════════════════
HELPLINE BOX + FORM
════════════════════════════════════════════ */
.gl-helpline-box {
background: #fff;
border-top: 4px solid var(--gl-gold);
padding: 28px 20px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.gl-helpline-box h2 {
font-family: var(--gl-font-headline);
font-size: 44px;
letter-spacing: 0.02em;
color: var(--gl-bg-dark);
line-height: 1;
margin-bottom: 4px;
}
.gl-helpline-box .gl-nights {
font-family: var(--gl-font-headline);
font-size: 18px;
letter-spacing: 0.18em;
color: var(--gl-gold);
margin-bottom: 12px;
}
.gl-helpline-box .gl-sub {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 16px;
color: #333;
margin-bottom: 24px;
line-height: 1.5;
}
.gl-btn-gold {
display: block;
background: var(--gl-gold);
color: var(--gl-bg-dark);
padding: 18px;
text-align: center;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border-radius: 8px;
margin-bottom: 12px;
box-shadow: 0 10px 28px rgba(0,0,0,0.3), 0 6px 22px rgba(253,215,46,0.4);
font-family: var(--gl-font-headline);
transition: all 0.2s;
}
.gl-btn-gold:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,0.35), 0 10px 30px rgba(253,215,46,0.5);
}
.gl-btn-dark {
display: block;
background: var(--gl-bg-dark);
color: var(--gl-gold);
padding: 16px;
text-align: center;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
margin-bottom: 12px;
}
.gl-btn-wa {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gl-whatsapp);
color: #fff;
padding: 16px;
border-radius: 2px;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
}
/* ── Pillar form section — centered intro + form ── */
.gl-pillar-form-section {
text-align: center;
padding: 24px 20px 24px;
}
.gl-pillar-form-intro {
font-family: var(--gl-font-headline);
font-style: normal;
font-size: 26px;
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.02em;
color: var(--gl-bg-dark);
max-width: 720px;
margin: 0 auto 18px;
text-transform: uppercase;
}
.gl-form-centered {
max-width: 440px;
margin: 0 auto !important;
text-align: left;
padding: 22px 22px !important;
border-top-width: 3px;
}
.gl-form-centered h3 {
text-align: center;
font-size: 22px;
margin-bottom: 4px;
}
.gl-form-centered .gl-fc-note {
text-align: center;
font-style: italic;
font-weight: 700;
color: var(--gl-text);
font-size: 13px;
margin-bottom: 14px;
}
.gl-form-centered .gl-field {
padding: 11px 12px;
font-size: 14px;
margin-bottom: 8px;
}
.gl-form-centered .gl-submit {
padding: 14px;
font-size: 13px;
}
.gl-form-centered .gl-field-file {
padding: 12px 14px;
margin-bottom: 8px;
}
.gl-form-centered .gl-field-file-label {
font-size: 12px;
}
@media (min-width: 768px) {
.gl-pillar-form-section { padding: 36px 40px 36px; }
.gl-pillar-form-intro { font-size: 38px; margin-bottom: 28px; }
.gl-form-centered h3 { font-size: 32px; }
}
/* Hide the second form on desktop — hero already has one. Mobile keeps it visible. */
@media (min-width: 1024px) {
.gl-pillar-form-section { display: none !important; }
}
/* Pillar How It Works — tighter top padding so it sits closer to form */
.gl-pillar-howitworks { padding-top: 32px !important; padding-bottom: 32px !important; }
@media (min-width: 768px) {
.gl-pillar-howitworks { padding-top: 48px !important; padding-bottom: 48px !important; }
}
/* "IT'S EASY TO GET STARTED." — single-line all-white, fluid scale */
.gl-h2-howitworks {
white-space: nowrap;
font-size: clamp(20px, 6.4vw, 56px) !important;
margin-bottom: 16px !important;
color: #ffffff !important;
}
.gl-h2-howitworks em {
color: #ffffff !important;
font-style: normal;
font-family: var(--gl-font-headline);
}
/* Tighten the eyebrow + reduce vertical air above the steps */
.gl-pillar-howitworks .gl-eyebrow,
.gl-section-dark .gl-h2-howitworks + .gl-steps { margin-top: 4px !important; }
.gl-pillar-howitworks .gl-steps,
.gl-section-dark .gl-steps { margin-top: 6px !important; }
/* BOX-WITHIN-A-BOX: outer card holds the 3 step cards on pillar pages */
.gl-pillar-howitworks .gl-steps {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(252,211,77,0.22);
border-radius: 8px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 14px !important;
}
.gl-pillar-howitworks .gl-step {
background: rgba(255,255,255,0.05);
border-radius: 6px;
padding: 18px 16px;
border-bottom: none !important;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items: center;
}
.gl-pillar-howitworks .gl-step-num { font-size: 36px; }
.gl-pillar-howitworks a.gl-step-link:hover {
background: rgba(252,211,77,0.10);
transform: none;
}
/* Step 1 card is a tap target → always-visible arrow with proper right padding */
.gl-pillar-howitworks a.gl-step-link {
padding-right: 38px;
}
.gl-pillar-howitworks a.gl-step-link::after {
opacity: 0.7;
right: 14px;
}
.gl-pillar-howitworks a.gl-step-link:hover::after {
opacity: 1;
right: 10px;
}
.gl-h2-howitworks { margin-bottom: 4px !important; }
/* "OR" divider + WhatsApp alternative under form */
.gl-form-or {
max-width: 540px;
margin: 24px auto 16px;
text-align: center;
position: relative;
}
.gl-form-or::before,
.gl-form-or::after {
content: '';
position: absolute;
top: 50%;
width: calc(50% - 40px);
height: 1px;
background: var(--gl-border-alt);
}
.gl-form-or::before { left: 0; }
.gl-form-or::after { right: 0; }
.gl-form-or span {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--gl-text-faint);
background: var(--gl-bg-light);
padding: 0 12px;
position: relative;
}
.gl-form-wa-cta {
display: flex;
max-width: 540px;
margin: 0 auto;
align-items: center;
justify-content: center;
gap: 12px;
background: var(--gl-whatsapp);
color: #ffffff;
padding: 16px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.06em;
text-decoration: none;
box-shadow: 0 8px 24px rgba(37,211,102,0.35);
transition: all 0.2s;
font-family: var(--gl-font-body);
}
.gl-form-wa-cta:hover {
filter: brightness(1.05);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(37,211,102,0.45);
color: #ffffff;
}
/* ── FORM CARD ── */
.gl-form-card {
background: #fff;
border-top: 4px solid var(--gl-gold);
padding: 32px 22px 26px;
margin-top: 0;
border-radius: 6px;
box-shadow: 0 32px 80px rgba(0,0,0,0.32), 0 14px 36px rgba(0,0,0,0.18), 0 6px 14px rgba(0,0,0,0.10);
}
.gl-form-card h3 {
font-family: var(--gl-font-headline);
font-size: 30px;
letter-spacing: 0.04em;
color: var(--gl-bg-dark);
line-height: 1;
margin: 0;
}
@media (min-width: 768px) {
.gl-form-card h3 { font-size: 36px; }
}
.gl-form-card-centered h3,
.gl-form-card-centered .gl-fc-note {
text-align: center !important;
}
.gl-fc-sub {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gl-gold);
margin-bottom: 4px;
}
.gl-fc-note {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 13px;
color: var(--gl-text-muted);
line-height: 1.3;
margin-top: 4px;
margin-bottom: 18px;
}
@media (min-width: 768px) {
.gl-fc-note { font-size: 14px; }
}
/* Mobile: give the lead form breathing room from screen edges
Tightened vertical padding — was 48px (default), now 20px top / 28px bottom */
.gl-section-alt #gl-form,
section.gl-section-alt#gl-form {
padding: 20px 28px 28px;
}
.gl-helpline-row.gl-helpline-row-formonly {
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.gl-field {
width: 100%;
padding: 14px 14px;
border: 1.5px solid var(--gl-border);
border-radius: 4px;
font-size: 15px;
font-family: var(--gl-font-body);
color: var(--gl-text);
background: #f9f8f5;
margin-bottom: 8px;
outline: none;
-webkit-appearance: none;
transition: border-color 0.2s;
}
.gl-field:focus { border-color: var(--gl-gold); }
.gl-field::placeholder { color: #aaa; }
.gl-select {
width: 100%;
padding: 15px 14px;
border: 1.5px solid var(--gl-border);
border-radius: 2px;
font-size: 15px;
font-family: var(--gl-font-body);
color: var(--gl-text);
background: #f9f8f5;
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
.gl-select-wrap {
position: relative;
margin-bottom: 10px;
}
.gl-select-wrap::after {
content: '▾';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--gl-text-faint);
pointer-events: none;
}
.gl-submit {
width: 100%;
padding: 18px;
background: var(--gl-gold);
color: var(--gl-bg-dark);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
border: none;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0,0,0,0.25), 0 6px 22px rgba(253,215,46,0.4);
font-family: var(--gl-font-headline);
transition: all 0.2s;
}
.gl-submit:hover {
transform: translateY(-1px);
box-shadow: 0 14px 36px rgba(0,0,0,0.3), 0 10px 30px rgba(253,215,46,0.5);
}
/* Bigger primary submit button — must dominate the attach button visually */
.gl-submit-xl {
padding: 22px 18px !important;
font-size: 16px !important;
letter-spacing: 0.12em !important;
}
@media (min-width: 768px) {
.gl-submit-xl { padding: 24px 18px !important; font-size: 17px !important; }
}
/* Compact attach button — smaller than submit, label forced onto one line */
.gl-field-file-compact { padding: 10px 12px; }
.gl-field-file-compact .gl-field-file-label {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gl-field-file-compact .gl-field-file-label em { font-size: 11px; }
.gl-field-file-compact::before { width: 18px; height: 18px; font-size: 16px; }
.gl-privacy {
font-size: 11px;
color: #bbb;
text-align: center;
margin-top: 10px;
}
/* File upload — clean gray box like the Wix design (icon + label only, native input hidden) */
.gl-field-file {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 12px;
padding: 16px 18px;
background: #9d9d9d;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
text-align: center;
position: relative;
}
.gl-field-file:hover {
background: #888;
}
.gl-field-file::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
font-size: 20px;
font-weight: 900;
color: #ffffff;
line-height: 1;
}
.gl-field-file-label {
font-size: 14px;
font-weight: 600;
color: #ffffff;
line-height: 1.2;
}
.gl-field-file-label em {
font-style: normal;
font-weight: 500;
color: rgba(255,255,255,0.85);
}
.gl-field-file input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
/* Show filename once user picks a file */
.gl-field-file.has-file::before { content: '✓'; color: #ffffff; }
.gl-field-file.has-file { background: var(--gl-whatsapp); }
.gl-form-success {
background: #f4fdf6;
border-left: 4px solid var(--gl-whatsapp);
padding: 16px;
color: #1d6b39;
font-size: 14px;
margin-bottom: 16px;
}
/* ════════════════════════════════════════════
HOW IT WORKS — STEPS
════════════════════════════════════════════ */
.gl-steps {
display: flex;
flex-direction: column;
margin-top: 28px;
}
.gl-step {
padding: 24px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: grid;
grid-template-columns: 48px 1fr;
gap: 14px;
align-items: start;
}
.gl-step:last-child { border-bottom: none; }
.gl-step-num {
font-family: var(--gl-font-headline);
font-size: 44px;
color: var(--gl-gold);
line-height: 1;
}
/* Make step #1 a clickable scroll-anchor to the form */
a.gl-step-link {
text-decoration: none !important;
color: inherit;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
position: relative;
}
a.gl-step-link:hover {
background: rgba(252,211,77,0.06);
transform: translateX(4px);
}
a.gl-step-link::after {
content: '→';
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--gl-gold);
font-size: 22px;
opacity: 0;
transition: opacity 0.2s, right 0.2s;
}
a.gl-step-link:hover::after {
opacity: 1;
right: 0;
}
.gl-step-title {
font-size: 18px;
font-weight: 900;
color: #fff;
margin-bottom: 5px;
}
.gl-step-title span { color: var(--gl-gold); }
.gl-step-desc {
font-size: 14px;
line-height: 1.7;
color: rgba(255,255,255,0.5);
}
.gl-section .gl-step { border-bottom-color: var(--gl-border-alt); }
.gl-section .gl-step-title { color: var(--gl-text); }
.gl-section .gl-step-desc { color: var(--gl-text-muted); }
/* Scroll-pop animation for "How It Works" steps — staggered so the three
steps animate in sequence (1 → 2 → 3) instead of all at once.
JS adds .gl-pop-prep to hide them, then .gl-pop-in via IntersectionObserver. */
.gl-step.gl-pop-prep {
opacity: 0;
transform: scale(0.55);
transform-origin: center center;
transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.5s ease-out;
will-change: transform, opacity;
}
.gl-step.gl-pop-prep.gl-pop-in {
opacity: 1;
transform: scale(1);
}
/* Sequence the three steps: 1 first, 2 ~350ms later, 3 ~700ms later */
.gl-steps .gl-step.gl-pop-prep:nth-of-type(1) { transition-delay: 0s, 0s; }
.gl-steps .gl-step.gl-pop-prep:nth-of-type(2) { transition-delay: 0.35s, 0.35s; }
.gl-steps .gl-step.gl-pop-prep:nth-of-type(3) { transition-delay: 0.7s, 0.7s; }
@media (prefers-reduced-motion: reduce) {
.gl-step.gl-pop-prep {
opacity: 1;
transform: none;
transition: none;
}
.gl-steps .gl-step.gl-pop-prep { transition-delay: 0s !important; }
}
/* ════════════════════════════════════════════
VERDICTS / RESULTS
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
RECENT RESULTS — featured verdict + 2 stacked cards
════════════════════════════════════════════ */
.gl-results-lede {
max-width: 60ch;
margin: 12px auto 36px;
text-align: center;
color: var(--gl-text-muted);
font-size: 16px;
line-height: 1.6;
}
.gl-results-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
max-width: 1000px;
margin: 0 auto;
}
@media (min-width: 900px) {
.gl-results-grid {
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 18px;
}
.gl-result-feature { grid-row: span 2; }
}
.gl-result-card {
background: var(--gl-bg-light);
border-radius: 10px;
border-left: 4px solid var(--gl-gold);
padding: 32px 28px;
text-align: left;
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.gl-result-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}
/* Featured card — dark navy panel with gold accent (premium hero recovery) */
.gl-result-feature {
background: linear-gradient(135deg, var(--gl-bg-dark) 0%, #1a2840 100%);
color: #ffffff;
border-left: none;
border-top: 4px solid var(--gl-gold);
padding: 44px 32px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 220px;
}
@media (min-width: 900px) {
.gl-result-feature { min-height: 280px; }
}
.gl-result-tag {
display: inline-block;
background: var(--gl-gold);
color: var(--gl-bg-dark);
font-family: var(--gl-font-body);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 3px;
margin-bottom: 18px;
align-self: flex-start;
}
.gl-result-amt {
font-family: var(--gl-font-headline);
font-size: 48px;
color: var(--gl-bg-dark);
letter-spacing: 0.02em;
line-height: 1;
margin-bottom: 12px;
}
@media (min-width: 900px) {
.gl-result-amt { font-size: 56px; }
}
.gl-result-feature .gl-result-amt {
font-size: 60px;
color: var(--gl-gold);
}
@media (min-width: 900px) {
.gl-result-feature .gl-result-amt { font-size: 88px; }
}
.gl-result-detail {
font-family: var(--gl-font-headline);
font-size: 17px;
font-weight: 700;
color: var(--gl-bg-dark);
letter-spacing: 0.04em;
margin-bottom: 4px;
text-transform: uppercase;
}
@media (min-width: 900px) {
.gl-result-detail { font-size: 19px; }
}
.gl-result-feature .gl-result-detail {
color: #ffffff;
font-size: 20px;
}
@media (min-width: 900px) {
.gl-result-feature .gl-result-detail { font-size: 24px; }
}
.gl-result-place {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--gl-text-faint);
text-transform: uppercase;
}
.gl-result-feature .gl-result-place {
color: rgba(255, 255, 255, 0.65);
}
.gl-verdict-disclaimer {
font-size: 12px;
color: var(--gl-text-faint);
margin: 28px auto 0;
line-height: 1.5;
text-align: center;
max-width: 60ch;
font-style: italic;
}
/* ════════════════════════════════════════════
PRACTICE AREAS
════════════════════════════════════════════ */
.gl-pa-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 28px;
}
.gl-pa-card {
background: #fff;
border: 1.5px solid var(--gl-border-alt);
padding: 20px 18px;
border-radius: 2px;
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
transition: border-color 0.2s, background 0.2s;
}
.gl-pa-card:hover {
border-color: var(--gl-gold);
background: #fefbf0;
}
.gl-pa-icon {
width: 48px;
height: 48px;
border: 1.5px solid var(--gl-border-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.gl-pa-label {
font-size: 17px;
font-weight: 700;
color: var(--gl-text);
line-height: 1.2;
}
.gl-pa-statute {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gl-gold-dark);
margin-top: 2px;
}
.gl-pa-arrow {
margin-left: auto;
color: #ccc;
font-size: 20px;
flex-shrink: 0;
}
/* ════════════════════════════════════════════
WHY GOLDMAN
════════════════════════════════════════════ */
.gl-why-list {
display: flex;
flex-direction: column;
margin-top: 28px;
}
.gl-why-item {
padding: 20px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
display: grid;
grid-template-columns: 36px 1fr;
gap: 12px;
align-items: start;
}
.gl-why-item:last-child { border-bottom: none; }
.gl-why-n {
font-family: var(--gl-font-headline);
font-size: 28px;
color: var(--gl-gold);
line-height: 1.1;
}
.gl-why-body strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.gl-why-body p {
font-size: 13px;
line-height: 1.7;
color: rgba(255,255,255,0.4);
margin: 0;
}
/* ════════════════════════════════════════════
TESTIMONIALS
════════════════════════════════════════════ */
.gl-t-cards {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-top: 28px;
}
.gl-t-card {
background: #fff;
padding: 24px 20px;
border-left: 4px solid var(--gl-gold);
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border-radius: 2px;
}
.gl-t-stars {
color: var(--gl-gold);
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 12px;
}
.gl-t-quote {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 16px;
color: var(--gl-text);
line-height: 1.65;
margin-bottom: 16px;
}
.gl-t-author strong {
font-size: 13px;
font-weight: 700;
color: var(--gl-text);
display: block;
}
.gl-t-author span {
font-size: 12px;
color: var(--gl-gold-dark);
}
/* Short rave strip — short quotes after the main 3 cards */
.gl-t-strip {
margin-top: 32px;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.gl-t-strip-item {
background: #fff;
border-radius: 8px;
padding: 18px 20px;
border: 1px solid var(--gl-border-alt);
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px;
align-items: center;
}
.gl-t-strip-stars {
color: var(--gl-gold);
font-size: 13px;
letter-spacing: 1.5px;
}
.gl-t-strip-quote {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 15px;
color: var(--gl-text);
}
.gl-t-strip-author {
font-size: 12px;
font-weight: 700;
color: var(--gl-gold-dark);
white-space: nowrap;
}
@media (min-width: 768px) {
.gl-t-strip { grid-template-columns: 1fr 1fr; }
}
.gl-t-google-cta {
margin-top: 28px;
text-align: center;
}
.gl-t-google-cta a {
display: inline-block;
color: var(--gl-bg-dark);
font-size: 14px;
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--gl-gold);
padding-bottom: 3px;
transition: color 0.2s;
}
.gl-t-google-cta a:hover { color: var(--gl-gold-dark); }
/* ════════════════════════════════════════════
CONTENT DEPTH / PROSE SECTION
Long-form SEO body with FAQ
════════════════════════════════════════════ */
.gl-content-section {
background: #fff;
padding: 64px 20px;
}
.gl-prose {
max-width: 820px;
margin: 0 auto;
}
.gl-prose h2 {
font-family: var(--gl-font-headline);
font-size: 32px;
line-height: 1.05;
color: var(--gl-bg-dark);
margin: 0 0 18px;
letter-spacing: 0.02em;
text-align: center;
}
.gl-prose h2:not(:first-child) {
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--gl-border-alt);
}
.gl-prose h3 {
font-family: var(--gl-font-body);
font-size: 19px;
font-weight: 900;
color: var(--gl-bg-dark);
margin: 28px 0 10px;
letter-spacing: 0;
}
.gl-prose p {
font-size: 16px;
line-height: 1.75;
color: var(--gl-text-muted);
margin: 0 0 16px;
}
.gl-prose p strong { color: var(--gl-text); }
.gl-prose a {
color: var(--gl-gold-dark);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 700;
}
.gl-prose a:hover { color: var(--gl-gold); }
.gl-prose ul.gl-prose-list {
list-style: disc;
margin: 0 0 20px 22px;
padding: 0;
}
.gl-prose ul.gl-prose-list li {
font-size: 16px;
line-height: 1.75;
color: var(--gl-text-muted);
margin-bottom: 12px;
}
.gl-faq-item {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--gl-border-alt);
}
.gl-faq-item:last-of-type { border-bottom: none; }
.gl-faq-item h3 {
font-size: 17px;
color: var(--gl-bg-dark);
margin-bottom: 8px;
}
@media (min-width: 768px) {
.gl-content-section { padding: 96px 40px; }
.gl-prose h2 { font-size: 40px; }
.gl-prose h3 { font-size: 21px; }
.gl-prose p,
.gl-prose ul.gl-prose-list li { font-size: 17px; }
}
/* ════════════════════════════════════════════
HOMEPAGE — "About the Firm" designed block
Replaces the plain gl-prose body section. Uses Lato 900 (not Bebas Neue)
for the headline per Zack's hero/headline preference. Two-card layout
with a stats strip between for visual interest on mobile + desktop.
════════════════════════════════════════════ */
.gl-home-about {
background: linear-gradient(180deg, #f6f4ef 0%, #efece4 100%);
padding: 56px 18px 64px;
position: relative;
}
.gl-home-about::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--gl-gold) 0%, var(--gl-gold-dark) 100%);
}
.gl-home-about-inner {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Card — white, gold-accent left border, subtle elevation */
.gl-home-about-card {
background: #fff;
border: 1px solid var(--gl-border-alt);
border-left: 4px solid var(--gl-gold);
border-radius: 4px;
padding: 36px 24px 30px;
position: relative;
box-shadow: 0 8px 30px rgba(14, 31, 59, 0.06);
}
/* Decorative monogram in the top-right corner of the primary card */
.gl-home-about-monogram {
position: absolute;
top: 18px;
right: 22px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--gl-gold) 0%, var(--gl-gold-dark) 100%);
color: var(--gl-navy);
font-family: 'Playfair Display', Georgia, serif;
font-weight: 900;
font-style: italic;
font-size: 32px;
line-height: 1;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(200, 154, 10, 0.35);
letter-spacing: -0.02em;
user-select: none;
}
.gl-home-about-eyebrow {
display: inline-block;
font-family: var(--gl-font-body);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gl-gold-dark);
margin-bottom: 10px;
padding-left: 16px;
position: relative;
}
.gl-home-about-eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 2px;
background: var(--gl-gold);
}
.gl-home-about-eyebrow-alt { color: var(--gl-navy); }
.gl-home-about-eyebrow-alt::before { background: var(--gl-navy); }
/* Headline — Lato 900, NOT Bebas Neue (per Zack's preference) */
.gl-home-about-h {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 30px;
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--gl-navy);
margin: 0 0 16px;
text-transform: none;
text-align: left;
}
.gl-home-about-h-sm { font-size: 24px; }
.gl-home-about-lead {
font-family: var(--gl-font-body);
font-size: 17px;
line-height: 1.55;
color: var(--gl-text);
font-weight: 500;
margin: 0 0 14px;
}
.gl-home-about-body {
font-family: var(--gl-font-body);
font-size: 15.5px;
line-height: 1.65;
color: var(--gl-text-muted);
margin: 0 0 12px;
}
.gl-home-about-body strong { color: var(--gl-text); }
.gl-home-about-body em { color: var(--gl-gold-dark); font-style: italic; }
.gl-home-about-body a { color: var(--gl-navy); text-decoration: underline; text-decoration-color: var(--gl-gold); text-underline-offset: 3px; }
.gl-home-about-body a:hover { color: var(--gl-gold-dark); }
.gl-home-about-lead a { color: var(--gl-navy); text-decoration: underline; text-decoration-color: var(--gl-gold); }
/* Signature block — sits at the bottom of the primary card */
.gl-home-about-signature {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--gl-border-alt);
display: flex;
flex-direction: column;
gap: 2px;
}
.gl-home-about-sig-name {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 19px;
color: var(--gl-navy);
font-weight: 700;
}
.gl-home-about-sig-role {
font-family: var(--gl-font-body);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gl-text-faint);
}
/* Stats strip — 2x2 on mobile, 4-up on desktop */
.gl-home-about-stats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--gl-border-alt);
border: 1px solid var(--gl-border-alt);
border-radius: 4px;
overflow: hidden;
}
.gl-home-about-stats li {
background: #fff;
padding: 18px 14px;
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 96px;
justify-content: center;
}
.gl-home-about-stats strong {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 22px;
color: var(--gl-navy);
line-height: 1.05;
letter-spacing: -0.01em;
}
.gl-home-about-stats span {
font-family: var(--gl-font-body);
font-size: 11.5px;
line-height: 1.35;
color: var(--gl-text-muted);
font-weight: 600;
}
/* CTA row at the bottom of the second card */
.gl-home-about-cta-row {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid var(--gl-border-alt);
}
.gl-home-about-cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gl-gold);
color: var(--gl-navy);
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 15px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 14px 20px;
border-radius: 3px;
box-shadow: 0 4px 14px rgba(253, 215, 46, 0.45);
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gl-home-about-cta-primary:hover {
background: var(--gl-gold-hover);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(253, 215, 46, 0.55);
color: var(--gl-navy);
}
.gl-home-about-cta-wa {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #25d366;
color: #fff;
font-family: var(--gl-font-body);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 12px 20px;
border-radius: 3px;
transition: background 0.15s, transform 0.15s;
}
.gl-home-about-cta-wa:hover { background: #1faa55; color: #fff; transform: translateY(-1px); }
.gl-home-about-cta-wa svg { flex-shrink: 0; }
/* Tablet + desktop refinements */
@media (min-width: 640px) {
.gl-home-about { padding: 80px 24px 88px; }
.gl-home-about-inner { gap: 22px; }
.gl-home-about-card { padding: 44px 40px 36px; }
.gl-home-about-monogram { width: 64px; height: 64px; font-size: 36px; top: 24px; right: 28px; }
.gl-home-about-h { font-size: 38px; padding-right: 80px; }
.gl-home-about-h-sm { font-size: 28px; padding-right: 0; }
.gl-home-about-lead { font-size: 19px; }
.gl-home-about-body { font-size: 16.5px; }
.gl-home-about-stats { grid-template-columns: repeat(4, 1fr); }
.gl-home-about-stats strong { font-size: 24px; }
.gl-home-about-cta-row { flex-direction: row; }
.gl-home-about-cta-primary,
.gl-home-about-cta-wa { flex: 1; font-size: 15px; padding: 15px 20px; }
}
@media (min-width: 1024px) {
.gl-home-about { padding: 110px 40px 120px; }
.gl-home-about-inner { max-width: 880px; }
.gl-home-about-card { padding: 52px 52px 44px; }
.gl-home-about-h { font-size: 44px; }
.gl-home-about-h-sm { font-size: 32px; }
}
/* ════════════════════════════════════════════
COLLAPSIBLE FAQ — bottom of homepage, click question to expand
════════════════════════════════════════════ */
.gl-faq-section {
background: #f6f4ef;
padding: 56px 20px 72px;
border-top: 4px solid var(--gl-gold);
}
@media (min-width: 768px) {
.gl-faq-section { padding: 88px 40px 104px; }
}
.gl-faq-section .gl-section-inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.gl-faq-section .gl-h2 {
margin-bottom: 32px;
}
.gl-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
margin-top: 28px;
}
details.gl-faq-q {
background: #ffffff;
border: 1px solid var(--gl-border-alt);
border-radius: 6px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
details.gl-faq-q[open] {
border-color: var(--gl-gold);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
details.gl-faq-q summary {
list-style: none;
cursor: pointer;
padding: 18px 52px 18px 20px;
font-family: var(--gl-font-body);
font-size: 16px;
font-weight: 700;
color: var(--gl-bg-dark);
line-height: 1.4;
position: relative;
user-select: none;
}
@media (min-width: 768px) {
details.gl-faq-q summary { font-size: 18px; padding: 22px 60px 22px 26px; }
}
details.gl-faq-q summary::-webkit-details-marker { display: none; }
details.gl-faq-q summary::after {
content: '+';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 400;
color: var(--gl-gold-dark, #b8881a);
background: rgba(252,211,77,0.16);
border-radius: 999px;
line-height: 1;
transition: transform 0.25s ease, background 0.2s;
}
details.gl-faq-q[open] summary::after {
content: '−';
transform: translateY(-50%) rotate(180deg);
background: var(--gl-gold);
color: var(--gl-bg-dark);
}
details.gl-faq-q summary:hover {
background: rgba(252,211,77,0.04);
}
.gl-faq-a {
padding: 0 20px 20px;
color: var(--gl-text-muted);
font-size: 15px;
line-height: 1.7;
border-top: 1px solid var(--gl-border-alt);
}
@media (min-width: 768px) {
.gl-faq-a { padding: 4px 26px 26px; font-size: 16px; }
}
.gl-faq-a p { margin: 14px 0 0; }
.gl-faq-a p:first-child { margin-top: 14px; }
.gl-faq-a a { color: var(--gl-bg-dark); text-decoration: underline; }
/* ════════════════════════════════════════════
FINAL CTA
════════════════════════════════════════════ */
.gl-final-cta {
background: var(--gl-gold);
padding: 48px 20px;
text-align: center;
}
.gl-final-cta h2 {
font-family: var(--gl-font-headline);
font-size: 40px;
letter-spacing: 0.03em;
color: var(--gl-bg-dark);
line-height: 1;
margin-bottom: 4px;
}
.gl-final-cta h2.gl-dim {
color: #ffffff;
margin-bottom: 20px;
}
.gl-final-phone {
display: block;
font-family: var(--gl-font-headline);
font-size: 48px;
color: var(--gl-bg-dark);
text-decoration: none;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
.gl-final-avail {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(0,0,0,0.5);
margin-bottom: 24px;
}
.gl-final-btns {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 480px;
margin: 0 auto;
}
.gl-final-btns .gl-btn-dark-cta {
display: block;
background: var(--gl-bg-dark);
color: var(--gl-gold);
padding: 18px;
text-align: center;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
}
.gl-final-btns .gl-btn-wa-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--gl-whatsapp);
color: #fff;
padding: 16px;
border-radius: 2px;
font-size: 13px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
}
.gl-trust-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(0,0,0,0.1);
}
.gl-tr-item {
font-size: 12px;
font-weight: 700;
color: rgba(0,0,0,0.5);
white-space: nowrap;
}
/* ════════════════════════════════════════════
FOOTER
5-column grid: brand+NAP (wider) | Practice | Service Areas | Firm | Contact
════════════════════════════════════════════ */
.gl-footer {
background: var(--gl-bg-dark);
padding: 0 0 80px;
color: rgba(255,255,255,0.62);
border-top: 3px solid var(--gl-gold);
}
.gl-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 1240px;
margin: 0 auto;
padding: 48px 16px 32px;
}
/* ── Brand + NAP column ─────────────────────── */
.gl-footer-brand-col {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 8px 8px;
}
.gl-footer-brand-col .gl-fn {
font-family: var(--gl-font-headline);
font-size: 26px;
color: #fff;
letter-spacing: 0.04em;
line-height: 1.1;
margin-bottom: 4px;
}
.gl-footer-brand-col .gl-ft {
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gl-gold);
margin-bottom: 18px;
}
.gl-fb-desc {
font-size: 13.5px;
line-height: 1.65;
color: rgba(255,255,255,0.58);
max-width: 36ch;
margin: 0 0 18px;
}
.gl-fb-address {
font-style: normal;
font-size: 13px;
line-height: 1.65;
color: rgba(255,255,255,0.60);
margin: 0 0 14px;
}
.gl-fb-phone {
display: inline-block;
color: var(--gl-gold);
font-weight: 700;
font-size: 17px;
text-decoration: none;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.gl-fb-phone:hover { color: var(--gl-gold-hover); }
.gl-fb-meta {
font-size: 10px;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(252,211,77,0.78);
}
/* ── Link columns — mobile: each is a distinct panel card ── */
.gl-fc-col {
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
padding: 20px 22px 22px;
}
.gl-fc-col h5 {
position: relative;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
font-weight: 900;
color: var(--gl-gold);
margin: 0 0 16px;
padding-bottom: 10px;
font-family: var(--gl-font-body);
}
.gl-fc-col h5::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 28px;
height: 2px;
background: var(--gl-gold);
border-radius: 1px;
}
.gl-fc-col h5.gl-fc-h5-spaced { margin-top: 28px; }
.gl-fc-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.gl-fc-col ul a {
display: inline-block;
font-size: 13.5px;
line-height: 1.4;
color: rgba(255,255,255,0.65);
text-decoration: none;
transition: color 0.15s ease;
}
.gl-fc-col ul a:hover { color: var(--gl-gold); }
/* ── Service Areas: county hubs + 2-column town grid ── */
.gl-areas-intro {
font-size: 12.5px;
line-height: 1.55;
color: rgba(255,255,255,0.55);
margin: 0 0 16px;
}
.gl-areas-counties {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0 0 16px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gl-areas-counties a {
font-size: 13.5px;
font-weight: 700;
color: rgba(255,255,255,0.80);
text-decoration: none;
transition: color 0.15s ease;
}
.gl-areas-counties a:hover { color: var(--gl-gold); }
.gl-areas-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 18px;
}
.gl-areas-sublabel {
display: block;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 900;
color: rgba(252,211,77,0.72);
margin-bottom: 11px;
}
.gl-areas-sub ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.gl-areas-sub a {
display: inline-block;
font-size: 13px;
line-height: 1.4;
color: rgba(255,255,255,0.62);
text-decoration: none;
transition: color 0.15s ease;
}
.gl-areas-sub a:hover { color: var(--gl-gold); }
.gl-areas-more {
display: block;
margin-top: 14px;
font-size: 12.5px;
font-weight: 700;
color: rgba(252,211,77,0.82);
text-decoration: none;
transition: color 0.15s ease;
}
.gl-areas-more:hover { color: var(--gl-gold); }
.gl-areas-specialty {
display: block;
margin-top: 18px;
padding: 12px 14px;
border: 1px solid rgba(252,211,77,0.35);
border-radius: 10px;
background: rgba(252,211,77,0.06);
text-decoration: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.gl-areas-specialty:hover {
border-color: var(--gl-gold);
background: rgba(252,211,77,0.10);
}
.gl-areas-specialty-label {
display: block;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 900;
color: rgba(252,211,77,0.72);
margin-bottom: 4px;
}
.gl-areas-specialty-name {
display: block;
font-size: 13.5px;
font-weight: 700;
color: rgba(255,255,255,0.85);
}
/* ── Bottom legal strip ─────────────────────── */
.gl-footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
}
.gl-footer-bottom-inner {
max-width: 1240px;
margin: 0 auto;
padding: 24px 24px;
text-align: center;
font-size: 11px;
line-height: 1.8;
color: rgba(255,255,255,0.45);
letter-spacing: 0.02em;
}
.gl-fb-legal-line {
display: block;
}
@media (min-width: 768px) {
.gl-fb-legal-line { display: inline; }
.gl-fb-legal-line + .gl-fb-legal-line::before {
content: "\00a0\00b7\00a0";
color: rgba(255,255,255,0.3);
margin: 0 4px;
}
}
/* ════════════════════════════════════════════
STICKY BOTTOM BAR (MOBILE ONLY)
════════════════════════════════════════════ */
.gl-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: #ffffff;
border-top: 2px solid var(--gl-gold);
box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
display: grid;
grid-template-columns: repeat(3, 1fr);
height: 58px;
}
.gl-sb-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
text-decoration: none;
border-right: 1px solid rgba(0,0,0,0.08);
transition: background 0.2s;
}
.gl-sb-btn:last-child { border-right: none; }
.gl-sb-btn:active { background: rgba(253,215,46,0.12); }
.gl-sb-icon { font-size: 18px; line-height: 1; }
.gl-sb-label {
font-size: 9px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gl-bg-dark);
}
.gl-sb-btn.gl-wa .gl-sb-label { color: var(--gl-whatsapp); }
.gl-sb-btn.gl-ph .gl-sb-label { color: var(--gl-gold); }
.gl-sb-btn.gl-ch .gl-sb-label { color: var(--gl-chat-blue); }
/* ════════════════════════════════════════════
RESPONSIVE: TABLET (≥ 768px)
════════════════════════════════════════════ */
@media (min-width: 768px) {
.gl-es-bar .gl-availability { display: inline; }
/* Nav padding is set in the earlier responsive block — don't override vertical here */
body.gl-body nav.gl-nav ul.gl-nav-menu { display: flex !important; }
.gl-hero { padding: 64px 40px 56px; }
.gl-hero h1 { font-size: 96px; }
.gl-hero-sub { font-size: 14px; }
.gl-hero-tag { font-size: 20px; }
.gl-trust-badges {
grid-template-columns: repeat(4, 1fr);
padding: 0 40px 40px;
}
.gl-section, .gl-section-alt, .gl-section-dark { padding: 72px 40px; }
.gl-h2 { font-size: 52px; }
.gl-verdicts { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gl-pa-grid { grid-template-columns: repeat(2, 1fr); }
.gl-t-cards { grid-template-columns: repeat(3, 1fr); }
.gl-footer-grid {
grid-template-columns: repeat(3, 1fr);
gap: 36px 32px;
padding: 64px 40px 40px;
}
.gl-fc-col {
background: transparent;
border: none;
border-radius: 0;
padding: 0;
}
.gl-footer-brand-col {
grid-column: 1 / -1;
max-width: 640px;
padding: 0;
}
.gl-final-cta h2 { font-size: 56px; }
.gl-final-phone { font-size: 64px; }
.gl-final-btns {
flex-direction: row;
justify-content: center;
}
.gl-final-btns .gl-btn-dark-cta,
.gl-final-btns .gl-btn-wa-cta { flex: 1; max-width: 240px; }
/* Hide mobile sticky bottom bar on tablet+ */
.gl-sticky-bar { display: none; }
.gl-footer { padding-bottom: 40px; }
}
/* ════════════════════════════════════════════
RESPONSIVE: DESKTOP (≥ 1024px)
════════════════════════════════════════════ */
@media (min-width: 1024px) {
.gl-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
text-align: left;
padding: 96px 80px;
min-height: 600px;
gap: 60px;
}
.gl-hero-inner { max-width: 620px; }
.gl-hero h1 { font-size: 110px; }
.gl-hero-sub { font-size: 15px; }
.gl-hero-tag { max-width: 540px; }
.gl-phone-cta {
display: inline-block;
padding: 24px 40px;
max-width: 460px;
}
.gl-wa-cta { max-width: 460px; }
.gl-hero-form-wrap {
display: block;
justify-self: end;
width: 100%;
max-width: 440px;
}
.gl-section, .gl-section-alt, .gl-section-dark {
padding: 96px 80px;
}
.gl-section-inner {
max-width: 1200px;
margin: 0 auto;
}
.gl-helpline-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.gl-helpline-row.gl-helpline-row-formonly {
grid-template-columns: 1fr;
max-width: 640px;
}
.gl-form-card { margin-top: 0; }
.gl-helpline-box {
padding: 56px 44px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.gl-helpline-box h2 { font-size: 64px !important; }
.gl-helpline-box .gl-nights { font-size: 22px !important; margin-bottom: 18px !important; }
.gl-helpline-box .gl-sub { font-size: 19px !important; margin-bottom: 32px !important; }
.gl-helpline-box .gl-btn-gold {
padding: 22px !important;
font-size: 16px !important;
letter-spacing: 0.1em !important;
}
.gl-helpline-box .gl-btn-wa {
padding: 18px !important;
font-size: 14px !important;
}
.gl-form-card {
padding: 36px 32px !important;
}
.gl-form-card h3 { font-size: 26px !important; }
.gl-form-card .gl-field,
.gl-form-card .gl-select { padding: 12px 14px !important; font-size: 14px !important; }
.gl-form-card .gl-submit { padding: 16px !important; font-size: 13px !important; }
.gl-pa-grid { grid-template-columns: repeat(3, 1fr); }
.gl-footer-grid {
grid-template-columns: 1.7fr 1fr 1.1fr 1.1fr;
gap: 48px;
padding: 72px 40px 48px;
}
.gl-footer-brand-col {
grid-column: auto;
max-width: none;
}
.gl-h2 { font-size: 64px; }
}
/* ════════════════════════════════════════════
WIDE-SCREEN PROPORTION CONSTRAINT
On screens ≥1280px, content centers within a max-width
instead of stretching edge-to-edge.
════════════════════════════════════════════ */
@media (min-width: 1280px) {
/* Spanish bar — content centered */
body.gl-body .gl-es-bar {
padding-left: calc((100vw - 1280px) / 2 + 32px) !important;
padding-right: calc((100vw - 1280px) / 2 + 32px) !important;
}
/* Nav — keep edge-to-edge with normal side padding (no 1280px content cap, otherwise
a 6-item menu can't fit alongside the logo + CTA on wider viewports) */
body.gl-body nav.gl-nav {
padding-left: 48px !important;
padding-right: 48px !important;
}
/* Hero — content centered */
.gl-hero {
padding-left: calc((100vw - 1280px) / 2 + 40px) !important;
padding-right: calc((100vw - 1280px) / 2 + 40px) !important;
}
/* Super Lawyers banner */
.gl-sl-banner {
padding-left: calc((100vw - 1280px) / 2 + 40px);
padding-right: calc((100vw - 1280px) / 2 + 40px);
}
/* Final CTA */
.gl-final-cta {
padding-left: calc((100vw - 1280px) / 2 + 40px);
padding-right: calc((100vw - 1280px) / 2 + 40px);
}
/* Footer */
.gl-footer {
padding-left: calc((100vw - 1280px) / 2 + 40px);
padding-right: calc((100vw - 1280px) / 2 + 40px);
}
/* Section paddings — sections that use .gl-section-inner already constrained */
.gl-section,
.gl-section-alt,
.gl-section-dark,
.gl-content-section {
padding-left: calc((100vw - 1280px) / 2 + 40px) !important;
padding-right: calc((100vw - 1280px) / 2 + 40px) !important;
}
/* Helpline row max width */
.gl-helpline-row {
max-width: 1180px;
margin: 0 auto;
}
}
/* ════════════════════════════════════════════
TICKET GRID — clickable cards listing common violations
Used inside pillar prose content (.gl-ticket-grid)
════════════════════════════════════════════ */
.gl-ticket-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 24px 0 36px;
}
@media (min-width: 600px) {
.gl-ticket-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.gl-ticket-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
.gl-ticket-card {
background: #ffffff;
border: 1.5px solid var(--gl-border-alt);
padding: 16px 12px;
border-radius: 8px;
text-decoration: none !important;
transition: all 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 90px;
cursor: pointer;
}
.gl-ticket-card:hover {
border-color: var(--gl-gold);
background: #fffef0;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(252,211,77,0.25);
}
.gl-ticket-name {
font-size: 14px;
font-weight: 800;
color: var(--gl-bg-dark);
line-height: 1.2;
margin-bottom: 4px;
}
.gl-ticket-statute {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gl-gold-dark);
line-height: 1.2;
}
/* ════════════════════════════════════════════
DEFENSE GRID — numbered strategy cards used inside pillar prose
════════════════════════════════════════════ */
.gl-defense-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 22px 0 28px;
}
@media (min-width: 720px) {
.gl-defense-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.gl-defense-card {
position: relative;
background: #ffffff;
border: 1px solid var(--gl-border-alt);
border-radius: 10px;
padding: 22px 22px 20px 26px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
overflow: hidden;
}
.gl-defense-card::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--gl-gold);
}
.gl-defense-card:hover {
border-color: var(--gl-gold);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(252,211,77,0.18);
}
.gl-defense-num {
display: block;
font-family: 'Bebas Neue', var(--gl-font-body);
font-size: 22px;
font-weight: 700;
letter-spacing: 0.10em;
color: var(--gl-gold-dark);
margin-bottom: 6px;
line-height: 1;
}
.gl-defense-title {
font-family: var(--gl-font-body);
font-size: 18px;
font-weight: 900;
color: var(--gl-bg-dark);
margin: 0 0 10px;
letter-spacing: 0.005em;
line-height: 1.25;
}
.gl-defense-desc {
font-size: 15px;
line-height: 1.55;
color: var(--gl-text-muted);
margin: 0;
}
.gl-defense-closer {
margin-top: 8px;
padding: 14px 18px;
background: #faf7ef;
border-left: 3px solid var(--gl-gold);
border-radius: 4px;
font-size: 15.5px;
color: var(--gl-bg-dark);
}
.gl-defense-closer strong { font-weight: 900; }
/* ════════════════════════════════════════════
AI VISIBILITY SECTION — phone mockup + text
════════════════════════════════════════════ */
.gl-ai-section {
background: linear-gradient(160deg, #0c0c0c 0%, #1a1a1a 100%);
padding: 56px 20px;
overflow: hidden;
}
.gl-ai-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"top"
"phone"
"bottom";
gap: 22px;
align-items: center;
max-width: 1080px;
margin: 0 auto;
}
.gl-ai-text-top { grid-area: top; }
.gl-ai-phone-wrap {
grid-area: phone;
display: flex;
justify-content: center;
}
.gl-ai-text-bottom { grid-area: bottom; }
/* "Trusted by clients. Recognized by AI." — punchy closer line */
.gl-ai-tagline {
font-size: 17px !important;
letter-spacing: 0.02em;
color: var(--gl-gold) !important;
margin-top: 12px;
margin-bottom: 18px;
}
.gl-ai-tagline strong { color: var(--gl-gold); }
.gl-ai-phone {
width: 220px;
height: 440px;
background: #1a1a1a;
border: 7px solid #000;
border-radius: 34px;
box-shadow: 0 24px 60px rgba(253,215,46,0.15), 0 16px 40px rgba(0,0,0,0.6);
position: relative;
overflow: hidden;
}
.gl-ai-phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 22px;
background: #000;
border-radius: 0 0 14px 14px;
z-index: 2;
}
.gl-ai-phone-screen {
position: absolute;
inset: 8px;
background: #f7f7f8;
border-radius: 32px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.gl-ai-chat-header {
padding: 30px 16px 12px;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #e5e5e7;
background: #ffffff;
}
.gl-ai-sparkle {
font-size: 16px;
}
.gl-ai-app-name {
font-size: 13px;
font-weight: 700;
color: #111;
letter-spacing: 0.02em;
}
.gl-ai-chat-body {
flex: 1;
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 12px;
line-height: 1.4;
color: #1a1a1a;
}
.gl-ai-msg {
padding: 10px 12px;
border-radius: 14px;
max-width: 92%;
}
.gl-ai-msg-user {
background: #ececec;
align-self: flex-end;
border-bottom-right-radius: 4px;
}
.gl-ai-msg-bot {
background: #ffffff;
align-self: flex-start;
border: 1px solid #e5e5e7;
border-bottom-left-radius: 4px;
}
.gl-ai-bot-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
font-weight: 700;
color: var(--gl-gold-dark);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 6px;
}
.gl-ai-bot-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10a37f;
}
.gl-ai-msg-bot strong {
color: var(--gl-bg-dark);
font-weight: 800;
}
.gl-ai-typing {
align-self: flex-start;
display: flex;
gap: 4px;
padding: 10px 14px;
background: #ffffff;
border: 1px solid #e5e5e7;
border-radius: 14px;
border-bottom-left-radius: 4px;
}
.gl-ai-typing span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #c0c0c0;
animation: gl-ai-blink 1.4s infinite both;
}
.gl-ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.gl-ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes gl-ai-blink {
0%, 80%, 100% { opacity: 0.3; }
40% { opacity: 1; }
}
.gl-ai-text { text-align: center; }
.gl-ai-text .gl-eyebrow { justify-content: center; display: inline-flex; }
.gl-ai-text .gl-h2 { margin-bottom: 16px; }
@media (min-width: 900px) {
.gl-ai-section { padding: 96px 40px; }
.gl-ai-grid {
grid-template-columns: 1fr 1.1fr;
grid-template-areas:
"phone top"
"phone bottom";
gap: 16px 64px;
align-items: center;
}
.gl-ai-text-top,
.gl-ai-text-bottom { text-align: left; align-self: center; }
.gl-ai-text-top { align-self: end; }
.gl-ai-text-bottom { align-self: start; }
.gl-ai-phone { width: 280px; height: 560px; border-width: 8px; border-radius: 42px; }
.gl-ai-text .gl-eyebrow { display: flex; justify-content: flex-start; }
}
/* ════════════════════════════════════════════
ANIMATIONS
════════════════════════════════════════════ */
@keyframes gl-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.gl-fade-up { animation: gl-fade-up 0.6s ease forwards; opacity: 0; }
/* ════════════════════════════════════════════
TIER 4 GEO PAGES — local court info section.
Matches pillar brand styling; navy cards, gold accents.
════════════════════════════════════════════ */
.gl-geo-court-section {
background: linear-gradient(180deg, #f6f4ef 0%, #ffffff 100%);
padding: 64px 24px;
}
.gl-geo-court-section .gl-section-inner { max-width: 1100px; margin: 0 auto; }
.gl-geo-court-section .gl-eyebrow {
display: inline-block;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.12em;
color: #0e1f3b;
background: #fcd34d;
padding: 6px 14px;
border-radius: 4px;
margin-bottom: 16px;
font-size: 14px;
}
.gl-geo-court-section .gl-h2 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
color: #0e1f3b;
margin: 0 0 32px;
}
.gl-geo-court-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 768px) {
.gl-geo-court-grid { grid-template-columns: 1fr; }
}
.gl-geo-court-card {
background: #0e1f3b;
color: #fff;
border-radius: 12px;
padding: 32px;
box-shadow: 0 10px 30px rgba(14, 31, 59, 0.15);
position: relative;
overflow: hidden;
}
.gl-geo-court-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: #fcd34d;
}
.gl-geo-court-card-title {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 20px;
color: #fcd34d;
margin: 0 0 20px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.gl-geo-court-dl { margin: 0; padding: 0; }
.gl-geo-court-dl dt {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fcd34d;
margin-top: 14px;
}
.gl-geo-court-dl dt:first-of-type { margin-top: 0; }
.gl-geo-court-dl dd {
margin: 4px 0 0 0;
padding: 0;
font-size: 16px;
line-height: 1.45;
color: #f6f4ef;
}
.gl-geo-court-dl dd a {
color: #fff;
text-decoration: underline;
text-decoration-color: rgba(252, 211, 77, 0.6);
text-underline-offset: 3px;
}
.gl-geo-court-dl dd a:hover {
color: #fcd34d;
text-decoration-color: #fcd34d;
}
.gl-geo-court-routes-lead {
font-size: 15px;
color: #f6f4ef;
opacity: 0.85;
margin: 0 0 14px;
}
.gl-geo-court-routes-list {
list-style: none;
margin: 0;
padding: 0;
}
.gl-geo-court-routes-list li {
font-size: 16px;
line-height: 1.6;
color: #fff;
padding: 6px 0;
border-bottom: 1px solid rgba(252, 211, 77, 0.18);
display: flex;
align-items: center;
gap: 10px;
}
.gl-geo-court-routes-list li:last-child { border-bottom: none; }
.gl-geo-route-bullet {
color: #fcd34d;
font-weight: 900;
font-size: 18px;
line-height: 1;
}
/* Body intro: tighten the prose margins so geo body doesn't feel sparse */
.gl-geo-body .gl-prose { max-width: 820px; }
.gl-geo-body .gl-prose h2 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(26px, 3.5vw, 34px);
color: #0e1f3b;
margin-top: 0;
margin-bottom: 20px;
}
.gl-geo-body .gl-prose h3 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 22px;
color: #0e1f3b;
margin-top: 32px;
margin-bottom: 12px;
}
.gl-geo-body .gl-prose p {
font-size: 17px;
line-height: 1.7;
color: #222;
margin: 0 0 18px;
}
/* ════════════════════════════════════════════
PERSONAL INJURY — premium visual sections
Scoped class names (.gl-pi-*) so styles only
apply where the pillar HTML uses them.
════════════════════════════════════════════ */
/* Lato-900 headings for PI pillar body (override Bebas h2) */
.gl-prose .gl-pi-case-grid + h2,
.gl-prose .gl-pi-callout + h2,
.gl-prose .gl-pi-process + h2,
.gl-prose .gl-pi-comp + h2 {
/* no-op anchor — keeps cascade order predictable */
}
/* Inline phone CTA row above the case grid */
.gl-pi-cta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px;
margin: 8px 0 32px;
padding: 18px 20px;
background: var(--gl-bg-light);
border-left: 4px solid var(--gl-gold);
border-radius: 6px;
}
.gl-pi-phone-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--gl-navy);
color: #fff !important;
padding: 12px 20px;
border-radius: 6px;
text-decoration: none !important;
transition: background 0.2s, transform 0.15s;
font-family: var(--gl-font-body);
box-shadow: 0 4px 14px rgba(14, 31, 59, 0.25);
}
.gl-pi-phone-btn:hover {
background: #142a52;
transform: translateY(-1px);
color: #fff !important;
}
.gl-pi-phone-btn-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.gl-pi-phone-btn-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gl-gold);
}
.gl-pi-phone-btn-num {
font-size: 18px;
font-weight: 900;
margin-top: 3px;
}
.gl-pi-cta-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.gl-pi-cta-meta-line {
font-size: 13px;
font-weight: 700;
color: var(--gl-navy);
display: flex;
align-items: center;
gap: 8px;
}
.gl-pi-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #2dba4e;
box-shadow: 0 0 0 3px rgba(45, 186, 78, 0.18);
}
/* 8-case grid — premium tiles with SVG icons */
.gl-pi-case-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 8px 0 16px;
}
@media (min-width: 600px) {
.gl-pi-case-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.gl-pi-case-card {
background: #fff;
border: 1px solid var(--gl-border-alt);
border-left: 4px solid var(--gl-gold);
border-radius: 8px;
padding: 22px 22px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.gl-pi-case-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.09);
border-left-color: var(--gl-gold-dark);
}
.gl-pi-case-icon {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gl-bg-light);
border-radius: 50%;
margin-bottom: 14px;
}
.gl-pi-case-icon svg { width: 32px; height: 32px; }
.gl-pi-case-card h3 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 18px;
color: var(--gl-navy);
margin: 0 0 8px;
letter-spacing: 0;
line-height: 1.25;
}
.gl-pi-case-card p {
font-size: 14.5px;
line-height: 1.6;
color: var(--gl-text-muted);
margin: 0;
}
/* Statute deadline callout — yellow alert block */
.gl-pi-callout {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
margin: 16px 0 8px;
padding: 28px 24px;
background: linear-gradient(135deg, #fff8d6 0%, #fcd34d 100%);
border-radius: 10px;
border: 1.5px solid var(--gl-gold-dark);
box-shadow: 0 6px 18px rgba(252, 211, 77, 0.35);
}
@media (min-width: 700px) {
.gl-pi-callout { flex-direction: row; padding: 32px 32px; gap: 24px; }
}
.gl-pi-callout-icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
background: #fff;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(14, 31, 59, 0.15);
}
.gl-pi-callout-icon svg { width: 40px; height: 40px; }
.gl-pi-callout-body { flex: 1; }
.gl-pi-callout-eyebrow {
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
color: var(--gl-navy);
text-transform: uppercase;
opacity: 0.7;
margin-bottom: 6px;
}
.gl-pi-callout-heading {
font-family: 'Lato', sans-serif !important;
font-weight: 900 !important;
font-size: 24px !important;
color: var(--gl-navy) !important;
margin: 0 0 12px !important;
letter-spacing: 0 !important;
}
@media (min-width: 700px) {
.gl-pi-callout-heading { font-size: 28px !important; }
}
.gl-pi-callout-body p {
color: var(--gl-navy) !important;
font-size: 16px !important;
line-height: 1.65 !important;
margin: 0 0 10px !important;
}
.gl-pi-callout-body p:last-child { margin-bottom: 0 !important; }
.gl-pi-callout-cta-line strong { color: var(--gl-navy); }
/* 5-step process — vertical numbered steps with gold accent line */
.gl-pi-process {
display: flex;
flex-direction: column;
gap: 18px;
margin: 8px 0 16px;
padding-left: 4px;
position: relative;
}
.gl-pi-process::before {
content: '';
position: absolute;
left: 26px;
top: 28px;
bottom: 28px;
width: 2px;
background: linear-gradient(180deg, var(--gl-gold) 0%, transparent 100%);
opacity: 0.35;
z-index: 0;
}
.gl-pi-process-step {
display: flex;
gap: 18px;
align-items: flex-start;
background: #fff;
padding: 18px 20px;
border-radius: 8px;
border: 1px solid var(--gl-border-alt);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
position: relative;
z-index: 1;
}
.gl-pi-process-num {
flex: 0 0 auto;
width: 52px;
height: 52px;
background: var(--gl-navy);
color: var(--gl-gold);
font-family: var(--gl-font-headline);
font-size: 26px;
font-weight: 700;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
box-shadow: 0 4px 12px rgba(14, 31, 59, 0.2);
}
.gl-pi-process-content { flex: 1; min-width: 0; }
.gl-pi-process-content h3 {
font-family: 'Lato', sans-serif !important;
font-weight: 900 !important;
font-size: 18px !important;
color: var(--gl-navy) !important;
margin: 0 0 4px !important;
letter-spacing: 0 !important;
}
.gl-pi-process-content p {
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--gl-text-muted) !important;
margin: 0 !important;
}
/* Compensation feature box — dark navy panel */
.gl-pi-comp {
background: linear-gradient(135deg, var(--gl-navy) 0%, #1a2d54 100%);
color: #fff;
border-radius: 12px;
padding: 32px 28px;
margin: 8px 0 16px;
box-shadow: 0 12px 32px rgba(14, 31, 59, 0.25);
}
.gl-pi-comp-intro p {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 16px !important;
line-height: 1.6 !important;
margin: 0 0 18px !important;
}
.gl-pi-comp-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px 24px;
margin-bottom: 18px;
}
@media (min-width: 640px) {
.gl-pi-comp-grid { grid-template-columns: 1fr 1fr; }
}
.gl-pi-comp-item {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15.5px;
line-height: 1.5;
color: #fff;
padding: 6px 0;
}
.gl-pi-comp-item strong { color: var(--gl-gold); font-weight: 900; }
.gl-pi-comp-check {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
}
.gl-pi-comp-foot {
font-size: 14px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.78) !important;
margin: 12px 0 0 !important;
padding-top: 16px;
border-top: 1px solid rgba(252, 211, 77, 0.25);
font-style: italic;
}
.gl-pi-comp-foot strong { color: var(--gl-gold); font-style: normal; font-weight: 900; }
/* After-injury checklist — 5 horizontal cards with number + icon */
.gl-pi-checklist {
display: flex;
flex-direction: column;
gap: 14px;
margin: 8px 0 16px;
}
.gl-pi-check-item {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid var(--gl-border-alt);
border-radius: 8px;
padding: 18px 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.gl-pi-check-item:hover {
border-color: var(--gl-gold);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.07);
}
.gl-pi-check-num {
flex: 0 0 auto;
width: 42px;
height: 42px;
background: var(--gl-gold);
color: var(--gl-navy);
font-family: var(--gl-font-headline);
font-size: 24px;
font-weight: 700;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
.gl-pi-check-icon {
flex: 0 0 auto;
width: 48px;
height: 48px;
display: none;
align-items: center;
justify-content: center;
background: var(--gl-bg-light);
border-radius: 50%;
}
@media (min-width: 600px) {
.gl-pi-check-icon { display: inline-flex; }
}
.gl-pi-check-icon svg { width: 28px; height: 28px; }
.gl-pi-check-body { flex: 1; min-width: 0; }
.gl-pi-check-body h3 {
font-family: 'Lato', sans-serif !important;
font-weight: 900 !important;
font-size: 17px !important;
color: var(--gl-navy) !important;
margin: 0 0 4px !important;
letter-spacing: 0 !important;
}
.gl-pi-check-body p {
font-size: 14.5px !important;
line-height: 1.55 !important;
color: var(--gl-text-muted) !important;
margin: 0 !important;
}
.gl-pi-check-item-final {
background: linear-gradient(135deg, #fff8d6 0%, #fcd34d 100%);
border: 1.5px solid var(--gl-gold-dark);
}
.gl-pi-check-item-final .gl-pi-check-num {
background: var(--gl-navy);
color: var(--gl-gold);
}
.gl-pi-check-item-final .gl-pi-check-icon { background: rgba(255, 255, 255, 0.7); }
.gl-pi-check-item-final .gl-pi-check-body p { color: var(--gl-navy) !important; }
.gl-pi-check-cta {
display: inline-block;
margin-top: 10px;
padding: 9px 18px;
background: var(--gl-navy);
color: var(--gl-gold) !important;
border-radius: 6px;
text-decoration: none !important;
font-weight: 900;
font-size: 14px;
letter-spacing: 0.04em;
transition: background 0.2s, transform 0.15s;
}
.gl-pi-check-cta:hover {
background: #142a52;
transform: translateY(-1px);
color: var(--gl-gold) !important;
}
/* ════════════════════════════════════════════
ABOUT PAGE — modernized prose treatment
Scoped to .gl-about-* classes; does not affect
other pages using the gl-prose container.
════════════════════════════════════════════ */
.gl-about-intro {
margin: 0 0 56px;
padding: 0 0 32px;
border-bottom: 1px solid var(--gl-border-alt);
}
.gl-about-lead {
font-family: var(--gl-font-body);
font-size: 19px;
line-height: 1.6;
color: var(--gl-text);
font-weight: 500;
margin: 0 0 18px;
}
.gl-about-intro p:not(.gl-about-lead) {
font-size: 16px;
line-height: 1.75;
color: var(--gl-text-muted);
margin: 0 0 14px;
}
@media (min-width: 768px) {
.gl-about-lead { font-size: 22px; }
.gl-about-intro p:not(.gl-about-lead) { font-size: 17px; }
}
.gl-about-section {
margin: 0 0 56px;
}
.gl-about-section > p {
font-size: 16px;
line-height: 1.75;
color: var(--gl-text-muted);
margin: 0 0 16px;
}
@media (min-width: 768px) {
.gl-about-section > p { font-size: 17px; }
}
.gl-about-h {
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 0 0 24px;
}
.gl-about-eyebrow {
font-family: var(--gl-font-body);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gl-gold-dark);
margin-bottom: 8px;
padding-left: 14px;
position: relative;
}
.gl-about-eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 2px;
background: var(--gl-gold);
}
.gl-about-h2 {
font-family: var(--gl-font-body) !important;
font-weight: 900 !important;
font-size: 28px !important;
line-height: 1.1 !important;
color: var(--gl-navy) !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
text-align: left !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
}
@media (min-width: 768px) {
.gl-about-h2 { font-size: 34px !important; }
}
/* Values grid — 5 numbered cards for the approach section */
.gl-values-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 8px;
}
@media (min-width: 640px) {
.gl-values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.gl-value-card-wide { grid-column: 1 / -1; }
}
.gl-value-card {
background: #fff;
border: 1px solid var(--gl-border-alt);
border-top: 3px solid var(--gl-gold);
padding: 22px 22px 20px;
border-radius: 2px;
position: relative;
transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.gl-value-card:hover {
border-color: var(--gl-gold);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(14, 31, 59, 0.08);
}
.gl-value-num {
font-family: var(--gl-font-headline);
font-size: 28px;
color: var(--gl-gold-dark);
line-height: 1;
margin-bottom: 10px;
letter-spacing: 0.02em;
}
.gl-value-card h3 {
font-family: var(--gl-font-body) !important;
font-size: 17px !important;
font-weight: 900 !important;
color: var(--gl-navy) !important;
margin: 0 0 8px !important;
letter-spacing: 0 !important;
text-transform: none !important;
line-height: 1.25 !important;
}
.gl-value-card p {
font-size: 14.5px !important;
line-height: 1.6 !important;
color: var(--gl-text-muted) !important;
margin: 0 !important;
}
.gl-value-card p strong { color: var(--gl-text); }
.gl-value-card p em { color: var(--gl-gold-dark); font-style: italic; }
/* Recognition strip — horizontal awards row */
.gl-recognition-strip {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--gl-border-alt);
border: 1px solid var(--gl-border-alt);
border-radius: 2px;
overflow: hidden;
margin-top: 8px;
}
@media (min-width: 640px) { .gl-recognition-strip { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gl-recognition-strip { grid-template-columns: repeat(5, 1fr); } }
.gl-rec-item {
background: #fff;
padding: 22px 14px;
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 96px;
justify-content: center;
}
.gl-rec-item strong {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 16px;
color: var(--gl-navy);
line-height: 1.15;
letter-spacing: -0.005em;
}
.gl-rec-item span {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gl-text-faint);
}
/* "What Hire The Shark Means" — set apart with cream background */
.gl-about-meaning {
background: var(--gl-cream, #f6f4ef);
padding: 36px 28px;
border-radius: 2px;
border-left: 4px solid var(--gl-gold);
}
.gl-about-meaning .gl-about-eyebrow { color: var(--gl-gold-dark); }
.gl-about-meaning p {
font-size: 16px;
line-height: 1.7;
color: var(--gl-text);
margin: 0 0 14px;
}
.gl-about-pullquote {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 22px !important;
line-height: 1.3 !important;
color: var(--gl-navy) !important;
margin: 18px 0 0 !important;
padding-top: 18px;
border-top: 1px solid rgba(14, 31, 59, 0.12);
}
@media (min-width: 768px) {
.gl-about-meaning { padding: 44px 40px; }
.gl-about-meaning p { font-size: 17px; }
.gl-about-pullquote { font-size: 26px !important; }
}
/* Practice areas grid on the About page */
.gl-practice-grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 18px;
}
@media (min-width: 640px) { .gl-practice-grid { grid-template-columns: repeat(2, 1fr); } }
.gl-practice-link {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--gl-border-alt);
border-left: 3px solid var(--gl-gold);
text-decoration: none !important;
border-radius: 2px;
transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.gl-practice-link:hover {
background: #fefbf0;
border-color: var(--gl-gold);
border-left-color: var(--gl-gold-dark);
transform: translateX(2px);
}
.gl-practice-link span {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 15px;
color: var(--gl-navy);
}
.gl-practice-link em {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gl-gold-dark);
font-style: normal;
}
/* FAQ heading inside .gl-prose — match new About style on the About page */
.gl-prose h2#faq {
font-family: var(--gl-font-body) !important;
font-weight: 900 !important;
font-size: 28px !important;
line-height: 1.1 !important;
color: var(--gl-navy) !important;
text-align: left !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
border-top: 1px solid var(--gl-border-alt) !important;
padding-top: 36px !important;
margin-top: 16px !important;
}
@media (min-width: 768px) {
.gl-prose h2#faq { font-size: 32px !important; }
}
/* ════════════════════════════════════════════
GEO PAGE — RESTRUCTURED BODY (v2)
At-a-glance stat strip → editorial lead w/ drop-cap →
insight cards → pillar link → FAQ accordion.
Applies only to single-geo_page.php via .gl-geo-body-v2 and
.gl-geo-faq-section so it doesn't bleed into the pillar pages.
════════════════════════════════════════════ */
.gl-geo-body-v2 {
background: #ffffff;
padding: 56px 20px 64px;
position: relative;
}
@media (min-width: 768px) {
.gl-geo-body-v2 { padding: 88px 40px 96px; }
}
.gl-geo-body-inner {
max-width: 1100px;
margin: 0 auto;
}
/* ── At-a-glance stat strip ─────────────────── */
.gl-geo-stat-strip {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 0 48px;
}
@media (min-width: 640px) {
.gl-geo-stat-strip { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.gl-geo-stat-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 64px; }
}
.gl-geo-stat {
position: relative;
display: block;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid var(--gl-border-alt);
border-radius: 10px;
padding: 20px 18px 22px;
box-shadow: 0 2px 14px rgba(14, 31, 59, 0.04);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
overflow: hidden;
}
.gl-geo-stat::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--gl-gold);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.25s ease;
}
.gl-geo-stat:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(14, 31, 59, 0.10);
border-color: var(--gl-gold);
}
.gl-geo-stat:hover::before { transform: scaleX(1); }
.gl-geo-stat-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(252, 211, 77, 0.16);
color: var(--gl-navy);
margin-bottom: 12px;
}
.gl-geo-stat-icon svg { width: 22px; height: 22px; }
.gl-geo-stat-label {
font-family: var(--gl-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gl-text-muted);
margin-bottom: 6px;
}
.gl-geo-stat-value {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 16px;
line-height: 1.25;
color: var(--gl-navy);
}
@media (min-width: 768px) {
.gl-geo-stat-value { font-size: 17px; }
}
/* Phone CTA card — premium gold finish */
.gl-geo-stat-cta {
background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 55%, #fde68a 100%);
border: 1px solid rgba(14, 31, 59, 0.08);
box-shadow: 0 6px 22px rgba(251, 191, 36, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
padding-bottom: 18px;
}
.gl-geo-stat-cta::before { display: none; }
.gl-geo-stat-cta .gl-geo-stat-icon {
background: var(--gl-navy);
color: var(--gl-gold);
box-shadow: 0 4px 12px rgba(14, 31, 59, 0.28);
}
.gl-geo-stat-cta .gl-geo-stat-label { color: rgba(14, 31, 59, 0.80); }
.gl-geo-stat-cta .gl-geo-stat-value { color: var(--gl-navy); }
.gl-geo-stat-phone {
font-size: 24px !important;
letter-spacing: 0.005em;
font-weight: 900;
}
@media (min-width: 768px) {
.gl-geo-stat-phone { font-size: 26px !important; }
}
.gl-geo-stat-cta-hint {
margin-top: 10px;
font-family: var(--gl-font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(14, 31, 59, 0.70);
}
.gl-geo-stat-cta-hint span { transition: transform 0.18s ease; display: inline-block; }
.gl-geo-stat-cta:hover {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(251, 191, 36, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.55);
border-color: rgba(14, 31, 59, 0.14);
}
.gl-geo-stat-cta:hover .gl-geo-stat-cta-hint span { transform: translateX(4px); }
/* ── Editorial body header ──────────────────── */
.gl-geo-body-header {
text-align: center;
margin-bottom: 24px;
}
.gl-geo-eyebrow {
font-family: var(--gl-font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gl-gold-dark);
margin-bottom: 12px;
}
.gl-geo-body-h2 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(30px, 5vw, 44px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--gl-navy);
margin: 0;
}
/* ── Lead paragraph with editorial drop-cap ──── */
.gl-geo-lead-wrap {
max-width: 760px;
margin: 0 auto 56px;
}
.gl-geo-lead {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 1.7;
color: #1c1c1c;
margin: 0 0 18px;
font-weight: 500;
}
@media (min-width: 768px) {
.gl-geo-lead { font-size: 19px; line-height: 1.65; }
}
.gl-geo-lead-rest {
font-family: 'Lato', sans-serif;
font-size: 16.5px;
line-height: 1.7;
color: #444;
margin: 0;
}
@media (min-width: 768px) {
.gl-geo-lead-rest { font-size: 17px; }
}
/* ── Insight cards ──────────────────────────── */
.gl-geo-insight-section {
margin: 0 0 48px;
}
.gl-geo-insight-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.gl-geo-insight-rule {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(14,31,59,0.18), transparent);
}
.gl-geo-insight-title {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 18px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gl-navy);
margin: 0;
text-align: center;
white-space: nowrap;
}
@media (max-width: 600px) {
.gl-geo-insight-title { white-space: normal; font-size: 16px; }
}
.gl-geo-insight-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.gl-geo-insight-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.gl-geo-insight {
position: relative;
background: #fff;
border: 1px solid var(--gl-border-alt);
border-radius: 10px;
padding: 26px 22px 24px;
box-shadow: 0 2px 14px rgba(14, 31, 59, 0.04);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
}
.gl-geo-insight::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--gl-gold);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.gl-geo-insight:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(14, 31, 59, 0.10);
}
.gl-geo-insight:hover::after { transform: scaleY(1); }
.gl-geo-insight-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.gl-geo-insight-icon {
font-size: 24px;
line-height: 1;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(252,211,77,0.18);
border-radius: 10px;
}
.gl-geo-insight-num {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 30px;
letter-spacing: 0.02em;
color: rgba(14,31,59,0.18);
line-height: 1;
}
.gl-geo-insight-text {
font-family: 'Lato', sans-serif;
font-size: 15.5px;
line-height: 1.65;
color: #2a2a2a;
margin: 0;
}
@media (min-width: 768px) {
.gl-geo-insight-text { font-size: 16px; }
}
/* ── Pillar link at end of body ─────────────── */
.gl-geo-pillar-link-wrap {
text-align: center;
margin-top: 8px;
}
.gl-geo-pillar-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: 'Lato', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--gl-navy);
text-decoration: none;
padding: 12px 22px;
border: 1.5px solid var(--gl-navy);
border-radius: 999px;
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.gl-geo-pillar-link:hover {
background: var(--gl-navy);
color: #fff;
transform: translateY(-1px);
}
.gl-geo-pillar-link-arrow {
display: inline-block;
transition: transform 0.2s ease;
}
.gl-geo-pillar-link:hover .gl-geo-pillar-link-arrow { transform: translateX(3px); }
/* ── FAQ accordion section ──────────────────── */
.gl-geo-faq-section {
background: #f6f4ef;
padding: 64px 20px 72px;
border-top: 4px solid var(--gl-gold);
}
@media (min-width: 768px) {
.gl-geo-faq-section { padding: 88px 40px 96px; }
}
.gl-geo-faq-section .gl-section-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.gl-geo-faq-section .gl-eyebrow {
margin-bottom: 12px;
}
.gl-geo-faq-section .gl-h2 {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4vw, 38px);
letter-spacing: -0.01em;
color: var(--gl-navy);
margin-bottom: 36px;
line-height: 1.1;
}
.gl-geo-faq-section .gl-h2 em {
font-style: normal;
color: var(--gl-gold-dark);
}
.gl-geo-faq-section .gl-faq-list {
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
margin: 0 0 28px;
}
.gl-geo-faq-footer {
font-size: 14px;
color: var(--gl-text-muted);
margin: 28px 0 0;
}
.gl-geo-faq-footer a {
color: var(--gl-navy);
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid var(--gl-gold);
padding-bottom: 1px;
}
.gl-geo-faq-footer a:hover { color: var(--gl-gold-dark); }
/* ════════════════════════════════════════════
SECTION RHYTHM — pillar / county / township pages
Every section after the hero gets a thin gold
gradient top accent so transitions read crisp.
Adjacent same-color sections are forced to alternate
so the page reads as distinct blocks, not a wall.
Scoped to .gl-pillar-page so homepage is unaffected.
════════════════════════════════════════════ */
/* Top accent line on each section after the hero/trust-strip.
Skips: hero (first), trust badges (narrow), final CTA (yellow),
and dark sections (they already self-distinguish). */
.gl-pillar-page .gl-section,
.gl-pillar-page .gl-section-alt,
.gl-pillar-page article.gl-section,
.gl-pillar-page article.gl-section-alt,
.gl-pillar-page .gl-geo-body-v2,
.gl-pillar-page .gl-geo-faq-section,
.gl-pillar-page .gl-geo-court-section {
position: relative;
}
.gl-pillar-page .gl-section::before,
.gl-pillar-page .gl-section-alt::before,
.gl-pillar-page article.gl-section::before,
.gl-pillar-page article.gl-section-alt::before,
.gl-pillar-page .gl-geo-body-v2::before,
.gl-pillar-page .gl-geo-faq-section::before,
.gl-pillar-page .gl-geo-court-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 8px;
background: var(--gl-navy);
pointer-events: none;
z-index: 2;
}
/* Don't put the rule above sections that immediately follow the hero
or the trust-badge strip — the hero already does enough work, and a
gold line on a yellow CTA would read as a color-collision. */
.gl-pillar-page .gl-hero + .gl-trust-section::before,
.gl-pillar-page .gl-trust-section + section::before,
.gl-pillar-page .gl-trust-section + article::before {
display: none;
}
.gl-pillar-page .gl-trust-section::before,
.gl-pillar-page .gl-final-cta::before {
display: none;
}
/* Above and below dark sections, the rule reads better in gold-on-dark.
But on a section that follows a dark section, switch the line to white
for clear contrast against the cream/white block below. */
/* Section that follows a dark block — use gold bar so the navy-on-navy
would otherwise be invisible. */
.gl-pillar-page .gl-section-dark + .gl-section::before,
.gl-pillar-page .gl-section-dark + .gl-section-alt::before,
.gl-pillar-page .gl-section-dark + article.gl-section::before,
.gl-pillar-page .gl-section-dark + article.gl-section-alt::before,
.gl-pillar-page .gl-section-dark + .gl-geo-body-v2::before,
.gl-pillar-page .gl-section-dark + .gl-geo-faq-section::before,
.gl-pillar-page .gl-section-dark + .gl-geo-court-section::before {
background: var(--gl-gold);
height: 8px;
}
/* Force a clear alternating background pattern so the eye reads the page
as distinct blocks. White ⇄ stronger-cream ⇄ navy ⇄ stronger-cream ⇄ white. */
.gl-pillar-page .gl-section + .gl-section,
.gl-pillar-page .gl-section + article.gl-section,
.gl-pillar-page article.gl-section + .gl-section,
.gl-pillar-page article.gl-section + article.gl-section,
.gl-pillar-page .gl-section + .gl-geo-body-v2,
.gl-pillar-page .gl-geo-body-v2 + .gl-section,
.gl-pillar-page .gl-geo-court-section + .gl-geo-body-v2 {
background: #ebe6d8; /* stronger cream than var(--gl-bg-light) — readable contrast */
}
.gl-pillar-page .gl-section-alt + .gl-section-alt {
background: #ffffff;
}
/* Bump base cream to a clearly distinct shade — the prior #f6f4ef was so
close to white that it read as one continuous block. */
.gl-pillar-page .gl-section-alt:not(.gl-geo-faq-section) {
background: #ebe6d8;
}
/* Body-v2 sits on bright pure white — clean and high-end. The 8px navy
bar above separates it from the court-info white above. */
.gl-pillar-page .gl-geo-body-v2 {
background: #ffffff;
}
/* Court-info section gets its own distinct cream tone, sitting between
the reviews (cream) and body (white) so it never blends in. */
.gl-pillar-page .gl-geo-court-section {
background: #ffffff;
}
/* FAQ section keeps a softer cream so it doesn't compete with body-v2. */
.gl-pillar-page .gl-geo-faq-section {
background: #ebe6d8;
}
/* A subtle bottom shadow on sections preceding a dark block gives the
dark block a clearer "rising" feel rather than just slamming in. */
.gl-pillar-page .gl-section + .gl-section-dark,
.gl-pillar-page article.gl-section + .gl-section-dark,
.gl-pillar-page .gl-section-alt + .gl-section-dark,
.gl-pillar-page .gl-geo-body-v2 + .gl-section-dark,
.gl-pillar-page .gl-geo-faq-section + .gl-section-dark,
.gl-pillar-page .gl-geo-court-section + .gl-section-dark {
box-shadow: 0 -8px 24px rgba(0,0,0,0.10);
}
/* ════════════════════════════════════════════
TRAFFIC PAGE HERO — NJ map + ticket (mobile-first)
════════════════════════════════════════════ */
.gl-traffic-hero {
position: relative;
background: #fff;
color: var(--gl-navy);
padding: 24px 22px 38px;
overflow: hidden;
}
.gl-traffic-hero .gl-th-grid { position: relative; }
.gl-traffic-hero .gl-th-text { position: relative; z-index: 3; }
.gl-traffic-hero .gl-th-h1 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 800;
font-size: 40px;
line-height: 1.05;
letter-spacing: -0.01em;
color: var(--gl-navy);
margin: 0;
max-width: 260px;
}
.gl-traffic-hero .gl-th-rule {
display: block; width: 60px; height: 5px;
background: var(--gl-gold); border-radius: 3px; margin: 18px 0 16px;
}
.gl-traffic-hero .gl-th-sub {
font-family: var(--gl-font-body);
font-size: 17px; line-height: 1.45; color: var(--gl-navy);
max-width: 290px; margin: 0 0 22px;
}
.gl-traffic-hero .gl-th-feats { list-style: none; margin: 0 0 24px; padding: 0; max-width: 320px; }
.gl-traffic-hero .gl-th-feats li { display: flex; align-items: center; gap: 15px; padding: 11px 0; }
.gl-traffic-hero .gl-th-feats li + li { border-top: 1px solid #eef0f3; }
.gl-traffic-hero .gl-th-ic {
width: 50px; height: 50px; border-radius: 50%;
border: 2px solid var(--gl-gold);
display: flex; align-items: center; justify-content: center;
flex: 0 0 auto; background: rgba(255,255,255,0.7);
}
.gl-traffic-hero .gl-th-ic svg { width: 23px; height: 23px; stroke: var(--gl-navy); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-traffic-hero .gl-th-feats li > span:last-child { font-family: var(--gl-font-body); font-size: 18px; font-weight: 700; color: var(--gl-navy); }
.gl-traffic-hero .gl-th-btns { display: flex; flex-direction: column; gap: 13px; position: relative; z-index: 4; max-width: 340px; }
.gl-traffic-hero .gl-th-btn {
display: flex; align-items: center; height: 58px; border-radius: 12px;
font-family: var(--gl-font-body); font-weight: 800; font-size: 17px;
letter-spacing: 0.03em; padding: 0 20px; text-decoration: none;
}
.gl-traffic-hero .gl-th-btn-primary { background: var(--gl-navy); color: #fff; justify-content: space-between; box-shadow: 0 12px 26px rgba(16,37,74,0.30); }
.gl-traffic-hero .gl-th-btn-primary .gl-th-left { display: flex; align-items: center; gap: 11px; }
.gl-traffic-hero .gl-th-btn-primary svg { width: 21px; height: 21px; stroke: var(--gl-gold); fill: none; stroke-width: 2; }
.gl-traffic-hero .gl-th-btn-secondary { background: #fff; color: var(--gl-navy); border: 2px solid var(--gl-navy); justify-content: space-between; }
.gl-traffic-hero .gl-th-btn-secondary svg { width: 22px; height: 22px; stroke: var(--gl-navy); fill: none; stroke-width: 2; }
/* art layer — mobile: absolute overlay behind text */
.gl-traffic-hero .gl-th-art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.gl-traffic-hero .gl-th-dots {
position: absolute; right: 34px; top: 344px; width: 210px; height: 210px;
background-image: radial-gradient(circle, rgba(190,150,60,0.5) 1.7px, transparent 1.9px);
background-size: 13px 13px;
-webkit-mask-image: radial-gradient(115% 110% at 70% 45%, #000 34%, transparent 70%);
mask-image: radial-gradient(115% 110% at 70% 45%, #000 34%, transparent 70%);
}
.gl-traffic-hero .gl-th-nj { position: absolute; right: -22px; top: 152px; width: 212px; height: auto; }
.gl-traffic-hero .gl-th-ticket {
position: absolute; right: -10px; bottom: 92px; width: 196px; height: auto;
transform: rotate(7deg); border-radius: 5px;
box-shadow: 0 16px 34px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.12); z-index: 2;
}
/* desktop: two-column hero (text/buttons left, map+ticket right) */
@media (min-width: 900px) {
.gl-traffic-hero { padding: 64px max(40px, calc((100% - 1200px) / 2)); }
.gl-traffic-hero .gl-th-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.gl-traffic-hero .gl-th-h1 { font-size: 62px; max-width: 11ch; }
.gl-traffic-hero .gl-th-sub { font-size: 19px; max-width: 440px; }
.gl-traffic-hero .gl-th-feats { max-width: 380px; }
.gl-traffic-hero .gl-th-btns { flex-direction: row; flex-wrap: wrap; max-width: none; }
.gl-traffic-hero .gl-th-btn { flex: 0 0 auto; }
.gl-traffic-hero .gl-th-art { position: relative; inset: auto; height: 560px; }
.gl-traffic-hero .gl-th-dots { right: 56px; top: 120px; width: 300px; height: 300px; }
.gl-traffic-hero .gl-th-nj { right: 16px; top: 16px; width: 330px; }
.gl-traffic-hero .gl-th-ticket { right: 0; bottom: 56px; width: 282px; }
}
/* ============================================================
COUNTY-PAGE TOWN GRID (added 2026-05-29 — orphan-pages fix)
============================================================ */
.gl-county-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin: 32px 0;
}
.gl-town-card {
background: var(--gl-cream, #f6f4ef);
border: 1px solid #e6e1d6;
border-left: 4px solid var(--gl-yellow, #fcd34d);
border-radius: 6px;
padding: 18px 20px;
}
.gl-town-card__name {
font-family: 'Lato', sans-serif;
font-weight: 900;
font-size: 18px;
margin: 0 0 12px;
color: var(--gl-navy, #0e1f3b);
letter-spacing: 0.01em;
}
.gl-town-card__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.gl-town-card__links li { margin: 0; }
.gl-town-card__links a {
display: block;
font-size: 14px;
color: var(--gl-navy, #0e1f3b);
text-decoration: none;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: border-color 120ms ease, color 120ms ease;
}
.gl-town-card__links a:hover {
color: var(--gl-yellow, #fcd34d);
border-bottom-color: var(--gl-yellow, #fcd34d);
}
@media (max-width: 640px) {
.gl-county-grid { grid-template-columns: 1fr; gap: 14px; }
.gl-town-card { padding: 14px 16px; }
.gl-town-card__name { font-size: 16px; }
.gl-town-card__links a { font-size: 13px; }
}
/* ════════════════════════════════════════════
BLOG — article header, body, archive grid
════════════════════════════════════════════ */
.gl-article-header {
background: var(--gl-navy);
padding: 56px 20px 48px;
}
.gl-article-header-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.gl-article-eyebrow {
display: inline-block;
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 14px;
letter-spacing: 0.04em;
color: var(--gl-gold);
text-decoration: none;
margin-bottom: 16px;
transition: color 0.15s ease;
}
.gl-article-eyebrow:hover { color: var(--gl-gold-hover); }
.gl-article-eyebrow-static { pointer-events: none; }
.gl-article-title {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 32px;
line-height: 1.12;
letter-spacing: -0.01em;
color: #fff;
margin: 0;
}
.gl-article-meta {
margin-top: 20px;
font-size: 13px;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.62);
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
align-items: center;
}
.gl-article-meta-dot { color: rgba(255,255,255,0.3); }
.gl-blog-archive-sub {
margin: 18px 0 0;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.72);
}
/* Article body — serif long-form, premium law-firm read */
.gl-article-section { padding-top: 48px; padding-bottom: 56px; }
.gl-article-inner { max-width: 720px; margin: 0 auto; }
.gl-article-body {
font-family: var(--gl-font-serif);
font-size: 18px;
line-height: 1.78;
color: #1c1c1c;
}
.gl-article-body > *:first-child { margin-top: 0; }
.gl-article-body p { margin: 0 0 22px; }
.gl-article-body h2 {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 25px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--gl-navy);
margin: 44px 0 16px;
}
.gl-article-body h3 {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 19px;
line-height: 1.25;
color: var(--gl-navy);
margin: 32px 0 12px;
}
.gl-article-body a {
color: var(--gl-gold-dark);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.15s ease;
}
.gl-article-body a:hover { color: var(--gl-navy); }
.gl-article-body ul,
.gl-article-body ol { margin: 0 0 22px; padding-left: 24px; }
.gl-article-body li { margin-bottom: 10px; }
.gl-article-body strong { color: #111; font-weight: 700; }
.gl-article-body blockquote {
margin: 28px 0;
padding: 4px 0 4px 22px;
border-left: 3px solid var(--gl-gold);
font-style: italic;
color: #333;
}
.gl-article-body .gl-article-key {
font-family: var(--gl-font-body);
font-size: 16px;
line-height: 1.6;
background: var(--gl-bg-light);
border: 1px solid var(--gl-border);
border-left: 4px solid var(--gl-gold);
border-radius: 8px;
padding: 18px 20px;
margin: 28px 0;
}
.gl-article-body .gl-article-key strong { color: var(--gl-navy); }
/* Inline consult CTA */
.gl-article-cta {
margin: 44px 0 8px;
background: var(--gl-navy);
border-radius: 14px;
padding: 28px 26px;
display: flex;
flex-direction: column;
gap: 20px;
}
.gl-article-cta-text h3 {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 20px;
line-height: 1.25;
color: #fff;
margin: 0 0 8px;
}
.gl-article-cta-text p {
font-family: var(--gl-font-body);
font-size: 15px;
line-height: 1.55;
color: rgba(255,255,255,0.78);
margin: 0;
}
.gl-article-cta-btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.gl-article-cta-wa {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 20px;
border-radius: 10px;
background: var(--gl-whatsapp);
color: #fff;
font-family: var(--gl-font-body);
font-weight: 700;
font-size: 15px;
text-decoration: none;
transition: filter 0.15s ease;
}
.gl-article-cta-wa:hover { filter: brightness(1.07); }
.gl-article-disclaimer {
margin: 36px 0 0;
padding-top: 20px;
border-top: 1px solid var(--gl-border);
font-family: var(--gl-font-body);
font-size: 13px;
line-height: 1.6;
color: var(--gl-text-muted);
}
.gl-article-disclaimer a { color: var(--gl-gold-dark); }
/* Blog archive grid */
.gl-blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.gl-blog-card {
border: 1px solid var(--gl-border);
border-radius: 14px;
background: #fff;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.gl-blog-card:hover {
transform: translateY(-2px);
border-color: var(--gl-gold);
box-shadow: 0 12px 30px rgba(14,31,59,0.10);
}
.gl-blog-card-link {
display: block;
padding: 26px 26px 24px;
text-decoration: none;
}
.gl-blog-card-cat {
display: inline-block;
font-family: var(--gl-font-serif);
font-style: italic;
font-size: 13px;
color: var(--gl-gold-dark);
margin-bottom: 12px;
}
.gl-blog-card-title {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 21px;
line-height: 1.22;
letter-spacing: -0.01em;
color: var(--gl-navy);
margin: 0 0 12px;
}
.gl-blog-card-excerpt {
font-family: var(--gl-font-serif);
font-size: 16px;
line-height: 1.62;
color: #3a3a3a;
margin: 0 0 18px;
}
.gl-blog-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--gl-font-body);
font-size: 13px;
color: var(--gl-text-muted);
}
.gl-blog-card-arrow { font-weight: 700; color: var(--gl-navy); }
.gl-blog-pagination { margin-top: 36px; text-align: center; }
.gl-blog-pagination .page-numbers {
display: inline-block;
padding: 8px 14px;
margin: 0 3px;
border-radius: 8px;
font-family: var(--gl-font-body);
font-weight: 700;
font-size: 14px;
color: var(--gl-navy);
text-decoration: none;
border: 1px solid var(--gl-border);
transition: border-color 0.15s ease, background 0.15s ease;
}
.gl-blog-pagination .page-numbers.current {
background: var(--gl-navy);
color: #fff;
border-color: var(--gl-navy);
}
.gl-blog-pagination a.page-numbers:hover { border-color: var(--gl-gold); }
@media (min-width: 768px) {
.gl-article-header { padding: 80px 24px 64px; }
.gl-article-title { font-size: 44px; }
.gl-article-cta {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 32px 34px;
}
.gl-article-cta-text { flex: 1; }
.gl-article-cta-btns { flex-shrink: 0; }
.gl-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
.gl-article-title { font-size: 52px; }
.gl-blog-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Homepage "Latest from the Blog" */
.gl-home-blog .gl-blog-grid { margin-top: 28px; }
.gl-home-blog-all { text-align: center; margin-top: 32px; }
/* Single-post "More NJ Legal Insights" related block */
.gl-article-related {
margin: 56px 0 0;
padding-top: 40px;
border-top: 1px solid rgba(14, 31, 59, 0.12);
}
.gl-article-related-h {
font-family: var(--gl-font-body);
font-weight: 900;
font-size: 22px;
color: var(--gl-navy);
margin: 0 0 24px;
letter-spacing: -0.01em;
}
/* ════════════════════════════════════════════
COURTHOUSE PAGES (gl-court-*) — directions/parking/what-to-expect
════════════════════════════════════════════ */
.gl-court-facts{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--gl-border);border-radius:14px;overflow:hidden;margin:8px 0 30px;}
@media(min-width:560px){.gl-court-facts{grid-template-columns:1fr 1fr;}}
.gl-court-fact{padding:16px 18px;border-bottom:1px solid var(--gl-border-alt);}
.gl-court-fact:nth-child(odd){border-right:1px solid var(--gl-border-alt);}
.gl-court-fact .k{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-gold-dark);margin:0 0 3px;}
.gl-court-fact .v{font-size:15.5px;font-weight:700;color:var(--gl-bg-dark);line-height:1.35;}
.gl-court-fact .v a{color:var(--gl-bg-dark);text-decoration:none;}
.gl-court-map{border-radius:14px;overflow:hidden;border:1px solid var(--gl-border);margin:8px 0 6px;}
.gl-court-map iframe{display:block;width:100%;height:320px;border:0;}
.gl-court-maplink{font-size:14px;font-weight:800;margin:0 0 22px;}
.gl-court-maplink a{color:var(--gl-gold-dark);text-decoration:none;}
.gl-court-faq{border-top:1px solid var(--gl-border-alt);margin-top:14px;}
.gl-court-faq details{border-bottom:1px solid var(--gl-border-alt);}
.gl-court-faq summary{cursor:pointer;list-style:none;font-size:17px;font-weight:800;color:var(--gl-bg-dark);padding:16px 32px 16px 2px;position:relative;}
.gl-court-faq summary::-webkit-details-marker{display:none;}
.gl-court-faq summary::after{content:"+";position:absolute;right:6px;top:13px;font-size:24px;line-height:1;color:var(--gl-gold-dark);font-weight:400;transition:transform .18s ease;}
.gl-court-faq details[open] summary::after{content:"–";}
.gl-court-faq details p{padding:0 2px 16px;margin:0;}
/* ── Language switcher (top bar EN · ES) ── */
.gl-lang-switch{display:inline-flex;align-items:center;gap:6px;margin-left:14px;font-weight:700;letter-spacing:.04em;}
.gl-lang-switch a{color:inherit;opacity:.55;text-decoration:none;transition:opacity .15s ease;}
.gl-lang-switch a:hover{opacity:1;}
.gl-lang-switch a.gl-lang-active{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.gl-lang-sep{opacity:.4;}
@media (max-width:480px){.gl-lang-switch{margin-left:8px;}}