/*
Theme Name: Hello Elementor Child - Park.dog
Theme URI: https://park.dog
Description: Child theme for Park.dog Dog Playgrounds
Author: Park.dog
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/
/* ============================================
PARK.DOG — Custom CSS
Only things Elementor cannot handle:
pseudo-elements, hover effects, custom HTML
components, CF7 forms, browser resets.
============================================ */
:root {
--forest: #1B4332;
--forest-mid: #2D5A45;
--terra: #D4714E;
--terra-hover: #C0603F;
--blush: #D4B5A8;
--blush-light: #E8D5CB;
--sage: #8FA68F;
--sage-light: #A8BDA8;
--cream: #F5F0E8;
--charcoal: #2B2B2B;
--slate: #6B7B83;
--light: #E8E4DC;
--white: #FFFFFF;
--radius-md: 20px;
--radius-lg: 30px;
--font-display: 'Josefin Sans', sans-serif;
--font-body: 'DM Sans', sans-serif;
}
/* ---- Browser Resets ---- */
html, body { overflow-x: hidden; }
body { font-family: var(--font-body); color: var(--charcoal); }
.elementor-widget-text-editor p { margin: 0; }
.elementor-heading-title { margin: 0; }
/* ---- Header Nav (only layout fixes Elementor can't handle) ---- */
.elementor-location-header .e-con { flex-wrap: nowrap !important; }
.elementor-location-header .elementor-widget-nav-menu { flex-grow: 1; flex-shrink: 1; min-width: 0; }
/* Keep the Get a Quote button and language switcher at their natural widths
so the flex layout doesn't crush them when the nav menu is wide. */
.elementor-location-header .elementor-element-hdr_btn,
.elementor-location-header .elementor-element-hdr_lang {
flex-shrink: 0 !important;
}
.elementor-location-header .elementor-element-hdr_btn .elementor-button {
white-space: nowrap;
}
.elementor-location-header .elementor-nav-menu {
flex-wrap: nowrap !important; justify-content: center;
/* HTML mockup uses `gap: 4px` on `.nav`. Elementor's nav-menu has no
inter-item gap by default. */
gap: 4px;
}
.elementor-location-header .elementor-nav-menu .elementor-item {
white-space: nowrap; border-radius: 8px; transition: all 0.2s;
/* Match HTML mockup spacing. Elementor's nav-menu defaults force ~13px
vertical padding and `line-height: 20px`, neither of which is exposed
in the widget UI. Horizontal padding tightened from 14px to 10px to
leave room for the language switcher + Get a Quote at the right edge
without the ul overflowing its widget. */
padding-top: 8px !important;
padding-bottom: 8px !important;
padding-left: 8px !important;
padding-right: 8px !important;
line-height: normal !important;
}
/* Shortcode widget that holds the lang switcher — strip its default
widget padding and ensure its content (a single inline-flex .parkdog-lang-
switch span) is vertically centered alongside the menu items. */
.elementor-location-header .elementor-element-hdr_lang { padding: 0 !important; }
.elementor-location-header .elementor-element-hdr_lang,
.elementor-location-header .elementor-element-hdr_lang .elementor-widget-container {
display: flex !important;
align-items: center;
}
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active {
background: rgba(212, 113, 78, 0.06);
}
/* ---- Footer Columns (Elementor flex-grow doesn't generate CSS) ---- */
.elementor-element-fc_brand { flex: 2 1 0% !important; }
.elementor-element-fc_equip { flex: 1 1 0% !important; }
.elementor-element-fc_serv { flex: 1 1 0% !important; }
.elementor-element-fc_res { flex: 1 1 0% !important; }
.elementor-element-fc_contact { flex: 1.5 1 0% !important; }
/* ---- Footer Links (custom HTML in text widgets) ---- */
.parkdog-footer-link {
font-size: 13px; color: var(--sage-light);
margin-bottom: 8px; display: block;
transition: color 0.2s; text-decoration: none;
}
.parkdog-footer-link:hover { color: var(--white); }
/* ---- Language Switcher (WPML, with dev fallback) ----
Rendered by the `[parkdog_lang_switcher]` shortcode in functions.php.
Match the HTML mockup: small caps text, slate color, terra-on-active. */
.parkdog-lang-switch {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--slate);
white-space: nowrap;
}
.parkdog-lang-switch .parkdog-lang-sep {
margin: 0 2px;
}
.parkdog-lang-switch .parkdog-lang-item {
color: var(--slate);
text-decoration: none;
transition: color 0.2s;
padding: 2px 0;
}
.parkdog-lang-switch a.parkdog-lang-item:hover,
.parkdog-lang-switch a.parkdog-lang-item:focus {
color: var(--terra);
}
.parkdog-lang-switch .parkdog-lang-active {
color: var(--terra);
}
.parkdog-lang-switch .parkdog-lang-sep {
opacity: 0.35;
user-select: none;
}
/* The dev fallback (no WPML installed) gets a subtle muted tone so it's
visually distinct from real language links. */
.parkdog-lang-switch.parkdog-lang-dev {
opacity: 0.85;
}
/* ---- Trust Bar (custom HTML) ---- */
.parkdog-trust-item {
font-family: var(--font-display); font-size: 11px; font-weight: 700;
color: var(--sage-light); text-transform: uppercase; letter-spacing: 2px;
display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.parkdog-trust-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--terra); flex-shrink: 0; display: inline-block;
}
/* ---- Pseudo-Element Decorations ----
Heroes draw the decorative circle on ::after (not ::before) so that
::before stays free for Elementor's background-overlay layer (image +
tinted color wash on top). Without this split, adding an overlay in the
Elementor editor would erase the circle. */
.parkdog-hero-section { position: relative; overflow: hidden; }
.parkdog-hero-section::after {
content: ''; position: absolute; top: -120px; right: -120px;
width: 400px; height: 400px; border-radius: 50%;
background: var(--blush-light); opacity: 0.4;
z-index: 1; pointer-events: none;
}
.parkdog-hero-section > * { position: relative; z-index: 2; }
/* Hero image styling (radius + bottom fade) lives on the image widget itself
via .parkdog-hero-image-wrap → see css/home.css */
.parkdog-hero-img { position: relative; }
.parkdog-lead-magnet { position: relative; overflow: hidden; }
.parkdog-lead-magnet::before {
content: ''; position: absolute; top: -60px; right: -60px;
width: 200px; height: 200px; border-radius: 50%;
background: var(--blush-light); opacity: 0.3;
}
.parkdog-mission-block { position: relative; }
/* Elementor's .e-con::before is used for background-overlay (content:none, full-size).
Force our decorative circle to render at a fixed size on top, and clip the
overflow so the circle stays inside the cream container. */
.parkdog-mission-block.e-con { overflow: hidden !important; }
.parkdog-mission-block.e-con::before {
content: '' !important;
position: absolute !important;
top: -100px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 500px !important;
height: 500px !important;
border-radius: 50% !important;
background: var(--blush-light) !important;
opacity: 0.15 !important;
pointer-events: none;
}
.parkdog-mission-block > .e-con-inner > * { position: relative; z-index: 1; }
/* Constrain the mission description to match HTML's max-width:700px, centered */
.parkdog-mission-block .elementor-widget-text-editor {
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.parkdog-page-header { position: relative; overflow: hidden !important; }
.parkdog-page-header::after {
content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
width: 400px; height: 400px; border-radius: 50%;
background: var(--blush-light); opacity: 0.2; pointer-events: none;
}
.parkdog-pillar-panel { cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; }
.parkdog-pillar-panel:hover { transform: translateY(-4px); }
.parkdog-pillar-panel::before {
content: ''; position: absolute; top: 0; right: 0;
width: 150px; height: 150px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08); transform: translate(30%, -30%);
}
/* Pillar headers, pillar items, popular badge → css/equipment.css */
/* ---- Step Circle + Inner Elements (custom HTML widget) ---- */
.parkdog-step-circle {
width: 56px; height: 56px; border-radius: 50%;
background: var(--terra); color: var(--white);
font-family: var(--font-display); font-size: 20px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px;
}
.parkdog-step-circle + h4 {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--charcoal); line-height: normal;
margin: 0 0 8px 0;
}
.parkdog-step-circle ~ p { font-size: 13px; color: var(--slate); line-height: 1.6; margin: 0; }
/* ---- Feature List Arrows (pseudo-element) ---- */
.parkdog-feature-list { list-style: none; padding: 0; margin: 0; }
.parkdog-feature-list li { font-size: 14px; color: var(--charcoal); padding: 4px 0 4px 20px; position: relative; }
.parkdog-feature-list li::before { content: '\2192'; position: absolute; left: 0; color: var(--terra); font-weight: 700; }
/* "Most Popular" badge → css/equipment.css */
/* ---- Image Rounded Corners ----
The container is a transparent wrapper; only the ![]()
itself is rounded
(so when real photos replace placeholders no background color shows around them). */
.parkdog-img-rounded {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
overflow: visible;
}
.parkdog-img-rounded img {
border-radius: var(--radius-lg) !important;
display: block;
}
/* About-page image containers → css/about.css */
/* Contact sidebar fixed width → css/contact.css */
/* ---- Hover Effects (transform + shadow) ---- */
.elementor-widget-button .elementor-button { transition: all 0.3s; line-height: 1.4; }
.elementor-widget-button .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.parkdog-product-card { transition: all 0.3s; }
.parkdog-product-card:hover { border-color: var(--terra) !important; box-shadow: 0 4px 24px rgba(27, 67, 50, 0.07); transform: translateY(-2px); }
.parkdog-project-card { transition: all 0.3s; }
.parkdog-project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(27, 67, 50, 0.12); }
.parkdog-icon-box { transition: all 0.3s; }
.parkdog-icon-box:hover { border-color: var(--terra) !important; box-shadow: 0 4px 24px rgba(27, 67, 50, 0.07); }
.parkdog-icon-box p { font-size: 14px; color: #6B7B83; line-height: 1.6; margin: 0; }
/* ---- Grid Helpers (Elementor can't set fractional child widths) ---- */
.parkdog-grid-2 > .e-con { width: calc(50% - 16px) !important; flex-grow: 0 !important; }
.parkdog-grid-3 > .e-con { width: calc(33.333% - 16px) !important; flex-grow: 0 !important; }
.parkdog-grid-3-equal > .e-con { width: calc(33.333% - 16px) !important; flex-grow: 1 !important; min-height: 420px; }
.parkdog-grid-4 > .e-con { width: calc(25% - 15px) !important; flex-grow: 0 !important; }
/* ---- Contact Form 7 (all forms) ---- */
/* Global CF7 resets */
.wpcf7-form br { display: none; }
.wpcf7-form p { margin: 0; }
.wpcf7-spinner { display: none !important; }
.wpcf7-form-control-wrap { display: block; width: 100%; }
/* Validation error tips - inline, don't break layout */
.wpcf7-not-valid-tip {
font-size: 11px; color: var(--terra); margin-top: 4px;
display: block; position: absolute; bottom: -18px; left: 0;
}
.wpcf7-form-control-wrap { position: relative; }
/* Response message - styled for all forms */
.wpcf7-response-output {
border-radius: var(--radius-md) !important; padding: 16px 20px !important;
font-size: 14px; font-family: var(--font-body);
border: none !important; margin: 16px 0 0 0 !important;
}
.wpcf7-form.sent .wpcf7-response-output {
background: rgba(143, 166, 143, 0.1); color: var(--forest);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output {
background: rgba(212, 113, 78, 0.06); color: var(--terra);
}
.wpcf7-not-valid { border-color: var(--terra) !important; }
/* Lead magnet inline form */
.parkdog-cf7-leadmagnet .parkdog-cf7-row,
.parkdog-cf7-leadmagnet .parkdog-cf7-row p {
display: flex; gap: 12px; align-items: center; margin: 0; width: 100%;
}
.parkdog-cf7-leadmagnet .wpcf7-form-control-wrap { flex: 1; position: relative; }
.parkdog-cf7-leadmagnet input[type="email"] {
width: 100%; box-sizing: border-box;
padding: 14px 20px; border-radius: var(--radius-lg);
border: 1px solid var(--blush); font-family: var(--font-body);
font-size: 14px; color: var(--slate); background: var(--white); outline: none;
}
.parkdog-cf7-leadmagnet input[type="email"]:focus { border-color: var(--terra); }
.parkdog-cf7-leadmagnet input[type="submit"] {
padding: 14px 32px; border-radius: var(--radius-lg);
font-family: var(--font-body); font-size: 14px; font-weight: 700;
letter-spacing: 0.5px; cursor: pointer; border: none;
text-transform: uppercase; background: var(--terra); color: var(--white);
white-space: nowrap; transition: all 0.3s; flex-shrink: 0;
}
.parkdog-cf7-leadmagnet input[type="submit"]:hover {
background: var(--terra-hover); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 113, 78, 0.3);
}
.parkdog-cf7-leadmagnet .wpcf7-not-valid-tip { bottom: -16px; }
/* Contact page form */
.parkdog-cf7-form .wpcf7-form { font-family: var(--font-body); }
.parkdog-cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.parkdog-cf7-field { margin-bottom: 16px; padding-bottom: 4px; position: relative; }
.parkdog-cf7-label {
font-family: var(--font-display); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--charcoal); margin-bottom: 6px; display: block;
}
.parkdog-cf7-form input[type="text"],
.parkdog-cf7-form input[type="email"],
.parkdog-cf7-form textarea {
width: 100%; padding: 14px 20px; border-radius: var(--radius-md);
border: 1px solid var(--light); font-family: var(--font-body);
font-size: 14px; color: var(--charcoal); background: var(--white);
outline: none; transition: border-color 0.2s; box-sizing: border-box;
}
.parkdog-cf7-form input[type="text"]:focus,
.parkdog-cf7-form input[type="email"]:focus,
.parkdog-cf7-form textarea:focus { border-color: var(--terra); }
.parkdog-cf7-form textarea { min-height: 100px; resize: vertical; }
/* Chip selectors (radio as pills) */
.parkdog-cf7-chips .wpcf7-radio { display: flex; gap: 8px; flex-wrap: wrap; }
.parkdog-cf7-chips .wpcf7-list-item { margin: 0; }
.parkdog-cf7-chips .wpcf7-list-item input[type="radio"] { display: none; }
.parkdog-cf7-chips .wpcf7-list-item label {
display: inline-block; padding: 8px 18px; border-radius: 24px;
border: 1.5px solid var(--forest); font-family: var(--font-body);
font-size: 12px; color: var(--forest); cursor: pointer;
transition: all 0.2s; font-weight: 500; background: transparent;
}
.parkdog-cf7-chips .wpcf7-list-item:has(input[type="radio"]:checked) label,
.parkdog-cf7-chips .wpcf7-list-item label:hover { background: var(--forest); color: var(--white); }
/* Contact form submit button */
.parkdog-cf7-form input[type="submit"] {
padding: 14px 32px; border-radius: var(--radius-lg);
font-family: var(--font-body); font-size: 14px; font-weight: 700;
letter-spacing: 0.5px; cursor: pointer; border: none; transition: all 0.3s;
text-transform: uppercase; background: var(--terra); color: var(--white);
}
.parkdog-cf7-form input[type="submit"]:hover {
background: var(--terra-hover); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 113, 78, 0.3);
}
/* Section desc max-width (shared across hero/cta sections on multiple pages) */
.parkdog-section-desc,
.parkdog-section-desc .elementor-widget-container { max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; }
/* Service image/photo styling → css/services.css */
/* Equipment pillar headers, product cards, kit cards, badge, design/QR text → css/equipment.css */
/* ---- Page Header (hero) — centered content, restore decorative circle ----
Padding lives on .e-con-inner (Elementor's boxed-container convention) — do
NOT also pad .parkdog-page-header or the hero doubles in height. */
.parkdog-page-header > .e-con-inner {
align-items: center !important;
text-align: center;
}
/* Width-initial widgets (e.g. the hero description has max-width 700px) sit at
flex-start by default; force them to center horizontally within the column. */
.parkdog-page-header > .e-con-inner > .elementor-widget__width-initial {
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Elementor's .e-con uses ::before for the background-overlay layer.
Our decorative circle therefore lives on ::after, which Elementor leaves
free. The !important block re-asserts the circle properties even when
Elementor's container generic CSS tries to reset ::after. */
.parkdog-page-header.e-con::after {
content: '' !important;
position: absolute !important;
width: 400px !important;
height: 400px !important;
top: -80px !important;
left: 50% !important;
transform: translateX(-50%) !important;
border-radius: 50% !important;
background: var(--blush-light) !important;
opacity: 0.2 !important;
pointer-events: none;
z-index: 1;
}
.parkdog-page-header > * { position: relative; z-index: 2; }
/* ---- Icon-box border + radius (Elementor container border setting renders 3px / 0 radius) ---- */
.parkdog-icon-box {
border: 1px solid var(--light) !important;
border-radius: var(--radius-md) !important;
}
/* ---- Icon-box flex children: keep icon at its natural 56px, give text the rest ---- */
.parkdog-icon-box > .elementor-widget-html:first-child,
.parkdog-icon-box > .parkdog-detail-icon {
flex: 0 0 56px;
min-width: 56px;
}
.parkdog-icon-box > .elementor-widget-text-editor {
flex: 1 1 0;
min-width: 0;
}
/* ---- CTA banner — center description block and equalize button geometry ---- */
.parkdog-cta-desc {
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
}
.parkdog-cta-desc p { text-align: center; }
/* CTA buttons (dark + outline-light pair on terra background).
The dark button has no border; add a 2px transparent border so outer heights
match the outline-light button, and give both equal min-width for matching widths. */
.parkdog-cta-buttons-row .elementor-widget-button .elementor-button {
border: 2px solid transparent;
min-width: 240px;
justify-content: center;
padding: 14px 32px;
box-sizing: border-box;
}
.parkdog-cta-buttons-row .parkdog-btn-outline-light .elementor-button {
border-color: rgba(255, 255, 255, 0.5);
}
/* ---- Resources Page ---- */
/* Hero description: match HTML's .section-desc max-width:700px, centered. */
.parkdog-page-header .elementor-element-rsh_desc {
max-width: 700px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Generic icon-circle: image widget styled as a 56×56 rounded gradient
chip matching the HTML mockup's `.icon-circle`. Used on home value
cards, stakeholder cards, and why-page icon-boxes.
We target `.parkdog-icon-circle` directly (the widget wrapper) rather
than `.elementor-widget-container` because Elementor's optimized-markup
experiment removes that inner wrapper. Locking width/height + flex-
shrink also stops parent flex rows from squishing the chip. */
.parkdog-icon-circle.elementor-widget-image {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
flex: 0 0 56px !important; /* no grow, no shrink, fixed basis */
border-radius: 50%;
background: linear-gradient(135deg, rgba(212,113,78,.10), rgba(212,113,78,.05));
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
}
.parkdog-icon-circle img {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
object-fit: contain;
display: block;
margin: 0;
}
/* Elementor wraps the ![]()
in or a sized ; neutralise them
so the centering rule wins regardless of markup mode. */
.parkdog-icon-circle .elementor-widget-container,
.parkdog-icon-circle .elementor-image,
.parkdog-icon-circle a,
.parkdog-icon-circle figure {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* On a dark forest background (the home "Why Professional" cards), the
light gradient becomes invisible. Use a translucent white instead. */
.parkdog-icon-circle--on-forest.elementor-widget-image {
background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}
/* ---- Before / After image comparison widget ----
Custom widget defined in elementor-widgets/before-after.php. The
parent uses CSS variable `--ba-pos` (0%–100%) to position the divider
and clip the after-image. JS only needs to update that variable on
drag — no external library. */
.parkdog-ba {
position: relative;
width: 100%;
overflow: hidden;
--ba-pos: 50%;
user-select: none;
-webkit-user-select: none;
cursor: ew-resize;
}
.parkdog-ba__img {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
max-width: none;
object-fit: cover;
display: block;
}
.parkdog-ba__after-wrap {
/* Full-size overlay that's clipped via clip-path. The inner image
stays at the same dimensions/position as the before-image, so
dragging the divider reveals matched content underneath. */
position: absolute;
inset: 0;
overflow: hidden;
clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
-webkit-clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}
.parkdog-ba__after-wrap .parkdog-ba__after {
width: 100%;
height: 100%;
object-fit: cover;
max-width: none;
}
.parkdog-ba__divider {
position: absolute;
top: 0;
bottom: 0;
width: 3px;
left: var(--ba-pos);
transform: translateX(-50%);
background: #fff;
pointer-events: none;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}
.parkdog-ba__handle {
position: absolute;
top: 50%;
left: var(--ba-pos);
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid #fff;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
z-index: 2;
padding: 0;
}
.parkdog-ba__handle:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.parkdog-ba__handle svg { fill: var(--forest); pointer-events: none; }
.parkdog-ba__label {
position: absolute;
top: 16px;
padding: 6px 12px;
border-radius: 100px;
background: rgba(27, 67, 50, 0.75);
color: #fff;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
pointer-events: none;
z-index: 1;
}
.parkdog-ba__label--before { left: 16px; }
.parkdog-ba__label--after { right: 16px; }
.parkdog-ba__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 3;
}
/* ---- Pillar badge: 64×64 rounded chip with semi-transparent backdrop ----
Recreates HTML mockup's `.pillar-badge`. Default is white-tinted (for
terra/sage panels); the `--dark` modifier flips to black-tint for the
blush balance panel. Margin-bottom matches the mockup. */
.parkdog-pillar-badge.elementor-widget-image {
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
flex: 0 0 64px !important;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex !important;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 20px !important;
}
/* Equipment pillar header: the badge sits in a row alongside the heading
text block. Drop the bottom margin and let the grid layout centre the
badge vertically with the text. The header is rendered with
`align-items: center` already (see .parkdog-pillar-header.e-con). */
.parkdog-pillar-header .parkdog-pillar-badge.elementor-widget-image {
margin-bottom: 0 !important;
align-self: center;
}
.parkdog-pillar-badge--dark.elementor-widget-image {
background: rgba(0, 0, 0, 0.08);
}
/* Constrain the SVG inside the badge to 28px so it doesn't fill the chip. */
.parkdog-pillar-badge img {
width: 28px !important;
height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
object-fit: contain;
display: block;
margin: 0;
}
/* Defeat Elementor's inner wrappers regardless of markup mode. */
.parkdog-pillar-badge .elementor-widget-container,
.parkdog-pillar-badge .elementor-image,
.parkdog-pillar-badge a,
.parkdog-pillar-badge figure {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* Resource icon container — Elementor's min/max-width via {size,unit} doesn't
emit CSS, so the container stretched to ~50% of the card. Force a 56×56
round container so it matches HTML's .icon-circle. */
.elementor-element-rs_icon {
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
flex: 0 0 56px !important;
border-radius: 50% !important;
overflow: hidden;
display: flex !important;
align-items: center;
justify-content: center;
}
/* Icon image inside the resource card circle — cap at 32px on BOTH axes
so a tall PNG/SVG can't push past the circle. `object-fit: contain`
keeps the aspect ratio intact within that box. */
.elementor-element-rs_icon img {
width: 32px !important;
height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
object-fit: contain;
display: block;
}
/* Neutralise Elementor's inner wrappers so the image actually centres. */
.elementor-element-rs_icon .elementor-widget-image,
.elementor-element-rs_icon .elementor-widget-container,
.elementor-element-rs_icon .elementor-image,
.elementor-element-rs_icon a,
.elementor-element-rs_icon figure {
display: flex !important;
align-items: center;
justify-content: center;
width: auto !important;
height: auto !important;
margin: 0 !important;
}
/* Primary resource (is_primary=1 → first card): terra-filled button instead of
outline; also shows the "Email required" hint after the button.
The .parkdog-resource-primary class is added by functions.php → post_class
filter to the e-loop-item wrapper, so it's an ancestor of the button. */
.parkdog-resource-primary .elementor-button {
background-color: var(--terra) !important;
color: var(--white) !important;
border-color: var(--terra) !important;
}
.parkdog-resource-primary .elementor-button:hover {
background-color: var(--terra-hover) !important;
border-color: var(--terra-hover) !important;
}
.parkdog-resource-primary .elementor-element-rs_btn::after {
content: 'Email required';
font-size: 11px;
color: var(--slate);
margin-left: 8px;
vertical-align: middle;
display: inline;
}
/* ---- Responsive ---- */
@media (max-width: 1024px) {
.parkdog-grid-3 > .e-con, .parkdog-grid-3-equal > .e-con, .parkdog-grid-4 > .e-con { width: calc(50% - 12px) !important; }
.parkdog-pillar-panel { min-height: auto !important; }
/* ====== HEADER: burger on the LEFT, slide-out drawer from the left ======
Elementor's nav-menu widget renders three things on tablet/mobile:
1. .elementor-nav-menu--main (the horizontal desktop nav) — hidden here
2. .elementor-menu-toggle (the burger) — kept, restyled, moved left
3. .elementor-nav-menu--dropdown (the menu panel) — turned into a fixed drawer
The inline "Get a Quote" button is hidden; scripts.js clones it into the drawer.
Body class `parkdog-drawer-open` is toggled by JS to drive the open state and backdrop. */
.elementor-location-header .elementor-element-hdr {
position: relative;
}
/* Nav widget pushed to the far right so the toggle sits at the right edge.
Logo stays in its natural position on the left. */
.elementor-location-header .elementor-element-hdr_nav {
order: 2;
flex-grow: 0 !important;
flex-shrink: 0 !important;
width: auto !important;
min-width: 0 !important;
margin-left: auto;
}
/* Hide the inline desktop nav, the inline Get-a-Quote button, and the
inline language switcher — all three are presented inside the drawer
on tablet/mobile. The lang widget's DOM node stays in place though
(just display:none), so scripts.js can still clone it into the drawer. */
.elementor-location-header .elementor-nav-menu--main { display: none !important; }
.elementor-location-header .elementor-element-hdr_btn { display: none !important; }
.elementor-location-header .elementor-element-hdr_lang { display: none !important; }
/* Burger toggle — themed, calmer, and clearly clickable */
.elementor-location-header .elementor-menu-toggle {
background: transparent !important;
border: 1px solid #E8E4DC !important;
border-radius: 8px !important;
padding: 0 !important;
margin: 0 !important;
width: 40px;
height: 40px;
color: var(--forest) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
.elementor-location-header .elementor-menu-toggle:hover,
.elementor-location-header .elementor-menu-toggle:focus {
background: rgba(212, 113, 78, 0.06) !important;
border-color: var(--terra) !important;
}
.elementor-location-header .elementor-menu-toggle svg {
width: 22px !important;
height: 22px !important;
fill: var(--forest);
}
/* Logo a bit smaller on tablet so it fits comfortably */
.elementor-location-header .elementor-element-hdr_logo img { max-width: 150px; }
/* ---- Slide-out drawer ----
Drawer sits on the RIGHT side of the viewport (same side as the
toggle) and slides in from off-screen right — motion direction
right→left, ending flush with the right edge of the screen.
The drawer stays inside the header so Elementor's per-widget styles
(font, color, hover) on the menu items match naturally. The header
is `position: sticky` with `z-index: 1000`, which would normally
trap the drawer below the backdrop (z-index 1099 at root); we lift
the header to z-index 1101 while the drawer is open so the drawer
(1100 inside the header's context) renders above the backdrop.
`display: block !important` and `visibility: visible !important` keep
the dropdown rendered at all times so the transform animation drives
the entire reveal — without this Elementor would flip `display: none`
on and off and you'd see a drop/jump instead of a smooth slide. */
.elementor-location-header .elementor-nav-menu--dropdown {
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
height: 100vh !important;
width: 320px !important;
max-width: 85vw;
background: var(--white);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
z-index: 1100;
padding: 80px 20px 24px !important;
margin: 0 !important;
/* CRITICAL: Elementor's own CSS animates `transform: scaleY(0→1)`
on the dropdown (it's where the "drop-down" effect comes from),
so we must use !important on transform to keep our slide-from-
the-right translateX from being overridden. The transition is
also !important so Elementor can't replace it. */
transform: translateX(100%) !important;
transition: transform 0.3s ease !important;
display: block !important;
visibility: visible !important;
max-height: none !important;
overflow-y: auto !important;
border: none !important;
transform-origin: center !important;
}
body.parkdog-drawer-open .elementor-location-header .elementor-nav-menu--dropdown {
transform: translateX(0) !important;
}
/* Hide Elementor's burger toggle once the drawer is open — the
backdrop now overlays the header (drawer was moved out of the
header in scripts.js), so the toggle would still be visible
beneath the dim layer. Hiding it cleans that up and prevents
click interference with the drawer's close button.
Note: pointer-events:none on a parent doesn't inherit to SVG children
(their default is `visiblePainted`), so we cover the descendants too. */
body.parkdog-drawer-open .elementor-location-header .elementor-menu-toggle,
body.parkdog-drawer-open .elementor-location-header .elementor-menu-toggle * {
opacity: 0 !important;
pointer-events: none !important;
}
/* Only override what's needed for the drawer layout — Elementor's
per-widget CSS drives the look of each link, so we don't touch
font/color/padding here. */
.elementor-location-header .elementor-nav-menu--dropdown ul.elementor-nav-menu {
display: flex !important;
flex-direction: column !important;
}
/* Active page — Elementor sets the active item's color to white in the
global kit, which is invisible on our white drawer background.
Override active and hover/focus to terra orange. */
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--dropdown li.current-menu-item > .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown li.current_page_item > .elementor-item,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown .elementor-item:focus {
color: var(--terra) !important;
}
/* Close (X) button at the top-right of the drawer (rendered by scripts.js) */
.parkdog-drawer-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
padding: 0;
background: transparent;
border: 1px solid #E8E4DC;
border-radius: 8px;
color: var(--forest);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
}
.parkdog-drawer-close:hover,
.parkdog-drawer-close:focus {
background: rgba(212, 113, 78, 0.06);
border-color: var(--terra);
}
/* Language switcher row inside the drawer — sits between nav links and
the Get a Quote CTA. scripts.js clones the on-page .parkdog-lang-switch
node into here; if no switcher exists on the page yet (shortcode not
added), this row is simply absent. */
.parkdog-drawer-lang {
display: flex;
justify-content: center;
padding: 16px 16px 0;
border-top: 1px solid #E8E4DC;
margin-top: 16px;
}
.parkdog-drawer-lang .parkdog-lang-switch {
font-size: 12px;
letter-spacing: 2.5px;
}
/* The cloned "Get a Quote" CTA injected by scripts.js — sits at the bottom of the drawer */
.parkdog-drawer-cta {
display: block;
margin: 20px 16px 0;
padding: 12px 24px;
background: var(--forest);
color: var(--white) !important;
text-decoration: none;
border-radius: 20px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
transition: background 0.2s;
}
.parkdog-drawer-cta:hover, .parkdog-drawer-cta:focus {
background: var(--forest-mid);
color: var(--white) !important;
}
/* Backdrop — full-viewport overlay that fades in with the drawer */
.parkdog-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(27, 67, 50, 0.45);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
z-index: 1099;
}
body.parkdog-drawer-open .parkdog-drawer-backdrop {
opacity: 1;
visibility: visible;
}
/* Lock body scroll while the drawer is open */
body.parkdog-drawer-open { overflow: hidden; }
/* Footer: brand spans the full row, then the 4 link columns lay out
2-per-row (Equipment+Services, Resources+Contact). The grid has a
40px column-gap, so each 50% column's basis must be `50% - 20px`
(half the gap) for two to fit cleanly per row.
NOTE: we target the footer grid by its element-id class (footer_grid)
rather than the generic `.e-con.e-parent`, because adding an image
to the footer can re-nest the grid as a child container (turning
`e-parent` into `e-child`) and silently break these rules. */
.elementor-location-footer .elementor-element-footer_grid { flex-wrap: wrap !important; }
.elementor-element-fc_brand {
flex: 1 1 100% !important;
min-width: 0 !important;
}
.elementor-element-fc_equip,
.elementor-element-fc_serv,
.elementor-element-fc_res,
.elementor-element-fc_contact {
flex: 1 1 calc(50% - 20px) !important;
min-width: 0 !important;
}
}
@media (max-width: 767px) {
.parkdog-grid-2 > .e-con, .parkdog-grid-3 > .e-con, .parkdog-grid-3-equal > .e-con, .parkdog-grid-4 > .e-con { width: 100% !important; }
.parkdog-grid-3-equal > .e-con { min-height: auto !important; }
.parkdog-cf7-row { grid-template-columns: 1fr; }
/* Header: hide button text label space so it doesn't push burger menu */
.elementor-location-header .elementor-element-hdr_btn .elementor-button {
padding-left: 16px !important;
padding-right: 16px !important;
font-size: 11px !important;
}
/* Footer: all 5 columns stack to single column on mobile.
Padding inherits from desktop/tablet — no override. */
.elementor-element-fc_brand,
.elementor-element-fc_equip,
.elementor-element-fc_serv,
.elementor-element-fc_res,
.elementor-element-fc_contact {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}
/* Make sure no footer element forces a wider min-width (e.g. button) */
.elementor-location-footer .elementor-button {
white-space: normal;
max-width: 100%;
}
}