— kill the extra paragraph gap */
.footer-section p > a { margin-bottom: 0; }
/* ---- Contact icons (column 2) ---- */
/* Phone + location get a leading glyph; socials become icon buttons.
Scoped to the Contact column and matched on href so it stays CSS-only. */
.footer-content > .footer-section:nth-child(2) a[href^="tel:"] {
display: inline-flex;
align-items: center;
gap: 0.55rem;
background: none; /* drop the underline gradient on this line */
padding-bottom: 0;
}
.footer-content > .footer-section:nth-child(2) a[href^="tel:"]::before {
content: "";
flex-shrink: 0;
width: 15px;
height: 15px;
background: var(--primary-yellow);
-webkit-mask: var(--ic-phone) center / contain no-repeat;
mask: var(--ic-phone) center / contain no-repeat;
}
/* Location line keeps its text inline (commas/spans intact), pin leads it */
.footer-content > .footer-section:nth-child(2) p:not(:has(a))::before {
content: "";
display: inline-block;
vertical-align: -2px;
margin-right: 0.5rem;
width: 15px;
height: 15px;
background: var(--primary-yellow);
-webkit-mask: var(--ic-pin) center / contain no-repeat;
mask: var(--ic-pin) center / contain no-repeat;
}
/* Instagram + X → circular icon buttons sitting on one row */
.footer-content > .footer-section:nth-child(2) p:has(> a[href*="instagram"]),
.footer-content > .footer-section:nth-child(2) p:has(> a[href*="x.com"]) {
display: inline-flex;
margin: 0.15rem 0.6rem 0.4rem 0;
}
.footer-content > .footer-section:nth-child(2) a[href*="instagram"],
.footer-content > .footer-section:nth-child(2) a[href*="x.com"] {
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border-radius: 50%;
/* flex (not grid) so the lone glyph is truly centred — the hidden
label was taking a second grid cell and pushing the icon up */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0; /* hide the visible label; stays in the a11y tree */
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
/* Both glyphs share one box size so they read identically */
.footer-content > .footer-section:nth-child(2) a[href*="instagram"]::before,
.footer-content > .footer-section:nth-child(2) a[href*="x.com"]::before {
content: "";
width: 18px;
height: 18px;
-webkit-mask: var(--ic) center / contain no-repeat;
mask: var(--ic) center / contain no-repeat;
}
/* Colour-coded to each platform's brand */
.footer-content > .footer-section:nth-child(2) a[href*="instagram"]::before {
--ic: var(--ic-instagram);
background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
}
.footer-content > .footer-section:nth-child(2) a[href*="x.com"]::before {
--ic: var(--ic-x);
background: #fff;
}
.footer-content > .footer-section:nth-child(2) a[href*="instagram"]:hover {
transform: translateY(-3px);
background: rgba(221, 42, 123, 0.14);
border-color: rgba(221, 42, 123, 0.6);
}
.footer-content > .footer-section:nth-child(2) a[href*="x.com"]:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.45);
}
/* ---- Parent-org line (plain text, not a card) ----
Was a glass card, but it boxed out the emblem watermark behind it.
Now it's a quiet label + link so the emblem reads through. */
.footer-parent {
display: inline-flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
padding: 0;
background: none;
border: none;
font-size: 0.9rem;
}
.footer-parent strong {
color: var(--primary-yellow);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 700;
}
.footer-parent a {
display: inline;
width: auto;
margin: 0;
padding: 0;
background: none;
color: var(--paper);
font-weight: 600;
}
.footer-parent a:hover { color: var(--primary-yellow); }
/* ---- Copyright / credit bar ---- */
.footer-bottom {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.7rem 1.5rem;
padding-top: 1.75rem;
color: rgba(255, 255, 255, 0.5);
font-size: 0.85rem;
}
.footer-bottom::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 72%);
}
.footer-bottom > p { margin: 0; }
/* Legal disclaimer — full-width line below the copyright/credit row,
smaller and dimmer so it reads as fine print. */
.footer-disclaimer {
order: 1; /* sort after copyright + credit so it wraps to its own row */
flex-basis: 100%;
margin-top: 0.5rem;
font-size: 0.76rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.38);
}
.footer-credit {
display: inline-flex;
align-items: center;
gap: 0.5ch;
padding: 0.4rem 0.9rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
font-weight: 600;
}
.footer-credit a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.22);
padding-bottom: 1px;
transition: color 0.2s, border-color 0.2s;
}
.footer-credit a:hover {
color: var(--primary-yellow);
border-bottom-color: var(--primary-yellow);
}
/* ========== Reveal animation ========== */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.emergency-btn::before, .hero-eyebrow .dot, .footer::before { animation: none; }
html { scroll-behavior: auto; }
}
/* ========== Responsive ========== */
@media (max-width: 960px) {
.about-content { grid-template-columns: 1fr; gap: 2.5rem; }
.about-visual { aspect-ratio: 16 / 10; max-width: 560px; margin: 0 auto; }
.footer-content { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
.navbar { top: 12px; margin-top: 12px; padding: 0 12px; }
.nav-pill { padding: 0.4rem 0.4rem 0.4rem 0.5rem; gap: 0.5rem; }
.nav-toggle { display: flex; }
.logo { gap: 0.5rem; padding: 0; }
.logo-mark { width: 36px; height: 36px; }
.logo-text .name { font-size: 0.85rem; }
.logo-text .division { font-size: 0.58rem; letter-spacing: 0.1em; }
.nav-links {
position: absolute;
top: calc(100% + 10px);
left: 0; right: 0;
background: #F3F4F6;
border-radius: var(--radius-lg);
padding: 0.6rem;
flex-direction: column;
align-items: stretch;
gap: 0.2rem;
box-shadow: 0 12px 30px rgba(15, 20, 25, 0.12);
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.2s, transform 0.2s;
}
.nav-links.is-open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-links > a {
padding: 0.85rem 1rem;
font-size: 1rem;
border-radius: var(--radius-sm);
text-align: left;
}
.nav-links > a:hover {
background: var(--paper);
}
.donate-btn-mobile,
.donate-btn-mobile:visited {
display: flex !important;
justify-content: center;
margin-top: 0.4rem;
}
.donate-btn-desktop { display: none; }
}
@media (max-width: 768px) {
.navbar + section, .navbar + article { margin-top: -64px; }
.navbar + .page-hero-light { margin-top: 0; }
.affiliation-strip {
font-size: 0.72rem;
padding: 0.45rem 0;
}
.affiliation-strip .container { padding: 0 14px; }
.affiliation-strip .strip-extra { display: none; }
.hero { padding: 5rem 18px 3.5rem; min-height: 480px; }
.hero-actions { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.cta-btn {
justify-content: center;
padding: 0.75rem 1.4rem;
font-size: 0.95rem;
}
.hero-eyebrow { font-size: 0.74rem; padding: 0.35rem 0.8rem; }
.features { grid-template-columns: 1fr; }
/* Mobile footer: keep it short. A brand lockup, a one-line contact
cluster, then every secondary link folded into a single centered
wrapped nav (the section boxes are dissolved with display:contents)
so it reads as a tidy footer rather than a second page. */
.footer { padding: 3rem 20px 1.5rem; }
.footer-content {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 0.85rem 0; /* middots handle horizontal spacing in the nav */
max-width: 470px;
margin: 0 auto 1.5rem;
text-align: center;
}
/* Brand lockup (logo dropped): badge over a quiet one-line tagline,
with the red-glow emblem watermark carrying the brand behind it */
.footer-section:first-child {
flex: 0 0 100%;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.9rem;
padding-top: 0.5rem;
padding-bottom: 1.6rem;
}
.footer-section:first-child .footer-parent {
order: 1;
margin-left: 0;
align-items: center;
text-align: center;
}
.footer-section:first-child p {
order: 2;
flex: none;
max-width: 34ch;
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.66);
}
/* Contact → a tidy 3-line centered stack, no heading:
phone / social icons / location */
.footer-content > .footer-section:nth-child(2) {
flex: 0 0 100%;
margin-bottom: 0.5rem;
}
.footer-content > .footer-section:nth-child(2) h4 { display: none; }
.footer-content > .footer-section:nth-child(2) p { margin: 0.15rem 0; }
.footer-content > .footer-section:nth-child(2) a[href^="tel:"] { justify-content: center; }
.footer-content > .footer-section:nth-child(2) p:has(> a[href*="instagram"]),
.footer-content > .footer-section:nth-child(2) p:has(> a[href*="x.com"]) {
display: inline-flex;
margin: 0.4rem 0.3rem 0.3rem;
}
.footer-content > .footer-section:nth-child(2) a[href*="instagram"],
.footer-content > .footer-section:nth-child(2) a[href*="x.com"] { width: 38px; height: 38px; }
/* Explore + Get Involved + Network → one centered, wrapped nav */
.footer-content > .footer-section:nth-child(n+3) { display: contents; }
.footer-content > .footer-section:nth-child(n+3) h4 { display: none; }
.footer-content > .footer-section:nth-child(n+3) a {
margin: 0;
font-size: 0.9rem;
white-space: nowrap;
}
/* Colour-code the nav by group so the merged list still reads as types */
.footer-content > .footer-section:nth-child(3) a { color: rgba(255, 255, 255, 0.82); } /* Explore */
.footer-content > .footer-section:nth-child(4) a { color: var(--primary-yellow-light); } /* Get Involved */
.footer-content > .footer-section:nth-child(5) a { color: #F58A92; } /* Network */
/* Middot between every link, dropped after the last one */
.footer-content > .footer-section:nth-child(n+3) a::after {
content: "·";
margin: 0 0.55rem;
color: rgba(255, 255, 255, 0.3);
}
.footer-content > .footer-section:nth-child(5) a:last-child::after { content: none; }
/* Centered copyright + credit */
.footer-bottom { justify-content: center; text-align: center; }
/* Ghost emblem centered behind the brand lockup */
.footer .container::before {
top: -0.75rem;
right: 50%;
transform: translateX(50%);
width: 220px;
height: 220px;
opacity: 0.13;
}
.vehicle-main-image { height: 240px; }
.vehicle-header { padding: 1rem 1.3rem; }
.vehicle-body { padding: 1.3rem; }
.stats { padding: 2.5rem 18px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.about, .services, .fleet-preview, .blog-posts {
padding: 3rem 18px;
}
.section-head { margin-bottom: 2rem; }
.services-extra { padding: 2.4rem 1.4rem; }
.coverage { padding: 3rem 18px; }
.coverage-card { padding: 3rem 1.4rem; }
.fleet-detail, .fleet-cta, .blog-post { padding-left: 18px; padding-right: 18px; }
.blog-post-content { padding: 0 18px; }
.gallery-hero { padding: 4.5rem 18px 3rem; }
}
@media (max-width: 480px) {
.logo-mark { width: 34px; height: 34px; }
.logo-text .name { font-size: 0.95rem; }
.logo-text .division { font-size: 0.62rem; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat-card { padding: 1.2rem 0.8rem; }
}
/* ============================================================
STORY (replaces .about) — editorial layout, bold & graphic
============================================================ */
.story {
position: relative;
padding: 6.5rem 24px 5.5rem;
background:
radial-gradient(1200px 600px at 85% -10%, rgba(255, 183, 3, 0.08), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(230, 57, 70, 0.06), transparent 60%),
var(--paper);
overflow: hidden;
}
.story-watermark {
position: absolute;
top: 1rem;
left: -1rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(10rem, 22vw, 22rem);
line-height: 0.85;
color: rgba(15, 20, 25, 0.035);
letter-spacing: -0.06em;
pointer-events: none;
user-select: none;
z-index: 0;
}
.brand-asterisk--story-a {
top: 3.5rem;
right: 6%;
font-size: 4.5rem;
transform: rotate(-12deg);
color: var(--primary-yellow);
opacity: 0.95;
}
.brand-asterisk--story-b {
bottom: 4rem;
left: 4%;
font-size: 2.6rem;
transform: rotate(20deg);
color: var(--primary-red);
opacity: 0.6;
}
.story .container {
position: relative;
z-index: 1;
}
.story-head {
max-width: 880px;
margin: 0 auto 3.5rem;
text-align: left;
}
.story-head .section-eyebrow { color: var(--primary-yellow); }
.story-head h2 {
font-size: clamp(2rem, 5.5vw, 3.6rem);
font-weight: 800;
color: var(--ink);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0;
}
.story-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 4rem;
align-items: start;
}
.story-media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--line-soft);
box-shadow: var(--shadow-xl);
isolation: isolate;
}
.story-media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(15, 20, 25, 0.55) 100%);
z-index: 1;
}
.story-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.story-media:hover img { transform: scale(1.04); }
.story-media__tag {
position: absolute;
bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
z-index: 2;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
padding: 1.1rem 1.3rem;
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
gap: 1rem;
border-left: 4px solid var(--primary-red);
}
.story-media__tag-num {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.7rem;
color: var(--primary-red);
line-height: 1;
letter-spacing: -0.02em;
flex-shrink: 0;
}
.story-media__tag-label {
font-size: 0.88rem;
color: var(--slate);
line-height: 1.4;
font-weight: 500;
}
.story-prose {
padding-top: 0.4rem;
}
.story-prose p {
margin: 0 0 1.1rem;
font-size: 1.05rem;
line-height: 1.75;
color: var(--slate);
}
.story-prose strong {
color: var(--ink);
font-weight: 700;
}
.story-lead {
font-size: 1.3rem !important;
line-height: 1.55 !important;
color: var(--ink-soft) !important;
font-weight: 500;
}
.story-lead-emph {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.55rem !important;
line-height: 1.25 !important;
color: var(--primary-red) !important;
letter-spacing: -0.02em;
margin-bottom: 1.8rem !important;
}
.story-quote {
position: relative;
margin: 2rem 0 2rem;
padding: 1.6rem 1.6rem 1.6rem 2.8rem;
background: linear-gradient(135deg, rgba(255, 183, 3, 0.10), rgba(230, 57, 70, 0.06));
border-left: 4px solid var(--primary-yellow);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.story-quote__mark {
position: absolute;
top: -0.4rem;
left: 0.7rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 4rem;
line-height: 1;
color: var(--primary-yellow);
opacity: 0.55;
pointer-events: none;
}
.story-quote p {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem !important;
line-height: 1.4 !important;
color: var(--ink) !important;
margin: 0 !important;
letter-spacing: -0.015em;
}
.story-close {
margin-top: 1.5rem !important;
padding-top: 1.5rem;
border-top: 1px solid var(--line);
font-size: 1.05rem !important;
color: var(--ink-soft) !important;
font-weight: 500;
}
.story-features {
list-style: none;
margin: 4.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.4rem;
}
.story-features li {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.6rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
overflow: hidden;
}
.story-features li::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.story-features li:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.story-features li:hover::before { transform: scaleX(1); }
.story-features__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(230, 57, 70, 0.12), rgba(255, 183, 3, 0.18));
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-red);
margin-bottom: 0.4rem;
}
.story-features__icon svg { width: 22px; height: 22px; }
.story-features li strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.02rem;
color: var(--ink);
letter-spacing: -0.01em;
}
.story-features li span {
font-size: 0.9rem;
color: var(--slate-soft);
line-height: 1.5;
}
@media (max-width: 960px) {
.story-grid { grid-template-columns: 1fr; gap: 2.8rem; }
.story-media { max-width: 520px; margin: 0 auto; aspect-ratio: 4 / 4.2; }
.story-features { grid-template-columns: 1fr 1fr; }
.story-head { text-align: center; }
}
@media (max-width: 720px) {
.story { padding: 4.5rem 20px 4rem; }
.story-watermark { font-size: 9rem; top: 0.5rem; left: -0.5rem; }
.story-lead { font-size: 1.15rem !important; }
.story-lead-emph { font-size: 1.3rem !important; }
.story-quote { padding: 1.3rem 1.3rem 1.3rem 2.2rem; }
.story-quote p { font-size: 1.15rem !important; }
.brand-asterisk--story-a { font-size: 2.8rem; top: 1.5rem; right: 1rem; }
.brand-asterisk--story-b { display: none; }
}
@media (max-width: 480px) {
.story-features { grid-template-columns: 1fr; }
.story-media__tag {
flex-direction: column;
align-items: flex-start;
gap: 0.4rem;
padding: 1rem 1.1rem;
}
.story-media__tag-num { font-size: 1.5rem; }
}
/* ============================================================
NETWORK — dark, bold, "how we operate"
============================================================ */
.network {
position: relative;
background:
radial-gradient(1000px 500px at 90% 0%, rgba(255, 183, 3, 0.08), transparent 60%),
radial-gradient(900px 600px at 0% 100%, rgba(230, 57, 70, 0.10), transparent 65%),
linear-gradient(180deg, #0F1419 0%, #0A0E12 100%);
color: rgba(255, 255, 255, 0.88);
padding: 6rem 24px 6rem;
overflow: hidden;
}
.network::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.network-bg-num {
position: absolute;
bottom: -3rem;
right: -2rem;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(14rem, 26vw, 28rem);
line-height: 0.85;
color: rgba(255, 255, 255, 0.025);
letter-spacing: -0.06em;
pointer-events: none;
user-select: none;
z-index: 0;
}
.brand-asterisk--network {
top: 3rem;
right: 8%;
font-size: 3.2rem;
transform: rotate(-15deg);
color: var(--primary-yellow);
opacity: 0.85;
z-index: 2;
}
.network .container {
position: relative;
z-index: 1;
}
.network-head {
max-width: 760px;
margin: 0 0 3.5rem;
}
.network-eyebrow { color: var(--primary-yellow); }
.network-head h2 {
font-size: clamp(1.9rem, 4.6vw, 3rem);
font-weight: 800;
color: #ffffff;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 1.1rem;
}
.network-head p {
font-size: 1.08rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.7);
margin: 0;
max-width: 640px;
}
.network-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 1.8rem;
}
.network-card {
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-xl);
padding: 2.2rem 2.2rem 2rem;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.network-card::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-yellow), transparent 70%);
opacity: 0.7;
}
.network-card:hover {
border-color: rgba(255, 255, 255, 0.16);
transform: translateY(-2px);
}
.network-card__label {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.network-card h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
line-height: 1.2;
color: #ffffff;
letter-spacing: -0.02em;
margin: 0 0 1rem;
}
.network-card p {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.72);
margin: 0 0 1.6rem;
}
.network-card p em {
font-style: italic;
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
}
.network-card__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.2rem;
padding: 1.4rem 0 1.6rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 1.4rem;
}
.network-card__stats > div {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.network-card__stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.6rem, 3.2vw, 2.2rem);
line-height: 1;
color: #ffffff;
letter-spacing: -0.03em;
}
.network-card__stat-num .plus {
color: var(--primary-yellow);
margin-left: 0.05em;
}
.network-card__stat-label {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.35;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.network-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: 700;
font-size: 0.95rem;
color: var(--primary-yellow);
text-decoration: none;
transition: gap 0.2s ease;
letter-spacing: 0.01em;
}
.network-link:hover {
gap: 0.75rem;
}
.network-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
.network-list li {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: 1rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.network-list li:first-child { border-top: none; padding-top: 0; }
.network-list__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(255, 183, 3, 0.18), rgba(230, 57, 70, 0.12));
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--primary-yellow);
}
.network-list__icon svg { width: 18px; height: 18px; }
.network-list li > div {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.network-list li strong {
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: #ffffff;
letter-spacing: -0.01em;
}
.network-list li span {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.55;
}
.network-list li span strong {
font-family: var(--font-sans);
font-size: inherit;
color: var(--primary-yellow);
font-weight: 700;
}
@media (max-width: 960px) {
.network-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.network { padding: 4.5rem 20px 4.5rem; }
.network-card { padding: 1.8rem 1.6rem 1.6rem; }
.network-card__stats {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.2rem 0;
}
.network-card__stats > div {
flex-direction: row;
align-items: baseline;
gap: 0.8rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.network-card__stats > div:last-child { border-bottom: none; padding-bottom: 0; }
.network-card__stat-label { letter-spacing: 0.04em; }
.brand-asterisk--network { font-size: 2.2rem; top: 1.5rem; right: 1.5rem; }
.network-bg-num { font-size: 11rem; }
}
/* ============================================================
SERVICE CARDS — bold numbered editorial treatment
============================================================ */
.service-card--numbered {
background: var(--paper);
border: 1px solid var(--line);
padding: 1.8rem 1.8rem 1.6rem;
border-radius: var(--radius-lg);
transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
position: relative;
overflow: hidden;
}
/* Override the legacy yellow border styling */
.service-card.service-card--numbered { border: 1px solid var(--line); }
.service-card--numbered:hover {
transform: translateY(-4px);
box-shadow: 0 22px 48px -20px rgba(15, 20, 25, 0.22);
border-color: transparent;
}
.service-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.3rem;
}
.service-card__num {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
-webkit-text-stroke: 1.5px var(--primary-red);
transition: -webkit-text-stroke 0.25s, color 0.25s;
}
.service-card--numbered:hover .service-card__num {
color: var(--primary-red);
-webkit-text-stroke: 1.5px var(--primary-red);
}
.service-card--numbered .service-icon {
margin-bottom: 0;
width: 52px;
height: 52px;
border-radius: 12px;
}
.service-card--numbered .service-icon svg { width: 26px; height: 26px; }
.service-card--numbered h3 {
font-size: 1.25rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 0.55rem;
line-height: 1.2;
}
.service-card--numbered p {
color: var(--slate-soft);
font-size: 0.97rem;
line-height: 1.6;
margin: 0;
}
/* The card already has the gradient hover stripe from earlier polish CSS
via .service-card::before — keep it. */
@media (max-width: 560px) {
.service-card--numbered { padding: 1.5rem 1.4rem 1.4rem; }
.service-card__num { font-size: 2rem; }
.service-card--numbered .service-icon { width: 44px; height: 44px; }
.service-card--numbered .service-icon svg { width: 22px; height: 22px; }
}
/* ============================================================
HERO — cinematic editorial left-aligned treatment
============================================================ */
.hero-content--editorial {
text-align: left;
max-width: 760px;
margin: 0 auto 0 max(24px, 6vw);
padding-right: 24px;
}
/* Asymmetric gradient — darker left so type reads, lighter right so
the photograph behind shows through more cinematically */
.hero::after {
background:
linear-gradient(100deg, rgba(15,20,25,0.88) 0%, rgba(15,20,25,0.78) 35%, rgba(15,20,25,0.45) 70%, rgba(15,20,25,0.55) 100%),
radial-gradient(ellipse at 80% 0%, rgba(230, 57, 70, 0.22) 0%, transparent 55%) !important;
}
.hero-content--editorial h1 {
font-size: clamp(2.6rem, 8vw, 5.2rem);
line-height: 1;
letter-spacing: -0.035em;
font-weight: 800;
margin-bottom: 1.4rem;
text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.hero-lead {
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
color: rgba(255,255,255,0.82);
line-height: 1.5;
max-width: 560px;
margin: 0 0 0;
font-weight: 400;
}
.hero-rule {
margin: 1.6rem 0 2.2rem;
width: 72px;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
border-radius: 2px;
}
.hero-content--editorial .hero-actions {
justify-content: flex-start;
gap: 0.9rem;
align-items: stretch;
}
/* Hero phone CTA — fire-dept-poster scale (same family as coverage-phone) */
.hero-call {
display: inline-flex;
align-items: center;
gap: 0.9rem;
padding: 0.9rem 1.4rem 0.9rem 1.2rem;
background: var(--primary-red);
color: var(--paper);
border-radius: var(--radius-lg);
text-decoration: none;
box-shadow: 0 12px 32px -8px rgba(230, 57, 70, 0.55);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s;
}
.hero-call:hover {
background: var(--primary-red-dark);
transform: translateY(-2px);
box-shadow: 0 18px 42px -10px rgba(230, 57, 70, 0.65);
}
.hero-call__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(255,255,255,0.16);
display: flex; align-items: center; justify-content: center;
color: var(--paper);
flex-shrink: 0;
}
.hero-call__text {
display: flex; flex-direction: column;
line-height: 1.05;
text-align: left;
}
.hero-call__label {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.14em;
color: rgba(255,255,255,0.82);
margin-bottom: 3px;
}
.hero-call__num {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.01em;
}
.hero-content--editorial .cta-btn.ghost {
align-self: center;
}
@media (max-width: 720px) {
.hero-content--editorial { margin-left: 20px; padding-right: 20px; }
.hero-content--editorial h1 { font-size: clamp(2.2rem, 9vw, 3.6rem); }
.hero-call__num { font-size: 1.2rem; }
/* On mobile the ghost button looks orphaned centered — make it
feel like a left-aligned secondary text link instead. */
.hero-content--editorial .hero-actions {
flex-direction: column;
align-items: stretch;
gap: 0.7rem;
}
.hero-content--editorial .cta-btn.ghost {
align-self: flex-start;
padding: 0.6rem 0;
background: transparent;
border: 0;
color: rgba(255,255,255,0.78);
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.hero-content--editorial .cta-btn.ghost::after {
content: " →";
opacity: 0.7;
margin-left: 4px;
}
.hero-content--editorial .cta-btn.ghost:hover {
color: var(--paper);
background: transparent;
}
}
/* ============================================================
FLEET PREVIEW — bold trading-card treatment
============================================================ */
.fleet-grid--bold {
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
@media (max-width: 1000px) {
.fleet-grid--bold { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.fleet-grid--bold { grid-template-columns: 1fr; }
}
.fleet-card--bold {
display: block;
text-decoration: none;
color: inherit;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
}
.fleet-card--bold:hover {
transform: translateY(-4px);
box-shadow: 0 22px 48px -18px rgba(15, 20, 25, 0.28);
border-color: transparent;
}
.fleet-card__image-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 11;
background: linear-gradient(135deg, #1a2230 0%, #0f1419 100%);
}
.fleet-card--bold .fleet-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.fleet-card--bold:hover .fleet-image { transform: scale(1.04); }
/* Giant outlined "500/501/503" numeral sitting on the image like a
vehicle stencil. Yellow stroke reads cleanly on both dark image
backgrounds (KJ-503 black) and light ones (KJ-501 snow). */
.fleet-card__number {
position: absolute;
bottom: -1.4rem;
right: -0.8rem;
font-family: var(--font-display);
font-size: clamp(7rem, 14vw, 11rem);
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 2.5px var(--primary-yellow);
text-shadow: 0 6px 24px rgba(0,0,0,0.35);
opacity: 0.42;
pointer-events: none;
user-select: none;
transition: opacity 0.3s ease, color 0.3s ease;
}
/* On hover the numeral lifts to full presence */
.fleet-card--bold:hover .fleet-card__number {
opacity: 0.95;
color: rgba(255, 183, 3, 0.25);
}
/* The small KJ-### badge sits in the card body */
.fleet-card__badge {
display: inline-block;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-red);
background: rgba(230, 57, 70, 0.08);
padding: 0.35rem 0.7rem;
border-radius: 6px;
margin-bottom: 0.7rem;
}
.fleet-card--bold .fleet-card-body {
padding: 1.4rem 1.5rem 1.6rem;
}
.fleet-card--bold h3 {
font-size: 1.25rem;
font-weight: 800;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 0.45rem;
line-height: 1.2;
}
.fleet-card--bold p {
color: var(--slate-soft);
font-size: 0.97rem;
line-height: 1.55;
margin: 0;
}
/* ============================================================
NEWS PREVIEW — magazine featured-first layout
============================================================ */
.news-grid--featured {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 1.6rem;
align-items: stretch;
}
@media (max-width: 900px) {
.news-grid--featured { grid-template-columns: 1fr; }
}
.news-grid__rest {
display: grid;
grid-template-columns: 1fr;
gap: 1.2rem;
}
.blog-card--featured {
display: flex;
flex-direction: column;
background: var(--paper);
border-radius: var(--radius-lg);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
color: inherit;
border: 1px solid var(--line);
}
.blog-card--featured:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.blog-card--featured .blog-image {
aspect-ratio: 16 / 10;
}
.blog-card--featured .blog-content {
padding: 1.6rem 1.7rem 1.8rem;
}
.blog-card--featured h3 {
font-size: clamp(1.3rem, 2.4vw, 1.75rem);
line-height: 1.2;
font-weight: 800;
color: var(--ink);
margin: 0.4rem 0 0.7rem;
}
.blog-card--featured:hover h3 { color: var(--primary-red); }
.blog-card__feature-label {
display: inline-block;
font-family: var(--font-display);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-red);
background: rgba(230, 57, 70, 0.08);
padding: 0.3rem 0.65rem;
border-radius: 4px;
margin-bottom: 0.4rem;
}
.blog-excerpt {
font-size: 0.98rem;
line-height: 1.6;
color: var(--slate-soft);
margin: 0 0 0.5rem;
}
/* In the rest column, cards are horizontal (image left, text right) */
.news-grid__rest .blog-card {
display: grid;
grid-template-columns: 130px 1fr;
gap: 0;
}
.news-grid__rest .blog-card .blog-image {
aspect-ratio: 1 / 1;
width: 100%;
height: 100%;
}
.news-grid__rest .blog-card .blog-content {
padding: 1rem 1.2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.news-grid__rest .blog-card h3 {
font-size: 1.02rem;
line-height: 1.3;
margin: 0.25rem 0 0.3rem;
}
.news-grid__rest .blog-card .blog-date {
font-size: 0.72rem;
margin: 0;
}
@media (max-width: 480px) {
.news-grid__rest .blog-card { grid-template-columns: 100px 1fr; }
.news-grid__rest .blog-card .blog-content { padding: 0.8rem 1rem; }
}
/* ============================================================
UNIFIED DESIGN SYSTEM
- Canonical section-head pattern (left-aligned editorial + rule)
- Coverage phone block (huge, fire-dept-poster scale)
- Stats as compact ribbon between Story and Network
============================================================ */
/* ── Canonical left-aligned editorial section head ────────── */
.section-head--left {
text-align: left;
max-width: 760px;
margin: 0 0 3.2rem;
}
.section-head--left h2 {
color: var(--ink);
font-size: clamp(1.95rem, 5vw, 3.4rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
margin-bottom: 1rem;
}
.section-head--left p {
color: var(--slate-soft);
font-size: 1.08rem;
line-height: 1.65;
max-width: 620px;
margin: 0 0 1.4rem;
}
/* The 64px red→yellow rule that punctuates every section head */
.section-rule {
width: 64px;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
border-radius: 2px;
margin-top: 0.4rem;
}
.section-rule--light {
opacity: 0.95;
}
/* Story head + Network head pick up the same rule */
.story-head .section-rule {
margin-top: 1.1rem;
}
.network-head .section-rule {
margin-top: 1.4rem;
background: linear-gradient(90deg, var(--primary-yellow), #FFD86E);
}
/* Page hero (fleet/blog) uses the same rule */
.page-hero .section-rule {
margin-top: 1.4rem;
width: 64px;
}
.fleet-hero .section-rule {
background: linear-gradient(90deg, var(--primary-yellow), #FFD86E);
}
/* ── Coverage phone block — fire-dept-poster scale ────────── */
.coverage-card h2 {
margin-bottom: 0.9rem;
}
.coverage-phone {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
margin: 1.6rem auto 1.8rem;
padding: 1.5rem 2.6rem;
background: var(--ink);
color: var(--paper);
border-radius: 22px;
text-decoration: none;
box-shadow: 0 18px 46px -18px rgba(15, 20, 25, 0.55);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 2;
}
.coverage-phone:hover {
transform: translateY(-2px);
box-shadow: 0 24px 56px -20px rgba(15, 20, 25, 0.65);
}
.coverage-phone__icon {
color: var(--primary-yellow);
margin-bottom: 0.2rem;
line-height: 0;
}
.coverage-phone__digits {
font-family: var(--font-display);
font-size: clamp(2rem, 6.4vw, 3.6rem);
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1;
}
.coverage-phone__sub {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.62);
font-weight: 600;
}
.coverage-actions {
display: flex;
justify-content: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.coverage-btn-secondary--alt {
background: transparent;
color: var(--ink);
border: 1.5px solid rgba(15, 20, 25, 0.25);
}
.coverage-btn-secondary--alt:hover {
border-color: var(--ink);
background: rgba(15, 20, 25, 0.05);
}
/* ── Stats as a tighter ribbon between Story and Network ──── */
.stats {
padding: 2.5rem 24px 3.5rem;
}
.stats-grid {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 1.8rem 0;
}
.stat-card {
border: 0;
background: transparent;
padding: 0.8rem 1rem;
text-align: center;
box-shadow: none;
}
.stat-card:hover {
transform: none;
box-shadow: none;
background: transparent;
}
.stat-card + .stat-card {
border-left: 1px solid var(--line);
}
@media (max-width: 720px) {
.stat-card + .stat-card { border-left: 0; border-top: 1px solid var(--line); }
}
/* ============================================================
POLISH — small, universal richness additions
1. Red→yellow gradient hover stripe on every card variant
2. Per-page word watermark + hairline rule on fleet/blog page hero
============================================================ */
/* ── Universal gradient-stripe hover for every card type ─── */
.service-card,
.fleet-card,
.blog-card,
.vehicle-card {
position: relative;
}
.service-card::before,
.fleet-card::before,
.blog-card::before,
.vehicle-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
z-index: 2;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
pointer-events: none;
}
.service-card:hover::before,
.fleet-card:hover::before,
.blog-card:hover::before,
.vehicle-card:hover::before {
transform: scaleX(1);
}
.stat-card {
position: relative;
overflow: hidden;
}
.stat-card::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-yellow), var(--primary-red));
transform: scaleX(0);
transform-origin: right;
transition: transform 0.35s ease;
pointer-events: none;
}
.stat-card:hover::before { transform: scaleX(1); }
.vehicle-card:hover .vehicle-badge {
box-shadow: 0 6px 18px -6px rgba(230, 57, 70, 0.4);
}
/* ── Per-page word watermark + accent rule on page hero ──── */
.page-hero { position: relative; overflow: hidden; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero-watermark {
position: absolute;
pointer-events: none;
user-select: none;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(6rem, 16vw, 14rem);
line-height: 0.85;
letter-spacing: -0.04em;
z-index: 0;
white-space: nowrap;
}
.page-hero-watermark--fleet {
bottom: -2.2rem;
right: -1rem;
color: rgba(255, 255, 255, 0.05);
transform: rotate(-3deg);
}
.page-hero-watermark--gallery {
top: 50%;
right: -2rem;
transform: translateY(-50%) rotate(-3deg);
color: rgba(15, 20, 25, 0.05);
}
/* Hairline rule under the hero copy — small editorial accent */
.page-hero-rule {
margin-top: 1.6rem;
width: 64px;
height: 3px;
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
border-radius: 2px;
}
.page-hero-rule--light {
background: linear-gradient(90deg, var(--primary-red), var(--primary-yellow));
opacity: 0.95;
}
@media (max-width: 720px) {
.page-hero-watermark { font-size: 5.5rem; }
.page-hero-watermark--gallery { right: -1rem; }
}
@media (max-width: 480px) {
.page-hero-watermark { font-size: 4.5rem; opacity: 0.85; }
}
/* ============================================================
FLEET PAGE — wild edition
- cinematic hero with FLEET watermark + drifting asterisks
- sticky-image vehicle spreads w/ clip-path image reveal
- scroll-driven parallax on giant numerals (Chrome/Edge native)
- staggered child reveal inside each spread
- marquee strip
- all transform/opacity only — GPU-accelerated, snappy
============================================================ */
/* ── HERO --wild ──────────────────────────────────────────── */
.fleet-hero--wild {
min-height: 78vh;
padding: 8rem 24px 6rem;
overflow: hidden;
position: relative;
}
.fleet-hero--wild .container {
position: relative;
z-index: 2;
max-width: 1100px;
}
.fleet-hero--wild h1 {
font-size: clamp(2.6rem, 8.5vw, 6rem);
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 800;
margin-bottom: 1.5rem;
max-width: 920px;
text-shadow: 0 6px 50px rgba(0,0,0,0.45);
}
.fleet-hero--wild h1 em {
font-style: italic;
background: linear-gradient(135deg, var(--primary-yellow) 0%, #FFD86E 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
}
.fleet-hero--wild p {
font-size: clamp(1.05rem, 1.7vw, 1.2rem);
max-width: 600px;
color: rgba(255,255,255,0.8);
line-height: 1.55;
margin: 0 0 1.6rem;
}
.fleet-hero__bigmark {
position: absolute;
bottom: -3.5rem;
right: -2rem;
font-family: var(--font-display);
font-size: clamp(8rem, 22vw, 22rem);
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 2px rgba(255, 183, 3, 0.32);
pointer-events: none;
user-select: none;
z-index: 1;
transform: rotate(-3deg);
}
.fleet-hero__asterisk-a {
top: 7rem; right: 8%;
font-size: 4rem;
color: var(--primary-yellow);
transform: rotate(-14deg);
z-index: 2;
}
.fleet-hero__asterisk-b {
top: 60%; left: 4%;
font-size: 2.6rem;
color: var(--primary-red);
transform: rotate(20deg);
z-index: 2;
opacity: 0.85;
}
/* "04 vehicles in service" counter block */
.fleet-hero__count {
margin-top: 2.4rem;
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.4rem 1rem 1.2rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 14px;
}
.fleet-hero__count-num {
font-family: var(--font-display);
font-size: 2.6rem;
font-weight: 800;
line-height: 1;
color: var(--primary-yellow);
letter-spacing: -0.02em;
}
.fleet-hero__count-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.fleet-hero__count-label {
color: rgba(255,255,255,0.95);
font-weight: 600;
font-size: 0.95rem;
}
.fleet-hero__count-sub {
color: rgba(255,255,255,0.55);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-top: 2px;
font-weight: 600;
}
/* ── FLEET VEHICLES — clean separated cards (v2) ────────── */
.fleet-vehicles {
background: var(--bg);
padding: 5.5rem 24px 6.5rem;
}
.fleet-vehicles__container {
max-width: 1180px;
display: flex;
flex-direction: column;
gap: 3rem;
}
.vehicle-card-v2 {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 24px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
scroll-margin-top: 100px;
}
.vehicle-card-v2:hover {
transform: translateY(-3px);
box-shadow: 0 30px 60px -28px rgba(15, 20, 25, 0.18);
border-color: transparent;
}
.vehicle-card-v2__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #1a2230 0%, #0f1419 100%);
}
.vehicle-card-v2__media--dark {
background: var(--ink);
}
.vehicle-card-v2__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
clip-path: inset(0 100% 0 0);
transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s,
transform 0.6s ease;
}
.vehicle-card-v2.is-visible .vehicle-card-v2__media img {
clip-path: inset(0 0 0 0);
}
.vehicle-card-v2:hover .vehicle-card-v2__media img {
transform: scale(1.03);
}
/* Discreet "01 / 04" index marker pinned to the image */
.vehicle-card-v2__index {
position: absolute;
top: 1.2rem;
left: 1.2rem;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
padding: 0.45rem 0.8rem;
background: rgba(15, 20, 25, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
z-index: 2;
}
/* Content side — clean, generous, professional */
.vehicle-card-v2__content {
padding: 3rem 3rem 2.6rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.vehicle-card-v2__chip {
display: inline-block;
font-family: var(--font-display);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--primary-red);
background: rgba(230, 57, 70, 0.08);
padding: 0.4rem 0.85rem;
border-radius: 6px;
margin-bottom: 1.1rem;
align-self: flex-start;
}
.vehicle-card-v2 h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 3.2vw, 2.2rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 0.55rem;
clip-path: inset(0 100% 0 0);
transition: clip-path 0.95s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
.vehicle-card-v2.is-visible h2 {
clip-path: inset(0 0 0 0);
}
.vehicle-card-v2__subtitle {
font-size: 1.02rem;
color: var(--slate-soft);
line-height: 1.45;
margin: 0 0 1.4rem;
font-weight: 500;
}
.vehicle-card-v2__description {
color: var(--slate-soft);
font-size: 0.97rem;
line-height: 1.65;
margin: 0 0 1.6rem;
}
/* Numbered specs — clean line-divided list */
.vehicle-card-v2__specs {
list-style: none;
margin: 0 0 1.6rem;
padding: 0;
border-top: 1px solid var(--line);
}
.vehicle-card-v2__specs li {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.78rem 0;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 0.95rem;
line-height: 1.45;
}
.vehicle-card-v2__specs li span {
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-red);
letter-spacing: 0.04em;
min-width: 24px;
flex-shrink: 0;
}
/* "Also in service" divider between vehicles and auxiliary equipment */
.fleet-vehicles__divider {
display: flex;
align-items: center;
gap: 1.2rem;
margin: 1.4rem 0 0.4rem;
padding: 0 0.4rem;
}
.fleet-vehicles__divider-line {
flex: 1;
height: 1px;
background: var(--line);
}
.fleet-vehicles__divider-label {
font-family: var(--font-display);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--slate-soft);
white-space: nowrap;
}
/* Auxiliary card sits slightly less prominent than primary vehicles */
.vehicle-card-v2--auxiliary .vehicle-card-v2__chip {
color: var(--slate-soft);
background: rgba(15, 20, 25, 0.05);
}
/* Legacy / retired vehicle: muted, with a "Retired" status chip beside the
code chip. Kept visible so blog posts that reference the unit still have
a real anchor to deep-link into. */
.vehicle-card-v2--legacy { opacity: 0.92; }
.vehicle-card-v2--legacy .vehicle-card-v2__media img { filter: grayscale(0.3); }
.vehicle-card-v2--legacy .vehicle-card-v2__chip {
color: var(--slate-soft);
background: rgba(15, 20, 25, 0.05);
}
.vehicle-card-v2__status {
display: inline-block;
margin-left: 0.5rem;
padding: 0.25rem 0.6rem;
background: rgba(230, 57, 70, 0.08);
color: var(--primary-red-darker);
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
/* Mobile: stack image on top, content below */
@media (max-width: 820px) {
.fleet-vehicles { padding: 3.5rem 16px 4rem; }
.fleet-vehicles__container { gap: 2rem; }
.vehicle-card-v2 {
grid-template-columns: 1fr;
border-radius: 20px;
}
.vehicle-card-v2__media { aspect-ratio: 16 / 11; }
.vehicle-card-v2__content { padding: 2rem 1.6rem 2rem; }
.vehicle-card-v2 h2 { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
.fleet-vehicles__divider-label { font-size: 0.7rem; letter-spacing: 0.16em; }
.fleet-vehicles__divider { margin: 0.6rem 0; }
}
/* ── VEHICLE SPREAD ──────────────────────────────────────── */
.vehicle-spread {
position: relative;
overflow: hidden;
padding: 6rem 24px;
transition: opacity 0.7s ease, transform 0.7s ease;
contain: layout paint;
}
.vehicle-spread--paper { background: var(--paper); }
.vehicle-spread--bg { background: var(--bg); }
.vehicle-spread__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 4rem;
align-items: start;
position: relative;
z-index: 2;
}
.vehicle-spread--reverse .vehicle-spread__inner {
grid-template-columns: 1fr 1.15fr;
}
.vehicle-spread--reverse .vehicle-spread__media {
order: 2;
}
/* The giant outlined numeral as background watermark */
.vehicle-spread__num {
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(-4deg);
font-family: var(--font-display);
font-size: clamp(14rem, 36vw, 38rem);
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 2px rgba(15, 20, 25, 0.07);
pointer-events: none;
user-select: none;
z-index: 1;
white-space: nowrap;
}
.vehicle-spread:not(.vehicle-spread--reverse) .vehicle-spread__num {
right: -6rem;
}
.vehicle-spread--reverse .vehicle-spread__num {
left: -6rem;
}
.vehicle-spread__num--ev {
font-size: clamp(10rem, 26vw, 28rem);
}
/* Scroll-driven parallax on the giant numeral (Chrome/Edge native).
Falls back gracefully on Safari — numeral is just static. */
@supports (animation-timeline: view()) {
.vehicle-spread__num {
animation: spread-num-parallax linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes spread-num-parallax {
from { transform: translateY(calc(-50% + 80px)) rotate(-7deg); }
to { transform: translateY(calc(-50% - 80px)) rotate(2deg); }
}
.vehicle-spread--reverse .vehicle-spread__num {
animation-name: spread-num-parallax-reverse;
}
@keyframes spread-num-parallax-reverse {
from { transform: translateY(calc(-50% + 80px)) rotate(7deg); }
to { transform: translateY(calc(-50% - 80px)) rotate(-2deg); }
}
}
/* Brand asterisks drifting infinitely */
.vehicle-spread__asterisk-a,
.vehicle-spread__asterisk-b {
position: absolute;
z-index: 2;
line-height: 1;
pointer-events: none;
user-select: none;
will-change: transform;
}
.vehicle-spread__asterisk-a {
top: 3rem; left: 4%;
font-size: 3rem;
color: var(--primary-red);
animation: asterisk-drift-a 14s ease-in-out infinite;
}
.vehicle-spread__asterisk-b {
bottom: 3rem; right: 5%;
font-size: 2.2rem;
color: var(--primary-yellow);
animation: asterisk-drift-b 11s ease-in-out infinite;
}
@keyframes asterisk-drift-a {
0%, 100% { transform: rotate(-12deg) translate(0, 0); }
50% { transform: rotate(8deg) translate(6px, -6px); }
}
@keyframes asterisk-drift-b {
0%, 100% { transform: rotate(18deg) translate(0, 0); }
50% { transform: rotate(-4deg) translate(-5px, 5px); }
}
/* MEDIA — sticky on desktop, with clip-path reveal + overlay */
.vehicle-spread__media {
position: sticky;
top: 5rem;
align-self: start;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 30px 60px -30px rgba(15, 20, 25, 0.35);
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #1a2230 0%, #0f1419 100%);
}
.vehicle-spread__media--dark {
background: var(--ink);
}
.vehicle-spread__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
clip-path: inset(0 100% 0 0);
transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.15s,
transform 0.6s ease;
}
.vehicle-spread.is-visible .vehicle-spread__media img {
clip-path: inset(0 0 0 0);
}
.vehicle-spread__media:hover img {
transform: scale(1.03);
}
/* Subtle red→yellow corner overlay on the image */
.vehicle-spread__media-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 0% 100%, rgba(230, 57, 70, 0.18) 0%, transparent 45%),
radial-gradient(ellipse at 100% 0%, rgba(255, 183, 3, 0.14) 0%, transparent 45%);
mix-blend-mode: screen;
opacity: 0;
transition: opacity 0.4s ease;
}
.vehicle-spread.is-visible .vehicle-spread__media-overlay { opacity: 1; }
/* "VEHICLE 01" tag pinned to the image */
.vehicle-spread__media-tag {
position: absolute;
top: 1.2rem;
left: 1.2rem;
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.5rem 0.9rem;
background: rgba(15, 20, 25, 0.72);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 8px;
color: rgba(255,255,255,0.92);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
z-index: 3;
}
.vehicle-spread__media-tag-num {
font-family: var(--font-display);
color: var(--primary-yellow);
font-size: 1rem;
letter-spacing: 0;
}
/* INFO column — staggered reveal of children */
.vehicle-spread__info {
padding: 1rem 0 2rem;
}
.vehicle-spread__info > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.vehicle-spread.is-visible .vehicle-spread__info > * {
opacity: 1;
transform: none;
}
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(1) { transition-delay: 0.2s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(2) { transition-delay: 0.28s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(3) { transition-delay: 0.36s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(4) { transition-delay: 0.44s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(5) { transition-delay: 0.52s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(6) { transition-delay: 0.6s; }
.vehicle-spread.is-visible .vehicle-spread__info > *:nth-child(7) { transition-delay: 0.68s; }
/* The chip / vehicle code label */
.vehicle-spread__chip {
display: inline-block;
font-family: var(--font-display);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-red);
background: rgba(230, 57, 70, 0.08);
padding: 0.4rem 0.85rem;
border-radius: 6px;
margin-bottom: 1.1rem;
}
.vehicle-spread__info h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
margin: 0 0 0.7rem;
}
.vehicle-spread__sub {
font-size: 1.1rem;
color: var(--slate-soft);
line-height: 1.45;
font-weight: 500;
margin: 0;
}
.vehicle-spread__info .section-rule {
margin: 1.4rem 0 1.6rem;
}
.vehicle-spread__info > p {
color: var(--slate-soft);
font-size: 1rem;
line-height: 1.65;
margin: 0 0 1.6rem;
}
/* Numbered spec list */
.vehicle-spec-list {
list-style: none;
margin: 0 0 1.8rem;
padding: 0;
border-top: 1px solid var(--line);
}
.vehicle-spec-list li {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 0.97rem;
line-height: 1.45;
transition: background 0.2s, padding-left 0.25s ease;
}
.vehicle-spec-list li:hover {
background: rgba(230, 57, 70, 0.03);
padding-left: 0.6rem;
}
.vehicle-spec-num {
font-family: var(--font-display);
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-red);
letter-spacing: 0.04em;
min-width: 28px;
flex-shrink: 0;
}
/* Mobile: collapse to single column, kill sticky */
@media (max-width: 900px) {
.vehicle-spread { padding: 4rem 20px; }
.vehicle-spread__inner,
.vehicle-spread--reverse .vehicle-spread__inner {
grid-template-columns: 1fr;
gap: 2.2rem;
}
.vehicle-spread--reverse .vehicle-spread__media { order: 0; }
.vehicle-spread__media {
position: static;
aspect-ratio: 16 / 11;
}
.vehicle-spread__num {
font-size: clamp(10rem, 32vw, 18rem) !important;
opacity: 0.7;
}
.vehicle-spread__info { padding: 0; }
.vehicle-spread__asterisk-a { font-size: 2rem; top: 1.5rem; }
.vehicle-spread__asterisk-b { font-size: 1.6rem; bottom: 1.5rem; }
}
/* ── MARQUEE strip ──────────────────────────────────────── */
.fleet-marquee {
background: var(--ink);
color: var(--paper);
padding: 1rem 0;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fleet-marquee__track {
display: inline-flex;
align-items: center;
gap: 2.4rem;
white-space: nowrap;
animation: marquee-scroll 38s linear infinite;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.fleet-marquee__track > span:not(.fleet-marquee__dot) {
color: rgba(255,255,255,0.85);
}
.fleet-marquee__dot {
color: var(--primary-yellow);
font-size: 1.1rem;
transform: translateY(-1px);
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.fleet-marquee:hover .fleet-marquee__track {
animation-play-state: paused;
}
/* ── Bold fleet CTA — reuses Coverage card ─────────────── */
.fleet-cta--bold {
background: var(--paper);
padding: 5rem 24px;
}
.fleet-cta--bold .container {
max-width: 1100px;
}
.fleet-cta-card {
position: relative;
}
/* ── Apple-style word-by-word hero entrance ─────────────── */
.fleet-hero__h1 .word {
display: inline-block;
overflow: hidden;
vertical-align: top;
margin-right: 0.22em;
line-height: 1;
}
.fleet-hero__h1 .word > span,
.fleet-hero__h1 .word > em {
display: inline-block;
transform: translateY(110%);
animation: hero-word-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fleet-hero__h1 .word:nth-child(1) > span { animation-delay: 0.10s; }
.fleet-hero__h1 .word:nth-child(2) > span { animation-delay: 0.18s; }
.fleet-hero__h1 .word:nth-child(3) > span { animation-delay: 0.26s; }
.fleet-hero__h1 .word:nth-child(4) > em { animation-delay: 0.40s; }
.fleet-hero__h1 .word:nth-child(5) > em { animation-delay: 0.48s; }
@keyframes hero-word-rise {
from { transform: translateY(110%); }
to { transform: translateY(0); }
}
/* Hero supporting copy fades in slightly later */
.fleet-hero--wild p,
.fleet-hero--wild .section-eyebrow,
.fleet-hero--wild .fleet-hero__count,
.fleet-hero--wild .section-rule {
opacity: 0;
animation: hero-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fleet-hero--wild .section-eyebrow { animation-delay: 0.05s; }
.fleet-hero--wild p { animation-delay: 0.65s; }
.fleet-hero--wild .section-rule { animation-delay: 0.78s; }
.fleet-hero--wild .fleet-hero__count { animation-delay: 0.9s; }
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* The big "FLEET" watermark drifts in slowly */
.fleet-hero__bigmark {
opacity: 0;
animation: bigmark-emerge 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
@keyframes bigmark-emerge {
from { opacity: 0; transform: rotate(-3deg) translateY(40px); }
to { opacity: 1; transform: rotate(-3deg) translateY(0); }
}
/* ── Vehicle H2 — clip-path mask sweep on entry ─────────── */
.vehicle-spread__info h2 {
clip-path: inset(0 100% 0 0);
transition:
opacity 0.7s ease,
transform 0.7s ease,
clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.vehicle-spread.is-visible .vehicle-spread__info h2 {
clip-path: inset(0 0 0 0);
}
/* The chip beneath the H2 gets a subtle slide-from-left */
.vehicle-spread__chip {
transform: translateX(-20px);
transition:
opacity 0.6s ease,
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vehicle-spread.is-visible .vehicle-spread__chip {
transform: translateX(0);
}
/* ── Reduced motion: kill all the fancy stuff ──────────── */
@media (prefers-reduced-motion: reduce) {
.vehicle-card-v2__media img,
.vehicle-card-v2 h2 {
clip-path: none !important;
transition: none !important;
}
.vehicle-spread__media img { clip-path: none !important; }
.vehicle-spread__info h2 { clip-path: none !important; }
.vehicle-spread__asterisk-a,
.vehicle-spread__asterisk-b,
.fleet-marquee__track,
.fleet-hero__h1 .word > span,
.fleet-hero__h1 .word > em,
.fleet-hero--wild p,
.fleet-hero--wild .section-eyebrow,
.fleet-hero--wild .fleet-hero__count,
.fleet-hero--wild .section-rule,
.fleet-hero__bigmark {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.fleet-hero__bigmark { transform: rotate(-3deg) !important; }
.vehicle-spread__num {
animation: none !important;
transform: translateY(-50%) rotate(-4deg) !important;
}
.vehicle-spread__info > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.vehicle-spread__chip {
transform: none !important;
}
}
/* ── Cross-tenant switch tag ────────────────────────────────────
Small, tag-styled link rendered on the blog gallery and shared
blog posts. Lets a viewer hop between Chavivim Orange County and
Chavivim Rockland for the same path. Worker fills the href via
the siblingHref computed key; falls back to a placeholder so the
markup still renders standalone. */
.tenant-switch {
display: inline-block;
font-size: 0.85rem;
color: var(--slate-soft, #5b6370);
margin: 0.6rem 0 0;
letter-spacing: 0;
}
.tenant-switch__link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.18rem 0.55rem;
margin-left: 0.3rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.06);
color: inherit;
text-decoration: none;
font-weight: 600;
transition: background 0.15s ease, color 0.15s ease;
}
.tenant-switch__link:hover,
.tenant-switch__link:focus-visible {
background: var(--primary-yellow, #f7c52d);
color: #1a1a1a;
}
.tenant-switch--post {
margin-top: 0.5rem;
}
/* ── Shabbos & Yom Tov services page ────────────────────────────────
Layout pattern matches fleet.html: dark cinematic hero (background
photo from the 2023 launch announcement), then a "how it works" row,
the two-track services grid (goy = yellow-accent / emergency =
red-accent), a rabbinic-oversight card linking to the launch story,
and the standard fleet-cta block.
Page uses .page-hero as the base — that provides the 7rem top
padding so the hero clears the navbar — and .shabbos-hero layers in
the photo background and Shabbos-specific typography (mirrors
.fleet-hero / .fleet-hero--wild). */
.shabbos-hero {
/* Override the .page-hero base padding so the hero gives the
navbar real breathing room on desktop. .page-hero ships
padding: 7rem 24px 4rem; we want more on top. */
padding: 9.5rem 24px 5.5rem;
min-height: 620px;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.shabbos-hero::before {
background:
linear-gradient(135deg, rgba(8,12,18,0.92) 0%, rgba(8,12,18,0.55) 40%, rgba(8,12,18,0.88) 100%),
radial-gradient(ellipse at 75% 30%, rgba(247,197,45,0.18) 0%, transparent 55%),
var(--tenant-shabbos-hero-bg, url('/assets/shared/our-services.jpg')) center/cover no-repeat;
}
/* A second decorative layer for a soft glow / texture above the photo
without darkening it further. */
.shabbos-hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 12% 8%, rgba(255,255,255,0.06) 0%, transparent 35%);
pointer-events: none;
z-index: 0;
}
.shabbos-hero .container {
max-width: 1100px;
width: 100%;
position: relative;
z-index: 1;
}
.shabbos-hero .section-eyebrow {
/* Animated gold underline under the eyebrow — premium accent. */
display: inline-block;
padding-bottom: 0.5rem;
position: relative;
letter-spacing: 0.12em;
}
.shabbos-hero .section-eyebrow::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-yellow) 0%, rgba(247,197,45,0.2) 100%);
border-radius: 2px;
animation: shabbosEyebrowRule 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes shabbosEyebrowRule {
from { width: 0; }
to { width: 3rem; }
}
.shabbos-hero__h1 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(2.5rem, 6.2vw, 5rem);
line-height: 0.98;
letter-spacing: -0.032em;
margin: 1.25rem 0 1.5rem;
color: var(--paper);
max-width: 16ch;
/* Very faint shadow keeps the headline legible on the bright parts
of the photo without going full neon. */
text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}
.shabbos-hero__h1 em {
font-style: normal;
position: relative;
/* Gold gradient on the emphasized words instead of flat yellow —
reads as warmer / more premium and picks up the photo. */
background: linear-gradient(120deg, #fff3a8 0%, #ffd75c 35%, #f7c52d 65%, #e6a92a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Subtle glow behind the gold text for warmth on the photo. */
filter: drop-shadow(0 0 32px rgba(247,197,45,0.18));
}
.shabbos-hero__sub {
max-width: 58ch;
font-size: clamp(1.05rem, 1.45vw, 1.2rem);
line-height: 1.6;
color: rgba(255,255,255,0.88);
margin: 0 0 1.5rem;
font-weight: 400;
}
.shabbos-hero__pills {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.5rem;
}
.shabbos-hero__pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.88);
font-size: 0.85rem;
line-height: 1;
letter-spacing: 0.015em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 1px 2px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.shabbos-hero__pill:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.28);
}
.shabbos-hero__pill strong {
color: var(--primary-yellow);
font-weight: 700;
}
.shabbos-hero__pill--accent {
border-color: rgba(247,197,45,0.5);
background: rgba(247,197,45,0.1);
box-shadow: 0 4px 16px rgba(247,197,45,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Decorative watermark and asterisk — same treatment as fleet hero. */
.shabbos-hero__bigmark {
position: absolute;
top: 50%;
right: -2vw;
transform: translateY(-50%);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(7rem, 16vw, 14rem);
line-height: 1;
letter-spacing: -0.06em;
color: rgba(255,255,255,0.04);
pointer-events: none;
user-select: none;
z-index: 0;
}
.shabbos-hero__asterisk-a {
position: absolute;
top: 1.75rem;
left: 1.75rem;
font-size: 2.5rem;
line-height: 1;
color: var(--primary-yellow);
opacity: 0.85;
pointer-events: none;
user-select: none;
}
/* How-it-works row between hero and services grid. Mirrors the
service-area "story" treatment from index.html but tighter. */
.shabbos-intro {
background: var(--paper);
padding: 4rem 24px 2rem;
}
.shabbos-intro__container {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.2fr);
gap: 3rem;
align-items: start;
max-width: 1100px;
}
.shabbos-intro__lead h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.75rem, 2.8vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0.5rem 0 0.85rem;
color: var(--ink);
}
.shabbos-intro__lead p {
font-size: 1rem;
line-height: 1.65;
color: var(--slate-soft);
margin: 0;
}
.shabbos-intro__how {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.85rem;
counter-reset: shabbos-step;
}
.shabbos-intro__how li {
position: relative;
display: grid;
grid-template-columns: 3.5rem 1fr;
gap: 1.1rem;
align-items: center;
padding: 1.1rem 1.25rem;
background: linear-gradient(135deg, var(--paper) 0%, var(--paper-cool) 100%);
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.shabbos-intro__how li:hover {
transform: translateX(3px);
border-color: rgba(247,197,45,0.55);
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
/* Decorative connector line between consecutive steps on the right edge
of each step number (desktop only). */
.shabbos-intro__how li:not(:last-child)::after {
content: "";
position: absolute;
left: 2.85rem;
top: 100%;
width: 2px;
height: 0.85rem;
background: linear-gradient(180deg, rgba(247,197,45,0.55), transparent);
border-radius: 2px;
}
.shabbos-intro__how strong {
display: block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.005em;
color: var(--ink);
margin-bottom: 0.25rem;
}
.shabbos-intro__how p {
font-size: 0.95rem;
line-height: 1.55;
color: var(--slate-soft);
margin: 0;
}
.shabbos-intro__how a {
color: var(--primary-red);
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
.shabbos-intro__how a:hover { border-bottom-color: currentColor; }
.shabbos-intro__step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 14px;
background: linear-gradient(135deg, #ffd75c 0%, #f7c52d 60%, #e6a92a 100%);
color: var(--ink);
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 1rem;
letter-spacing: -0.01em;
box-shadow:
0 6px 14px rgba(247,197,45,0.32),
inset 0 1px 0 rgba(255,255,255,0.4);
}
.shabbos-intro__step-body {
min-width: 0;
}
/* Services grid */
.shabbos-services {
padding: 4rem 24px 3rem;
background: linear-gradient(180deg, var(--paper) 0%, var(--paper-cool) 100%);
}
.shabbos-section { margin-bottom: 3.5rem; }
.shabbos-section:last-child { margin-bottom: 0; }
.shabbos-section__header {
max-width: 64ch;
margin: 0 auto 2rem;
text-align: center;
}
.shabbos-section__header h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.75rem, 2.8vw, 2.25rem);
line-height: 1.1;
letter-spacing: -0.022em;
margin: 0 0 0.6rem;
color: var(--ink);
}
.shabbos-section__header p {
font-size: 1.02rem;
line-height: 1.55;
color: var(--slate-soft);
margin: 0;
}
.shabbos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.shabbos-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1.65rem 1.5rem 1.5rem;
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 1px 0 rgba(255,255,255,0.6) inset;
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.2s ease,
border-color 0.2s ease;
overflow: hidden;
}
.shabbos-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0,0,0,0.09);
}
/* Top color bar — wider and slightly inset so it reads as a deliberate
accent rather than a hairline. */
.shabbos-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
opacity: 0.9;
transition: opacity 0.2s ease;
}
.shabbos-card:hover::before { opacity: 1; }
.shabbos-card--goy {
border-color: rgba(247,197,45,0.18);
}
.shabbos-card--goy:hover {
border-color: rgba(247,197,45,0.55);
}
.shabbos-card--goy::before {
background: linear-gradient(90deg, #ffd75c 0%, #f7c52d 60%, #e6a92a 100%);
}
.shabbos-card--emergency {
border-color: rgba(229,57,70,0.16);
}
.shabbos-card--emergency:hover {
border-color: rgba(229,57,70,0.45);
}
.shabbos-card--emergency::before {
background: linear-gradient(90deg, #ff6b6b 0%, #e53946 60%, #c0252f 100%);
}
/* Decorative corner asterisk on each card — keeps the brand mark
present without crowding the type. */
.shabbos-card::after {
content: "✷";
position: absolute;
top: 1rem;
right: 1.15rem;
font-size: 1rem;
line-height: 1;
color: var(--line);
transition: color 0.2s ease, transform 0.3s ease;
}
.shabbos-card--goy:hover::after { color: var(--primary-yellow); transform: rotate(45deg); }
.shabbos-card--emergency:hover::after { color: var(--primary-red); transform: rotate(45deg); }
.shabbos-card__title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: 1.2rem;
line-height: 1.25;
letter-spacing: -0.012em;
margin: 0 0 0.55rem;
color: var(--ink);
padding-right: 1.5rem; /* leave room for the corner asterisk */
}
.shabbos-card__description {
font-size: 0.96rem;
line-height: 1.6;
color: var(--slate-soft);
margin: 0;
}
/* Rabbinic oversight card + link back to the 2023 launch announcement. */
.shabbos-rabbinic {
padding: 3rem 24px 5rem;
background: linear-gradient(180deg, var(--paper-cool) 0%, var(--paper) 100%);
}
.shabbos-rabbinic__card {
position: relative;
max-width: 780px;
margin: 0 auto;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 18px;
padding: 2.5rem 2.5rem 2rem;
box-shadow:
0 1px 2px rgba(0,0,0,0.04),
0 20px 60px -25px rgba(0,0,0,0.18);
overflow: hidden;
}
/* Gold accent strip on the left edge — replaces the simple border-left
so it can carry a gradient and integrate with the asterisk. */
.shabbos-rabbinic__card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 5px;
background: linear-gradient(180deg, var(--primary-yellow) 0%, rgba(247,197,45,0.2) 100%);
}
.shabbos-rabbinic__mark {
position: absolute;
top: 1.25rem;
right: 1.5rem;
font-size: 3.5rem;
line-height: 1;
color: var(--primary-yellow);
opacity: 0.18;
pointer-events: none;
user-select: none;
}
.shabbos-rabbinic__card h2 {
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
font-size: clamp(1.5rem, 2.4vw, 1.85rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin: 0.4rem 0 1rem;
color: var(--ink);
max-width: 22ch;
}
.shabbos-rabbinic__card p {
font-size: 1rem;
line-height: 1.7;
color: var(--slate-soft);
margin: 0 0 1.5rem;
max-width: 60ch;
}
.shabbos-rabbinic__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 1.15rem;
background: var(--ink);
color: var(--paper);
border-radius: 999px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 600;
font-size: 0.93rem;
letter-spacing: 0.005em;
text-decoration: none;
box-shadow: 0 6px 14px rgba(0,0,0,0.18);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.shabbos-rabbinic__link:hover {
background: var(--primary-red);
transform: translateX(3px);
box-shadow: 0 10px 22px rgba(229,57,70,0.28);
}
.shabbos-rabbinic__link svg {
transition: transform 0.2s ease;
}
.shabbos-rabbinic__link:hover svg { transform: translateX(2px); }
@media (max-width: 820px) {
.shabbos-intro__container { grid-template-columns: 1fr; gap: 1.5rem; }
.shabbos-hero__bigmark { display: none; }
}
/* "Update" callout used inside blog posts to point readers at a newer
canonical page (e.g. the 2023 Shabbos-services launch article links
forward to /shabbos-services.html). */
.blog-post-update {
display: flex;
gap: 0.85rem;
align-items: flex-start;
margin: 0 0 1.5rem;
padding: 1rem 1.1rem;
background: var(--paper-cool);
border: 1px solid var(--line);
border-left: 3px solid var(--primary-yellow);
border-radius: 10px;
}
.blog-post-update__tag {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 0.2rem 0.55rem;
background: var(--primary-yellow);
color: var(--ink);
border-radius: 6px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
margin-top: 0.15rem;
}
.blog-post-update__body {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.blog-post-update p {
margin: 0;
font-size: 0.97rem;
line-height: 1.6;
color: var(--slate-soft);
}
.blog-post-update p strong {
color: var(--ink);
}
.blog-post-update a {
color: var(--primary-red);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.blog-post-update a:hover { color: var(--ink); }
@media (max-width: 600px) {
.blog-post-update { flex-direction: column; gap: 0.5rem; padding: 0.85rem 0.95rem; }
.blog-post-update__tag { align-self: flex-start; }
}
@media (max-width: 600px) {
.shabbos-hero {
/* Tighter top spacing on mobile — the navbar is shorter there
and 9.5rem is too much. */
padding: 6.5rem 18px 3rem;
min-height: 420px;
}
.shabbos-hero__asterisk-a { font-size: 1.8rem; top: 1rem; left: 1rem; }
.shabbos-hero__h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
.shabbos-hero__sub { font-size: 1rem; }
.shabbos-intro { padding: 2.5rem 18px 1rem; }
.shabbos-services { padding: 2rem 18px 1rem; }
.shabbos-rabbinic { padding: 1.5rem 18px 3rem; }
.shabbos-rabbinic__card { padding: 1.5rem 1.25rem 1.25rem; }
.shabbos-card { padding: 1.25rem 1.1rem; }
.shabbos-intro__how li { padding: 0.75rem 0.85rem; }
}
/* ─────────────────────────────────────────────────────────────
/sar.html — Search & Rescue landing page
Hero mirrors .shabbos-hero structure (dark photo backdrop, gold
gradient on the emphasized words) but ships with its own SAR
imagery and a denser CTA block. Sections below the hero use a
light surface, three pillar cards, a NYSDEC certification badge,
a mosaic gallery, and a dual-action CTA card.
───────────────────────────────────────────────────────────── */
/* ── Hero ──────────────────────────────────────────────────── */
.sar-hero {
padding: 9.5rem 24px 5.5rem;
min-height: 640px;
display: flex;
align-items: center;
justify-content: center;
text-align: left;
overflow: hidden;
}
.sar-hero::before {
background:
linear-gradient(135deg, rgba(8,12,18,0.94) 0%, rgba(8,12,18,0.55) 38%, rgba(8,12,18,0.92) 100%),
radial-gradient(ellipse at 78% 28%, rgba(247,197,45,0.20) 0%, transparent 55%),
url('/blog/images/sarmain.jpeg') center/cover no-repeat;
}
.sar-hero::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 10% 6%, rgba(255,255,255,0.06) 0%, transparent 35%),
linear-gradient(180deg, transparent 70%, rgba(8,12,18,0.55) 100%);
pointer-events: none;
z-index: 0;
}
.sar-hero .container {
max-width: 1100px;
width: 100%;
position: relative;
z-index: 1;
}
/* 2-column hero: copy on the left, dominant logo medallion on the right.
On mobile the grid collapses; the badge moves above the copy so the
SAR mark still leads. */
.sar-hero__grid {
display: grid;
grid-template-columns: 1.45fr 1fr;
gap: 3rem;
align-items: center;
}
.sar-hero__copy {
min-width: 0;
}
.sar-hero__badge {
position: relative;
width: clamp(220px, 28vw, 360px);
aspect-ratio: 1 / 1;
justify-self: center;
transform: translateY(8px);
opacity: 0;
animation: sarBadgeIn 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.15s forwards;
}
@keyframes sarBadgeIn {
to { transform: translateY(0); opacity: 1; }
}
.sar-hero__badge-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px dashed rgba(247,197,45,0.4);
animation: sarBadgeRingSpin 60s linear infinite;
}
.sar-hero__badge-ring--outer {
inset: -22px;
border-style: solid;
border-color: rgba(255,255,255,0.06);
animation: sarBadgeRingSpin 90s linear infinite reverse;
}
@keyframes sarBadgeRingSpin {
to { transform: rotate(360deg); }
}
.sar-hero__badge::before {
content: "";
position: absolute;
inset: -14%;
border-radius: 50%;
background: radial-gradient(circle, rgba(247,197,45,0.28) 0%, rgba(247,197,45,0.08) 35%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.sar-hero__badge-img {
position: absolute;
inset: 8%;
width: 84%;
height: 84%;
object-fit: contain;
filter: drop-shadow(0 12px 28px rgba(0,0,0,0.45));
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.sar-hero__badge-ring,
.sar-hero__badge-ring--outer { animation: none; }
}
.sar-hero__eyebrow {
color: var(--primary-yellow);
display: inline-block;
padding-bottom: 0.5rem;
position: relative;
letter-spacing: 0.14em;
}
.sar-hero__eyebrow::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-yellow) 0%, rgba(247,197,45,0.2) 100%);
border-radius: 2px;
animation: sarEyebrowRule 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes sarEyebrowRule {
from { width: 0; }
to { width: 3.5rem; }
}
.sar-hero__h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.6rem, 6.6vw, 5.4rem);
line-height: 0.98;
letter-spacing: -0.034em;
margin: 1.25rem 0 1.5rem;
color: var(--paper);
max-width: 17ch;
text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.sar-hero__h1 .word {
display: inline-block;
overflow: hidden;
vertical-align: top;
margin-right: 0.25em;
}
.sar-hero__h1 .word > span,
.sar-hero__h1 .word > em {
display: inline-block;
transform: translateY(110%);
opacity: 0;
animation: sarWordRise 0.85s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}
.sar-hero__h1 .word:nth-child(1) > span { animation-delay: 0.08s; }
.sar-hero__h1 .word:nth-child(2) > span { animation-delay: 0.16s; }
.sar-hero__h1 .word:nth-child(3) > span { animation-delay: 0.24s; }
.sar-hero__h1 .word:nth-child(4) > span { animation-delay: 0.32s; }
.sar-hero__h1 .word:nth-child(5) > em { animation-delay: 0.44s; }
.sar-hero__h1 .word:nth-child(6) > em { animation-delay: 0.52s; }
@keyframes sarWordRise {
to { transform: translateY(0); opacity: 1; }
}
.sar-hero__h1 em {
font-style: normal;
background: linear-gradient(120deg, #fff3a8 0%, #ffd75c 35%, #f7c52d 65%, #e6a92a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 32px rgba(247,197,45,0.18));
}
.sar-hero__sub {
max-width: 60ch;
font-size: clamp(1.05rem, 1.45vw, 1.2rem);
line-height: 1.65;
color: rgba(255,255,255,0.88);
margin: 0 0 1.4rem;
font-weight: 400;
}
.sar-hero__pills {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.4rem;
}
.sar-hero__pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.95rem;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 999px;
background: rgba(255,255,255,0.06);
font-size: 0.85rem;
color: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.sar-hero__pill strong {
color: var(--paper);
font-weight: 700;
}
.sar-hero__pill--accent {
border-color: rgba(247,197,45,0.45);
background: rgba(247,197,45,0.10);
}
.sar-hero__pill--accent strong {
color: var(--primary-yellow-light);
}
.sar-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.9rem;
}
.sar-hero__call {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 1.4rem;
background: var(--primary-yellow);
color: var(--ink);
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 14px 38px -14px rgba(247,197,45,0.55);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sar-hero__call:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px -14px rgba(247,197,45,0.70);
}
.sar-hero__join {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.95rem 1.4rem;
background: transparent;
color: var(--paper);
border: 1.5px solid rgba(255,255,255,0.35);
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sar-hero__join:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.6);
transform: translateY(-2px);
}
.sar-hero__bigmark {
position: absolute;
right: -0.6rem;
bottom: -1.2rem;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(8rem, 18vw, 16rem);
color: rgba(255,255,255,0.045);
letter-spacing: -0.05em;
line-height: 1;
pointer-events: none;
transform: rotate(-4deg);
z-index: 0;
}
.sar-hero__asterisk {
position: absolute;
top: 1.5rem;
left: 1.5rem;
font-size: 2.4rem;
color: var(--primary-yellow);
opacity: 0.85;
line-height: 1;
z-index: 1;
}
/* ── Mission band ──────────────────────────────────────────── */
.sar-mission {
background: var(--paper-warm);
padding: 5rem 24px;
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
/* Real USGS public-domain topographic map tile of the Catskills (the
actual SAR coverage area) — tiled across the section. Heavy warm
tint laid over it so the green/brown topo reads as cartographic
texture without overpowering the copy. */
.sar-mission::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/assets/shared/sar-bg-topo-wide.png');
background-size: 420px;
background-repeat: repeat;
background-position: center;
opacity: 0.45;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
/* Warm wash so the topo tints toward paper-warm and copy stays
readable without the map disappearing. */
.sar-mission::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(250,250,247,0.55) 0%, rgba(250,250,247,0.30) 50%, rgba(250,250,247,0.55) 100%);
pointer-events: none;
z-index: 0;
}
.sar-mission > .container { position: relative; z-index: 1; }
.sar-mission__container {
display: grid;
grid-template-columns: minmax(260px, 1fr) 2fr;
gap: 3rem;
align-items: start;
}
.sar-mission__lead h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 2.6vw, 2.4rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--ink);
margin-top: 0.75rem;
max-width: 22ch;
}
.sar-mission__body p {
font-size: 1.05rem;
line-height: 1.75;
color: var(--slate);
margin-bottom: 1rem;
}
.sar-mission__body p:last-child { margin-bottom: 0; }
/* ── Pillar cards (three differentiators) ──────────────────── */
.sar-pillars {
background: var(--paper);
padding: 5rem 24px 4.5rem;
position: relative;
overflow: hidden;
}
/* Real USGS public-domain satellite imagery tile — same coverage
area as the topo on .sar-mission, so the page reads as moving from
"the map" to "the actual terrain". Tiled wider so individual tile
edges aren't obvious; reticle SVG layered on top to add the
"search grid" feel. */
.sar-pillars::before {
content: "";
position: absolute;
inset: 0;
background-image:
url('/assets/shared/sar-bg-grid.svg'),
url('/assets/shared/sar-bg-sat-wide.png');
background-size: 540px, 480px;
background-repeat: repeat, repeat;
background-position: center, center;
opacity: 0.55;
pointer-events: none;
z-index: 0;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 95%);
}
/* Wash so the satellite imagery doesn't dominate the white card area
behind the pillars. */
.sar-pillars::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.85) 80%);
pointer-events: none;
z-index: 0;
}
.sar-pillars > .container { position: relative; z-index: 1; }
.sar-pillars__head {
max-width: 720px;
margin: 0 auto 3rem;
text-align: center;
}
.sar-pillars__head h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.5rem);
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0.5rem 0 1rem;
}
.sar-pillars__head .section-rule {
margin: 1.2rem auto 0;
background: linear-gradient(90deg, var(--primary-yellow), #FFD86E);
width: 64px;
}
.sar-pillars__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
.sar-pillar {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 20px;
padding: 2rem 1.75rem 2rem;
box-shadow: var(--shadow-sm);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
overflow: hidden;
}
.sar-pillar:hover {
transform: translateY(-4px);
box-shadow: 0 20px 48px -20px rgba(15,20,25,0.18);
border-color: rgba(247,197,45,0.45);
}
.sar-pillar__num {
position: absolute;
top: 1rem;
right: 1.25rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 3rem;
letter-spacing: -0.04em;
color: rgba(15,20,25,0.05);
line-height: 1;
}
.sar-pillar__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--ink);
color: var(--primary-yellow);
margin-bottom: 1.1rem;
}
.sar-pillar h3 {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--ink);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.sar-pillar p {
color: var(--slate);
font-size: 0.98rem;
line-height: 1.65;
margin: 0;
}
.sar-pillar--accent {
background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
border-color: transparent;
color: var(--paper);
}
.sar-pillar--accent .sar-pillar__icon {
background: var(--primary-yellow);
color: var(--ink);
}
.sar-pillar--accent .sar-pillar__num {
color: rgba(255,255,255,0.06);
}
.sar-pillar--accent h3 { color: var(--paper); }
.sar-pillar--accent p { color: rgba(255,255,255,0.78); }
.sar-pillar--accent:hover {
border-color: rgba(247,197,45,0.65);
box-shadow: 0 22px 52px -18px rgba(0,0,0,0.55);
}
/* ── Network section (700+ volunteers, one dispatch, KJ-500) ─── */
.sar-network {
position: relative;
overflow: hidden;
padding: 5.5rem 24px;
/* Lighter mid-dark gradient (ink-soft -> slate) — keeps the "war
room" feel but reads noticeably less heavy against the warm
sections above and below. */
background: linear-gradient(160deg, var(--ink-soft) 0%, var(--slate) 100%);
color: var(--paper);
border-top: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* Topo backdrop set to a much stronger opacity than the lighter
sections — on the dark ink base the topo reads as a chart-room
"war room" feel. */
.sar-network::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/assets/shared/sar-bg-topo-wide.png');
background-size: 460px;
background-repeat: repeat;
background-position: center;
opacity: 0.18;
mix-blend-mode: lighten;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Soft gold glow in the top-right keeps the section visually tied to
the hero + CTA color story. */
.sar-network::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 88% 12%, rgba(247,197,45,0.10) 0%, transparent 45%),
radial-gradient(circle at 8% 88%, rgba(230,57,70,0.06) 0%, transparent 45%);
pointer-events: none;
z-index: 0;
}
.sar-network__container {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 3.5rem;
align-items: center;
}
.sar-network__copy { min-width: 0; }
.sar-network__eyebrow {
color: var(--primary-yellow);
letter-spacing: 0.14em;
}
.sar-network__h2 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0.75rem 0 1.25rem;
color: var(--paper);
}
.sar-network__h2 span {
background: linear-gradient(120deg, #fff3a8 0%, #ffd75c 35%, #f7c52d 65%, #e6a92a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 26px rgba(247,197,45,0.20));
}
.sar-network__lead {
font-size: 1.1rem;
line-height: 1.65;
color: rgba(255,255,255,0.92);
margin-bottom: 1rem;
max-width: 56ch;
}
.sar-network__body {
font-size: 1rem;
line-height: 1.7;
color: rgba(255,255,255,0.72);
margin-bottom: 1.75rem;
max-width: 60ch;
}
.sar-network__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
padding: 1.4rem 0;
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
margin-bottom: 1.75rem;
}
.sar-network__stat {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.sar-network__stat-num {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--primary-yellow);
}
.sar-network__stat-label {
font-size: 0.82rem;
line-height: 1.35;
color: rgba(255,255,255,0.7);
letter-spacing: 0.01em;
}
.sar-network__call {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.85rem 1.3rem;
border-radius: 999px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.20);
color: var(--paper);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.sar-network__call:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(247,197,45,0.6);
transform: translateY(-2px);
}
.sar-network__call svg { color: var(--primary-yellow); }
/* KJ-500 feature card */
.sar-network__feature {
position: relative;
margin: 0;
border-radius: 22px;
overflow: hidden;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 32px 64px -30px rgba(0,0,0,0.55);
}
.sar-network__feature-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.sar-network__feature-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.sar-network__feature:hover .sar-network__feature-media img {
transform: scale(1.04);
}
.sar-network__feature-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(8,12,18,0.75) 100%);
pointer-events: none;
}
.sar-network__feature-chip {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: rgba(247,197,45,0.92);
color: var(--ink);
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.sar-network__feature-cap {
padding: 1.4rem 1.5rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.sar-network__feature-code {
font-family: var(--font-display);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--primary-yellow);
}
.sar-network__feature-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--paper);
}
.sar-network__feature-role {
font-size: 0.92rem;
line-height: 1.6;
color: rgba(255,255,255,0.72);
margin-top: 0.3rem;
}
/* ── NYSDEC certification badge ────────────────────────────── */
.sar-cert {
background: var(--paper-warm);
padding: 4rem 24px;
position: relative;
overflow: hidden;
}
/* Real USGS topo tile (zoom-13 detail level so contour lines and
elevation labels are legible) tiled as the base, with the compass
rose pinned over the center — reads as "this is the chart the
State coordinates against". */
.sar-cert::before {
content: "";
position: absolute;
inset: 0;
background-image:
url('/assets/shared/sar-bg-compass.svg'),
url('/assets/shared/sar-bg-usgs-topo.png');
background-size: 640px, 360px;
background-repeat: no-repeat, repeat;
background-position: center, center;
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.sar-cert::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(250,250,247,0.40) 0%, rgba(250,250,247,0.78) 75%);
pointer-events: none;
z-index: 0;
}
.sar-cert > .container { position: relative; z-index: 1; }
.sar-cert__card {
max-width: 980px;
margin: 0 auto;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 22px;
padding: 2.2rem 2rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 1.75rem;
align-items: center;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.sar-cert__card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--primary-yellow), #E5A300);
}
.sar-cert__seal {
display: inline-flex;
align-items: center;
justify-content: center;
width: 132px;
height: 132px;
flex-shrink: 0;
}
.sar-cert__seal img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 8px 18px rgba(15,20,25,0.22));
}
.sar-cert__body h2 {
font-family: var(--font-display);
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
color: var(--ink);
margin: 0.4rem 0 0.6rem;
line-height: 1.2;
letter-spacing: -0.015em;
}
.sar-cert__body p {
color: var(--slate);
font-size: 1rem;
line-height: 1.7;
margin: 0;
}
/* ── Field gallery (mosaic) ────────────────────────────────── */
.sar-gallery {
background: var(--paper);
padding: 5rem 24px 4rem;
position: relative;
overflow: hidden;
}
/* Wider USGS satellite tile at lower opacity — same "zoom out one
step" feel as moving from the pillars section's detailed sat into
a regional view, with the photo tiles riding on top of it. */
.sar-gallery::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/assets/shared/sar-bg-sat-wide.png');
background-size: 520px;
background-repeat: repeat;
background-position: center;
opacity: 0.32;
pointer-events: none;
z-index: 0;
mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.sar-gallery::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.70) 100%);
pointer-events: none;
z-index: 0;
}
.sar-gallery > .container { position: relative; z-index: 1; }
.sar-gallery__head {
max-width: 720px;
margin: 0 auto 2.5rem;
text-align: center;
}
.sar-gallery__head h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.5rem);
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0.5rem 0 0.85rem;
}
.sar-gallery__head p {
color: var(--slate-soft);
font-size: 1.02rem;
line-height: 1.6;
}
.sar-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 0.85rem;
}
.sar-gallery__tile {
position: relative;
overflow: hidden;
border-radius: 14px;
background: var(--ink);
box-shadow: var(--shadow-sm);
grid-column: span 1;
}
.sar-gallery__tile--wide {
grid-column: span 2;
}
.sar-gallery__tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.4s ease;
filter: saturate(1.02);
}
.sar-gallery__tile::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8,12,18,0.45) 100%);
opacity: 0.65;
transition: opacity 0.3s ease;
pointer-events: none;
}
.sar-gallery__tile:hover img {
transform: scale(1.06);
filter: saturate(1.1);
}
.sar-gallery__tile:hover::after { opacity: 0.25; }
.sar-gallery__more {
text-align: center;
margin-top: 2.5rem;
}
.sar-gallery__more-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--ink);
font-weight: 600;
text-decoration: none;
padding: 0.75rem 1.2rem;
border-bottom: 2px solid var(--primary-yellow);
transition: gap 0.2s ease, color 0.2s ease;
}
.sar-gallery__more-link:hover {
color: var(--primary-yellow);
gap: 0.85rem;
}
/* ── Dual CTA card ─────────────────────────────────────────── */
.sar-cta {
background: var(--paper-warm);
padding: 5rem 24px 6rem;
}
.sar-cta__card {
max-width: 920px;
margin: 0 auto;
background: linear-gradient(155deg, var(--ink) 0%, var(--ink-soft) 100%);
color: var(--paper);
border-radius: 28px;
padding: 3.5rem 2.5rem 3rem;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 32px 80px -32px rgba(15,20,25,0.55);
}
.sar-cta__card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 15%, rgba(247,197,45,0.18) 0%, transparent 45%),
radial-gradient(circle at 8% 85%, rgba(230,57,70,0.12) 0%, transparent 50%);
pointer-events: none;
}
/* Radar sweep texture pinned bottom-right of the dark CTA card,
bleeding off the edge. Now nearly twice as prominent so the search
theme reads at a glance. */
.sar-cta__card::after {
content: "";
position: absolute;
right: -140px;
bottom: -140px;
width: 560px;
height: 560px;
background-image: url('/assets/shared/sar-bg-radar.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.55;
pointer-events: none;
z-index: 0;
animation: sarRadarPulse 6s ease-in-out infinite;
}
@keyframes sarRadarPulse {
0%, 100% { opacity: 0.45; transform: scale(1); }
50% { opacity: 0.62; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.sar-cta__card::after { animation: none; opacity: 0.5; }
}
.sar-cta__card > * { position: relative; z-index: 1; }
.sar-cta__mark {
position: absolute;
top: 1.25rem;
left: 1.5rem;
font-size: 2.2rem;
color: var(--primary-yellow);
opacity: 0.85;
line-height: 1;
}
.sar-cta__eyebrow {
color: var(--primary-yellow);
}
.sar-cta__card h2 {
font-family: var(--font-display);
font-size: clamp(1.9rem, 3.2vw, 2.7rem);
letter-spacing: -0.025em;
line-height: 1.15;
margin: 0.75rem 0 0.85rem;
color: var(--paper);
}
.sar-cta__card p {
max-width: 56ch;
margin: 0 auto 1.75rem;
color: rgba(255,255,255,0.78);
font-size: 1.05rem;
line-height: 1.65;
}
.sar-cta__actions {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.7rem;
margin-bottom: 1.75rem;
}
.sar-cta__btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 1.6rem;
border-radius: 999px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sar-cta__btn--primary {
background: var(--primary-yellow);
color: var(--ink);
box-shadow: 0 14px 38px -14px rgba(247,197,45,0.55);
}
.sar-cta__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 44px -14px rgba(247,197,45,0.70);
background: var(--primary-yellow-light);
}
.sar-cta__btn--ghost {
background: transparent;
color: var(--paper);
border: 1.5px solid rgba(255,255,255,0.35);
}
.sar-cta__btn--ghost:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.6);
transform: translateY(-2px);
}
.sar-cta__phone {
margin-top: 0.5rem;
}
/* ── Tablet ────────────────────────────────────────────────── */
@media (max-width: 980px) {
.sar-gallery__grid {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 180px;
}
/* At this breakpoint we also lose the dedicated "wide" cells —
force them to single span so 3-col packs tightly. */
.sar-gallery__tile--wide { grid-column: span 1; }
.sar-mission__container {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.sar-cert__card {
grid-template-columns: 1fr;
text-align: center;
padding: 2rem 1.5rem;
}
.sar-cert__seal { margin: 0 auto; }
/* Hero collapses to a single column: badge first so the SAR mark
still leads, then the copy below. */
.sar-hero__grid {
grid-template-columns: 1fr;
gap: 1.75rem;
text-align: left;
}
.sar-hero__badge {
order: -1;
justify-self: start;
width: clamp(180px, 38vw, 240px);
}
/* Network section stacks: copy on top, KJ-500 card below. */
.sar-network__container {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
.sar-hero {
padding: 6.5rem 18px 3rem;
min-height: 480px;
}
.sar-hero__asterisk { font-size: 1.8rem; top: 1rem; left: 1rem; }
.sar-hero__badge { width: clamp(150px, 44vw, 200px); margin-bottom: 0.25rem; }
.sar-hero__badge-ring--outer { inset: -14px; }
.sar-cert__seal { width: 108px; height: 108px; }
.sar-hero__h1 { font-size: clamp(2.25rem, 9vw, 3.2rem); max-width: 100%; }
.sar-hero__sub { font-size: 1rem; }
.sar-hero__cta { gap: 0.5rem; }
.sar-hero__call, .sar-hero__join { width: 100%; justify-content: center; padding: 0.95rem 1.1rem; }
.sar-hero__bigmark { font-size: 7rem; right: -0.5rem; bottom: -0.5rem; }
.sar-mission { padding: 3rem 18px; }
.sar-pillars { padding: 3rem 18px; }
.sar-pillar { padding: 1.6rem 1.4rem; }
.sar-pillar__num { font-size: 2.4rem; top: 0.6rem; right: 1rem; }
.sar-cert { padding: 2.5rem 18px; }
.sar-gallery { padding: 3rem 18px 2.5rem; }
.sar-gallery__grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
gap: 0.6rem;
}
/* On mobile, ignore the desktop "wide" mosaic — every tile is a
single square so the 2-col grid packs evenly without leaving
empty cells next to the wide tiles. */
.sar-gallery__tile--wide { grid-column: span 1; }
.sar-cta { padding: 3rem 18px 4rem; }
.sar-cta__card { padding: 2.5rem 1.4rem 2.2rem; border-radius: 22px; }
.sar-cta__btn { width: 100%; justify-content: center; }
.sar-network { padding: 3.5rem 18px; }
.sar-network__stats {
/* Stack the 3 stats vertically on mobile rather than cramming
into a 3-col grid where each number gets clipped. */
grid-template-columns: 1fr;
gap: 1.1rem;
padding: 1.2rem 0;
}
.sar-network__call { width: 100%; justify-content: center; }
.sar-network__feature-cap { padding: 1.2rem 1.2rem 1.4rem; }
}
/* ── Network list link (inline CTA inside .network-list items) ─ */
.network-list__link {
color: var(--primary-yellow);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(247,197,45,0.35);
transition: color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.network-list__link:hover {
color: var(--primary-yellow-light);
border-bottom-color: var(--primary-yellow);
}
/* ── Cross-division gallery ribbon ────────────────────────────
Sits between the news preview and the coverage CTA. Three rows
of blog hero images marquee horizontally — odd rows go left,
even rows go right — at low opacity so the section reads as
ambient texture rather than a primary content block. Hero
images come from /api/gallery-all.json, which aggregates the
image fields from every tenant manifest in the Worker so the
shared JS never names a tenant. */
.gallery-ribbon {
background: var(--paper-cool);
padding: 4.5rem 0 5rem;
overflow: hidden;
position: relative;
}
.gallery-ribbon::before,
.gallery-ribbon::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 140px;
z-index: 2;
pointer-events: none;
}
.gallery-ribbon::before {
left: 0;
background: linear-gradient(90deg, var(--paper-cool) 0%, rgba(248,250,252,0) 100%);
}
.gallery-ribbon::after {
right: 0;
background: linear-gradient(270deg, var(--paper-cool) 0%, rgba(248,250,252,0) 100%);
}
.gallery-ribbon__rows {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.ribbon-row {
display: flex;
width: max-content;
gap: 0.85rem;
animation: ribbonScrollLeft 240s linear infinite;
will-change: transform;
}
.ribbon-row--reverse {
animation-name: ribbonScrollRight;
}
.gallery-ribbon:hover .ribbon-row {
animation-play-state: paused;
}
.ribbon-tile {
flex: 0 0 auto;
width: 230px;
height: 150px;
border-radius: 14px;
overflow: hidden;
background: var(--ink-soft);
box-shadow: var(--shadow-sm);
position: relative;
}
.ribbon-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0.42;
filter: saturate(1.05);
transition: opacity 0.4s ease, filter 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ribbon-tile:hover img {
opacity: 0.95;
transform: scale(1.04);
}
@keyframes ribbonScrollLeft {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes ribbonScrollRight {
from { transform: translate3d(-50%, 0, 0); }
to { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.ribbon-row { animation: none; }
}
@media (max-width: 720px) {
.gallery-ribbon { padding: 3rem 0 3.5rem; }
.gallery-ribbon::before,
.gallery-ribbon::after { width: 60px; }
.ribbon-tile { width: 170px; height: 110px; }
.ribbon-row { animation-duration: 180s; }
}
/* ═══════════════════════════════════════════════════════════════════════
Lost & Found page (cross-tenant)
═══════════════════════════════════════════════════════════════════════ */
.lf-hero {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 7rem 24px 4.5rem;
text-align: center;
background: var(--paper-warm);
border-bottom: 1px solid var(--line);
}
/* Layer 1 — soft brand color washes. */
.lf-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
background:
radial-gradient(ellipse 60% 50% at 18% 0%, rgba(230, 57, 70, 0.13) 0%, transparent 60%),
radial-gradient(ellipse 55% 50% at 88% 100%, rgba(255, 183, 3, 0.22) 0%, transparent 65%),
radial-gradient(ellipse 40% 35% at 50% 100%, rgba(15, 20, 25, 0.06) 0%, transparent 70%);
}
/* Layer 2 — fine dot grid for editorial texture. */
.lf-hero__pattern {
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
background-image:
radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.16) 1.2px, transparent 1.8px);
background-size: 22px 22px;
background-position: 0 0;
mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 30%, transparent 92%);
-webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 50%, #000 30%, transparent 92%);
opacity: 1;
}
/* Layer 2b — thin dashed rule lines stretched horizontally across the
hero, top and bottom, like trim on a vintage notice board. */
.lf-hero__rule {
position: absolute;
left: 6%;
right: 6%;
height: 1px;
background-image: linear-gradient(to right, rgba(15, 20, 25, 0.13) 50%, transparent 0%);
background-size: 10px 1px;
background-repeat: repeat-x;
z-index: -1;
pointer-events: none;
}
.lf-hero__rule--top { top: 1.6rem; }
.lf-hero__rule--bottom { bottom: 1.6rem; }
/* Layer 3 — abstract "search radar" SVG, large and now meaningfully
visible. Off-center right so the H1 sits inside one of its rings.
Slow rotation keeps the scanning metaphor without distracting. */
.lf-hero__radar {
position: absolute;
width: clamp(360px, 62vw, 660px);
height: clamp(360px, 62vw, 660px);
right: -6%;
top: 50%;
transform: translateY(-50%);
color: var(--ink);
opacity: 0.20;
z-index: -1;
pointer-events: none;
animation: lf-radar-spin 70s linear infinite;
}
@keyframes lf-radar-spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}
/* Layer 4 — outlined magnifying glass, opposite corner from the radar. */
.lf-hero__lens {
position: absolute;
width: clamp(130px, 19vw, 210px);
height: clamp(130px, 19vw, 210px);
left: 5%;
bottom: 1.2rem;
color: var(--primary-red);
opacity: 0.32;
z-index: -1;
pointer-events: none;
transform: rotate(-8deg);
}
/* Layer 4b — small abstract compass rose tucked top-left, balances the
lens which sits bottom-left of the radar. */
.lf-hero__compass {
position: absolute;
width: clamp(60px, 9vw, 100px);
height: clamp(60px, 9vw, 100px);
top: 3rem;
right: 10%;
color: var(--ink);
opacity: 0.32;
z-index: -1;
pointer-events: none;
transform: rotate(18deg);
}
/* Layer 5 — dashed wave at the very bottom, runs across the section
like a search signal trace. */
.lf-hero__waves {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 88px;
color: var(--primary-yellow);
opacity: 0.85;
z-index: -1;
pointer-events: none;
}
/* Scattered "ping" dots — radar contacts. */
.lf-hero__ping {
position: absolute;
border-radius: 50%;
background: var(--primary-red);
z-index: -1;
pointer-events: none;
box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.12);
}
.lf-hero__ping--1 { width: 8px; height: 8px; top: 22%; left: 14%; opacity: 0.55; }
.lf-hero__ping--2 { width: 6px; height: 6px; top: 38%; left: 22%; opacity: 0.45; background: var(--ink); box-shadow: 0 0 0 4px rgba(15,20,25,.10); }
.lf-hero__ping--3 { width: 10px; height: 10px; bottom: 28%; right: 18%; opacity: 0.45; background: var(--primary-yellow); box-shadow: 0 0 0 6px rgba(255,183,3,.18); }
.lf-hero__ping--4 { width: 5px; height: 5px; top: 18%; right: 28%; opacity: 0.55; background: var(--ink); box-shadow: 0 0 0 3px rgba(15,20,25,.10); }
.lf-hero__ping--5 { width: 7px; height: 7px; bottom: 40%; left: 38%; opacity: 0.5; background: var(--primary-red); box-shadow: 0 0 0 5px rgba(230,57,70,.10); }
/* Coordinate-tick plus marks like a map. */
.lf-hero__plus {
position: absolute;
z-index: -1;
pointer-events: none;
font-family: var(--font-sans);
color: var(--ink);
opacity: 0.32;
font-weight: 300;
line-height: 1;
user-select: none;
}
.lf-hero__plus--1 { top: 5rem; left: 12%; font-size: 1.5rem; }
.lf-hero__plus--2 { bottom: 5rem; right: 12%; font-size: 1.2rem; opacity: 0.28; }
.lf-hero__plus--3 { top: 9rem; right: 26%; font-size: 1.1rem; opacity: 0.3; }
.lf-hero .container {
position: relative;
max-width: 880px;
z-index: 1;
}
.lf-hero__asterisk {
position: absolute;
color: var(--primary-yellow);
pointer-events: none;
}
.lf-hero__asterisk--a { top: 2.6rem; left: 8%; font-size: 2.2rem; opacity: 0.6; color: var(--primary-red); }
.lf-hero__asterisk--b { top: 3rem; right: 9%; font-size: 3.4rem; opacity: 0.55; }
.lf-hero__asterisk--c { bottom: 3rem; left: 22%; font-size: 1.6rem; opacity: 0.5; color: var(--ink); }
.lf-hero__eyebrow {
color: var(--primary-red);
position: relative;
display: inline-block;
}
.lf-hero__eyebrow::before,
.lf-hero__eyebrow::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin: 0 .6rem;
opacity: 0.5;
}
.lf-hero__h1 {
font-family: var(--font-display);
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 800;
line-height: 1;
letter-spacing: -0.035em;
margin: 0.6rem auto 1.1rem;
color: var(--primary-red);
}
.lf-hero__amp {
font-style: italic;
font-weight: 600;
color: var(--ink);
margin: 0 0.05em;
opacity: 0.65;
}
.lf-hero__h1-found {
color: var(--ink);
}
.lf-hero__lead {
max-width: 560px;
margin: 0 auto 1.8rem;
color: var(--slate);
font-size: 1.05rem;
line-height: 1.55;
}
.lf-hero__actions {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 0.75rem;
}
.lf-hero__cta {
padding: 0.95rem 1.6rem;
font-size: 1rem;
border-radius: var(--radius-pill);
}
.lf-hero__call {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
text-decoration: none;
padding: 0.6rem 1.1rem 0.65rem;
border: 1px solid var(--ink);
border-radius: var(--radius-pill);
color: var(--ink);
background: var(--paper);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
line-height: 1.15;
}
.lf-hero__call:hover {
background: var(--ink);
color: var(--paper);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.lf-hero__call-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
opacity: 0.7;
}
.lf-hero__call-num {
font-weight: 700;
font-size: 1.05rem;
font-family: var(--font-display);
letter-spacing: -0.005em;
}
@media (prefers-reduced-motion: reduce) {
.lf-hero__radar { animation: none; }
}
@media (max-width: 720px) {
.lf-hero { padding: 5rem 20px 4rem; }
.lf-hero__lead { font-size: 1rem; }
.lf-hero__rule { left: 5%; right: 5%; }
.lf-hero__rule--top { top: 1.1rem; }
.lf-hero__rule--bottom { bottom: 1.1rem; }
.lf-hero__asterisk--a { left: 5%; top: 1.8rem; font-size: 1.8rem; }
.lf-hero__asterisk--b { right: 5%; top: 1.5rem; font-size: 2.4rem; }
.lf-hero__asterisk--c { display: none; }
.lf-hero__radar { right: -30%; opacity: 0.2; }
.lf-hero__lens { left: 4%; bottom: 4rem; opacity: 0.22; }
.lf-hero__compass { display: none; }
.lf-hero__waves { height: 56px; }
.lf-hero__ping--2,
.lf-hero__ping--3,
.lf-hero__ping--5 { display: none; }
.lf-hero__plus--3 { display: none; }
.lf-hero__plus--1 { top: 3.5rem; left: 6%; }
.lf-hero__plus--2 { bottom: 3.5rem; right: 6%; }
.lf-hero__eyebrow::before,
.lf-hero__eyebrow::after { width: 14px; margin: 0 .35rem; }
}
.lf-board {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 3.5rem 0 3.5rem;
background: var(--paper);
}
/* Faint dot grid extends the hero texture into the board, anchored
only at the top so the cards have a clean field below. */
.lf-board::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.08) 1px, transparent 1.5px);
background-size: 26px 26px;
mask-image: linear-gradient(to bottom, #000 0%, transparent 30%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 30%);
}
.lf-board > .container { position: relative; z-index: 1; }
.lf-board__corner {
position: absolute;
width: 64px;
height: 64px;
border: 1px solid var(--ink);
opacity: 0.18;
pointer-events: none;
}
.lf-board__corner--tl {
top: 1.4rem;
left: 1.4rem;
border-right: 0;
border-bottom: 0;
}
.lf-board__corner--tr {
top: 1.4rem;
right: 1.4rem;
border-left: 0;
border-bottom: 0;
}
.lf-board__head {
text-align: center;
margin: 0 auto 1.8rem;
max-width: 680px;
}
.lf-board__eyebrow {
color: var(--primary-red);
display: inline-block;
position: relative;
}
.lf-board__eyebrow::before,
.lf-board__eyebrow::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin: 0 .6rem;
opacity: 0.5;
}
.lf-board__title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.4vw, 2rem);
font-weight: 700;
margin: 0.5rem 0 0.7rem;
color: var(--ink);
letter-spacing: -0.015em;
}
.lf-board__sub {
color: var(--slate);
font-size: 0.98rem;
line-height: 1.55;
margin: 0;
}
/* Section divider — thin dashed line flanked by a centered asterisk. */
.lf-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem 24px;
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.lf-divider__line {
flex: 1 1 0;
max-width: 280px;
height: 1px;
background-image: linear-gradient(to right, var(--slate-soft) 50%, transparent 0%);
background-size: 8px 1px;
background-repeat: repeat-x;
opacity: 0.5;
}
.lf-divider__mark {
font-family: var(--font-display);
color: var(--primary-yellow);
font-size: 1.4rem;
opacity: 0.85;
}
.lf-toolbar {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 1rem 1.25rem;
margin-bottom: 1.6rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--line);
}
.lf-tabs {
display: inline-flex;
background: var(--paper-cool);
border-radius: var(--radius-pill);
padding: 4px;
gap: 2px;
}
.lf-tab {
appearance: none;
border: 0;
background: transparent;
color: var(--slate);
font: inherit;
font-weight: 600;
padding: 0.55rem 1.1rem;
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.lf-tab:hover { color: var(--ink); }
.lf-tab.is-active {
background: var(--ink);
color: #fff;
}
.lf-filters {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1rem;
align-items: flex-end;
}
.lf-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
}
.lf-field--inline {
min-width: 220px;
flex: 1 1 220px;
}
.lf-field__label {
font-size: 0.78rem;
color: var(--slate-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.lf-field__hint {
font-size: 0.8rem;
color: var(--slate-soft);
margin-top: 0.2rem;
}
.lf-req { color: var(--primary-red); }
.lf-field select,
.lf-field input[type="text"],
.lf-field input[type="tel"],
.lf-field input[type="date"],
.lf-field input[type="search"],
.lf-field input[type="file"],
.lf-field textarea {
appearance: none;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.65rem 0.8rem;
font: inherit;
color: var(--ink);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lf-field select:focus,
.lf-field input:focus,
.lf-field textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(15, 20, 25, 0.08);
}
.lf-field textarea { resize: vertical; min-height: 90px; }
.lf-status {
color: var(--slate-soft);
font-size: 0.92rem;
margin-bottom: 0.6rem;
min-height: 1.2em;
}
.lf-empty {
color: var(--slate-soft);
text-align: center;
padding: 2.5rem 1rem;
background: var(--paper-cool);
border-radius: var(--radius-md);
margin: 1rem 0;
}
.lf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
}
.lf-card {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* Thin colored top stripe — kind-specific. */
.lf-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--ink);
z-index: 2;
opacity: 0.85;
}
.lf-card--lost::before { background: var(--primary-red); }
.lf-card--found::before { background: var(--primary-yellow); }
/* Faint editorial corner asterisk in the bottom-right. */
.lf-card::after {
content: "✷";
position: absolute;
bottom: 0.4rem;
right: 0.65rem;
font-family: var(--font-display);
color: var(--slate-soft);
opacity: 0.18;
font-size: 0.95rem;
pointer-events: none;
}
.lf-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--slate-soft);
}
.lf-card__media {
aspect-ratio: 4 / 3;
background: var(--paper-cool);
overflow: hidden;
}
.lf-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lf-card__media--placeholder {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
color: var(--slate-soft);
letter-spacing: 0.04em;
background:
repeating-linear-gradient(45deg,
var(--paper-cool),
var(--paper-cool) 10px,
var(--paper-warm) 10px,
var(--paper-warm) 20px);
}
.lf-card__body {
padding: 1rem 1.1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex: 1;
}
.lf-badge {
align-self: flex-start;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.25rem 0.55rem;
border-radius: var(--radius-pill);
}
.lf-badge--lost {
background: rgba(230, 57, 70, 0.1);
color: var(--primary-red-darker);
}
.lf-badge--found {
background: rgba(255, 183, 3, 0.18);
color: #7A4A00;
}
.lf-badge--resolved {
background: rgba(15, 20, 25, 0.08);
color: var(--slate);
}
.lf-card__title {
font-family: var(--font-display);
font-size: 1.1rem;
line-height: 1.25;
color: var(--ink);
margin: 0;
}
.lf-card__meta {
font-size: 0.85rem;
color: var(--slate-soft);
margin: 0;
}
.lf-card__desc {
font-size: 0.92rem;
color: var(--slate);
line-height: 1.45;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lf-card__actions {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-top: 0.6rem;
border-top: 1px solid var(--line-soft);
}
.lf-card__call {
flex: 1 1 auto;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink);
text-decoration: none;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-sm);
background: var(--paper-cool);
text-align: center;
}
.lf-card__call:hover { background: var(--line); }
.lf-card__claim {
flex: 0 0 auto;
appearance: none;
border: 0;
background: var(--ink);
color: #fff;
font: inherit;
font-weight: 600;
font-size: 0.88rem;
padding: 0.5rem 0.9rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s ease;
}
.lf-card__claim:hover { background: var(--ink-soft); }
/* Resolved cards: muted treatment — same shape as active cards, no
actions, kind stripe becomes ink, image is desaturated. */
.lf-card--resolved {
background: var(--paper-cool);
box-shadow: var(--shadow-xs);
}
.lf-card--resolved::before { background: var(--slate-soft); opacity: 0.6; }
.lf-card--resolved .lf-card__media img { filter: grayscale(0.4) opacity(0.85); }
.lf-card--resolved .lf-card__title { color: var(--slate); }
.lf-card--resolved .lf-card__desc { color: var(--slate-soft); }
.lf-card--resolved:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* "Recently reunited" section */
.lf-resolved {
position: relative;
overflow: hidden;
padding: 3rem 0 4rem;
background: var(--paper);
border-top: 1px solid var(--line);
}
.lf-resolved__head {
text-align: center;
margin: 0 auto 1.6rem;
max-width: 640px;
}
.lf-resolved__eyebrow {
color: var(--slate);
display: inline-block;
position: relative;
}
.lf-resolved__eyebrow::before,
.lf-resolved__eyebrow::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin: 0 .6rem;
opacity: 0.4;
}
.lf-resolved__title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 3.2vw, 1.9rem);
font-weight: 700;
margin: 0.5rem 0 0.7rem;
color: var(--ink);
letter-spacing: -0.015em;
}
.lf-resolved__sub {
color: var(--slate);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
/* Submission form */
.lf-submit {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 4rem 0 5.5rem;
background: var(--paper-warm);
}
/* Brand color wash mirroring the hero — kept low so the form stays readable. */
.lf-submit::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background:
radial-gradient(ellipse 60% 50% at 12% 0%, rgba(255, 183, 3, 0.16) 0%, transparent 60%),
radial-gradient(ellipse 50% 45% at 90% 100%, rgba(230, 57, 70, 0.08) 0%, transparent 65%);
}
/* Same dot grid as the hero, masked diagonally so it concentrates in
the upper-left and gives the panel something to sit against. */
.lf-submit::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(circle at 1px 1px, rgba(15, 20, 25, 0.12) 1px, transparent 1.5px);
background-size: 22px 22px;
mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
-webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 55%);
opacity: 0.85;
}
.lf-submit__deco {
position: absolute;
pointer-events: none;
z-index: -1;
}
.lf-submit__deco--tl {
top: 2rem;
left: 6%;
width: 90px;
height: 90px;
border: 1px solid var(--ink);
border-right: 0;
border-bottom: 0;
opacity: 0.2;
}
.lf-submit__deco--br {
bottom: 2.5rem;
right: 6%;
width: 110px;
height: 110px;
border: 1px solid var(--primary-red);
border-left: 0;
border-top: 0;
opacity: 0.3;
}
.lf-submit__head {
max-width: 720px;
margin: 0 auto 1.8rem;
text-align: center;
}
.lf-submit__eyebrow {
color: var(--primary-red);
display: inline-block;
position: relative;
}
.lf-submit__eyebrow::before,
.lf-submit__eyebrow::after {
content: "";
display: inline-block;
width: 22px;
height: 1px;
background: currentColor;
vertical-align: middle;
margin: 0 .6rem;
opacity: 0.5;
}
.lf-submit__head h2 {
font-family: var(--font-display);
font-size: clamp(1.7rem, 4.5vw, 2.4rem);
margin: 0.5rem 0 0.9rem;
color: var(--ink);
letter-spacing: -0.015em;
}
.lf-submit__head p {
color: var(--slate);
font-size: 0.98rem;
line-height: 1.55;
}
.lf-form {
position: relative;
max-width: 720px;
margin: 0 auto;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 1.8rem 1.8rem 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
box-shadow: var(--shadow-md);
}
/* Top brand stripe on the form panel to tie it back to the cards. */
.lf-form::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(to right, var(--primary-red) 0%, var(--primary-red) 35%, var(--primary-yellow) 35%, var(--primary-yellow) 100%);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lf-form__group {
border: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lf-form__group legend {
font-size: 0.78rem;
color: var(--slate-soft);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.lf-kindpick {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.lf-kindpick label {
flex: 1 1 200px;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 0.9rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
background: var(--paper-cool);
font-weight: 500;
}
.lf-kindpick label:has(input:checked) {
border-color: var(--ink);
background: var(--paper);
}
.lf-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.lf-form__notice {
font-size: 0.85rem;
color: var(--slate-soft);
background: var(--paper-cool);
border-radius: var(--radius-sm);
padding: 0.7rem 0.9rem;
line-height: 1.5;
margin: 0;
}
.lf-form__actions {
display: flex;
justify-content: flex-start;
gap: 0.6rem;
margin-top: 0.2rem;
}
.lf-result {
font-size: 0.9rem;
min-height: 1.2em;
}
.lf-result--ok {
color: #0a6b3a;
background: rgba(16, 185, 129, 0.08);
border-radius: var(--radius-sm);
padding: 0.6rem 0.8rem;
}
.lf-result--err {
color: var(--primary-red-darker);
background: rgba(230, 57, 70, 0.08);
border-radius: var(--radius-sm);
padding: 0.6rem 0.8rem;
}
/* Claim dialog */
.lf-dialog {
border: 0;
border-radius: var(--radius-lg);
padding: 0;
max-width: 500px;
width: calc(100% - 2rem);
box-shadow: var(--shadow-xl);
background: var(--paper);
}
.lf-dialog::backdrop {
background: rgba(15, 20, 25, 0.55);
}
.lf-dialog .lf-form {
border: 0;
box-shadow: none;
padding: 1.4rem 1.5rem 1.5rem;
background: transparent;
margin: 0;
max-width: none;
}
@media (max-width: 720px) {
.lf-toolbar {
flex-direction: column;
align-items: stretch;
}
.lf-filters { flex-direction: column; align-items: stretch; }
.lf-card__actions { flex-direction: column; }
.lf-card__claim { width: 100%; }
}
/* ============================================================
FLORIDA SUNSET HERO — tenant-scoped via [data-tenant="fl"]
------------------------------------------------------------
A warm, animated sunset treatment + decorative palm/sun scene
for the Florida division's landing page only. Everything below
is gated under [data-tenant="fl"] so KJ / Rockland / Catskills
/ Melbourne are visually untouched. Apple-style intent: bold
but minimal, motion that frames the content rather than fights
it. All animation is disabled under prefers-reduced-motion, and
the parallax (initFloridaHero in script.js) no-ops there too.
Contains no tenant strings — only the slug + colour values.
============================================================ */
/* The decorative scene markup ships in shared index.html but is
hidden on every division except Florida. */
.hero-scene { display: none; }
[data-tenant="fl"] .hero-scene--fl { display: block; }
/* Florida hero fills exactly one viewport so the whole scene reads at a
glance; the vehicle hugs the very bottom edge. */
[data-tenant="fl"] .hero {
min-height: 100svh;
padding-top: 7.5rem;
padding-bottom: 0;
}
/* Replace the shared photo background with an animated sunset sky. */
[data-tenant="fl"] .hero::before {
background: linear-gradient(
165deg,
#1d0b3a 0%,
#4a1a5c 22%,
#8d2f6d 40%,
#d9476a 58%,
#ff7e5f 78%,
#ffc56b 100%
);
background-size: 200% 200%;
animation: fl-sky 24s ease-in-out infinite;
}
/* Lighten + warm the overlay so the sunset reads, while keeping the
left side (where the editorial copy sits) dark enough for contrast.
The editorial .hero::after carries !important, so this must too. */
[data-tenant="fl"] .hero::after {
background:
linear-gradient(100deg,
rgba(18,6,38,0.62) 0%,
rgba(18,6,38,0.34) 40%,
rgba(18,6,38,0.06) 70%,
rgba(255,150,90,0.10) 100%),
radial-gradient(120% 80% at 80% 6%,
rgba(255,205,120,0.30) 0%, transparent 55%) !important;
}
/* Sunset palette for the headline accent + the warm rule. */
[data-tenant="fl"] .hero-content--editorial h1 .accent {
background: linear-gradient(115deg, #ffe08a 0%, #ff9d5c 46%, #ff5f8d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-tenant="fl"] .hero-rule {
background: linear-gradient(90deg, #ff5f8d, #ffc56b);
}
/* Gentle entrance for the copy — staggered rise on load. */
[data-tenant="fl"] .hero-content--editorial > * {
animation: fl-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[data-tenant="fl"] .hero-eyebrow { animation-delay: 0.05s; }
[data-tenant="fl"] .hero-content--editorial h1 { animation-delay: 0.14s; }
[data-tenant="fl"] .hero-lead { animation-delay: 0.24s; }
[data-tenant="fl"] .hero-rule { animation-delay: 0.32s; }
[data-tenant="fl"] .hero-actions { animation-delay: 0.40s; }
/* ── Scene layers ─────────────────────────────────────────── */
[data-tenant="fl"] .hero-scene {
position: absolute;
inset: 0;
/* z-index:0 keeps the scene ABOVE the dark ::after overlay (-1) and
the ::before sky (-2), but still below .hero-content (z-index:auto,
later in DOM) so the copy stays on top and readable. */
z-index: 0;
pointer-events: none;
overflow: hidden;
}
[data-tenant="fl"] .hero-scene__sun {
position: absolute;
top: 12%;
right: 11%;
width: clamp(150px, 22vw, 320px);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle,
#fff7e6 0%, #ffe49a 34%, #ff9d5c 66%, rgba(255,157,92,0) 70%);
filter: drop-shadow(0 0 70px rgba(255,196,110,0.6));
animation: fl-sun 7.5s ease-in-out infinite;
will-change: transform;
}
[data-tenant="fl"] .hero-scene__glow {
position: absolute;
inset: 0;
background: radial-gradient(58% 50% at 80% 20%,
rgba(255,206,128,0.28) 0%, transparent 62%);
transform: translateY(var(--py, 0));
}
[data-tenant="fl"] .hero-scene__horizon {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 34%;
background: linear-gradient(180deg,
transparent 0%, rgba(255,140,95,0.10) 55%, rgba(255,170,110,0.22) 100%);
transform: translateY(var(--py, 0));
}
[data-tenant="fl"] .hero-scene__palm {
position: absolute;
bottom: -2%;
color: #190a30; /* dark silhouette against the sky */
opacity: 0.92;
transform-origin: 50% 100%;
will-change: transform;
}
[data-tenant="fl"] .hero-scene__palm svg { display: block; width: 100%; height: auto; }
[data-tenant="fl"] .hero-scene__palm--right {
right: -3%;
bottom: -1%;
width: clamp(300px, 44vw, 580px); /* taller — the crown rises higher */
animation: fl-sway 9s ease-in-out infinite;
}
[data-tenant="fl"] .hero-scene__palm--left {
left: -6%;
bottom: -1%;
width: clamp(210px, 32vw, 420px);
opacity: 0.8;
transform: scaleX(-1); /* mirror so the two frame inward */
animation: fl-sway 11s ease-in-out infinite reverse;
}
[data-tenant="fl"] .hero-scene__asterisk {
position: absolute;
color: rgba(255,224,160,0.7);
font-size: clamp(1rem, 2vw, 1.8rem);
text-shadow: 0 0 20px rgba(255,200,120,0.5);
animation: fl-float 8s ease-in-out infinite;
will-change: transform;
}
[data-tenant="fl"] .hero-scene__asterisk--a { top: 24%; left: 18%; }
[data-tenant="fl"] .hero-scene__asterisk--b { top: 38%; right: 30%; font-size: clamp(0.8rem, 1.4vw, 1.2rem); animation-delay: 1.6s; }
/* The cut-out Chavivim vehicle — drives left→right across the hero as you
scroll. The span owns the horizontal travel (--vx, driven by
initFloridaHero from scroll progress); the inner img idles with its own
gentle bob. Two elements, two transforms, so the drive and the bob
compose instead of fighting. It fades in fast on load (no delay) so the
motion reads immediately. */
[data-tenant="fl"] .hero-scene__vehicle {
position: absolute;
left: 0;
/* Wheels sit just below the hero's bottom edge; .hero-scene's
overflow:hidden clips them so the next section grounds the vehicle
instead of it floating. */
bottom: -4%;
width: clamp(240px, 40vw, 520px);
transform: translateX(var(--vx, -12vw));
opacity: 0;
animation: fl-vehicle-fade 0.5s ease-out 0.1s forwards;
will-change: transform;
}
[data-tenant="fl"] .hero-scene__vehicle-img {
display: block;
width: 100%;
height: auto;
/* Tighter shadow — it's planted at the road now, not hovering. */
filter: drop-shadow(0 8px 14px rgba(10,4,24,0.4));
animation: fl-vehicle-bob 2.6s ease-in-out infinite;
}
/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fl-sky {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
/* Each keyframe composes the JS-driven parallax offset (--py, set by
initFloridaHero) with its own motion, so scroll parallax and the
ambient animation coexist on the same transform. */
@keyframes fl-sun {
0%, 100% { transform: translateY(var(--py, 0)) scale(1); filter: drop-shadow(0 0 70px rgba(255,196,110,0.6)); }
50% { transform: translateY(calc(var(--py, 0px) - 8px)) scale(1.03); filter: drop-shadow(0 0 95px rgba(255,196,110,0.78)); }
}
@keyframes fl-sway {
0%, 100% { transform: translateY(var(--py, 0)) rotate(-1.6deg); }
50% { transform: translateY(var(--py, 0)) rotate(1.6deg); }
}
/* The mirrored left palm keeps its scaleX(-1) while swaying. */
[data-tenant="fl"] .hero-scene__palm--left { animation-name: fl-sway-left; }
@keyframes fl-sway-left {
0%, 100% { transform: translateY(var(--py, 0)) scaleX(-1) rotate(-1.6deg); }
50% { transform: translateY(var(--py, 0)) scaleX(-1) rotate(1.6deg); }
}
@keyframes fl-float {
0%, 100% { transform: translateY(var(--py, 0)); }
50% { transform: translateY(calc(var(--py, 0px) - 14px)); }
}
@keyframes fl-rise {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
/* Vehicle just fades in on load; its horizontal travel is scroll-driven
via --vx (set by initFloridaHero) on the span's transform, so it isn't
animated here. */
@keyframes fl-vehicle-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Idle bob lives on the inner , independent of the span's --vx drive. */
@keyframes fl-vehicle-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Mobile: tuck the left palm away, calm the scale, shrink + drop the
vehicle so it frames the bottom without crowding the copy. */
@media (max-width: 720px) {
[data-tenant="fl"] .hero { min-height: 100svh; padding-top: 6.5rem; }
[data-tenant="fl"] .hero-scene__palm--left { display: none; }
[data-tenant="fl"] .hero-scene__sun { top: 9%; right: 8%; }
[data-tenant="fl"] .hero-scene__vehicle { width: clamp(220px, 72vw, 360px); bottom: -3%; }
}
/* Respect reduced-motion: hold every Florida animation on its first
frame. The JS parallax checks the same media query and bails. */
@media (prefers-reduced-motion: reduce) {
[data-tenant="fl"] .hero::before,
[data-tenant="fl"] .hero-scene__sun,
[data-tenant="fl"] .hero-scene__palm,
[data-tenant="fl"] .hero-scene__asterisk,
[data-tenant="fl"] .hero-scene__vehicle,
[data-tenant="fl"] .hero-scene__vehicle-img,
[data-tenant="fl"] .hero-content--editorial > * {
animation: none;
}
[data-tenant="fl"] .hero-content--editorial > * { opacity: 1; transform: none; }
/* No scroll-driven travel under reduced-motion — park the vehicle
statically at the right, fully visible. */
[data-tenant="fl"] .hero-scene__vehicle { opacity: 1; left: auto; right: 2%; transform: none; }
}
/* ============================================================
MULTI-REGION HERO CTAs (rendered only for tenants with `regions`,
e.g. Florida = South Florida + Tampa Bay). Slim phone pills + one
subtle donate line, so two regions stay compact and the hero fits a
single viewport. Generic selectors — any future multi-region division
gets the same treatment.
============================================================ */
.hero-regions {
display: flex;
flex-direction: column;
gap: 0.65rem;
width: 100%;
max-width: 560px;
}
.hero-regions__label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.7);
}
.hero-regions__pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.region-pill {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.55rem 1rem 0.55rem 0.6rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
color: var(--paper);
text-decoration: none;
transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.region-pill:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.4);
transform: translateY(-2px);
}
.region-pill__icon {
display: inline-flex;
width: 32px; height: 32px;
align-items: center; justify-content: center;
border-radius: 50%;
background: var(--primary-red);
color: #fff;
flex-shrink: 0;
}
.region-pill__icon svg { width: 16px; height: 16px; }
.region-pill__text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.region-pill__place {
font-size: 0.64rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 2px;
}
.region-pill__num { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.hero-regions__donate { margin: 0.1rem 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.58); }
.hero-regions__donate a { color: rgba(255, 255, 255, 0.9); text-decoration: underline; text-underline-offset: 2px; }
.hero-regions__donate a:hover { color: #fff; }
@media (max-width: 720px) {
.hero-regions__pills { flex-direction: column; }
.region-pill { width: 100%; }
}