/* Listings (archives 551, 3529, 526, 7121 and their loop cards): fixes from the Oct. 8, 2026 template design audit, batch 2 (OTX audit/02-design/2026-10-08-template-design-audit.md). Each rule names its finding ID. */ /* This file loads before Elementor's generated CSS (post-.css, and the loop CSS printed in the body), so a rule with the same specificity as Elementor's loses. Every selector below carries one class more than Elementor's own (.e-con or .elementor-widget); none needs !important. Batch 1 rules for the same cards (LST-01, LST-03 and LST-05) stay in fixes-chrome.css. */ /* ========================================================================== Archive heroes (551 Find a Provider, 526 Resources, 3529 Physical Therapists, 7121 News) ========================================================================== */ /* LST-09: the hero containers have 0 px side padding, so on phones the Find a Provider intro ran from edge to edge (0-390 px). The other three heroes share the structure (their intros are empty today, but the H1 sits in the same box). 20 px a side on phones only; at 768 px and up the intro is 650 px wide and centered, as approved. */ @media (max-width: 767px) { .elementor-551 .elementor-element.elementor-element-4762ea4.e-con, .elementor-526 .elementor-element.elementor-element-9c241d5.e-con, .elementor-3529 .elementor-element.elementor-element-81170f2.e-con, .elementor-7121 .elementor-element.elementor-element-66833a97.e-con { --padding-left: 20px; --padding-right: 20px; } } /* ========================================================================== Filter bars ========================================================================== */ /* LST-07: on News (and its 15 topics, same template) and Resources the filter widget sat in a row beside "Filter by:" at about 470-500 px wide, so the Filter button wrapped to a second row and the label floated between the two rows. 700 px fits the search field, the dropdown and the button on one line (the audit's tested value). Scoped to these two widget IDs: an unscoped .elementor-widget-otx-archive-filter rule adds about 650 px of white to the directories. max-width keeps it inside the row from 1024 px down; on phones the container is a column and the widget stays full width, as before. */ .elementor-7121 .elementor-element.elementor-element-15877bca.elementor-widget, .elementor-526 .elementor-element.elementor-element-otxaf01.elementor-widget { --container-widget-width: 700px; --container-widget-flex-grow: 0; width: 700px; max-width: 100%; flex-grow: 0; flex-shrink: 1; } /* LST-07: below about 800 px the 700 px widget fills the row, and "Filter by:" (5501bfa4 on News, d055347 on Resources) shrank and broke onto two lines. The label keeps its width; the widget gives way instead. */ .elementor-7121 .elementor-element.elementor-element-5501bfa4.elementor-widget, .elementor-526 .elementor-element.elementor-element-d055347.elementor-widget { flex-shrink: 0; } /* LST-10: on the two directories the filter row (45-1395 px at 1440) was wider than the card grid below it (75-1365). The grid's container is Elementor's default 10 px side padding outside and the theme's .container-padding 30 px inside; giving the filter bar the same pair (it had 30 px outside, 0 inside) puts both on the same edges at every width (75-1365 at 1440, 40-350 at 390), not only where the boxed width applies. */ .elementor-551 .elementor-element.elementor-element-5b6eb29.e-con, .elementor-3529 .elementor-element.elementor-element-407da40.e-con { --padding-left: 10px; --padding-right: 10px; } .elementor-551 .elementor-element.elementor-element-5b6eb29.e-con > .e-con-inner, .elementor-3529 .elementor-element.elementor-element-407da40.e-con > .e-con-inner { padding-left: 30px; padding-right: 30px; } /* LST-10: with the filter bar on the grid's edges it is 20 px narrower, so the Filter button dropped to a second row up to 798 px (up to 778 px before). In that band the search field and the two dropdowns start from 180 px instead of pillar.css's 200 px. They still grow to share the row equally, so where they already fit nothing moves; the button now stays on the row from 768 px up. Phones (767 px and below) are unchanged. */ @media (min-width: 768px) and (max-width: 800px) { .elementor-551 .elementor-element.elementor-element-otxaf1292 .otx-af select, .elementor-551 .elementor-element.elementor-element-otxaf1292 .otx-af input[type=search], .elementor-3529 .elementor-element.elementor-element-otxaf6254 .otx-af select, .elementor-3529 .elementor-element.elementor-element-otxaf6254 .otx-af input[type=search] { flex-basis: 180px; } } /* LST-R2: the space from the filter fields to the first card was 140 px on Find a Provider and News, 100 on Physical Therapists and 80 on Resources. Every filter bar now ends with 40 px (Physical Therapists' 407da40 had 0) and every card grid starts with 100 px (Resources' 707b83b had 40; the other three get 100 from the theme's .container-padding), so all four read 140 px, the value Find a Provider, News and the 15 topic pages already had. */ .elementor-3529 .elementor-element.elementor-element-407da40.e-con { --padding-bottom: 40px; } .elementor-526 .elementor-element.elementor-element-707b83b.e-con { --padding-top: 100px; } /* ========================================================================== Find a Physician above the fold (551; Blake, Oct. 29, 2026, with tools/staged/z-oct29-providers-intro.php) ========================================================================== */ /* The intro was 100 px above and 85 below one centered column, and the pill sat 100 px under the filters, so at 1440 x 900 no card showed. The script splits the copy (56e47b9 the bold lead, otxi551b the rest) and moves the pill (otxb551a) into the intro. From 1024 px the intro is two columns: the H1, the lead and the pill on the left, the paragraphs on the right. Below 1024 px it stays one centered column (H1, lead, pill, paragraphs), only shorter. The filters now end 32 px above the cards (was 140, LST-R2). */ .elementor-551 .elementor-element.elementor-element-4762ea4.e-con { --padding-top: 48px; --padding-bottom: 32px; } .elementor-551 .elementor-element.elementor-element-otxi551b.elementor-widget { width: 650px; max-width: 100%; align-self: center; text-align: center; } .elementor-551 .elementor-element.elementor-element-4762ea4 .elementor-element.otx-sched-banner.elementor-widget { margin: 0 0 20px; } .elementor-551 .elementor-element.elementor-element-5b6eb29.e-con { --padding-bottom: 16px; } body .elementor-551 .elementor-element.elementor-element-3062110.container-padding > .e-con-inner { padding-top: 16px; } @media (min-width: 1024px) { .elementor-551 .elementor-element.elementor-element-4762ea4.e-con { --padding-top: 56px; --padding-bottom: 40px; } .elementor-551 .elementor-element.elementor-element-4762ea4.e-con > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; max-width: 1140px; padding-left: 40px; padding-right: 40px; } .elementor-551 .elementor-element.elementor-element-4762ea4 > .e-con-inner > .elementor-element { width: auto; max-width: none; margin: 0; text-align: left; } .elementor-551 .elementor-element.elementor-element-cbab648 .elementor-heading-title { text-align: left; } .elementor-551 .elementor-element.elementor-element-cbab648.elementor-widget { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 12px; } .elementor-551 .elementor-element.elementor-element-56e47b9.elementor-widget { grid-column: 1; grid-row: 2; } .elementor-551 .elementor-element.elementor-element-56e47b9 p:last-child, .elementor-551 .elementor-element.elementor-element-otxi551b p:last-child { margin-bottom: 0; } .elementor-551 .elementor-element.elementor-element-4762ea4 .elementor-element.otx-sched-banner.elementor-widget { grid-column: 1; grid-row: 3; align-self: start; margin-top: 20px; } .elementor-551 .elementor-element.elementor-element-otxi551b.elementor-widget { grid-column: 2; grid-row: 1 / span 3; align-self: center; } } /* ========================================================================== Card titles (provider card 556, resource card 392, news card 1506) ========================================================================== */ /* LST-R4 (with tools/staged/r-listing-headings.php): the three card titles move from H6 to H3, so the outline under the page H1 no longer jumps to H6 (117 H6s on Find a Provider). The kit sizes H6 at 24 px (18 px at 1024 and below) and H3 at 22 px at every width, so the size is pinned here to the H6 values; nothing else the kit sets differs (color is the text color for both, and each widget sets its own family and weight). Tag-free selectors, so the cards look the same before and after the tag changes. */ .elementor-556 .elementor-element.elementor-element-1b88966.elementor-widget .elementor-heading-title, .elementor-392 .elementor-element.elementor-element-b5007a9.elementor-widget .elementor-heading-title, .elementor-1506 .elementor-element.elementor-element-a64facc.elementor-widget .elementor-heading-title { font-size: 24px; } @media (max-width: 1024px) { .elementor-556 .elementor-element.elementor-element-1b88966.elementor-widget .elementor-heading-title, .elementor-392 .elementor-element.elementor-element-b5007a9.elementor-widget .elementor-heading-title, .elementor-1506 .elementor-element.elementor-element-a64facc.elementor-widget .elementor-heading-title { font-size: 18px; } } /* LST-13: card titles were set solid (Elementor's heading line-height of 1), so two-line titles touched, and the news title's weight 500 has no Gibson file (Gibson Medium is not registered, LST-R3) and rendered as Regular, the same as the summary under it. 1.25 line height on all three titles; 600 on the news title, the weight the provider and resource titles already render at. The news card also shows on Home. */ .elementor-556 .elementor-element.elementor-element-1b88966.elementor-widget .elementor-heading-title, .elementor-392 .elementor-element.elementor-element-b5007a9.elementor-widget .elementor-heading-title, .elementor-1506 .elementor-element.elementor-element-a64facc.elementor-widget .elementor-heading-title { line-height: 1.25; } .elementor-1506 .elementor-element.elementor-element-a64facc.elementor-widget .elementor-heading-title { font-weight: 600; } /* LST-04: provider card 556 sets the name (1b88966) and the credentials (62af489) side by side in 196290f. On desktop the row does not wrap, so Garin Tranberg's long credentials split into a second column beside his name; below 1025 px the credentials sat 3-5 px below the name's baseline (a hand-set top:-2px on 62af489 that only matched at 1440). The row now wraps, so long credentials move under the name as one piece (flex-shrink 0, still capped at the card width by Elementor's max-width:100%), and the two share a baseline at every width. */ .elementor-556 .elementor-element.elementor-element-196290f.e-con { --flex-wrap: wrap; flex-wrap: wrap; --align-items: baseline; align-items: baseline; } .elementor-556 .elementor-element.elementor-element-196290f.e-con > .elementor-element.elementor-element-62af489 { top: 0; flex-shrink: 0; } /* ========================================================================== Batch 3 (Blake's Oct. 9 rulings on discovery/2026-10-09-design-decisions.md) ========================================================================== */ /* A6, LST-12: one resource card in 74 (462, Joint Replacement FAQs) printed its resources_tag term, "Total Joint Replacement", as an unstyled label (OTX Terms widget ea1c5b5 on card 392). It pushed that card's title 57 px below its neighbors' and read as a mistake. The label is hidden on resource cards; the tag itself (term 21, kept by Blake on Oct. 8 under B-5) and its archive stay. One class more than Elementor's own selector for the widget (0,5,0). */ .elementor-392.e-loop-item .elementor-element.elementor-element-ea1c5b5.elementor-widget-otx-terms { display: none; } /* ========================================================================== Daniel's feedback (Oct. 12, 2026; discovery/2026-10-12-daniel-feedback.md) ========================================================================== */ /* Item 17: Find a Provider (551) shows Search by name, Treatment Area and Location; the Specialty Service dropdown is off. A service chosen elsewhere (a pillar's "Find a Specialist" button, item 18, opens /providers/?service=) is carried in a hidden field and named on a line under the bar, "Specialty Service: Sports Medicine Remove" (class-otx-archive-filter.php, pinned_html()). It reads like the result count under it (15 px), in the ink color with the value bold, and Remove looks like "Clear filters". Only the physician directory gets the line (the providers context); the other archives behave as before. */ .otx-pillar .otx-af-pinned{font-size:15px;line-height:1.4;color:var(--ink);margin:12px 0 4px} .otx-pillar .otx-af-pinned strong{font-weight:600} .otx-pillar .otx-af-unpin{margin-left:6px;font-weight:600;color:var(--blue);text-decoration:underline}