/* * Third-party plugin skins — The Events Calendar, GeoDirectory/AyeCode UI, * Forminator. * * DELIBERATELY ITS OWN FILE. Every selector here is owned by someone else and * can break on a plugin update. Keeping it separate means "The Events Calendar * 6.x broke the events page" is a one-file diff, and the Administrator Guide * can point an operator at exactly one place to check after an update. * * The house rule for this file, from CLAUDE.md and the redesign's owner * decision 4: restyle only. Never override a plugin template. Prefer the * plugin's own CSS custom properties to its class names wherever it exposes * them — a variable is a supported surface, a class name is an implementation * detail. The Events Calendar exposes 291 of them (verified in phase 0), and * AyeCode UI is Bootstrap 5, so both are largely reachable that way. * * The full plugin restyle is phase 10 (backlog/24). Phase 2 seeds this file * with the one rule that had to move out of Customizer -> Additional CSS * during the cutover. */ /* * AyeCode UI (GeoDirectory's bundled Bootstrap 5 framework) defines * --bs-primary / --bs-secondary on a bare :root selector in its own compiled * ayecode-ui-compatibility.css, which beats the Customizer's own override * (an `html body` selector, lower specificity) regardless of load order. * Re-asserting with !important is what actually makes GeoDirectory's search * bar, listing cards and buttons pick up the brand colours instead of * AyeCode's default blue. * * This is the single most useful line carried over from the pre-redesign * Additional CSS: it is the proof that GD's chrome is variable-driven, which * is what lets phase 10 restyle the Directory screens without touching a * single GeoDirectory template. */ :root { --bs-primary: #333F48 !important; --bs-primary-rgb: 51, 63, 72 !important; --bs-secondary: #3E7C74 !important; --bs-secondary-rgb: 62, 124, 116 !important; } /* * Because custom properties inherit, the Directory pages can be retinted to * the Directory stream green by rebinding on the body — no per-component * rules, and GeoDirectory never knows the difference. */ body.post-type-archive-gd_place, body.single-gd_place { --bs-secondary: #2E7D32 !important; --bs-secondary-rgb: 46, 125, 50 !important; } /* ========================================================================== * PHASE 10 — the plugin surfaces (screens 08, 09, 16, 17) * * Owner decision 4: CSS restyle only. Not one plugin template is overridden, * and `git status` on wp-content/plugins and wp-content/themes stays clean. * * THE ORDER OF PREFERENCE, applied throughout: * 1. the plugin's own CSS custom property (a supported surface) * 2. the plugin's own class name (an implementation detail) * 3. accept the divergence and write it down (never a template override) * * Where a rule below uses a class name it is because the plugin exposes no * variable for that property. Those are the rules to check first after a TEC or * GeoDirectory update; the variable blocks should survive. * ========================================================================== */ /* -------------------------------------------------------------------------- * The Events Calendar — variables * * 291 of these exist (counted in phase 0). Everything reachable this way is * done this way. --tec-color-accent-primary is deliberately NOT set here: it is * fed by the Divi Customizer accent, which phase 1 set to #6B4FA0, and setting * it in two places is how the calendar and the rest of the site end up * disagreeing about what purple is. * ------------------------------------------------------------------------ */ .tribe-common, .tribe-events, .tribe-common--breakpoint-medium.tribe-common { /* Square corners everywhere. The design has zero radius; TEC ships 4px. */ --tec-border-radius-default: 0; --tec-border-radius-small: 0; --tec-border-radius-medium: 0; /* Both families, so TEC's own type scale lands on our fonts rather than * its bundled Helvetica stack. */ --tec-font-family-sans-serif: var(--lts-font-ui); --tec-font-family-base: var(--lts-font-ui); --tec-color-text-primary: var(--lts-ink); --tec-color-text-secondary: var(--lts-text-muted); --tec-color-text-events-title: var(--lts-ink); --tec-color-text-event-date: var(--lts-event); --tec-color-border-default: var(--lts-border); --tec-color-border-secondary: var(--lts-border); --tec-color-background-events: transparent; --tec-color-link-primary: var(--lts-ink); --tec-color-link-accent: var(--lts-event); --tec-color-link-accent-hover: var(--lts-event); } /* -------------------------------------------------------------------------- * The Events Calendar — list view * ------------------------------------------------------------------------ */ .tribe-events .tribe-events-calendar-list__event-title, .tribe-events .tribe-events-calendar-month__calendar-event-title, .tribe-events .tribe-events-calendar-day__event-title { font-family: var(--lts-font-display); font-size: 24px; font-weight: 600; line-height: 1.25; margin: 6px 0; } .tribe-events .tribe-events-calendar-list__event-title-link { color: var(--lts-ink) !important; text-decoration: none; } .tribe-events .tribe-events-calendar-list__event-title-link:hover, .tribe-events .tribe-events-calendar-list__event-title-link:focus { color: var(--lts-event) !important; } /* The when-and-where line above the title, in the Event purple. */ .tribe-events .tribe-events-calendar-list__event-datetime-wrapper, .tribe-events .tribe-events-calendar-list__event-venue { font-family: var(--lts-font-ui); font-size: 12px; font-weight: 700; color: var(--lts-event); } .tribe-events .tribe-events-calendar-list__event-description p { font-family: var(--lts-font-ui); font-size: var(--lts-fs-excerpt); line-height: 1.6; color: var(--lts-text-dek); max-width: 66ch; } /* * THE PURPLE DATE BLOCK — 78px, the design's most recognisable events element. * * TEC's date tag holds a weekday and a day number and NO MONTH, and there is no * variable or filter that adds one. The artboard draws Sat / 27 / Sep. Getting * the month in would mean overriding * views/v2/list/event/date/meta.php, which owner decision 4 forbids — so the * divergence is accepted and recorded here rather than worked around. It costs * little in practice: TEC already groups the list under a "September 2026" * month heading directly above these rows. */ /* * !important on four properties, and it is the right call rather than a * shortcut. * * TEC sizes and pads this element from selectors that stack TWO classes on the * same node — `.tribe-common--breakpoint-medium.tribe-events .tribe-events-…` * at (0,3,0). Nothing we can write reaches that without hard-coding the name of * their responsive breakpoint class, and a rule keyed to * `--breakpoint-medium` would silently stop matching the day TEC renames or * re-tiers its breakpoints. `!important` on the four properties the design * actually pins says what we mean and does not encode a guess about their * internals. * * Everything else about this element is still inherited from TEC. */ .tribe-common .tribe-events-calendar-list__event-date-tag { width: 78px !important; flex: 0 0 78px !important; max-width: 78px; /* TEC's grid also sets a min-width, which wins over flex-basis and held the * block at 90px until this was added. Four properties are not enough; five * are. */ min-width: 78px !important; box-sizing: border-box; background: var(--lts-event); color: #fff; padding: 10px 0 !important; text-align: center; align-self: flex-start; } .tribe-events .tribe-events-calendar-list__event-date-tag-weekday { display: block; font-family: var(--lts-font-ui); font-size: var(--lts-fs-kicker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .tribe-events .tribe-events-calendar-list__event-date-tag-daynum { display: block; font-family: var(--lts-font-display); font-size: 32px; font-weight: 600; line-height: 1; color: #fff; } .tribe-events .tribe-events-calendar-list__month-separator { border-top: var(--lts-rule-section); padding-top: var(--lts-space-3); } .tribe-events .tribe-events-calendar-list__month-separator-text { font-family: var(--lts-font-ui); font-size: var(--lts-fs-section-header); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lts-ink); background: transparent; } /* -------------------------------------------------------------------------- * The Events Calendar — the events bar and the List | Month | Day switch * ------------------------------------------------------------------------ */ .tribe-events .tribe-events-c-events-bar__search-container, .tribe-events .tribe-events-c-search__input-control-input, .tribe-events .tribe-common-form-control-text__input { border-radius: 0; border: 1px solid var(--lts-border); background: var(--lts-surface); font-family: var(--lts-font-ui); font-size: var(--lts-fs-input); color: var(--lts-ink); } .tribe-events .tribe-common-c-btn, .tribe-events .tribe-events-c-search__button { border-radius: 0; background: var(--lts-event); font-family: var(--lts-font-ui); font-weight: 700; } /* Segmented, not three loose buttons: one bordered strip with the current view * filled, matching the chip row on our own archives. */ .tribe-events .tribe-events-c-view-selector__list { border: 1px solid var(--lts-border); border-radius: 0; display: flex; overflow: hidden; } .tribe-events .tribe-events-c-view-selector__list-item { border: 0; border-left: 1px solid var(--lts-border); margin: 0; } .tribe-events .tribe-events-c-view-selector__list-item:first-child { border-left: 0; } /* Same reason as the date tag: TEC pads this from a breakpoint-qualified * selector, and without the override the segmented control collapses to 25px * of purple with the label spilling out of it. */ .tribe-common .tribe-events-c-view-selector__list-item-link { display: flex; align-items: center; gap: 7px; padding: 10px 14px !important; font-family: var(--lts-font-ui); font-size: var(--lts-fs-meta); font-weight: 600; color: var(--lts-text-muted) !important; text-decoration: none; } .tribe-common .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link { background: var(--lts-event); color: #fff !important; font-weight: 700; } .tribe-events .tribe-events-c-view-selector__list-item--active .tribe-common-c-svgicon { color: #fff; } .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-events-c-top-bar__nav-link { border-radius: 0; font-family: var(--lts-font-ui); font-weight: 700; color: var(--lts-ink); } /* -------------------------------------------------------------------------- * The Events Calendar — single event * ------------------------------------------------------------------------ */ .tribe-events-single .tribe-events-single-event-title, .single-tribe_events .tribe-events-single-event-title { font-family: var(--lts-font-display); font-size: 44px; font-weight: 600; line-height: 1.1; color: var(--lts-ink); } .single-tribe_events .tribe-events-event-meta { border: 1px solid var(--lts-border); border-left: 4px solid var(--lts-event); border-radius: 0; background: var(--lts-surface); font-family: var(--lts-font-ui); } .single-tribe_events .tribe-events-event-meta .tribe-events-single-section-title { font-family: var(--lts-font-ui); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lts-ink); } .single-tribe_events .tribe-events-content { font-family: var(--lts-font-ui); font-size: var(--lts-fs-body); line-height: var(--lts-lh-body); color: var(--lts-text-body); max-width: var(--lts-measure-body); } /* -------------------------------------------------------------------------- * GeoDirectory / AyeCode UI — variables * * AyeCode UI is Bootstrap 5 (design_style = bootstrap, verified in phase 0), so * the framework variables reach most of GD's chrome. The :root block above * carries the brand colours; this rebinds the two things the redesign changes. * ------------------------------------------------------------------------ */ :root { /* Square corners. Bootstrap's .5rem default is the single most visible * difference between GD's chrome and the rest of this design. */ --bs-border-radius: 0 !important; --bs-border-radius-sm: 0 !important; --bs-border-radius-lg: 0 !important; --bs-border-radius-xl: 0 !important; --bs-border-radius-pill: 0 !important; --bs-border-color: var(--lts-border) !important; --bs-body-font-family: var(--lts-font-ui) !important; --bs-body-color: var(--lts-text-body) !important; } /* * THE DIRECTORY PAGES GO GREEN. * * Custom properties inherit, so rebinding --bs-secondary on the body of a * directory page retints every GeoDirectory button, link and accent that reads * it — the whole stream-colour idea, applied to somebody else's framework * without touching one of their selectors. The rest of the site stays teal * because nothing else matches these body classes. */ body.geodir-page, body.post-type-archive-gd_place, body.single-gd_place { --bs-secondary: var(--lts-directory) !important; --bs-secondary-rgb: 46, 125, 50 !important; --bs-link-color: var(--lts-directory) !important; --bs-link-hover-color: var(--lts-directory) !important; --lts-stream: var(--lts-directory); --lts-stream-text: var(--lts-directory); } /* -------------------------------------------------------------------------- * GeoDirectory — archive * ------------------------------------------------------------------------ */ /* * Bootstrap rows need a padded container, and GeoDirectory's blocks do not * provide one. * * Every `.row` AyeCode emits carries `margin-left: -12px` (half of * --bs-gutter-x), which Bootstrap expects a `.container` to absorb with * matching padding. Dropped straight into `.entry-content` with no padding, * those negative margins push the search row and the card grid 12px past the * viewport and the WHOLE PAGE scrolls sideways on a phone. * * Pre-existing GeoDirectory behaviour rather than anything the redesign * introduced — our own archives measure exactly 375px at 375px — but it is a * CSS problem with a CSS fix, which is what this phase is for. Supplying the * padding Bootstrap assumes is the fix Bootstrap itself documents; zeroing the * gutters instead would close the gaps between the cards. */ body.geodir-page .entry-content { padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5); box-sizing: border-box; } /* The archive template page is full width (migration 08), so GeoDirectory's * search bar and listing grid ran to the viewport edges while the title band * above them is capped at 1240px. Cap the archive's content column to the band * plus the gutter padding above, so their inner edges line up. Archives only: * a listing single keeps Divi's own container. Seen 2026-09-15. */ body.geodir-archive #main-content article.page > .entry-content { max-width: calc(1240px + var(--bs-gutter-x, 1.5rem)); margin-left: auto; margin-right: auto; } /* The band is printed at loop_start, straight into #main-content and outside * that padded column, so below 1264px its text touched the screen edge. Same * width as the column's content box at every size. */ body.geodir-archive #main-content > .ltsq-pluginband { width: calc(100% - var(--bs-gutter-x, 1.5rem)); max-width: 1240px; box-sizing: border-box; } /* Our own injected blocks already sit inside that padding, so they must not * double it. */ body.geodir-page .ltsq-pluginband, body.geodir-page .ltsq-pluginextra { padding-left: 0; padding-right: 0; } body.geodir-page h1.entry-title, body.geodir-page .geodir-archive-title h1 { font-family: var(--lts-font-display); font-size: var(--lts-fs-page-title); font-weight: 600; line-height: 1.1; color: var(--lts-ink); } /* The search row: two 46px square fields on the surface tint, matching the * design's own inputs rather than Bootstrap's rounded controls. */ body.geodir-page .geodir-search-container .form-control, body.geodir-page .geodir-search input[type="text"], body.geodir-page .geodir-search input[type="search"] { height: 46px; border-radius: 0; border: 1px solid var(--lts-border); background: var(--lts-surface); font-family: var(--lts-font-ui); font-size: var(--lts-fs-input); color: var(--lts-ink); box-shadow: none; } body.geodir-page .geodir-search .btn, body.geodir-page .geodir-search button[type="submit"] { height: 46px; border-radius: 0; background: var(--lts-directory); border-color: var(--lts-directory); font-family: var(--lts-font-ui); font-weight: 700; } body.geodir-page .geodir-post .card, body.geodir-page .geodir-post, body.geodir-page .geodir-loop-container .card { border-radius: 0; border-color: var(--lts-border); } body.geodir-page .geodir-entry-title, body.geodir-page .geodir-post .card-title { font-family: var(--lts-font-display); font-size: 22px; font-weight: 600; line-height: 1.25; } body.geodir-page .geodir-entry-title a, body.geodir-page .geodir-post .card-title a { color: var(--lts-ink) !important; text-decoration: none; } body.geodir-page .geodir-entry-title a:hover, body.geodir-page .geodir-post .card-title a:hover { color: var(--lts-directory) !important; } body.geodir-page .geodir-post .card-text, body.geodir-page .geodir-post p { font-family: var(--lts-font-ui); font-size: var(--lts-fs-excerpt); line-height: 1.6; color: var(--lts-text-dek); } /* GD's category badges and buttons pick up the green from --bs-secondary * above; this is only the shape. */ body.geodir-page .badge, body.geodir-page .btn { border-radius: 0; font-family: var(--lts-font-ui); font-weight: 700; } /* -------------------------------------------------------------------------- * GeoDirectory — archive: our filter row, and the card the tiers promise * * From the Claude Design handoff of 2026-09-17. The card itself is * CONFIGURATION, not CSS: db-migrations/17 sets GeoDirectory's archive-item * template page to show the address, phone, website and hours a listing sells, * and to switch off the "New" badge, the favourites heart and the author * avatar at source. Four display:none rules that used to hide those three are * gone with it — hiding another plugin's markup breaks silently the day they * rename a class, and it left the elements in the page for a screen reader. * * What is left here is shape and colour on markup GeoDirectory still owns. * ------------------------------------------------------------------------ */ /* * The search bar and the filter row read as one block. They are separate DOM * siblings — GeoDirectory's own search widget, then [ltsq_directory_filters] — * so the seam is made by halving the borders rather than by wrapping them, * which would mean overriding GD's widget markup. */ body.geodir-archive .geodir-search-container { padding: 16px; border: 1px solid var(--lts-border); border-bottom: 0; background: var(--lts-surface); } body.geodir-archive .geodir-search-container .geodir-search { margin-bottom: 0; } .ltsq-dirfilters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--lts-border); background: var(--lts-bg); } .ltsq-dirfilters__spacer { flex: 1 1 auto; } /* The same shape as the account view's filter chips, declared here because ltsq-account.css is enqueued by is_page() and /directory/ is an archive. */ .ltsq-dirchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 14px; border: 1px solid var(--lts-border); background: var(--lts-bg); font-family: var(--lts-font-ui); font-size: var(--lts-fs-meta); font-weight: 600; line-height: 1.2; color: var(--lts-text-muted); text-decoration: none; transition: var(--lts-transition); } .ltsq-dirchip:hover, .ltsq-dirchip:focus { border-color: var(--lts-teal); color: var(--lts-ink); } .ltsq-dirchip.is-current { background: var(--lts-ink); border-color: var(--lts-ink); color: #fff; } /* Full strength: faded to 75% it failed contrast on the unselected chips (#345). */ .ltsq-dirchip__count { font-weight: 700; } /* Grid | Map — one bordered group of two cells, the current one filled. */ .ltsq-dirview { display: flex; border: 1px solid var(--lts-border); } .ltsq-dirview__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; box-sizing: border-box; font-family: var(--lts-font-ui); font-size: var(--lts-fs-meta); font-weight: 600; color: var(--lts-text-muted); text-decoration: none; transition: var(--lts-transition); } .ltsq-dirview__item + .ltsq-dirview__item { border-left: 1px solid var(--lts-border); } .ltsq-dirview__item:hover { color: var(--lts-ink); } .ltsq-dirview__item.is-current { background: var(--lts-ink); color: #fff; } .ltsq-dirresults { margin: 20px 0 0; padding: 0; font-family: var(--lts-font-ui); font-size: var(--lts-fs-meta); font-weight: 700; color: var(--lts-text-muted); } .ltsq-dirmap { margin: 20px 0 0; } .ltsq-dirmap .geodir-map-wrap { border: 1px solid var(--lts-border); } /* The card --------------------------------------------------------------- * * GeoDirectory nests a .card inside a .card. The outer one carries the frame; * the inner one is zeroed rather than fought. */ body.geodir-page .geodir-post > .card { border: 1px solid var(--lts-border); border-top: var(--lts-stream-border-top) solid var(--lts-border); border-radius: var(--lts-radius); background: var(--lts-bg); } body.geodir-page .geodir-post > .card > .card { border: 0; border-radius: 0; } /* * A paid listing's top rule goes Directory green. The condition is the * "Featured" badge the archive-item template only prints for a paid tier, so * the cue and the disclosure cannot disagree: whichever way GeoDirectory * decides a listing is featured, both read the same answer. A free listing * keeps the hairline, which is the same grid-card cue the rest of the site uses. */ body.geodir-page .geodir-post:has(.gd-badge[data-badge="featured"]) > .card { border-top-color: var(--lts-directory); } body.geodir-page .geodir-post .card-body { padding: 18px !important; } /* * The field block. GeoDirectory lays the footer out as a justify-between flex * row with an empty
for every footer slot that is not in use, which is * right for two badges and wrong for four stacked fields. */ body.geodir-page .geodir-post .card-footer { padding: 0 18px 18px !important; border-top: 0; background: transparent; } body.geodir-page .geodir-post .card-footer > .d-flex { flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; gap: 7px; padding-top: 12px; border-top: 1px solid var(--lts-border); } body.geodir-page .geodir-post .card-footer > .d-flex > div:empty { display: none; } body.geodir-page .geodir-post .card-footer .geodir_post_meta { margin: 0; padding: 0; font-family: var(--lts-font-ui); font-size: 13.5px; line-height: 1.5; color: var(--lts-text-dek); } body.geodir-page .geodir-post .card-footer .geodir_post_meta_icon { margin-right: 6px; color: var(--lts-text-muted); } /* An address is schema markup with
s between its parts; on a card it is one line. */ body.geodir-page .geodir-post .card-footer .geodir-field-address br { display: none; } body.geodir-page .geodir-post .card-footer .geodir-field-address [itemprop] + [itemprop]::before { content: ", "; } body.geodir-page .geodir-post .card-footer a { color: var(--lts-teal-pressed); } /* * Business hours on a card: today's range, and the week behind GeoDirectory's * own dropdown. Its label is empty here (the footer asks for icon + value), but * GD still prints ": " for it, which lands on the card as a bare * colon. Zeroing the wrapper's font-size drops the colon and the empty element * while the icon keeps its own size. */ body.geodir-page .geodir-post .card-footer .geodir-i-business_hours { font-size: 0; } body.geodir-page .geodir-post .card-footer .geodir-i-business_hours i { font-size: 13.5px; } body.geodir-page .geodir-post .card-footer .dropdown-toggle::after { display: none; } body.geodir-page .geodir-post .card-footer .gd-bh-today-range { color: var(--lts-text-dek); } @media (max-width: 900px) { .ltsq-dirfilters__chips { padding: 12px; } .ltsq-dirview { width: 100%; } .ltsq-dirview__item { flex: 1; justify-content: center; } } /* -------------------------------------------------------------------------- * GeoDirectory — listing detail * * The map stays GeoDirectory's own. Its provider is already OpenStreetMap * (geodir_settings.maps_api = 'osm'), so it needs no API key, no commercial * script and no consent question — which is exactly the condition build spec §9 * set for shipping a map at all. Nothing new is loaded; it is squared off and * left alone. * ------------------------------------------------------------------------ */ body.single-gd_place .geodir-map-wrap, body.single-gd_place .geodir_map_container, body.single-gd_place .geodir-map-canvas { border-radius: 0; } body.single-gd_place .geodir-tabs-content .geodir-tab-head, body.single-gd_place .nav-tabs .nav-link { border-radius: 0; font-family: var(--lts-font-ui); font-weight: 600; } body.single-gd_place .nav-tabs .nav-link.active { color: var(--lts-directory); border-bottom: 3px solid var(--lts-directory); font-weight: 700; } /* -------------------------------------------------------------------------- * GeoDirectory — the listing single's layout * * From the Claude Design handoff of 2026-09-17. The listing was GeoDirectory's * tab strip; it is a page now, with a contact rail. The composition lives on * GeoDirectory's own details template page (db-migrations/17 step 4) because * our hook on this screen fires after the loop and cannot wrap anything. * ------------------------------------------------------------------------ */ .ltsq-listing { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; padding-top: 28px; border-top: var(--lts-rule-section); } .ltsq-listing__main { min-width: 0; } .ltsq-listing__rail { min-width: 0; display: flex; flex-direction: column; gap: var(--lts-space-4); } /* Doubled: Divi's .entry-content h2 is (0,1,1). */ .ltsq-listing__h2.ltsq-listing__h2 { margin: var(--lts-space-5) 0 var(--lts-space-3); padding: 0; font-family: var(--lts-font-display); font-size: 26px; font-weight: 600; color: var(--lts-ink); } /* The kicker under Divi's own title ------------------------------------- */ .ltsq-listingkicker.ltsq-listingkicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--lts-space-3); padding: 0; font-family: var(--lts-font-ui); font-size: var(--lts-fs-kicker); font-weight: 800; letter-spacing: var(--lts-ls-kicker); text-transform: uppercase; color: var(--lts-directory); } .ltsq-listingkicker__swatch { width: 8px; height: 8px; flex: none; background: var(--lts-directory); } /* Solid, because on this page it is the paid-placement disclosure itself and not a decoration. */ .ltsq-listingkicker__tag { padding: 4px 8px; background: var(--lts-directory); color: #fff; letter-spacing: var(--lts-ls-badge); } /* Opening hours ---------------------------------------------------------- */ .ltsq-hours { max-width: 520px; border: 1px solid var(--lts-border); } .ltsq-hours__row { display: flex; justify-content: space-between; gap: var(--lts-space-4); padding: 11px 16px; border-bottom: 1px solid var(--lts-border); font-family: var(--lts-font-ui); font-size: 14px; color: var(--lts-text-dek); } .ltsq-hours__row:last-child { border-bottom: 0; } .ltsq-hours__row--today { background: var(--lts-surface); font-weight: 700; color: var(--lts-directory); } .ltsq-hours__time { text-align: right; } /* The contact rail ------------------------------------------------------- */ .ltsq-contactpanel { border: 1px solid var(--lts-border); border-top: var(--lts-stream-border-top) solid var(--lts-directory); background: var(--lts-bg); } .ltsq-contactpanel__head.ltsq-contactpanel__head { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--lts-border); background: var(--lts-surface); font-family: var(--lts-font-ui); font-size: 12px; font-weight: 800; letter-spacing: var(--lts-ls-section-header); text-transform: uppercase; color: var(--lts-ink); } .ltsq-contactpanel__body { display: flex; flex-direction: column; gap: 14px; padding: 18px; } .ltsq-contactpanel__line.ltsq-contactpanel__line { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0; font-family: var(--lts-font-ui); font-size: var(--lts-fs-excerpt); line-height: 1.6; color: var(--lts-text-dek); } .ltsq-contactpanel__line .ltsq-icon { flex: none; margin-top: 3px; color: var(--lts-text-muted); } .ltsq-contactpanel__line a { color: var(--lts-teal-pressed); } .ltsq-contactpanel__state { color: var(--lts-text-muted); } .ltsq-contactpanel__state.is-open { color: var(--lts-directory); } .ltsq-contactpanel__go.ltsq-contactpanel__go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 4px; } .ltsq-panel--claim { border-left: var(--lts-stream-border-left) solid var(--lts-teal); background: var(--lts-surface); } /* GeoDirectory's own pieces inside this layout --------------------------- */ body.single-gd_place .ltsq-listing .geodir-map-wrap, body.single-gd_place .ltsq-listing .geodir_map_container { border: 1px solid var(--lts-border); } /* The post-content block carries GD's own meta wrapper; give it the article measure the rest of the site reads at. */ body.single-gd_place .ltsq-listing__main .geodir-field-post_content { max-width: var(--lts-measure-body); font-size: var(--lts-fs-body); line-height: var(--lts-lh-body); color: var(--lts-text-body); } @media (max-width: 980px) { .ltsq-listing { grid-template-columns: minmax(0, 1fr); gap: var(--lts-space-5); } /* The rail last: on a phone the listing itself comes before how to contact it, the same order the account view uses. */ .ltsq-listing__rail { order: 2; } .ltsq-listing__main { order: 1; } } /* -------------------------------------------------------------------------- * Forminator — the baseline * * Field names, ids and .forminator-* class names are untouched: three E2E * specs match on them, and the governance tests that prove a submission enters * review depend on the form still being the same form. This is shape and type * only. * ------------------------------------------------------------------------ */ .forminator-ui.forminator-custom-form input[type="text"], .forminator-ui.forminator-custom-form input[type="email"], .forminator-ui.forminator-custom-form input[type="url"], .forminator-ui.forminator-custom-form input[type="tel"], .forminator-ui.forminator-custom-form input[type="number"], .forminator-ui.forminator-custom-form input[type="date"], .forminator-ui.forminator-custom-form select, .forminator-ui.forminator-custom-form textarea { border-radius: 0 !important; border: 1px solid var(--lts-border) !important; background: var(--lts-surface) !important; font-family: var(--lts-font-ui) !important; font-size: var(--lts-fs-input) !important; color: var(--lts-ink) !important; } .forminator-ui.forminator-custom-form .forminator-label { font-family: var(--lts-font-ui) !important; font-size: var(--lts-fs-label) !important; font-weight: 700 !important; color: var(--lts-ink) !important; } .forminator-ui.forminator-custom-form .forminator-button-submit { border-radius: 0 !important; background: var(--lts-teal) !important; font-family: var(--lts-font-ui) !important; font-size: var(--lts-fs-button) !important; font-weight: 700 !important; } .forminator-ui.forminator-custom-form .forminator-button-submit:hover { background: var(--lts-teal-pressed) !important; } /* -------------------------------------------------------------------------- * Forminator — the dark variant, for the /app/ signup band * * The baseline above is written for a form on white: a --lts-surface fill and * a --lts-border hairline, both of which vanish on charcoal. The app page's * signup band (inc/app-beta.php, .ltsq-appsignup) is the only place on the * site where one of these forms sits on --lts-ink, so the override is scoped * to that container rather than to a modifier class the plugin would have to * be persuaded to emit. * * !important all the way down, and one class deeper than the baseline, for * the same reason the baseline needs it: Forminator ships its own stylesheet * and loses to nothing quietly. * ------------------------------------------------------------------------ */ .ltsq-appsignup .forminator-ui.forminator-custom-form input[type="text"], .ltsq-appsignup .forminator-ui.forminator-custom-form input[type="email"], .ltsq-appsignup .forminator-ui.forminator-custom-form input[type="url"], .ltsq-appsignup .forminator-ui.forminator-custom-form input[type="tel"], .ltsq-appsignup .forminator-ui.forminator-custom-form select, .ltsq-appsignup .forminator-ui.forminator-custom-form textarea { min-height: 46px !important; padding-left: 14px !important; padding-right: 14px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; color: #fff !important; } /* * NOT optional. The UA's default placeholder grey on this ground is about * 2:1, which is unreadable; .ltsq-masthead__search input::placeholder is the * existing precedent for the value. */ .ltsq-appsignup .forminator-ui.forminator-custom-form input::placeholder, .ltsq-appsignup .forminator-ui.forminator-custom-form textarea::placeholder { color: rgba(255, 255, 255, 0.6) !important; opacity: 1 !important; } .ltsq-appsignup .forminator-ui.forminator-custom-form .forminator-label { text-transform: uppercase !important; letter-spacing: 0.04em !important; color: rgba(255, 255, 255, 0.7) !important; } .ltsq-appsignup .forminator-ui.forminator-custom-form .forminator-button-submit { min-height: 46px !important; } /* * The global focus ring is a 2px teal outline, which all but disappears * against charcoal. The masthead search solves this by taking the footer's * link-hover mint instead; same answer here. */ .ltsq-appsignup .forminator-ui.forminator-custom-form input:focus-visible, .ltsq-appsignup .forminator-ui.forminator-custom-form textarea:focus-visible, .ltsq-appsignup .forminator-ui.forminator-custom-form button:focus-visible, .ltsq-appsignup a:focus-visible { outline: 2px solid var(--lts-footer-link-hover) !important; outline-offset: var(--lts-focus-offset) !important; } /* * Forminator's own validation and success messages, which arrive inside the * band after a submit. Left alone they render in the plugin's dark greens and * reds on charcoal. */ .ltsq-appsignup .forminator-ui.forminator-custom-form .forminator-response-message, .ltsq-appsignup .forminator-ui.forminator-custom-form .forminator-error-message { background: rgba(255, 255, 255, 0.08) !important; border-left: var(--lts-stream-border-left) solid var(--lts-footer-link-hover) !important; color: #fff !important; } /* The fallback sentence when no form id is mapped — a link on charcoal. */ .ltsq-appsignup .ltsq-app-cta__note { color: rgba(255, 255, 255, 0.82); } .ltsq-appsignup .ltsq-app-cta__note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- * Our own furniture, injected through the plugins' documented hooks * (see inc/plugin-surfaces.php). Not plugin markup, so no plugin selectors. * ------------------------------------------------------------------------ */ /* * TEC SHIPS A BLANKET ELEMENT RESET AND IT EATS OUR MARKUP. * * common-skeleton.css carries a rule listing forty-odd element selectors — * `.tribe-common a, .tribe-common abbr, .tribe-common acronym, …` — that zeroes * padding, margin and background on everything inside the `.tribe-common` * wrapper. At (0,1,1) it beats `.ltsq-btn` (0,1,0), so our own components * injected through TEC's hooks came out as unpadded, transparent text: the * "Submit an event" button rendered as 14px of white-on-white. * * No custom property reaches this — it is a reset, not a themeable value. So * the components are re-asserted at (0,2,0), which beats it on class count. * This block is the price of putting our markup inside their container, and it * is still cheaper than a template override. */ .tribe-common .ltsq-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 18px; font-family: var(--lts-font-ui); font-size: var(--lts-fs-button); font-weight: 700; line-height: 1.3; text-decoration: none; } .tribe-common .ltsq-btn--stream { background: var(--lts-stream); color: var(--lts-on-stream) !important; } .tribe-common .ltsq-btn--secondary { background: transparent; border: 1px solid var(--lts-border); color: var(--lts-ink) !important; } .tribe-common .ltsq-panel { background: var(--lts-surface); border-left: var(--lts-stream-border-left) solid var(--lts-stream); padding: var(--lts-space-3) var(--lts-space-4); } .tribe-common .ltsq-panel__title { margin: 0 0 var(--lts-space-2); font-family: var(--lts-font-ui); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--lts-ink); } .tribe-common .ltsq-panel__body { margin: 0; font-family: var(--lts-font-ui); font-size: var(--lts-fs-excerpt); line-height: 1.65; color: var(--lts-text-dek); } .ltsq-pluginband { max-width: var(--lts-maxw); margin: 0 auto; padding: var(--lts-space-5) 0 var(--lts-space-4); border-bottom: var(--lts-rule-section); } .ltsq-pluginband__kicker { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--lts-font-ui); font-size: var(--lts-fs-kicker); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--lts-stream-text); } .ltsq-pluginband__swatch { width: 8px; height: 8px; flex: none; background: var(--lts-stream); } .ltsq-pluginband__title { margin: 10px 0 0; font-family: var(--lts-font-display); font-size: var(--lts-fs-page-title); font-weight: 600; line-height: 1.1; color: var(--lts-ink); } .ltsq-pluginband__dek { margin: 10px 0 0; max-width: 64ch; font-family: var(--lts-font-ui); font-size: 16px; line-height: 1.6; color: var(--lts-text-dek); } .ltsq-pluginband__actions { margin-top: var(--lts-space-3); display: flex; gap: 10px; flex-wrap: wrap; } /* The additions on the two single screens. */ .ltsq-pluginextra { max-width: var(--lts-maxw); margin: var(--lts-space-4) auto 0; display: flex; gap: var(--lts-space-3); flex-wrap: wrap; } .ltsq-pluginextra .ltsq-panel { flex: 1 1 280px; } /* The single event's "Other dates" list (issue #183). Divi's `.et-l--body ul` forces discs and a 1em indent at 0,1,1, so the reset needs !important. */ .ltsq-eventdates { list-style: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--lts-font-ui); font-size: var(--lts-fs-excerpt); line-height: 1.8; } .ltsq-eventdates__item { list-style: none !important; margin: 0; padding: 0; } .ltsq-eventdates__item.is-past, .ltsq-eventdates__item.is-past a { color: var(--lts-text-muted); } /* An owner's panel with an edit waiting takes the amber the rest of the site uses for "someone has to look at this" — the same cue as the held row in Listings & ads, so the two read as one state. */ .ltsq-pluginextra .ltsq-panel--held { border-left-color: var(--lts-notice); } /* * The Events archive's ad slot had no flex basis, so it shrank to its label * (~90px) beside a stretched, mostly empty panel (review §5.1, screen 08). A * fixed 300px slot, top-aligned, with the padding TEC's reset strips. Scoped * with :has() so the single event and listing extras, which hold panels only, * keep equal-height panels. */ .ltsq-pluginextra:has(.ltsq-adslot) { align-items: flex-start; } .ltsq-pluginextra .ltsq-adslot { flex: 0 0 300px; max-width: 100%; box-sizing: border-box; } .tribe-common .ltsq-adslot { padding: var(--lts-space-3); border: 1px solid var(--lts-border); background: var(--lts-surface); } @media (max-width: 980px) { /* The single event's 44px title had no step down at 390 (review §5.2). */ .tribe-events-single .tribe-events-single-event-title, .single-tribe_events .tribe-events-single-event-title { font-size: 30px; } /* * TEC's grid gutter is 48px, and its rows pull their children out by half * of it — `margin: 0 -21px` on each event. At 390px that put the event row * two pixels past the viewport and the WHOLE PAGE scrolled sideways. * * Same shape as GeoDirectory's Bootstrap rows in phase 10, and fixed the * same way: through the plugin's own variable rather than by zeroing its * margins, so the row keeps its internal spacing and only the gutter * narrows. A 48px gutter on a phone was never going to be right anyway. */ .tribe-common, .tribe-events { --tec-grid-gutter: 24px; --tec-grid-gutter-half: 12px; /* * These four are the ones that actually matter, and the names are not * guessable — found by asking the browser which rule was winning rather * than by reading TEC's source. `.tribe-common-g-row--gutters` pulls its * children out by `--tec-grid-gutter-small-half-negative`, which is * -21px, and the columns pad back in by the positive half. * * Zeroed rather than narrowed: at 390px the grid is one column, so the * pull-out and the pad-back cancel to nothing useful and only ever * overshoot the viewport. */ --tec-grid-gutter-small: 0px; --tec-grid-gutter-small-half: 0px; --tec-grid-gutter-small-half-negative: 0px; --tec-grid-gutter-negative: 0px; } } @media (max-width: 900px) { .ltsq-pluginband__title { font-size: 30px; } /* A listing single's own title (GeoDirectory's h1.entry-title) steps down with the band. */ body.geodir-page h1.entry-title, body.geodir-page .geodir-archive-title h1 { font-size: 30px; } /* * A gutter. These two blocks are injected into the plugins' own containers, * and on the GeoDirectory archive that container has no horizontal padding * of its own — so the band's text ran flush to both screen edges. Our own * pages never showed it because their Divi rows supply the gutter. */ .ltsq-pluginband, .ltsq-pluginextra { padding-left: var(--lts-space-3); padding-right: var(--lts-space-3); box-sizing: border-box; } .ltsq-pluginband .ltsq-btn, .ltsq-pluginextra .ltsq-btn, .tribe-common .ltsq-btn { min-height: 44px; } .tribe-common .tribe-events-calendar-list__event-date-tag { width: 60px !important; flex: 0 0 60px !important; max-width: 60px; min-width: 60px !important; } .tribe-events .tribe-events-c-view-selector__list-item-link { min-height: 44px; } body.geodir-page .geodir-search .btn, body.geodir-page .geodir-search button[type="submit"] { min-height: 44px; } } /* -------------------------------------------------------------------------- * WooCommerce — the two ad products (backlog/41) * * inc/monetization.php removes the placeholder image, so the summary no longer * shares a row with it. Let it take a readable measure instead of WooCommerce's * 48% column. * ------------------------------------------------------------------------ */ .single-product div.product.product-type-advanced_ad div.summary { float: none; width: 100%; max-width: 720px; } /* Selling Ads prints its price options as radios inside a bulleted list, so * each option carried a bullet and a radio. Plain rows instead, with room to * tap on a phone. The ID selector is there because Selling Ads styles that list * by its ID. */ .single-product div.product.product-type-advanced_ad form.cart ul, .single-product div.product.product-type-advanced_ad form.cart ul#advads-selling-option-ad-price { list-style: none; margin: 12px 0 20px; padding-left: 0; } .single-product div.product.product-type-advanced_ad form.cart ul li { margin: 0; padding: 6px 0; } .single-product div.product.product-type-advanced_ad form.cart ul label { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-family: var(--lts-font-ui); font-size: 16px; } .single-product div.product.product-type-advanced_ad .woocommerce-product-details__short-description { margin: 12px 0 8px; } /* * The "New" badge, the favourites heart, the author avatar and the empty * rating footer were hidden here from 2026-09-16, on the belief that * GeoDirectory's card block ignored its own template parameters. It does not: * proved 2026-09-17 by flipping one on the archive-item page and watching every * card change. They are switched off at source by db-migrations/17 now, so the * markup is not in the page at all rather than hidden from sight but not from a * screen reader. Reviews, ratings and favourites are also off in GeoDirectory's * own settings (db-migrations/15). */ /* -------------------------------------------------------------------------- * MailPoet — the daily digest signup (backlog/48 decision D7) * * MailPoet's own form (db-migrations/26), placed by ltsq_digest_signup_html() * in the footer and on /submit/. MailPoet prints a