/* * Company Directory */ .dir-header__inner, .dir-body { width: 1240px; max-width: calc(100vw - var(--spacer_width) * 2); margin: 0 auto; } /* — Header — */ .dir-header { background: linear-gradient(to bottom, var(--blue-25), var(--white)); padding: 24px 0; } .dir-header .breadcrumbs1 { margin-bottom: 24px; } .dir-header__inner { display: flex; flex-direction: column; align-items: stretch; } .dir-header__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; } .dir-header__text { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; flex: 1; } .dir-header__tags { display: flex; flex-wrap: wrap; gap: 8px; } .dir-header__title { color: var(--grey-800); } .dir-header__subtitle { color: var(--grey-800); } .dir-header__buttons { align-self: flex-end; display: flex; flex-direction: column; gap: 8px; width: 256px; flex-shrink: 0; } .dir-header__buttons .button3 { width: 100%; justify-content: center; } /* * -- Breadcrumbs dropdown (trail menu overlay) -- * * The trail-menu overlay the template passes into ax_breadcrumbs_component(); * app.js detaches it to on init, so selectors stay root-level. */ .dir-breadcrumbs-dropdown { position: absolute; top: 100%; left: 0; padding-top: 14px; margin: 0; display: none; } .dir-breadcrumbs-dropdown[data-state="open"] { display: block; } .dir-breadcrumbs-dropdown__background { width: min-content; min-width: calc(375px - (var(--spacer_width) * 2)); border-radius: 8px; border: 0.5px solid var(--grey-100); background: #FFF; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.10); overflow: hidden /* cut off mobile back background */; } .dir-breadcrumbs-dropdown__padding { --dir-breadcrumbs-dropdown-padding: 24px; display: flex; padding: var(--dir-breadcrumbs-dropdown-padding); flex-direction: column; align-items: stretch; max-width: 100%; box-sizing: border-box; } .dir-breadcrumbs-dropdown__back { padding: 10px 20px; background: var(--grey-50); } .dir-breadcrumbs-dropdown:not([data-hover="false"]) .dir-breadcrumbs-dropdown__back { display: none; } .dir-breadcrumbs-dropdown__back a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; box-shadow: none; } .dir-breadcrumbs-dropdown__back svg { width: 20px; height: 20px; fill: #08349B; } .dir-breadcrumbs-dropdown__back span { color: #08349B; box-shadow: 0 1px 0 0 #08349B; } .dir-breadcrumbs-dropdown__divider { height: 0.5px; opacity: 0.2; background: #31353F; margin: 16px 0 !important /* Work around existing `body > :not(.root1) div` margin */; } .dir-breadcrumbs-dropdown__list + .dir-breadcrumbs-dropdown__divider { margin-top: 8px; } .dir-breadcrumbs-dropdown__list-heading { text-transform: uppercase; } .dir-breadcrumbs-dropdown__list { list-style: none; padding: 0; margin: 0 0 -8px; } .dir-breadcrumbs-dropdown__list-item-row { margin: 0 calc(-1 * var(--dir-breadcrumbs-dropdown-padding)); padding: 8px var(--dir-breadcrumbs-dropdown-padding); display: flex; align-items: center; align-self: stretch; box-shadow: none; } .dir-breadcrumbs-dropdown__list-item--active a { background: #EFF6FF; } .dir-breadcrumbs-dropdown__list-item a:hover .dir-breadcrumbs-dropdown__list-item-label { box-shadow: 0 1px 0 0 var(--anchor_box_shadow_color_hover); } .dir-breadcrumbs-dropdown__list-item svg { display: block; width: 14px; height: 14px; margin-right: 8px; } .dir-breadcrumbs-dropdown__list-item-label { color: var(--brand-primary); text-decoration: none; margin-right: 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dir-breadcrumbs-dropdown__list-item-value { color: #31353F; opacity: 0.6; } /* * Company Directory breakpoints _would_ be (min-width: 1023px) and (max-width: 719px), * but our .m-* and .t-* font classes use Concordia breakpoints. */ @media screen and (max-width: 767px) { .dir-breadcrumbs-dropdown { left: var(--spacer_width) !important /* left is set by JS */; right: var(--spacer_width); padding-top: 10px; } .dir-breadcrumbs-dropdown__background { width: auto; min-width: 0; } .dir-breadcrumbs-dropdown__padding { --dir-breadcrumbs-dropdown-padding: 16px; } } /* — Two-column body — */ .dir-body { display: grid; grid-template-columns: 302px minmax(0, 1fr); gap: 16px; margin: 24px auto var(--spacer4); } .dir-body .pagination1 { margin: 20px 0 24px; } /* — Sidebar — */ .dir-sidebar__nav { position: sticky; padding: 24px 16px 24px 0; margin-top: -27px; top: calc(var(--wp-admin-bar-height) + var(--scroll_offset_top)); max-height: calc(100dvh - var(--wp-admin-bar-height) - var(--scroll_offset_top)); overflow: auto; display: flex; flex-direction: column; gap: 16px; } .dir-sidebar__menu { display: flex; flex-direction: column; gap: 8px; } .dir-sidebar__menu-heading { color: var(--grey-500); text-transform: uppercase; } .dir-sidebar__menu-items { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; } .dir-sidebar__divider { margin: 2px 0; border: 0; border-top: 1px solid var(--border-02); } /* — Home: company-type chip cloud — */ .dir-type-cloud { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .dir-type-cloud__title { margin: 0; color: var(--grey-800); } .dir-type-cloud__chips { display: flex; flex-wrap: wrap; gap: 8px; } .dir-featured-title { margin: 0; color: var(--grey-800); scroll-margin-top: var(--scroll_offset_top_margin); } .dir-featured-title + .dir-tiles { margin-top: 8px; } /* — Results toolbar — */ .dir-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 0; color: var(--grey-500); scroll-margin-top: var(--scroll_offset_top_margin); } .dir-toolbar__count, .dir-toolbar__sort { margin: 0; } .dir-toolbar__sort { display: flex; align-items: center; gap: 4px; } .dir-toolbar__sort svg { fill: currentColor; } /* — Company tiles — */ .dir-tiles { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } /* — Shared panel wrapping the Filters and FAQ accordions — */ .dir-card { background: var(--white); border: 1px solid var(--border-02); border-radius: 16px; padding: 8px 24px; } .dir-card--dotted { border-style: dotted; } /* — FAQ and Related Directories sections — */ .dir-section-divider { margin: 16px 0; border: 0; border-top: 1px solid var(--border-02); } .dir-section { scroll-margin-top: var(--scroll_offset_top_margin); } .dir-section__header { display: flex; align-items: center; gap: 16px; margin: 20px 0 16px; } .dir-section__title { margin: 0; color: var(--grey-800); } .dir-section__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dir-filters { margin-bottom: 16px; } .dir-filters .directory-card1 { margin-bottom: 0; } /* — Tablet: sidebar drops, single column — */ @media screen and (max-width: 1279px) { .dir-body { display: block; } .dir-sidebar { display: none; padding: 0; } } /* — Mobile: header stacks, buttons go full width — */ @media screen and (max-width: 767px) { .dir-header__inner, .dir-body { max-width: calc(100vw - 24px * 2); } .dir-header__row { flex-direction: column; align-items: stretch; gap: 32px; } .dir-header__buttons { width: 100%; } .dir-section__cards { grid-template-columns: minmax(0, 1fr); } .dir-card { padding: 4px 16px; } }