/** * Divers Directory — frontend styles. * * Scoped to .dd-* to stay out of theme territory. Brand colors are injected * as CSS variables in by DD_Frontend::inline_brand_vars(). */ :root { --dd-primary: #0a6ebd; --dd-accent: #f5a623; --dd-text: #1f2937; --dd-muted: #6b7280; --dd-border: #e5e7eb; --dd-card-bg: #ffffff; --dd-bg: #f9fafb; --dd-radius: 8px; --dd-gap: 1rem; } /* Reset-ish for plugin scope */ .dd-archive, .dd-single, .dd-form, .dd-my-listings { color: var(--dd-text); font-size: 1rem; line-height: 1.5; } .dd-archive *, .dd-single *, .dd-form *, .dd-my-listings * { box-sizing: border-box; } /* Buttons */ .dd-btn { display: inline-block; padding: 0.5rem 0.9rem; border-radius: var(--dd-radius); border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; background: transparent; color: var(--dd-primary); line-height: 1.2; } .dd-btn-primary { background: var(--dd-primary); color: #fff; border-color: var(--dd-primary); } .dd-btn-primary:hover { filter: brightness(1.08); color: #fff; } .dd-btn-link { padding: 0.25rem 0.5rem; color: var(--dd-primary); } .dd-btn-link:hover { text-decoration: underline; } .dd-btn-danger { color: #b91c1c; } /* Notices */ .dd-notice { padding: 0.75rem 1rem; border-radius: var(--dd-radius); background: #eff6ff; border: 1px solid #bfdbfe; margin: 0 0 1rem; } .dd-notice-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; } .dd-notice-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; } /* ---------- Filters (compact chip bar) ---------- */ .dd-filters { margin: 0 0 1.25rem; } .dd-filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 0.75rem; background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .dd-filterbar__search { flex: 1 1 220px; min-width: 200px; } .dd-filterbar__search input[type=search] { width: 100%; padding: 0.55rem 0.9rem; border: 1px solid transparent; background: var(--dd-bg); border-radius: 999px; font: inherit; } .dd-filterbar__search input[type=search]:focus { background: #fff; border-color: var(--dd-border); outline: 2px solid var(--dd-primary); outline-offset: 1px; } .dd-chip { position: relative; } .dd-chip__btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; background: var(--dd-bg); border: 1px solid var(--dd-border); border-radius: 999px; font-weight: 600; font-size: 0.9rem; cursor: pointer; list-style: none; user-select: none; } .dd-chip__btn::-webkit-details-marker { display: none; } .dd-chip[open] > .dd-chip__btn { background: var(--dd-primary); color: #fff; border-color: var(--dd-primary); } .dd-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; background: var(--dd-primary); color: #fff; border-radius: 999px; font-size: 0.75rem; font-weight: 700; } .dd-chip[open] > .dd-chip__btn .dd-chip__count { background: #fff; color: var(--dd-primary); } .dd-chip__value { color: var(--dd-muted); font-weight: 500; } .dd-chip[open] > .dd-chip__btn .dd-chip__value { color: rgba(255,255,255,0.85); } .dd-chip__caret { font-size: 0.7rem; } .dd-chip__pop { position: absolute; top: calc(100% + 0.4rem); left: 0; min-width: 240px; max-width: 360px; background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); box-shadow: 0 12px 32px rgba(0,0,0,0.12); padding: 0.85rem; z-index: 30; } .dd-chip__pop--narrow { min-width: 180px; } .dd-chip__field { display: block; margin: 0 0 0.6rem; } .dd-chip__field .dd-field-label { display: block; font-weight: 600; margin: 0 0 0.25rem; font-size: 0.85rem; } .dd-chip__field input[type=text] { width: 100%; padding: 0.45rem 0.65rem; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); font: inherit; } .dd-chip__checks { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 280px; overflow-y: auto; } .dd-chip__check { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; } .dd-chip__clear { background: transparent; border: 0; cursor: pointer; color: var(--dd-muted); font: inherit; padding: 0.35rem 0.6rem; text-decoration: underline; } .dd-chip__clear:hover { color: var(--dd-primary); } .dd-view-toggle { margin-left: auto; display: inline-flex; background: var(--dd-bg); border: 1px solid var(--dd-border); border-radius: 999px; overflow: hidden; padding: 2px; } .dd-view-toggle__btn { padding: 0.35rem 0.85rem; color: var(--dd-text); text-decoration: none; border-radius: 999px; font-weight: 600; font-size: 0.85rem; } .dd-view-toggle__btn.is-active { background: var(--dd-primary); color: #fff; } .dd-filters__submit { display: none; } /* ---------- Archive loading indicators ---------- */ /* Slim progress bar above the listings — a sliding stripe while AJAX runs. */ .dd-archive__progress { position: relative; height: 3px; margin: 0 0 0.4rem; background: transparent; overflow: hidden; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 150ms ease; } .dd-archive.is-loading .dd-archive__progress { opacity: 1; } .dd-archive__progress::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--dd-primary) 35%, var(--dd-primary) 65%, transparent 100%); transform: translateX(-100%); } .dd-archive.is-loading .dd-archive__progress::before { animation: dd-progress-slide 1.1s ease-in-out infinite; } @keyframes dd-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Dim the listing grid + show a centered spinner over the main column. */ .dd-archive.is-loading .dd-listings, .dd-archive.is-loading .dd-pagination, .dd-archive.is-loading .dd-no-results, .dd-archive.is-loading .dd-map-placeholder { opacity: 0.4; transition: opacity 0.15s; pointer-events: none; } .dd-archive__overlay { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: color-mix(in srgb, var(--dd-bg) 55%, transparent); border-radius: var(--dd-radius); pointer-events: none; } .dd-archive.is-loading .dd-archive__overlay { display: flex; } .dd-archive__overlay .dd-spinner { width: 32px; height: 32px; border-width: 3px; } .dd-archive__overlay-text { font-weight: 600; color: var(--dd-muted); font-size: 0.95rem; } /* While loading, block clicks on filter UI + layout toggle so a fast clicker can't queue up overlapping refreshes. */ .dd-archive.is-loading [data-dd-filters], .dd-archive.is-loading .dd-view-toggle { pointer-events: none; } /* Per-button pending state — set immediately when a layout toggle is clicked so the user sees instant feedback before the network reply arrives. */ .dd-view-toggle__btn.is-pending { position: relative; color: transparent; } .dd-view-toggle__btn.is-pending::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dd-primary) 35%, transparent); border-top-color: var(--dd-primary); animation: dd-spin 700ms linear infinite; } .dd-view-toggle__btn.is-active.is-pending::after { border-color: rgba(255,255,255,0.4); border-top-color: #fff; } @media (prefers-reduced-motion: reduce) { .dd-archive__progress::before { animation: none; opacity: 0.6; transform: translateX(0); } .dd-view-toggle__btn.is-pending::after { animation: none; } } /* ---------- Fields ---------- */ .dd-field { display: block; margin: 0 0 0.85rem; } .dd-field-label { display: block; font-weight: 600; margin: 0 0 0.25rem; } .dd-field input[type=text], .dd-field input[type=email], .dd-field input[type=url], .dd-field input[type=tel], .dd-field input[type=password], .dd-field input[type=search], .dd-field input[type=time], .dd-field select, .dd-field textarea { width: 100%; max-width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); background: #fff; font: inherit; color: inherit; } .dd-field textarea { min-height: 7rem; resize: vertical; } .dd-field-inline { display: flex; gap: 0.5rem; align-items: center; } .dd-field-row { display: flex; flex-wrap: wrap; gap: var(--dd-gap); } .dd-field-row > .dd-field { flex: 1 1 220px; } .dd-help { display: block; margin-top: 0.25rem; color: var(--dd-muted); font-size: 0.85em; } .dd-fieldset { border: 1px solid var(--dd-border); border-radius: var(--dd-radius); padding: 1rem 1.25rem; margin: 0 0 1.25rem; } .dd-fieldset > legend { font-weight: 700; padding: 0 0.4rem; } .dd-collapse > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; } /* ---------- Listings grid ---------- */ .dd-listings { list-style: none; padding: 0; margin: 0; } .dd-listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .dd-listings-list { display: flex; flex-direction: column; gap: 0.75rem; } /* Card chrome */ .dd-card { position: relative; background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .dd-card:hover, .dd-card:focus-within { transform: translateY(-4px) scale(1.015); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12); border-color: color-mix(in srgb, var(--dd-primary) 30%, var(--dd-border)); } .dd-card--featured { border-color: var(--dd-accent); box-shadow: 0 0 0 1px var(--dd-accent) inset, 0 1px 2px rgba(15, 23, 42, 0.04); } .dd-featured-badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; background: var(--dd-accent); color: #fff; font-size: 0.7em; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(245, 166, 35, 0.35); } /* Whole-card link (grid). All children are inline-block/flex children of . */ .dd-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; outline: none; } .dd-card__link:focus-visible { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--dd-primary) 50%, transparent); border-radius: 14px; } .dd-card__media { display: flex; align-items: center; justify-content: center; background: var(--dd-bg); } .dd-card-grid .dd-card__media { aspect-ratio: 4 / 3; padding: 0.75rem; } .dd-card-grid .dd-card__logo { max-width: 85%; max-height: 85%; object-fit: contain; width: auto; height: auto; } .dd-card__body { display: block; padding: 0.9rem 1.1rem 1.1rem; } .dd-card__title { display: block; margin: 0 0 0.55rem; font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--dd-text); } .dd-card:hover .dd-card__title { color: var(--dd-primary); } .dd-card__cats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.6rem; } .dd-pill { display: inline-block; padding: 0.18rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--dd-primary) 12%, transparent); color: var(--dd-primary); font-size: 0.76em; font-weight: 600; line-height: 1.4; text-decoration: none; } /* Country + flag circle */ .dd-card__country { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--dd-muted); font-size: 0.92em; } .dd-card__country-name { font-weight: 500; color: var(--dd-text); } .dd-card__loc { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--dd-muted); font-size: 0.88em; line-height: 1.3; } .dd-card__loc-text { color: var(--dd-text); font-weight: 500; } .dd-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--dd-bg); box-shadow: inset 0 0 0 1px var(--dd-border); font-size: 1em; line-height: 1; overflow: hidden; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; flex-shrink: 0; } /* List card layout */ .dd-card-list { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 1rem; padding: 0.6rem 0.75rem; } .dd-card-list .dd-card__media { width: 80px; height: 80px; border-radius: 10px; padding: 4px; } .dd-card-list .dd-card__logo { width: 100%; height: 100%; object-fit: contain; } .dd-card-list .dd-card__body { padding: 0; } .dd-card-list .dd-card__title { font-size: 1rem; margin-bottom: 0.25rem; } /* ---------- Split-view (side detail panel) ---------- */ .dd-archive__split { display: grid; grid-template-columns: 1fr; gap: 1rem; } .dd-archive__main-wrap { position: relative; min-width: 0; } .dd-archive__main { min-width: 0; } .dd-archive__panel { display: none; position: relative; background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: 14px; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08); min-height: 200px; } .dd-archive--split .dd-archive__split { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .dd-archive--split .dd-archive__panel { display: block; } /* When a listing is selected, both sides scroll independently so a long left-hand result list stays browsable without dragging the whole page. */ .dd-archive--split .dd-archive__main-wrap { max-height: calc(100vh - 4rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } /* Infinite scroll: hide numeric pagination once JS arms the observer, and render a tiny invisible sentinel that triggers the next-page fetch. */ .dd-archive.dd-infinite .dd-pagination { display: none; } .dd-infinite__sentinel { height: 1px; width: 100%; } .dd-archive.is-loading-more::after { content: ""; display: block; height: 2.5rem; background: linear-gradient(transparent, rgba(0,0,0,0.03)); } /* When split is active, collapse the grid to a compact list (logo + name + meta) */ .dd-archive--split .dd-listings-grid { grid-template-columns: 1fr; gap: 0.5rem; } .dd-archive--split .dd-card-grid { border-radius: 10px; } .dd-archive--split .dd-card-grid .dd-card__link { flex-direction: row; align-items: center; } .dd-archive--split .dd-card-grid .dd-card__media { flex: 0 0 64px; width: 64px; height: 64px; aspect-ratio: auto; padding: 6px; border-radius: 8px; } .dd-archive--split .dd-card-grid .dd-card__logo { max-width: 100%; max-height: 100%; } .dd-archive--split .dd-card-grid .dd-card__body { padding: 0.5rem 0.75rem; min-width: 0; flex: 1; } .dd-archive--split .dd-card-grid .dd-card__title { font-size: 0.98rem; margin-bottom: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-archive--split .dd-card-grid .dd-card__cats { display: flex; gap: 0.25rem; margin: 0 0 0.2rem; overflow: hidden; max-height: 1.4em; } .dd-archive--split .dd-card-grid .dd-card__cats .dd-pill { font-size: 0.68em; padding: 0.1rem 0.45rem; white-space: nowrap; } .dd-archive--split .dd-card-grid .dd-card__cats .dd-pill:nth-child(n+3) { display: none; } .dd-archive--split .dd-card-grid .dd-card__loc { display: inline-flex; font-size: 0.78em; gap: 0.35rem; overflow: hidden; } .dd-archive--split .dd-card-grid .dd-card__loc-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-archive--split .dd-card-grid .dd-card__country { display: none; } .dd-archive--split .dd-card-grid .dd-flag { width: 1.2em; height: 1.2em; font-size: 0.85em; } /* Smaller featured badge in split mode so it doesn't overlap the logo. */ .dd-archive--split .dd-featured-badge { top: 0.3rem; left: auto; right: 0.4rem; font-size: 0.6em; padding: 0.1rem 0.4rem; } .dd-archive--split .dd-card:hover { transform: none; } .dd-archive--split .dd-card.is-active { border-color: var(--dd-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dd-primary) 25%, transparent); } /* Panel chrome */ .dd-panel__close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: var(--dd-card-bg); border: 1px solid var(--dd-border); color: var(--dd-text); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background 150ms ease, transform 150ms ease; } .dd-panel__close:hover { background: var(--dd-bg); transform: scale(1.05); } .dd-panel__body { padding: 1.5rem 1.5rem 2rem; max-height: calc(100vh - 4rem); overflow-y: auto; } .dd-panel__loading { display: flex; align-items: center; gap: 0.6rem; padding: 2rem 0; color: var(--dd-muted); } .dd-panel__loading[hidden] { display: none; } .dd-spinner { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dd-border); border-top-color: var(--dd-primary); animation: dd-spin 700ms linear infinite; } @keyframes dd-spin { to { transform: rotate(360deg); } } /* Reduced-motion users: drop hover transforms + spinner animation */ @media (prefers-reduced-motion: reduce) { .dd-card { transition: none; } .dd-card:hover, .dd-card:focus-within { transform: none; } .dd-spinner { animation: none; } } /* ---------- Pagination ---------- */ .dd-pagination { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 1.25rem 0 0; } .dd-pagination .page-numbers { padding: 0.35rem 0.7rem; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); text-decoration: none; color: inherit; background: #fff; } .dd-pagination .page-numbers.current { background: var(--dd-primary); color: #fff; border-color: var(--dd-primary); } /* ---------- Single ---------- */ .dd-single { margin-top: 1.5rem; } .dd-single__logo { max-width: 280px; margin: 0 0 1rem; } .dd-single__logo-img { width: 100%; height: auto; } .dd-single__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; } /* Tablets: 2-col grid + stacked split-view. The detail panel turns into a full-viewport overlay so a tap on a tile shows the listing on top of the list instead of trying to fit both side-by-side on a narrow screen. The z-index is high enough to clear most theme headers (Avada uses ~10000). */ @media (max-width: 960px) { .dd-listings-grid { grid-template-columns: repeat(2, 1fr); } .dd-archive--split .dd-archive__split { grid-template-columns: 1fr; } .dd-archive--split .dd-archive__main-wrap { max-height: none; overflow: visible; } .dd-archive--split .dd-archive__panel { position: fixed; inset: 0; z-index: 100000; border-radius: 0; border: 0; max-height: none; height: 100vh; height: 100dvh; background: var(--dd-card-bg); display: flex; flex-direction: column; } .dd-archive--split .dd-panel__body { flex: 1 1 auto; max-height: none; height: 100%; padding: 3.5rem 1rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } body.dd-panel-open { overflow: hidden; position: relative; } } /* Phones: single-column, full-width tiles */ @media (max-width: 720px) { .dd-single__grid { grid-template-columns: 1fr; } .dd-listings-grid { grid-template-columns: 1fr; } .dd-card-list { grid-template-columns: 64px 1fr; } .dd-card-list .dd-card__aside { display: none; } .dd-card-grid .dd-card__media { aspect-ratio: 16 / 9; } /* Stack address + action bar so neither overflows the panel width. */ .dd-single__meta-row { flex-direction: column; align-items: stretch; } .dd-action-bar { justify-content: flex-start; } .dd-single__loc-logo { width: 56px; height: 56px; flex: 0 0 56px; margin-right: 1rem; } } .dd-single__contact { list-style: none; padding: 0; margin: 0 0 1rem; } .dd-single__contact li { padding: 0.25rem 0; } .dd-single__social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .dd-single__social a { padding: 0.3rem 0.7rem; border: 1px solid var(--dd-border); border-radius: 999px; text-decoration: none; color: inherit; } .dd-hours-table, .dd-hours-edit { width: 100%; border-collapse: collapse; } .dd-hours-table th, .dd-hours-table td, .dd-hours-edit th, .dd-hours-edit td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--dd-border); text-align: left; } .dd-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; } .dd-gallery img { width: 100%; height: auto; display: block; border-radius: var(--dd-radius); } .dd-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1rem; } .dd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--dd-radius); } /* ---------- Forms (Add/Edit + My Listings) ---------- */ .dd-form__body { display: block; max-width: 820px; } .dd-form__actions { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; } .dd-form__notice { color: var(--dd-muted); font-size: 0.9em; } .dd-form__alt { margin-top: 0.75rem; } .dd-media-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; } .dd-media-preview img { max-width: 120px; height: auto; border-radius: var(--dd-radius); border: 1px solid var(--dd-border); } .dd-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.4rem; margin-bottom: 0.5rem; } .dd-media-thumb img { width: 100%; height: 80px; object-fit: cover; border-radius: var(--dd-radius); border: 1px solid var(--dd-border); } .dd-my-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--dd-border); border-radius: var(--dd-radius); overflow: hidden; } .dd-my-table th, .dd-my-table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--dd-border); text-align: left; vertical-align: top; } .dd-my-table tr:last-child td { border-bottom: 0; } .dd-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.8em; font-weight: 600; background: #eef2ff; color: #3730a3; } .dd-status-publish { background: #dcfce7; color: #166534; } .dd-status-pending { background: #fef9c3; color: #854d0e; } .dd-status-dd_disabled { background: #f3f4f6; color: #374151; } .dd-status-dd_rejected { background: #fee2e2; color: #991b1b; } .dd-reason { margin-top: 0.3rem; font-size: 0.85em; } .dd-actions .dd-inline-form { display: inline-block; margin: 0; } .dd-my-listings__head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; gap: 0.5rem; } /* ---------- Single page: hero gallery, action bar, tabs ---------- */ .dd-hero { margin: 0 0 1.25rem; } .dd-hero__grid { display: grid; gap: 6px; border-radius: var(--dd-radius); overflow: hidden; } .dd-hero__grid--1 { grid-template-columns: 1fr; } .dd-hero__grid--2 { grid-template-columns: 2fr 1fr; } .dd-hero__grid--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; } .dd-hero__grid--3 .dd-hero__main { grid-row: span 2; } .dd-hero__grid--4 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .dd-hero__grid--4 .dd-hero__main { grid-row: span 2; grid-column: 1; } /* 5-image banner: hero left fills both rows, 4 thumbs tile 2×2 on the right. The grid carries the aspect ratio so every cell stretches to fill it — no gaps inside the banner, only the 6px gutters between photos. */ .dd-hero__grid--5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 7; } .dd-hero__grid--5 .dd-hero__main { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; } .dd-hero__grid--5 .dd-hero__thumb { aspect-ratio: auto; } .dd-hero__main, .dd-hero__thumb { position: relative; display: block; overflow: hidden; background: var(--dd-bg); } .dd-hero__main { aspect-ratio: 16 / 10; } .dd-hero__thumb { aspect-ratio: 4 / 3; } .dd-hero__main img, .dd-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .dd-hero__main:hover img, .dd-hero__thumb:hover img { transform: scale(1.05); } .dd-hero__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; } .dd-hero.is-expanded .dd-hero__more { display: none; } .dd-hero__extra { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin-top: 6px; } .dd-single__head { margin: 0 0 1.25rem; } /* Listing name is the only

on the detail page. Selector specificity is bumped with `.dd-single` so theme h1 rules (Avada etc.) lose. */ .dd-single h1.dd-title, .dd-single .dd-title { margin: 0 0 0.5rem; line-height: 1.2; font-size: var(--dd-h1-size, 2.4rem); font-weight: 700; color: var(--dd-heading-color, var(--dd-text)); } /* Every section heading on the detail page uses

. The selector list below covers h1\u2013h6 in case a theme rewrites the tag, so the typographic scale stays consistent regardless. */ .dd-single h1.dd-h, .dd-single h2.dd-h, .dd-single h3.dd-h, .dd-single h4.dd-h, .dd-single h5.dd-h, .dd-single h6.dd-h, .dd-single .dd-h { font-size: var(--dd-h5-size, 1.6rem); font-weight: 700; line-height: 1.25; color: var(--dd-heading-color, var(--dd-text)); font-family: inherit; text-transform: none; letter-spacing: 0; } .dd-single__cats { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.3rem; } /* Address on the left (with the listing logo), action buttons on the right. The logo gets a 1.4rem right margin and stays visually grouped with the address even when the row wraps to a second line on narrow viewports. */ .dd-single__meta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 0 0 0.5rem; } .dd-single__loc-wrap { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; } .dd-single__loc-logo { width: 64px; height: 64px; flex: 0 0 64px; margin-right: 1.4rem; object-fit: contain; border-radius: var(--dd-radius); background: var(--dd-card-bg); border: 1px solid var(--dd-border); padding: 4px; } .dd-single__loc { display: flex; flex-direction: column; margin: 0; color: var(--dd-muted); font-size: 0.95rem; min-width: 0; } .dd-single__loc-line { display: block; } .dd-single__loc-icon { display: none; } .dd-hero { position: relative; } .dd-hero__badge { z-index: 2; } .dd-action-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .dd-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; background: #fff; color: var(--dd-text); border: 1px solid var(--dd-border); border-radius: 999px; font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer; font-family: inherit; } .dd-action:hover { border-color: var(--dd-primary); color: var(--dd-primary); } .dd-action--primary { background: var(--dd-primary); color: #fff; border-color: var(--dd-primary); } .dd-action--primary:hover { color: #fff; filter: brightness(1.08); } .dd-action__icon { font-size: 1.05em; line-height: 1; } /* Tabs — no horizontal scroll, wraps naturally on narrow screens. */ .dd-tabs { margin-top: 1rem; } .dd-tabs__nav { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--dd-border); margin: 0 0 1.25rem; } .dd-tabs__btn { background: transparent; border: 0; cursor: pointer; padding: 0.75rem 1.1rem; font: inherit; font-weight: 600; color: var(--dd-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .dd-tabs__btn:hover { color: var(--dd-text); } .dd-tabs__btn.is-active { color: var(--dd-primary); border-bottom-color: var(--dd-primary); } .dd-tabs__panel { display: none; } .dd-tabs__panel.is-active { display: block; } .dd-tabs__empty { padding: 2rem 1rem; text-align: center; color: var(--dd-muted); background: var(--dd-bg); border-radius: var(--dd-radius); } /* Overview 2-column layout: wider main column on the left (About / Video / Location) + narrower sidebar on the right (Services / Events / Contact / Reviews). The grid collapses to a single column on phones. */ .dd-overview { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; } .dd-overview__main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } .dd-overview__block { min-width: 0; } .dd-overview__h { margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--dd-border); } .dd-overview__sub { margin: 1.25rem 0 0.5rem; } .dd-overview__main .dd-single__description { color: var(--dd-text); line-height: 1.6; } .dd-services { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .dd-services__item { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; } .dd-services__item a { color: var(--dd-text); text-decoration: none; } .dd-services__item a:hover { color: var(--dd-primary); } .dd-services__check { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: color-mix(in srgb, var(--dd-primary) 12%, transparent); color: var(--dd-primary); font-size: 0.75em; font-weight: 700; flex-shrink: 0; } .dd-overview__side { display: flex; flex-direction: column; gap: 1rem; } .dd-side-card { background: var(--dd-card-bg); border: 1px solid var(--dd-border); border-radius: var(--dd-radius); padding: 0.9rem 1rem; } .dd-side-card__h { margin: 0 0 0.5rem; } .dd-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; } .dd-contact-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; } .dd-contact-list a { color: var(--dd-text); text-decoration: none; } .dd-contact-list a:hover { color: var(--dd-primary); } .dd-contact__icon { width: 1.1em; text-align: center; } .dd-muted { color: var(--dd-muted); font-size: 0.92rem; margin: 0; } .dd-overview__regions { margin: 0.75rem 0 0; font-size: 0.95rem; } .dd-map-frame { position: relative; overflow: hidden; border-radius: var(--dd-radius); border: 1px solid var(--dd-border); aspect-ratio: 16 / 7; background: var(--dd-bg); } .dd-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 720px) { .dd-overview { grid-template-columns: 1fr; } .dd-map-frame { aspect-ratio: 4 / 3; } } /* ---------- Lightbox ---------- */ .dd-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); touch-action: pan-y; } .dd-lightbox.is-open { display: flex; } .dd-lightbox__stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; box-sizing: border-box; } .dd-lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .dd-lightbox__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms ease; } .dd-lightbox__btn:hover { background: rgba(255, 255, 255, 0.25); } .dd-lightbox__btn:disabled { opacity: 0.3; cursor: default; } .dd-lightbox__prev { left: 0.75rem; } .dd-lightbox__next { right: 0.75rem; } .dd-lightbox__close { position: absolute; top: 0.75rem; right: 0.75rem; transform: none; width: 42px; height: 42px; } .dd-lightbox__counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.85); font-size: 0.9rem; font-weight: 500; background: rgba(0, 0, 0, 0.4); padding: 0.25rem 0.7rem; border-radius: 999px; } @media (max-width: 720px) { .dd-lightbox__btn { width: 40px; height: 40px; font-size: 1.25rem; } .dd-lightbox__stage { padding: 2.5rem 0.5rem; } } @media (max-width: 720px) { .dd-hero__grid--2, .dd-hero__grid--3, .dd-hero__grid--4, .dd-hero__grid--5 { grid-template-columns: 1fr; grid-template-rows: auto; aspect-ratio: auto; } .dd-hero__grid--3 .dd-hero__main, .dd-hero__grid--4 .dd-hero__main, .dd-hero__grid--5 .dd-hero__main { grid-row: auto; grid-column: auto; aspect-ratio: 16 / 10; } .dd-hero__grid--5 .dd-hero__thumb { aspect-ratio: 4 / 3; } .dd-hero__thumb { aspect-ratio: 16 / 10; } .dd-filterbar { border-radius: var(--dd-radius); padding: 0.6rem; } .dd-view-toggle { margin-left: 0; width: 100%; justify-content: stretch; } .dd-view-toggle__btn { flex: 1; text-align: center; } } @media (prefers-reduced-motion: reduce) { .dd-hero__main img, .dd-hero__thumb img { transition: none; } } /* ---------- Appearance overrides (driven by admin settings) ---------- These rules consume the CSS variables injected by DD_Frontend so the admin Appearance panel actually changes the rendered colors / sizes without forcing the user to write CSS. */ .dd-archive, .dd-single, .dd-form, .dd-my-listings { font-size: var(--dd-body-size, 1rem); } .dd-archive__panel { background: var(--dd-card-bg); } .dd-side-card { background: var(--dd-card-bg); } .dd-single .dd-action--primary, .dd-archive .dd-action--primary { background: var(--dd-btn-bg, var(--dd-primary)); color: var(--dd-btn-text, #fff); border-color: var(--dd-btn-bg, var(--dd-primary)); } .dd-single .dd-action--primary:hover, .dd-archive .dd-action--primary:hover { color: var(--dd-btn-text, #fff); } .dd-single a:not(.dd-pill):not(.dd-action), .dd-archive a:not(.dd-pill):not(.dd-action):not(.dd-card__link) { color: var(--dd-link, var(--dd-primary)); }