/* ============================================================
sky-glass.css — shared atmosphere + glass treatment
Ported from Client Profile / Commercial Application so the
marketing pages read in the same visual language.
Colors unchanged: brand navy + gold; only the chrome.
============================================================ */
/* ---------- 1. SKY-STAGE BACKDROP ---------- */
/* Drop
as the FIRST children of . Then wrap downstream content
in .page-shell (z-index 2) so it sits over the sky. */
.sky-stage {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
filter: saturate(1.12) contrast(1.06) brightness(0.88);
background:
radial-gradient(ellipse 60% 38% at 82% 6%,
rgba(120, 170, 210, 0.18) 0%,
rgba(120, 170, 210, 0) 60%),
radial-gradient(ellipse 50% 40% at 12% 32%,
rgba(100, 150, 190, 0.14) 0%,
rgba(100, 150, 190, 0) 65%),
radial-gradient(ellipse 55% 45% at 95% 55%,
rgba(28, 70, 110, 0.42) 0%,
rgba(28, 70, 110, 0) 70%),
radial-gradient(ellipse 50% 38% at 90% 88%,
rgba(197, 160, 89, 0.06) 0%,
rgba(197, 160, 89, 0) 70%),
/* Brand navy ladder — same surface tokens as the rest of the site */
linear-gradient(180deg,
#14264a 0%,
#122446 12%,
#0f2240 28%,
#0d1f3c 46%,
#0a1a32 64%,
#081530 82%,
#061128 100%);
}
@keyframes skyDrift {
0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0 0; }
100% { background-position: 3% -2%, -3% 1%, 2% 1%, -2% -1%, 0 0; }
}
.sky-stage { animation: skyDrift 28s ease-in-out infinite alternate; }
.sky-grain {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0.18;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
.sky-grain::after {
content: "";
position: absolute; inset: 0;
opacity: 0.10;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml;utf8,");
}
/* Page shell sits over the sky */
.page-shell { position: relative; z-index: 2; }
/* When the existing .toned-flow wrapper is present, neutralise its
solid background so the sky shows through */
.toned-flow {
position: relative;
z-index: 2;
background: transparent !important;
isolation: auto !important;
}
.toned-flow::before,
.toned-flow::after,
.toned-flow > section::after { display: none !important; }
/* Sections sit transparent so the sky reads through */
.toned-flow > section,
.cov-section,
.carrier-strip,
.what-you-get,
.verticals-section,
.process-section,
.cta-section,
.stats-section,
.testimonial-section {
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* Footer keeps a darker tint for grounding */
.site-footer {
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative;
z-index: 2;
}
/* ---------- 2. GLASS CARD CHROME ---------- */
/* Universal glass surface — applied to every card-like element */
.cov-card,
.vertical-card,
.process-step,
.stat,
.cta-card,
.testimonial-section blockquote,
.cov-card-hub,
.glass {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)) !important;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28) !important;
}
/* Larger corner radii — match Client Profile scale */
.cov-card,
.cov-card-hub,
.vertical-card,
.process-step,
.stat,
.cta-card,
.testimonial-section blockquote,
.glass {
border-radius: 18px !important;
overflow: hidden;
}
.cov-card-hub { border-radius: 24px !important; }
.btn-primary, .btn-ghost, .btn-start-app, .btn-quote-pill, .btn-send { border-radius: var(--r-btn) !important; }
/* Vertical-card had a top hairline only — give it real chrome */
.vertical-card {
padding: 2rem !important;
border-top-color: rgba(255, 255, 255, 0.16) !important;
}
.vertical-card:hover {
border-top-color: var(--gold) !important;
background:
linear-gradient(135deg, rgba(197, 160, 89, 0.10), rgba(255, 255, 255, 0.03)) !important;
}
/* Process-step is plain — add the glass too */
.process-step {
padding: 2rem !important;
}
/* Stat tiles get the same treatment, lighter padding */
.stat {
padding: 1.5rem 1.75rem !important;
border-left: 1px solid rgba(255, 255, 255, 0.16) !important;
}
/* Coverage card hover: subtle gold border + lift (Client-Profile-style) */
.cov-card:hover {
border-color: rgba(197, 160, 89, 0.45) !important;
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35) !important;
}
/* ---------- 3. SECTION TITLE BAR ---------- */
/* Subheads and lede copy: lighten against the sky */
.editorial-title { color: #ffffff !important; }
.editorial-title em {
font-style: italic;
background: linear-gradient(135deg, #f4e4ba, #c5a059 60%, #8e6f2a);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-label { color: var(--gold) !important; }
/* Carrier strip: keep the typographic feel, no background */
.carrier-strip {
padding: 3.25rem 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
/* Testimonial: glass treatment instead of full-bleed image */
.testimonial-section .testimonial-bg { opacity: 0.12 !important; }
.testimonial-section blockquote {
padding: 3.5rem !important;
}
/* CTA card already uses .glass — make sure padding holds */
.cta-card.glass { padding: 2.75rem !important; }
/* Hero is untouched on purpose — its photo + gradient already works.
Just make the seam from hero into the sky cleaner. */
.subpage-hero .hero-bg,
.hero .hero-bg { /* no override */ }
/* Reveal animation pairs nicely with the sky */
section.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
section.reveal.in { opacity: 1; transform: translateY(0); }