/* =============================================================
FenceMyPool — Design Tokens (v23)
Single source of truth for palette, type, spacing, shadows.
Linked in every page's via
============================================================= */
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Spline+Sans:wght@400;500;600;700&display=swap');
:root {
/* Palette */
--blue: #1f5fa6;
--blue-d: #184b85;
--blue-soft: #e7eef8;
--amber: #e8a317;
--amber-h: #cf8f0c; /* hover */
--amber-soft: #fbeecb;
--canvas: #f6f3ec;
--canvas-2: #efeae1;
--card: #fffefb;
--ink: #1e2730;
--ink-2: #4a5360;
--ink-3: #8a9099;
--hairline: #e3ddd1;
--hairline-2: #d4cdc3;
--green: #1f9d62;
--green-soft: #d6f0e4;
/* Legacy aliases — keeps old var() refs working during transition */
--primary-blue: #1f5fa6;
--safety-orange: #e8a317; /* remapped: amber replaces orange */
--success-green: #1f9d62;
--dark-gray: #1e2730;
--light-gray: #f6f3ec;
--white: #fffefb;
/* Typography */
--font-serif: 'Newsreader', Georgia, serif;
--font-sans: 'Spline Sans', system-ui, sans-serif;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(30,39,48,.04), 0 4px 12px -6px rgba(30,39,48,.14);
--shadow: 0 1px 3px rgba(30,39,48,.05), 0 10px 28px -12px rgba(30,39,48,.18);
--shadow-lg: 0 2px 6px rgba(30,39,48,.06), 0 28px 56px -24px rgba(30,39,48,.28);
/* Radii */
--r-sm: 6px;
--r: 10px;
--r-lg: 16px;
}
/* ── Base resets that apply everywhere ── */
*, *::before, *::after { box-sizing: border-box; }
body {
background: var(--canvas);
color: var(--ink);
font-family: var(--font-sans);
font-size: 18px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.2;
color: var(--ink);
}
/* Headings inside hero-style dark/colored sections must stay white —
the plain h1-h4 rule above wins over inherited color otherwise. */
.hero h1, .hero h2, .hero h3, .hero h4,
.page-hero h1, .page-hero h2, .page-hero h3, .page-hero h4,
.post-hero h1, .post-hero h2, .post-hero h3, .post-hero h4,
.quote-hero h1, .quote-hero h2, .quote-hero h3, .quote-hero h4,
.final-cta h1, .final-cta h2, .final-cta h3, .final-cta h4,
.state-finder h1, .state-finder h2, .state-finder h3, .state-finder h4,
.page-strip h1, .page-strip h2, .page-strip h3, .page-strip h4 {
color: var(--white);
}
/* Header nav gets its own wider max-width, decoupled from page content width,
so the logo and nav links get genuine breathing room via justify-content:
space-between instead of being capped to the same width as page content. */
.nav-container {
max-width: 1340px;
margin: 0 auto;
padding: 0 20px;
}
/* ── Global button tokens ── */
/* Primary = amber with dark text (amber is light — dark text required) */
.btn-primary,
a.btn-primary,
button.btn-primary {
background: var(--amber) !important;
color: #2e2606 !important;
border: none !important;
font-family: var(--font-sans);
font-weight: 700;
border-radius: var(--r);
transition: background .15s;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
background: var(--amber-h) !important;
color: #2e2606 !important;
}
/* Secondary / ghost */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
background: transparent !important;
color: var(--blue) !important;
border: 2px solid var(--blue) !important;
font-family: var(--font-sans);
font-weight: 600;
border-radius: var(--r);
transition: all .15s;
}
.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
background: var(--blue) !important;
color: #fff !important;
}
/* Secondary buttons inside hero-style dark/colored sections must stay white —
the global .btn-secondary !important rule above wins otherwise. */
.hero .btn-secondary, .hero a.btn-secondary,
.page-hero .btn-secondary, .page-hero a.btn-secondary,
.post-hero .btn-secondary, .post-hero a.btn-secondary,
.quote-hero .btn-secondary, .quote-hero a.btn-secondary,
.final-cta .btn-secondary, .final-cta a.btn-secondary,
.state-finder .btn-secondary, .state-finder a.btn-secondary,
.contact-cta-section .btn-secondary, .contact-cta-section a.btn-secondary {
color: var(--white) !important;
border-color: var(--white) !important;
}
.hero .btn-secondary:hover, .hero a.btn-secondary:hover,
.page-hero .btn-secondary:hover, .page-hero a.btn-secondary:hover,
.post-hero .btn-secondary:hover, .post-hero a.btn-secondary:hover,
.quote-hero .btn-secondary:hover, .quote-hero a.btn-secondary:hover,
.final-cta .btn-secondary:hover, .final-cta a.btn-secondary:hover,
.state-finder .btn-secondary:hover, .state-finder a.btn-secondary:hover,
.contact-cta-section .btn-secondary:hover, .contact-cta-section a.btn-secondary:hover {
background: var(--white) !important;
color: var(--blue) !important;
}
/* Tertiary = text link style, no fill/border */
.btn-tertiary,
a.btn-tertiary,
button.btn-tertiary {
background: none !important;
border: none !important;
color: var(--blue) !important;
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
cursor: pointer;
padding: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
.btn-tertiary:hover,
a.btn-tertiary:hover,
button.btn-tertiary:hover {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Variant for use on dark/blue backgrounds */
.btn-tertiary.on-dark { color: #fff !important; }
.btn-tertiary.on-dark:hover { opacity: .85; text-decoration: none; }
/* ── Links ── */
a { color: var(--blue); }
/* ── Hairline utility ── */
.hr { border: none; border-top: 1px solid var(--hairline); margin: 0; }
/* =============================================================
E-E-A-T Components (v27)
============================================================= */
/* ArticleByline */
.article-byline{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--canvas,#f6f3ec);border:1px solid var(--hairline,#e3ddd1);border-radius:10px;margin-bottom:28px;flex-wrap:wrap;}
.article-byline__avatar{width:44px;height:44px;border-radius:50%;background:var(--blue,#1f5fa6);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;font-family:var(--font-serif,'Newsreader',Georgia,serif);font-size:18px;font-weight:600;}
.article-byline__meta{flex:1;min-width:180px;}
.article-byline__name{font-size:14px;font-weight:700;color:var(--ink,#1e2730);display:block;}
.article-byline__name a{color:var(--ink,#1e2730);text-decoration:none;}
.article-byline__name a:hover{color:var(--blue,#1f5fa6);text-decoration:underline;}
.article-byline__cred{font-size:12.5px;color:var(--ink-2,#4a5360);display:block;margin-top:1px;}
.article-byline__dates{font-size:12px;color:var(--ink-3,#8a9099);display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;}
.article-byline__editorial{font-size:12px;color:var(--ink-3,#8a9099);white-space:nowrap;align-self:center;flex-shrink:0;}
.article-byline__editorial a{color:var(--blue,#1f5fa6);text-decoration:none;font-weight:600;}
.article-byline__editorial a:hover{text-decoration:underline;}
/* StatBand */
.stat-band{background:linear-gradient(135deg,var(--blue,#1f5fa6),var(--blue-d,#184b85));color:#fff;padding:52px 0;}
.stat-band__inner{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.stat-band__item{text-align:center;padding:0 24px;border-left:1px solid rgba(255,255,255,.15);}
.stat-band__item:first-child{border-left:none;}
.stat-band__num{font-family:var(--font-serif,'Newsreader',Georgia,serif);font-size:clamp(44px,6vw,68px);font-weight:600;line-height:1;color:#fff;}
.stat-band__num sup{font-size:.45em;vertical-align:super;font-weight:400;color:#fff;}
.stat-band__label{font-size:15px;color:rgba(255,255,255,.82);margin-top:10px;line-height:1.4;max-width:18ch;margin-left:auto;margin-right:auto;}
.stat-band__source{font-size:11px;color:rgba(255,255,255,.45);margin-top:8px;letter-spacing:.04em;text-transform:uppercase;}
.stat-band__source a{color:rgba(255,255,255,.55);text-decoration:underline;text-underline-offset:2px;}
.stat-band__source a:hover{color:rgba(255,255,255,.85);}
@media(max-width:640px){.stat-band__inner{grid-template-columns:1fr;gap:28px;}.stat-band__item{border-left:none;border-top:1px solid rgba(255,255,255,.15);padding:20px 0 0;}.stat-band__item:first-child{border-top:none;padding-top:0;}}
/* Testimonial */
.testimonial{background:var(--card,#fffefb);border:1px solid var(--hairline,#e3ddd1);border-radius:14px;padding:32px 36px;box-shadow:0 1px 3px rgba(30,39,48,.04),0 8px 24px -12px rgba(30,39,48,.14);}
.testimonial__mark{font-family:var(--font-serif,'Newsreader',Georgia,serif);font-size:56px;line-height:.6;height:26px;color:var(--blue,#1f5fa6);margin-bottom:18px;display:block;}
.testimonial__quote{font-family:var(--font-serif,'Newsreader',Georgia,serif);font-size:clamp(17px,2.2vw,20px);line-height:1.55;color:var(--ink,#1e2730);font-style:italic;margin:0 0 22px;}
.testimonial__who{display:flex;align-items:center;gap:14px;}
.testimonial__avatar{width:48px;height:48px;border-radius:50%;background:var(--blue-soft,#e7eef8);border:2px solid var(--hairline,#e3ddd1);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif,'Newsreader',Georgia,serif);font-size:18px;color:var(--blue,#1f5fa6);font-weight:600;}
.testimonial__name{font-size:15px;font-weight:700;color:var(--ink,#1e2730);display:block;}
.testimonial__location{font-size:13px;color:var(--ink-3,#8a9099);display:block;}
/* Article Sources */
.article-sources{margin-top:48px;padding-top:24px;border-top:1px solid var(--hairline,#e3ddd1);}
.article-sources h4{font-family:var(--font-sans,'Spline Sans',system-ui,sans-serif);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3,#8a9099);margin:0 0 12px;}
.article-sources ol{list-style:decimal;padding-left:1.4em;margin:0;}
.article-sources li{font-size:13px;color:var(--ink-2,#4a5360);line-height:1.6;margin-bottom:6px;}
.article-sources a{color:var(--blue,#1f5fa6);text-decoration:underline;text-underline-offset:2px;word-break:break-all;}
/* Form submit trust line */
.form-submit-trust{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--ink-3,#8a9099);font-family:var(--font-sans,'Spline Sans',system-ui,sans-serif);}
/* =============================================================
.prose — Article & Guide Typography System
AA contrast: #2c343d on white = 10.4:1 ✓
============================================================= */
.prose {
/* measure + rhythm */
max-width: 70ch;
color: #2c343d;
font-family: var(--font-sans, 'Spline Sans', system-ui, sans-serif);
font-size: 18px;
line-height: 1.7;
/* smooth rendering */
-webkit-font-smoothing: antialiased;
}
/* ── Headings ── */
.prose h2 {
font-family: var(--font-serif, 'Newsreader', Georgia, serif);
font-size: clamp(22px, 3vw, 28px);
font-weight: 600;
line-height: 1.2;
color: #1a2230;
margin: 2.4em 0 0.65em;
padding-bottom: 0.35em;
border-bottom: 2px solid var(--hairline, #e3ddd1);
letter-spacing: -0.01em;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
font-family: var(--font-serif, 'Newsreader', Georgia, serif);
font-size: clamp(18px, 2.4vw, 22px);
font-weight: 600;
line-height: 1.25;
color: #1a2230;
margin: 1.8em 0 0.5em;
letter-spacing: -0.005em;
}
.prose h4 {
font-family: var(--font-sans, 'Spline Sans', system-ui, sans-serif);
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--blue, #1f5fa6);
margin: 1.5em 0 0.4em;
}
/* ── Body text ── */
.prose p {
margin: 0 0 1.2em;
color: #2c343d;
font-size: 18px;
line-height: 1.7;
}
/* ── Links ── */
.prose a {
color: var(--blue, #1f5fa6);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(31,95,166,.35);
transition: text-decoration-color .15s;
}
.prose a:hover {
text-decoration-color: var(--blue, #1f5fa6);
}
/* ── Lists ── */
.prose ul,
.prose ol {
margin: 0.3em 0 1.3em;
padding-left: 1.6em;
color: #2c343d;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li {
margin-bottom: 0.5em;
line-height: 1.65;
font-size: 18px;
}
.prose li::marker {
color: var(--blue, #1f5fa6);
font-weight: 700;
}
/* Nested lists */
.prose li > ul,
.prose li > ol {
margin: 0.3em 0 0.3em;
}
/* ── Blockquote pull-quotes ── */
.prose blockquote {
margin: 2em 0;
padding: 1.1em 1.4em 1.1em 1.6em;
border-left: 4px solid var(--blue, #1f5fa6);
background: var(--blue-soft, #e7eef8);
border-radius: 0 8px 8px 0;
color: var(--blue-d, #184b85);
font-family: var(--font-serif, 'Newsreader', Georgia, serif);
font-size: clamp(18px, 2.2vw, 21px);
font-style: italic;
line-height: 1.5;
}
.prose blockquote p {
margin: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
}
.prose blockquote cite {
display: block;
margin-top: 0.75em;
font-style: normal;
font-family: var(--font-sans, 'Spline Sans', system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
color: var(--blue, #1f5fa6);
opacity: 0.75;
}
/* ── Strong & em ── */
.prose strong { font-weight: 700; color: #1a2230; }
.prose em { font-style: italic; }
/* ── Tables inside prose ── */
.prose table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
margin: 1.5em 0;
overflow-x: auto;
display: block;
}
.prose thead th {
background: var(--ink, #1e2730);
color: #fff;
padding: 11px 14px;
text-align: left;
font-family: var(--font-sans, 'Spline Sans', system-ui, sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
}
.prose tbody td {
padding: 10px 14px;
border-bottom: 1px solid var(--hairline, #e3ddd1);
vertical-align: top;
}
.prose tbody tr:nth-child(even) td { background: var(--canvas, #f6f3ec); }
.prose tbody tr:hover td { background: var(--blue-soft, #e7eef8); }
/* ── Horizontal rule ── */
.prose hr {
border: none;
border-top: 1px solid var(--hairline, #e3ddd1);
margin: 2.5em 0;
}
/* ── Code (inline) ── */
.prose code {
font-family: 'Spline Sans Mono', 'Fira Mono', Consolas, monospace;
font-size: 0.875em;
background: var(--canvas, #f6f3ec);
border: 1px solid var(--hairline, #e3ddd1);
border-radius: 4px;
padding: 0.1em 0.35em;
color: var(--blue-d, #184b85);
}
/* =============================================================
Sticky TOC — sidebar panel, desktop only
Activated by adding class .toc-sticky to the