/**
* Ranch Listings - Template Styles
* Minimal design system inspired by Grommet v2
*/
/* ==========================================================================
Grommet-Inspired Base Styles
========================================================================== */
/* Typography */
:root {
--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
--font-size-base: 16px;
--font-size-small: 13px;
--font-size-large: 20px;
--font-size-xlarge: 32px;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-weight-display: 700;
--line-height-base: 1.65;
--line-height-heading: 1.15;
/* Colors — resolved from theme global styles where available.
WP block themes emit --wp--preset--color--{slug} from theme.json,
but slug names differ per theme. Fallback chains cover the most
common patterns: TT4 (base/contrast), TT3 (background/foreground),
community themes (primary/accent/white/black).
Hard-coded fallbacks keep the plugin usable on classic themes. */
/* Palette. This site is dark-only and this plugin is not reused elsewhere,
so these resolve straight to the dark tokens defined further down rather
than chaining through whatever presets a host theme happens to emit.
Keeping the --color-* names means the ~800 rules that reference them did
not have to change. */
--color-brand: var(--dark-accent);
--color-text: var(--dark-text);
--color-text-weak: var(--dark-text-muted);
--color-border: var(--dark-border);
--color-border-weak: rgb(255, 255, 255, 0.05);
--color-background: var(--dark-bg);
--color-background-contrast: var(--dark-card);
--color-focus: var(--dark-accent);
--color-active: var(--dark-text);
/* Spacing - Grommet scale */
--space-xxsmall: 6px;
--space-xsmall: 12px;
--space-small: 24px;
--space-medium: 48px;
--space-large: 96px;
/* Border radius */
--border-radius-xs: 1px;
--border-radius-sm: 3px;
--border-radius: 4px;
}
/* Accessibility: bump small font sizes on mobile for older users.
--font-size-small goes from 13→15px, --font-size-base from 16→17px. */
@media (max-width: 768px) {
:root {
--font-size-small: 15px;
--font-size-base: 17px;
}
}
.ranch-plugin {
font-family: var(--font-family);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
/* Cascade theme body text color; --color-text is the resolved fallback
for contexts that need an explicit value (e.g. cards, overlays). */
color: inherit;
}
/* Headings (scoped). The `:not(.ranch-single--mag)` carve-out keeps the
magazine single-property template from inheriting these font/weight
overrides, so the theme's `styles.elements.heading.typography` (Site
Editor → Styles → Typography → Headings) can cascade through there. */
.ranch-plugin:not(.ranch-single--mag) h1,
.ranch-plugin:not(.ranch-single--mag) h2,
.ranch-plugin:not(.ranch-single--mag) h3,
.ranch-plugin:not(.ranch-single--mag) h4,
.ranch-plugin:not(.ranch-single--mag) h5,
.ranch-plugin:not(.ranch-single--mag) h6 {
font-family: var(--font-family);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
color: var(--color-text);
letter-spacing: -0.02em;
margin: 0;
}
/* ---- Button reset (all plugin buttons, no visual styles) ---- */
.ranch-plugin button {
font-family: var(--font-family);
line-height: var(--line-height-base);
box-sizing: border-box;
cursor: pointer;
}
/* ---- Action button base (.ranch-btn + legacy .button alias) ---- */
.ranch-btn,
.ranch-plugin .button,
.ranch-plugin input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-family);
font-size: var(--font-size-small);
font-weight: var(--font-weight-bold);
line-height: 1;
padding: var(--space-xsmall) var(--space-small);
border: 1px solid var(--color-brand);
border-radius: var(--border-radius);
background: var(--color-brand);
color: #ffffff;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
outline: none;
}
.ranch-btn:hover,
.ranch-plugin .button:hover,
.ranch-plugin input[type="submit"]:hover {
background: var(--color-active);
border-color: var(--color-active);
}
.ranch-btn:focus-visible,
.ranch-plugin .button:focus-visible,
.ranch-plugin input[type="submit"]:focus-visible {
box-shadow: 0 0 0 2px var(--color-focus);
outline: none;
}
/* ---- Button variants ---- */
.ranch-btn-primary,
.ranch-plugin .button-primary {
background: var(--color-brand);
border-color: var(--color-brand);
color: #ffffff;
}
.ranch-btn-primary:hover,
.ranch-plugin .button-primary:hover {
background: var(--color-active);
border-color: var(--color-active);
}
.ranch-btn-secondary,
.ranch-plugin .button-secondary {
background: var(--color-background);
color: var(--color-text);
border: 1px solid var(--color-border);
}
.ranch-btn-secondary:hover,
.ranch-plugin .button-secondary:hover {
background: var(--color-background-contrast);
color: white;
}
/* Inputs - Grommet style (scoped) */
.ranch-plugin input[type="text"],
.ranch-plugin input[type="number"],
.ranch-plugin input[type="email"],
.ranch-plugin input[type="search"],
.ranch-plugin select,
.ranch-plugin textarea {
font-family: var(--font-family);
font-size: var(--font-size-base);
padding: var(--space-xsmall);
border: 1px solid var(--dark-input-bg, #132435);
border-radius: var(--border-radius);
background: var(--dark-input-bg, #132435);
color: var(--color-text);
outline: none;
transition: all 0.2s ease;
}
.ranch-plugin input:focus,
.ranch-plugin select:focus,
.ranch-plugin textarea:focus {
border-color: var(--color-focus);
box-shadow: 0 0 0 1px var(--color-focus);
border-color: var(--dark-accent) !important;
box-shadow: 0 0 0 1px var(--dark-accent) !important;
}
.ranch-plugin input::placeholder {
color: var(--color-text-weak);
}
/* Cards - Grommet style (scoped) */
.ranch-plugin .card,
.featured-grid-item {
background: var(--color-background);
border: 1px solid var(--color-border-weak);
border-radius: var(--border-radius);
overflow: hidden;
transition: all 0.2s ease;
}
.ranch-plugin .card:hover,
.ranch-card:hover,
.featured-grid-item:hover {
border-color: var(--color-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
Single Ranch Property Template
========================================================================== */
.ranch-single {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-bottom: var(--space-large);
background-color: var(--color-background);
box-sizing: border-box;
margin-top: 0;
}
/* Hero Area - Two Column Layout */
/* Hero Image */
/* Hero Map */
.ranch-hero-map {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: #f5f5f5;
}
@media (max-width: 768px) {
.ranch-hero-map {
height: 400px;
}
}
.ranch-map-hero {
width: 100%;
height: 100%;
}
.ranch-idland-embed {
display: block;
border: 0;
}
.ranch-hero-image.hero-image-position-top img {
object-position: center top;
}
.ranch-hero-image.hero-image-position-bottom img {
object-position: center bottom;
}
.ranch-hero-image.hero-image-position-left img {
object-position: left center;
}
.ranch-hero-image.hero-image-position-right img {
object-position: right center;
}
/* Hero video (Vimeo background). The iframe is scaled to 16:9 of the
smaller hero dimension and centered, so the video covers the hero box
without letterboxing — matching object-fit: cover for static images. */
.ranch-hero-video-frame {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Pause/play toggle, top-right of the hero video. Pointer events re-enabled
here so the button is clickable even though the frame disables them. */
.ranch-hero-video-toggle {
position: absolute;
top: clamp(12px, 2vw, 24px);
right: clamp(12px, 2vw, 24px);
z-index: 5;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(20, 20, 20, 0.55);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
font: 600 12px/1 var(--font-family, "Inter", system-ui, sans-serif);
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
pointer-events: auto;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.ranch-hero-video-toggle:hover,
.ranch-hero-video-toggle:focus-visible {
background: rgba(20, 20, 20, 0.75);
border-color: rgba(255, 255, 255, 0.6);
outline: none;
}
.ranch-hero-video-toggle:focus-visible {
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.ranch-hero-video-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
}
/* Style both icon SVGs with matching specificity so the show/hide rules
below win. (A `.ranch-hero-video-toggle__icon svg` rule has higher
specificity than `.ranch-hero-video-toggle__pause` and would otherwise
force `display:none` on both icons.) */
.ranch-hero-video-toggle__pause,
.ranch-hero-video-toggle__play {
width: 14px;
height: 14px;
fill: currentColor;
display: none;
}
.ranch-hero-video-toggle__pause { display: inline-block; }
.ranch-hero-video-toggle[aria-pressed="true"] .ranch-hero-video-toggle__pause { display: none; }
.ranch-hero-video-toggle[aria-pressed="true"] .ranch-hero-video-toggle__play { display: inline-block; }
.ranch-hero-video-toggle[aria-pressed="true"] {
background: rgba(255, 255, 255, 0.92);
color: #1a1a1a;
border-color: rgba(0, 0, 0, 0.12);
}
@media (max-width: 600px) {
.ranch-hero-video-toggle__label { display: none; }
.ranch-hero-video-toggle { padding: 10px; }
}
.ranch-hero-video-frame iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
aspect-ratio: 16 / 9;
transform: translate(-50%, -50%);
border: 0;
}
/* View Gallery Button */
.ranch-plugin .view-gallery-btn {
position: absolute;
bottom: var(--space-small);
right: var(--space-small);
padding: var(--space-xsmall) var(--space-small);
cursor: pointer;
border-radius: var(--border-radius);
display: flex;
align-items: center;
gap: var(--space-xxsmall);
transition: all 0.2s ease;
}
/* .ranch-plugin .view-gallery-btn:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
} */
.gallery-icon {
font-size: 20px;
}
/* Gallery Modal */
.gallery-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
overflow: auto;
}
.gallery-modal.active {
display: block;
}
.gallery-modal-content {
position: relative;
margin: 40px auto;
padding: 40px;
max-width: 1400px;
}
.gallery-close {
position: fixed;
top: 20px;
right: 40px;
color: white;
font-size: 48px;
font-weight: 300;
cursor: pointer;
z-index: 10000;
transition: color 0.3s ease;
}
.gallery-close:hover {
color: #ccc;
}
/* Gallery Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px 0;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 4px;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
/* Property Header */
.ranch-header {
background: var(--color-background);
padding: var(--space-medium);
/* border-bottom: 1px solid var(--color-border-weak);
margin-bottom: var(--space-small); */
}
/* Status + type badges in single property header */
.ranch-header-content .listing-badge {
margin: 0 4px 8px;
vertical-align: middle;
}
.ranch-listing-status,
.ranch-card-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
max-width: max-content;
}
.ranch-listing-status::before,
.ranch-card-status::before {
content: '';
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
background: currentColor;
opacity: 0.7;
}
.ranch-listing-status {
margin-bottom: var(--space-xsmall);
}
.ranch-card-status {
margin-bottom: var(--space-xsmall);
}
.ranch-header-actions {
display: flex;
gap: 0;
justify-content: center;
margin-top: var(--space-small);
}
.ranch-header-actions .button {
border-radius: 0;
border-right: 0;
}
.ranch-header-actions .button:first-child {
border-radius: var(--border-radius) 0 0 var(--border-radius);
}
.ranch-header-actions .button:last-child {
border-radius: 0 var(--border-radius) var(--border-radius) 0;
border-right: 1px solid var(--color-border);
}
.ranch-scroll-summary {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 950;
background: var(--color-background);
border-bottom: 1px solid var(--color-border-weak);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
opacity: 0;
transform: translateY(-100%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.ranch-scroll-summary.visible {
opacity: 1;
transform: translateY(0);
}
.scroll-summary-actions .button {
margin: 0;
border-radius: 0;
height: 100%;
padding: var(--space-xsmall) var(--space-small);
border-right: 0;
}
.scroll-summary-actions .button:last-child {
border-right: 1px solid var(--color-border);
}
/* .scroll-summary-location,
.scroll-summary-price,
.scroll-summary-acres {
color: var(--color-white);
} */
body.admin-bar .ranch-scroll-summary {
top: 32px;
}
.ranch-meta-bar {
display: flex;
flex-wrap: wrap;
gap: var(--space-small);
padding: var(--space-xsmall) 0;
border-top: 1px solid var(--color-border-weak);
border-bottom: 1px solid var(--color-border-weak);
margin: var(--space-xsmall) 0;
}
.ranch-meta-bar .meta-item {
font-size: var(--font-size-base);
}
.ranch-meta-bar .meta-item.price strong {
color: var(--color-text);
font-size: var(--font-size-large);
}
.ranch-meta-bar .meta-item.acres strong {
color: var(--color-text);
font-size: var(--font-size-base);
}
.ranch-taxonomies {
display: flex;
flex-wrap: wrap;
gap: var(--space-xsmall);
margin-top: var(--space-xsmall);
}
.ranch-taxonomies .taxonomy-group {
font-size: var(--font-size-small);
}
.ranch-taxonomies .taxonomy-group strong {
color: var(--color-text);
margin-right: var(--space-xxsmall);
}
/* Content Wrapper — full browser width */
/* Property Details Bar */
.price-original {
text-decoration: line-through;
color: var(--color-text-weak);
font-weight: var(--font-weight-normal);
font-size: 0.85em;
margin-right: 4px;
}
.contact-agent-box,
.quick-facts-box,
.property-map-box {
background: var(--color-background);
border: 1px solid var(--color-border-weak);
padding: var(--space-small);
margin-bottom: var(--space-small);
border-radius: var(--border-radius);
transition: box-shadow 0.2s ease;
}
.contact-agent-box:hover,
.quick-facts-box:hover,
.property-map-box:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.contact-agent-box h3,
.quick-facts-box h3,
.property-map-box h3 {
margin: 0 0 var(--space-xsmall) 0;
color: var(--color-text);
font-size: var(--font-size-base);
border-bottom: 1px solid var(--color-border-weak);
padding-bottom: var(--space-xsmall);
font-weight: var(--font-weight-bold);
}
.contact-agent-box .button {
display: block;
width: 100%;
text-align: center;
padding: var(--space-xsmall);
margin-bottom: var(--space-xxsmall);
text-decoration: none;
border-radius: var(--border-radius);
font-weight: var(--font-weight-bold);
}
.ranch-map {
width: 100%;
height: 250px;
background: var(--color-background-contrast);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-weak);
}
/* Main Content Sections */
.ranch-main-content {
background: var(--color-background);
}
.ranch-section {
margin-top: var(--space-large);
margin-bottom: var(--space-large);
}
.ranch-section:last-child {
margin-bottom: 0;
}
/* ===== Unified Overlay System (slide-over from the right) =====
A full-height panel that slides in from the right edge over a dimmed
backdrop, the Tailwind UI slide-over pattern: 28rem for forms, wider
for galleries, maps and video, the whole screen on phones. The panel
and backdrop animate in with keyframes (a transition cannot run on an
element leaving display: none); .is-closing plays them in reverse
before frontend.js hides the overlay. */
.ranch-overlay {
position: fixed;
inset: 0;
z-index: 960;
display: none;
overflow: hidden;
}
.ranch-overlay[hidden]:not(.active) {
display: none !important;
}
.ranch-overlay.active {
display: block !important;
}
/* Semi-transparent backdrop */
.ranch-overlay-backdrop {
position: fixed;
inset: 0;
background-color: rgba(107, 114, 128, 0.75);
cursor: pointer;
animation: fadeIn 0.25s ease-out both;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ranchSlideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.ranch-overlay.is-closing .ranch-overlay-backdrop {
animation: fadeIn 0.25s ease-out reverse both;
}
/* ---- Drawer panel (slides in from the right) ---- */
.ranch-overlay-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
z-index: 961;
width: 100%;
max-width: 28rem;
height: 100%;
max-height: none;
display: flex;
flex-direction: column;
background-color: var(--color-background);
border-radius: 0;
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
overflow: hidden;
margin: 0;
animation: ranchSlideIn 0.25s ease-out both;
}
/* frontend.js focuses the panel itself on open (tabindex -1) so keyboard
and screen reader users land inside it; that is not a control, so no ring. */
.ranch-overlay-drawer:focus {
outline: none;
}
.ranch-overlay.is-closing .ranch-overlay-drawer {
animation: ranchSlideIn 0.25s ease-out reverse both;
}
@media (prefers-reduced-motion: reduce) {
.ranch-overlay-backdrop,
.ranch-overlay-drawer,
.ranch-overlay.is-closing .ranch-overlay-backdrop,
.ranch-overlay.is-closing .ranch-overlay-drawer {
animation: none;
}
}
/* Video and map drawers: wide panels for visual content */
.ranch-overlay-drawer-video,
.ranch-overlay-drawer-map {
max-width: min(100vw, 72rem);
}
/* Gallery: a dark popup, not a slide-over. It fills the screen less a
20px margin on desktop and fades in over a near-black backdrop. */
@keyframes ranchPopIn {
from { opacity: 0; transform: scale(0.98); }
to { opacity: 1; transform: scale(1); }
}
.ranch-overlay-drawer-gallery {
inset: 20px;
width: auto;
height: auto;
max-width: none;
border-radius: 8px;
box-shadow: none;
animation: ranchPopIn 0.2s ease-out both;
}
.ranch-overlay.is-closing .ranch-overlay-drawer-gallery {
animation: ranchPopIn 0.2s ease-out reverse both;
}
.ranch-overlay:has(.ranch-overlay-drawer-gallery) .ranch-overlay-backdrop {
background-color: rgba(0, 0, 0, 0.9);
}
.ranch-overlay-drawer.ranch-overlay-drawer-gallery,
.ranch-overlay-drawer-gallery .ranch-overlay-header,
.ranch-overlay-drawer-gallery .ranch-overlay-body {
background-color: #000;
border-color: #1f1f1f;
}
.ranch-overlay-drawer-gallery .ranch-overlay-header h2 {
color: #f3f4f6;
}
.ranch-overlay-drawer-gallery .ranch-overlay-body {
scrollbar-color: #3f3f46 #000;
}
.ranch-overlay-drawer-gallery .ranch-overlay-close {
color: #9ca3af;
}
.ranch-overlay-drawer-gallery .ranch-overlay-close:hover {
color: #fff;
}
.ranch-overlay-drawer-gallery .ranch-overlay-close:focus-visible {
outline-color: #fff;
}
@media (prefers-reduced-motion: reduce) {
.ranch-overlay-drawer-gallery,
.ranch-overlay.is-closing .ranch-overlay-drawer-gallery {
animation: none;
}
}
/* ---- Overlay header ---- */
.ranch-overlay-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--color-border-weak);
flex-shrink: 0;
background-color: var(--color-background);
}
.ranch-overlay-header h2 {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
}
/* ---- Overlay body ---- */
.ranch-overlay-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 24px;
background-color: var(--color-background);
}
.ranch-overlay-body > p:first-child {
margin-top: 0;
}
/* ---- Close button ---- */
.ranch-overlay-close {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 0;
border: none;
background: none;
color: var(--color-text-weak);
font-size: 28px;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease;
}
.ranch-overlay-close:hover {
color: var(--color-text);
}
.ranch-overlay-close:focus-visible {
outline: 2px solid #374151;
outline-offset: 2px;
border-radius: 4px;
}
/* ---- Video container ----
An aspect box, the same mechanism core's embed block uses
(.wp-embed-responsive .wp-has-aspect-ratio). The iframe fills it, so
the player keeps the video's shape at every width instead of a fixed
pixel height that letterboxes on phones and clips on tablets.
--dcd-player-chrome is the vertical space the drawer spends around the
player (header + body padding, plus the filmstrip in the playlist
overlay). The max-width derived from it keeps the whole player above
the drawer's 90vh fold on short viewports without changing its shape. */
.ranch-video-container {
--dcd-player-chrome: 140px;
position: relative;
width: 100%;
max-width: calc((100vh - var(--dcd-player-chrome)) * 16 / 9);
max-width: calc((100dvh - var(--dcd-player-chrome)) * 16 / 9);
aspect-ratio: 16 / 9;
margin: 0 auto;
background: #000;
border-radius: 4px;
overflow: hidden;
}
.ranch-video-container iframe {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Portrait video (YouTube Shorts, Instagram/Facebook reels, TikTok):
a phone-proportioned, centered 9:16 box instead of a 16:9 frame with
black pillars either side. */
.ranch-video-container.is-portrait {
max-width: min(420px, calc((100vh - var(--dcd-player-chrome)) * 9 / 16));
max-width: min(420px, calc((100dvh - var(--dcd-player-chrome)) * 9 / 16));
aspect-ratio: 9 / 16;
}
/* ---- Mobile adjustments ---- */
@media (max-width: 640px) {
/* Every drawer takes the whole screen on phones, and the video
player runs edge to edge: 16px of padding per side is a tenth of
the width on a 375px phone, and a 9:16 Short needs every vertical
pixel. */
.ranch-overlay-drawer {
max-width: none;
height: 100dvh;
}
.ranch-overlay-drawer-gallery {
inset: 0;
border-radius: 0;
}
.ranch-overlay-body {
padding: 16px;
}
.ranch-overlay-drawer-video .ranch-overlay-body {
padding: 0;
}
.ranch-overlay-drawer-video .ranch-video-container {
--dcd-player-chrome: 72px; /* header only */
max-width: calc((100vh - var(--dcd-player-chrome)) * 16 / 9);
max-width: calc((100dvh - var(--dcd-player-chrome)) * 16 / 9);
border-radius: 0;
}
.ranch-overlay-drawer-video .ranch-video-container.is-portrait {
max-width: calc((100vh - var(--dcd-player-chrome)) * 9 / 16);
max-width: calc((100dvh - var(--dcd-player-chrome)) * 9 / 16);
}
}
/* ---- Inline contact form (overlay disabled) ---- */
.ranch-contact-inline {
width: 100%;
max-width: 1400px;
background-color: #ffffff;
padding: 32px;
margin: 0 auto;
border-radius: var(--border-radius);
box-sizing: border-box;
margin-bottom: var(--space-large);
}
.ranch-contact-inline h2 {
margin-top: 0;
}
.ranch-section h2 {
font-size: var(--font-size-large);
color: var(--color-text);
margin-bottom: var(--space-small);
font-weight: var(--font-weight-display);
letter-spacing: -0.025em;
line-height: 1.25;
}
.ranch-section h3 {
font-size: var(--font-size-base);
color: var(--color-text);
margin: var(--space-small) 0 var(--space-xsmall) 0;
font-weight: var(--font-weight-bold);
letter-spacing: -0.01em;
}
.subsection {
margin-bottom: var(--space-medium);
}
.subsection:last-child {
margin-bottom: 0;
}
.ranch-section .subsection {
margin-bottom: var(--space-small);
}
.ranch-overview-layout.no-highlights,
.ranch-overview-layout.no-sidebar {
grid-template-columns: 1fr;
}
.ranch-overview-layout .ranch-section {
margin-bottom: 0;
}
.ranch-editor-content .excerpt {
font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.45rem);
line-height: 1.55;
color: var(--color-text);
margin-bottom: var(--space-small);
font-weight: 500;
}
.ranch-editor-content .excerpt p {
margin-bottom: 0;
}
.ranch-highlights-panel,
.ranch-broker-panel {
margin-top: 0;
background: linear-gradient(130deg, var(--color-background-contrast) 0%, var(--color-background) 100%);
border: 1px solid var(--color-border-weak);
border-radius: var(--border-radius);
padding: var(--space-small);
}
.ranch-highlights-panel h2,
.ranch-broker-panel h2 {
margin-bottom: var(--space-xsmall);
}
.ranch-highlights-panel .section-content,
.ranch-broker-panel .section-content {
font-size: var(--font-size-small);
}
.ranch-contact-list {
display: grid;
gap: var(--space-small);
}
.ranch-contact-card {
padding-bottom: var(--space-small);
border-bottom: 1px solid var(--color-border-weak);
}
.ranch-contact-card:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.ranch-contact-photo {
margin-bottom: var(--space-xsmall);
}
.ranch-contact-photo img {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
}
.ranch-contact-name {
font-size: var(--font-size-base);
font-weight: 600;
margin-bottom: 2px;
}
.ranch-contact-name a {
color: var(--color-text);
text-decoration: none;
}
.ranch-contact-name a:hover,
.ranch-contact-name a:focus-visible {
color: var(--dark-accent-fg);
}
.ranch-contact-title {
color: var(--color-text-weak);
margin-bottom: var(--space-xxsmall);
}
.ranch-contact-detail a {
color: var(--dark-accent-fg);
text-decoration: none;
}
.ranch-contact-detail a:hover,
.ranch-contact-detail a:focus-visible {
text-decoration: underline;
}
.ranch-contact-btn {
display: block;
width: 100%;
margin-top: var(--space-xsmall);
padding: var(--space-xxsmall) var(--space-small);
font-size: var(--font-size-small);
font-weight: 600;
text-align: center;
text-decoration: none;
border: none;
border-radius: var(--border-radius);
cursor: pointer;
}
.ranch-grid-column {
flex: 1;
min-width: 0; /* prevent flex child from overflowing */
overflow-y: auto;
}
.ranch-map-large {
width: 100%;
height: 500px;
border-radius: var(--border-radius);
border: 1px solid var(--color-border-weak);
}
/* ==========================================================================
Map info window (the bubble opened by clicking a pin)
Structure is built in openPropertyInfoWindow() in frontend.js. Google's
own wrappers (.gm-style-iw-*) are restyled further down in the dark-theme
section so the photo can run edge to edge under the close button.
========================================================================== */
.map-info-window {
width: 260px;
overflow: hidden;
font-family: var(--font-family);
background: var(--dark-card);
color: var(--dark-text);
}
/* Hero photo: full bleed, fixed 16:10, corners clipped by the bubble */
.map-info-window__hero {
position: relative;
display: block;
overflow: hidden;
line-height: 0;
background: var(--dark-input-bg);
}
.map-info-window__hero a {
display: block;
}
.map-info-window__thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
height: auto;
object-fit: cover;
}
/* Status ribbon (Under Contract, New Listing, ...). Inherits the card badge
colors; only positioned here. */
.map-info-window__badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* Fay Ranches insignia. Sits bottom-right over the thumbnail so it echoes the
card watermark; when there is no thumbnail (mobile, or a listing with no
featured image) the JS emits it into the body instead and it corners itself
against the title, hence the two positioning contexts below. */
.map-info-window__fay {
position: absolute;
right: 10px;
bottom: 8px;
z-index: 2;
width: 44px;
height: auto;
opacity: 0.95;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
pointer-events: none;
}
.map-info-window__body > .map-info-window__fay {
top: 14px;
right: 14px;
bottom: auto;
width: 34px;
filter: none;
}
/* Body */
.map-info-window__body {
position: relative;
padding: 12px 14px 14px;
}
/* Keep the title clear of the body-corner insignia, and of the overlaid
close button when there is no photo for it to sit on. */
.map-info-window--fay .map-info-window__body > .map-info-window__fay ~ .map-info-window__title,
.map-info-window--no-hero .map-info-window__title {
padding-right: 40px;
}
.map-info-window__title {
margin: 0 0 2px;
font-size: 15px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--dark-text) !important;
word-break: break-word;
}
.map-info-window__title a {
color: var(--dark-text) !important;
text-decoration: none;
}
.map-info-window__title a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.map-info-window__location {
margin: 0 0 10px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: var(--dark-text-muted) !important;
}
/* Price and acreage share a row, split by a hairline, like the card stats */
.map-info-window__stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
margin: 0 0 12px;
padding-top: 10px;
border-top: 1px solid var(--dark-border);
}
.map-info-window__price {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--dark-text) !important;
font-variant-numeric: tabular-nums;
}
/* Stands in for a withheld price ("Contact for Price"): reads as a note,
not as a figure, so it doesn't compete with real prices on the map. */
.map-info-window__price--note {
font-size: 12px;
font-weight: 500;
font-style: italic;
color: var(--dark-text-muted) !important;
}
.map-info-window__acres {
font-size: 13px;
font-weight: 500;
line-height: 1.2;
color: var(--dark-text-muted) !important;
font-variant-numeric: tabular-nums;
}
/* CTA: a full-width button rather than a text link */
.map-info-window__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
box-sizing: border-box;
padding: 9px 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--border-radius);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
color: var(--dark-text) !important;
background: rgba(255, 255, 255, 0.06);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.map-info-window__cta:hover,
.map-info-window__cta:focus-visible {
text-decoration: none;
color: #fff !important;
background: var(--dark-accent);
border-color: var(--dark-accent-fg);
}
.map-info-window__cta-arrow {
flex: none;
transition: transform 0.15s ease;
}
.map-info-window__cta:hover .map-info-window__cta-arrow {
transform: translateX(2px);
}
/* Hide the hero thumbnail (and its overlays) on mobile so the info window
stays compact when tapping pins on a small screen. The JS in
openPropertyInfoWindow() also skips building the image below this width. */
@media (max-width: 768px) {
.map-info-window {
width: 240px;
}
.map-info-window__hero {
display: none;
}
/* The close button overlays the body here, so keep the title clear of it */
.map-info-window__title {
padding-right: 40px;
}
/* Comfortable thumb target */
.map-info-window__cta {
padding: 13px 12px;
font-size: 13px;
}
}
.no-map-data {
padding: var(--space-large) var(--space-small);
text-align: center;
background: var(--color-background-contrast);
border-radius: var(--border-radius);
border: 1px dashed var(--color-border);
}
.no-map-data p {
font-size: var(--font-size-base);
color: var(--color-text-weak);
margin: 0 0 var(--space-xxsmall) 0;
}
.no-map-data p:last-child {
margin-bottom: 0;
}
.map-notice {
position: absolute;
bottom: var(--space-small);
left: var(--space-small);
right: var(--space-small);
background: rgba(255, 255, 255, 0.95);
padding: var(--space-xsmall) var(--space-small);
border-radius: var(--border-radius);
border: 1px solid var(--color-border-weak);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
z-index: 1000;
}
.map-notice p {
margin: 0;
font-size: var(--font-size-small);
color: var(--color-text-weak);
}
.map-error {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 300px;
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: var(--border-radius);
padding: var(--space-small);
text-align: center;
}
.map-error p {
margin: 0;
color: #856404;
font-size: var(--font-size-base);
}
/* Admin Form Styles */
.label-text {
font-weight: 600;
display: inline-block;
margin-bottom: 5px;
}
/* Property Grid */
.ranch-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--space-small);
margin-bottom: var(--space-medium);
}
.ranch-card {
position: relative;
/* Own stacking context. Without this the card is z-index:auto, so its
children (.ranch-card-link-overlay z:1, badges z:2, inner links z:3)
escape into the ROOT stacking context, where they tie with or beat
.ranch-filters-section (sticky, z:1). That is why an open filter
dropdown rendered underneath the property cards. Isolating keeps that
internal layering inside the card, and the card as a whole then sits
below the filter bar. */
isolation: isolate;
background: rgba(255, 255, 255, 0.7);
border-radius: var(--border-radius);
overflow: hidden;
transition: box-shadow 0.22s ease, transform 0.22s ease;
display: flex;
flex-direction: column;
cursor: pointer;
}
.ranch-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}
.ranch-card:active {
transform: translateY(-1px) scale(0.995);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}
.ranch-card-link-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: block;
border-radius: inherit;
}
.ranch-card a:not(.ranch-card-link-overlay),
.ranch-card button,
.ranch-card input,
.ranch-card select,
.ranch-card textarea {
position: relative;
z-index: 3;
}
/* Keep whole-card click reliable by allowing non-interactive layers to pass
pointer events through to the overlay link. Explicit controls remain active. */
.ranch-card-image,
.ranch-card-content {
pointer-events: none;
}
.ranch-card .ranch-card-badges,
.ranch-card .ranch-card-badges .listing-badge,
.ranch-card .ranch-card-prop-types a,
.ranch-card .ranch-card-view-details {
pointer-events: auto;
}
.ranch-card-image {
position: relative;
overflow: hidden;
height: 280px;
}
/* The card photo — :not() excludes the Fay Ranches watermark, which is a
sibling ![]()
in the same frame and must keep its own size and stay put
while the photo zooms. */
.ranch-card-image img:not(.ranch-card-fay-mark) {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.35s ease;
}
.ranch-card:hover .ranch-card-image img:not(.ranch-card-fay-mark) {
transform: scale(1.025);
}
/* ── Fay Ranches co-brand watermark ───────────────────────────────────────── */
/* Listings in the Fay Ranches region carry the partner insignia in the */
/* bottom-right of the card photo. The SVG is white-on-transparent, so a soft */
/* drop shadow keeps it legible over pale skies and snow. */
/* Scoped through .ranch-card so theme-level `img` rules can't restyle it. */
.ranch-card .ranch-card-fay-mark {
position: absolute;
right: var(--space-small);
bottom: var(--space-small);
width: 58px;
height: auto;
z-index: 2;
opacity: 0.92;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
pointer-events: none;
}
@media (max-width: 600px) {
.ranch-card .ranch-card-fay-mark {
width: 46px;
}
}
/* ── Listing Badge System ─────────────────────────────────────────────────── */
/* Single source of truth for status, featured, and type labels on all cards */
.listing-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--border-radius-sm);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.6;
color: #fff;
text-decoration: none;
backdrop-filter: blur(4px);
background: rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.2);
}
.listing-badge:hover,
.listing-badge:focus {
text-decoration: underline;
}
/* Status variants */
/* .listing-badge--available { background: rgba(22, 101, 52, 0.85); border-color: rgba(134,239,172,0.3); } */
.listing-badge--sold { background: rgba(127, 29, 29, 0.85); border-color: rgba(252,165,165,0.3); }
.listing-badge--under-contract { background: rgba(120, 53, 15, 0.85); border-color: rgba(253,186,116,0.3); }
.listing-badge--pending { background: rgba(91, 33, 182, 0.85); border-color: rgba(196,181,253,0.3); }
.listing-badge--off-market { background: rgba(30, 30, 30, 0.85); border-color: rgba(255,255,255,0.15); }
.listing-badge--new-listing { background: rgba(3, 105, 161, 0.85); border-color: rgba(125,211,252,0.3); }
/* Featured */
.listing-badge--featured {
background: rgba(180, 130, 30, 0.9);
border-color: rgba(255,220,100,0.3);
}
/* Property type — light content area, not on image */
.listing-badge--type {
background: rgba(36, 61, 106, 0.07);
color: var(--color-text);
border-color: rgba(36, 61, 106, 0.18);
backdrop-filter: none;
font-weight: 600;
letter-spacing: 0.03em;
background: var(--dark-card) !important;
border-color: var(--dark-border) !important;
color: var(--dark-text-muted) !important;
}
.listing-badge--type:hover {
background: rgba(36, 61, 106, 0.14);
border-color: rgba(36, 61, 106, 0.3);
color: var(--color-text);
text-decoration: none;
background: var(--dark-card-hover) !important;
border-color: var(--dark-accent) !important;
color: var(--dark-text) !important;
}
/* Badge row — positions badges at top of image for both card variants */
.ranch-card-badges {
position: absolute;
top: var(--space-xsmall);
left: var(--space-xsmall);
right: var(--space-xsmall);
display: flex;
justify-content: space-between;
align-items: flex-start;
z-index: 2;
gap: var(--space-xxsmall);
pointer-events: none;
}
.ranch-card-badges .listing-badge {
pointer-events: auto;
}
.ranch-card-content {
padding: var(--space-small);
flex: 1;
}
.ranch-card-title {
margin: 0 0 var(--space-xxsmall) 0;
font-size: var(--font-size-large);
}
.ranch-card-title {
color: var(--color-text);
}
.ranch-card-county {
font-size: var(--font-size-base);
font-weight: 600;
color: var(--color-text);
margin-bottom: 2px;
letter-spacing: 0.01em;
color: var(--dark-text) !important;
}
.ranch-card-location {
color: var(--color-text-weak);
margin-bottom: var(--space-xsmall);
font-size: var(--font-size-small);
}
.ranch-card.is-map-selected {
outline: 2px solid var(--color-primary, #1a6e3c);
outline-offset: -2px;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary, #1a6e3c) 20%, transparent);
}
/* ── Hero Card Variant ────────────────────────────────────────────────────── */
.ranch-card--hero {
background: #111;
aspect-ratio: 3 / 4;
min-height: 320px;
overflow: hidden;
}
/* Full-card overlay link — sits behind badges and body (z-index 1).
Badges and hero-body are z-index 2 and remain individually clickable. */
.ranch-card-hero-link {
position: absolute;
inset: 0;
z-index: 1;
display: block;
border-radius: inherit;
}
.ranch-card-hero-bg {
position: absolute;
inset: 0;
background-color: #1a1a1a;
overflow: hidden;
transition: transform 0.4s ease;
will-change: transform;
}
/* Card photo is a real ![]()
(srcset + native lazy-load) doing cover duty. */
.ranch-card-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.ranch-card--hero:hover .ranch-card-hero-bg {
transform: scale(1.04);
}
/* Gradient: subtle vignette top for badges, strong overlay bottom for text */
.ranch-card-hero-link::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(0,0,0,0.45) 0%,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0) 45%,
rgba(0,0,0,0.55) 70%,
rgba(0,0,0,0.65) 100%
);
pointer-events: none;
}
/* Hero card uses .ranch-card-badges — defined above with .listing-badge system */
/* Body — pinned to bottom, above gradient */
.ranch-card-hero-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-small);
z-index: 2;
}
/* Hero body owns the bottom of the card, so the watermark shares that corner:
reserve a gutter on the right rather than letting stats run under the mark. */
.ranch-card--hero.is-fay-listing .ranch-card-hero-body {
padding-right: calc(var(--space-small) + 66px);
}
@media (max-width: 600px) {
.ranch-card--hero.is-fay-listing .ranch-card-hero-body {
padding-right: calc(var(--space-small) + 54px);
}
}
.ranch-card-hero-title {
margin: 0 0 6px;
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-weight: 700;
line-height: 1.2;
color: #fff !important;
letter-spacing: -0.01em;
}
.ranch-card-hero-title a {
color: inherit !important;
text-decoration: none;
}
.ranch-card-hero-title a:hover {
text-decoration: underline;
}
.ranch-card-hero-county {
font-size: var(--font-size-base);
font-weight: 600;
color: #fff !important;
letter-spacing: 0.01em;
margin-bottom: 2px;
}
.ranch-card-hero-location {
font-size: var(--font-size-small);
color: rgba(255,255,255,0.65) !important;
margin-bottom: var(--space-xsmall);
letter-spacing: 0.02em;
}
.ranch-card-hero-stats {
display: flex;
flex-wrap: wrap;
gap: var(--space-xsmall);
align-items: baseline;
padding-top: var(--space-xsmall);
margin-top: var(--space-xsmall);
}
.hero-stat {
color: #fff;
font-weight: 700;
font-size: var(--font-size-base);
}
.hero-stat--price {
font-size: 1.05rem;
}
.hero-stat-original {
font-weight: 400;
text-decoration: line-through;
opacity: 0.6;
margin-right: 4px;
font-size: 0.85em;
}
.hero-stat--acres {
color: rgba(255,255,255,0.8);
font-size: var(--font-size-small);
font-weight: 500;
}
/* Free-text price label (ACF price_comment): "(Asking Price)", "Contact
Broker", … Rendered after the price, or alone when there is no price. */
.price-comment {
font-weight: 500;
font-size: 0.85em;
opacity: 0.85;
white-space: nowrap;
}
.price-comment--solo {
font-weight: 600;
font-size: 1em;
opacity: 1;
}
/* Sold date stat on sold-listing cards */
.hero-stat--sold-date {
color: rgba(255,255,255,0.8);
font-size: var(--font-size-small);
font-weight: 500;
}
.ranch-card--hero:hover {
box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
/* Dark mode: hero card needs no extra overrides — it's always dark */
/* ==========================================================================
Related Properties section
========================================================================== */
.ranch-related-properties {
padding: clamp(40px, 6vw, 72px) 0;
background: var(--mag-bg-soft, var(--color-background-contrast, #f5f5f5));
background: var(--dark-surface);
}
.ranch-related-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(16px, 4vw, 40px);
}
body.properties-template-default .ranch-related-heading {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 700;
margin: 0 0 clamp(20px, 3vw, 32px);
letter-spacing: -0.01em;
}
/* ── "In the News" band ───────────────────────────────────────────────────
Articles linked to this listing from the post side. Shares the
.ranch-related-properties band above, so only the cards are styled here. */
/* "Listings in this Article" is injected into the post's own content column,
not laid over the full page, so it drops the band's surface and gutters and
simply flows on from the article text. */
.ranch-post-listings {
background: none;
padding: clamp(24px, 4vw, 40px) 0 0;
}
.ranch-post-listings .ranch-related-inner {
max-width: none;
margin: 0;
padding: 0;
}
/* Columns are capped, not 1fr: a listing with a single article would otherwise
stretch one card the full band width and blow its 16:9 media up with it. */
.ranch-news-band__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
justify-content: start;
gap: clamp(16px, 2vw, 28px);
}
.ranch-news-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
background: var(--dark-card);
border-radius: var(--mag-radius, 2px);
overflow: hidden;
transition: background .2s ease, transform .2s ease;
}
.ranch-news-card:hover,
.ranch-news-card:focus-visible {
background: var(--dark-card-hover);
transform: translateY(-2px);
}
.ranch-news-card__media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.ranch-news-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ranch-news-card__body {
padding: clamp(14px, 1.6vw, 20px);
display: flex;
flex-direction: column;
gap: 6px;
}
/* Date above title, then excerpt — mirrors the associate profile cards
(.dcd-profile-post-*) so the two read as the same component. */
.ranch-news-card__date {
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--dark-text-muted);
}
.ranch-news-card__title {
margin: 0;
font-size: 1.05rem;
line-height: 1.35;
color: var(--dark-text);
}
.ranch-news-card__excerpt {
margin: 0;
font-size: .875rem;
line-height: 1.55;
color: var(--dark-text-muted);
}
@media (prefers-reduced-motion: reduce) {
.ranch-news-card {
transition: none;
}
.ranch-news-card:hover,
.ranch-news-card:focus-visible {
transform: none;
}
}
.ranch-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: clamp(16px, 2.5vw, 24px);
}
/* Dark mode */
.ranch-card-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-xxsmall);
padding: var(--space-xsmall) 0 0 0;
border-top: 1px solid var(--color-border-weak);
margin: var(--space-xsmall) 0 0 0;
border-top-color: transparent;
}
.ranch-card-meta .meta-item {
font-size: var(--font-size-small);
color: var(--dark-text-muted);
}
.ranch-card-meta .meta-item.price strong {
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
}
.ranch-card-meta .meta-label {
color: var(--color-text-weak);
margin-right: 5px;
color: var(--dark-text-muted);
}
/* Archive Ranch Listings Template */
/* Archive wrapper — always full-width, theme-isolated */
.ranch-archive-wrapper {
/* width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw); */
background-color: var(--wp--preset--color--light-background);
box-sizing: border-box;
margin-top: 0;
overflow-x: clip; /* prevent 100vw scrollbar bleed from creating horizontal scroll */
}
.ranch-archive-wrapper .container {
max-width: 1800px;
margin: 0 auto;
padding: 0 var(--space-medium);
box-sizing: border-box;
}
/* Status-scoped archive heading (rendered on the Sold view) */
.ranch-archive-heading {
padding-top: 44px;
padding-bottom: 10px;
text-align: center;
}
/* Specificity note: .ranch-plugin:not(.ranch-single--mag) h1 (0,2,1) forces
the plugin sans on headings; header.ranch-archive-heading h1 under the
wrapper is (0,2,2) so the site serif wins here. */
.ranch-archive-wrapper header.ranch-archive-heading h1 {
margin: 0;
font-family: var(--wp--preset--font-family--cormorant-garamond, "Cormorant Garamond", serif);
font-size: clamp(32px, 4vw, 44px);
font-weight: 600;
line-height: 1.15;
color: var(--dark-text, #f8fafc);
}
.ranch-archive-heading p {
margin: 6px 0 0;
font-family: var(--font-family);
font-size: 0.95rem;
color: var(--dark-text-muted, #8aa0c2);
}
/* Compact Filter Bar — full viewport width */
.ranch-filters-section {
background: var(--color-background);
position: sticky;
top: 0;
z-index: 1;
/* width: 100vw; */
/* margin-left: calc(50% - 50vw); */
/* box-shadow: 0 1px 0 rgba(0,0,0,0.07); */
}
.ranch-filters-section.is-stuck {
z-index: 10;
}
body.admin-bar .ranch-filters-section {
top: 32px;
}
/* Collapsible filter on mobile (grid view). The filter is hidden behind
a "Filters" toggle button so users can scroll listings immediately. */
.ranch-filter-toggle {
display: none;
}
@media (max-width: 768px) {
.ranch-filter-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 10px;
margin: 0;
border: none;
background: var(--color-background, #fff);
color: var(--color-text, #1f1f1f);
font: 600 var(--font-size-small) / 1 var(--font-family);
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
border-bottom: 1px solid var(--color-border-weak, rgba(0,0,0,0.08));
}
.ranch-filter-toggle__caret {
font-size: 0.75em;
transition: transform 0.2s;
}
.ranch-filters-section.is-collapsed .ranch-filter-toggle__caret {
transform: rotate(0deg);
}
.ranch-filters-section:not(.is-collapsed) .ranch-filter-toggle__caret {
transform: rotate(180deg);
}
.ranch-filters-section.is-collapsed .ranch-search-form {
display: none;
}
.ranch-filter-toggle {
background: var(--dark-surface, #1a1a1a);
color: var(--dark-text, #eaeaea);
border-bottom-color: var(--dark-border, rgba(255,255,255,0.1));
}
}
/* Keep filter content centered and padded like a container */
.ranch-search-form {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-xsmall) clamp(1rem, 4vw, 3rem);
}
.filter-bar {
display: flex;
align-items: stretch;
gap: 6px;
flex-wrap: wrap;
}
.filter-bar-field {
flex: 1 1 120px;
}
.filter-bar-field:first-child {
flex: 2 1 180px;
}
.filter-bar-field input:focus,
.filter-bar-field select:focus {
outline: 2px solid var(--wp--preset--color--primary, var(--color-brand, #2271b1));
outline-offset: -2px;
border-color: transparent;
box-shadow: none;
}
.filter-bar-range {
display: flex;
align-items: center;
gap: var(--space-xxsmall);
flex: 1 1 180px;
}
.filter-bar-range input {
flex: 1;
min-width: 0;
}
.filter-bar-range .separator {
color: var(--color-text-weak);
font-size: var(--font-size-small);
flex-shrink: 0;
}
.filter-bar-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
align-items: stretch;
}
.filter-bar-actions .button {
height: 36px;
padding: 0 16px;
font-size: var(--font-size-small);
border-radius: var(--border-radius-sm);
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
font-weight: 600;
font-family: var(--font-family);
white-space: nowrap;
border: 1px solid transparent;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-bar-actions .button-primary {
background: var(--wp--preset--color--primary, var(--color-brand, #2271b1));
color: #fff;
border-color: transparent;
}
.filter-bar-actions .button-primary:hover {
opacity: 0.85;
color: #fff;
}
.filter-bar-actions .button-secondary {
background: transparent;
color: var(--color-text-weak);
border-color: var(--color-border-weak, rgba(0,0,0,0.15));
}
.filter-bar-actions .button-secondary:hover {
color: var(--color-text);
border-color: var(--color-text-weak);
background: transparent;
}
/* Multi-select checkbox dropdown (Features filter) */
.filter-bar-field--checkbox-dropdown {
position: relative;
}
.filter-checkbox-toggle {
width: 100%;
height: 100%;
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xxsmall);
padding: 0 var(--space-xsmall);
background: #fff;
color: var(--color-text);
border: 1px solid var(--color-border, #ccc);
border-radius: var(--border-radius-sm);
font-family: var(--font-family);
font-size: var(--font-size-small);
cursor: pointer;
text-align: left;
appearance: none;
}
.filter-checkbox-toggle:focus {
outline: 2px solid var(--wp--preset--color--primary, var(--color-brand, #2271b1));
outline-offset: -2px;
border-color: transparent;
}
.filter-checkbox-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.filter-checkbox-caret {
flex-shrink: 0;
font-size: 1.25rem;
transition: transform 0.15s;
}
.filter-bar-field--checkbox-dropdown.is-open .filter-checkbox-caret {
transform: rotate(180deg);
}
.filter-checkbox-menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 20;
min-width: 220px;
max-width: 320px;
max-height: 320px;
overflow-y: auto;
padding: var(--space-xxsmall) 0;
background: #fff;
border: 1px solid var(--color-border, #ccc);
border-radius: var(--border-radius-sm);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
/* Full-width apply button pinned to the bottom of a checkbox dropdown. */
.filter-checkbox-apply {
position: sticky;
bottom: 0;
display: block;
width: calc(100% - 16px);
margin: 6px 8px 4px;
padding: 9px 12px;
font: 600 12px/1 var(--font-family);
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
cursor: pointer;
border: 0;
border-radius: var(--border-radius-sm, 4px);
background: var(--dark-accent, #1a3d6d);
color: #fff;
transition: background-color 0.15s ease;
}
.filter-checkbox-apply:hover {
background: var(--dark-accent-strong, #245090);
}
.filter-checkbox-menu::-webkit-scrollbar {
width: 10px;
}
.filter-checkbox-menu::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.18);
border-radius: 999px;
}
.filter-checkbox-menu::-webkit-scrollbar-thumb {
background: rgba(15, 23, 42, 0.45);
border-radius: 999px;
}
.filter-checkbox-menu {
scrollbar-color: rgba(15, 23, 42, 0.45) rgba(15, 23, 42, 0.18);
scrollbar-width: thin;
}
.filter-checkbox-search-wrap {
position: sticky;
top: 0;
z-index: 1;
padding: 8px 12px;
background: inherit;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.filter-checkbox-search {
width: 100%;
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: var(--border-radius-sm);
background: rgba(255, 255, 255, 0.96);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--font-size-small);
}
.filter-checkbox-search::placeholder {
color: rgba(15, 23, 42, 0.58);
}
.filter-checkbox-search:focus {
outline: 2px solid var(--wp--preset--color--primary, var(--color-brand, #2271b1));
outline-offset: 0;
border-color: transparent;
}
.filter-checkbox-item {
display: flex;
align-items: center;
gap: var(--space-xxsmall);
padding: 6px 12px;
font-size: var(--font-size-small);
color: var(--color-text);
cursor: pointer;
}
/* Out-of-scope options are hidden via the [hidden] attribute (set by the
cascade JS). Author display:flex above outranks the UA [hidden] rule, so
restore display:none with a more specific selector. */
.filter-checkbox-item[hidden] {
display: none;
}
.filter-checkbox-item:hover {
background: var(--color-background-contrast, #f8f8f8);
}
.filter-checkbox-item input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
}
.filter-checkbox-empty {
padding: 8px 12px 10px;
font-size: var(--font-size-small);
color: rgba(15, 23, 42, 0.62);
}
/* Option rows set their own (light-mode dark) color via --color-text, which
inheritance from the menu above can't override — re-lighten in dark mode so
region/county names aren't dark-on-dark. */
.ranch-archive--dark .filter-checkbox-item,
.filter-checkbox-item {
color: var(--color-text-dark, #eaeaea);
}
.ranch-archive--dark .filter-checkbox-menu::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.08);
}
.ranch-archive--dark .filter-checkbox-menu::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.28);
}
.ranch-archive--dark .filter-checkbox-menu {
scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08);
}
.ranch-archive--dark .filter-checkbox-search-wrap {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
.ranch-archive--dark .filter-checkbox-search {
background: rgba(9, 18, 32, 0.9);
color: var(--color-text-dark, #eaeaea);
border-color: rgba(255, 255, 255, 0.14);
}
.ranch-archive--dark .filter-checkbox-search::placeholder {
color: rgba(234, 234, 234, 0.58);
}
.ranch-archive--dark .filter-checkbox-empty {
color: rgba(234, 234, 234, 0.68);
}
.ranch-archive--dark .filter-checkbox-item:hover {
background: rgba(255, 255, 255, 0.06);
}
/* Results Section */
.ranch-results-section {
padding: var(--space-medium) 0;
background-color: var(--dark-bg);
}
/* Full-bleed treatment for the map view. The `.full-width` class is
set by PHP based on the URL's `view_type` param at page load, but the
user can toggle views via JS without a refresh — so we also key off
the live `data-view` attribute via :has() to keep the layout in sync. */
.ranch-results-section .container.full-width,
.ranch-results-section:has(.ranch-view-container[data-view="map"]) .container {
max-width: 100%;
padding: 0;
}
.ranch-results-section .container.full-width .results-header,
.ranch-results-section:has(.ranch-view-container[data-view="map"]) .results-header {
padding-left: var(--space-medium);
padding-right: var(--space-medium);
}
/* Cards under the map keep a normal gutter; only the map itself is
full-bleed. */
.ranch-results-section:has(.ranch-view-container[data-view="map"]) .ranch-grid-column {
padding-left: var(--space-xsmall);
padding-right: var(--space-xsmall);
box-sizing: border-box;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-small);
padding-bottom: var(--space-xsmall);
border-bottom: 1px solid var(--color-border-weak);
color: var(--dark-text);
border-bottom-color: var(--dark-border);
}
.results-count {
font-size: var(--font-size-base);
color: var(--color-text-weak);
display: inline-flex;
align-items: center;
gap: var(--space-small);
flex-wrap: wrap;
}
.results-count strong {
color: var(--color-text);
font-size: var(--font-size-base);
}
/* Associate scope, as a removable filter chip. The count alone never reads as
"filtered", so this carries the emphasis: a bordered pill with the agent's
name and an × to drop back to the unscoped set. */
.results-count__scope {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 8px 6px 14px;
border: 1px solid var(--dark-text-muted, #8aa0c2);
border-radius: 999px;
background: var(--dark-card, rgba(255, 255, 255, .04));
line-height: 1;
white-space: nowrap;
}
.results-count__scope-eyebrow {
font-size: .68rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dark-text-muted, #8aa0c2);
}
.results-count__scope-name {
font-size: .95rem;
font-weight: 600;
color: var(--dark-text, #f8fafc);
}
/* The × keeps a 24px hit target without inflating the chip. */
.results-count__scope-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 1.1rem;
line-height: 1;
text-decoration: none;
color: var(--dark-text-muted, #8aa0c2);
background: rgba(255, 255, 255, .06);
transition: background .2s ease, color .2s ease;
}
.results-count__scope-clear:hover,
.results-count__scope-clear:focus-visible {
background: rgba(255, 255, 255, .16);
color: var(--dark-text, #f8fafc);
}
/* The count and the chip are separate ideas — give the row room to breathe
and to wrap cleanly on narrow screens. */
.results-count {
gap: 14px;
row-gap: 10px;
}
/* "View all on map" button lives next to the count; only visible in map view
so grid view stays clean. Uses :has() to scope by the current view state
of the sibling .ranch-view-container under the same .ranch-results-section. */
.results-count .dcd-load-all-pins-btn {
display: none;
}
.ranch-results-section:has(.ranch-view-container[data-view="map"]) .results-count .dcd-load-all-pins-btn {
display: inline-flex;
}
.results-controls {
display: flex;
gap: var(--space-small);
}
/* Grid / Map view switch - a segmented control.
Sized for touch: each half is at least 44px tall, so it clears the minimum
target size instead of the 25px it used to render at on a phone. */
.view-toggle {
display: flex;
gap: 0;
border: 1px solid var(--dark-border);
border-radius: 8px;
overflow: hidden;
background: var(--dark-input-bg);
padding: 3px;
}
.ranch-plugin .view-btn {
background: transparent;
color: var(--dark-text-muted);
text-decoration: none;
border: none;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-family);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
min-height: 38px;
padding: 0 20px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
}
.ranch-plugin .view-btn:hover {
color: var(--dark-text);
}
.ranch-plugin .view-btn:focus-visible {
outline: 2px solid var(--dark-accent-fg);
outline-offset: -2px;
}
/* .ranch-plugin .view-btn:hover {
background: var(--color-background-contrast);
color: var(--color-text);
} */
/* Selected half uses the same light fill as the site's primary buttons, so
"which view am I on" reads instantly. The old fill was --dark-accent
(#1a3d6d), only 1.66:1 against the page. */
.ranch-plugin .view-btn.active,
.ranch-plugin .view-btn[aria-pressed="true"] {
background: #d7dce3;
color: #0f1722;
}
.ranch-plugin .view-btn.active:hover {
background: #ffffff;
color: #0f1722;
}
.results-sort {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0;
font-size: var(--font-size-small);
color: var(--color-text-weak);
}
.results-sort select {
padding: var(--space-xxsmall) var(--space-xsmall);
border: 1px solid var(--color-border-weak);
border-radius: var(--border-radius);
font-family: var(--font-family);
font-size: var(--font-size-small);
color: var(--color-text);
background: white;
background: var(--dark-input-bg);
border-color: var(--dark-input-border);
color: var(--dark-text);
}
.ranch-view-container {
display: flex;
gap: var(--space-small);
margin-bottom: var(--space-medium);
}
.ranch-view-container[data-view="grid"] .ranch-map-column {
display: none;
}
.ranch-view-container[data-view="grid"] .ranch-grid {
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
/* .ranch-view-container[data-view="map"] .ranch-grid {
grid-template-columns: 1fr;
} */
.ranch-map-column {
flex: 0 0 50%;
position: sticky;
top: 20px;
/* --ranch-map-h is computed at runtime by frontend.js so the map + list
columns always fit within the remaining viewport (no overflow past
the fold). Falls back to the old calc() on JS-disabled clients. */
height: var(--ranch-map-h, calc(100vh - 40px));
min-width: 0; /* prevent flex child from overflowing when 100vw wrapper is used */
overflow: hidden;
}
/* Admin bar pushes sticky top down */
body.admin-bar .ranch-map-column {
top: 52px; /* 32px admin bar + 20px spacing */
height: var(--ranch-map-h, calc(100vh - 72px));
}
/* Map view: wider map, single-column cards */
.ranch-view-container[data-view="map"] .ranch-map-column {
flex: 0 0 75%;
}
.ranch-view-container[data-view="map"] .ranch-grid {
grid-template-columns: 1fr;
}
/* In map view, constrain list column height so it scrolls independently.
Height comes from the same --ranch-map-h var set by frontend.js so the
list column always matches the map column's height exactly. */
/* .ranch-view-container[data-view="map"] .ranch-grid-column {
max-height: var(--ranch-map-h, calc(100vh - 40px));
overflow-y: auto;
overscroll-behavior: contain;
} */
/* body.admin-bar .ranch-view-container[data-view="map"] .ranch-grid-column {
max-height: var(--ranch-map-h, calc(100vh - 72px));
} */
.ranch-map-wrap {
position: relative;
width: 100%;
height: 100%;
}
.ranch-listings-map {
width: 100%;
height: 100%;
border-radius: var(--border-radius);
}
/* Fullscreen filter overlay — injected into map div by JS, visible only when map is fullscreen */
.ranch-map-filter-overlay {
display: none;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: calc(100% - 120px); /* leave room for native map controls */
max-width: 900px;
background: rgba(255, 255, 255, 0.96);
border-radius: var(--border-radius);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
padding: var(--space-xsmall) var(--space-small);
}
.ranch-map-filter-overlay .filter-bar {
flex-wrap: wrap;
gap: var(--space-xsmall);
}
/* "View all on map" button styling (the wrapping banner was removed; the
button is now rendered directly inside .results-count). */
.dcd-load-all-pins-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 16px;
background: var(--wp--preset--color--primary, #1a1a1a);
color: #fff;
border: 1px solid transparent;
border-radius: var(--border-radius-sm);
font-size: var(--font-size-small);
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
white-space: nowrap;
background: var(--dark-accent);
border-color: var(--dark-accent);
color: #ffffff;
}
.dcd-load-all-pins-btn:hover {
background: color-mix(in oklab, var(--wp--preset--color--primary, #1a1a1a), #000 12%);
background: var(--dark-accent-dim);
border-color: var(--dark-accent-dim);
}
.dcd-load-all-pins-btn:disabled {
opacity: 0.6;
cursor: default;
}
.dcd-pins-max {
font-size: 12px;
opacity: 0.75;
font-weight: 400;
}
/* All-pins loading state */
.ranch-map-wrap.map-pins-loading::after {
content: 'Loading all pins\2026';
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.65);
color: #fff;
font-size: 13px;
padding: 6px 14px;
border-radius: 20px;
pointer-events: none;
z-index: 10;
}
/* Cap notice shown below the map when pins are truncated */
/* "N properties in view" line above the card list while the map view's
viewport→list sync is active (created/removed by frontend.js). */
.dcd-inview-count {
margin: 0 0 12px;
font: 500 13px/1.4 var(--font-family);
color: var(--dark-text-muted, #8aa0c2);
letter-spacing: 0.02em;
}
.map-cap-notice {
margin: 6px 0 0;
padding: 6px 12px;
font-size: 13px;
color: var(--color-text-muted, #666);
background: var(--color-bg-muted, #f5f5f5);
border-left: 3px solid var(--color-border-weak, #ddd);
border-radius: 0 var(--border-radius) var(--border-radius) 0;
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.6);
border-left-color: rgba(255, 255, 255, 0.15);
}
/* Map pin card-hover highlight */
.dcd-pin-hovered {
transform: scale(1.3);
transform-origin: bottom center;
transition: transform 0.15s ease;
z-index: 1;
}
/* Map pin — active (clicked) state */
.dcd-pin-active {
transform: scale(1.5);
transform-origin: bottom center;
transition: transform 0.15s ease;
z-index: 2;
}
/* Card highlight when its map pin is clicked */
.ranch-card.is-map-selected {
outline: 2px solid var(--wp--preset--color--primary, #1a1a1a);
outline-offset: -2px;
border-radius: var(--border-radius, 4px);
}
/* Admin Form Styles */
/* Archive Property Grid — matches featured card Grommet styles */
.ranch-card-meta .meta-value {
font-weight: var(--font-weight-bold);
color: var(--color-text);
}
.ranch-card-prop-types {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--space-xxsmall);
margin: var(--space-xsmall) 0 0;
overflow: hidden;
}
.ranch-card-prop-types-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-weak);
margin-right: 2px;
white-space: nowrap;
flex-shrink: 0;
}
.ranch-card-excerpt {
color: var(--color-text-weak);
line-height: var(--line-height-base);
margin: var(--space-xsmall) 0;
font-size: var(--font-size-small);
}
.ranch-card-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-xxsmall);
margin: var(--space-xsmall) 0;
}
.ranch-card-view-details {
display: flex;
align-items: center;
color: var(--color-text);
background-color: white;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
text-decoration: none;
padding: var(--space-xsmall) var(--space-small);
margin: 0;
color: var(--dark-accent-fg) !important;
border-top-color: transparent;
background-color: var(--dark-input-bg);
}
.ranch-card-view-details::after {
content: '→';
display: inline-block;
margin-left: 0;
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, margin-left 0.18s ease;
}
.ranch-card:hover .ranch-card-view-details {
text-decoration: none;
}
.ranch-card-view-details:hover::after {
opacity: 1;
transform: translateX(0);
margin-left: 6px;
}
/* ==========================================================================
Skeleton loading cards
========================================================================== */
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ranch-card-skeleton {
pointer-events: none;
background: var(--dark-card);
border-color: var(--dark-border);
}
.ranch-card-skeleton .ranch-card-content {
padding: var(--space-small);
}
.skeleton-slab,
.ranch-card-skeleton .skeleton-line {
background: linear-gradient(
90deg,
#e8e8e8 25%,
#f4f4f4 50%,
#e8e8e8 75%
);
background-size: 200% 100%;
animation: skeleton-shimmer 1.8s ease-in-out infinite;
border-radius: var(--border-radius-xs, 3px);
background: linear-gradient(
90deg,
var(--dark-card, #1e2535) 25%,
var(--dark-surface, #252d40) 50%,
var(--dark-card, #1e2535) 75%
) !important;
background-size: 200% 100% !important;
}
.ranch-card-skeleton .skeleton-slab {
border-radius: 0;
width: 100%;
}
.ranch-card-skeleton .ranch-card-image.skeleton-slab {
aspect-ratio: 16 / 9;
height: auto;
}
.ranch-card-skeleton .skeleton-line {
display: block;
}
/* Stagger shimmer phase so the wave doesn't pulse in sync across cards */
.ranch-card-skeleton:nth-child(2) .skeleton-slab,
.ranch-card-skeleton:nth-child(2) .skeleton-line { animation-delay: 0.10s; }
.ranch-card-skeleton:nth-child(3) .skeleton-slab,
.ranch-card-skeleton:nth-child(3) .skeleton-line { animation-delay: 0.20s; }
.ranch-card-skeleton:nth-child(4) .skeleton-slab,
.ranch-card-skeleton:nth-child(4) .skeleton-line { animation-delay: 0.30s; }
.ranch-card-skeleton:nth-child(5) .skeleton-slab,
.ranch-card-skeleton:nth-child(5) .skeleton-line { animation-delay: 0.15s; }
.ranch-card-skeleton:nth-child(6) .skeleton-slab,
.ranch-card-skeleton:nth-child(6) .skeleton-line { animation-delay: 0.25s; }
/* Load More */
.ranch-load-more-wrap {
margin-top: var(--space-medium);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.ranch-load-more-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 28px;
background: var(--wp--preset--color--primary, var(--color-primary, #2271b1));
color: #fff;
border: 1px solid white;
border-radius: var(--border-radius-sm, 4px);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.ranch-load-more-btn:hover:not(:disabled) {
opacity: 0.85;
}
.ranch-load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ranch-load-more-btn .load-more-count {
font-weight: 400;
opacity: 0.8;
font-size: 0.82em;
}
.load-more-spinner {
display: none;
width: 20px;
height: 20px;
border: 2px solid rgba(0,0,0,0.15);
border-top-color: var(--wp--preset--color--primary, #2271b1);
border-radius: 50%;
animation: dcd-spin 0.7s linear infinite;
}
@keyframes dcd-spin {
to { transform: rotate(360deg); }
}
/* No Results */
.no-results {
text-align: center;
padding: var(--space-large) var(--space-small);
color: var(--dark-text);
}
.no-results h2 {
color: var(--color-text);
font-size: var(--font-size-large);
margin-bottom: var(--space-xsmall);
}
.no-results p {
font-size: var(--font-size-base);
color: var(--color-text-weak);
}
/* ==========================================================================
Lightbox
========================================================================== */
.ranch-lightbox {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
}
.ranch-lightbox img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.ranch-lightbox .close {
position: absolute;
top: 20px;
right: 40px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}
.ranch-lightbox .close:hover {
color: #ccc;
}
/* ==========================================================================
Responsive Adjustments
========================================================================== */
@media (max-width: 968px) {
.ranch-sidebar {
order: 2;
}
.ranch-main-content {
order: 1;
}
}
@media (max-width: 768px) {
.ranch-meta-bar {
flex-direction: column;
gap: var(--space-xxsmall);
}
/* Stack all filter fields as full-width rows */
.filter-bar {
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
}
.filter-bar-field,
.filter-bar-range {
flex: 0 0 100%;
min-width: 0;
max-width: 100%;
}
/* Price (nth-last-child(3)) and Size (nth-last-child(2)) share one row */
.filter-bar .filter-bar-field:nth-last-child(3),
.filter-bar .filter-bar-field:nth-last-child(2) {
flex: 0 0 calc(50% - 3px);
}
.filter-bar-actions {
flex: 0 0 100%;
width: 100%;
}
.filter-bar-actions .button {
flex: 1;
text-align: center;
justify-content: center;
padding: 10px var(--space-small);
}
body.admin-bar .ranch-scroll-summary {
top: 46px;
}
body.admin-bar .ranch-filters-section {
top: 46px;
}
.ranch-grid {
grid-template-columns: 1fr;
}
/* stretch, not flex-start: the header is a column flex container, and
flex-start left the view switch shrink-wrapped to its content and pinned
to the left of the row instead of spanning it. */
.results-header {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
/* --space-medium (48px) of side padding is a desktop gutter. On a 360px
screen it left only ~73% of the width usable and set the results row
visibly inside the filter card above it, which insets by ~16.8px.
Both view paths are narrowed to match: the grid view pads the container,
the map view pads .results-header directly. */
.ranch-archive-wrapper .container {
padding-left: 16px;
padding-right: 16px;
}
.ranch-results-section .container.full-width .results-header,
.ranch-results-section:has(.ranch-view-container[data-view="map"]) .results-header {
padding-left: 16px;
padding-right: 16px;
}
.results-controls {
width: auto;
align-self: stretch;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ranch-plugin .view-toggle {
width: 100%;
align-self: stretch;
}
.ranch-plugin .view-btn {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 0 12px;
text-align: center;
font-size: 15px;
}
.ranch-view-container {
flex-direction: column;
}
.ranch-view-container[data-view="grid"] .ranch-grid {
grid-template-columns: 1fr;
}
/* Override the map-view flex width so map stacks full-width on mobile */
.ranch-view-container[data-view="map"] .ranch-map-column {
flex: 0 0 auto;
}
.ranch-map-column {
flex: 0 0 auto;
position: relative;
height: 55vw;
min-height: 300px;
max-height: 500px;
top: 0;
}
.ranch-grid-column {
overflow-y: visible;
}
/* === Map view: mobile UX ============================================
Swap the sticky role from the filter bar to the map so users can
scroll the property list with the map always in view. Tapping a card
pin still pans the map without losing the user's place in the list.
Scoped via `:has(.ranch-view-container[data-view="map"])` so the
layout responds to the JS-driven view toggle, not the PHP-rendered
container class — the toggle no longer requires a page refresh. */
.ranch-archive-wrapper:has(.ranch-view-container[data-view="map"]) .ranch-filters-section {
position: static;
}
/* Map column spans the full wrapper width — the container's
padding is zeroed out on map view via the :has() rule above. */
.ranch-view-container[data-view="map"] .ranch-map-column {
position: sticky;
top: 0;
height: 42vh;
min-height: 240px;
max-height: 380px;
z-index: 5;
margin-bottom: var(--space-small);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
body.admin-bar .ranch-view-container[data-view="map"] .ranch-map-column {
top: 46px;
height: calc(42vh - 46px);
}
/* Square corners for the edge-to-edge map. */
.ranch-view-container[data-view="map"] .ranch-listings-map {
border-radius: 0;
}
}
/* Featured badge — legacy alias; new card code uses .listing-badge--featured */
.featured-badge,
.featured-badge-large {
display: inline-block;
padding: 3px 10px;
border-radius: var(--border-radius-sm);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.6;
backdrop-filter: blur(4px);
background: rgba(180, 130, 30, 0.9);
color: #fff;
border: 1px solid rgba(255,220,100,0.3);
text-decoration: none;
}
.featured-badge:hover {
text-decoration: underline;
}
/* Vertical Tab Navigation — Grommet-inspired */
.ranch-plugin .ranch-tab {
background: white;
border: none;
border-left: 3px solid transparent;
padding: var(--space-xsmall) var(--space-small);
font-family: var(--font-family);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
color: var(--color-text);
cursor: pointer;
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
text-align: left;
color: var(--dark-text-muted);
border-color: transparent;
}
.ranch-plugin .ranch-tab:hover {
color: var(--color-text);
background: rgba(0, 0, 0, 0.03);
}
.ranch-plugin .ranch-tab.active {
color: var(--color-text);
background: var(--color-background);
border-left-color: var(--color-brand);
font-weight: var(--font-weight-bold);
}
.ranch-plugin .ranch-tab.active:hover {
background: var(--color-background);
}
.ranch-plugin .ranch-tab:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: -2px;
}
/* Tab Panels */
.content-section {
display: none;
animation: tabFadeIn 0.2s ease;
}
.content-section.active {
display: block;
}
@keyframes tabFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.content-section h2 {
font-size: var(--font-size-large);
color: var(--color-text);
margin: 0 0 var(--space-small) 0;
font-weight: var(--font-weight-bold);
padding-bottom: var(--space-xsmall);
border-bottom: 1px solid var(--color-border-weak);
}
.content-section h3 {
font-size: var(--font-size-base);
color: var(--color-text);
margin: var(--space-small) 0 var(--space-xsmall) 0;
font-weight: var(--font-weight-bold);
}
.content-section h3:first-child {
margin-top: 0;
}
.content-section .section-content {
line-height: 1.8;
color: var(--color-text);
font-size: var(--font-size-base);
}
.content-section .section-content p {
margin-bottom: var(--space-small);
}
/* Property Highlights Section */
.overview-highlights {
margin-top: var(--space-small);
padding-top: var(--space-small);
border-top: 1px solid var(--color-border-weak);
}
.facts-list {
list-style: none;
padding: 0;
margin: 0;
}
.facts-list li {
padding: var(--space-xsmall) 0;
border-bottom: 1px solid var(--color-border-weak);
}
.facts-list li:last-child {
border-bottom: none;
}
.facts-list strong {
color: var(--color-text);
}
/* .details-feature-card {
background: var(--color-background-contrast);
border-radius: var(--border-radius);
padding: var(--space-small);
} */
/* Featured Properties Section */
.featured-properties-section {
padding: var(--space-large) 0;
margin-bottom: var(--space-medium);
border-top: 1px solid var(--color-border-weak);
border-bottom: 1px solid var(--color-border-weak);
}
.featured-section-title {
font-size: var(--font-size-xlarge);
color: var(--color-text);
text-align: center;
margin: 0 0 var(--space-xsmall) 0;
font-weight: var(--font-weight-bold);
}
.featured-section-subtitle {
text-align: center;
color: var(--color-text-weak);
font-size: var(--font-size-base);
margin: 0 0 var(--space-medium) 0;
}
/* .featured-properties-grid now uses .ranch-grid — see ranch-card rules above */
/* ==========================================================================
Shortcode Styles
========================================================================== */
/* Featured Listings Showcase - Gallery Display */
.featured-showcase {
margin: var(--space-medium) 0;
}
.featured-listings-cta {
text-align: center;
margin-top: var(--space-small);
}
.featured-gallery {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
.gallery-container {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
border-radius: var(--border-radius);
border: 1px solid var(--color-border-weak);
background: var(--color-background-contrast);
}
.gallery-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
}
.gallery-slide.active {
opacity: 1;
z-index: 1;
}
.gallery-slide-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: white;
}
.gallery-slide-image {
position: relative;
width: 100%;
height: 100%;
}
.gallery-slide-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-slide-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
padding: var(--space-medium);
color: white;
}
.gallery-slide-title {
font-size: var(--font-size-xlarge);
margin: 0 0 var(--space-xsmall) 0;
font-weight: var(--font-weight-bold);
color: white;
}
.gallery-slide-meta {
display: flex;
gap: var(--space-small);
margin-bottom: var(--space-small);
font-size: var(--font-size-base);
}
.slide-location,
.slide-price,
.slide-acres {
display: flex;
align-items: center;
}
.slide-price {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-large);
}
.gallery-view-btn {
display: inline-block;
background: var(--color-brand);
color: white;
padding: var(--space-xsmall) var(--space-small);
border-radius: var(--border-radius);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-small);
transition: background 0.2s ease;
}
.gallery-slide-link:hover .gallery-view-btn {
background: var(--color-active);
}
.ranch-plugin .gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--color-background);
border: 2px solid var(--color-border);
width: var(--space-medium);
height: var(--space-medium);
border-radius: 50%;
font-size: var(--font-size-large);
cursor: pointer;
z-index: 10;
transition: all 0.2s ease;
color: var(--color-text);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.ranch-plugin .gallery-nav:hover {
border-color: var(--color-text);
background: var(--color-background-contrast);
}
.ranch-plugin .gallery-nav:focus {
box-shadow: 0 0 0 2px var(--color-focus);
}
.gallery-prev {
left: var(--space-small);
}
.gallery-next {
right: var(--space-small);
}
.gallery-dots {
position: absolute;
bottom: var(--space-small);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: var(--space-xsmall);
z-index: 10;
}
.gallery-dot {
width: var(--space-xsmall);
height: var(--space-xsmall);
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.2s ease;
}
.gallery-dot.active {
background: white;
transform: scale(1.3);
}
/* Featured Listings Showcase - Grid Display */
.featured-grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-small);
max-width: 1200px;
margin: 0 auto;
}
.featured-grid-item {
background: var(--color-background);
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid var(--color-border-weak);
transition: box-shadow 0.2s ease;
}
.featured-grid-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.featured-grid-link {
text-decoration: none;
color: inherit;
display: block;
}
.featured-grid-image {
width: 100%;
height: 250px;
overflow: hidden;
}
.featured-grid-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-grid-content {
padding: var(--space-small);
}
.featured-grid-title {
font-size: var(--font-size-large);
color: var(--color-text);
margin: 0 0 var(--space-xxsmall) 0;
font-weight: var(--font-weight-bold);
}
.featured-grid-meta {
display: flex;
flex-direction: column;
gap: var(--space-xxsmall);
color: var(--color-text-weak);
font-size: var(--font-size-small);
padding-top: var(--space-xsmall);
border-top: 1px solid var(--color-border-weak);
}
.grid-price {
font-size: var(--font-size-base);
color: var(--color-text);
font-weight: var(--font-weight-bold);
}
/* Quick Search Module — connected input + button bar */
.ranch-quick-search {
margin: var(--space-small) 0;
}
.qsearch-bar {
display: flex;
align-items: stretch;
width: 100%;
}
.qsearch-input {
flex: 1 1 auto;
min-width: 0;
height: 54px;
padding: 0 20px;
font-size: 1rem;
border: 2px solid var(--color-border-weak);
border-right: none;
border-radius: var(--border-radius) 0 0 var(--border-radius);
background: var(--color-background-contrast);
color: var(--color-text);
outline: none;
transition: border-color 0.15s ease;
background: var(--dark-input-bg) !important;
border-color: var(--dark-input-border) !important;
color: var(--dark-text) !important;
}
.qsearch-input:focus {
border-color: var(--color-primary);
border-color: var(--dark-border) !important;
}
.qsearch-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 54px;
padding: 0 28px;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
border: none;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
background: var(--color-primary);
color: #fff;
transition: background 0.15s ease, opacity 0.15s ease;
background: var(--dark-accent) !important;
color: var(--dark-text) !important;
}
.qsearch-btn:hover {
background: var(--color-primary-dark, #555);
background: var(--dark-card) !important;
}
.qsearch-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* Spinner — hidden by default, visible during loading */
.qsearch-spinner {
display: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255,255,255,0.35);
border-top-color: #fff;
border-radius: 50%;
animation: qsearch-spin 0.7s linear infinite;
flex-shrink: 0;
}
.qsearch-btn.is-loading .qsearch-spinner {
display: block;
}
.qsearch-btn.is-loading .qsearch-btn-text {
opacity: 0.75;
}
@keyframes qsearch-spin {
to { transform: rotate(360deg); }
}
/* Property Search Module — one large dark input with the submit button
docked inside it. Stays a single row at every viewport width. */
.ranch-property-search {
margin: var(--space-small) auto;
max-width: 680px;
width: 100%;
}
.ranch-property-search .dcd-quick-search {
position: relative;
height: 68px; /* matches the input so the docked button centers exactly */
}
/* wpautop injects stray /
into shortcode output — they add phantom
height below the input and shift the docked button off-center. */
.ranch-property-search .dcd-quick-search > p,
.ranch-property-search .dcd-quick-search > br {
display: none;
}
.ranch-property-search .dcd-quick-search__input {
width: 100%;
height: 68px;
line-height: 1.4;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
-webkit-appearance: none;
appearance: none;
}
.ranch-property-search .dcd-quick-search__input::placeholder {
color: var(--dark-text-muted, #8aa0c2);
opacity: 1;
}
.ranch-property-search .dcd-quick-search__input::-webkit-search-decoration,
.ranch-property-search .dcd-quick-search__input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
.ranch-property-search .dcd-quick-search__input:focus,
.ranch-property-search .dcd-quick-search__input:focus-visible {
outline: none;
border-color: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.18);
}
.ranch-property-search .dcd-quick-search__input {
display: block;
}
/* Explicit size + vertical centering: never derive size from the form
or theme button styles (global padding/min-height turn it into a blob).
Icon-only: darker circle against the input (page-bg fill, light icon). */
.ranch-property-search .dcd-quick-search__submit {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
height: 48px;
width: 48px;
min-height: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
box-sizing: border-box;
border: 0;
border-radius: 999px;
background: var(--dark-bg, #0f1722);
color: var(--dark-text, #f8fafc);
line-height: 1;
cursor: pointer;
transition: background 0.15s;
}
.ranch-property-search .dcd-quick-search__submit:hover {
background: var(--dark-accent, #1a3d6d);
}
.ranch-property-search .dcd-quick-search__submit:focus-visible {
outline: 2px solid var(--dark-text, #f8fafc);
outline-offset: -4px;
}
.ranch-property-search .dcd-quick-search__icon {
flex: 0 0 auto;
display: block;
width: 22px;
height: 22px;
}
/* Icon-only button: hide the label visually, keep it as the accessible name. */
.ranch-property-search .dcd-quick-search__submit-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
}
@media (max-width: 520px) {
.ranch-property-search .dcd-quick-search {
height: 60px;
}
.ranch-property-search .dcd-quick-search__input {
height: 60px;
padding: 0 60px 0 20px;
font-size: 1rem; /* stays >= 16px so iOS doesn't zoom the viewport */
}
.ranch-property-search .dcd-quick-search__submit {
right: 8px;
height: 40px;
width: 40px;
}
.ranch-property-search .dcd-quick-search__icon {
width: 19px;
height: 19px;
}
}
/* ==========================================================================
Monochrome Overrides + Shortcode Form Control Enforcement
========================================================================== */
/* Neutralise any
tags wpautop injects inside shortcode cards */
.ranch-plugin .ranch-card > p {
margin: 0;
}
/* .ranch-plugin .ranch-pagination a,
.ranch-plugin .ranch-card-title a,
.ranch-plugin .featured-grid-title,
.ranch-plugin .ranch-card-view-details,
.ranch-plugin .grid-price,
.ranch-plugin .facts-list strong,
.ranch-plugin .quick-facts-box h3,
.ranch-plugin .property-map-box h3,
.ranch-plugin .results-count strong,
.ranch-plugin .no-results h2 {
color: var(--color-text) !important;
} */
.section-nav-btn.active,
.section-nav-btn:hover {
background: var(--color-background-contrast) !important;
}
/* Enforce filter form controls against theme defaults */
.ranch-plugin .filter-bar-field select,
.ranch-plugin .filter-bar-field input[type="text"],
.ranch-plugin .filter-bar-field input[type="number"] {
width: 100% !important;
font-family: var(--font-family) !important;
font-size: var(--font-size-small) !important;
color: var(--color-text) !important;
background: white !important;
border: 1px solid var(--color-border-weak, rgba(0,0,0,0.18)) !important;
margin: 0 !important;
border-radius: var(--border-radius-sm) !important;
box-shadow: none !important;
height: auto !important;
line-height: 1.4 !important;
transition: border-color 0.15s !important;
}
.ranch-plugin .filter-bar-field select:focus,
.ranch-plugin .filter-bar-field input:focus {
border-color: var(--wp--preset--color--primary, var(--color-brand, #2271b1)) !important;
outline: none !important;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--wp--preset--color--primary, #2271b1) 20%, transparent) !important;
}
.ranch-plugin .filter-bar-field input::placeholder {
color: var(--color-text-weak) !important;
opacity: 0.7 !important;
}
.ranch-plugin .filter-bar-actions .button {
font-family: var(--font-family) !important;
font-size: var(--font-size-small) !important;
font-weight: 600 !important;
padding: 8px var(--space-small) !important;
border-radius: var(--border-radius-sm) !important;
cursor: pointer !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
white-space: nowrap !important;
transition: opacity 0.15s !important;
}
/* Responsive Styles */
@media (max-width: 968px) {
.ranch-overview-layout .ranch-highlights-panel,
.ranch-overview-layout .ranch-broker-panel {
margin-top: 0;
}
.ranch-content-layout {
flex-direction: column;
gap: var(--space-small);
}
/* Vertical tabs collapse to horizontal scrollable on mobile */
.ranch-plugin .ranch-tab {
border-left: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
padding: var(--space-xsmall) var(--space-xsmall);
font-size: var(--font-size-small);
text-align: center;
}
.ranch-plugin .ranch-tab.active {
border-left-color: transparent;
border-bottom-color: var(--color-brand);
}
/* Featured Properties Responsive */
.featured-properties-section {
padding: var(--space-medium) 0;
}
.featured-section-title {
font-size: var(--font-size-large);
}
}
@media (max-width: 640px) {
.scroll-summary-actions .button {
flex: 1;
justify-content: center;
font-size: 11px;
padding: 6px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Gallery Shortcode Responsive */
.gallery-container {
height: 400px;
}
.gallery-slide-overlay {
padding: var(--space-small);
}
.gallery-slide-title {
font-size: var(--font-size-large);
}
.gallery-slide-meta {
flex-wrap: wrap;
gap: var(--space-xsmall);
margin-bottom: var(--space-xsmall);
font-size: var(--font-size-small);
}
.gallery-nav {
width: 36px;
height: 36px;
font-size: var(--font-size-base);
}
.featured-grid-container {
grid-template-columns: 1fr;
gap: var(--space-small);
}
.featured-grid-image {
height: 200px;
}
}
/* ==========================================================================
Plugin Theme palette
Enabled via Admin → Property Manager Settings → Property Archive Theme.
Applies to ALL plugin components:
archive, shortcodes, single property, etc.
.ranch-archive--dark on the wrapper is kept as an alias for specificity
on archive-specific background rules.
========================================================================== */
/* --- Design tokens (set on both scoping roots for specificity balance) ---
Hardcoded dark values guarantee a legible dark palette regardless of the
host theme's preset colors. Light-themed hosts (e.g. Republic Ranches)
define `--wp--preset--color--background` as WHITE and `--foreground` as
dark, so inheriting those silently inverted the palette and broke the
archive (white wrapper + dark text inside "dark mode"). The preset vars
were intentionally removed here; if a site wants theme-matching dark
mode, override these tokens in a child theme / CSS snippet.
.ranch-property-search is included so the standalone search module
(homepage shortcode) carries the palette outside plugin-rendered pages,
where the body class is never added. .ranch-password-gate likewise, so
the password form stays dark regardless of the dark-mode option. */
:root {
/* Palette adapted from the Agentic design system (_kb/agentic/tokens.css):
saturated deep-navy surfaces + bright-blue accent + cool light fonts.
Tweaked per direction: hue nudged slightly off pure blue (~222deg vs
Agentic's ~226) and saturation kept high so surfaces read rich, not
gray and not dull. Accent deepened from Agentic's pale #60a5fa to a
vivid royal blue so it stays saturated without looking washed out.
Agentic source -> our token:
--bg #0b1020 -> --dark-bg
--surface #131b2f -> --dark-card
--surface-warm #182343 -> --dark-input-bg
--fg #f8fafc / --muted #8ea0b8 -> text
--border #293653 -> --dark-border */
--dark-bg: #0f1722; /* page / overlay surface */
--dark-surface: rgb(0, 0, 0, 0.15);
--dark-card: #1d253c; /* cards / panels (slightly darker than page) */
--dark-card-hover: #2c3850;
/* Neutral (non-colored) borders: faint transparent white — present but
not distracting. Colored borders (accent/focus) keep their own hue. */
--dark-border: rgb(255, 255, 255, 0.08);
--dark-text: #f8fafc;
--dark-text-muted: #8aa0c2;
/* Accent eased a touch off pure blue (more indigo, slightly less saturated)
while staying vivid. Hover/active derive naturally via color-mix so the
darken tracks the accent. */
--dark-accent: #1a3d6d;
/* Accent used as TEXT. The surface accent above is a deep navy that works
as a fill or a border but only reaches 1.66:1 against the page, so links
and labels tinted with it were effectively invisible. This is the same
hue lightened to clear AA on every dark surface we use (4.8:1 to 6.3:1),
and it matches the focus color in the theme's forms.css. */
--dark-accent-fg: #7a9bc6;
--dark-accent-dim: color-mix(in oklab, var(--dark-accent), #000 12%);
--dark-input-bg: #132435; /* inputs / surfaces */
--dark-input-border: rgb(255, 255, 255, 0.14);
/* Solid fill for overlays/drawers/modals where translucency would reveal
the page behind. Keep in sync with --dark-bg by default. */
--dark-overlay-bg: #0f1722; /* keep in sync with --dark-bg */
}
/* --- Page / wrapper backgrounds --- */
body,
.ranch-archive--dark.ranch-archive-wrapper {
background-color: var(--dark-bg);
color: var(--dark-text);
}
.ranch-archive-wrapper,
.ranch-archive--dark.ranch-archive-wrapper {
background-color: var(--dark-bg);
}
.ranch-single {
background-color: var(--dark-bg);
}
/* --- Filter bar --- */
.ranch-filters-section,
.ranch-quick-search {
background: var(--dark-bg);
border-bottom: 1px solid var(--dark-bg);
}
/* --- Quick search connected bar --- */
.qsearch-input::placeholder {
color: var(--dark-text-muted) !important;
}
/* --- Form controls --- */
.ranch-plugin .filter-bar-field input[type="text"],
.ranch-plugin .filter-bar-field input[type="number"],
.ranch-plugin .filter-bar-field select,
.ranch-plugin input[type="text"],
.ranch-plugin input[type="number"],
.ranch-plugin input[type="email"],
.ranch-plugin select,
.ranch-plugin textarea,
.ranch-archive--dark .filter-checkbox-toggle,
.ranch-archive--dark .filter-checkbox-menu {
background: var(--dark-input-bg) !important;
border-color: var(--dark-input-bg) !important;
color: var(--dark-text) !important;
}
.ranch-plugin input::placeholder,
.ranch-plugin textarea::placeholder,
.ranch-plugin .filter-bar-field input::placeholder {
color: var(--dark-text) !important;
opacity: 0.55 !important;
}
/* --- Buttons --- */
.ranch-plugin .button-primary,
.ranch-plugin .ranch-btn-primary {
background: var(--dark-accent) !important;
border-color: var(--dark-accent) !important;
color: #ffffff !important;
}
.ranch-plugin .button-primary:hover {
background: var(--dark-accent-dim) !important;
border-color: var(--dark-accent-dim) !important;
}
.ranch-plugin .button-secondary,
.ranch-plugin .ranch-btn-secondary {
background: transparent !important;
border-color: var(--dark-input-border) !important;
color: var(--dark-text-muted) !important;
height: 100%;
}
.ranch-plugin .button-secondary:hover {
background: var(--dark-input-bg) !important;
border-color: var(--dark-text-muted) !important;
color: var(--dark-text) !important;
}
/* View-all-on-map: accent action button in dark mode (was a muddy --primary
block), consistent with the active view toggle. */
/* --- Results header --- */
.results-count,
.results-count strong {
color: var(--dark-text) !important;
}
.results-sort label {
color: var(--dark-text-muted);
}
/* --- View toggle buttons --- */
.ranch-plugin .view-btn:not(.active):hover {
background: var(--dark-input-bg);
color: var(--dark-text);
}
/* --- Property cards (archive, featured, shortcode grids) --- */
.ranch-card,
.featured-grid-item {
background: var(--dark-surface);
color: var(--dark-text);
}
.ranch-card:hover,
.featured-grid-item:hover {
background: var(--dark-card-hover);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.ranch-card.is-map-selected {
outline-color: var(--dark-accent);
box-shadow: 0 0 0 3px var(--dark-accent);
}
.ranch-card-title a,
.featured-grid-title {
color: var(--dark-text) !important;
}
.ranch-card-title a:hover {
color: var(--dark-accent-fg) !important;
}
.ranch-card-location,
.ranch-card-excerpt {
color: var(--dark-text-muted) !important;
}
.ranch-card-meta .meta-item.price strong,
.ranch-card-meta .meta-value {
color: var(--dark-text) !important;
}
/* Property type badges — dark mode */
/* Feature tags — dark mode */
/* --- Single property template overrides --- */
.ranch-plugin .ranch-tab.active,
.ranch-plugin .ranch-tab:hover {
color: var(--dark-text);
background: var(--dark-card);
border-color: var(--dark-accent);
}
.facts-list strong,
.quick-facts-box h3,
.property-map-box h3 {
color: var(--dark-text) !important;
}
.ranch-overview-layout,
.ranch-highlights-panel,
.ranch-broker-panel {
border-color: var(--dark-border);
}
/* --- No-results / notices --- */
.no-results a {
color: var(--dark-accent-fg);
}
.no-map-data,
.map-notice p {
color: var(--dark-text-muted);
}
/* --- Pagination --- */
.ranch-plugin .ranch-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-top: var(--space-medium);
}
.ranch-plugin .ranch-pagination .page-numbers {
display: inline-flex;
align-items: center;
min-width: 40px;
min-height: 40px;
padding: 0 12px;
justify-content: center;
border: 1px solid var(--dark-border);
border-radius: var(--border-radius-sm, 4px);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
line-height: 1;
}
.ranch-plugin .ranch-pagination a,
.ranch-plugin .ranch-pagination span.current {
color: var(--dark-text) !important;
border-color: var(--dark-border);
background: var(--dark-card);
}
.ranch-plugin .ranch-pagination a:hover {
background: var(--dark-accent);
color: #ffffff !important;
border-color: var(--dark-accent);
}
.ranch-plugin .ranch-pagination span.dots {
background: none;
color: #ffffff !important;
border-color: transparent;
}
/* The page being viewed: filled, so it reads as selected at a glance. */
.ranch-plugin .ranch-pagination span.current {
background: var(--dark-accent);
border-color: var(--dark-accent);
color: #ffffff !important;
cursor: default;
}
/* --- General headings & text inside all plugin components --- */
.ranch-plugin h1,
.ranch-plugin h2,
.ranch-plugin h3,
.ranch-plugin h4,
.ranch-plugin h5,
.ranch-plugin h6 {
color: var(--dark-text);
}
.ranch-plugin p,
.ranch-plugin li,
.ranch-plugin td,
.ranch-plugin th {
color: var(--dark-text);
}
/* ==========================================================================
Dark theme — Single Property Mag Layout (.ranch-single--mag)
The two-column template outputs an inline