/*
* goddy-kadence — scoped presentation polish (P7).
*
* Targets the structures the P4 generator emits (Kadence Row Layout sections +
* grids, core details/table/list). Kept minimal and class-scoped; global element
* rules live only in tokens.css. Enqueued after tokens.css by functions.php.
*/
/* ---- eyebrow label (generator emits ) --------------- */
.gd-eyebrow {
/* Red Hat Display kicker: small, bold, all-caps, tracked out. */
margin: 0 !important;
font-family: var(--font-accent, 'Red Hat Display'), sans-serif;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--color-primary, #4f7d2b); /* AA on #fff and #f3f8ec */
}
/* fixed gap from the eyebrow to the heading below it */
.gd-eyebrow + * {
margin-top: 0.7rem !important;
}
/* only on genuinely dark bands (generator adds --invert) */
.gd-eyebrow--invert {
color: #a9d977; /* AA-large on #2e4a1f / navy */
}
/* ---- section rhythm ------------------------------------------------------- */
.entry-content > .kb-row-layout-wrap {
scroll-margin-top: calc(var(--header-h, 70px) + 1rem);
}
/* Content edge == header edge. The section band is the theme content width
* (1250). Kadence pads .kt-row-column-wrap 24px only on sections that carry a
* background, so bg sections' text sat ~24px further in than plain sections and
* the header. Zero that padding on every top-level section so all text columns
* line up with the header's container. */
.entry-content .kb-row-layout-wrap > .kt-row-column-wrap.kt-has-1-columns {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* The generator never sets a horizontal padding attribute on any block (only
* topPadding/bottomPadding), so the rule above left every section's actual
* text column with zero side gutter — invisible at desktop, where the 1250px
* max-width's auto-centering margin (95px+ on a typical screen) masked it,
* but real: even at desktop the header's logo sat further in than section
* text. Below ~1290px viewport width the centering margin vanishes and text
* runs flush to the screen edge. Replace it with the same edge spacing the
* header's .site-container uses (Kadence's --global-content-edge-padding,
* set to 20px via the content_edge_spacing theme_mod in
* scripts/apply-design-system.php — keep both in sync), on the one column
* that wraps a section's actual content (not nested grid-card columns,
* which keep their own box padding). */
.entry-content .gd-section > .kt-row-column-wrap.kt-has-1-columns > .wp-block-kadence-column > .kt-inside-inner-col {
padding-left: 20px;
padding-right: 20px;
}
/* F6 — breathing room between a section's header block(s) and its card grid
* (Kadence's row wrapper class is .wp-block-kadence-rowlayout / .kb-row-layout-wrap) */
.gd-section > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .kb-row-layout-wrap {
margin-top: 1.5rem;
}
/* Centre the header cluster of a standard content band: the eyebrow, the
* section H2, and the single lead paragraph directly under it. Scoped to the
* section's own column — card grids, tables, FAQ answers, timeline rows, the
* heros (2-col, excluded) and the prose/legal pages (core headings, not
* Kadence advancedheadings) keep their own alignment. */
.gd-section:not(.gd-hero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > .gd-eyebrow,
.gd-section:not(.gd-hero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2.wp-block-kadence-advancedheading,
.gd-section:not(.gd-hero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2.wp-block-kadence-advancedheading + p,
.gd-section:not(.gd-hero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2.wp-block-kadence-advancedheading + p + p,
.gd-section:not(.gd-hero) > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h2.wp-block-kadence-advancedheading + p + p + p {
text-align: center;
}
/* ---- F4: dark bands are not flat rectangles --------------------------------
* A near-invisible diagonal sheen over every dark band (the band keeps its
* palette colour). The home hero also carries a soft green corner glow and
* splits into text + a site-health dashboard card. */
.gd-section.gd-dark {
background-image: linear-gradient(158deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1));
}
.gd-section.gd-hero {
background-image:
radial-gradient(38rem 30rem at 100% -12%, rgba(126, 178, 66, 0.18), transparent 60%),
linear-gradient(158deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12));
}
.gd-hero-grid > .kt-row-column-wrap {
align-items: center;
}
/* the hero split is layout only — no card treatment on the two columns.
* Must out-specify `.gd-dark .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns)
* > col` (5 classes + !important, later in the file), so this carries 6. */
.gd-section.gd-hero .gd-hero-grid > .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column {
background: none !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible;
}
.gd-section.gd-hero .gd-hero-grid > .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column > .kt-inside-inner-col {
padding: 0 !important;
}
/* /pricing/ hero — same dark banded hero as /wordpress-development/, but a
* single centered column (no right-column support image for this page). */
.gd-hero-center > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
text-align: center;
}
/* right-column hero image (empty until the DIR asset is delivered) */
.gd-hero-media {
display: flex;
align-items: center;
justify-content: center;
}
.gd-hero-media .wp-block-image {
margin: 0;
width: 100%;
}
.gd-hero-media .wp-block-image img {
width: 100%;
height: auto;
}
@media (max-width: 767px) {
.gd-hero-media:empty,
.gd-hero-media .wp-block-image:not(:has(img[src])) {
display: none;
}
.gd-hero-media .wp-block-image {
margin-top: 1.5rem;
}
}
/* left-column byline (small avatar + name, generator emits
) */
.gd-hero-byline {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 !important;
font-family: var(--font-accent, 'Red Hat Display'), sans-serif;
font-size: 1.5rem;
font-weight: 600;
color: #cfe3bb;
}
.gd-hero-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
/* fixed gap from the byline to the heading below it, matching .gd-eyebrow + * */
.gd-hero-byline + * {
margin-top: 0.7rem !important;
}
/* at phone widths the 1.5rem byline wraps to two lines and dwarfs the H1
* below it — scale it down like the other hero kickers (.gd-eyebrow etc). */
@media (max-width: 480px) {
.gd-hero-byline {
font-size: 1rem;
gap: 0.45rem;
}
.gd-hero-avatar {
width: 22px;
height: 22px;
}
}
/* hero fine-print line under the CTAs ("Plans from $.../mo ...") */
.gd-hero-fineprint {
font-size: 0.85rem;
}
.gd-hero .wp-block-buttons {
margin-bottom: 0.9rem;
}
/* ---- grid "cards" (2/3/4-up kadence columns from GRID() + the pricing
* pattern). Kadence sets column padding with an equal-specificity class that
* loads after this file, so the card container styling needs !important on the
* box props; the inner padding goes on .kt-inside-inner-col. ---------------
* Light and dark variants are split by :not(.gd-dark)/.gd-dark on the
* section ancestor rather than fought over via specificity — two rules that
* matched the same element and both relied on !important + a shared "who has
* more :not()s" specificity race broke twice already (once when .gd-plan was
* excluded, again when .gd-no-card was); this way they're mutually exclusive
* by construction and a future exclusion added to one can't silently flip
* which one wins for the other. */
.gd-section:not(.gd-dark) .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column:not(.gd-plan):not(.gd-no-card):not(.gd-profile-card),
.gd-section:not(.gd-dark) .kt-row-column-wrap.kt-has-3-columns > .wp-block-kadence-column:not(.gd-plan):not(.gd-no-card):not(.gd-profile-card),
.gd-section:not(.gd-dark) .kt-row-column-wrap.kt-has-4-columns > .wp-block-kadence-column:not(.gd-plan):not(.gd-no-card):not(.gd-profile-card) {
background: var(--color-bg, #fff) !important;
border: 1px solid var(--color-border, #e6e9ee) !important;
border-radius: var(--radius-md, 12px) !important;
box-shadow: var(--shadow-sm, 0 2px 6px rgba(16, 24, 40, 0.06)) !important;
overflow: hidden;
}
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) > .wp-block-kadence-column > .kt-inside-inner-col {
padding: 1.5rem 1.6rem !important;
}
/* .gd-no-card opts out of the card look entirely (no bg/border/shadow, see
* the exclusion above) — it must also opt out of this card padding, or its
* content sits ~26px further in than the sitewide 20px/115px content edge
* (found via a mobile/desktop side-padding audit: /contact/ and /sign-up/'s
* form + aside columns were the only sections off this grid).
* .gd-no-card is added as an extra qualifier on the *same* selector chain
* (rather than :not()-excluded from the rule above) so this always wins on
* specificity alone, without changing that rule's own specificity — doing
* that the first time around accidentally tied it with the unrelated
* hero-grid zero-padding rule below and broke padding there instead. */
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) > .wp-block-kadence-column.gd-no-card > .kt-inside-inner-col {
padding: 0 !important;
}
/* genuinely dark bands only (generator adds .gd-dark) → translucent cards */
.gd-dark .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) > .wp-block-kadence-column {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
box-shadow: none !important;
}
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) .kt-inside-inner-col > *:first-child { margin-top: 0; }
/* card icons — a filled brand tile with a white line icon, floated so the
* heading sits beside it and the body copy starts below (benefits / guarantees
* / About values grids). The icon is emitted as a bare by core/html. */
.gd-card-icon {
float: left;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 0.85rem 0.45rem 0;
border-radius: 12px;
background: var(--color-primary, #4f7d2b);
color: #fff;
}
.gd-card-icon svg {
width: 22px;
height: 22px;
}
/* heading top-aligns with the tile; body paragraph clears below it */
.gd-section .kt-inside-inner-col > .gd-card-icon + .wp-block-kadence-advancedheading,
.gd-section .kt-inside-inner-col > .gd-card-icon + h4 {
margin-top: 0;
overflow: hidden; /* keep a long heading beside the tile, not wrapping under */
}
.gd-section .kt-inside-inner-col > .gd-card-icon ~ p {
clear: left;
}
.gd-dark .gd-card-icon {
background: rgba(255, 255, 255, 0.14);
}
/* /wordpress-services/ services grid — pin the "Included in:" line to the
* card floor, same equal-height-row technique as .gd-plan (F7). */
.kt-row-column-wrap.kt-has-3-columns:has(> .gd-service-card) {
align-items: stretch;
}
.wp-block-kadence-column.gd-service-card > .kt-inside-inner-col {
display: flex;
flex-direction: column;
height: 100%;
}
.gd-service-avail {
margin-top: auto;
padding-top: 1rem;
font-size: 0.85rem;
color: var(--color-text-muted, #56606f);
}
.gd-pill {
display: inline-block;
margin: 0.3rem 0.3rem 0 0;
padding: 0.2rem 0.65rem;
border-radius: var(--radius-pill, 100px);
background: var(--color-bg-tint, #f3f8ec);
color: var(--color-primary, #4f7d2b);
font-size: 0.8rem;
font-weight: 600;
}
/* numbered step tile (home "how it works") — filled brand tile above the heading */
.gd-step {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0 0 0.75rem;
border-radius: 12px;
background: var(--color-primary, #4f7d2b);
color: #fff;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 900;
font-size: 1.1rem;
line-height: 1;
}
.gd-section .kt-inside-inner-col > .gd-step + * {
margin-top: 0;
}
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) .kt-inside-inner-col > *:last-child { margin-bottom: 0; }
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) .wp-block-kadence-column:not(.gd-plan) h3,
.gd-section .kt-row-column-wrap[class*='kt-has-']:not(.kt-has-1-columns) .wp-block-kadence-column:not(.gd-plan) h4 {
margin-bottom: 0.4rem;
font-size: 1.15rem;
}
/* ---- stat figures (generator emits +
) */
.gd-stat {
margin: 0;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 700;
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem);
line-height: 1.02;
color: inherit;
}
.gd-stat-label {
margin: 0.15rem 0 0;
font-size: 0.9rem;
opacity: 0.85;
}
/* pricing pattern plan cards (class set by build-patterns.js). White fill so the
* cards read against the tinted section band; popular tier = green border + lift. */
.wp-block-kadence-column.gd-plan {
background: var(--color-bg, #fff) !important;
border: 1px solid var(--color-border, #e6e9ee) !important;
border-radius: var(--radius-md, 12px) !important;
}
.wp-block-kadence-column.gd-plan > .kt-inside-inner-col {
padding: 1.6rem 1.5rem !important;
}
.wp-block-kadence-column.gd-plan--popular {
border-width: 2px !important;
border-color: var(--color-primary, #4f7d2b) !important;
box-shadow: var(--shadow-md, 0 10px 30px rgba(16, 24, 40, 0.08)) !important;
}
.wp-block-kadence-column.gd-plan .wp-block-button {
width: 100%;
}
.wp-block-kadence-column.gd-plan .wp-block-button__link {
display: block;
text-align: center;
}
/* F7 — equal-height plan cards with the CTA on a shared baseline. The pattern's
* DOM order is name / desc / price / CTA / feature list; reflow so the feature
* list sits under the price and the CTA is pinned to the card floor. */
.kt-row-column-wrap.kt-has-3-columns:has(> .gd-plan) {
align-items: stretch;
}
.wp-block-kadence-column.gd-plan > .kt-inside-inner-col {
display: flex;
flex-direction: column;
height: 100%;
}
.wp-block-kadence-column.gd-plan .wp-block-list {
order: 4;
margin-bottom: 1.1rem;
}
.wp-block-kadence-column.gd-plan .wp-block-buttons {
order: 5;
margin-top: auto;
}
.wp-block-kadence-column.gd-plan .gd-plan-note {
order: 6;
}
/* "not sure which fits?" line under the plan grid */
.gd-plan-help {
margin-top: 1.75rem;
font-size: 0.95rem;
color: var(--color-text-muted, #56606f);
}
.gd-plan-help a {
font-weight: 700;
color: var(--color-primary, #4f7d2b);
}
/* ---- pricing pattern: React-component styling + monthly/annual toggle -----
* Behaviour: goddy-core/assets/pricing-toggle.js (progressive enhancement). */
/* billing switch (injected before the plan grid on the front end) */
.gd-billing {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin: 0.5rem auto 2rem;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text-muted, #56606f);
}
.gd-billing__opt {
display: inline-flex;
align-items: center;
gap: 0.45rem;
cursor: pointer;
transition: color 0.15s ease;
}
.gd-billing__opt.is-on {
color: var(--color-heading, #141414);
}
.gd-billing__save {
padding: 0.12rem 0.5rem;
border-radius: 100px;
background: var(--color-primary, #4f7d2b);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
}
.gd-billing__switch {
position: relative;
flex: none;
width: 46px;
height: 26px;
padding: 0;
border: 0;
border-radius: 100px;
background: var(--color-border, #e6e9ee);
cursor: pointer;
transition: background 0.2s ease;
}
.gd-billing.is-annual .gd-billing__switch {
background: var(--color-primary, #4f7d2b);
}
.gd-billing__thumb {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(16, 24, 40, 0.3);
transition: transform 0.2s ease;
}
.gd-billing.is-annual .gd-billing__thumb {
transform: translateX(20px);
}
.gd-billing__switch:focus-visible {
outline: 2px solid var(--color-primary, #4f7d2b);
outline-offset: 2px;
}
.gd-billing__track {
display: none;
}
/* plan name — unified on the /pricing/ treatment (big, bold, sentence-case)
* across every page that embeds this pattern. Previously home/services (both
* wrapped in .gd-section) got a small uppercase muted label instead, on the
* reasoning that it sits inside a section with its own big heading above it;
* dropped in favor of one consistent look for this component everywhere. */
.wp-block-kadence-column.gd-plan h3 {
margin: 0 0 0.15rem;
font-family: var(--font-accent, 'Red Hat Display'), sans-serif;
font-size: 1.6rem;
font-weight: 900;
letter-spacing: 0;
text-transform: none;
color: #141414;
}
/* .gd-plan--popular h3 intentionally carries no badge clearance: the "Popular"
* badge is clipped vertically by the column's own padding-top (badge height
* ≈23px vs padding-top 24-25.6px, at every breakpoint measured), so no
* horizontal clearance is needed — and adding any leaves too little width
* for "Professional" to fit on one line at some breakpoints, forcing a
* mid-word break. */
.wp-block-kadence-column.gd-plan h3 + p {
margin: 0 0 1rem;
font-size: 0.95rem;
color: var(--color-text-muted, #56606f);
text-transform: capitalize;
}
/* big price */
.wp-block-kadence-column.gd-plan h4 {
margin: 0;
font-size: 3.4rem;
font-weight: 900;
line-height: 1;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
/* the currency sign — small and raised. .gd-price-cur is the span the toggle
* script injects; ::first-letter covers the no-JS state ($59 as plain text). */
.wp-block-kadence-column.gd-plan .gd-price-cur,
.wp-block-kadence-column.gd-plan h4:not(:has(.gd-price-cur))::first-letter {
font-size: 1.4rem;
font-weight: 900;
vertical-align: 0.55em;
}
.wp-block-kadence-column.gd-plan .gd-price-cur {
margin-right: 0.06em;
}
@media (max-width: 480px) {
.wp-block-kadence-column.gd-plan h4 {
font-size: 2.9rem;
}
}
.wp-block-kadence-column.gd-plan h4 mark {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0;
color: var(--color-text-muted, #56606f) !important; /* beat Kadence's inline markColor */
background: none;
}
.gd-billed {
margin: 0.35rem 0 0;
font-size: 0.75rem;
color: var(--color-text-muted, #56606f);
}
/* feature list -> check icons */
.wp-block-kadence-column.gd-plan .wp-block-list {
list-style: none;
padding-left: 0;
margin-top: 1.25rem;
}
.wp-block-kadence-column.gd-plan .wp-block-list li {
position: relative;
padding-left: 1.95rem;
margin-bottom: 0.55rem;
font-size: 0.95rem;
}
.wp-block-kadence-column.gd-plan .wp-block-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.05em;
width: 1.3rem;
height: 1.3rem;
border-radius: 50%;
background-color: var(--color-primary, #4f7d2b);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 0.8rem;
}
/* feature-group label — the first list item, standout, no check mark */
.wp-block-kadence-column.gd-plan .wp-block-list li.gd-plan-group {
padding-left: 0;
margin-top: 0.15rem;
margin-bottom: 0.75rem;
font-size: 1.05rem;
font-weight: 800;
color: var(--color-heading, #141414);
}
.wp-block-kadence-column.gd-plan .wp-block-list li.gd-plan-group::before {
display: none;
}
/* divider above the CTA (the reference component's
) */
.wp-block-kadence-column.gd-plan .wp-block-buttons {
padding-top: 1.1rem;
border-top: 1px solid var(--color-border, #e6e9ee);
}
/* per-plan note under the CTA */
.wp-block-kadence-column.gd-plan .gd-plan-note {
margin: 0.9rem 0 0;
font-size: 0.78rem;
line-height: 1.5;
color: var(--color-text-muted, #56606f);
}
/* "Popular" badge — star + label pill, top-right */
.wp-block-kadence-column.gd-plan--popular > .kt-inside-inner-col {
position: relative;
}
.wp-block-kadence-column.gd-plan--popular > .kt-inside-inner-col::before {
content: "\2605\00A0Popular";
position: absolute;
top: 0;
right: 0;
padding: 0.28rem 0.75rem;
border-bottom-left-radius: 12px;
border-top-right-radius: 11px;
background: var(--color-primary, #4f7d2b);
color: #fff;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
.gd-billing__switch,
.gd-billing__thumb {
transition: none;
}
}
/* feature-row images */
.kt-row-column-wrap.kt-has-2-columns .wp-block-image img {
border-radius: var(--radius-md, 12px);
}
/* ---- FAQ (core/details) — SiteCare-style accordion, used on every FAQ
section (home, /wordpress-services/, /pricing/, /wordpress-seo/, /faq/) -- */
.gd-faq .kt-inside-inner-col > .wp-block-details:first-of-type,
.gd-faq .kt-inside-inner-col > h2 + .wp-block-details {
margin-top: 1.75rem;
}
.entry-content details.wp-block-details {
margin: 0 auto 1rem;
max-width: 780px;
background: var(--color-bg, #fff);
border: 1px solid var(--color-border, #e6e9ee);
border-radius: var(--radius-md, 14px);
transition: border-color 0.15s ease;
}
.entry-content details.wp-block-details:hover {
border-color: var(--color-primary, #4f7d2b);
}
.entry-content details.wp-block-details > summary {
position: relative;
margin: 0;
padding: 1rem 2.75rem 1rem 1.25rem;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 700;
font-size: 1.02rem;
line-height: 1.4;
color: var(--color-heading, #141414);
cursor: pointer;
list-style: none;
}
.entry-content details.wp-block-details > summary::-webkit-details-marker {
display: none;
}
.entry-content details.wp-block-details > summary::after {
content: '';
position: absolute;
top: 50%;
right: 1.25rem;
width: 0.65rem;
height: 0.65rem;
border-right: 2px solid var(--color-primary, #4f7d2b);
border-bottom: 2px solid var(--color-primary, #4f7d2b);
transform: translateY(-65%) rotate(45deg);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Two independent triggers, never both live at once: [open] drives the
* chevron for the native no-JS toggle; once faq-accordion.js is running
* (:root.gd-faq-js) it takes over via .gd-faq-open instead, which it sets in
* lockstep with the animated open/close — including turning the chevron back
* the instant a close *starts*, not only once the (slower) collapse finishes. */
:root:not(.gd-faq-js) .entry-content details.wp-block-details[open] > summary::after {
transform: translateY(-35%) rotate(-135deg);
}
.entry-content details.wp-block-details.gd-faq-open > summary::after {
transform: translateY(-35%) rotate(-135deg);
}
.entry-content details.wp-block-details > summary:focus-visible {
outline: 2px solid var(--color-primary, #4f7d2b);
outline-offset: 2px;
}
.entry-content details.wp-block-details > :not(summary) {
padding: 0 1.25rem;
margin: 0.5rem 0;
font-size: 0.95rem;
line-height: 1.65;
color: var(--color-text-muted, #565f52);
}
.entry-content details.wp-block-details > :not(summary):first-of-type {
margin-top: 0;
}
.entry-content details.wp-block-details > :not(summary):last-child {
margin-bottom: 1.1rem;
}
.entry-content details.wp-block-details > :not(summary) a {
color: var(--color-primary, #4f7d2b);
font-weight: 600;
}
/* ---- comparison table (core/table) ------------------------------------- */
.entry-content .gd-compare-table {
margin-top: 2rem;
}
.entry-content .wp-block-table table {
border-collapse: collapse;
width: 100%;
font-size: 0.95rem;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
padding: 0.6rem 0.8rem;
border: 1px solid var(--color-border, #e6e9ee);
text-align: left;
vertical-align: top;
}
.entry-content .wp-block-table thead th {
background: var(--c-green-dark, #2e4a1f);
color: #fff;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
}
.entry-content .wp-block-table tbody tr:nth-child(even) {
background: var(--color-bg-alt, #f3f8ec);
}
.entry-content .wp-block-table td:first-child {
font-weight: 600;
color: var(--color-heading, #141414);
}
/* ---- lists (feature lists in cards / sections) ------------------------- */
.entry-content .wp-block-list {
padding-left: 1.1rem;
}
.entry-content .wp-block-list li {
margin-bottom: 0.35rem;
}
/* ---- pull quote (about story) --------------------------------------------- */
.entry-content blockquote.wp-block-quote {
margin: 1.4rem 0;
padding: 0.4rem 0 0.4rem 1.1rem;
border-left: 4px solid var(--color-primary, #4f7d2b);
font-style: italic;
color: var(--color-heading, #141414);
}
/* ---- outline buttons on dark bands ------------------------------------- */
.kb-row-layout-wrap.kt-row-has-bg .wp-block-button.is-style-outline .wp-block-button__link {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.kb-row-layout-wrap.kt-row-has-bg .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.12);
}
/* ---- Fluent Forms — match the token system --------------------------- */
.entry-content .fluentform .ff-el-input--content input:not([type='checkbox']):not([type='radio']),
.entry-content .fluentform .ff-el-input--content textarea,
.entry-content .fluentform .ff-el-input--content select {
width: 100%;
border-radius: var(--radius-sm, 4px);
border: 1px solid var(--color-border, #e6e9ee);
padding: 0.7rem 0.9rem;
font: inherit;
color: var(--color-text, #333);
background: #fff;
}
.entry-content .fluentform .ff-el-input--content input:focus,
.entry-content .fluentform .ff-el-input--content textarea:focus,
.entry-content .fluentform .ff-el-input--content select:focus {
outline: 2px solid var(--color-primary, #4f7d2b);
outline-offset: 1px;
border-color: var(--color-primary, #4f7d2b);
}
.entry-content .fluentform .ff-el-input--label label {
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 700;
font-size: 0.9rem;
}
.entry-content .fluentform .ff-el-group {
margin-bottom: 1.1rem;
}
.entry-content .fluentform .ff-btn-submit {
background: var(--color-primary, #4f7d2b) !important;
border-radius: var(--radius-pill, 100px);
padding: 0.8rem 1.9rem;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 800;
}
/* the two-column container element -> flex row */
.entry-content .fluentform .ff-t-container {
display: flex !important;
flex-wrap: wrap;
gap: 0 1.25rem;
margin-bottom: 1.1rem;
}
.entry-content .fluentform .ff-t-container .ff-el-group {
margin-bottom: 0;
}
.entry-content .fluentform .ff-t-container > .ff-t-cell {
flex: 1 1 15rem !important;
padding: 0 !important;
}
.entry-content .fluentform .ff-el-form-check-label {
display: inline-flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.9rem;
font-weight: 400;
line-height: 1.4;
}
.entry-content .fluentform .ff-el-form-check-input {
margin-top: 0.2rem;
flex: none;
}
/* ---- home final CTA — centered content, micro line on one row ----------- */
.gd-section.gd-cta > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
text-align: center;
}
.gd-section.gd-cta .wp-block-buttons {
justify-content: center;
}
.gd-cta-subtext {
color: rgba(255, 255, 255, 0.6);
}
/* three micro points: one centered row, a bullet before each item.
* Stacks to a normal bulleted list under 600px. */
.gd-section.gd-cta .wp-block-list {
list-style: none;
padding-left: 0;
margin-top: 1.1rem;
font-size: 0.9rem;
opacity: 0.85;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.3rem 1.5rem;
}
.gd-section.gd-cta .wp-block-list li {
position: relative;
margin: 0;
padding-left: 1rem;
}
.gd-section.gd-cta .wp-block-list li::before {
content: "\2022";
position: absolute;
left: 0;
opacity: 0.65;
}
@media (max-width: 600px) {
.gd-section.gd-cta .wp-block-list {
display: block;
}
}
/* ---- home authority section — text + a profile card --------------------- */
.gd-section .gd-authority-grid > .kt-row-column-wrap {
align-items: start;
gap: 2.75rem;
}
/* left column: plain text, no card treatment */
.gd-section .gd-authority-grid > .kt-row-column-wrap > .wp-block-kadence-column:not(.gd-profile-card) {
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible;
}
.gd-section .gd-authority-grid > .kt-row-column-wrap > .wp-block-kadence-column:not(.gd-profile-card) > .kt-inside-inner-col {
padding: 0 !important;
}
/* right column: no card box either — just the photo + meta, flush */
.gd-section .gd-authority-grid > .kt-row-column-wrap > .wp-block-kadence-column.gd-profile-card {
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible;
}
.gd-section .gd-authority-grid > .kt-row-column-wrap > .wp-block-kadence-column.gd-profile-card > .kt-inside-inner-col {
padding: 0 !important;
}
.gd-profile-card .wp-block-image,
.gd-profile-card .wp-block-image img {
display: block !important;
width: 100%;
margin: 0 !important;
border-radius: 0 !important;
}
.gd-profile-meta {
padding: 1.1rem 1.35rem 1.25rem;
}
.gd-profile-meta > :last-child {
margin-bottom: 0;
}
.gd-profile-name {
margin: 0;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 900;
font-size: 1.05rem;
color: var(--color-heading, #141414);
}
.gd-profile-role {
margin: 0.15rem 0 0;
font-size: 0.9rem;
color: var(--color-text-muted, #56606f);
}
/* ---- /contact/ — two-column form + "Get in touch" aside ------------------- */
.gd-section .gd-contact-grid > .kt-row-column-wrap {
align-items: start;
gap: 2.5rem;
}
.gd-section .gd-contact-grid > .kt-row-column-wrap > .wp-block-kadence-column {
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible;
}
.gd-section .gd-contact-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
padding: 0 !important;
}
.gd-contact-card {
padding: 1.75rem 1.6rem;
background: var(--color-bg-alt, #f3f8ec);
border-radius: var(--radius-md, 12px);
}
/* keep the aside in view while the (taller) form column scrolls past it.
* Only while the grid is 2-col (Kadence stacks it at <=767px). */
@media (min-width: 768px) {
.gd-section .gd-contact-grid > .kt-row-column-wrap > .wp-block-kadence-column.gd-contact-aside {
position: sticky;
top: calc(var(--header-h, 70px) + 1.5rem);
align-self: start;
}
}
.gd-contact-card > .gd-eyebrow {
margin-bottom: 1rem;
}
.gd-contact-row {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 0 0 0.7rem;
font-size: 0.95rem;
}
.gd-contact-ico {
flex: none;
display: inline-flex;
margin-top: 0.15rem;
color: var(--color-primary, #4f7d2b);
}
.gd-contact-sub {
color: var(--color-text-muted, #56606f);
}
.gd-contact-hr {
margin: 1.4rem 0;
border: 0;
border-top: 1px solid var(--color-border, #e6e9ee);
}
.gd-contact-h {
margin: 0 0 0.5rem;
font-size: 1.15rem;
font-weight: 900;
line-height: 1.25;
}
.gd-contact-card p {
font-size: 0.95rem;
}
.gd-contact-link {
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 800;
color: var(--color-primary, #4f7d2b);
}
/* ---- /faq/ — dark hero + search, sidebar category filter + question list,
dark "still have questions?" CTA band (SiteCare /faqs/ reference) --------- */
.gd-faq-hero > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
text-align: center;
}
.gd-faq-search-wrap {
max-width: 460px;
margin: 1.5rem auto 0;
}
.gd-faq-search {
width: 100%;
padding: 0.8rem 1.15rem;
border-radius: var(--radius-pill, 100px);
border: 1px solid transparent;
font: inherit;
font-size: 0.95rem;
color: var(--color-text, #333);
}
.gd-faq-search:focus-visible {
outline: 2px solid var(--color-primary, #4f7d2b);
outline-offset: 2px;
}
.gd-faq-search-empty {
margin: 0.85rem 0 0;
font-size: 0.9rem;
opacity: 0.85;
}
.gd-section .gd-faq-grid > .kt-row-column-wrap {
align-items: start;
gap: 2.5rem;
}
.gd-section .gd-faq-grid > .kt-row-column-wrap > .wp-block-kadence-column {
background: none !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible;
}
.gd-section .gd-faq-grid > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
padding: 0 !important;
}
@media (min-width: 768px) {
.gd-section .gd-faq-grid > .kt-row-column-wrap > .wp-block-kadence-column.gd-faq-sidebar {
position: sticky;
top: calc(var(--header-h, 70px) + 1.5rem);
align-self: start;
}
}
/* category nav — a JS-enhanced button list; a plain anchor list is the no-JS
* fallback (faq-page.js hides one and reveals the other). Same look either way. */
.gd-faq-nav,
.gd-faq-nav-fallback {
display: flex;
flex-direction: column;
gap: 0.2rem;
list-style: none;
margin: 0;
padding: 0;
}
/* faq-page.js toggles the `hidden` attribute to swap the button nav in for the
* plain-link fallback — the flex `display` above would otherwise win over it. */
.gd-faq-nav[hidden],
.gd-faq-nav-fallback[hidden] {
display: none !important;
}
.gd-faq-nav-item,
.gd-faq-nav-fallback a {
display: block;
width: 100%;
padding: 0.65rem 0.9rem;
border: 0;
border-radius: var(--radius-md, 10px);
background: none;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 700;
font-size: 0.92rem;
line-height: 1.35;
color: var(--color-heading, #141414);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.gd-faq-nav-item:hover,
.gd-faq-nav-fallback a:hover {
background: var(--color-bg-alt, #f3f8ec);
}
.gd-faq-nav-item.is-active {
background: var(--color-bg-alt, #f3f8ec);
color: var(--color-primary, #4f7d2b);
}
/* question list — group headings + the shared FAQ accordion card style */
.gd-faq-main h2.gd-faq-group-title {
margin: 0 0 1rem;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 900;
font-size: 1.35rem;
color: var(--color-heading, #141414);
}
.gd-faq-main h2.gd-faq-group-title:not(:first-child) {
margin-top: 2.75rem;
}
.gd-faq-main .wp-block-details {
margin-left: 0;
margin-right: 0;
max-width: none;
}
.gd-table-hint {
display: none;
}
/* ---- mobile ---------------------------------------------------------------- */
@media (max-width: 767px) {
.entry-content .wp-block-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* the base rule sets table { width: 100% }, which forces this 5-column
comparison table to compress/truncate at mobile widths instead of
scrolling; let it size to its content and scroll within the figure. */
.entry-content .wp-block-table table {
width: auto;
min-width: 100%;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
white-space: nowrap;
}
.entry-content .wp-block-table td:first-child,
.entry-content .wp-block-table th:first-child {
white-space: normal;
min-width: 9rem;
}
.gd-table-hint {
display: block;
font-size: 0.8rem;
color: var(--color-text-muted, #666);
text-align: right;
margin: 0.4rem 0 0;
}
}
/* ---- footer (#colophon) — dark band, needs its own text/link palette --------
* footer_wrap_background (apply-design-system.php) sets the near-black fill;
* Kadence's default footer text/link colors are the same dark ink used on the
* white body, so without this every column heading and link is unreadable. */
#colophon .widget-title {
color: #ffffff;
}
#colophon .footer-widget-area a,
#colophon .footer-html a {
color: rgba(255, 255, 255, 0.75);
}
#colophon .footer-widget-area a:hover,
#colophon .footer-html a:hover {
color: var(--color-primary, #4f7d2b);
}
#colophon .wp-block-paragraph,
#colophon .footer-html,
#colophon .footer-html p {
color: rgba(255, 255, 255, 0.6);
}
/* ---- /sign-up/ — "add another website" (see assets/js/signup-domains.js) -- */
.gd-domain-extra {
display: none;
}
.gd-domain-extra.is-visible {
display: block;
}
.gd-domain-add-link {
display: inline-block;
margin: -0.5rem 0 1.25rem;
background: none;
border: 0;
padding: 0;
font-family: var(--font-heading, 'Red Hat Display'), sans-serif;
font-weight: 800;
font-size: 0.9rem;
color: var(--color-primary, #4f7d2b);
cursor: pointer;
}
.gd-domain-add-link:hover {
color: var(--color-primary-hover, #3c6120);
text-decoration: underline;
}
/* ---- mobile menu — full-width drop-down below the header, not a full-height
* side drawer. header_popup_layout/animation/content_align/vertical_align and
* the mobile_navigation_color/divider theme_mods (apply-design-system.php)
* handle the fullwidth/light/left-aligned/dividers part; Kadence's own
* fullwidth layout still positions the drawer over the header (top:0, full
* viewport height), covering the logo — this repositions it below the header
* instead, sized to its own content instead of the full viewport. #mobile-drawer
* is an ID, so this needs no !important to beat Kadence's .popup-drawer rules. */
#mobile-drawer.popup-drawer-layout-fullwidth,
#mobile-drawer.popup-drawer-layout-fullwidth .drawer-inner,
#mobile-drawer.popup-drawer-layout-fullwidth .drawer-overlay {
top: var(--header-h, 70px);
}
#mobile-drawer.popup-drawer-layout-fullwidth,
#mobile-drawer.popup-drawer-layout-fullwidth .drawer-inner {
bottom: auto;
height: auto;
max-height: calc(100vh - var(--header-h, 70px));
overflow: auto;
}
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth,
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth .drawer-inner,
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth .drawer-overlay {
top: calc(var(--header-h, 70px) + 32px);
}
@media screen and (max-width: 782px) {
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth,
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth .drawer-inner,
.admin-bar #mobile-drawer.popup-drawer-layout-fullwidth .drawer-overlay {
top: calc(var(--header-h, 70px) + 46px);
}
}
/* bold uppercase links (reference: volta-serene-hotel.vercel.app) */
.mobile-navigation ul li > a {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.02em;
}
/* mobile hamburger button was 37x31px (Kadence default padding) — under the
* 48x48px minimum recommended touch-target size; it's the only way to open
* nav on mobile, so size it properly without moving the 20px icon. */
#mobile-toggle.menu-toggle-open {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 48px;
min-height: 48px;
padding: 0;
}
/* custom hamburger glyph (three offset/decreasing-width bars) replacing
* Kadence's default equal-width icon; masked so it still follows the
* button's currentColor (hover/active states keep working). */
#mobile-toggle .menu-toggle-icon svg {
display: none;
}
#mobile-toggle .menu-toggle-icon {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
}
#mobile-toggle .menu-toggle-icon::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%3E%3Cpath%20d%3D%22m11%2016.745c0-.414.336-.75.75-.75h9.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-9.5c-.414%200-.75-.336-.75-.75zm-9-5c0-.414.336-.75.75-.75h18.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-18.5c-.414%200-.75-.336-.75-.75zm4-5c0-.414.336-.75.75-.75h14.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-14.5c-.414%200-.75-.336-.75-.75z%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%3E%3Cpath%20d%3D%22m11%2016.745c0-.414.336-.75.75-.75h9.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-9.5c-.414%200-.75-.336-.75-.75zm-9-5c0-.414.336-.75.75-.75h18.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-18.5c-.414%200-.75-.336-.75-.75zm4-5c0-.414.336-.75.75-.75h14.5c.414%200%20.75.336.75.75s-.336.75-.75.75h-14.5c-.414%200-.75-.336-.75-.75z%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
/* single toggle, not two buttons: hide the drawer's own close button
* entirely and have the header's hamburger button itself swap to the X
* glyph while the drawer is open (keyed off the body class Kadence already
* toggles — no JS needed). */
.menu-toggle-close.drawer-toggle {
display: none !important;
}
/* its wrapper reserved a ~45px min-height for the now-hidden button, leaving
* an empty gap above the nav — collapse it too, nothing else lives in it. */
.drawer-header {
display: none !important;
}
body.showing-popup-drawer-from-full #mobile-toggle .menu-toggle-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%3E%3Cpath%20d%3D%22m12%2010.93%205.719-5.72c.146-.146.339-.219.531-.219.404%200%20.75.324.75.749%200%20.193-.073.385-.219.532l-5.72%205.719%205.719%205.719c.147.147.22.339.22.531%200%20.427-.349.75-.75.75-.192%200-.385-.073-.531-.219l-5.719-5.719-5.719%205.719c-.146.146-.339.219-.531.219-.401%200-.75-.323-.75-.75%200-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532%200-.425.346-.749.75-.749.192%200%20.385.073.531.219z%22%2F%3E%3C%2Fsvg%3E");
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%20stroke-linejoin%3D%22round%22%20stroke-miterlimit%3D%222%22%3E%3Cpath%20d%3D%22m12%2010.93%205.719-5.72c.146-.146.339-.219.531-.219.404%200%20.75.324.75.749%200%20.193-.073.385-.219.532l-5.72%205.719%205.719%205.719c.147.147.22.339.22.531%200%20.427-.349.75-.75.75-.192%200-.385-.073-.531-.219l-5.719-5.719-5.719%205.719c-.146.146-.339.219-.531.219-.401%200-.75-.323-.75-.75%200-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532%200-.425.346-.749.75-.749.192%200%20.385.073.531.219z%22%2F%3E%3C%2Fsvg%3E");
}