); the heading inherits
the link's inline black. Grey it on hover — both via the wrapping link and
the heading's own :hover (the heading is the visible hover target). */
.directory-listing-detail a:hover > .single-title,
.directory-listing-detail a:hover .single-title,
.directory-listing-detail .single-title:hover {
color: #686868 !important;
}
.directory-listing-detail .listing-contact a:hover .listing-social-icon {
opacity: 0.55;
}
/* Social icons: Facebook square (no radius), both icons the same 16px size */
img.listing-social-icon {
height: 16px !important;
max-height: 16px !important;
width: 16px !important; /* both PNGs are square; equal boxes guaranteed */
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: none !important;
display: inline-block;
vertical-align: -3px;
}
/* Testimonials: text column wider (side padding halved 48 -> 24), headline in
the style of Siteline's Recent Comments box, less gray below the last quote */
/* J16-8 (June 16): on listings with NO testimonials (Handlebar, NDIC,
Marisella) the space between the last contact line and the horizontal
divider below should EXACTLY match the gap a listing WITH testimonials has
between its last contact line and the top of the grey testimonials area
(measured 24px). The site-wide footer rule sits 16px below the article, so
8px of article padding-bottom gives 8+16 = 24px to the dotted line. Zero
the contact's collapsing bottom margin so the gap is exact. */
.directory-listing-detail:not(:has(.listing-testimonials)) .listing-contact {
margin-bottom: 0 !important;
}
.directory-listing-detail:not(:has(.listing-testimonials)) {
padding-bottom: 8px;
}
/* J16-7 (June 16) + R5-3 (June 17): the three VISUAL (ink) gaps around the
"OUR CLIENTS SAY…" headline must be equal — space above the headline = space
below it = the gap between the last testimonial and the grey box's bottom
edge. The bottom gap is the fixed reference (26px of ink). Headline line-
height adds ~8px of empty space above its caps and the first quote adds ~15px
below the headline, so to land all three at 26px ink: padding-top = 18 (top
gap 26) and the title margin-bottom = 11 (below-headline gap 26). */
.listing-testimonials {
padding: 18px 24px 12px !important;
}
.listing-testimonials .testimonials-title {
font-size: 21px !important;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.25px;
text-transform: uppercase;
color: #000;
margin: 0 0 11px;
}
/* Testimonial quote body text matches the Recent Comments body text in the
sidebar exactly: Lato 16px / 400 / normal / 24px / 0.4px / #000 (the only
gaps were size 18->16 and letter-spacing 0.5->0.4; the rest already matched) */
.listing-testimonials blockquote {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 24px;
letter-spacing: 0.4px;
color: #000;
text-transform: none;
}
/* ── SUBCATEGORY PAGE (Phase 4, design notes) ── */
/* Headline 4pt (5.33px) larger than the previous 36px, with clearance below
so descenders ("g", "p") never overlap the grid */
.subcat-title {
font-size: 41.33px !important;
line-height: 1.25;
margin-top: 0;
margin-bottom: 18px;
}
/* Business name one point larger (18 -> 19.33px) */
.directory-grid .directory-grid-item h4 {
font-size: 19.33px !important;
}
/* Blurb two points larger (12 -> 14.67px), and tied closer to the name */
.directory-grid-item .business-excerpt {
font-size: 14.67px;
line-height: 1.35;
}
.directory-grid-item .business-item .my-2:last-child,
.directory-grid-item .business-item > .my-2 {
margin-bottom: 2px !important;
}
/* When a row holds a single listing, the divider to its right stays but the
far divider does not (Att. 13): the second consecutive filler cell masks
the column line running along its left edge. Desktop 3-col layout only. */
@media (min-width: 992px) {
.directory-grid-item-empty + .directory-grid-item-empty {
position: relative;
}
.directory-grid-item-empty + .directory-grid-item-empty::after {
content: "";
position: absolute;
top: 1px; /* spare the horizontal row divider above */
bottom: 0;
left: -2px; /* covers the 1px line centered on the column edge */
width: 4px;
background: var(--grid-bg, #fff);
z-index: 6;
}
}
/* tablet: 2 columns */
@media (max-width: 991.98px) {
.directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.directory-grid::before {
left: 50%;
}
.directory-grid::after {
display: none;
}
.directory-grid-item:nth-child(n+4)::before {
display: none;
}
.directory-grid-item:nth-child(n+3)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
background-image: repeating-linear-gradient(
to right,
var(--grid-line-color) 0 var(--dot-on),
transparent var(--dot-on) var(--dot-off)
);
background-repeat: repeat-x;
z-index: 6;
}
}
/* mobile: 1 column */
@media (max-width: 767.98px) {
.directory-grid {
grid-template-columns: 1fr;
}
.directory-grid::before,
.directory-grid::after {
display: none;
}
.directory-grid-item:nth-child(n+3)::before {
display: none;
}
.directory-grid-item:nth-child(n+2)::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
background-image: repeating-linear-gradient(
to right,
var(--grid-line-color) 0 0,
transparent 0 0
);
background-repeat: repeat-x;
z-index: 6;
}
}
/* Default inner spacing */
.directory-grid-item .directory-grid-item-inner {
padding-top: 28px;
padding-bottom: 30px;
}
/* =========================
3 columns (lg and up)
first row: items 1-3
last row: last 3 items
========================= */
@media (min-width: 992px) {
.directory-grid-item:nth-child(-n+3) .directory-grid-item-inner {
padding-top: 0;
}
.directory-grid-item:nth-last-child(-n+3) .directory-grid-item-inner {
padding-bottom: 0;
}
}
/* =========================
2 columns (md to lg-1)
first row: items 1-2
last row: last 2 items
========================= */
@media (min-width: 768px) and (max-width: 991.98px) {
.directory-grid-item:nth-child(-n+2) .directory-grid-item-inner {
padding-top: 0;
}
.directory-grid-item:nth-last-child(-n+2) .directory-grid-item-inner {
padding-bottom: 0;
}
}
/* =========================
1 column (below md)
first row: item 1
last row: last item
========================= */
@media (max-width: 767.98px) {
.directory-grid-item:first-child .directory-grid-item-inner {
padding-top: 0;
}
.directory-grid-item:last-child .directory-grid-item-inner {
padding-bottom: 0;
}
}
@media (max-width: 991.98px) and (min-width: 768px) {
.directory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.directory-grid::before {
left: 50%;
}
.directory-grid::after {
display: none;
}
/* clear any desktop row-line logic */
.directory-grid-item::before {
display: none;
}
/* every item in rows after the first gets a top dotted line */
.directory-grid-item:nth-child(n+3)::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
background-image: repeating-linear-gradient(
to right,
var(--grid-line-color) 0 var(--dot-on),
transparent var(--dot-on) var(--dot-off)
);
background-repeat: repeat-x;
z-index: 6;
}
}
/* end grid */
/* slideshow */
.listing-gallery {
position: relative;
}
.listing-gallery-stage {
position: relative;
overflow: hidden;
background: #f3f3f3;
}
.listing-gallery-item {
display: none;
/* !important: a generic figure rule adds 16px margin-bottom, which made the
stage's grey background show as a bar under every gallery image */
margin: 0 !important;
}
.listing-gallery-item.is-active {
display: block;
}
.listing-gallery-image {
display: block;
width: 100%;
height: auto;
cursor: pointer;
}
.listing-gallery-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
border: 0;
background: transparent;
color: #fff;
padding: 0;
width: 56px;
height: 56px;
line-height: 1;
cursor: pointer;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.listing-gallery-arrow:focus,.listing-gallery-arrow:hover,button.listing-lightbox-close:focus,button.listing-lightbox-close:hover{
background: unset!important;
outline: unset;
}
button.listing-lightbox-close{
font-size: 56px !important;
padding: 0px;
}
.listing-gallery-arrow span {
display: block;
font-size: 72px;
font-weight: 700;
line-height: 56px;
}
.listing-gallery-arrow-prev {
left: 12px;
}
.listing-gallery-arrow-next {
right: 12px;
}
.listing-gallery-thumbs {
display: flex;
gap: 10px;
margin-top: 12px;
flex-wrap: wrap;
}
.listing-gallery-thumb {
border: 2px solid transparent;
padding: 0;
background: transparent;
cursor: pointer;
}
.listing-gallery-thumb.is-active {
border-color: #000;
overflow: hidden;
border-radius: 0px;
border-width: 1px;
}
.listing-gallery-thumb img {
display: block;
width: 88px;
height: 88px;
object-fit: cover;
}
.listing-lightbox[hidden] {
display: none !important;
}
.listing-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
}
.listing-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.85);
}
.listing-lightbox-dialog {
position: absolute;
z-index: 2;
width: min(90vw, 1200px);
margin: 4vh auto;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.listing-lightbox-stage {
position: relative;
width: fit-content;
height: 100%;
}
.listing-lightbox-image {
display: block;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
object-fit: contain;
}
button.listing-lightbox-close {
position: absolute;
top: 14px;
right: 18px;
z-index: 10;
border: 0;
background: transparent;
color: #fff;
font-size: 48px!important;
line-height: 0;
cursor: pointer;
}
/* end slideshow */
select#media-attachment-filters {
width: 100%;
max-width: 100%;
}
.fas::before,
.fa-solid::before {
content: var(--fa);
}
.drts-search-form-field .fas:before {
content: " " !important;
width: 14px;
height:14px;
display:block;
}
/* ============================================================
STEP 2 — Add-listing form redesign (directory form4.png).
Add-listing page only (id 99321). Right sidebar untouched.
============================================================ */
/* Form body = 2-column flex grid.
Step 4 (note 1, Safari): pair spacing via justify-content, NOT percentage column-gap —
% flex gaps resolve inconsistently in WebKit and can wrap the 48.5% pairs onto
separate rows (the "huge space between fields in Safari" report). */
body.page-id-99321 .drts-display-name-form-default {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
/* Safari (client PDF 7/4): WebKit can resolve this wrap-container's height against
the stretched page row, and the default align-content:stretch then DISTRIBUTES the
extra height as huge even gaps between every field row. Pack lines at the top. */
align-content: flex-start;
}
/* invisible full-width row break (keeps Business email alone on its row) */
body.page-id-99321 .ndic-form-break { width: 100%; height: 0; margin: 0 !important; padding: 0; }
body.page-id-99321 .drts-display-name-form-default > * {
width: 100%;
margin: 0 0 18px 0;
box-sizing: border-box;
}
/* Step 3.2: tight, even inter-field spacing to match directory form4.png.
The Directories default puts 45px on each .drts-display-element (+24px on the inner
field wrapper); tighten to an even 12px so the rhythm reads like the mockup. Section
dividers keep their own (larger) spacing. */
body.page-id-99321 .drts-display-name-form-default > .drts-display-element,
body.page-id-99321 .drts-display-name-form-default > .ndic-testimonial-row {
margin-bottom: 12px !important;
}
body.page-id-99321 .drts-display-name-form-default .drts-entity-form-field {
margin-bottom: 0 !important;
}
/* single-line inputs/selects carry a 14px bottom margin that textareas don't (so input
fields read looser than textarea rows); zero it so every gap is the 12px container.
The name widget also has an extra 24px wrapper margin below First/Last — zero that too. */
body.page-id-99321 .drts-display-name-form-default .drts-bs-form-control {
margin-bottom: 0 !important;
}
body.page-id-99321 [class*="drts-display-element-entity_form_name"] .drts-form-group {
margin-bottom: 0 !important;
}
/* Paired half-width fields (flex-wrap lays them 2-per-row) */
body.page-id-99321 .drts-display-element-entity_form_email-1,
body.page-id-99321 .drts-display-element-entity_form_email-2,
body.page-id-99321 .drts-display-element-entity_form_phone-1,
body.page-id-99321 .drts-display-element-entity_form_phone-3,
body.page-id-99321 .drts-display-element-entity_form_url-1,
body.page-id-99321 .drts-display-element-entity_form_string-2,
body.page-id-99321 .drts-display-element-entity_form_string-3 {
width: 48.5%;
}
/* Section headings + short centered dotted dividers between sections
(100px centered, matching .listing-address-divider on the listing pages) */
/* Step 4 (note 4): tighter, SYMMETRIC divider spacing — last field bottom -> line =
12(field)+4 = 16px, line -> heading = 16px, heading -> first field = 16px */
body.page-id-99321 .ndic-form-section {
width: 100%;
margin: 0 0 16px;
padding-top: 0;
}
body.page-id-99321 .ndic-form-section::before {
content: "";
display: block;
width: 100px;
border-top: 1px dotted #000;
/* bottom is 11px (not 16) because the heading's glyphs start ~5px below its
line-box top — this makes the VISIBLE gap below the rule equal the 17px above */
margin: 4px auto 11px;
}
body.page-id-99321 .ndic-form-section-first {
margin-top: 0;
}
body.page-id-99321 .ndic-form-section-first::before { display: none; }
body.page-id-99321 .ndic-form-section-title {
font-size: 22px;
font-weight: 700;
margin: 0;
color: #221F1F;
}
/* Boxed inputs (labels are in-box placeholders) */
body.page-id-99321 .drts-display-name-form-default input[type="text"],
body.page-id-99321 .drts-display-name-form-default input[type="email"],
body.page-id-99321 .drts-display-name-form-default input[type="tel"],
body.page-id-99321 .drts-display-name-form-default input[type="url"],
body.page-id-99321 .drts-display-name-form-default textarea,
body.page-id-99321 .drts-display-name-form-default select {
width: 100%;
border: 1px solid #595959;
border-radius: 0;
padding: 13px 14px;
font-size: 16px;
font-family: inherit; /* post_content is a wp-editor textarea (monospace by default) — match the rest */
line-height: 1.3;
background-color: #fff;
box-shadow: none;
box-sizing: border-box;
}
/* opacity .8 matches the plugin's own placeholder strength on the standard inputs, so
the wp-editor textarea (Full description) reads identically to every other field */
body.page-id-99321 .drts-display-name-form-default ::placeholder { color: #6b6b6b; opacity: 0.8; }
/* the WP editor wraps the Full-description textarea in its own 1px #ccc border —
remove it so the field is single-bordered like every other box */
body.page-id-99321 .drts-display-name-form-default .wp-editor-container { border: none; }
/* Step 4 (note 9b): no drag-to-resize corner lines on any form textarea */
body.page-id-99321 .drts-display-name-form-default textarea { min-height: 120px; resize: none; }
/* Step 4 (note 5): the tagline box = 2x the Business-name box height
(!important: an autosize script sets an inline height on this textarea) */
body.page-id-99321 [class*="drts-display-element-entity_form_text-1"] textarea {
height: 88px !important; min-height: 0;
}
/* Step 4 (screenshot 3): address block -> Business phone gap = the standard 12px.
The address widget nests TWO .drts-form-group wrappers each carrying 24px, and the
last sub-row already contributes 12px — zero the wrappers + the container. */
body.page-id-99321 .drts-display-name-form-default > [class*="drts-display-element-entity_form_location_address"] {
margin-bottom: 0 !important; /* out-ranks the generic > .drts-display-element 12px */
}
/* zero ONLY the widget's wrapper groups — the four sub-field rows are .drts-form-groups
too and must keep their 12px (street/city -> state/zip) */
body.page-id-99321 [class*="drts-display-element-entity_form_location_address"] .drts-form-group:not(.drts-form-type-textfield) {
margin-bottom: 0 !important;
}
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-location-address > .drts-form-type-textfield {
margin: 0 0 12px !important;
}
/* the category select keeps its own 14px bottom margin (it's not a .drts-bs-form-control) */
body.page-id-99321 .drts-display-name-form-default select {
margin-bottom: 0 !important;
}
/* the empty .drts-form-headers block above the form carries 32px that pushes the intro
below the top of the vertical dotted line (note 2) */
body.page-id-99321 .drts-form-headers { margin-bottom: 0 !important; }
/* the WPBakery column wrapping the form adds 35px after the closing text, making the
vertical dotted line overshoot the last line (note 12) */
body.page-id-99321 .wpb_text_column.wpb_content_element { margin-bottom: 0; }
/* Safari (client PDF 7/4, "huge space between fields"): the form sits inside the
theme's flex .row + a WPBakery wrapper chain; WebKit resolves percentage/stretched
heights down that chain (Chrome collapses them to content height), inflating the
form container and each field element. Force content-based heights on every link
from the column wrappers to the field elements so no percentage can resolve
against a stretched ancestor. */
body.page-id-99321 .wpb_column,
body.page-id-99321 .vc_column-inner,
body.page-id-99321 .wpb_wrapper,
body.page-id-99321 .wpb_text_column,
body.page-id-99321 .drts.drts-main,
body.page-id-99321 .drts-form,
body.page-id-99321 .drts-display-name-form-default,
body.page-id-99321 .drts-display-name-form-default > .drts-display-element {
height: auto !important;
}
/* Step 3: fields now carry native labels (shown in the admin editor); on the public
form hide the label column + force the input column full width so it keeps the
in-box placeholder look the client approved. */
body.page-id-99321 .drts-display-name-form-default .drts-bs-col-form-label,
body.page-id-99321 .drts-display-name-form-default .drts-entity-form-field > label { display: none !important; }
body.page-id-99321 .drts-display-name-form-default .drts-bs-col-sm-9 { flex: 0 0 100% !important; max-width: 100% !important; }
/* Step 3.1: Facebook / Instagram show placeholder text only on the public form (no logo).
The admin editor keeps its FB/IG logos via the admin_print_styles hook in library/directory.php. */
/* First/Last name render 2-col inside the name widget */
body.page-id-99321 .drts-display-element-entity_form_name .drts-col-6 { flex: 0 0 48.5%; max-width: 48.5%; }
/* Address: hide sub-labels + map/autocomplete; 4 placeholder boxes in 2 columns */
body.page-id-99321 [class*="entity_form_location_address"] .drts-bs-col-form-label { display: none !important; }
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-location-address {
display: flex; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; /* no % gap; pack lines (Safari) */
}
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-location-address > :not(.drts-form-type-textfield) { display: none !important; }
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-location-address > .drts-form-type-textfield {
flex: 0 0 48.5%; max-width: 48.5%; margin: 0 0 12px;
}
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-textfield > [class*="drts-bs-col"] {
flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0;
}
/* Field help/description text */
body.page-id-99321 .drts-display-name-form-default [class*="form-field-description"],
body.page-id-99321 .drts-display-name-form-default [class*="form-description"] { font-size: 15px; color: #333; margin: 4px 0 0; }
/* Step 4.1: descriptive text sits tighter (~8px) under its heading — image sections */
body.page-id-99321 [class*="drts-display-element-entity_form_wp_image"] [class*="drts-form-description"] {
margin-top: -8px !important;
}
/* Testimonial: name field beside the quote box (px margin, not % gap — Safari) */
body.page-id-99321 .ndic-testimonial-row { display: flex; align-items: stretch; }
body.page-id-99321 .ndic-testimonial-text { flex: 1 1 auto; min-height: 130px; margin-right: 20px; }
body.page-id-99321 .ndic-testimonial-name { flex: 0 0 230px; align-self: flex-start; }
/* Submit button = Siteline blog-comment button */
body.page-id-99321 .drts-form button[name="_drts_form_submit[add]"],
body.page-id-99321 .drts-form button[name^="_drts_form_submit"] {
text-transform: uppercase !important;
color: #fff !important;
background: #a1a1a1 !important;
border: none !important;
border-radius: 8px !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.2857 !important;
padding: 16px 24px !important;
}
body.page-id-99321 .drts-form button[name^="_drts_form_submit"]:hover { background: #000 !important; color: #fff !important; }
/* Step 3.3: intro (above form) + closing (below submit) paragraphs = body text;
email is a subtle link that greys on hover. Plus a short centered rule after the images. */
/* Step 4 (note 2): no "Add Listing" headline on the form page */
body.page-id-99321 h1.page-title { display: none; }
/* Step 5: no "Thank You" headline on the thank-you page either (dev id 106571 — remap on live) */
body.page-id-107470 h1.page-title { display: none; }
body.page-id-99321 .ndic-form-intro {
font-size: 17px;
line-height: 1.5;
color: #221F1F;
margin: 0 0 14px;
}
/* Step 4 (note 11): closing = same size/style as the intro text (overrides the earlier
22px-bold instruction) */
body.page-id-99321 .ndic-form-closing {
font-size: 17px;
line-height: 1.5;
color: #221F1F;
margin: 16px 0 0; /* = the spacing above the Submit button (screenshot 4) */
}
/* Step 4 (note 9): the testimonials line reads like the thumbnail-image description
text, not a bold section heading */
body.page-id-99321 .ndic-form-section-plain .ndic-form-section-title {
font-size: 15px;
font-weight: 400;
color: #333;
}
body.page-id-99321 .ndic-form-intro a,
body.page-id-99321 .ndic-form-closing a { color: inherit; text-decoration: none; }
body.page-id-99321 .ndic-form-intro a:hover,
body.page-id-99321 .ndic-form-closing a:hover { color: #888; }
body.page-id-99321 .ndic-form-rule { width: 100px; border-top: 1px dotted #000; margin: 4px auto 16px; }
/* Mobile/narrow: stack all 2-column pairs to single column */
@media (max-width: 900px) {
body.page-id-99321 .drts-display-name-form-default > *,
body.page-id-99321 .drts-display-element-entity_form_email-1,
body.page-id-99321 .drts-display-element-entity_form_phone-1,
body.page-id-99321 .drts-display-element-entity_form_phone-3,
body.page-id-99321 .drts-display-element-entity_form_url-1,
body.page-id-99321 .drts-display-element-entity_form_string-2,
body.page-id-99321 .drts-display-element-entity_form_string-3 { width: 100%; }
body.page-id-99321 [class*="entity_form_location_address"] .drts-form-type-location-address > .drts-form-type-textfield,
body.page-id-99321 .drts-display-element-entity_form_name .drts-col-6 { flex: 0 0 100%; max-width: 100%; }
body.page-id-99321 .ndic-testimonial-row { flex-direction: column; }
body.page-id-99321 .ndic-testimonial-text { margin-right: 0; }
body.page-id-99321 .ndic-testimonial-name { flex: 0 0 auto; align-self: stretch; margin-top: 10px; }
}
/* ============================================================
Step 7 — Mobile Updates (Mobile Updates.docx), directory only.
Scoped via #sidebar1:has(.directory-copy) / directory page ids so
Siteline Proper's mobile layout (incl. its 4px double sidebar line)
is untouched.
============================================================ */
@media (max-width: 767px) {
/* M1/M3: the stacked sidebar's "double line" becomes a single dotted line
(style.css gives .sidebar a 4px double top border on mobile — Siteline keeps it) */
#sidebar1.sidebar:has(.directory-copy) {
border-top: 1px dotted #000;
padding-top: 28px;
}
/* M1: landing page — trim the oversized gap between the last category box and
the line so above ≈ below (was 92px vs 28px). Subcategory pages share
page-id 104416 (rewrite + query vars), so key on the accordion, which
only the landing renders. */
body.page-id-104416:has(.acc-item) #sidebar1.sidebar:has(.directory-copy) {
margin-top: -40px;
}
/* M2: subcategory grid — short dotted divider between stacked listings.
Reference rhythm = the 8px between an image's bottom border and the
business name. The card's own padding (28px top / 30px bottom) makes
the space around the divider, so cards touching a divider get 8px on
that side. Filler items (no ) don't count — the last real card
keeps its 30px bottom padding for the sidebar-line gap below. */
.directory-grid-item + .directory-grid-item::before {
content: "";
display: block;
width: 100px;
border-top: 1px dotted #000;
margin: 0 auto;
}
.directory-grid-item { margin-bottom: 0; }
.directory-grid-item:has(+ .directory-grid-item a) .directory-grid-item-inner {
padding-bottom: 8px;
}
.directory-grid-item + .directory-grid-item:has(a) .directory-grid-item-inner {
padding-top: 8px;
}
/* M2: last listing — same 8px from its description to the full-width
sidebar line. Pinned on the last REAL card itself (the theme zeroes
:last-child's bottom padding, but with fillers present the last real
card isn't :last-child and keeps 30px — so the padding is set
explicitly and the sidebar sits flush). */
.directory-grid-item:has(a):not(:has(~ .directory-grid-item a)) .directory-grid-item-inner {
padding-bottom: 8px;
}
body.page-id-104416:has(.directory-grid) #sidebar1.sidebar:has(.directory-copy) {
margin-top: 0;
}
/* M2: the grid pads out desktop rows with empty filler items — on mobile they
render as orphan dividers + dead space after the last listing; hide them
(real items always contain the listing ) */
.directory-grid-item:not(:has(a)) { display: none; }
/* M2: listing detail — only the sidebar's line should show before the
intro/register, 8px below the testimonials (same rhythm as the subcat
dividers). The empty article-footer (48px incl. its rule), the article's
24px bottom margin and the sidebar's default 24px top margin made a
~96px gap. Directory listings only; Siteline posts keep all of it. */
body.single-directory_dir_ltg .article-footer { display: none; }
body.single-directory_dir_ltg #ndic-main article { margin-bottom: 0; }
body.single-directory_dir_ltg #sidebar1.sidebar:has(.directory-copy) {
margin-top: 8px;
}
/* M3: signup + thank-you pages only — hide the sidebar intro + "LOCAL BUSINESS?
REGISTER HERE" right after someone has just submitted (mobile only; desktop and
all other directory pages keep them). Dev thank-you id 106571 (live: 107470). */
body.page-id-99321 #custom_html-2,
body.page-id-107470 #custom_html-2 {
display: none;
}
}
/* ============================================================
Step 8 — payment form (page 104428, same id on live).
In-field placeholders only: hide the First/Last sub-labels under
the name inputs (the main Name/Email/Company labels are hidden via
each field's GF hidden-label setting).
============================================================ */
body.page-id-104428 .gform_wrapper .ginput_complex label,
body.page-id-104428 .gform_wrapper .ginput_complex legend {
display: none;
}
/* ============================================================
Step 9 — mobile header: the full-bleed wordmark ran under the
hamburger (40px overlap at phone widths). Scale the whole SVG
artwork down — a transform doesn't affect layout, so the black
bar keeps its exact Siteline-matched height while the lockup
gains clearance on both sides. Hamburger untouched per Nick.
============================================================ */
@media (max-width: 767px) {
.directory-logo-svg {
transform: scale(0.82);
transform-origin: 60px 50%;
}
}
/* Step 9b — mobile tagline parity with Siteline: the Directory's tagline
rendered ~6px tall at phone widths vs Siteline's ~9px (the SVG shrinks
linearly with viewport width, then the Step-9 0.82 header scale compounded
it). Scale the tagline group 1.5x about its own center — the full transform
replaces the baked attribute (same technique as the desktop logo rules),
recomputed to keep the tagline centered exactly where it is. Wordmark,
circle, hamburger clearance and bar height are untouched. */
@media (max-width: 767px) {
.directory-logo-svg .dir-tagline {
/* x recenters the tagline under THE DIRECTORY wordmark (not the
full lockup incl. the circle), matching the desktop relationship */
transform: translate(-121.50px, -49.880px) scale(0.439833);
}
}
/* Step 9c — payment page (form + its post-payment confirmation view, page
104428 on both sites): hide the "LOCAL BUSINESS? REGISTER HERE" intro
widget at ALL widths — confusing mid-payment. Other directory pages keep it. */
body.page-id-104428 #custom_html-2 {
display: none;
}
/* ============================================================
Step 10 — directory search results (the drts listings view, which
only renders on the Listings page): match Siteline's search-results
styling. The result rows already use the theme's article markup via
the drts summary template override; what differed was the plugin's
view chrome and the heading.
============================================================ */
/* hide the plugin's result-count / filter / sort / layout-switch bar
(!important: the plugin's own d-sm-grid utility class is !important) */
#ndic-main .drts-view-nav {
display: none !important;
}
/* heading styled like Siteline's "Search results for:" archive title
(24px / 800 / left; was inheriting 22px centered) */
#ndic-main:has(.drts-view-entities) h1.page-title {
font-size: 24px;
font-weight: 800;
text-align: left;
}
/* Step 10b — search-result rows: exact Siteline typography. On the listings
page the rows inherit the generic page h1/ul styles instead of Siteline's
scoped .heading/.rubric rules (measured: 40px/500 title vs Siteline's
24px/800; 32px rubric indent vs 0). .directory-post-block exists only in
the drts summary override, so this touches nothing else. */
#ndic-main .directory-post-block h1.heading {
font-size: 24px;
font-weight: 800;
line-height: 30px;
}
#ndic-main .directory-post-block .rubric ul {
padding-left: 0;
}
#ndic-main .directory-post-block p {
margin-bottom: 16px;
}
/* Step 10c — search results (the only page with the drts entities view):
like the add-listing exception above, let the sidebar stretch so the
vertical dotted line runs the full height of the results, matching
Siteline's search page. Listing pages keep the flex-start behavior
(line ends at Recent Comments, J16-9). */
@media (min-width: 768px) {
.row:has(.drts-view-entities) #sidebar1:has(.directory-copy) {
align-self: stretch;
}
}
/* Step 11 — search polish: heading→first-result gap matches Siteline's
16px. The 32px came from the Listings page's EMPTY page-builder row
(its bottom margin renders as dead space above the injected results);
hide it here and give the heading Siteline's 16px below. */
#ndic-main .drts-view-entities-header {
/* empty once the nav inside it is hidden, but its 24px bottom margin
still collapses upward as dead space above the results */
display: none !important;
}
#ndic-main:has(.drts-view-entities) h1.page-title {
padding-bottom: 0;
margin-bottom: 16px;
}
#sidebar1 input.drts-search-keyword-text::placeholder {
/* newsletter placeholder measures #333 at opacity 1; the plugin forces
0.8 opacity on its own placeholder, hence the !importants */
color: #333 !important;
opacity: 1 !important;
}