/* Woodlands Google Reviews — brand: green #025F4A, gold #F4B41A, cream #F7F4EE, Poppins */
.wgr {
--wgr-green: #025F4A;
--wgr-gold: #F4B41A;
--wgr-card: #F7F4EE;
--wgr-ink: #2B3330;
--wgr-muted: #6B7D77;
--wgr-line: #E2DDD2;
--wgr-empty: #E2DDD2;
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
color: var(--wgr-ink);
box-sizing: border-box;
}
.wgr *, .wgr *::before, .wgr *::after { box-sizing: border-box; }
/* White text version for coloured backgrounds */
.wgr--theme-dark { --wgr-ink: #fff; --wgr-muted: rgba(255,255,255,.8); --wgr-green: #fff; --wgr-empty: rgba(255,255,255,.35); }
/* ---------- Summary bar (hero + top of reviews section) ---------- */
.wgr-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
font-size: 18px;
line-height: 1.2;
}
.wgr--align-center .wgr-bar { justify-content: center; }
.wgr--align-auto .wgr-bar { justify-content: flex-start; } /* left on desktop, centred on phones/tablets (matches the home hero) */
@media (max-width: 980px) { .wgr--align-auto .wgr-bar { justify-content: center; } }
.wgr-bar-group { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.wgr-g { flex: none; display: block; }
.wgr-bar-label { font-weight: 700; color: var(--wgr-green); }
.wgr-bar-num { font-weight: 500; }
.wgr-bar-count { color: var(--wgr-muted); }
.wgr-bar-link {
font-weight: 600;
color: var(--wgr-green) !important;
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 5px;
}
.wgr-bar-link:hover { color: var(--wgr-gold) !important; }
.wgr--hero { margin: 20px 0; }
/* ---------- Stars ---------- */
.wgr-stars { display: inline-flex; gap: 2px; line-height: 1; }
.wgr-star { font-size: 26px; color: var(--wgr-empty); }
.wgr-star--full { color: var(--wgr-gold); }
.wgr-star--half {
background: linear-gradient(90deg, var(--wgr-gold) 50%, var(--wgr-empty) 50%);
-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* ---------- Reviews section ---------- */
.wgr--full { scroll-margin-top: 120px; max-width: 1240px; margin: 0 auto; }
.wgr--full > .wgr-bar { margin-bottom: 36px; }
/* Optional heading (heading="yes") — matches the theme's "Reviews" pill + H2 on the Tarneit page. */
.wgr-head { text-align: center; margin-bottom: 18px; }
.wgr-pill {
display: inline-block;
margin-bottom: 14px;
padding: 5px 14px;
border-radius: 999px;
background: #04604A;
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.wgr .wgr-h2 {
margin: 0;
font-family: 'Poppins', sans-serif;
font-size: clamp(28px, 4vw, 46px);
font-weight: 400;
line-height: 1.2;
color: #45494C;
}
.wgr .wgr-h2 strong {
font-weight: 700;
background: linear-gradient(transparent 82%, #FFC70B 82%);
padding-bottom: 2px;
}
/* One-line carousel: 3 cards visible on desktop, the rest slide in (auto-advance in JS). */
.wgr-carousel { position: relative; }
.wgr-track {
display: flex;
gap: 28px;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
justify-content: safe center; /* 1–2 reviews sit centred */
}
.wgr-track > .wgr-card { flex: 0 0 calc((100% - 56px) / 3); scroll-snap-align: start; }
@media (min-width: 701px) {
.wgr-track { scrollbar-width: none; }
.wgr-track::-webkit-scrollbar { display: none; }
}
.wgr-arrow {
display: none;
position: absolute;
top: 50%;
z-index: 2;
width: 44px;
height: 44px;
margin-top: -22px;
padding: 0;
border: 0;
border-radius: 50%;
background: #fff;
color: #04604A;
font: 700 28px/1 system-ui, sans-serif;
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
cursor: pointer;
transition: background-color .2s, color .2s, transform .2s;
}
.wgr-arrow:hover { background: #04604A; color: #fff; transform: scale(1.06); }
.wgr-arrow--prev { left: -22px; }
.wgr-arrow--next { right: -22px; }
.wgr-carousel.has-overflow .wgr-arrow { display: block; }
/* Subtle entrance — only when JS is running, so content is never hidden without it. */
.wgr-js .wgr-bar,
.wgr-js .wgr-card,
.wgr-js .wgr-links {
opacity: 0;
transform: translateY(18px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.wgr-js .wgr-card { transition-delay: calc(.15s + var(--wgr-i, 0) * .12s); }
.wgr-js .wgr-links { transition-delay: .55s; }
.wgr-js.is-visible .wgr-bar,
.wgr-js.is-visible .wgr-card,
.wgr-js.is-visible .wgr-links { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.wgr-js .wgr-bar, .wgr-js .wgr-card, .wgr-js .wgr-links { opacity: 1; transform: none; transition: none; }
}
.wgr-card {
background: var(--wgr-card);
border-radius: 18px;
padding: 36px 36px 30px;
display: flex;
flex-direction: column;
text-align: left;
color: #2B3330;
}
.wgr-card .wgr-star { font-size: 28px; }
.wgr-card .wgr-stars { margin-bottom: 22px; }
.wgr .wgr-card .wgr-text {
margin-top: 0;
color: #2B3330; /* the theme greys out ; keep reviews readable */
font-size: 16px;
line-height: 1.75;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
}
.wgr-card.is-open .wgr-text { -webkit-line-clamp: unset; display: block; }
.wgr-toggle {
align-self: flex-start;
margin-top: 10px;
padding: 0;
background: none;
border: 0;
font: inherit;
font-size: 16px;
color: #025F4A;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 4px;
cursor: pointer;
}
/* Same fixed gap between "Read more" and the divider on every card. */
.wgr .wgr-card .wgr-text, .wgr .wgr-card .wgr-toggle { margin-bottom: 40px; }
.wgr .wgr-card .wgr-text:has(+ .wgr-toggle) { margin-bottom: 0; }
.wgr-card-foot {
display: flex;
align-items: center;
gap: 14px;
padding-top: 22px;
border-top: 1px solid var(--wgr-line);
}
.wgr-initial {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #04604A;
color: #fff;
font-size: 19px;
font-weight: 700;
line-height: 1;
}
.wgr-who { display: flex; flex-direction: column; min-width: 0; }
.wgr-author-row { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wgr-author {
font-size: 19px;
font-weight: 700;
line-height: 1.2;
color: #025F4A !important;
text-decoration: none !important;
overflow: hidden;
text-overflow: ellipsis;
}
.wgr-source { display: inline-flex; flex: none; }
.wgr-date { display: block; margin-top: 4px; font-size: 15px; color: #2B3330; }
.wgr-centre { font-weight: 600; color: #04604A; } /* home page: which centre the review is for */
.wgr-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.wgr--align-left .wgr-links { justify-content: flex-start; }
.wgr-links a {
display: inline-block;
padding: 12px 26px;
border-radius: 999px;
font-weight: 600;
font-size: 15px;
text-decoration: none !important;
border: 2px solid #025F4A;
color: #025F4A !important;
transition: background-color .2s, border-color .2s;
}
.wgr-links a:first-child { background: #025F4A; color: #fff !important; }
.wgr-links a:hover { background: var(--wgr-gold); border-color: var(--wgr-gold); color: #2B3330 !important; }
@media (max-width: 700px) {
.wgr-bar { font-size: 16px; }
.wgr-track {
gap: 16px;
margin: 0 -16px;
padding: 0 16px 10px;
justify-content: flex-start;
-webkit-overflow-scrolling: touch;
}
.wgr-track > .wgr-card { flex: 0 0 86%; scroll-snap-align: center; padding: 28px 24px 24px; }
.wgr .wgr-card .wgr-text, .wgr .wgr-card .wgr-toggle { margin-bottom: 24px; }
.wgr .wgr-card .wgr-text:has(+ .wgr-toggle) { margin-bottom: 0; }
.wgr-bar { row-gap: 6px; }
}
/* ------------------------------------------------------------------
* Home page (Raw HTML "#wl-home") resets every element with
* "#wl-home * { margin:0; padding:0 }" and sizes all
. An id beats our
* classes, so restore the widget's own spacing at id strength.
* ------------------------------------------------------------------ */
#wl-home .wgr--hero { margin: 4px 0 22px; }
/* Home hero column is narrow: compact bar so it stays on one line on desktop. */
#wl-home .wgr--hero .wgr-bar { font-size: 16px; gap: 6px 10px; }
#wl-home .wgr--hero .wgr-bar-group { gap: 8px; }
#wl-home .wgr--hero .wgr-star { font-size: 21px; }
#wl-home .wgr--hero .wgr-g { width: 24px; height: 24px; }
#wl-home .wgr--full > .wgr-bar { margin: 16px 0 36px; }
#wl-home .wgr-head { margin-bottom: 18px; }
#wl-home .wgr-pill { margin-bottom: 14px; padding: 5px 14px; }
#wl-home .wgr-card { padding: 36px 36px 30px; }
#wl-home .wgr-card .wgr-stars { margin-bottom: 22px; }
#wl-home .wgr .wgr-card .wgr-text { font-size: 16px; margin-bottom: 40px; }
#wl-home .wgr .wgr-card .wgr-text:has(+ .wgr-toggle) { margin-bottom: 0; }
#wl-home .wgr .wgr-card .wgr-toggle { margin-top: 10px; margin-bottom: 40px; }
#wl-home .wgr-card-foot { padding-top: 22px; }
#wl-home .wgr-date { margin-top: 4px; }
#wl-home .wgr-links { margin-top: 36px; }
#wl-home .wgr-links a { padding: 12px 26px; }
#wl-home .wgr-arrow { margin-top: -22px; }
@media (max-width: 700px) {
#wl-home .wgr-track { margin: 0 -16px; padding: 0 16px 10px; }
#wl-home .wgr-card { padding: 28px 24px 24px; }
#wl-home .wgr .wgr-card .wgr-text, #wl-home .wgr .wgr-card .wgr-toggle { margin-bottom: 24px; }
#wl-home .wgr .wgr-card .wgr-text:has(+ .wgr-toggle) { margin-bottom: 0; }
}