/* Light mode: every rule scoped to html[data-theme="light"].
Dark (no attribute) is the site as shipped. */
/* EXPERIMENT: cream page + cream cards with dark text. CTA buttons untouched.
Page-local overrides on top of home.css. Delete this block to revert. */
html[data-theme="light"]{
--ink:#2A1D14;
--ink-soft:#5B4636;
--rust:#8C4128;
/* same alpha and blur as .header__inner: rgba(...,0.55) + blur(6px) */
--veil:rgba(255,252,246,0.55);
--veil-solid:rgba(255,252,246,0.66);
--edge:rgba(74,47,31,0.14);
--lift:0 6px 24px rgba(74,47,31,0.10);
--lift-hi:0 14px 34px rgba(74,47,31,0.18);
}
/* Page: the drifting cream gradient. Reuses home.css's bcc-bg-drift animation. */
html[data-theme="light"] body{
background:
radial-gradient(ellipse 70% 55% at 15% 8%, rgba(211,168,124,0.34) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 100%, rgba(185,120,79,0.26) 0%, transparent 65%),
linear-gradient(160deg, #F7F2E8 0%, #F0E8DA 45%, #E7DCC9 100%) !important;
background-size:200% 200%, 200% 200%, 140% 140% !important;
background-attachment:fixed !important;
color:var(--ink) !important;
}
/* Cards: translucent cream veils, so the page gradient drifts through them.
Palette vars are flipped per card, which recolors every descendant at once. */
html[data-theme="light"] .grid-header,
html[data-theme="light"] .grid-card,
html[data-theme="light"] .loc-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .latte-right,
html[data-theme="light"] .latte-callout,
html[data-theme="light"] .map-region,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .jrny-viewport,
html[data-theme="light"] .trust-logo,
html[data-theme="light"] .jrny-arrow,
html[data-theme="light"] .grid-arrow,
html[data-theme="light"] .footer-inner{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
background:var(--veil) !important;
background-image:none !important;
border-color:var(--edge) !important;
-webkit-backdrop-filter:blur(6px) !important;
backdrop-filter:blur(6px) !important;
}
html[data-theme="light"] .grid-header,
html[data-theme="light"] .grid-card,
html[data-theme="light"] .loc-card,
html[data-theme="light"] .faq-item,
html[data-theme="light"] .latte-right,
html[data-theme="light"] .map-region,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .jrny-viewport,
html[data-theme="light"] .footer-inner{ box-shadow:var(--lift) !important; }
/* Service-area map: tiles are swapped in JS (Carto dark_all -> light_all).
home.css lifts the dark tiles with brightness(1.8); on light tiles that
clips them to white, so the native path clears the filter entirely. */
html[data-theme="light"] .map-wrap:not([data-tiles="fallback"]) .leaflet-tile-pane{
filter:none !important;
}
html[data-theme="light"] .map-wrap[data-tiles="fallback"] .leaflet-tile-pane{
filter:invert(1) hue-rotate(180deg) brightness(1.15) saturate(.7) !important;
}
html[data-theme="light"] #bsm-map{ background:#EDE6DA !important; }
html[data-theme="light"] .map-wrap{ border-color:var(--edge) !important; }
html[data-theme="light"] .bsm-dot{ border-color:#FFFCF6 !important; }
/* Footer map: home.css inverts the embed to fake a dark map. Drop the filter
and Google's own light tiles show through. */
html[data-theme="light"] .footer-map iframe{ filter:none !important; }
html[data-theme="light"] .footer-map{
border-color:var(--edge) !important;
box-shadow:0 10px 28px rgba(74,47,31,0.14) !important;
}
/* small terracotta text that never cleared contrast on cream */
html[data-theme="light"] .footer-heading,
html[data-theme="light"] .fam-show,
html[data-theme="light"] .grid-readmore,
html[data-theme="light"] .faq-answer a{ color:var(--rust) !important; }
/* sits over the photo band, needs a denser veil to stay readable */
html[data-theme="light"] .grid-header{ background:var(--veil-solid) !important; }
html[data-theme="light"] .grid-card:hover,
html[data-theme="light"] .map-region:hover,
html[data-theme="light"] .map-region.active,
html[data-theme="light"] .blog-card:hover,
html[data-theme="light"] .blog-card:focus-visible{
background:var(--veil-solid) !important;
border-color:rgba(140,65,40,0.34) !important;
box-shadow:var(--lift-hi) !important;
}
html[data-theme="light"] .latte-callout{ box-shadow:none !important; }
html[data-theme="light"] .jrny-arrow{ border-color:var(--edge) !important; color:var(--ink) !important; }
html[data-theme="light"] .jrny-arrow:hover{ background:rgba(185,120,79,0.16) !important; }
html[data-theme="light"] .grid-arrow{ color:var(--ink) !important; }
html[data-theme="light"] .grid-arrow:hover{ background:var(--terracotta) !important; color:#fff !important; }
/* Journey section defines its own palette vars: flip them at the section level,
which covers both its header (on cream) and its slides (inside the card). */
html[data-theme="light"] #bcc-journey{
--jr-cream:var(--ink) !important;
--jr-drift:var(--ink-soft) !important;
--jr-peach:var(--rust) !important;
}
html[data-theme="light"] .jrny-slide-num{ color:rgba(74,47,31,0.14) !important; }
/* Bits that used the old cream palette for fills, borders and rails */
html[data-theme="light"] .loc-tag{ background:rgba(74,47,31,0.05) !important; border-color:rgba(74,47,31,0.18) !important; }
html[data-theme="light"] .latte-feat-icon{ background:rgba(140,65,40,0.10) !important; color:var(--rust) !important; }
html[data-theme="light"] .grid-photo{ background:#E7DCC9 !important; }
html[data-theme="light"] .faq-item .faq-question{ border-bottom-color:rgba(74,47,31,0.12) !important; }
html[data-theme="light"] .latte-progress,
html[data-theme="light"] .jrny-progress{ background:rgba(74,47,31,0.14) !important; }
html[data-theme="light"] .latte-dot:not(.active)::after,
html[data-theme="light"] .jrny-dot:not(.is-active)::after{ background:rgba(74,47,31,0.24) !important; }
/* Active step reads terracotta, same as the section nav dot */
html[data-theme="light"] .latte-dot.active::after,
html[data-theme="light"] .jrny-dot.is-active::after{ background:var(--terracotta) !important; }
html[data-theme="light"] .map-region-label::after{ background:linear-gradient(to right, rgba(140,65,40,0.4), transparent) !important; }
/* Logo tiles: the marks are light monotone PNGs, so on cream they get refilled
brown through an SVG alpha filter. Same monotone treatment, opposite value. */
html[data-theme="light"] .trust-logo .tl-mono{ opacity:1 !important; filter:url(#logoBrown) !important; }
html[data-theme="light"] .trust-logo .tl-color{ opacity:0 !important; }
html[data-theme="light"] .trust-logo:hover .tl-mono{ opacity:1 !important; filter:url(#logoBrownDeep) !important; }
html[data-theme="light"] .trust-logo:hover .tl-color{ opacity:0 !important; }
html[data-theme="light"] .trust-logo{ background:rgba(255,252,246,0.55) !important; }
html[data-theme="light"] .trust-logo:hover{ background:var(--veil-solid) !important; }
/* review pill repeats inside the Client Stories card, where its dark panel no longer fits */
html[data-theme="light"] .grid-header .hero-stars{ background:var(--veil-solid) !important; border-color:var(--edge) !important; }
html[data-theme="light"] .grid-header .hero-stars:hover,
html[data-theme="light"] .grid-header .hero-stars:focus-visible{
background:#FFFCF6 !important; border-color:rgba(140,65,40,0.34) !important;
}
/* Photo band at the top of Client Stories: cream veil instead of a dark scrim */
html[data-theme="light"] .grid-sec::after{ background:rgba(247,242,232,0.5) !important; }
/* Type sitting directly on the page, outside any card */
html[data-theme="light"] .map-title,
html[data-theme="light"] .faq-title,
html[data-theme="light"] .trust-title,
html[data-theme="light"] .locblog-title,
html[data-theme="light"] .jrny-title,
html[data-theme="light"] .map-eyebrow,
html[data-theme="light"] .faq-eyebrow,
html[data-theme="light"] .trust-eyebrow,
html[data-theme="light"] .jrny-eyebrow,
html[data-theme="light"] .faq-local-title{ color:var(--ink) !important; }
html[data-theme="light"] .map-sub,
html[data-theme="light"] .faq-sub,
html[data-theme="light"] .trust-sub,
html[data-theme="light"] .locblog-sub,
html[data-theme="light"] .jrny-sub,
html[data-theme="light"] .map-seo-note{ color:var(--ink-soft) !important; }
html[data-theme="light"] .map-eyebrow::before,
html[data-theme="light"] .map-eyebrow::after,
html[data-theme="light"] .faq-eyebrow::before,
html[data-theme="light"] .faq-eyebrow::after,
html[data-theme="light"] .trust-eyebrow::before,
html[data-theme="light"] .trust-eyebrow::after,
html[data-theme="light"] .jrny-eyebrow::before,
html[data-theme="light"] .jrny-eyebrow::after{ background:var(--ink) !important; opacity:.35 !important; }
html[data-theme="light"] .map-italic-sub,
html[data-theme="light"] .trust-sub em,
html[data-theme="light"] .locblog-more{ color:var(--rust) !important; }
html[data-theme="light"] .locblog-more:hover{ color:var(--ink) !important; }
html[data-theme="light"] #bsm-map .leaflet-control-attribution{ background:rgba(255,252,246,0.72) !important; color:rgba(74,47,31,0.7) !important; }
html[data-theme="light"] #bsm-map .leaflet-control-attribution a{ color:rgba(74,47,31,0.88) !important; }
html[data-theme="light"] .faq-local-title{ border-bottom-color:rgba(42,29,20,0.18) !important; }
html[data-theme="light"] .faq-sec .cta-btn--secondary{ color:var(--ink) !important; border-color:rgba(42,29,20,0.4) !important; }
html[data-theme="light"] .faq-sec .cta-btn--secondary:hover,
html[data-theme="light"] .faq-sec .cta-btn--secondary:focus-visible{
color:#FFFCF6 !important; background:var(--ink) !important; border-color:var(--ink) !important;
}
/* ==========================================================================
HEADER, RAILS AND FOOTER
The dark glass chrome, restated in cream. Palette vars are flipped on the
chrome containers so descendants that use var(--cream) / var(--driftwood)
recolour with them.
========================================================================== */
html[data-theme="light"] .header__inner{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
background:rgba(255,252,246,0.72) !important;
border-color:var(--edge) !important;
box-shadow:0 8px 28px rgba(74,47,31,0.12) !important;
-webkit-backdrop-filter:blur(8px) !important;
backdrop-filter:blur(8px) !important;
}
html[data-theme="light"] .header__logo-name,
html[data-theme="light"] .header__logo-tag{ color:var(--ink) !important; }
html[data-theme="light"] .header__logo-mark{ box-shadow:0 0 0 1.5px rgba(74,47,31,0.16), 0 2px 8px rgba(74,47,31,0.12) !important; }
html[data-theme="light"] .header__nav-link{ color:rgba(42,29,20,0.78) !important; }
html[data-theme="light"] .header__nav-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__nav-link.is-active{ color:var(--rust) !important; }
html[data-theme="light"] .header__burger-bar{ background:var(--ink) !important; }
html[data-theme="light"] .header__burger:hover{ background:rgba(74,47,31,0.08) !important; }
html[data-theme="light"] .header__drawer{
background:rgba(255,252,246,0.94) !important;
border-color:var(--edge) !important;
box-shadow:0 20px 44px rgba(74,47,31,0.18) !important;
}
html[data-theme="light"] .header__drawer-link{
color:rgba(42,29,20,0.82) !important;
border-bottom-color:rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .header__drawer-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.06) !important; }
html[data-theme="light"] .header__drawer-link.is-active{ color:var(--rust) !important; }
/* Section rail on the right */
html[data-theme="light"] .scroll-dots,
html[data-theme="light"] .scroll-dots-restore,
html[data-theme="light"] .scroll-dots-toggle{
background:rgba(255,252,246,0.72) !important;
border-color:var(--edge) !important;
color:var(--ink) !important;
box-shadow:0 8px 28px rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .scroll-dots-restore:hover,
html[data-theme="light"] .scroll-dots-toggle:hover{ background:rgba(74,47,31,0.10) !important; }
html[data-theme="light"] .scroll-dot::before{
background:rgba(74,47,31,0.26) !important;
border-color:rgba(74,47,31,0.45) !important;
}
html[data-theme="light"] .scroll-dot:hover::before{ background:rgba(74,47,31,0.5) !important; }
html[data-theme="light"] .scroll-dot.active::before,
html[data-theme="light"] .scroll-dot[data-target="bcc-smap"].active::before,
html[data-theme="light"] .scroll-dot[data-target="bcc-faq"].active::before{
background:var(--rust) !important; border-color:var(--rust) !important;
}
/* Label pill in light mode: translucent white with the rust accent for the
type, so the page reads through it like the dark-mode pill does. The blur
comes from .scroll-dot-label's own backdrop-filter in home.css. */
html[data-theme="light"] .scroll-dot-label{
color:var(--rust) !important;
background:rgba(255,252,246,0.72) !important;
}
/* The active pill is rust-filled, so its type flips to white. */
html[data-theme="light"] .scroll-dot.active .scroll-dot-label{
color:#FFFFFF !important;
background:rgba(185,120,79,0.78) !important;
}
html[data-theme="light"] .goo-blob{ background:var(--rust) !important; }
/* Footer type outside the flipped card vars */
html[data-theme="light"] .site-footer{ color:var(--ink) !important; }
html[data-theme="light"] .footer-area-list li,
html[data-theme="light"] .footer-area-list a{ color:var(--ink-soft) !important; }
html[data-theme="light"] .footer-area-list a:hover,
html[data-theme="light"] .footer-area-list a:focus-visible{ color:var(--rust) !important; }
html[data-theme="light"] .footer-area-more{ color:var(--rust) !important; border-bottom-color:rgba(140,65,40,0.45) !important; }
/* Pages whose dark styling comes from site-dark.css fall back to their native
light CSS (a flat cream bar). Restate the glass-card header geometry so the
chrome reads the same in light mode on every page. */
html[data-theme="light"] .header{ background:transparent !important; padding:0 !important; }
html[data-theme="light"] .header__inner{ border-radius:0 !important; padding:20px max(28px, calc((100% - 1220px) / 2)) !important; }
@media (max-width:480px){ html[data-theme="light"] .header__inner{ padding:20px max(20px, calc((100% - 1220px) / 2)) !important; } }
html[data-theme="light"] .site-footer{ background:transparent !important; }
html[data-theme="light"] .footer-inner{ border-radius:16px !important; }
/* Blog posts are inline-styled against the dark palette. Flipping the palette
vars on the article wrapper recolours every inline var(--cream) /
var(--driftwood) / var(--peach) inside it. */
html[data-theme="light"] .post-main{
--cream:#2A1D14;
--driftwood:#5B4636;
--peach:#8C4128;
}
html[data-theme="light"] .post-card{
background:rgba(255,252,246,0.55) !important;
border-color:rgba(74,47,31,0.14) !important;
box-shadow:0 6px 24px rgba(74,47,31,0.10) !important;
}
html[data-theme="light"] .post-card div[style*="height:1px"]{ background:rgba(74,47,31,0.14) !important; }
html[data-theme="light"] .post-main a:not(.faq-cta-btn):not(.cta-btn){ color:var(--rust); }
/* Solid "Get a Quote" button in the post body: keep cream type on terracotta. */
html[data-theme="light"] .post-main .faq-cta-btn:not([style*="transparent"]){
color:#FFFCF6 !important; background:var(--terracotta-a11y, #96603C) !important;
}
/* ==========================================================================
LIGHT OVERRIDES FOR THE site-dark.css PAGES
Light mode does not depend on that sheet being switched off: every dark
rule it sets has a cream counterpart here.
========================================================================== */
html[data-theme="light"] .menu-section-title,
html[data-theme="light"] .included-title,
html[data-theme="light"] .story-title,
html[data-theme="light"] .quote-form-title,
html[data-theme="light"] .drink-card-title,
html[data-theme="light"] .included-card-title,
html[data-theme="light"] .apart-card-title,
html[data-theme="light"] .sip-row-title,
html[data-theme="light"] .addon-card-title,
html[data-theme="light"] .custom-callout-title,
html[data-theme="light"] .faq-category h2,
html[data-theme="light"] .faq-item summary,
html[data-theme="light"] .faq-seo-block h2,
html[data-theme="light"] .faq-cta h2{ color:var(--ink) !important; }
html[data-theme="light"] .menu-section-note,
html[data-theme="light"] .drink-card-desc,
html[data-theme="light"] .sip-row-desc,
html[data-theme="light"] .included-sub,
html[data-theme="light"] .included-card-desc,
html[data-theme="light"] .story-text,
html[data-theme="light"] .apart-card-desc,
html[data-theme="light"] .quote-form-sub,
html[data-theme="light"] .custom-callout-desc,
html[data-theme="light"] .story-stat-label,
html[data-theme="light"] .faq-item-body-inner,
html[data-theme="light"] .faq-seo-block p,
html[data-theme="light"] .faq-cta p{ color:var(--ink-soft) !important; }
html[data-theme="light"] .included-closing,
html[data-theme="light"] .story-stat-num,
html[data-theme="light"] .drink-card-build,
html[data-theme="light"] .eyebrow-light,
html[data-theme="light"] .faq-eyebrow,
html[data-theme="light"] .faq-item summary:hover,
html[data-theme="light"] .faq-item-body-inner a,
html[data-theme="light"] .faq-item-body-inner a strong,
html[data-theme="light"] .drink-card-desc a,
html[data-theme="light"] .included-card-desc a,
html[data-theme="light"] .apart-card-desc a{ color:var(--rust) !important; }
html[data-theme="light"] .eyebrow-light::before,
html[data-theme="light"] .eyebrow-light::after,
html[data-theme="light"] .faq-eyebrow::before,
html[data-theme="light"] .faq-eyebrow::after{ background:var(--rust) !important; }
html[data-theme="light"] .faq-item-body-inner strong{ color:var(--ink) !important; }
html[data-theme="light"] .faq-item summary .faq-icon::before,
html[data-theme="light"] .faq-item summary .faq-icon::after{ background:var(--rust) !important; }
html[data-theme="light"] .drink-card,
html[data-theme="light"] .included-card,
html[data-theme="light"] .addon-card,
html[data-theme="light"] .apart-card,
html[data-theme="light"] .custom-callout,
html[data-theme="light"] .faq-seo-block{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
background:var(--veil) !important;
border-color:var(--edge) !important;
box-shadow:var(--lift) !important;
}
html[data-theme="light"] .tea-tag{ background:rgba(74,47,31,0.08) !important; color:var(--ink) !important; }
html[data-theme="light"] .cta-btn--secondary{ color:var(--ink) !important; border-color:rgba(42,29,20,0.4) !important; }
html[data-theme="light"] .cta-btn--secondary:hover,
html[data-theme="light"] .cta-btn--secondary:focus-visible,
html[data-theme="light"] .cta-btn--secondary.is-pressed{
background:var(--ink) !important; color:#FFFCF6 !important; border-color:var(--ink) !important;
}
/* ==========================================================================
HOME HERO: light mode gets a lightened scrim, no fade to black, ink text.
Var-flip on #bcc-hero recolors every --cream/--driftwood descendant
(eyebrow, title, sub, stats, stars) the same way the header does above;
pseudo-elements inherit the flipped custom properties too.
========================================================================== */
html[data-theme="light"] #bcc-hero{
--cream:var(--ink);
--driftwood:var(--ink-soft);
}
/* Plain white ground behind the photo. No scrims, fades or filters are
applied to the hero photo in light mode, so it shows exactly as shot. */
html[data-theme="light"] .hero{
background-color: #FFFFFF !important;
background-image: none !important;
}
@media (min-width: 861px){
/* Card centred in the band it actually occupies: from the bottom of the
fixed 164px header down to the top of the stats bar. The hero was
flex-centring its content inside a 92vh box while the header floated over
it, so the card's top 42px sat behind the header and the visible gaps read
40/24 top to bottom. Switching to flex-start and pinning the offsets makes
the spacing deterministic instead of viewport-height dependent: card top
lands 40px below the header, and .hero-inner's bottom margin puts the same
40px between the card's bottom edge and the stats bar. */
html[data-theme="light"] #bcc-hero{
justify-content: flex-start;
padding-top: 234px;
min-height: 0;
}
html[data-theme="light"] #bcc-hero .hero-inner{ margin-bottom: 22px; }
html[data-theme="light"] .hero-bgimg{
background-image: image-set(url('../img/hero-riverfront-d.webp') type('image/webp'), url('../img/hero-riverfront-d.jpg') type('image/jpeg')) !important;
background-size: 81.6% auto !important;
background-position: 86% 77% !important;
background-repeat: no-repeat !important;
filter: none !important;
/* 25px fade to the white ground on the photo's own left and right edges.
The mask box is given the same size, position and no-repeat as the
background image, so its gradient stops land on the painted photo's
edges rather than the section's. */
-webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 25px, #000 calc(100% - 25px), rgba(0,0,0,0) 100%) !important;
mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 25px, #000 calc(100% - 25px), rgba(0,0,0,0) 100%) !important;
-webkit-mask-size: 81.6% 100% !important; mask-size: 81.6% 100% !important;
-webkit-mask-position: 86% 50% !important; mask-position: 86% 50% !important;
-webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
}
html[data-theme="light"] .hero-bgimg::after{ content: none !important; }
/* The photo is unedited, so the ink type would cross bare photo well under
4.5:1. A tan glass card sits behind the eyebrow, headline and paragraph,
using the header's own treatment (translucent fill + blur + hairline
edge) in tan rather than cream. Fixed height rather than bottom-anchored:
it has to stop above the CTA and reviews pill, which are siblings in the
same block. */
html[data-theme="light"] .hero-eyebrow{ font-weight: 700 !important; }
html[data-theme="light"] .hero-sub{ font-weight: 500 !important; }
html[data-theme="light"] .hero-inner{ position: relative; }
/* CTA row and reviews pill centered on the card rather than sharing the
text's left edge. The card sits 74px left of .hero-inner's content box
(40px padding, card at -34px) and is 640px wide, so its centre line is
246px in from that content box. The wrapper is transparent, so it can be
widened to the card and justified; the pill carries its own background,
so it is nudged by half its own width instead of being stretched. */
html[data-theme="light"] #bcc-hero .hero-cta-wrap{
margin-left: -74px !important; width: 640px !important;
justify-content: center !important;
}
html[data-theme="light"] #bcc-hero .hero-stars{
/* The independent "translate" property, not "transform": home.css's
reveal guard sets transform:none !important on every hero descendant
that is not explicitly exempt, which silently ate the translateX. */
position: relative; left: 246px; translate: -50% 0;
}
html[data-theme="light"] .hero-inner::before{
content: ''; position: absolute; z-index: -1; pointer-events: none;
top: -30px; left: -34px; right: auto;
width: 640px;
/* Height tracks the viewport rather than sitting at one fixed value: the
block it covers grows with .hero-title's own clamp, so a single number
either cut through the paragraph's last line (396px at 1390) or
overlapped the CTA row (432px). The slope matches the measured block
height at 924 (358) and 1390 (412) and caps where the title clamp does. */
/* Extended down past the CTA and the Google reviews pill (measured bottom
568px from .hero-inner's top, card starts 30px above it) with the same
30px margin the top uses. Same 11.6vw slope as before, offset up. */
height: clamp(574px, calc(11.6vw + 467px), 628px);
border-radius: 20px;
background: rgba(255,255,255,0.72);
border: 1px solid rgba(74,47,31,0.10);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: 0 8px 28px rgba(74,47,31,0.10);
}
}
@media (min-width: 861px) and (max-width: 1150px){
/* The eyebrow wrapped to two lines here, which both grew the block the card
has to cover and pushed its trailing rule outside the card. Tightening it
to one line and dropping that trailing rule keeps the content a fixed
height, so the card can be sized to clear the CTA row below. */
html[data-theme="light"] .hero-eyebrow{ white-space: nowrap; font-size: 12.5px; letter-spacing: 0.16em; }
html[data-theme="light"] .hero-eyebrow::after{ display: none; }
html[data-theme="light"] .hero-inner::before{ width: 620px; }
html[data-theme="light"] #bcc-hero .hero-cta-wrap{ width: 620px !important; }
/* Centring narrowed the row enough for "Get a Quote" to wrap to two lines
inside its fixed height and clip. */
html[data-theme="light"] #bcc-hero .hero-cta-wrap .cta-btn{ white-space: nowrap; }
html[data-theme="light"] #bcc-hero .hero-stars{ left: 236px; }
}
html[data-theme="light"] .hero-stats-bar{ background:var(--veil-solid) !important; border-top-color:var(--edge) !important; }
html[data-theme="light"] .hero-stat{ border-left-color:var(--edge) !important; }
html[data-theme="light"] .hero-stars{ background:var(--veil-solid) !important; border-color:var(--edge) !important; color:var(--ink) !important; }
html[data-theme="light"] .hero-stars svg{ color:var(--rust) !important; fill:var(--rust) !important; }
html[data-theme="light"] .hero-stars:hover,
html[data-theme="light"] .hero-stars:focus-visible{ background:#FFFCF6 !important; border-color:rgba(140,65,40,0.34) !important; }
@media (max-width: 860px){
html[data-theme="light"] .hero-bgimg{ filter:none !important; }
html[data-theme="light"] .hero-sub::before{ background:linear-gradient(to bottom, rgba(247,242,232,0.72) 0%, rgba(247,242,232,0.72) calc(100% - 72px), rgba(247,242,232,0) 100%) !important; }
html[data-theme="light"] .hero-stats-bar{ background:rgba(255,252,246,0.72) !important; }
}
/* Header "More" dropdown in light mode */
html[data-theme="light"] .header__more-menu{
background:#FFFCF6 !important;
border-color:var(--edge) !important;
box-shadow:0 14px 34px rgba(74,47,31,0.16) !important;
}
html[data-theme="light"] .header__more-link{ color:rgba(42,29,20,0.80) !important; }
html[data-theme="light"] .header__more-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__more-link.is-active{ color:var(--rust) !important; }
/* Icon tiles use var(--driftwood) as a FILL, so the card-level palette flip
turns them dark. Give them their own cream-mode fill. */
html[data-theme="light"] .apart-icon,
html[data-theme="light"] .included-icon,
html[data-theme="light"] .addon-icon{
background:rgba(140,65,40,0.10) !important;
color:var(--rust) !important;
}
/* ==========================================================================
LIGHT MODE ON THE menu / pricing / about / faq PAGES
Their native light design paints opaque cream sections and two dark
espresso bands (hero + closing CTA). In light mode every band goes
transparent so the page gradient carries through, and the type that was
written for the dark bands flips to ink.
========================================================================== */
html[data-theme="light"] .menu-hero,
html[data-theme="light"] .menu-cta-sec,
html[data-theme="light"] .specialty-sec,
html[data-theme="light"] .syrups-sec,
html[data-theme="light"] .sip-sec,
html[data-theme="light"] .price-hero,
html[data-theme="light"] .price-cta-sec,
html[data-theme="light"] .included-sec,
html[data-theme="light"] .addon-sec,
html[data-theme="light"] .quote-form-sec,
html[data-theme="light"] .about-hero,
html[data-theme="light"] .about-cta-sec,
html[data-theme="light"] .story-sec,
html[data-theme="light"] .apart-sec,
html[data-theme="light"] .faq-hero,
html[data-theme="light"] .faq-cta{
background:transparent !important;
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
}
html[data-theme="light"] .menu-hero-title,
html[data-theme="light"] .price-hero-title,
html[data-theme="light"] .about-hero-title,
html[data-theme="light"] .menu-cta-sec h2,
html[data-theme="light"] .price-cta-sec h2,
html[data-theme="light"] .about-cta-sec h2{ color:var(--ink) !important; }
html[data-theme="light"] .menu-hero-sub,
html[data-theme="light"] .price-hero-sub,
html[data-theme="light"] .about-hero-sub,
html[data-theme="light"] .price-hero p,
html[data-theme="light"] .menu-hero p,
html[data-theme="light"] .menu-cta-sec p,
html[data-theme="light"] .price-cta-sec p,
html[data-theme="light"] .about-cta-sec p{ color:var(--ink-soft) !important; }
html[data-theme="light"] .menu-hero-sub em,
html[data-theme="light"] .price-hero-sub em{ color:var(--rust) !important; }
/* menu.css gives the header/hero buttons a pale glass treatment; light mode
keeps the same solid terracotta button the rest of the site uses. */
html[data-theme="light"] .cta-btn:not(.cta-btn--secondary){
background:var(--terracotta-a11y, #96603C) !important;
background-image:none !important;
color:#fff !important;
border:none !important;
}
/* Wave dividers between the old light sections: hidden in dark, hidden here too. */
html[data-theme="light"] .section-blend{ display:none !important; }
/* Add-on pill: its fill came from var(--peach), which the card palette flip
darkens to rust, leaving dark text on a dark chip. */
html[data-theme="light"] .addon-tag{
background:rgba(140,65,40,0.12) !important;
color:var(--rust) !important;
}
/* Service-areas city cards (page-local dark styles) */
html[data-theme="light"] .area-card{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
background:var(--veil) !important;
border-color:var(--edge) !important;
box-shadow:var(--lift) !important;
color:var(--ink) !important;
-webkit-backdrop-filter:blur(6px) !important;
backdrop-filter:blur(6px) !important;
}
html[data-theme="light"] .area-card:hover,
html[data-theme="light"] .area-card:focus-visible{
background:var(--veil-solid) !important;
border-color:rgba(140,65,40,0.34) !important;
box-shadow:var(--lift-hi) !important;
}
html[data-theme="light"] .area-region-label{ color:var(--rust) !important; }
/* Inline-styled page intros (service areas): flip the palette on the wrapper
so inline var(--cream) / var(--driftwood) resolve to ink. */
html[data-theme="light"] .page-intro{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
}
/* Footer card padding: site-dark supplies it on the faq/menu/pricing/about
pages, whose own sheets set none, so light mode restates it. */
html[data-theme="light"] .footer-inner{ padding:48px 56px !important; }
@media (max-width:480px){ html[data-theme="light"] .footer-inner{ padding:36px 24px !important; } }
/* FAQ toggle: site-dark turns faq.css's "+" glyph into a thin plus that
rotates to a minus. Light mode needs the same construction. */
html[data-theme="light"] .faq-item summary .faq-icon{
width:18px; height:18px; background:none !important; color:transparent !important;
font-size:0 !important; border-radius:0 !important; box-shadow:none !important;
transform:none; position:relative; flex-shrink:0;
transition:transform .45s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .faq-item summary .faq-icon::before,
html[data-theme="light"] .faq-item summary .faq-icon::after{
content:''; position:absolute; background:var(--rust); border-radius:1px;
transition:transform .3s cubic-bezier(.4,0,.2,1);
}
html[data-theme="light"] .faq-item summary .faq-icon::before{ top:50%; left:0; width:100%; height:2px; transform:translateY(-50%); }
html[data-theme="light"] .faq-item summary .faq-icon::after{ left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
html[data-theme="light"] .faq-item[open] summary .faq-icon{ transform:rotate(225deg); }
/* Legal pages (privacy, terms) carry their own page-local dark styles. */
html[data-theme="light"] .legal-hero,
html[data-theme="light"] .legal-card{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
--terracotta:var(--rust);
}
html[data-theme="light"] .legal-hero h1{ color:var(--ink) !important; }
html[data-theme="light"] .legal-card{
background:var(--veil-solid, rgba(255,252,246,0.78)) !important;
border-color:var(--edge) !important;
box-shadow:var(--lift) !important;
}
html[data-theme="light"] .legal-section h2{ color:var(--ink) !important; }
html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li,
html[data-theme="light"] .legal-intro{ color:var(--ink-soft) !important; }
html[data-theme="light"] .legal-section strong{ color:var(--ink) !important; }
html[data-theme="light"] .legal-card a{ color:var(--rust) !important; }
html[data-theme="light"] .legal-card .faq-cta-btn{ color:#FFFCF6 !important; background:var(--rust) !important; }
html[data-theme="light"] .legal-section h2{ border-bottom-color:var(--edge) !important; }
/* Header parity: the non-home page sheets style a flat full-width bar with
smaller nav type and two decorative overlays. Match the home header. */
html[data-theme="light"] .header::before,
html[data-theme="light"] .header::after{ display:none !important; }
html[data-theme="light"] .header__nav-link{ font-size:18px !important; padding:10px 18px !important; }
html[data-theme="light"] .header__logo-tag{ color:var(--rust) !important; }
html[data-theme="light"] .header__more-menu{
background:#FFFCF6 !important; border-color:var(--edge) !important;
box-shadow:0 14px 34px rgba(74,47,31,0.16) !important;
}
html[data-theme="light"] .header__more-link{ color:rgba(42,29,20,0.82) !important; }
html[data-theme="light"] .header__more-link:hover{ color:var(--ink) !important; background:rgba(74,47,31,0.07) !important; }
html[data-theme="light"] .header__more-link.is-active{ color:var(--rust) !important; }
/* The full-width header bar carries a 1px hairline in the page sheets; with a
transparent bar it reads as a stray line across the top. */
html[data-theme="light"] .header{ box-shadow:none !important; }
/* Thanks-for-reaching-out confirmation card (inline-styled dark) */
html[data-theme="light"] .thanks-card{
--cream:var(--ink);
--driftwood:var(--ink-soft);
--peach:var(--rust);
background:rgba(255,252,246,0.66) !important;
border-color:var(--edge) !important;
box-shadow:0 10px 30px rgba(74,47,31,0.12) !important;
}
html[data-theme="light"] .thanks-card .faq-eyebrow{ color:var(--rust) !important; }
/* Footer type on the pricing.css-family pages (get-a-quote, pricing): these
sheets colour it with var(--cream)/var(--driftwood) directly, so name the
colours explicitly rather than relying on the palette flip. */
html[data-theme="light"] .footer-email,
html[data-theme="light"] .footer-phone{ color:var(--ink) !important; }
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-area-list a,
html[data-theme="light"] .footer-area-list li{ color:var(--ink-soft) !important; }
html[data-theme="light"] .footer-email:hover,
html[data-theme="light"] .footer-phone:hover,
html[data-theme="light"] .footer-links a:hover,
html[data-theme="light"] .footer-area-list a:hover{ color:var(--rust) !important; }