/* ===== OUTER WRAPPER ===== */
.directory {
background: transparent;
}
/* ===== NAVIGATION ===== */
.directory-nav {
background-color: #EFECE3;
padding: 30px 0;
}
.directory-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.directory-nav-cta {
display: inline-flex;
align-items: center;
padding: 8px 20px;
border-radius: 20px;
background: var(--Black, #000);
color: var(--White, #FFF);
font-family: Arboria;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s;
}
.directory-nav-cta:hover {
opacity: 0.8;
color: #fff;
}
.dir-nav-pills {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.dir-nav-pill {
color: var(--Black, #000);
text-align: center;
font-family: Arboria;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: 20px;
background: var(--White, #FFF);
display: flex;
min-width: 100px;
padding: 8px 16px;
font-size: 16px;
justify-content: center;
align-items: center;
gap: 10px;
border: none;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.dir-nav-pill:hover {
background: #CB3727;
color: white;
}
.dir-nav-pill.active {
background: var(--Black, #000);
color: white;
}
/* ===== SECTION BASE ===== */
.directory-section {
overflow: hidden;
}
.directory-slider-content {
padding: 75px 0;
min-height: 0;
}
.directory-slider-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
margin-bottom: 50px;
padding-left: 100px;
width: 100%;
}
.directory-slider-header-left {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 600px;
}
.directory-slider-header-right {
flex-shrink: 0;
padding-top: 8px;
}
.directory-slider-title {
color: var(--White, #FFF);
font-family: Arboria;
font-size: 48px;
font-weight: 700;
line-height: 52px;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.directory-slider-description {
color: var(--White, #FFF);
font-family: Arboria;
font-size: 21px;
font-style: normal;
font-weight: 400;
line-height: 32px;
/* 152.381% */
}
.directory-section-cta {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 999px;
background: var(--White, #FFF);
color: var(--Black, #000);
font-family: Arboria;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: opacity 0.2s;
}
.directory-section-cta:hover {
opacity: 0.85;
color: #000;
}
/* ===== RED SECTION ===== */
.directory-section--red {
background: var(--Primary-Red, #CB3727);
background-image: url('data:image/svg+xml,');
background-repeat: repeat-y;
background-position: right top;
background-size: 37rem auto;
background-attachment: local;
overflow: hidden;
}
/* ===== BLACK SECTION ===== */
.directory-section--black {
background: #000;
/* TODO: replace none with the encoded SVG data URI, positioned left top */
background-image: url('data:image/svg+xml,');
background-repeat: repeat-y;
background-position: left top;
background-size: 37rem auto;
background-attachment: local;
overflow: hidden;
}
/* ===== CREAM SECTION ===== */
.directory-section--cream {
background: var(--Light-cream, #EFECE3);
overflow: hidden;
}
/* Cream section — override white text/icons to black */
.directory-section--cream .directory-slider-title {
color: var(--Black, #000);
}
.directory-section--cream .mixed-card-slide-text {
border-bottom-color: #000;
}
.directory-section--cream .mixed-card-slide-text .date,
.directory-section--cream .mixed-card-slide-text .title {
color: var(--Black, #000);
}
.directory-section--cream .directory-slider-title,
.directory-section--cream .directory-slider-description {
color: var(--Black, #000);
}
.directory-section--cream .directory-section-cta {
background: var(--Black, #000);
color: var(--White, #FFF);
}
.directory-section--cream .directory-section-cta:hover {
color: #fff;
}
.directory-section--cream .post-type-indicator {
border-color: #000;
}
.directory-section--cream .post-type-indicator>div:first-child {
border-right-color: #000;
}
.directory-section--cream .post-type-indicator>div {
color: var(--Black, #000);
}
.directory-section--cream .link-icon svg path {
fill: #000;
}
.directory-section--cream .directory-splide .splide__arrow svg {
fill: #000;
}
.directory-section--cream .directory-splide .my-slider-progress {
background: rgba(0, 0, 0, 0.15);
}
.directory-section--cream .my-slider-progress-bar {
background: #000;
}
/* ===== CAROUSEL ===== */
.directory-splide {
width: 100%;
position: relative;
}
.directory-splide .splide__pagination {
display: none;
}
.directory-splide .splide__slide {
width: 380px;
transition: width 0.3s ease;
display: flex;
flex-direction: column;
}
.directory-splide .splide__arrow {
background-color: transparent;
height: 100%;
z-index: 4;
width: 4%;
border-radius: 0 !important;
}
.directory-splide .splide__arrow--next {
right: 0 !important;
}
.directory-splide .splide__arrow--prev {
left: 0 !important;
}
.directory-splide .splide__arrow svg {
fill: white;
}
/* Gradient overlays — red sections */
.directory-section--red .directory-splide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: linear-gradient(to right, rgba(203, 55, 39, 0.6), transparent);
z-index: 2;
pointer-events: none;
}
.directory-section--red .directory-splide::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 100%;
background: linear-gradient(to left, rgba(203, 55, 39, 0.6), transparent);
z-index: 2;
pointer-events: none;
}
/* Gradient overlays — cream sections */
.directory-section--cream .directory-splide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: linear-gradient(to right, rgba(239, 236, 227, 0.8), transparent);
z-index: 2;
pointer-events: none;
}
.directory-section--cream .directory-splide::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 100%;
background: linear-gradient(to left, rgba(239, 236, 227, 0.8), transparent);
z-index: 2;
pointer-events: none;
}
/* Gradient overlays — black sections */
.directory-section--black .directory-splide::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
z-index: 2;
pointer-events: none;
}
.directory-section--black .directory-splide::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
z-index: 2;
pointer-events: none;
}
/* ===== PROGRESS BAR ===== */
.directory-splide .my-slider-progress {
background: #353535;
margin-top: 45px;
cursor: pointer;
user-select: none;
}
.my-slider-progress-bar {
background: white;
height: 2px;
transition: width 400ms ease;
width: 0;
}
/* ===== STATIC (no-carousel) row — bypasses Splide HTML entirely ===== */
.dir-static-row {
display: flex;
gap: 21px;
padding-left: 100px;
align-items: flex-start;
width: 100%;
}
.dir-static-row .splide__slide {
width: 380px;
flex-shrink: 0;
display: flex;
flex-direction: column;
list-style: none;
}
.dir-static-row .card-slide-content {
height: auto;
}
@media (max-width: 900px) {
.dir-static-row {
padding-left: 0;
}
}
/* ===== CARD STYLES ===== */
.card-slide-content {
max-width: 480px;
height: 100%;
display: flex;
flex-direction: column;
}
.directory-section .mixed-card-slide-text {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
padding: 15px 0 !important;
border-bottom: 1px solid #fff;
flex-grow: 1;
}
.mixed-card-slide-text .date {
color: var(--White, #FFF);
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 30px;
}
.mixed-card-slide-text .title {
color: var(--White, #FFF);
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
max-width: 90%;
}
.mixed-card-slide-text .title p {
margin: 0;
padding: 0;
}
.short-location {
margin-top: 4px;
color: var(--White, #FFF);
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 18px;
/* 100% */
text-transform: uppercase;
}
.directory-section--cream .short-location {
color: rgba(0, 0, 0, 0.6);
}
.post-type-indicator {
display: flex;
border: 1px solid #fff;
width: max-content;
margin-bottom: 20px;
text-transform: uppercase;
}
.post-type-indicator>div:first-child {
border-right: 1px solid #fff;
}
.post-type-indicator>div {
padding: 5px;
color: var(--White, #FFF);
font-family: Arboria;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.link-icon {
position: absolute;
right: 10px;
bottom: 50%;
transform: translateY(50%);
}
/* ===== EMPTY STATE ===== */
.directory-empty {
color: rgba(255, 255, 255, 0.5);
font-family: Arboria;
font-size: 18px;
font-style: italic;
padding: 40px 0;
}
/* ===== MOBILE CATEGORY DROPDOWN ===== */
.dir-mobile-dropdown {
display: none;
position: relative;
width: 100%;
}
@media (max-width: 640px) {
.directory-nav-inner .dir-nav-pills { display: none; }
.dir-mobile-dropdown { display: block; }
.dir-mob-toggle {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 12px 16px;
background: #CB3727;
color: #fff;
border: 1px solid #fff;
border-radius: 22px;
font-family: Arboria;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
position: relative;
}
.dir-mob-label {
flex: 1;
text-align: center;
}
.dir-mob-arrow {
position: absolute;
right: 16px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.dir-mob-toggle[aria-expanded="true"] .dir-mob-arrow {
transform: rotate(180deg);
}
.dir-mob-menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.dir-mob-menu.open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dir-mob-item {
padding: 12px 16px;
font-family: Arboria;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #000;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.dir-mob-item:last-child { border-bottom: none; }
.dir-mob-item:hover,
.dir-mob-item.active {
background: #CB3727;
color: #fff;
}
}
/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
.directory-splide .splide__arrow--prev {
display: none !important;
}
.directory-section--red .directory-splide::before,
.directory-section--black .directory-splide::before,
.directory-section--cream .directory-splide::before {
display: none;
}
.directory-section--red .directory-splide::after,
.directory-section--black .directory-splide::after,
.directory-section--cream .directory-splide::after {
width: 70px;
}
.directory-splide {
padding-left: 10px;
}
.directory-splide .splide__arrow {
width: 15%;
}
.directory-slider-header {
padding-left: 0;
margin-bottom: 30px;
flex-wrap: wrap;
}
.directory-slider-title {
font-size: 32px;
line-height: 36px;
}
}
@media (max-width: 768px) {
.directory-nav {
padding: 20px 0;
}
.directory-nav-inner {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.directory-slider-header {
flex-direction: column;
}
.dir-nav-pills {
gap: 10px;
}
.directory-slider-title {
padding-left: 0;
}
}
/* --- Business Detail Modal --- */
.dir-modal-overlay {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
max-width: 100%;
background: rgba(0, 0, 0, 0.75);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.dir-modal-overlay.is-open {
display: flex;
}
.dir-modal {
position: relative;
background: #EFECE3;
max-width: 1300px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
border-radius: 4px;
}
.dir-modal-close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: #000;
z-index: 1;
}
.dir-modal-inner {
display: grid;
grid-template-columns: 1fr 1fr;
}
.dir-modal-image {
padding: 36px 33px;
}
.dir-modal-img-wrap {
position: relative;
width: 100%;
height: 100%;
}
#dir-modal-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.biz-icon-overlay,
.dir-modal-img-wrap .biz-icon-overlay {
position: absolute;
bottom: 10px;
right: 10px;
width: 88px;
height: 88px;
object-fit: contain;
pointer-events: none;
}
.dir-modal-details {
padding: 40px 36px;
display: flex;
flex-direction: column;
gap: 16px;
}
.dir-modal-category-badge {
display: inline-block;
border: 1.5px solid #000;
padding: 4px 14px;
text-transform: uppercase;
width: fit-content;
color: #000;
color: var(--Black, #000);
/* Lists Heading */
font-family: Arboria;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
/* letter-spacing: 0.08em; */
}
.dir-modal-title {
margin: 0;
color: var(--Black, #000);
font-family: Arboria;
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 32px;
/* 100% */
text-transform: uppercase;
}
.dir-modal-about {
margin: 0;
color: var(--Black, #000);
/* Heading 3 */
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px;
/* 144.444% */
}
.dir-modal-info-row {
display: grid;
grid-template-columns: 2fr 3fr;
gap: 16px;
}
.dir-modal-info-label {
font-size: 0.7rem;
text-transform: uppercase;
margin-bottom: 4px;
color: var(--Black, #000);
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 26px;
/* 144.444% */
}
.dir-modal-info-value {
font-size: 0.85rem;
color: #333;
font-family: Arboria;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.dir-modal-logo {
padding: 12px 0 4px;
}
.dir-modal-logo-img {
display: block;
width: 90px;
height: 90px;
object-fit: contain;
}
.dir-modal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.dir-modal-btn {
display: inline-block;
padding: 10px 22px;
background: var(--Primary-Red, #CB3727);
color: #fff;
text-decoration: none;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
border-radius: 999px;
transition: opacity 0.15s;
}
.dir-modal-btn:hover {
opacity: 0.85;
color: #fff;
}
@media (max-width: 768px) {
.dir-modal-inner {
grid-template-columns: 1fr;
}
.dir-modal-image {
padding: 0;
}
.dir-modal-img-wrap {
position: relative;
width: 100%;
height: auto;
}
/* No position:absolute — avoids iOS Safari overflow:hidden clipping bug
inside overflow-y:auto scroll containers */
#dir-modal-img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.dir-modal-details {
padding: 24px 20px;
}
.dir-modal-info-row {
grid-template-columns: 1fr;
}
.dir-modal-title {
font-size: 1.4rem;
}
}