/* =========================================================================
arcv-theme.css — Ants & Rodents Las Vegas 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 Las Vegas), 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 theme lays these out as `display:grid` with
`grid-template-rows: repeat(auto-fill, minmax(44px,1fr))` and a tall
`max-height`, so auto-fill keeps generating rows to fill the available height
regardless of how many items exist. That was sized for the original 13- and
21-item menus; with the curated 6-7 item lists it left ~190px of empty box
hanging below the last link. Height must come from the content instead.
Desktop only — on mobile these menus are a static accordion that the theme
hides with `display:none !important`, and forcing `display:block` here would
pin them permanently open. */
@media (min-width: 769px) {
.site-header.header1 .silkweaver-dropdown-menu {
display: block !important;
grid-template-rows: none !important;
grid-auto-flow: row !important;
column-width: auto !important;
columns: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
}
.site-header.header1 .silkweaver-dropdown-menu li {
width: auto !important;
}
}
/* 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 ---------------------------------------------- */
/* Unlike Chula Vista, this export has NO .avg-rating-box-section on any page,
so it has none of the theme's inline CSS for one either — the staircase
theme only inlines the styles for boxes a page actually renders. The bar is
injected by inject_rating_bar() in _tools/arcv_apply.py, which means the
BASE layout has to live here as well as our re-skin. Everything down to the
"re-skin" marker is ported from the block Chula Vista's pages carry inline;
below it is ours. */
/* -- base layout (ported) -- */
.avg-rating-box-section {
padding: 0;
margin: 0;
}
.avg-rating-container {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 20px clamp(16px, 4vw, 34px);
}
.review-images {
display: flex;
gap: 20px;
align-items: center;
justify-content: space-between;
padding: 15px 0;
}
.avg-rating-display {
background: #fff;
padding: 10px 15px;
border-radius: 8px;
min-width: 150px;
max-width: 210px;
height: 70px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.avg-rating-label {
font-size: 14px;
margin-bottom: 6px;
font-weight: 600;
}
.avg-rating-score {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
}
.star-rating { display: flex; gap: 1px; flex-shrink: 0; }
.star { font-size: 18px; line-height: 1; }
.star.empty { color: #ddd; }
.star.partial { position: relative; color: #ddd; }
/* the partial star is a second glyph clipped to --partial-fill, laid over a
grey one — that is how a 4.8 shows as four-and-four-fifths */
.star.partial::before {
content: '\2605';
position: absolute;
left: 0;
top: 0;
width: var(--partial-fill);
overflow: hidden;
}
.rating-text {
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
white-space: nowrap;
}
.review-images img {
height: 70px;
width: auto;
border-radius: 8px;
object-fit: cover;
}
/* -- re-skin -- */
.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;
}
/* Chula Vista's inline version breaks to a 2-up grid at 768px, which leaves
the fifth badge alone on its own row. Wrapping centred keeps the row
balanced at every width and needs no breakpoint of its own. */
@media (max-width: 900px) {
.review-images {
flex-wrap: wrap;
justify-content: center;
gap: 14px;
}
.avg-rating-display { max-width: none; }
}
@media (max-width: 520px) {
.review-images img { height: 46px; }
.avg-rating-display { height: 62px; padding: 8px 12px; }
.avg-rating-label { font-size: 12px; margin-bottom: 4px; }
}
/* ---------- 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);
}
/* ---------- 7a. Feature triad, home page (.arcv-triad) ----------------- */
/* The competitor runs a three-up icon row under the hero on EVERY page. This
export gives inner pages the theme's own .chen-cards-section for that, but
the home page has no such box — and, more to the point, no .chen-* CSS in
its either, since the theme only inlines the styles for boxes the
page actually renders. Borrowing the theme markup on the home page would
therefore render unstyled. This is the same row, drawn from scratch, and it
is styled from here so it works on any page. */
.arcv-triad {
background: var(--arcv-cream);
padding: clamp(40px, 5vw, 66px) 0;
}
.arcv-triad__inner {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 34px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(22px, 3vw, 46px);
}
.arcv-triad__icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: linear-gradient(135deg, var(--arcv-orange), var(--arcv-orange-hover));
box-shadow: 0 10px 20px -12px rgba(212, 135, 42, .85);
}
.arcv-triad__icon svg { width: 27px; height: 27px; }
.arcv-triad h3 {
font-family: var(--arcv-font-display);
color: var(--arcv-heading);
font-size: 1.24rem;
font-weight: 600;
margin: 16px 0 8px;
}
.arcv-triad p {
color: var(--arcv-text-muted);
line-height: 1.65;
font-size: .96rem;
margin: 0;
}
/* ---------- 7b. Sitemap listing (.arcv-sitemap) ------------------------ */
/* This export's /sitemap/ page ships with no list on it at all — just a hero,
a map embed and a CTA. The whole block is generated from the filesystem in
rebuild_sitemap(), so it cannot drift out of step with what is on disk. */
.arcv-sitemap-box {
background: var(--arcv-surface);
padding: clamp(34px, 5vw, 62px) 0;
}
.arcv-sitemap {
max-width: var(--arcv-maxw);
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 34px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(24px, 3vw, 44px);
align-items: start;
}
.arcv-sitemap__group h2 {
font-family: var(--arcv-font-display);
font-size: 1.12rem;
color: var(--arcv-heading);
margin: 0 0 12px;
padding-bottom: 9px;
border-bottom: 2px solid var(--arcv-orange);
}
.arcv-sitemap__group ul {
list-style: none;
margin: 0;
padding: 0;
}
.arcv-sitemap__group li { margin: 0 0 7px; }
.arcv-sitemap__group a {
color: var(--arcv-text);
text-decoration: none;
font-size: .95rem;
line-height: 1.45;
}
.arcv-sitemap__group a:hover,
.arcv-sitemap__group a:focus-visible {
color: var(--arcv-orange-hover);
text-decoration: underline;
}
/* ---------- 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; }
/* ---------- 13a. Other offerings -------------------------------------- */
/* Three cross-links closing out the reading column. Deliberately quiet — this
is a crawl/navigation aid at the end of the article, not another CTA
competing with the band above it. */
.arcv-offerings {
display: block;
margin: 2.6em 0 .5em;
padding-top: 1.5em;
border-top: 1px solid var(--arcv-line);
}
.arcv-offerings h3 {
margin: 0 0 .8em;
font-family: var(--arcv-font-ui);
font-size: 1.02rem;
font-weight: 600;
color: var(--arcv-heading);
}
.arcv-offerings ul {
list-style: none;
margin: 0;
padding: 0;
}
.arcv-offerings li { margin-bottom: .55em; }
.arcv-offerings a {
font-size: .97rem;
line-height: 1.5;
color: var(--arcv-orange-hover);
text-decoration: none;
}
.arcv-offerings a:hover {
color: var(--arcv-orange);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- 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;
}
/* The figure must be a flex column. Previously the image carried `height:100%`,
which resolves against the figure — so the image ate the figure's entire
height and the caption was laid out BELOW the box, overflowing into the next
section. Letting the image flex into whatever space the caption leaves keeps
both images the same height across the row without the overflow. */
.arcv-photoband figure {
margin: 0;
display: flex;
flex-direction: column;
min-width: 0;
}
.arcv-photoband img {
display: block;
width: 100%;
flex: 1 1 auto;
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 Las Vegas 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 -------------------------------- */
/* Solid orange edge to edge. The bar itself is the surface — the previous
version put an orange pill inside a dark padded shell, which read as a black
frame around the button. No padding, no border, no radius on the bar. */
.arcv-mobilebar {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 950;
background: var(--arcv-orange);
padding: 0;
border: 0;
box-shadow: 0 -6px 18px -8px rgba(23, 16, 10, .45);
/* Hidden until the visitor has scrolled 1400px (see MOBILEBAR_JS), then
revealed for good — the handler removes itself on first trigger, so it
never slides away again. translateY rather than display so it animates. */
transform: translateY(105%);
transition: transform .3s cubic-bezier(.22, .61, .36, 1);
will-change: transform;
}
.arcv-mobilebar.is-visible { transform: translateY(0); }
/* Padding is FIXED — no env(safe-area-inset-bottom).
On iOS the inset flips between 0 (browser toolbar covering it) and ~34px
(toolbar hidden, home indicator exposed), so an env()-based pad made the bar
grow a band of empty orange whenever the toolbar auto-hid instead of the bar
simply sitting at the new bottom edge. The competitor uses flat 20px/25px and
its height never changes; matched here. */
.arcv-mobilebar__btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: transparent;
color: #fff;
text-decoration: none;
padding: 20px 14px 25px;
}
.arcv-mobilebar__btn:hover,
.arcv-mobilebar__btn:active { color: #fff; }
/* Sized to match the competitor: their lead line measures 27.3 CSS px and their
sub-line 9.7 against ours at 17.3 / 9.0 (measured off 3x device screenshots).
vw-based so it steps down on narrow handsets rather than wrapping. */
.arcv-mobilebar__lead {
display: flex;
align-items: center;
gap: 8px;
font-size: clamp(1.35rem, 6.9vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.arcv-mobilebar__lead svg {
flex: none;
width: 21px;
height: 21px;
}
.arcv-mobilebar__sub {
display: flex;
align-items: center;
gap: 7px;
font-size: clamp(.78rem, 3.55vw, .9rem);
font-weight: 400;
line-height: 1.3;
color: rgba(255, 255, 255, .95);
}
.arcv-mobilebar__sub strong { font-weight: 600; color: #fff; }
/* Status dot. A brighter green than --arcv-live, which was picked for a white
card and goes muddy on orange. */
.arcv-mobilebar__dot {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: #35e07a;
box-shadow: 0 0 0 0 rgba(53, 224, 122, .6);
animation: arcv-pulse-bar 2.4s ease-out infinite;
}
@keyframes arcv-pulse-bar {
0% { box-shadow: 0 0 0 0 rgba(53, 224, 122, .55); }
70% { box-shadow: 0 0 0 7px rgba(53, 224, 122, 0); }
100% { box-shadow: 0 0 0 0 rgba(53, 224, 122, 0); }
}
/* The lead line is nowrap, so on a 320px handset it was 2px wider than the
space available and forced the page to scroll sideways. Claw back the
difference from the horizontal padding and the icon rather than shrinking the
type, which would miss the size we are matching. */
@media (max-width: 360px) {
.arcv-mobilebar__btn { padding-left: 8px; padding-right: 8px; }
.arcv-mobilebar__lead { gap: 6px; }
.arcv-mobilebar__lead svg { width: 19px; height: 19px; }
}
/* ---------- 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-triad__inner { 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) {
/* Theme bug, present on all 38 pages: the box carries an inline
`width:100%`, and the theme's own mobile rule then adds `margin: 5px`.
Border-box sizing does not help — the margins sit OUTSIDE the 100%, so the
box measures viewport+10px and the whole document scrolls sideways by 5px.
Dropping to `width:auto` lets the margins come out of the width instead.
Inline `width` is overridden here rather than at source because it is
written by the theme into every page, not by us. */
.kendall-process-box { width: auto !important; }
.arcv-mobilebar { display: block; }
/* clearance for the two-line bar (~100px at 390px wide) */
body { padding-bottom: 112px; }
.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; }
}