/* =========================================================================
arcv-theme.css — Ants & Rodents Chula Vista design layer
-------------------------------------------------------------------------
Loaded LAST in , after the staircase theme sheets, so it wins on
equal specificity without needing !important everywhere.
Two jobs:
1. Re-skin the existing staircase section boxes (.cherry-hero,
.kristina-cta-box, .serena-faq-box, .zaramax-footer, ...) into the
warm orange / near-black palette.
2. Provide our own new components, all namespaced `arcv-`
(Ants Rodents Chula Vista), for the pieces the theme has no box for:
hero quote card, trust bar, sticky call rail, in-content CTA bands,
mobile call bar.
========================================================================= */
/* ---------- 1. Tokens -------------------------------------------------- */
:root {
/* Brand */
--arcv-orange: #e8a33d;
--arcv-orange-hi: #f0b45c;
--arcv-orange-hover: #d4872a;
--arcv-orange-soft: #f7e6c8;
--arcv-gold: #f5c451;
/* Dark ground */
--arcv-ink: #17100a; /* hero / footer base */
--arcv-ink-soft: #241a10; /* hero glow centre */
--arcv-ink-band: #1d1610; /* in-content CTA band */
/* Text */
--arcv-text: #2f2a25;
--arcv-text-muted: #6b6259;
--arcv-heading: #1c1712;
--arcv-on-dark: #f6f1e9;
--arcv-on-dark-muted: #c9bfb1;
/* Surfaces */
--arcv-cream: #fdfcfa;
--arcv-surface: #ffffff;
--arcv-surface-alt: #f7f4ef;
--arcv-line: #e7e0d5;
/* Feedback */
--arcv-live: #2fa84f;
/* Type */
--arcv-font-display: "Bitter", Georgia, "Times New Roman", serif;
--arcv-font-ui: "Jost", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
/* Shape */
--arcv-radius: 14px;
--arcv-radius-sm: 9px;
--arcv-shadow: 0 18px 40px -22px rgba(23, 16, 10, .45);
--arcv-shadow-card: 0 22px 55px -28px rgba(23, 16, 10, .55);
/* Layout */
--arcv-maxw: 1180px;
--arcv-rail-w: 352px;
--arcv-header-h: 74px;
}
/* ---------- 2. Base ---------------------------------------------------- */
body {
font-family: var(--arcv-font-ui);
color: var(--arcv-text);
background: var(--arcv-cream);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--arcv-font-ui);
color: var(--arcv-heading);
letter-spacing: -.012em;
}
a { color: var(--arcv-orange-hover); }
a:hover { color: var(--arcv-orange); }
/* Body copy inside the long-form content boxes. The staircase export drops raw
h2/h3/p/ul into these with no typographic scale of their own. */
.arcv-prose h2 {
font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.1rem);
line-height: 1.2;
margin: 2.4em 0 .6em;
font-weight: 600;
}
.arcv-prose h2:first-child { margin-top: 0; }
.arcv-prose h3 {
font-size: clamp(1.18rem, 1rem + .6vw, 1.36rem);
line-height: 1.3;
margin: 1.9em 0 .45em;
font-weight: 600;
}
.arcv-prose h4 {
font-size: 1.04rem;
margin: 1.5em 0 .35em;
font-weight: 600;
color: var(--arcv-text);
}
.arcv-prose p,
.arcv-prose li {
font-size: 1.0rem;
line-height: 1.72;
color: var(--arcv-text);
}
.arcv-prose p { margin: 0 0 1.05em; }
.arcv-prose ul,
.arcv-prose ol { margin: 0 0 1.3em; padding-left: 1.25em; }
.arcv-prose li { margin-bottom: .45em; }
.arcv-prose ul { list-style: disc; }
.arcv-prose ol { list-style: decimal; }
.arcv-prose li::marker { color: var(--arcv-orange); }
.arcv-prose strong { color: var(--arcv-heading); font-weight: 600; }
.arcv-prose img {
max-width: 100%;
height: auto;
border-radius: var(--arcv-radius-sm);
margin: .4em 0 1.4em;
}
/* ---------- 3. Header -------------------------------------------------- */
/* NB: the theme pins this header with `position: fixed` and js/navigation.js
adds a matching padding-top to . Do not change the positioning here —
overriding it to `sticky` puts the header back in flow while the JS padding
stays, which opens a header-height gap above it. Presentation only. */
.site-header.header1 {
background: var(--arcv-surface);
border-bottom: 1px solid var(--arcv-line);
box-shadow: 0 2px 10px rgba(23, 16, 10, .07);
}
.site-header.header1 .header-inner {
min-height: var(--arcv-header-h);
gap: 24px;
}
.site-header.header1 .staircase-logo {
max-height: 46px;
width: auto;
max-width: 100%;
object-fit: contain;
}
/* On a narrow header the wordmark gets cut off mid-word. The clipping parent is
.header-logo-area (max-width: 50%, overflow: hidden), so the cap has to be
container-relative — a viewport cap like 40vw still overflows a box narrower
than that and the theme clips the overflow. */
@media (max-width: 560px) {
.site-header.header1 .header-logo-area { overflow: visible; }
.site-header.header1 .staircase-logo {
max-width: 100%;
max-height: 36px;
height: auto;
}
}
/* Nav links */
.site-header.header1 .silkweaver-menu > li > a,
.site-header.header1 .silkweaver-parent-button {
font-family: var(--arcv-font-ui);
font-size: .98rem;
font-weight: 500;
color: var(--arcv-heading);
background: transparent;
border: 0;
padding: 10px 12px;
cursor: pointer;
letter-spacing: .005em;
}
.site-header.header1 .silkweaver-menu > li > a:hover,
.site-header.header1 .silkweaver-parent-button:hover,
.site-header.header1 .silkweaver-parent-button[aria-expanded="true"] {
color: var(--arcv-orange-hover);
}
.site-header.header1 .silkweaver-dropdown-menu {
background: var(--arcv-surface);
border: 1px solid var(--arcv-line);
border-radius: var(--arcv-radius-sm);
box-shadow: var(--arcv-shadow);
padding: 8px;
min-width: 236px;
}
.site-header.header1 .silkweaver-dropdown-menu a {
display: block;
padding: 9px 12px;
border-radius: 7px;
font-size: .94rem;
color: var(--arcv-text);
text-decoration: none;
}
.site-header.header1 .silkweaver-dropdown-menu a:hover {
background: var(--arcv-surface-alt);
color: var(--arcv-orange-hover);
}
/* the "› All services" / "› All neighborhoods" tail links */
.site-header.header1 .silkweaver-dropdown-menu li.arcv-menu-all {
border-top: 1px solid var(--arcv-line);
margin-top: 6px;
padding-top: 6px;
}
.site-header.header1 .silkweaver-dropdown-menu li.arcv-menu-all a {
font-weight: 600;
color: var(--arcv-orange-hover);
font-size: .9rem;
}
/* Header phone pill */
.site-header.header1 .header-phone-button {
background: var(--arcv-orange);
color: #fff;
border-radius: 999px;
padding: 12px 22px;
font-weight: 600;
font-size: 1rem;
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
box-shadow: 0 8px 18px -10px rgba(212, 135, 42, .9);
transition: background .18s ease, transform .18s ease;
white-space: nowrap;
}
.site-header.header1 .header-phone-button:hover {
background: var(--arcv-orange-hover);
color: #fff;
transform: translateY(-1px);
}
/* ---------- 4. Hero ---------------------------------------------------- */
.arcv-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(120% 90% at 50% 108%, #4a3312 0%, rgba(74, 51, 18, 0) 62%),
linear-gradient(180deg, var(--arcv-ink) 0%, var(--arcv-ink-soft) 100%);
color: var(--arcv-on-dark);
padding: clamp(44px, 6vw, 86px) 0 clamp(52px, 6.5vw, 96px);
}
/* Hero photograph. A real ![]()
rather than a CSS background so it can carry
alt/title text; the scrim above it keeps the headline readable over any
photo. `object-fit: cover` handles the varied crop dimensions the Supernova
sanitize chain produces (every image comes out a slightly different size). */
.arcv-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* ONE gradient layer, not two. Stacked translucent layers multiply, so a .82
over a .55 leaves ~8% of the photo showing and the hero reads as a flat dark
band with an image nobody can see. Dark enough for the headline on the left,
open enough to actually show the photograph on the right. */
.arcv-hero__scrim {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(
100deg,
rgba(23, 16, 10, .94) 0%,
rgba(23, 16, 10, .84) 34%,
rgba(23, 16, 10, .36) 64%,
rgba(23, 16, 10, .12) 100%
);
}
@media (max-width: 900px) {
/* stacked layout puts the card over the photo — darken further so the
headline and the card edge stay legible */
.arcv-hero__scrim {
background: linear-gradient(180deg, rgba(23, 16, 10, .88) 0%,
rgba(23, 16, 10, .8) 100%);
}
}
/* faint diagonal weave, same trick the old .cherry-hero used */
.arcv-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .5;
background-image: repeating-linear-gradient(
45deg,
transparent 0 34px,
rgba(255, 255, 255, .028) 34px 68px
);
}
.arcv-hero__inner {
position: relative;
z-index: 1;
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 0 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--arcv-rail-w);
gap: clamp(28px, 5vw, 68px);
align-items: center;
}
/* The kicker is an on the home page and a
elsewhere; the display line
is an
on home and the elsewhere (see rebuild_hero). Both are styled
purely by class so the two variants render identically.
The theme ships `h1,h2,h3,h4,h5 { font-weight: bold !important }` from an
inline block that loads after this sheet, hence the !important on the
kicker's weight — it is the only way a 500-weight survives. */
.arcv-hero__eyebrow {
display: block;
margin: 0 0 18px;
font-family: var(--arcv-font-ui);
font-size: .8rem;
font-weight: 500 !important;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--arcv-on-dark-muted);
}
/* Home page only: the kicker IS the H1 here (inner pages have no kicker at
all), so it carries the exact-match city keyword and is set at double the
default kicker size. Letter-spacing eases off as the type grows — .16em is
right at .8rem and far too airy at 1.6rem. */
h1.arcv-hero__eyebrow {
font-size: 1.6rem;
letter-spacing: .07em;
line-height: 1.25;
margin-bottom: 14px;
color: var(--arcv-on-dark);
}
@media (max-width: 560px) {
h1.arcv-hero__eyebrow { font-size: 1.25rem; letter-spacing: .05em; }
}
.arcv-hero__title {
font-family: var(--arcv-font-display);
font-weight: 700;
color: var(--arcv-on-dark);
font-size: clamp(2rem, 1.15rem + 2.7vw, 3.1rem);
line-height: 1.1;
letter-spacing: -.015em;
margin: 0 0 12px;
max-width: 19ch;
}
.arcv-hero__sub {
margin: 0 0 26px;
font-size: clamp(1rem, .95rem + .3vw, 1.12rem);
line-height: 1.55;
color: var(--arcv-on-dark-muted);
max-width: 46ch;
}
.arcv-hero__points {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
}
.arcv-hero__points li {
display: flex;
align-items: center;
gap: 9px;
font-size: .97rem;
color: var(--arcv-on-dark);
}
.arcv-hero__points li::before {
content: "";
flex: none;
width: 15px;
height: 15px;
background: var(--arcv-orange);
-webkit-mask: var(--arcv-check) center / contain no-repeat;
mask: var(--arcv-check) center / contain no-repeat;
}
/* shared checkmark glyph */
:root {
--arcv-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 4 12.05l1.6-1.6 3.95 3.95L18.4 5.6 20 7.2z'/%3E%3C/svg%3E");
}
/* ---------- 5. Quote card (hero right + sticky rail) ------------------- */
.arcv-quotecard {
background: var(--arcv-surface);
border-radius: var(--arcv-radius);
box-shadow: var(--arcv-shadow-card);
padding: 28px 26px 26px;
text-align: center;
color: var(--arcv-text);
}
.arcv-quotecard__title {
font-family: var(--arcv-font-ui);
font-size: 1.42rem;
font-weight: 600;
line-height: 1.22;
margin: 0 0 16px;
color: var(--arcv-heading);
}
.arcv-quotecard__points {
list-style: none;
margin: 0 0 18px;
padding: 0 0 18px;
border-bottom: 1px solid var(--arcv-line);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
}
.arcv-quotecard__points li {
display: flex;
align-items: center;
gap: 7px;
font-size: .87rem;
color: var(--arcv-text-muted);
}
.arcv-quotecard__points li::before {
content: "";
flex: none;
width: 14px;
height: 14px;
background: var(--arcv-orange);
-webkit-mask: var(--arcv-check) center / contain no-repeat;
mask: var(--arcv-check) center / contain no-repeat;
}
.arcv-quotecard__cta {
display: block;
background: var(--arcv-orange);
color: #fff;
text-decoration: none;
border-radius: var(--arcv-radius-sm);
padding: 15px 18px 13px;
transition: background .18s ease, transform .18s ease;
box-shadow: 0 12px 24px -14px rgba(212, 135, 42, 1);
}
.arcv-quotecard__cta:hover {
background: var(--arcv-orange-hover);
color: #fff;
transform: translateY(-1px);
}
.arcv-quotecard__cta-main {
display: block;
font-size: 1.14rem;
font-weight: 600;
line-height: 1.2;
}
.arcv-quotecard__cta-sub {
display: block;
font-size: .8rem;
font-weight: 400;
opacity: .92;
margin-top: 2px;
}
.arcv-quotecard__status {
margin: 14px 0 0;
font-size: .82rem;
color: var(--arcv-text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
}
.arcv-quotecard__status strong { color: var(--arcv-text); font-weight: 600; }
.arcv-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--arcv-live);
box-shadow: 0 0 0 0 rgba(47, 168, 79, .55);
animation: arcv-pulse 2.4s ease-out infinite;
flex: none;
}
@keyframes arcv-pulse {
0% { box-shadow: 0 0 0 0 rgba(47, 168, 79, .5); }
70% { box-shadow: 0 0 0 7px rgba(47, 168, 79, 0); }
100% { box-shadow: 0 0 0 0 rgba(47, 168, 79, 0); }
}
.arcv-quotecard__rating {
margin-top: 11px;
font-size: .82rem;
color: var(--arcv-text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.arcv-quotecard__stars { color: var(--arcv-gold); letter-spacing: 1px; }
/* ---------- 6. Trust bar ---------------------------------------------- */
/* The existing .avg-rating-box-section already holds the rating chip the
client wants kept verbatim; this just re-skins its shell. */
.avg-rating-box-section {
background: var(--arcv-surface);
border-bottom: 1px solid var(--arcv-line);
}
.avg-rating-box-section .avg-rating-display {
box-shadow: none;
border: 1px solid var(--arcv-line);
border-radius: var(--arcv-radius-sm);
}
.avg-rating-box-section .avg-rating-label {
color: var(--arcv-text-muted);
font-family: var(--arcv-font-ui);
}
.avg-rating-box-section .rating-text { color: var(--arcv-heading); }
.avg-rating-box-section .star.filled,
.avg-rating-box-section .star.partial::before { color: var(--arcv-gold); }
.avg-rating-box-section .review-images img {
border: 0;
box-shadow: none;
filter: grayscale(1);
opacity: .62;
transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.avg-rating-box-section .review-images img:hover {
filter: grayscale(0);
opacity: 1;
transform: none;
box-shadow: none;
}
/* ---------- 7. Feature triad (.chen-cards-section) --------------------- */
.chen-cards-section {
background: var(--arcv-cream);
padding: clamp(40px, 5vw, 66px) 0;
}
/* :not(.card-icon) matters — the icon chip's class also contains "card", and
blanking its background leaves a white glyph on a white tile. */
.chen-cards-section .chen-card,
.chen-cards-section [class*="card"]:not(.card-icon) {
background: transparent;
border: 0;
box-shadow: none;
}
.chen-cards-section h3 {
font-size: 1.24rem;
font-weight: 600;
margin: 14px 0 8px;
}
.chen-cards-section p {
color: var(--arcv-text-muted);
line-height: 1.65;
font-size: .96rem;
}
/* The icon chip keeps its shape; its gradient is recoloured to the brand
orange at the source (see recolor() in _tools/arcv_apply.py) rather than
being flattened here — the glyphs inside are white, so removing the chip
background would make them invisible. */
.chen-cards-section .card-icon {
border-radius: 12px;
box-shadow: 0 10px 20px -12px rgba(212, 135, 42, .85);
}
/* ---------- 8. Content grid + sticky call rail ------------------------- */
.arcv-main {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: clamp(38px, 4.5vw, 64px) 22px;
display: grid;
grid-template-columns: minmax(0, 1fr) var(--arcv-rail-w);
gap: clamp(30px, 4vw, 62px);
align-items: start;
}
.arcv-main__body { min-width: 0; }
.arcv-rail {
position: sticky;
top: calc(var(--arcv-header-h) + 22px);
}
/* sections that used to be full-width blocks now sit inside the left column */
.arcv-main__body > section {
padding-left: 0;
padding-right: 0;
}
/* The theme boxes the reading column: .content-bay-*-box carry a 1px black
top/bottom rule and .article-content a 2px grey frame (both from the theme
sheets, not the inline blocks). The competitor's content column is unboxed
flowing prose, so strip the frames and let the type do the work. */
.arcv-main__body .content-bay-1-box,
.arcv-main__body .content-bay-2-box,
.arcv-main__body .content-lake-box,
.arcv-main__body .content-sea-box,
.arcv-main__body .article-content {
border: 0;
background: transparent;
}
.arcv-main__body .article-content {
padding: 0;
border-radius: 0;
}
.arcv-main__body > section > .container,
.arcv-main__body > section > [class$="-container"] {
max-width: none;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
/* ---------- 9. In-content CTA band ------------------------------------ */
.arcv-ctaband {
position: relative;
overflow: hidden;
background:
radial-gradient(130% 130% at 88% 0%, #3a2810 0%, rgba(58, 40, 16, 0) 58%),
var(--arcv-ink-band);
color: var(--arcv-on-dark);
border-radius: var(--arcv-radius);
padding: 30px 32px 32px;
margin: 34px 0;
}
/* gold star ribbon, top-right corner */
.arcv-ctaband::after {
content: "★★★★★";
position: absolute;
top: 21px;
right: -34px;
width: 148px;
transform: rotate(45deg);
background: linear-gradient(90deg, var(--arcv-gold), var(--arcv-orange));
color: #4a3312;
font-size: .62rem;
letter-spacing: 1px;
text-align: center;
padding: 4px 0;
line-height: 1;
}
.arcv-ctaband__title {
font-family: var(--arcv-font-display);
font-weight: 700;
font-size: clamp(1.32rem, 1.05rem + .9vw, 1.7rem);
line-height: 1.18;
color: var(--arcv-on-dark);
margin: 0 0 8px;
max-width: 22ch;
}
.arcv-ctaband__text {
margin: 0 0 18px;
font-size: .96rem;
color: var(--arcv-on-dark-muted);
max-width: 52ch;
line-height: 1.6;
}
.arcv-ctaband__btn {
display: inline-block;
background: var(--arcv-orange);
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
padding: 12px 24px;
border-radius: var(--arcv-radius-sm);
transition: background .18s ease, transform .18s ease;
}
.arcv-ctaband__btn:hover {
background: var(--arcv-orange-hover);
color: #fff;
transform: translateY(-1px);
}
/* ---------- 10. Full-bleed CTA (.kristina-cta-box) -------------------- */
.kristina-cta-box {
background:
radial-gradient(120% 140% at 50% 0%, #3a2810 0%, rgba(58, 40, 16, 0) 60%),
var(--arcv-ink);
padding: clamp(46px, 5.5vw, 76px) 0;
}
.kristina-cta-box .kristina-cta-heading {
font-family: var(--arcv-font-display);
font-weight: 700;
color: var(--arcv-on-dark);
font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.3rem);
line-height: 1.14;
margin: 0 0 12px;
}
.kristina-cta-box .kristina-cta-subtext {
color: var(--arcv-on-dark-muted);
font-size: 1.02rem;
margin: 0 0 26px;
}
.kristina-cta-box .kristina-cta-button {
background: var(--arcv-orange);
color: #fff;
border-radius: var(--arcv-radius-sm);
padding: 14px 34px;
font-weight: 600;
font-size: 1.04rem;
text-decoration: none;
display: inline-block;
box-shadow: 0 14px 28px -16px rgba(212, 135, 42, 1);
transition: background .18s ease, transform .18s ease;
}
.kristina-cta-box .kristina-cta-button:hover {
background: var(--arcv-orange-hover);
color: #fff;
transform: translateY(-1px);
}
/* ---------- 11. Services grid (.paragon-services-section) ------------- */
.paragon-services-section { background: var(--arcv-surface-alt); border-top: 0; }
.paragon-services-section h2,
.paragon-services-section .paragon-title {
font-family: var(--arcv-font-display);
font-weight: 700;
color: var(--arcv-heading);
}
.paragon-services-section a[class*="card"],
.paragon-services-section [class*="service-card"] {
background: var(--arcv-surface);
border: 1px solid var(--arcv-line);
border-radius: var(--arcv-radius);
overflow: hidden;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.paragon-services-section a[class*="card"]:hover,
.paragon-services-section [class*="service-card"]:hover {
border-color: var(--arcv-orange);
box-shadow: var(--arcv-shadow);
transform: translateY(-2px);
}
.paragon-services-section h3 {
font-size: 1.04rem;
font-weight: 600;
}
/* Card thumbnails. The placeholder divs were a fixed 180px, while the two cards
that shipped with real images sized to their own aspect ratio — so the grid
rows were uneven. Normalising every card image (originals included) to one
height with object-fit keeps the rows aligned whatever the source crop. */
.paragon-services-section .paragon-card-image {
overflow: hidden;
line-height: 0;
background: var(--arcv-surface-alt);
}
.paragon-services-section .paragon-card-image img {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
transition: transform .35s ease;
}
.paragon-services-section .paragon-card:hover .paragon-card-image img {
transform: scale(1.04);
}
@media (max-width: 600px) {
.paragon-services-section .paragon-card-image img { height: 150px; }
}
/* ---------- 12. FAQ (.serena-faq-box) --------------------------------- */
.serena-faq-box { background: transparent; border-top: 0; }
.serena-faq-box .serena-faq-title {
font-family: var(--arcv-font-display);
font-weight: 700;
font-size: clamp(1.6rem, 1.15rem + 1.5vw, 2.1rem);
color: var(--arcv-heading);
text-align: left;
margin: 0 0 6px;
}
/* the theme's decorative star renders dark red by default */
.serena-faq-box .serena-faq-star { color: var(--arcv-gold); }
.serena-faq-box .serena-faq-subtitle {
text-align: left;
color: var(--arcv-text-muted);
margin: 0 0 22px;
}
.serena-faq-box .serena-faq-item {
border: 1px solid var(--arcv-line);
border-radius: var(--arcv-radius-sm);
background: var(--arcv-surface);
margin-bottom: 10px;
overflow: hidden;
}
.serena-faq-box .serena-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
text-align: left;
cursor: pointer;
background: transparent;
border: 0;
padding: 15px 18px;
font-family: var(--arcv-font-ui);
font-weight: 600;
font-size: 1.02rem;
color: var(--arcv-heading);
}
.serena-faq-box .serena-faq-question:hover { color: var(--arcv-orange-hover); }
.serena-faq-box .serena-faq-icon {
flex: none;
color: var(--arcv-orange);
font-size: 1.3rem;
line-height: 1;
}
.serena-faq-box .serena-faq-answer {
border-top: 1px solid var(--arcv-line);
color: var(--arcv-text-muted);
}
.serena-faq-box .serena-faq-answer p {
padding: 0 18px;
margin: 14px 0;
line-height: 1.7;
font-size: .97rem;
}
/* ---------- 13. Remaining theme boxes --------------------------------- */
.ava-whychooseus-box,
.kendall-process-box,
.liz-pricing-box,
.victoria-blog-box,
.content-bay-1-box,
.content-bay-2-box,
.content-lake-box,
.content-sea-box {
background: transparent;
}
.ava-whychooseus-box h2,
.kendall-process-box h2,
.liz-pricing-box h2,
.victoria-blog-box h2,
.content-bay-1-box h2,
.content-bay-2-box h2,
.content-lake-box h2,
.content-sea-box h2 {
font-family: var(--arcv-font-display);
font-weight: 700;
}
/* the theme renders a grey placeholder tile with a giant star/wrench glyph
wherever a section image is missing — hide it until real images land */
.arcv-noimg { display: none !important; }
/* ---------- 13b. In-content figure ------------------------------------ */
.arcv-figure {
margin: 2em 0 2.2em;
}
.arcv-figure img {
display: block;
width: 100%;
height: auto;
border-radius: var(--arcv-radius);
box-shadow: var(--arcv-shadow);
}
.arcv-figure figcaption {
margin-top: 10px;
font-size: .86rem;
line-height: 1.5;
color: var(--arcv-text-muted);
}
/* Homepage feature band — the two wider homepage photos side by side */
.arcv-photoband {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: clamp(30px, 4vw, 54px) 22px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 22px;
}
.arcv-photoband figure { margin: 0; }
.arcv-photoband img {
display: block;
width: 100%;
height: 100%;
min-height: 220px;
object-fit: cover;
border-radius: var(--arcv-radius);
box-shadow: var(--arcv-shadow);
}
.arcv-photoband figcaption {
margin-top: 9px;
font-size: .86rem;
color: var(--arcv-text-muted);
}
/* ---------- 14. Footer (.zaramax-footer) ------------------------------ */
/* The theme ships this footer in a slate blue-grey (#2c3e50 body, #1a252f
bottom bar, #3498db links) with a 1rem pad on every box and a logo wrapper
that clips the wordmark to its own edges. Everything below re-skins it to the
warm palette and gives the three regions -- main, disclaimer, legal -- their
own rhythm instead of one flat block of text. */
.zaramax-footer {
background: #0d0906;
color: var(--arcv-on-dark-muted);
border-top: 3px solid var(--arcv-orange);
}
.zaramax-footer-main {
padding: clamp(42px, 5vw, 68px) 0 clamp(30px, 3.5vw, 46px);
}
.zaramax-footer .container {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 0 22px;
}
/* The theme hardcodes `repeat(4, 1fr)`; this footer carries six boxes (logo,
links, address, Services, Service Area, map).
Narrow screens: let them flow. Desktop: an EXPLICIT six-track template rather
than auto-fit — the Services box needs roughly double width for its two
sub-columns, and expressing that as `span 2` over an auto-fit grid demands a
seventh track that does not fit, which bumped the map to a row of its own. */
.zaramax-footer .footer-boxes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 34px 24px;
align-items: start;
}
@media (min-width: 1000px) {
.zaramax-footer .footer-boxes-grid {
/* logo | quick links | address | services(2col) | areas | map.
Address needs enough width that "(619) 745-5097" is not split across
lines, and the map needs enough to be legible rather than a thumbnail. */
grid-template-columns: 1fr .58fr 1.32fr 1.5fr .8fr 1.15fr;
gap: 34px 26px;
}
}
/* the theme's 1rem pad on every box fights the grid gap */
.zaramax-footer .footer-box { padding: 0; }
.zaramax-footer a {
color: var(--arcv-on-dark-muted);
text-decoration: none;
transition: color .16s ease;
}
.zaramax-footer a:hover { color: var(--arcv-orange); }
/* Column headings ----------------------------------------------------- */
.zaramax-footer .footer-box-title,
.zaramax-footer .map-heading,
.zaramax-footer h3,
.zaramax-footer h4 {
margin: 0 0 16px;
color: var(--arcv-on-dark);
font-family: var(--arcv-font-ui);
font-size: .78rem;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
text-decoration: none;
padding-bottom: 9px;
border-bottom: 1px solid rgba(232, 163, 61, .28);
}
/* Logo + phone (box 1) ------------------------------------------------- */
.zaramax-footer .footer-logo { margin: 0 0 18px; }
/* `overflow: hidden` + zero padding made the wordmark sit flush to the panel
edges. Padding, a width cap and a centred image give it room to read. */
.zaramax-footer .footer-logo-wrapper {
display: block;
width: fit-content;
max-width: 230px;
background: #fdfdfd;
border-radius: var(--arcv-radius-sm);
overflow: visible;
padding: 14px 18px;
line-height: 0;
box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .9);
}
.zaramax-footer .footer-logo-img,
.zaramax-footer .footer-logo-wrapper img {
display: block;
width: 100%;
height: auto;
max-height: none;
border-radius: 0;
margin: 0;
}
.zaramax-footer .footer-blurb p {
color: var(--arcv-on-dark-muted);
font-size: .9rem;
line-height: 1.65;
margin: 0 0 18px;
max-width: 34ch;
}
/* the export leaves an empty
here */
.zaramax-footer .footer-blurb p:empty,
.zaramax-footer .footer-blurb p:has(> span:empty) { display: none; }
.zaramax-footer .footer-phone-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
width: auto;
padding: 12px 22px;
border-radius: 999px;
background: var(--arcv-orange);
color: #fff;
font-weight: 600;
font-size: .98rem;
white-space: nowrap;
box-shadow: 0 10px 20px -12px rgba(212, 135, 42, 1);
}
.zaramax-footer .footer-phone-button:hover {
background: var(--arcv-orange-hover);
color: #fff;
}
/* Quick links + address (boxes 2 & 3) ---------------------------------- */
.zaramax-footer .footer-box-2 p,
.zaramax-footer .footer-box-3 p {
margin: 0;
font-size: .92rem;
line-height: 2;
color: var(--arcv-on-dark-muted);
}
.zaramax-footer .footer-box-3 p {
line-height: 1.75;
/* stops "(619) 745-5097" being split across two lines in a narrow column */
text-wrap: pretty;
}
/* the business name is the first link in the address block */
.zaramax-footer .footer-box-3 p > a:first-child {
color: var(--arcv-on-dark);
font-weight: 600;
}
.zaramax-footer .footer-box-3 span { color: var(--arcv-on-dark-muted); }
/* Services / Service Area lists ---------------------------------------- */
.arcv-footer-links .arcv-footer-list {
list-style: none;
margin: 0;
padding: 0;
}
.arcv-footer-links .arcv-footer-list li { margin-bottom: 8px; }
.arcv-footer-links .arcv-footer-list a,
.arcv-footer-links .arcv-footer-plain {
display: block;
font-size: .92rem;
line-height: 1.5;
}
/* Ants / Rodents are listed but unlinked — they are the home page's subject,
so a link would just duplicate the Chula Vista entry in Service Area. */
.arcv-footer-links .arcv-footer-plain { color: #8d8177; }
/* the services column carries 15 entries — split it so the footer stays short.
It needs more grid width than its neighbours or the two sub-columns collide
("Cockroaches" against "Termites"). */
/* below the explicit-template breakpoint the Services box still needs the
extra width, so it spans there and the grid reflows around it */
@media (max-width: 999px) {
.zaramax-footer .footer-boxes-grid .arcv-footer-links--two { grid-column: span 2; }
}
.arcv-footer-links--two .arcv-footer-list { columns: 2; column-gap: 26px; }
/* Map (box 4) ---------------------------------------------------------- */
.zaramax-footer .footer-map {
border-radius: var(--arcv-radius-sm);
overflow: hidden;
box-shadow: none;
border: 1px solid rgba(246, 241, 233, .14);
max-width: 100%;
}
.zaramax-footer .footer-map iframe {
display: block;
width: 100%;
height: 165px;
filter: saturate(.85);
}
/* Bottom bar: disclaimer + legal --------------------------------------- */
.zaramax-footer-bottom {
background: #080505;
border-top: 1px solid rgba(246, 241, 233, .09);
padding: clamp(24px, 3vw, 34px) 0;
}
.zaramax-footer .footer-bottom-container {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 0 22px;
}
.zaramax-footer .footer-bottom-grid {
display: grid;
gap: 18px;
text-align: left;
}
.zaramax-footer .footer-disclaimer p {
margin: 0;
max-width: 92ch;
color: #7d726a;
font-size: .8rem;
line-height: 1.72;
}
/* The export separated these with four and `white-space: pre-wrap`.
arcv_apply.py rebuilds them as a real list; this styles the separators. */
.zaramax-footer .footer-legal-links { white-space: normal; }
.arcv-legal {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 10px;
margin: 0;
padding: 0;
}
.arcv-legal li { display: flex; align-items: center; gap: 10px; }
.arcv-legal li + li::before {
content: "";
width: 3px;
height: 3px;
border-radius: 50%;
background: #5a5049;
}
.arcv-legal a { font-size: .82rem; color: #9b9088; }
.arcv-legal a:hover { color: var(--arcv-orange); }
@media (max-width: 700px) {
.zaramax-footer .footer-boxes-grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 26px 20px;
}
.zaramax-footer .footer-map { max-width: none; }
.zaramax-footer .footer-disclaimer p { font-size: .78rem; }
}
/* ---------- 15. Mobile sticky call bar -------------------------------- */
.arcv-mobilebar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 950;
background: var(--arcv-ink);
border-top: 1px solid rgba(246, 241, 233, .12);
padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
}
.arcv-mobilebar__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
background: var(--arcv-orange);
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 1.02rem;
padding: 13px 16px;
border-radius: var(--arcv-radius-sm);
}
.arcv-mobilebar__btn:hover { color: #fff; }
/* ---------- 16. Responsive -------------------------------------------- */
@media (max-width: 1040px) {
:root { --arcv-rail-w: 300px; }
}
@media (max-width: 900px) {
.arcv-hero__inner,
.arcv-main {
grid-template-columns: minmax(0, 1fr);
}
.arcv-hero__inner { gap: 30px; }
.arcv-quotecard { max-width: 460px; margin: 0 auto; }
/* the rail card is redundant next to the sticky mobile bar */
.arcv-rail { position: static; }
.arcv-rail .arcv-quotecard { margin-top: 8px; }
}
@media (max-width: 780px) {
.arcv-mobilebar { display: block; }
body { padding-bottom: 76px; }
.site-header.header1 .header-phone-button {
padding: 10px 15px;
font-size: .92rem;
}
.arcv-hero { padding-top: 34px; }
.arcv-ctaband { padding: 24px 22px 26px; }
.arcv-ctaband::after { display: none; }
}
@media (max-width: 520px) {
.arcv-hero__points { gap: 8px 16px; }
.arcv-hero__points li { font-size: .9rem; }
.avg-rating-box-section .review-images {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.arcv-dot { animation: none; }
* { transition-duration: .01ms !important; }
}