/*
Theme Name: cashland-child
Theme URI: https://cash.land/
Description: Custom child theme for Cash.Land
Author: Cash.Land Team
Author URI: https://cash.land/
Template: hello-elementor
Version: 1.0.0
*/
/* ==========================================================================
Theme: Cash.Land Child (Archives & Taxonomy CSS)
Cleaned: duplicates removed, variables added, media queries grouped by section
==========================================================================
CONTENTS
0) Tokens & Base
1) Global: Page Shell & Background
2) Breadcrumbs & Legacy H1
3) Hero (Conversion-Focused)
4) Buttons
5) Pagination (Centered Tray)
6) Reviews Grid & Cards
7) Map (Leaflet) + Toggle + Popup
8) Taxonomy Chips (Glass Pills)
9) Utilities
10) Legacy / Cleanup
11) Elementor-proof Overrides (Archive/Tax scope)
12) Compact Chips Variant
13) H3 — Elementor Proofing
==========================================================================
*/
/* ==========================================================================
0) TOKENS & BASE
========================================================================== */
:root {
/* Brand greens */
--cl-green-500: #1dbd3d;
--cl-green-700: #0e7f23;
--cl-green-800: #085d0b;
--cl-green-900: #0b3d1a;
--cl-green-acc: #00B140; /* top gradient start */
--accent:#38b000;--accent-dark:#085d0b;--green-600:#1dbd3d;--green-700:#0e7f23;--green-800:#0b6a1d;
/* Neutrals */
--cl-white: #fff;
--cl-offwhite: #f8faf9;
--cl-gray-050: #f8f9fb;
--cl-gray-100: #f2f2f2;
--cl-gray-200: #e8e8e8;
--cl-gray-300: #e6e6e6;
--cl-gray-500: #777;
--cl-gray-600: #69727d;
--cl-gray-700: #444;
/* Accents */
--cl-blue-600: #1a73e8;
--cl-gold-500: #f7b500; /* stars */
--cl-focus: #ffcf4d;
/* Gradients */
--cl-brand-gradient: linear-gradient(180deg, var(--cl-green-500), var(--cl-green-700));
--cl-hero-gradient: linear-gradient(180deg, #f3fbf6 0%, #e9f8ee 100%);
--cl-page-gradient: linear-gradient(180deg, var(--cl-green-acc) 0%, var(--cl-gray-100) 100%);
--cl-chip-grad: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.65));
--cl-chip-grad-strong: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
/* Shadows */
--cl-shadow-lg: 0 14px 30px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.08);
--cl-shadow-xl: 0 24px 50px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.18);
/* Fonts */
--cl-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
/* Brand aliases used by footer/buttons */
--cl-brand-500: var(--cl-green-500);
--cl-brand-600: var(--cl-green-700);
--cl-brand-700: var(--cl-green-800);
/* Footer text/surfaces */
--cl-text-900: #0b3d1a;
--cl-text-700: #30543e;
--cl-text-500: #6b8779;
--cl-surface: #ffffff;
--cl-border: #cfe9d6;
}
html { font-family: var(--cl-font); }
body { font-family: inherit; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Convenience scope for archive + taxonomy pages */
/* Usage: .is-archive-scope matches all three page types via :is(...) */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) { /* empty block for grouping */ }
/* =========================================
Scroll Reveal (global)
Usage: add data-animate="reveal" to any element
========================================= */
[data-animate="reveal"]{opacity:0;transform:translateY(40px);transition:opacity 1s ease,transform 1s ease;will-change:opacity,transform}
[data-animate="reveal"].is-visible{opacity:1;transform:none;box-shadow:0 10px 24px rgba(0,0,0,.12)}
@media (prefers-reduced-motion: reduce){
[data-animate="reveal"], [data-animate="reveal"].is-visible{
opacity:1!important; transform:none!important; transition:none!important; box-shadow:none!important;
}
}
/* ==========================================================================
1) GLOBAL: PAGE SHELL & BACKGROUND
========================================================================== */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) {
background-image: var(--cl-page-gradient);
background-attachment: scroll;
background-repeat: no-repeat;
}
#primary.site-main { background: transparent; max-width: 1200px; margin: 0 auto; }
#main { background: transparent; max-width: 1200px; margin: 0 auto; }
@media (max-width: 1220px) {
#primary.site-main { padding: 0 10px; }
}
.page-wrap{margin:0 10px;}
@media (max-width: 640px) {
.cl-archive-header { margin-bottom: 12px; }
.cl-archive-intro { margin: 0 6px 12px; }
}
/* ==========================================================================
2) BREADCRUMBS & LEGACY H1
========================================================================== */
.cl-breadcrumbs { margin: 8px 0 6px; }
.cl-breadcrumbs ol { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; font-size: 14px; }
.cl-breadcrumbs a { color: var(--cl-green-800); padding-bottom:50px; text-decoration: none; text-transform: capitalize; }
/* Legacy Elementor-proof H1 (for templates still using .cl-archive-title) */
.cl-archive-header { margin: 0 0 18px; padding: 0; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-archive-header .cl-archive-title {
font-size: clamp(34px, 6vw, 56px);
font-weight: 900;
letter-spacing: .2px;
color: var(--cl-green-800);
margin: 0 6px 8px;
padding-top: 100px;
text-shadow: 1px 1px 1px #4bd560, 0 0 0 var(--cl-green-800);
text-transform: capitalize;
padding-left: 8px;
}
/* Optional intro line (kept minimal) */
.cl-archive-intro { margin: 0 6px 16px; color: #0f3013; max-width: 78ch; line-height: 1.5; padding-left: 8px; }
/* ==========================================================================
3) HERO (CONVERSION-FOCUSED)
========================================================================== */
.cl-hero { margin: 120px 6px 120px; padding: clamp(18px, 3.5vw, 28px) clamp(16px, 3vw, 26px); border-radius: 16px; background: var(--cl-hero-gradient); border: 2px solid #20df46; box-shadow: var(--cl-shadow-lg); }
.cl-hero__title { font-weight: 900; margin: 0 0 20px; font-size: clamp(32px, 5.6vw, 56px); line-height: 1.12; letter-spacing: -0.02em; color: #085d0b; text-shadow: none;}
.cl-hero__subtitle { margin: 0 0 14px; font-size: clamp(17px, 2.2vw, 20px); color: #1f3b2a; }
.cl-hero__subtitle a {color:inherit;}
.cl-hero__subtitle .cl-hero__dot { margin: 0 8px; opacity: .55; }
.cl-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
/* ==========================================================================
4) BUTTONS (BRAND-ALIGNED)
========================================================================== */
.cl-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: 999px; font-weight: 800; letter-spacing: .2px; text-decoration: none; cursor: pointer; transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; border: 1px solid transparent; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.cl-btn--primary { color: var(--cl-white); background: var(--cl-brand-gradient); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.cl-btn--primary:hover { color: #eefff1; transform: translateY(-1px); filter: brightness(1.03); }
.cl-btn--primary:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
.cl-btn--ghost { background: var(--cl-white); color: var(--cl-green-700); border-color: rgba(14,127,35,.22); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.cl-btn--ghost:hover { transform: translateY(-1px); filter: brightness(1.02); }
.cl-btn--ghost:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
/* ==========================================================================
5) PAGINATION (CENTERED TRAY)
========================================================================== */
.cl-pagination { margin-top: 25px; margin-bottom: 200px; display: flex; justify-content: center; }
.cl-pagination ul { display: flex; gap: 10px; list-style: none; padding: 10px 14px; margin: 0; background: rgba(255,255,255,.82); border: 1px solid var(--cl-gray-200); border-radius: 999px; box-shadow: var(--cl-shadow-lg); backdrop-filter: saturate(1.1) blur(6px); }
.cl-pagination li a, .cl-pagination li span { display: inline-block; min-width: 44px; text-align: center; padding: 10px 14px; border-radius: 999px; background: var(--cl-white); border: 1px solid var(--cl-gray-300); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.cl-pagination li .current { background: var(--cl-green-700); color: var(--cl-white); border-color: transparent; }
/* ==========================================================================
6) REVIEWS GRID & CARDS
========================================================================== */
.cl-reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; justify-items: center; align-items: stretch; list-style: none;}
.cl-grid-item { width: 100%; max-width: 360px; }
@media (max-width: 400px) { .cl-reviews-grid { grid-template-columns: 1fr; } .cl-grid-item { max-width: 100%; } }
/* Card */
.review-card { max-width: 360px; border-radius: 1rem; overflow: hidden; background: var(--cl-white); display: flex; flex-direction: column; position: relative; margin-bottom: 150px; font-family: var(--cl-font); box-shadow: var(--cl-shadow-lg); transition: transform .25s ease, box-shadow .25s ease; }
.review-card:hover { transform: translateY(-8px); box-shadow: var(--cl-shadow-xl); }
.image-wrapper { position: relative; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ribbon */
.review-card .ribbon { position: absolute; left: -74px; top: 14px; width: 260px; transform: rotate(-35deg); background: linear-gradient(90deg, #178c3f, #1fb163); color: var(--cl-white); font-weight: 800; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 0; z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.ribbon svg { flex: 0 0 18px; }
/* Content */
.content { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.headline { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; margin: 0; line-height: 1.25; color: #1f2235; }
.summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; margin: 2px 0 0; font-style: italic; color: var(--cl-gray-700); }
.stars-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.stars { position: relative; display: inline-block; line-height: 1; font-size: 1.2rem; letter-spacing: .12rem; }
.stars .base { color: var(--cl-gray-300); }
.stars .fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: var(--cl-gold-500); width: 0; }
.body { --lh: 1.45; line-height: var(--lh); color: #1f2235; font-size: .9rem; margin: 6px 0 0; max-height: calc(var(--lh) * 2.5em); overflow: hidden; position: relative; border-bottom: solid 1px var(--cl-gray-600); }
.body:after { content: '…'; position: absolute; right: 0; bottom: 0; height: 1.2em; line-height: 1.2em; padding-left: 8px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--cl-white) 55%); }
/* leaflet review Footer */
.meta { display: flex; justify-content: space-between; align-items: center; font-size: .65rem; color: var(--cl-gray-500); margin-top: 10px; gap: 8px; }
.seller-block { display: flex; flex-direction: column; }
.seller-name { font-weight: 600; font-size: .8rem; color:#333333;}
.verified { text-transform: uppercase; letter-spacing: 1px; color: #999; font-size: .6rem; white-space: nowrap; }
/* Type pill on cards */
a.type-pill { display: inline-block; background: #e8f0fe; color: var(--cl-blue-600); text-decoration: none; padding: 4px 10px; border-radius: 999px; font-weight: 600; line-height: 1; }
a.type-pill:hover { text-decoration: underline; }
/* ==========================================================================
7) MAP (LEAFLET) + TOGGLE + POPUP
========================================================================== */
.reviews-leaflet-map { background: var(--cl-gray-050); }
#reviews-map .reviews-leaflet-map, #reviews-map .leaflet-container { min-height: 520px; }
.leaflet-control-attribution { font-size: 11px; padding: 0 6px; }
/* Toggle + panel */
.cl-map-toggle { margin: 75px 6px 75px; display: grid; gap: 12px; justify-items: center; }
.cl-map-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; min-height: 44px; border: 0; border-radius: 999px; font-weight: 800; letter-spacing: .2px; color: var(--cl-white); background: var(--cl-brand-gradient); box-shadow: 0 8px 20px rgba(0,0,0,.18); cursor: pointer; transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; }
.cl-map-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
.cl-map-btn:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
.cl-map-wrap { width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.18); background: var(--cl-offwhite); margin: 6px 0 18px; scroll-margin-top: clamp(80px, 14vh, 140px);}
/* Popup card */
.cl-pop { max-width: 325px; font-family: var(--cl-font); color: #385645; }
.cl-pop-img img { width: 100%; height: auto; display: block; box-shadow: 0 6px 16px rgba(0,0,0,.12); margin-bottom: 10px; }
.cl-pop-headline { font-weight: 700; font-size: 14px; line-height: 1.25; margin: 0 0 6px; }
.cl-stars-row { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.cl-stars { position: relative; display: inline-block; line-height: 1; font-size: 14px; letter-spacing: .12rem; }
.cl-stars-base { color: var(--cl-gray-300); }
.cl-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color:#1dbd3d; width: 0; }
.cl-pop-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: #666; margin-top: 8px; }
.cl-pop-seller { font-weight: 600; color: #333; }
a.cl-pop-cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--cl-blue-600); color: var(--cl-white); text-decoration: none; font-weight: 700; font-size: 13px; }
a.cl-pop-cta:hover {
display: inline-flex;
align-items: center;
gap: .35ch;
border-radius: 12px !important;
background: #eaf8ee;
border: 1px solid #cbe7d1;
color: #38b000 !important;
font-weight: 900 !important;
letter-spacing: .01em;
font-size: 13px !important;
text-decoration: none;
text-transform: capitalize;
box-shadow: 0px 4px 10px 1px rgb(13 96 5 / 45%);
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow: 0 10px 18px rgba(26,115,232,.35);
}
/* ==========================================================================
8) TAXONOMY CHIPS (GLASS PILLS)
========================================================================== */
.cl-tax-list { margin: 10px 6px 50px; }
.cl-tax-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: stretch; }
.cl-tax-item a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 10px 14px; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.6)); backdrop-filter: blur(6px) saturate(1.2); -webkit-backdrop-filter: blur(6px) saturate(1.2); border: 1px solid rgba(11,93,11,0.25); box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; color: var(--cl-green-800); font-weight: 600; transition: all .2s ease; flex-wrap: nowrap; white-space: nowrap; }
.cl-tax-item a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.15); background: var(--cl-chip-grad-strong); border-color: rgba(11,93,11,.42); }
.cl-tax-item a:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
.cl-tax-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.cl-tax-count { flex: 0 0 auto; font-size: 12px; color: var(--cl-white); background: var(--cl-brand-gradient); border-radius: 999px; padding: 3px 9px; font-weight: 700; line-height: 1; margin-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 780px) { .cl-tax-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .cl-tax-grid { grid-template-columns: 1fr; } }
/* Group headings */
.cl-tax-heading { color: #085D0B;
font-size: clamp(28px, 5.2vw, 35px);
font-weight: 700; margin: 30px 8px 15px; letter-spacing: .02em; text-shadow: 1px 1px 1px #4bd560, 0 0 0 var(--cl-green-800); text-transform: none; }
/* Dim empty chips slightly */
.cl-tax-item.is-zero a { opacity: .70; border-color: rgba(0,0,0,.10); }
.cl-tax-item.is-zero a:hover { opacity: .82; }
/* Stack layout toggle */
.cl-tax-list.stack .cl-tax-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.cl-tax-list.stack .cl-tax-item a { width: 100%; min-width: 0; }
/* Property Type chips in Title Case */
.cl-tax--type .cl-tax-name { text-transform: capitalize; }
/* ==========================================================================
9) UTILITIES
========================================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ==========================================================================
10) LEGACY / CLEANUP
========================================================================== */
/* Hide legacy stats slab anywhere it still exists */
.cl-stats-bar { display: none; }
/* ==========================================================================
11) ELEMENTOR-PROOF OVERRIDES (ARCHIVE/TAX SCOPE)
========================================================================== */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn { all: unset; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 18px; border-radius: 999px; font: 800 16px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; letter-spacing: .2px; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, filter .15s ease, box-shadow .2s ease; color: var(--cl-green-700); background: var(--cl-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn--primary { color: var(--cl-white); background: var(--cl-brand-gradient); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn--ghost { color: var(--cl-green-700); background: var(--cl-white); border-color: rgba(14,127,35,.22); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn--primary:hover { filter: brightness(1.03); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero a.cl-btn[aria-disabled="true"] { opacity: .6; pointer-events: none; filter: none; transform: none; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-hero .elementor a.cl-btn { border-color: inherit; color: inherit; background: inherit; box-shadow: inherit; }
/* Map toggle button */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn { all: unset; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: 10px 16px; border-radius: 999px; font: 800 20px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; letter-spacing: .2px; cursor: pointer; user-select: none; text-decoration: none; color: var(--cl-green-700); background: var(--cl-white); border: 1px solid rgba(14,127,35,.22); box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: transform .15s ease, filter .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn:focus-visible { outline: 3px solid var(--cl-focus); outline-offset: 2px; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn:active { transform: translateY(0) scale(.99); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn[aria-expanded="true"] { background: linear-gradient(180deg, #e9f8ee, #d9f3e3); border-color: rgba(14,127,35,.35); box-shadow: inset 0 0 0 2px rgba(14,127,35,.08), 0 2px 10px rgba(0,0,0,.05); color: var(--cl-green-800); }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn[disabled],
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn[aria-disabled="true"] { opacity: .6; pointer-events: none; transform: none; filter: none; }
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .elementor .cl-map-btn { color: inherit; background: inherit; border-color: inherit; box-shadow: inherit; }
@media (max-width: 640px) { :is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .cl-map-btn {margin:35px 0; min-height: 46px; padding: 12px 18px; } }
/* ==========================================================================
12) COMPACT CHIPS VARIANT (NO STRETCH, TIGHT WRAP)
========================================================================== */
.cl-tax-list:not(.stack) .cl-tax-grid { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.cl-tax-list:not(.stack) .cl-tax-item { margin: 0; }
.cl-tax-list:not(.stack) .cl-tax-item a { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; min-height: 42px; border-radius: 999px; white-space: nowrap; max-width: 100%; background: var(--cl-chip-grad); border: 1px solid rgba(11,93,11,.25); box-shadow: 0 2px 8px rgba(0,0,0,.06); text-decoration: none; color: var(--cl-green-800); font-weight: 600; transition: all .2s ease; }
.cl-tax-list:not(.stack) .cl-tax-item a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.15); background: var(--cl-chip-grad-strong); border-color: rgba(11,93,11,.42); }
.cl-tax-list:not(.stack) .cl-tax-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.cl-tax-list:not(.stack) .cl-tax-count { flex: 0 0 auto; font-size: 12px; color: var(--cl-white); background: var(--cl-brand-gradient); border-radius: 999px; padding: 3px 9px; font-weight: 700; line-height: 1; margin-left: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .cl-tax-list:not(.stack) .cl-tax-item a { padding: 9px 12px; min-height: 40px; } .cl-tax-list:not(.stack) .cl-tax-name { font-size: 14px; } }
/* ==========================================================================
13) H3 — ELEMENTOR PROOFING
========================================================================== */
/* 1) Default H3 on Reviews archive + taxonomy pages (no !important) */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) h3 { font-family: var(--cl-font); font-weight: 800; line-height: 1.25; letter-spacing: .2px; color: var(--cl-green-800); margin: 14px 6px 8px; }
/* 2) Stronger guard for headings rendered by Elementor */
:is(body.post-type-archive-review, body.tax-review_state, body.tax-review_type) .elementor :is(h3, .elementor-heading-title) { font: 800 clamp(1.1rem, 2.2vw, 1.4rem)/1.25 var(--cl-font); letter-spacing: .2px; color: var(--cl-green-800); }
/* ==========================================================================
14) review card extras perfections
========================================================================== */
.review-card .headline-link { text-decoration: none; color: inherit; }
.review-card .headline-link:hover .headline { text-decoration: underline; }
.review-card .close-pill {
display:inline-block;padding:.2rem .5rem;border-radius:999px;
background:rgba(32,255,77,.17);border:1px solid rgba(14,127,35,.25);
font-size:.8rem;font-weight:700;white-space:nowrap; line-height:1;
}
/* Location pin */
.review-card .with-pin { display:inline-flex; align-items:center; gap:6px; }
.review-card .with-pin .pin { opacity:.8; }
/* CTA buttons */
.review-card .cta-row {
display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between;
margin-top:12px;
}
.review-card .btn {
display:inline-flex; align-items:center; gap:8px;
min-height:42px; padding:10px 14px; border-radius:999px;
font-weight:800; letter-spacing:.2px; text-decoration:none; cursor:pointer;
border:1px solid transparent; transition:transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.review-card .btn:hover { transform: translateY(-1px); filter: brightness(1.02); font-weight:800; }
.review-card .btn:focus-visible { outline:3px solid var(--cl-focus); outline-offset:2px; }
/* Primary = your brand gradient */
.review-card .btn-primary {
color: var(--cl-white);
background: var(--cl-brand-gradient);
box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
/* Ghost = subtle but obviously clickable */
.review-card .btn-ghost {
color: var(--cl-green-700);
background: var(--cl-white);
border-color: rgba(14,127,35,.22);
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
/* Make the headline link feel clickable but not shouty */
.review-card .headline-link { text-decoration:none; color:inherit; }
.review-card .headline-link:hover .headline { text-decoration:underline; }
/* ==== Review card small polish (add to style.css) ==== */
/* italicize quoted H3 and tighten type */
.review-card .headline.is-quote { font-style: italic; text-align: center; color:#085d0b; }
/* subline readability: a touch smaller & tighter */
.review-card .subline { font-size: .9rem; color: #2d2d2d; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.review-card .subline .loc-pin { margin-right: 4px; opacity:.9; }
/* date slimmer already handled in PHP; keep spacing comfortable */
.review-card .review-date { white-space: nowrap; }
a.state-pill:hover { text-decoration: underline; }
/* close-time chip */
.chip {
display:inline-flex;
align-items:center;
gap:6px;
margin: 8px 0 2px;
padding: 6px 12px;
border-radius: 999px;
font-weight: 700;
font-size: .8rem;
line-height: 1;
}
.chip--success { background: #ecfbf0; border: 1px solid #bde7c7; color: #0e7f23; }
/* friendlier Read story button */
.review-card .cta-btn {
display:inline-flex; align-items:center; gap:8px;
padding: 10px 14px;
border-radius: 999px;
background: var(--cl-blue-600);
color: var(--cl-white); text-decoration:none; font-weight:800; font-size:.9rem;
box-shadow: 0 8px 18px rgba(26,115,232,.25);
}
.review-card .cta-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
/* mini CTA feels more like an action */
.review-card .mini-link { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-weight:700; }
/* --- Final reviews archive polish --- */
/* Smooth star animation (cards + map popups) */
.stars .fill { transition: width .28s ease; } /* cards (width set inline in PHP) */
.cl-stars-fill { transition: width .28s ease; } /* leaflet popup star fill */
/* Mobile spacing: smaller gaps on small screens */
@media (max-width:640px){
.review-card{ margin-bottom: 60px; } /* was 150px */
.cl-map-toggle{ margin: 40px 6px; } /* was 75px */
}
/* Map button chevron rotation */
.cl-map-btn .chev{ transition: transform .2s ease; display:inline-block; }
.cl-map-btn[aria-expanded="true"] .chev{ transform: rotate(180deg); }
/* (Optional) Slightly tighter hero spacing sitewide for reviews pages */
.cl-hero{ margin: 96px 6px 50px; } /* was 120px top/bottom */
/* ===== Review card tightening ===== */
/* 1) Headline + body clamps = no tall cards */
.review-card .headline {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight:700;
}
.review-card .body {
--lh: 1.45;
line-height: var(--lh);
display: -webkit-box;
-webkit-line-clamp: 3; /* max 3 lines, fixed height */
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(var(--lh) * 3em);
margin-top: 4px;
}
/* 2) Narrative subline reads like a story, stays on one line */
.review-card .subline.narrative {
font-size: .86rem;
color: #1f2235;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.review-card .narrative__text { flex: 0 0 auto; }
/* 3) Consistent “pill” system (city + state + type share the look) */
.review-card .pill,
.review-card a.type-pill,
.review-card a.state-pill,
.review-card .city-pill {
text-transform: capitalize;
text-decoration: none;
}
.review-card a.type-pill:hover,
.review-card a.state-pill:hover {
text-decoration: underline; /* underline only, no weight change */
font-weight:800;
}
/* keep the old class names mapped to pill system */
.review-card .close-pill { composes: pill; } /* if PostCSS not available, keep your existing .close-pill block */
/* 4) Location pin spacing */
.review-card .with-pin { display:inline-flex; align-items:center; gap:6px; }
.review-card .with-pin .pin { opacity:.85; }
/* 6) Seller + Read story on one row; compact primary button */
.review-card .meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
.review-card .btn-compact {
display: inline-flex;
gap: 8px;
padding: 10px 12px;
margin: 0;
font-weight: 800;
font-size: .95rem;
background: rgba(255,255,255,.94);
border-radius: 10px;
align-items: center;
gap: 6px;
min-height: 36px;
width: auto;
align-items: center;
border: 2px solid #0b6f1e;
color: #0b6f1e;
text-decoration: none;
box-shadow: none;
}
.review-card .btn-compact:hover{font-weight:800; color: #0e7f23; background: #fff;}
/* 7) Footer CTA as a single full-width ghost button */
.review-card .cta-row--single { justify-content: flex-start; }
.review-card .btn-wide {
width: 100%;
justify-content: center;
}
/* 8) Subline dot separator stays subtle and fixed width */
.review-card .subline .dot {
width: 4px; height: 4px; border-radius: 50%;
background: #b9d9c1;
display: inline-block;
flex: 0 0 auto;
}
/* 9) Prevent layout shift on hover for any link inside card */
.review-card a { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 3px; }
.review-card a:hover { font-weight: inherit; } /* explicit guard */
/* 10) Micro spacing + shadows balanced for card height */
.review-card { margin-bottom: 110px; }
.review-card .content { gap: 4px; }
/* --- NEW UPDATE headline clamp to 2 lines (prevents tall cards) --- */
.review-card .headline{
--hfs: clamp(1.05rem, 2vw, 1.30rem);
font-size: var(--hfs);
line-height: 1.22;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(2 * 1.22em);
}
/* tighten body text & clamp a bit more */
.review-card .body{
font-size: .85rem;
--lh: 1.4;
max-height: calc(var(--lh) * 2.2em);
}
/* put offer CTA at the bottom consistently */
.review-card .content{display:flex;flex-direction:column;}
.review-card .cta-row{margin-top:auto;}
.review-card .content{gap:8px;}
/* STORYLINE row (Closed in … on my …) */
.review-card .storyline{
display:flex; flex-wrap:wrap; align-items:center; gap:6px;
font-size:.85rem; color:#1f2235;
}
.review-card .chip-text{opacity:.9;}
/* neutral chip + success chip */
.review-card .chip{
display:inline-flex; align-items:center; gap:6px;
padding:6px 8px; border-radius:999px; line-height:1; font-weight:700;
font-size:.78rem; white-space:nowrap;
}
.review-card .chip--plain{background:#f5f6f7;border:1px solid var(--cl-gray-300);color:#2d2d2d;}
.review-card .chip--success{background:#ecfbf0;border:1px solid #bde7c7;color:#0e7f23;}
/* clickable pills: type + unified location (no weight change on hover) */
a.type-pill,
a.state-pill,
.loc-pill{
display:inline-block;
padding:3px 10px; border-radius:999px; line-height:1;
border:1px solid rgba(11,93,11,.25);
background:#eef7ee; color:var(--cl-green-800);
font-weight:600; font-size:.8rem; text-decoration:none;
max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
a.type-pill{background:#e8f0fe; border-color:#d6e2ff;}
a.type-pill:hover,
a.state-pill:hover,
.loc-pill:hover{ text-decoration: underline; text-underline-offset: 2px; font-weight:600; }
/* subline tighter + consistent dot spacing */
.review-card .subline{padding-bottom:5px; font-size:.9rem; color:#2d2d2d; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.review-card .subline .dot{width:4px;height:4px;border-radius:50%;background:#c9d5c9;display:inline-block}
/* meta row with mini Read button on the right */
.review-card .meta{display:flex; align-items:center; gap:8px; margin-top:8px;}
.review-card .btn-read-mini{
margin-left:auto;
min-height:36px; padding:8px 12px;
font-size:.85rem; white-space:nowrap;
}
/* new state pill (clickable) */
a.state-pill {
display:inline-block;
padding: 3px 10px;
border-radius: 999px;
background: #eef7ee;
border: 1px solid rgba(11,93,11,.25);
color: var(--cl-green-800);
font-weight: 600;
font-size: .8rem;
text-decoration: none;
line-height: 1;
}
/* Let quoted headlines use up to 3 lines (others stay at 2) */
.review-card .headline.is-quote{
-webkit-line-clamp: 3;
min-height: calc(3 * 1.22em); /* keep rows even with your --hfs/line-height */
}
/* Or, if you want quotes fully untruncated everywhere, use this instead: */
.review-card .headline.is-quote{
display: block; /* stop using the -webkit-box clamp */
-webkit-line-clamp: unset;
-webkit-box-orient: initial;
overflow: visible;
max-height: none;
}
body.home .cl-rev-list__item:nth-child(-n+3) .headline{
-webkit-line-clamp: 3;
min-height: calc(3 * 1.22em);
}
/********* DYNAMIC Base stars [cl_rating_badge variant="pill" show_stars="1" show_total="1" precision="1"] ************/
.cl-stars {
position: relative;
display: inline-block;
line-height: 1;
font-size: 1.05em; /* adjust size as needed */
letter-spacing: .05em;
}
/* Gray outline layer */
.cl-stars__base {
color: #c7d5cc; /* muted gray/green */
}
/* Green fill layer clipped by width */
.cl-stars__fill {
position: absolute;
top: 0; left: 0;
white-space: nowrap;
overflow: hidden; /* critical: clip to % width */
color: #0b6f1e; /* brand green */
transition: width .25s ease, color .15s ease;
}
/* Pill style like your mock */
.cl-rating-badge--pill {
display: inline-flex;
align-items: center;
gap: .4em;
padding: .3em .7em;
border-radius: 999px;
background: #ffffff;
border: 2px solid #0b6f1e22; /* soft green border */
color: #0b6f1e;
font-weight: 600;
}
/* Text weight for the average */
.cl-rating-badge__avg { font-weight: 700; }
/* Hover: brighter green, subtle glow */
.cl-rating-badge--pill:hover,
.cl-rating-badge--pill:focus {
background: #0b6f1e; /* solid green */
color: #e9ffe9; /* light text */
border-color: #0b6f1e;
}
.cl-rating-badge--pill:hover .cl-stars__fill,
.cl-rating-badge--pill:focus .cl-stars__fill {
color: #bfffc2; /* bright minty green stars on hover */
}
.cl-rating-badge--pill:hover .cl-stars__base,
.cl-rating-badge--pill:focus .cl-stars__base {
color: #084d15; /* darker base for contrast */
}
/* SVG star stack with exact % fill */
/* --- Exact overlay for SVG stars (no drift) --- */
.cl-stars-svg{
--cl-star-size: 18px; /* tweak size here */
--cl-star-gap: 4px; /* tweak spacing here */
position: relative;
display: inline-block;
line-height: 0;
vertical-align: middle;
pointer-events: none; /* keep the whole badge clickable */
}
/* Both layers are laid out exactly the same */
.cl-stars-svg__base,
.cl-stars-svg__fill{
display: block;
white-space: nowrap;
}
/* Fixed px sizing avoids subpixel rounding differences from gap */
.cl-stars-svg__base .cl-star,
.cl-stars-svg__fill .cl-star{
width: var(--cl-star-size);
height: var(--cl-star-size);
display: inline-block;
margin-right: var(--cl-star-gap);
fill: currentColor;
}
.cl-stars-svg__base .cl-star:last-child,
.cl-stars-svg__fill .cl-star:last-child{
margin-right: 0;
}
/* Base layer stays a muted outline color (don’t change on hover) */
.cl-stars-svg__base{ color: #cfe9d6; }
/* Fill layer sits exactly on top, clipped by width */
.cl-stars-svg__fill{
position: absolute;
left: 0; top: 0;
overflow: hidden; /* critical: clip to width */
color: #0b6f1e; /* brand green */
transition: width .25s ease, color .15s ease;
will-change: width;
}
/* Pill/link hover: brighten ONLY the fill (base stays put) */
.cl-rating-badge--pill:hover .cl-stars-svg__fill,
a.cl-rating-link:hover .cl-stars-svg__fill,
.cl-rating-badge--pill:focus .cl-stars-svg__fill,
a.cl-rating-link:focus .cl-stars-svg__fill{
color: #bfffc2; /* bright mint on hover */
}
/* Keep these from earlier so the pill itself brightens on hover */
a.cl-rating-link{ display:inline-flex; text-decoration:none; color:inherit; align-items:center; }
a.cl-rating-link:hover .cl-rating-badge--pill,
a.cl-rating-link:focus .cl-rating-badge--pill{
background:#0b6f1e; color:#e9ffe9; border-color:#0b6f1e;
}
/* optional focus ring */
a.cl-rating-link:focus-visible{
outline:2px solid var(--cl-green-700);
outline-offset:3px;
border-radius:999px;
}
/* Pill container */
.cl-rating-pill{
--pill-bg: #fff;
--pill-text: #0e7f23;
--pill-shadow: 0 8px 22px rgba(0,0,0,.18);
--pill-border: 1px solid rgba(0,0,0,.08);
display:inline-flex; align-items:center; gap:10px;
padding:10px 14px; border-radius:999px;
background:var(--pill-bg); color:var(--pill-text);
font-weight:800; text-decoration:none;
box-shadow:var(--pill-shadow); border:var(--pill-border);
line-height:1;
}
.cl-rating-pill:hover{ filter:brightness(1.02); transform:translateY(-1px); transition:transform .15s; }
/* Stars: CSS mask with 5 repeated stars; FG overlays with fractional width */
.cl-pill-stars{
--star-size: 18px;
--star-gap: 6px;
--star-bg: #cfe9d6; /* light green */
--star-fg: #0b6f1e; /* dark green */
position:relative; display:inline-block; height:var(--star-size);
width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
background: var(--star-bg);
-webkit-mask-image: var(--cl-star-mask);
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: var(--star-size);
-webkit-mask-position: left center;
mask-image: var(--cl-star-mask);
mask-repeat: repeat-x;
mask-size: var(--star-size);
mask-position: left center;
}
/* the 5-star foreground (filled part) */
.cl-pill-stars__fg{
position:absolute; inset:0;
background: var(--star-fg);
-webkit-mask-image: var(--cl-star-mask);
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: var(--star-size);
-webkit-mask-position: left center;
mask-image: var(--cl-star-mask);
mask-repeat: repeat-x;
mask-size: var(--star-size);
mask-position: left center;
}
/* inline SVG star used as a mask (WHITE shape for alpha mask) */
:root{
--cl-star-mask: url('data:image/svg+xml;utf8,\
');
}
/* Tighten text side */
.cl-pill-text{ display:inline-flex; align-items:center; gap:.35ch; font-size:1.05rem; }
.cl-pill-text strong{ font-weight:900; }
.cl-pill-count{ opacity:.9; }
/* Card----new improved review card shell */
.review-card{
background:#fff; border:1px solid #e3f2e7; border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.06);
overflow:hidden; display:flex; flex-direction:column;
}
/* Image area */
.review-card .image-wrapper{ position:relative; display:block; }
.review-card .img-focus{ display:block; }
.review-card .review-img{
width:100%; height:auto;
aspect-ratio:16/9.5; /* uniform tiles */
object-fit:cover;
object-position: 50% var(--img-y, 92%); /* keep bottom band + nudge checkmark into view */
display:block;
border-bottom:1px solid #e8f4ec;
}
/* BOUGHT ribbon (top-right) */
.review-card .ribbon{
position:absolute; top:10px; right:-12px;
background:linear-gradient(135deg,#1ec24c,#0e7f23);
color:#fff; font-weight:900; font-size:.9rem;
padding:6px 12px; border-radius:999px;
box-shadow:0 6px 16px rgba(0,0,0,.14);
}
/* Content */
.review-card .content{ padding:14px 14px 16px; }
.review-card .headline{
margin:0 0 8px; font-weight:900; color:#0e7f23; font-size:1.02rem;
}
.review-card .headline.is-quote{ font-style:italic; }
/* subline pills */
.review-card .subline{ display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; color:#385645; font-weight:700; }
.review-card .close-pill,
.review-card .type-pill,
.review-card .state-pill{
display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px;
background:#eef9f1; border:1px solid #cfe9d6; color:#0e7f23; font-weight:800; text-decoration:none;
}
.review-card .type-pill.is-disabled{ pointer-events:none; opacity:.8; }
/* location */
.review-card .with-pin .pin{ margin-right:6px; color:#169c37; }
/* stars */
.review-card .stars-row{ margin-top:2px; }
.review-card .stars{ position:relative; display:inline-block; font-size:18px; line-height:1; color:#cfe0d0; }
.review-card .stars .base{ color:#bfe7c9; }
.review-card .stars .fill{
position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#1dbd3d;
}
/* body */
.review-card .body{ margin:10px 0 12px; color:#2b2b2b; font-weight:600; }
/* bottom row */
.review-card .meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-card .seller-block{ display:flex; flex-direction:column; color:#1d5a35; font-weight:800; }
.review-card .seller-block .verified{ font-weight:500; color:#50715f; font-size:1.1em; }
/* buttons */
.review-card .btn-ghost.btn-wide{
display:block; width:100%; text-align:center; margin-top:10px;
border:2px solid #cfe9d6; color:#fff; background: linear-gradient(180deg,var(--cl-brand-500),var(--cl-brand-700)); font-weight:700; padding:12px 14px; border-radius:12px;
}
.review-card .btn-ghost.btn-wide:hover{ background: linear-gradient(135deg, rgb(23, 178, 56), rgb(12, 114, 31)); border-color:#28b24a; color: #fff;
transform: translateY(-1px);
filter: brightness(1.02);
font-weight: 700;}
/* Responsive touch-ups */
@media (max-width:520px){
.review-card .headline{ font-size:1rem; }
}
/****************** Map container (unchanged) ********************NEW*/
.reviews-leaflet-map { background: var(--cl-gray-050); }
#reviews-map .reviews-leaflet-map,
#reviews-map .leaflet-container { min-height: 520px; }
/* --- POPUP: compact card --- */
.leaflet-popup-content-wrapper { border-radius: 12px; }
.cl-pop{
font-family: var(--cl-font, Inter, system-ui, sans-serif);
line-height:1.35;
}
/* thumbnail: fixed ratio & height so the popup never gets tall */
.cl-pop-img{ position: relative; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.12); margin-bottom:8px; }
.cl-pop-img::before{ content:""; display:block; aspect-ratio:16/9.5; } /* keeps height */
.cl-pop-img img{
position:absolute; inset:0;
width:100%; height:100%; object-fit:cover; object-position:center 90%; /* nudge down a bit */
}
/* headline & summary with clamps so they never blow up height */
.cl-pop-headline{ font-weight:800; font-size:14px; margin:0 0 4px; }
.cl-pop-headline,
.cl-pop-body{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; text-align:center; font-weight:900; }
.cl-pop-headline{ -webkit-line-clamp:2; }
/* chips / meta rows */
.cl-pop-chips,.cl-pop-loc,.cl-pop-date{ font-size: .9rem; color:#385645; font-weight:700; }
.cl-pop-chips{ display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
background: #eef9f1;
border: 1px solid #cfe9d6;
color: #0e7f23;
font-weight: 800;
text-decoration: none;}
.cl-pop-meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:#666; margin-top:8px; }
.cl-pop-seller{ font-weight:600; color:#333; }
/* stars */
.cl-stars-row{ display:flex; align-items:center; gap:6px; margin:6px 0 0; }
.cl-stars{ position:relative; display:inline-block; line-height:1; font-size:14px; letter-spacing:.12rem; }
.cl-stars-base{ color:var(--cl-gray-300,#d0d5dd); }
/* CTA */
a.cl-pop-cta{
display:inline-flex; align-items:center; justify-content:center;
margin-top:8px; padding:8px 12px; border-radius:10px; text-transform: capitalize;
color:#fff !important; text-decoration:none; font-weight:800; font-size:13px;
}
.cl-pop-body { line-height:1.35; font-style: italic; color: #085d0b; }
.cl-pop-body{ font-size:15px; margin: 15px 0; -webkit-line-clamp:3; }
/* ---- Mini review card inside Leaflet popups ---- */
.cl-pop { font-family: var(--cl-font, Inter), system-ui, sans-serif;}
leaflet-popup-content{width:200px;}
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.cl-pop--mini .cl-pop-img { border-radius: 12px 12px 0 0; display:block; overflow:hidden; margin: -11px -14px 0 -13px; padding: 0px;}
.cl-pop--mini .cl-pop-img img { width:100%; height:auto; display:block; aspect-ratio:16/9.5; object-fit:cover; object-position: 50% var(--img-y, 100%); }
.pill {
display:inline-flex; align-items:center; gap:.35ch;
padding:.42rem .7rem; border-radius:999px;
background:#eaf8ee; border:1px solid #cbe7d1;
color:#0e7f23; font-weight:800; letter-spacing:.01em; font-size:12px; text-decoration:none;
}
.pill--ghost { background:#f4fff7; }
.pill:hover { filter:brightness(1.03); }
.cl-stars-row { display:flex; align-items:center; margin-top:4px; }
.cl-stars { position:relative; display:inline-block; font-size:14px; letter-spacing:.12rem; line-height:1; }
.cl-stars-base { color:#c9d6c9; }
.cl-stars-fill { position:absolute; inset:0 auto 0 0; overflow:hidden; white-space:nowrap; color:#1dbd3d; }
.cl-pop-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px; font-size:12px; color:#566; }
.cl-pop-meta a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
a.cl-pop-cta {
display:block; text-align:center; margin-top:12px; padding:10px 14px;
background: linear-gradient(135deg,#26c044,#0e7f23); color:#fff; font-weight:900;
border-radius:12px; text-decoration:none; box-shadow:0 12px 26px rgba(0,0,0,.16);
}
/* Footer row */
.cl-pop-footer{
display:flex; align-items:center; justify-content:space-between;
gap:14px; margin-top:14px;
}
/* Seller block */
.cl-pop-person{min-width:0}
.cl-pop-name{font-weight:600; color:#1a1a1a; line-height:1.1}
.cl-pop-verified{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#4e6b5a;}
/* Button */
.cl-pop-cta{
display:inline-flex; align-items:center; justify-content:center;
padding:10px 16px; border-radius:14px;
background:linear-gradient(180deg,#17a240,#0f8c32);
color:#fff; font-weight:700; text-decoration:none; white-space:nowrap;
box-shadow:0 8px 18px rgba(0,128,0,.25);
}
.cl-pop-cta:hover{filter:brightness(1.05)}
.cl-pop-cta__arr{display:inline-block; margin-left:10px; font-size:18px; line-height:0}
/* Meta (if you haven't added this yet) */
.cl-pop-meta{font-size:12px; color:#365; display:flex; gap:.35rem; align-items:center; margin-top:8px}
.cl-pop-meta .dot{opacity:.4}
/* Top meta line above stars */
.cl-pop-metaTop{
margin-top:8px;
font-size:12px;
display:flex; gap:.35rem; align-items:center; flex-wrap:wrap;
}
.cl-pop-metaTop .dot{opacity:.4}
/* Stars + date on one row */
.cl-pop-ratingRow{
display:flex; align-items:center; gap:10px;
margin-top:6px;
}
.cl-pop-ratingRow .cl-stars-row{line-height:1}
.cl-pop-date{font-size: .9rem; color:#385645}
/* Footer (seller + button) — from previous step */
.cl-pop-footer{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:14px}
.cl-pop-person{min-width:0}
.cl-pop-name{font-weight:600; color:#1a1a1a; line-height:1.1}
.cl-pop-verified{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#4e6b5a}
.cl-pop-cta{display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:14px; background:linear-gradient(180deg,#17a240,#0f8c32); color:#fff; font-weight:700; text-decoration:none; white-space:nowrap; box-shadow:0 8px 18px rgba(0,128,0,.25)}
.cl-pop-cta:hover{filter:brightness(1.05)}
.cl-pop-cta__arr{display:inline-block; margin-left:10px; font-size:18px; line-height:0}
/* Inline pin next to location text */
.cl-pop-metaLine{
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 8px 0;
}
.cl-pop-loc{
display: inline-flex;
align-items: center;
gap: 6px;
}
.cl-pop-loc .pin{
width: 14px;
height: 14px;
flex: 0 0 auto;
opacity: .9;
/* Optional: small nudge so it visually centers with text cap height */
transform: translateY(-1px);
}
/* Make the facts row align cleanly */
.cl-pop-pills{
display:flex;
align-items:center; /* <-- fixes the vertical jump */
gap:8px;
flex-wrap:wrap;
}
/* Ensure pills and acreage sit on the same center line */
.cl-pop-pills .pill,
.cl-pop-acre{
display:inline-flex;
align-items:center;
line-height:1;
padding: 4px 8px;
gap: .35ch;
border-radius: 999px;
background: #eaf8ee;
border: 1px solid #cbe7d1;
color: #0e7f23;
font-weight: 800;
letter-spacing: .01em;
font-size: 12px;
text-decoration: none;
text-transform: capitalize;
}
.cl-pop-acre{ font-size: .9rem; color:#385645; line-height:1; padding:0; background:none; border:0; font-weight:700; }
/
/* SR-only utility (if not already defined globally) */
.sr-only{
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 1px, 1px);
white-space: nowrap; border: 0;
}
/* Be explicit with the inner ![]()
too */
.leaflet-container .cl-pop-img img {
display: block;
width: 100%;
height: auto;
pointer-events: none; /* keeps hover on the anchor, prevents flicker */
}
body {
background-image: linear-gradient(180deg, #00B140 0%, #F2F2F2 100%);
}
/* Make the header stretch full width */
.custom-header {
background-color: white;
width: 100%;
position: relative;
z-index: 10;
}
/* Contain the inner content */
.custom-header .header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 32px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Base grid */
.cl-rthumbs{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:18px;
/* 3-up, but never smaller than 220px; items wrap instead of shrinking */
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
/* Cards */
.cl-rthumbs__item{
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,.18);
transition:transform .15s ease, box-shadow .15s ease;
}
.cl-rthumbs__item:hover{
transform:translateY(-3px);
box-shadow:0 16px 32px rgba(0,0,0,.22);
}
.cl-rthumbs__link{ display:block; }
/* Images (consolidated to one rule) */
.cl-rthumbs__item img{
display:block;
width:100%;
height:auto;
object-fit:cover;
aspect-ratio:16/9; /* pick one ratio and stick to it */
object-position:50% var(--img-y, 100%);
}
/* Tablet: prefer 2-up if you want a fixed breakpoint (optional) */
@media (max-width: 900px){
.cl-rthumbs{
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
/* Mobile: force single column stack */
@media (max-width: 640px){
.cl-rthumbs{
grid-template-columns: 1fr; /* <-- correct target (plural) */
gap:14px;
}
}
/* Archive Review page form */
.cl-offer-wrap{margin:80px 0}
#leadFormArchive{display:grid;grid-template-columns:1fr;gap:10px}
#leadFormArchive label{font-weight:600}
#leadFormArchive input{width:100%;padding:12px 14px;border:1px solid #cfd9cf;border-radius:10px;font-size:16px;background:#fff}
#leadFormArchive .form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
@media (min-width:860px){
#leadFormArchive{grid-template-columns:1fr 1fr}
#leadFormArchive label[for="address"], #leadFormArchive #address,
#leadFormArchive label[for="state"], #leadFormArchive #state,
#leadFormArchive label[for="acres"], #leadFormArchive #acres {grid-column:1/-1}
#leadFormArchive .form-actions{grid-column:1/-1}
}
.testimonial-carousel{max-width:1200px;margin:20rem auto 20rem;padding:28px 16px;background:linear-gradient(180deg,#f3fcf6 0%,#eef9f1 100%);border:1px solid #e3f2e7;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06);}
.testimonial-carousel.is-visible{opacity:1;transform:none}
#testimonials-title{
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,3.4vw,44px);
font-weight: 900;
color: #085917;
margin: 10px 0 2px;
text-align:center;
}
.testimonial-carousel .clq-wrap{position:relative;isolation:isolate}
.testimonial-carousel .cl-qc{display:grid;gap:18px;place-items:center}
.testimonial-carousel .cl-qc__track{position:relative;min-height:120px;width:100%}
.testimonial-carousel .cl-qc__slide{position:absolute;inset:0;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease;display:grid;gap:10px;place-items:center;text-align:center;padding:0 16px;z-index:1;pointer-events:none}
.testimonial-carousel .cl-qc__slide.is-active{opacity:1;transform:translateY(0);z-index:3;pointer-events:auto}
.testimonial-carousel .cl-qc__stars{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));color:#0e7f23;letter-spacing:4px;font-size: clamp(25px,3.4vw,30px);}
.testimonial-carousel .cl-qc__quote{font-style:italic;font-size:clamp(18px,2.2vw,22px);line-height:1.6;color:#333;margin:0;max-width:900px}
.testimonial-carousel .cl-qc__name{color:#1f522b;font-weight:700}
.testimonial-carousel .cl-qc__meta{color:#2a5534;font-weight:700}
.testimonial-carousel .cl-qc__meta .cl-qc__loc{display:block;color:#607d6b;font-weight:600;margin-top:4px}
.testimonial-carousel .cl-qc__cover{position:absolute;inset:-8px;z-index:2;cursor:pointer}
.testimonial-carousel .cl-qc__slide :is(.cl-qc__stars,.cl-qc__quote,.cl-qc__meta){position:relative;z-index:3;pointer-events:none}
.testimonial-carousel .cl-qc__cover:focus-visible{outline:2px solid #0e7f23;outline-offset:6px;border-radius:12px}
.testimonial-carousel .cl-qc__nav{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.testimonial-carousel .cl-qc :is(.cl-qc__btn,.cl-qc__dot){border-radius:999px;box-shadow:none;-webkit-appearance:none;appearance:none;display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;user-select:none;font:800 16px/1 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans"}
.testimonial-carousel .cl-qc__btn{width:38px;height:38px;border-radius:999px!important;border:1px solid #cfe9d6;background:#eef9f1;color:#0e7f23;box-shadow:0 4px 10px rgba(0,0,0,.08)!important;transition:transform .15s ease,box-shadow .15s ease}
.testimonial-carousel .cl-qc__btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.testimonial-carousel .cl-qc__dots{display:flex;gap:10px;align-items:center}
.testimonial-carousel .cl-qc__dot{width:10px;height:10px;border-radius:999px;border:1px solid #a9d8b7;background:#cfe9d6}
.testimonial-carousel .cl-qc__dot[aria-selected="true"]{background:#0e7f23;transform:scale(1.15)}
.testimonial-carousel .clq-wrap{position:relative;isolation:isolate;--card-bg:#fff;--card-br:#cfe9d6;--text:#253027;--muted:#56725f}
.testimonial-carousel :where(.swiper,.slick-slider,.glide,.clq-carousel){overflow:visible}
.testimonial-carousel :where(.clq-card,.testimonial,.slide,.swiper-slide,.slick-slide){padding:0 10px}
.testimonial-carousel :where(.clq-card > *, .testimonial > *, .slide > *){box-sizing:border-box}
.testimonial-carousel :where(blockquote,.clq-card,.testimonial){background:var(--card-bg);border:2px solid var(--card-br);border-radius:14px;padding:22px 18px;color:var(--text);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.testimonial-carousel :where(blockquote p,.clq-quote,.testimonial__text){margin:0 0 12px;font-weight:650;line-height:1.45}
.testimonial-carousel :where(cite,.clq-author,.testimonial__author){display:flex;align-items:center;gap:10px;font-style:normal;font-weight:900;color:#0e7f23}
.testimonial-carousel :where(.clq-location,.testimonial__meta){color:var(--muted);font-weight:700;opacity:.9;margin-left:auto}
.testimonial-carousel :where(img[class*="avatar"],.testimonial__avatar img){width:36px;height:36px;border-radius:999px;object-fit:cover;border:1px solid #cfe9d6;background:#fff}
.testimonial-carousel :where(.stars,.rating,.clq-stars){color:#0e7f23;margin:4px 0 0;font-weight:900}
.testimonial-carousel :where(.swiper-pagination-bullet,.slick-dots li button,.glide__bullet){width:10px;height:10px;border-radius:999px;background:#bfe9c9;opacity:.9;border:none;box-shadow:none}
.testimonial-carousel :where(.swiper-pagination-bullet-active,.slick-dots li.slick-active button,.glide__bullet--active){background:#22b43f}
.testimonial-carousel :where(.slick-dots){display:flex!important;gap:8px;justify-content:center;margin:14px 0 6px}
.testimonial-carousel :where(.slick-dots li){margin:0}
.testimonial-carousel :where(.swiper-button-prev,.swiper-button-next,.slick-prev,.slick-next,.glide__arrow){color:#0e7f23;background:#fff;border:1px solid #cfe9d6;border-radius:999px;width:36px;height:36px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.testimonial-carousel :where(.swiper-button-prev,.slick-prev,.glide__arrow--left){left:-8px}
.testimonial-carousel :where(.swiper-button-next,.slick-next,.glide__arrow--right){right:-8px}
@media (prefers-reduced-motion: reduce){ .testimonial-carousel{ transition:none; } }
/* --- Quote carousel overlap fix --- */
#testimonial-carousel .cl-qc__track{
position: relative;
width: 100%;
}
/* All slides stacked absolutely… */
#testimonial-carousel .cl-qc__slide{
position: absolute;
left: 0; right: 0; top: 0; /* NOTE: no bottom here */
opacity: 0;
transform: translateY(6px);
pointer-events: none;
}
/* …but the active slide becomes relative, so it sets the height */
#testimonial-carousel .cl-qc__slide.is-active{
position: relative; /* <- key change */
opacity: 1;
transform: none;
pointer-events: auto;
}
/* Keep the nav off the text */
#testimonial-carousel .cl-qc__nav{
display: flex; gap: 12px; align-items: center; justify-content: center;
flex-wrap: wrap;
}
/* Make dots truly small circles and ignore global button styles */
#testimonial-carousel .cl-qc__dot{
width: 10px !important;
height: 10px !important;
padding: 0 !important;
line-height: 0 !important;
border-radius: 9999px !important;
border: 1px solid #a9d8b7 !important;
background: #cfe9d6 !important;
box-shadow: none !important;
}
#testimonial-carousel .cl-qc__dot[aria-selected="true"]{
background: #0e7f23 !important;
transform: scale(1.1);
}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:12px;font-weight:800;line-height:1.15;border:2px solid transparent;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .15s,box-shadow .2s,background .2s,color .2s}
.btn-primary{
font-size: clamp(1.05rem,3.8vw,1.25rem);
line-height: 1.3;
padding: 1.5rem 2rem; /* ≈ 90px tall total */
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
border: 3px solid #cfe9d6;
cursor: pointer;
letter-spacing: .2px;
background: linear-gradient(180deg,var(--cl-brand-500),var(--cl-brand-700));
min-width: 200px;
font-weight: 800;
color: #fff;
width: 100%;
min-height: 54px;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;background:linear-gradient(135deg,#17b238,#0c721f);color:#fff;font-weight:800}
.pulse{animation:pulse 2.6s ease-in-out infinite}
.float{animation:float 2.5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){.pulse,.float{animation:none!important}}
.cl-rev-list{margin:10px 0 24px}
.cl-rev-list__grid{display:grid;gap:24px;grid-template-columns:1fr;justify-items:center}
@media (min-width:680px){ .cl-rev-list__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .cl-rev-list__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cl-rev-list .cl-rev-list__item{display:block}
.cl-rev-list .review-card{margin:50px auto 50px}
/* =============================
Bottom Form (Global)
============================= */
.bottom-form{max-width:1200px;margin-bottom:350px;margin-top:350px;background:#fff;border:1px solid #e3f2e7;border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.06);padding:28px 16px 24px;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.bottom-form.is-visible{opacity:1;transform:none}
.bf-wrap{max-width:900px;margin:0 auto}
.bottom-form h2{margin:0 0 14px;text-align:center;color:#0c6f1e;font-weight:900;letter-spacing:-.01em;font-size:clamp(26px,3.2vw,36px)}
.bf-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr;margin:6px 0 14px}
.bf-grid .field--wide{grid-column:1 / -1}
@media (max-width:720px){ .bf-grid{ grid-template-columns:1fr; } }
.bottom-form .field label{display:block;font-weight:800;color:#184a2a;margin:0 0 6px}
.bottom-form .field input{width:100%;padding:14px 14px;border-radius:10px;border:1px solid #cfe3d2;background:#f8fff9;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s}
.bottom-form .field input:focus{border-color:#28b24a;box-shadow:0 0 0 3px rgba(40,178,74,.25)}
.bottom-form .bf-submit{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-width:280px;margin:6px auto 0;width:100%}
.bottom-form .bf-submit .spinner{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.6);border-top-color:#fff;animation:clspin .8s linear infinite}
.bottom-form .bf-submit[aria-busy="true"] .spinner{display:inline-block}
@keyframes clspin{to{transform:rotate(360deg)}}
.bf-trust{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;color:#2b5d39;font-weight:700;text-align:center}
.bf-trust img{width:44px;height:44px;border-radius:999px}
.btn-compact{padding:12px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;min-height:36px;font-size:.86rem;box-shadow:0 6px 14px rgba(0,0,0,.14);width:auto;border:1px solid transparent}
.btn-ghost.btn-wide{box-shadow:none;padding:14px 14px}
.bf-trust a{font-weight:500;color:#0b6f1e}
/* Minor link cleanup inside trust items */
.trust-item a{background:none;border:0;box-shadow:none;padding:0;margin:0}
#cl-faq .section-animate.is-visible{ opacity: 1;transform: none;}
.btn-offer-button{
text-decoration: none;
background: linear-gradient(135deg,#17b238,#0c721f);
color: #fff;
font-weight: 800;
}
/* === Accessibility Utility === */
/* Use for headings or text that should be read by screen readers but hidden visually */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.rating-pill{
display: inline-flex;
align-items: center;
gap: .6rem;
padding: .55rem .9rem;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
border: 1px solid rgba(255,255,255,.6);
color: var(--cl-green-900);
box-shadow: 0 10px 24px rgba(0,0,0,.08);
font-weight: 800;
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
}
/* Pill/link hover: brighten ONLY the fill (base stays put) */
.rating-badge--pill:hover .stars-svg__fill,
a.rating-link:hover .stars-svg__fill,
.rating-badge--pill:focus .stars-svg__fill,
a.rating-link:focus .stars-svg__fill {
color: #bfffc2; /* bright mint on hover */
}
/* Keep these from earlier so the pill itself brightens on hover */
a.rating-link {
display: inline-flex;
text-decoration: none;
color: inherit;
align-items: center;
}
a.rating-link:hover .rating-badge--pill,
a.rating-link:focus .rating-badge--pill {
background: #0b6f1e;
color: #e9ffe9;
border-color: #0b6f1e;
}
/* Optional focus ring */
a.rating-link:focus-visible {
outline: 2px solid var(--green-700);
outline-offset: 3px;
border-radius: 999px;
}
/* Pill container */
.rating-pill {
--pill-bg: #fff;
--pill-text: #0e7f23;
--pill-shadow: 0 8px 22px rgba(0,0,0,.18);
--pill-border: 1px solid rgba(0,0,0,.08);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: var(--pill-bg);
color: var(--pill-text);
font-weight: 800;
text-decoration: none;
box-shadow: var(--pill-shadow);
border: var(--pill-border);
line-height: 1;
}
.rating-pill:hover {
filter: brightness(1.02);
transform: translateY(-1px);
transition: transform .15s;
}
/* Stars: CSS mask with 5 repeated stars; FG overlays with fractional width */
.pill-stars {
--star-size: 18px;
--star-gap: 6px;
--star-bg: #cfe9d6; /* light green */
--star-fg: #0b6f1e; /* dark green */
position: relative;
display: inline-block;
height: var(--star-size);
width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
background: var(--star-bg);
-webkit-mask-image: var(--star-mask);
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: var(--star-size);
-webkit-mask-position: left center;
mask-image: var(--star-mask);
mask-repeat: repeat-x;
mask-size: var(--star-size);
mask-position: left center;
}
/* the 5-star foreground (filled part) */
.pill-stars__fg {
position: absolute;
inset: 0;
background: var(--star-fg);
-webkit-mask-image: var(--star-mask);
-webkit-mask-repeat: repeat-x;
-webkit-mask-size: var(--star-size);
-webkit-mask-position: left center;
mask-image: var(--star-mask);
mask-repeat: repeat-x;
mask-size: var(--star-size);
mask-position: left center;
}
/* inline SVG star used as a mask (WHITE shape for alpha mask) */
:root {
--star-mask: url('data:image/svg+xml;utf8,\
');
}
/* Tighten text side */
.pill-text {
display: inline-flex;
align-items: center;
gap: .35ch;
font-size: 1.05rem;
}
.pill-text strong { font-weight: 900; }
.pill-count { opacity: .9; }
/* ===== Hero (scoped) ===== */
.hero-card{
margin: clamp(24px, 4vw, 48px) auto;
max-width: 1050px;
padding: clamp(18px, 3vw, 28px);
}
.hero-card__inner{
border-radius: 18px;
background: var(--cl-hero-gradient);
border: 1.5px solid rgba(11,127,35,.25);
box-shadow: var(--cl-shadow-lg);
}
.hero-title{
margin: 0 0 10px;
font-weight: 900;
font-size: clamp(28px, 5.2vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--cl-green-900);
}
.hero-title .brand-word{ color: var(--cl-green-700); font-style: normal; }
.nowrap{ white-space: nowrap; }
.hero-subhead{
margin: 6px 0 14px;
font-size: clamp(16px, 2.2vw, 20px);
color: #1f3b2a;
max-width: 78ch;
}
/* Trust bar */
.trust-bar{
display: flex; flex-wrap: wrap; gap: 10px;
margin: 10px 0 14px; padding: 0;
list-style: none;
}
.trust-item, .trust-link{
display: inline-flex; align-items: center; gap: .45rem;
padding: .5rem .75rem;
border-radius: 999px;
background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.65));
border: 1px solid rgba(11,93,11,.25);
color: var(--cl-green-800);
font-weight: 800; text-decoration: none;
}
.trust-item .trust-icon, .trust-link .trust-icon{ opacity:.9; }
/* CTAs (uses your button system) */
.hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }
/* Logo (optional) */
.hero-logo{ margin-top: 14px; }
.hero-logo img{
width: min(300px, 60vw);
height: auto;
border-radius: 16px;
border: 8px solid #fff; /* lighter than the 21px you had for cleaner mobile */
}
/* Accessibility helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
/* Mobile tweaks */
@media (max-width:640px){
.hero-logo img{ width: 200px; border-width: 6px; }
}
/* ───────── Single Review (scoped) ───────── */
.cl-review-single :where(*){box-sizing:border-box}
.cl-review-single img{max-width:100%;height:auto;display:block}
.cl-review-single .cl-sec-h{font-size:clamp(20px,2.6vw,24px);margin:20px 0 12px;font-weight:800;color:#0b6a1d}
.cl-review-single .cl-rv-title{font-size:clamp(28px,4.5vw,44px);line-height:1.25;margin:0 0 10px;color:#0b6a1d;font-weight:900}
.cl-rv-hero{position:relative;border-radius:16px;overflow:hidden;margin:12px 0 22px}
.cl-rv-hero__media{position:relative;isolation:isolate}
.cl-rv-hero__media img{width:100%;height:clamp(260px,36vw,460px);object-fit:cover;object-position:center}
.cl-hero-overlay{position:absolute;inset:0;z-index:1;background:
linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.18)),
radial-gradient(70% 60% at 50% 30%,rgba(0,0,0,.12),transparent)}
.cl-rv-hero__body{position:relative;z-index:2;padding:16px 16px 18px;background:#fff}
.cl-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 6px}
.cl-chip{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;background:#eef9f1;border:1px solid #cfe9d6;color:#0e7f23;font-weight:800;text-decoration:none}
.cl-chip--rating{gap:6px}
.cl-rv-subline{margin:6px 0 10px;color:#27472a;font-size:clamp(14px,2.4vw,16px)}
.cl-rv-trust{display:flex;align-items:center;gap:10px;color:#27472a}
.cl-rv-trust .cl-dot{opacity:.4}
.cl-rv-wrap{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width: 960px){
.cl-rv-wrap{grid-template-columns:minmax(0,1fr) 360px}
}
.cl-rv-main{min-width:0}
/* Quote */
.cl-quote{margin:0;padding:16px;border:1px solid #e1efe5;border-radius:14px;background:#f6fbf7}
.cl-quote__stars{margin-bottom:6px}
.cl-quote p{font-size:clamp(18px,2.6vw,20px);line-height:1.5;margin:0 0 8px}
.cl-quote footer{color:#27472a}
/* Facts list */
.cl-kv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.cl-kv li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid #e1efe5;border-radius:12px;background:#fff}
.cl-kv li span{color:#395f3e}
.cl-kv li strong{color:#0b6a1d}
/* Map */
.cl-rv-map .cl-map-help{font-size:13px;color:#3a5c3f;margin:6px 0 0}
.cl-rv-map-cta{margin-top:10px}
/* Related */
.cl-related__grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media (min-width:680px){ .cl-related__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .cl-related__grid{grid-template-columns:repeat(3,1fr)} }
/* Side cards */
.cl-rv-side .cl-card{border:1px solid #e1efe5;border-radius:16px;overflow:hidden;background:#fff;margin-bottom:14px}
.cl-card__title{margin:0;padding:14px 14px 0;font-size:18px;font-weight:800;color:#0b6a1d; font-style:italic;}
.cl-card--cta p{padding:8px 14px 0;margin:0;color:#27472a}
.cl-card--cta .cl-btn{display:inline-flex;margin:12px 14px 14px;padding:12px 16px;border-radius:12px;border:2px solid var(--green-800,#0b6a1d);background:linear-gradient(135deg,var(--green-600,#1dbd3d),var(--green-700,#0e7f23));color:#fff;font-weight:800;text-decoration:none}
.cl-trust{padding:0 14px 14px;color:#27472a}
/* Next/prev */
.cl-nextprev{margin:18px 0}
.cl-nextprev__inner{display:flex;justify-content:space-between;gap:10px}
.cl-nextprev a{text-decoration:none;font-weight:800;color:#0e7f23}
.cl-nextprev a:hover{text-decoration:underline}
/* Card (used in related) */
.cl-card{
max-width: 250px; border-radius: 1rem; overflow: hidden; background: var(--cl-white); display: flex; flex-direction: column; position: relative; margin-bottom: 150px; font-family: var(--cl-font); box-shadow: var(--cl-shadow-lg); transition: transform .25s ease, box-shadow .25s ease;
display:block;border:1px solid #e1efe5;
border-radius:16px;overflow:hidden;
background:#fff;color:inherit;text-decoration:none;
align-items:center;
}
.cl-card__media img{width:100%;height:180px;object-fit:cover;
position: relative; width: 100%; overflow: hidden; display: flex;
align-items: center; justify-content: center;
background:#fff; border:1px solid #e3f2e7; border-radius:14px;
box-shadow:0 6px 16px rgba(0,0,0,.06);
overflow:visible; display:flex; flex-direction:column;
}
.cl-card__media{
width: 100%;
height: 180px;
object-fit: cover;
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid #e3f2e7;
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,.06);
display: contents;
flex-direction: column;
}
.cl-card__body{padding:12px}
.cl-card__title{font-size:18px;color:#0b6a1d; font-style: italic; padding:10px;}
.cl-card__meta{margin:8px 0 0;color:#395f3e;font-size:13px}
/* Stars (accessible) */
.cl-stars{position:relative;display:inline-block;line-height:1}
.cl-stars__base{color:#cbd5cb}
.cl-stars__fill{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#0e7f23}
/* Grid container (archive & related) */
.cl-reviews-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media (min-width:680px){ .cl-reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .cl-reviews-grid{grid-template-columns:repeat(3,1fr)} }
.trust-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
border-radius: 999px;
background: #e9f9ee;
color: #169c37;
border: 1px solid #bfe7c9;
}
a {
color: #085d0b;
text-underline-offset: 3px;
text-decoration-thickness: from-font;
}
a:hover{
color:#0e7f23;
}
/* --- Review Card (clean + view-transitions safe) --- */
.cl-card{
display:block;
max-width:360px;
border-radius:16px;
background:#fff;
color:inherit;
text-decoration:none;
border:1px solid #e1efe5;
box-shadow: var(--cl-shadow-lg, 0 14px 30px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.08));
transition: transform .25s ease, box-shadow .25s ease;
overflow:hidden; /* clip inner media corners */
font-family: var(--cl-font, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.cl-card:hover{
transform: translateY(-6px);
box-shadow: var(--cl-shadow-xl, 0 24px 50px rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.18));
}
.cl-card:focus-visible{
outline:3px solid #ffcf4d; /* accessible focus */
outline-offset:4px;
}
/* Media wrapper: owns radius, border, and clipping (NOT the ![]()
) */
.cl-card__media{
position:relative;
display:block;
/* pick ONE of the two sizing approaches: */
/* A) Fixed aspect tile (recommended for tidy grids): */
aspect-ratio: 16/9;
/* B) Or fixed height
height: 180px; */
background:#fff;
/* Safe clipping (modern + fallback) */
overflow: clip;
overflow: hidden;
}
/* 1px white “frame” that honors border-radius without changing layout */
.cl-card__media::after{
content:"";
position:absolute; inset:0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px #fff;
pointer-events:none;
}
/* Actual image: never set overflow on ![]()
*/
.cl-card__media img{
position:absolute; inset:0; /* fills wrapper when using aspect-ratio */
width:100%; height:100%;
display:block;
object-fit:cover;
object-position:center;
/* micro polish */
backface-visibility:hidden;
transform: translateZ(0);
transition: transform .35s ease;
}
/* Gentle zoom on hover for “pop” */
.cl-card:hover .cl-card__media img{
transform: scale(1.03);
}
/* Body */
.cl-card__body{ padding:12px; }
.cl-card__title{
margin: 0 0 6px;
font-size:18px; font-weight:800; line-height:1.25;
color:#0b6a1d;
font-style: italic; /* you had this style */
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cl-card__meta{ margin:8px 0 0; color:#395f3e; font-size:13px; }
/* Chips + stars: unchanged except minor guards */
.cl-chiprow{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.cl-chip{
display:inline-flex; align-items:center; gap:.35ch;
padding:6px 10px; border-radius:999px; line-height:1;
background:#eaf8ee; border:1px solid #cbe7d1; color:#0e7f23; font-weight:800; font-size:.8rem;
}
.cl-chip--rating{ white-space:nowrap; }
.cl-stars{ position:relative; display:inline-block; line-height:1; }
.cl-stars__base{ color:#cbd5cb; }
.cl-stars__fill{
position:absolute; left:0; top:0;
white-space:nowrap; overflow:hidden; /* clip by width% */
color:#0e7f23;
transition: width .28s ease;
}
/* Grid (unchanged) */
.cl-reviews-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:14px; }
@media (min-width:680px){ .cl-reviews-grid{ grid-template-columns:repeat(2,1fr);} }
@media (min-width:1040px){ .cl-reviews-grid{ grid-template-columns:repeat(3,1fr);} }
.type, .state a{
color: var(--cl-green-800);
text-underline-offset: 3px;
text-decoration-thickness: from-font;
text-decoration: underline;
}
/* 1) Remove bullets and reset list spacing for the grid UL */
.cl-reviews-grid {
list-style: none; /* kill bullets */
margin: 0; /* remove default UL margin */
padding: 0; /* remove default UL padding */
}
/* 2) Make the 2→1 column switch happen sooner (prevents the smash at ~680px) */
.cl-reviews-grid {
/* was: repeat(auto-fit, minmax(300px, 1fr)) */
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
justify-content: center; /* centers the track(s) within the grid */
justify-items: center; /* centers each item within its cell */
}
/* 3) Hard stop: force a clean single column on narrow screens */
@media (max-width: 740px) {
.cl-reviews-grid { grid-template-columns: 1fr; }
}
/* 4) Ensure single-card rows truly center */
.cl-grid-item {
width: auto; /* was 100%; allows centering via justify-items */
max-width: 360px; /* keeps your card width cap */
}
.btn-offer-btn{
text-decoration: none;
background: linear-gradient(135deg,#17b238,#0c721f);
color: #fff;
font-weight: 800;
margin-top: 25px;
width:100%;
}
.btn-offer-btn:hover{color: #eefff1;}
.cl-offer-cta {
text-align: center;
margin: 3rem auto 6rem;
}
.cl-offer-cta .btn-offer-btn {
display: inline-block;
background: linear-gradient(180deg,#1dfd5c,#04b844);
color:#002b0e;
font-weight:700;
padding:16px 48px;
border-radius:9999px;
box-shadow:0 8px 22px rgba(29,253,92,.35);
}
.cl-offer-cta .btn-offer-btn:hover {
transform:translateY(-1px);
}
/* Accessibility fixes — Contact page */
/* Optional: focus ring for keyboard users */
.cl-qc__dot:focus-visible {
outline: 2px solid #1dfd5c;
outline-offset: 2px;
}
/* Accessibility fixes — Contact page */
/* Bigger touch targets for carousel dots */
.cl-qc__dot {
min-width: 15px;
min-height: 15px;
padding: 10px; /* expands hit area */
margin: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.offer-card{color:#2a2a2a;border-top: 2px solid var(--accent, #38b000); margin:250px auto; padding:20px; border-radius:16px;background:#fff;box-shadow: 0 32px 60px rgba(0,0,0,.3);max-width: 700px;}
.offer-card h2{margin:0 0 14px;font-size:clamp(28px,3.4vw,44px);line-height:1.15; font-weight:900; color:#085d0b;}
.offer-card {text-align:center;}
.offer-card__trust{margin-top:25px;}
.cl-archive-title{
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,5.4vw,44px);
font-weight: 900;
color: #1f3a29;
margin: 30px 8px 25px;
}
.offer-card__sub a{color:#2a2a2a; text-decoration:none; text-underline-offset: 2px;}
.offer-card__sub a:hover{color: #caffbf;}
.cl-contact-proof h2{
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,5.4vw,44px);
font-weight: 900;
color: #085917;
margin: 10px 8px 2px;
}
#cl-proof-strip-title{
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,5.4vw,44px);
font-weight: 900;
color: #085917;
margin: 10px 8px 2px;
}
#cl-contact-proof h2{
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,5.4vw,44px);
font-weight: 900;
color: #085917;
margin: 10px 8px 2px;
}
.cl-contact-proof p{margin: 0 8px 25px;}
.cl-proof-sub{margin: 0 8px 25px;}
#proof-strip-title h2{margin:10px 8px 2px;color: #085917;font-size: clamp(28px,5.4vw,44px);font-weight:900;}
.pill-icon{ color: #0e7f23;}
.btn-secondary{
background: #fff;
padding: .75rem 1rem;
border-radius: 999px;
box-shadow: none;
border: 1.5px solid #0e7f23;
color: #085d0b;
}
.btn-secondary:hover {
background:#ffffff00;
color: #0e7f23;
}
.trust-pill{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: .35rem .7rem;
border-radius: 999px;
border: 1.5px solid var(--cl-brand-600);
color: var(--cl-brand-700);
background: transparent;
font-weight: 800;
text-decoration: none;
min-width: 230px;
margin-top: 15px;
letter-spacing: .15px;
}
.btn-primary:hover {
filter: brightness(1.05);
transform: translateY(-2px);
}
.btn-primary:active {
transform: translateY(1px);
box-shadow: 0 6px 14px rgba(56,176,0,.25);
}
.btn-primary:focus-visible {
outline: 3px solid #0ea349;
outline-offset: 3px;
}
/* Base outline button (you likely already have this) */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.7em 1.2em;
border: 2px solid var(--cl-green, #1b8e2d);
color: var(--cl-green, #1b8e2d);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border-radius: 9999px;
background: transparent;
transition: all 0.25s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible {
background: var(--cl-green, #1b8e2d);
color: #fff;
text-decoration: none;
outline: none;
}
/* SVG icon inside button */
.btn-outline .icon-phone {
width: 1.1em;
height: 1.1em;
stroke: currentColor;
stroke-width: 2;
fill: none;
flex-shrink: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
/* Optional: tiny lift on hover for interactivity */
.btn-outline:hover .icon-phone,
.btn-outline:focus-visible .icon-phone {
transform: scale(1.1);
}
/* Optional: variant if you want slightly tighter button for hero use */
.btn-call {
font-size: 1.05rem;
letter-spacing: 0.02em;
padding: 0.65em 1.3em;
stroke-width: 1.8; /* thinner stroke prevents cutoff */
transform: translateY(1px); /* nudges icon down */
}
.cl-hero__subtitle {
font-weight: 500;
}
.cl-hero__support {
font-size: clamp(15px, 2.2vw, 16px);
color:#2b513a;
margin-top: 0.75rem;
max-width: 100ch;
}
/* Limit hero primary CTA width just on this template */
.cl-archive .cl-hero__actions .cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto; /* cancels any 100% width rule */
line-height: 1.1;
text-align: center;
}
/* Center group on large screens, stack nicely on mobile */
.cl-archive .cl-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
body.post-type-archive-review .cl-hero__actions .cta-primary,
body.tax-review_state .cl-hero__actions .cta-primary,
body.tax-review_type .cl-hero__actions .cta-primary{
display: inline-flex;
align-items: center;
justify-content: center;
width: auto; /* cancels any 100% width rule */
line-height: 1.1;
text-align: center;
}
body.post-type-archive-review .cl-hero__actions,
body.tax-review_state .cl-hero__actions,
body.tax-review_type .cl-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
/* Reviews FAQ */
.cl-faq {
margin: 15px 0;
box-shadow: 0 6px 16px rgba(0,0,0,.1);
background: white;
border-radius: 12px;
padding: 2rem;
}
.cl-faq h2 {
text-wrap: balance;
line-height: 1.05;
letter-spacing: -0.02em;
font-size: clamp(28px,5.4vw,44px);
font-weight: 900;
color: #1f3a29;
margin: 30px 8px 25px;
}
.cl-faq details { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: .75rem 1rem; margin: .5rem 0; background: #fff; }
.cl-faq summary {
color: #085d0b;
font-weight: 800;
line-height: 1.22;
font-size: clamp(18px,2.2vw,24px);
text-wrap: balance;
text-shadow: 0 1px 0 rgba(255,255,255,.35);
cursor: pointer;
}
.cl-faq summary::-webkit-details-marker { display:none; }
.cl-faq details[open] { border-color: rgba(20,136,46,.25); }
.cl-faq details > div { margin-top: .5rem; color: var(--text-secondary,#234); }
/* Global tone: steady, premium */
html, body { scroll-behavior: smooth; }
.icon-map{
width: 1.1em;
height: 1.1em;
margin-right: 0.45em;
vertical-align: middle;
fill: currentColor;
}