/* ==========================================================================
First Class Home Services — site styles
The visual language is taken from the shield logo: a brushed-silver bezel,
a deep dimensional navy field, and clean red/white banding. Those three
ideas drive the metal rules, the section depth, and the card treatments
below so the page reads as the same object as the mark.
========================================================================== */
:root {
/* Brand */
/* Official values from "First Class Home Services Official Logo and
Colors.pdf": navy #041C3C, red #DC0404, silver #ACACAC. The other steps
are derived from them (same hue, lighter/darker). */
--navy-900: #021226;
--navy-800: #041C3C; /* official primary */
--navy-700: #0C2B55;
--navy-100: #E8EFF8;
--red-600: #DC0404; /* official accent */
--red-700: #B00303;
/* Brand red is 5.17:1 on white (passes AA) but only 3.29:1 on navy-800 —
fails. This tint of the same hue clears AA on every dark surface we use
(6.12:1 on navy-800, 4.59:1 on the lightest gradient stop, #103260). */
--red-on-dark: #FF6B6B;
/* Neutral silver built around the official bezel grey #ACACAC */
--silver-100: #F2F2F2;
--silver-200: #E4E4E4;
--silver-300: #CACACA;
--silver-400: #ACACAC; /* official */
--silver-600: #8A8A8A;
--silver-800: #5E5E5E;
--ink: #0F1B2E;
--ink-muted: #4A5A72;
--surface: #FFFFFF;
--surface-alt: #F6F8FC;
--border: #DDE4EF;
--ease: cubic-bezier(.2,.7,.3,1);
--dur-fast: 150ms;
--dur: 220ms;
/* The bezel gradient, reused everywhere a metal edge appears */
--metal: linear-gradient(100deg,
var(--silver-600) 0%,
var(--silver-200) 18%,
var(--silver-400) 38%,
var(--silver-100) 55%,
var(--silver-400) 74%,
var(--silver-600) 100%);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
body {
font-family: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--ink);
background: var(--surface);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .font-display {
font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
letter-spacing: -0.02em;
}
.script {
font-family: 'Dancing Script', 'Segoe Script', cursive;
font-weight: 700;
letter-spacing: 0;
}
/* --- Focus: always visible (WCAG 2.2 focus-appearance) ------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 3px solid var(--red-600);
outline-offset: 2px;
border-radius: 4px;
}
.skip-link {
position: absolute;
left: -9999px; top: 0;
z-index: 200;
background: var(--navy-800);
color: #fff;
padding: .75rem 1.25rem;
font-weight: 600;
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* ==========================================================================
Logo lockup
The mark carries its own metal edge, so the wordmark is separated by a
hairline of the same material rather than a flat grey line.
========================================================================== */
.logo-lockup { gap: .875rem; }
.logo-lockup > span {
position: relative;
padding-left: .875rem;
}
.logo-lockup > span::before {
content: "";
position: absolute;
left: 0; top: 6%;
width: 1px; height: 88%;
background: linear-gradient(180deg,
transparent 0%, var(--silver-400) 22%, var(--silver-600) 50%, var(--silver-400) 78%, transparent 100%);
}
footer .logo-lockup > span::before {
background: linear-gradient(180deg,
transparent 0%, rgba(255,255,255,.35) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 75%, transparent 100%);
}
header .logo-lockup img { height: 3.4rem; }
@media (max-width: 640px) { header .logo-lockup img { height: 2.9rem; } }
/* ==========================================================================
Metal rule — the bezel reduced to a divider
========================================================================== */
.metal-rule {
height: 2px;
border: 0;
background: var(--metal);
border-radius: 2px;
opacity: .9;
}
.metal-rule--fade {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* --- Star divider -------------------------------------------------------- */
.star-rule { display: flex; align-items: center; gap: .75rem; color: var(--red-600); }
.star-rule::before,
.star-rule::after {
content: "";
height: 2px; flex: 1;
background: var(--metal);
opacity: .55;
border-radius: 2px;
}
/* ==========================================================================
Dimensional navy — the shield's field, not a flat fill.
Applied to section-level surfaces only, so buttons and small chips that
use the same Tailwind colour keep their own hover behaviour.
========================================================================== */
section.bg-navy-800,
section.bg-navy-900,
footer.bg-navy-900 {
position: relative;
background-image:
radial-gradient(90% 130% at 12% -20%, rgba(64,110,180,.30) 0%, transparent 58%),
radial-gradient(70% 90% at 92% 6%, rgba(28,66,130,.28) 0%, transparent 62%),
linear-gradient(168deg, #09264B 0%, var(--navy-800) 46%, var(--navy-900) 100%);
}
footer.bg-navy-900 {
background-image:
radial-gradient(80% 120% at 10% -30%, rgba(46,88,155,.22) 0%, transparent 60%),
linear-gradient(170deg, #051E3F 0%, var(--navy-900) 70%);
}
/* Silver hairline capping each dark band, like the top of the bezel */
section.bg-navy-800::before,
section.bg-navy-900::before,
footer.bg-navy-900::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--metal);
opacity: .45;
pointer-events: none;
}
/* ==========================================================================
Photo slots — labelled placeholders. Replace each with a real ![]()
.
========================================================================== */
.photo-slot {
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(110% 90% at 22% 0%, #103260 0%, transparent 62%),
linear-gradient(158deg, var(--navy-800) 0%, var(--navy-900) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.photo-slot::before {
content: "";
position: absolute;
inset: 0;
background-image: url("../img/logo.png");
background-repeat: no-repeat;
background-position: center;
background-size: 42% auto;
opacity: .13;
z-index: -1;
}
.photo-slot::after {
content: "";
position: absolute;
inset: .75rem;
border: 2px dashed rgba(255,255,255,.20);
border-radius: .5rem;
pointer-events: none;
}
.photo-slot__label {
position: relative;
margin: 1.5rem;
font-size: .8125rem;
line-height: 1.4;
color: rgba(255,255,255,.86);
font-weight: 600;
}
.photo-slot__label span {
display: block;
font-weight: 400;
color: rgba(255,255,255,.62);
font-size: .75rem;
margin-top: .15rem;
}
/* ==========================================================================
Cards — a light top highlight reads as a machined edge catching light
========================================================================== */
.card-lift {
position: relative;
background: #fff;
box-shadow: 0 1px 2px rgba(4,28,60,.05);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.card-lift::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
border-radius: 1rem 1rem 0 0;
background: var(--metal);
opacity: 0;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
.card-lift:hover {
transform: translateY(-4px);
border-color: var(--silver-300);
box-shadow: 0 18px 34px -18px rgba(4,28,60,.42), 0 2px 6px rgba(4,28,60,.06);
}
.card-lift:hover::before { opacity: .95; }
/* Featured plan card — the shield treatment */
.plan-featured {
position: relative;
background-image:
radial-gradient(90% 120% at 18% -10%, rgba(64,110,180,.34) 0%, transparent 60%),
linear-gradient(165deg, #09264B 0%, var(--navy-800) 48%, var(--navy-900) 100%);
box-shadow: 0 26px 50px -24px rgba(2,18,38,.65), 0 3px 10px rgba(2,18,38,.18);
}
.plan-featured::before {
content: "";
position: absolute;
inset: -2px;
border-radius: 1rem;
padding: 2px;
background: var(--metal);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: .75;
}
/* ==========================================================================
Buttons — box-shadow only, so Tailwind hover colours still win
========================================================================== */
.bg-brand-red {
box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
0 8px 18px -10px rgba(220,4,4,.72);
}
a.bg-brand-red, button.bg-brand-red { transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
a.bg-brand-red:hover, button.bg-brand-red:hover {
box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
0 12px 24px -10px rgba(220,4,4,.85);
}
a.bg-brand-red:active, button.bg-brand-red:active { transform: translateY(1px); }
/* ==========================================================================
Header
========================================================================== */
header[data-header] { border-bottom-color: transparent; } /* no position here: it would override Tailwind's .sticky */
header[data-header]::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--silver-300) 12%, var(--silver-400) 50%, var(--silver-300) 88%, transparent);
}
/* ==========================================================================
Accessible red on dark grounds (WCAG 2.2 AA, 1.4.3 Contrast Minimum)
The brand red stays exactly as-is on light surfaces, where it passes.
========================================================================== */
section.bg-navy-800 .text-brand-red,
section.bg-navy-900 .text-brand-red,
footer.bg-navy-900 .text-brand-red,
div.bg-navy-900 .text-brand-red,
.plan-featured .text-brand-red,
.photo-slot .text-brand-red {
color: var(--red-on-dark);
}
/* ...but a light card sitting INSIDE a dark section is still a light surface.
The tint is 3.09:1 on white, which fails — brand red is 5.25:1 and passes.
(Caught by axe on the yard-sign card inside the navy Shield section.) */
section.bg-navy-800 .bg-white .text-brand-red,
section.bg-navy-900 .bg-white .text-brand-red,
section.bg-navy-800 .bg-shell .text-brand-red,
section.bg-navy-900 .bg-shell .text-brand-red {
color: var(--red-600);
}
/* Large decorative step numerals: #E8EEF8 on white was 1.16:1. Even as a
watermark they carry ordinal meaning, so they take the 3:1 large-text
threshold — this is 3.12:1 and still reads as secondary. */
.step-numeral { color: #7A93BD; }
/* --- FAQ ----------------------------------------------------------------- */
.faq summary { list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { transition: transform var(--dur) var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
/* --- Scroll reveal -------------------------------------------------------
Content is visible BY DEFAULT. The hidden starting state is applied only
when the document is marked .js (set by an inline script in before
first paint). If JavaScript ever fails to run, every section still renders
instead of being stranded at opacity 0 forever.
------------------------------------------------------------------------ */
.reveal { opacity: 1; transform: none; }
.js .reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; }
}
/* --- Sticky mobile CTA bar ----------------------------------------------- */
.mobile-cta { padding-bottom: env(safe-area-inset-bottom, 0); }
.mobile-cta::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--metal);
opacity: .55;
}
@media (max-width: 767px) { body { padding-bottom: 4.5rem; } }
/* --- Tabular figures ----------------------------------------------------- */
.tnum { font-variant-numeric: tabular-nums; }
/* ==========================================================================
Legal pages
========================================================================== */
.legal-shell { display: grid; gap: 3rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
.legal-shell { grid-template-columns: 16rem 1fr; gap: 4rem; align-items: start; }
}
/* --- Table of contents --------------------------------------------------- */
.legal-toc { position: sticky; top: 7rem; }
.legal-toc h2 {
font-size: .75rem; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--ink-muted);
padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.legal-toc ol { list-style: none; margin: .875rem 0 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
display: grid; grid-template-columns: 1.75rem 1fr; gap: .25rem;
padding: .4rem 0;
font-size: .875rem; line-height: 1.45;
color: var(--ink-muted); text-decoration: none;
transition: color var(--dur) var(--ease);
}
.legal-toc a::before {
content: counter(toc) ".";
font-variant-numeric: tabular-nums;
color: var(--silver-800); /* 6.48:1 — silver-600 would be 3.45:1 */
}
.legal-toc a:hover { color: var(--navy-800); }
/* --- Prose --------------------------------------------------------------- */
.legal-prose { max-width: 68ch; }
.legal-prose > section { padding-top: 2.5rem; }
.legal-prose > section + section { border-top: 1px solid var(--rule, var(--border)); }
.legal-prose h2 {
font-size: 1.375rem; font-weight: 700; color: var(--navy-800);
scroll-margin-top: 7rem;
}
.legal-prose h3 {
font-size: 1rem; font-weight: 700; color: var(--navy-800);
margin-top: 1.5rem;
}
.legal-prose p { margin-top: .875rem; color: var(--ink-muted); line-height: 1.7; }
.legal-prose ul, .legal-prose ol { margin-top: .875rem; padding-left: 1.25rem; color: var(--ink-muted); line-height: 1.7; }
.legal-prose li { margin-top: .4rem; }
.legal-prose li::marker { color: var(--red-600); }
.legal-prose strong { color: var(--ink); font-weight: 600; }
/* Auto-renewal terms must be clear and conspicuous (Colorado C.R.S. 6-1-732) */
.legal-prose .auto-renew {
border-left: 4px solid var(--red-600);
background: var(--surface-alt);
border-radius: 0 .5rem .5rem 0;
padding: .875rem 1.125rem;
font-size: 1.0625rem;
}
/* --- Consent blocks on forms --------------------------------------------- */
.consent {
display: flex; gap: .75rem; align-items: flex-start;
padding: .875rem 1rem;
border: 1px solid var(--border);
border-radius: .625rem;
background: var(--surface-alt);
}
.consent + .consent { margin-top: .625rem; }
.consent input[type="checkbox"] {
flex: none; margin-top: .15rem;
width: 1.25rem; height: 1.25rem;
accent-color: var(--red-600);
cursor: pointer;
}
.consent label { font-size: .8125rem; line-height: 1.55; color: var(--ink-muted); cursor: pointer; }
.consent label b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.consent a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
/* --- Home page plan pop-ups (native