/*
Theme Name: Divi Child – DTLB Design District
Theme URI: https://dtlbdesigndistrict.design
Description: Child theme for the DTLB Design District site. Holds the design-system CSS so Divi can be updated safely.
Author: DTLB Design District
Template: Divi
Version: 2.9.19
*/
/* ============================================================
DTLB Design District — Design System v1 (2026-11-01)
Tokens: black #000 white #fff orange #E09900 surface #F4F4F4
Type: Dharma Gothic E (display, uppercase) · CoFo Sans Mono (text)
Spacing: 8 · 16 · 24 · 42 · 64 · 96 · 128
Grid: 3 / 2 / 1 columns, 42px gutter (24px phone)
============================================================ */
:root {
--dtlb-black: #000000;
--dtlb-white: #FFFFFF;
--dtlb-orange: #E09900;
--dtlb-surface: #F4F4F4;
--dtlb-rule: #D9D9D9;
--dtlb-display: 'dharma-gothic-e', Impact, sans-serif;
--dtlb-mono: 'cofo-sans-mono-variable', 'Courier New', monospace;
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 42px; --s5: 64px; --s6: 96px; --s7: 128px;
--gutter: 42px;
}
@media (max-width: 767px) { :root { --gutter: 24px; } }
/* ---------- Type scale ---------- */
body, body #page-container p, body #page-container li,
body #page-container .et_pb_text, body #page-container .et_pb_blurb_description {
font-family: var(--dtlb-mono); font-size: 18px; line-height: 1.5;
}
body #page-container h1, body #page-container h3, body #page-container h5,
body #page-container .et_pb_slide_title {
font-family: var(--dtlb-display); text-transform: uppercase; font-weight: 400; color: inherit;
}
body #page-container h2, body #page-container h4, body #page-container h6 {
font-family: var(--dtlb-mono); font-weight: 500; color: inherit;
}
body #page-container h1 { font-size: 172px; line-height: 0.75; }
body #page-container h2 { font-size: 62px; line-height: 1.08; }
body #page-container h3 { font-size: 54px; line-height: 0.85; }
body #page-container h4 { font-size: 32px; line-height: 1.1; }
body #page-container h5 { font-size: 34px; line-height: 0.9; }
body #page-container h6 { font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: var(--dtlb-orange); }
@media (max-width: 980px) {
body #page-container h1 { font-size: 142px; }
body #page-container h2 { font-size: 44px; }
body #page-container h3 { font-size: 48px; }
body #page-container h4 { font-size: 26px; }
body #page-container h5 { font-size: 30px; }
}
@media (max-width: 767px) {
body, body #page-container p, body #page-container li, body #page-container .et_pb_text { font-size: 16px; }
body #page-container h1 { font-size: 92px; }
body #page-container h2 { font-size: 34px; }
body #page-container h3 { font-size: 40px; }
body #page-container h4 { font-size: 22px; }
body #page-container h5 { font-size: 28px; }
body #page-container h6 { font-size: 14px; }
}
/* ---------- Vertical rhythm ----------
Sections 96 / 64. Rows 0, 42 between rows. Modules 24 apart; title-to-grid 42.
Headings carry no margin of their own; the module spacing is the rhythm. */
body #page-container .et_pb_section { padding-top: var(--s6); padding-bottom: var(--s6); }
body #page-container .et_pb_section.dtlb-hero { padding: 0; }
body #page-container .et_pb_section.et_pb_fullwidth_section { padding: 0; }
body #page-container .et_pb_section + .et_pb_section:not(.dtlb-hero):not(.dtlb-hero-text) { border-top: 1px solid var(--dtlb-rule); }
body #page-container .et_pb_row { padding-top: 0; padding-bottom: 0; }
body #page-container .et_pb_row + .et_pb_row { margin-top: var(--s4); }
body #page-container .et_pb_column .et_pb_module { margin-bottom: var(--s3); }
body #page-container .et_pb_column .et_pb_module:last-child { margin-bottom: 0; }
body #page-container .et_pb_text + .et_pb_portfolio,
body #page-container .et_pb_text + .et_pb_filterable_portfolio,
body #page-container .et_pb_text + .et_pb_gallery,
body #page-container .et_pb_text + .et_pb_contact_form { margin-top: var(--s4); }
body #page-container .et_pb_text h1, body #page-container .et_pb_text h2, body #page-container .et_pb_text h3,
body #page-container .et_pb_text h4, body #page-container .et_pb_text h5, body #page-container .et_pb_text h6 { padding-bottom: 0; margin: 0; }
body #page-container .et_pb_text h1 + h1 { margin-top: 0; }
body #page-container .et_pb_text p { padding-bottom: 0; margin: 0 0 var(--s2); }
body #page-container .et_pb_text p:last-child { margin-bottom: 0; }
body #page-container .et_pb_text h3 + p, body #page-container .et_pb_text h2 + p, body #page-container .et_pb_text h5 + p { margin-top: var(--s3); }
body #page-container .et_pb_text h4 + p { margin-top: var(--s2); }
@media (max-width: 767px) {
body #page-container .et_pb_section { padding-top: var(--s5); padding-bottom: var(--s5); }
body #page-container .et_pb_row + .et_pb_row { margin-top: var(--s3); }
}
/* Page intro lead (first section, h2): keep a readable measure */
body #page-container .dtlb-lead h2 { max-width: 22ch; }
/* ---------- Hero ---------- */
body #page-container .dtlb-hero .et_pb_slider, body #page-container .dtlb-hero .et_pb_slide { background-color: var(--dtlb-black); }
body #page-container .dtlb-hero-text { background: transparent; border: 0; padding: 0; }
body #page-container .dtlb-hero-text h1, body #page-container .dtlb-hero-text h2 { color: var(--dtlb-white); }
body #page-container .dtlb-hero-text h2 { max-width: 22ch; margin-top: var(--s4); }
body #page-container .dtlb-hero-text .et_pb_button_module_wrapper { margin-top: var(--s3); }
/* ---------- Buttons ---------- */
body #page-container .et_pb_button,
body #page-container .et_pb_slider .et_pb_more_button,
body #page-container .et_pb_contact_submit {
font-family: var(--dtlb-mono); font-weight: 500; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.2; padding: 14px 36px !important; border: 0; border-radius: 0;
background-color: var(--dtlb-black); color: var(--dtlb-white);
transition: background-color .2s ease, color .2s ease;
}
body #page-container .et_pb_button:hover, body #page-container .et_pb_slider .et_pb_more_button:hover,
body #page-container .et_pb_contact_submit:hover { padding: 14px 36px !important; background-color: var(--dtlb-orange); color: var(--dtlb-black); }
body #page-container .et_pb_button:after, body #page-container .et_pb_slider .et_pb_more_button:after {
position: relative; display: inline-block; right: auto; margin-left: 1.1em !important; line-height: 1; vertical-align: middle; transform: translateY(-2px); opacity: 1;
}
/* Arrow link: text button that navigates */
body #page-container a.et_pb_button.dtlb-arrow,
body #page-container a.et_pb_button.dtlb-arrow:hover { background: transparent; color: var(--dtlb-black); font-weight: 700; padding: 0 !important; }
body #page-container a.et_pb_button.dtlb-arrow:hover { color: var(--dtlb-orange); }
body #page-container a.et_pb_button.dtlb-arrow:after { content: "\f061" !important; font-family: "FontAwesome" !important; font-weight: 900; color: inherit; }
body #page-container .et_pb_button_module_wrapper { margin-top: 0; }
@media (max-width: 767px) { body #page-container .et_pb_button { font-size: 14px; } }
/* ---------- Grid tiles (Portfolio / Filterable Portfolio) ---------- */
body #page-container .et_pb_portfolio_item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item,
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { width: calc((100% - 2 * var(--gutter)) / 3) !important; margin: 0 var(--gutter) var(--gutter) 0 !important; clear: none !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(3n),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(3n) { margin-right: 0 !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(3n+1),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(3n+1) { clear: both !important; }
body #page-container .et_pb_portfolio_item h2, body #page-container .et_pb_portfolio_item .et_pb_module_header { font-family: var(--dtlb-mono); font-weight: 500; font-size: 18px; line-height: 1.3; margin: 12px 0 0; padding: 0; }
body #page-container .et_pb_portfolio_item .post-meta { display: none; }
body #page-container .et_pb_portfolio_filters li a { font-family: var(--dtlb-mono); font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dtlb-black); }
body #page-container .et_pb_portfolio_filters li a.active { color: var(--dtlb-orange); }
body #page-container .et_pb_portfolio_filters { margin-bottom: var(--s4); }
@media (max-width: 980px) {
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item,
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { width: calc((100% - var(--gutter)) / 2) !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(3n),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(3n) { margin-right: var(--gutter) !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(2n),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(2n) { margin-right: 0 !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(3n+1),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(3n+1) { clear: none !important; }
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item:nth-child(2n+1),
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item:nth-child(2n+1) { clear: both !important; }
}
@media (max-width: 767px) {
body #page-container .et_pb_portfolio_grid .et_pb_portfolio_item,
body #page-container .et_pb_filterable_portfolio_grid .et_pb_portfolio_item { width: 100% !important; margin-right: 0 !important; }
}
/* ---------- Logo row (Blurb) ---------- */
body #page-container .dtlb-logo .et_pb_main_blurb_image img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--dtlb-white); transition: background-color .2s ease; }
body #page-container .dtlb-logo:hover .et_pb_main_blurb_image img { background: var(--dtlb-orange); }
body #page-container .dtlb-logo .et_pb_module_header { font-family: var(--dtlb-mono); font-size: 16px; line-height: 1.3; font-weight: 500; text-transform: none; margin-top: var(--s3); }
body #page-container .dtlb-logo .et_pb_blurb_content { max-width: none; }
/* ---------- Logo grids (Design Council, Supporters) ---------- */
/* Rows tagged dtlb-logo-grid (Row settings > Advanced > CSS Class). Every cell is the same square; each logo is
sized from its measured artwork so all read at equal visual weight, and centered on its visible artwork.
A new logo added to these rows needs its own line below to be balanced. */
body #page-container .dtlb-logo-grid .et_pb_image_wrap { display: block; width: 100%; }
body #page-container .dtlb-logo-grid img { box-sizing: border-box; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
body #page-container .dtlb-logo-grid img[src*="Studio-One-Eleven-1"] { padding: 17.18% 17.18% 17.35% 17.35%; }
body #page-container .dtlb-logo-grid img[src*="Institute-for-Innovation-and-Entrepreneurship-1"] { padding: 11.69% 11.59% 11.50% 11.59%; }
body #page-container .dtlb-logo-grid img[src*="Intertrend-Creative-Class-Collective-1"] { padding: 8.10% 5.78% 3.46% 5.78%; }
body #page-container .dtlb-logo-grid img[src*="City-Fabrick"] { padding: 19.20% 19.20% 19.20% 19.20%; }
body #page-container .dtlb-logo-grid img[src*="Renaissance-High-School-1"] { padding: 10.49% 10.79% 10.49% 10.20%; }
body #page-container .dtlb-logo-grid img[src*="East-Village-Arts-District-1"] { padding: 14.00% 13.91% 13.82% 13.91%; }
body #page-container .dtlb-logo-grid img[src*="DTLB-Alliance-1-1"] { padding: 10.00% 10.00% 10.00% 10.00%; }
body #page-container .dtlb-logo-grid img[src*="Immersive-Design-Research-Lab-1"] { padding: 14.60% 14.78% 14.60% 14.42%; }
body #page-container .dtlb-logo-grid img[src*="Amondson-1"] { padding: 7.65% 6.00% 4.35% 6.00%; }
body #page-container .dtlb-logo-grid img[src*="Space-Beach-Foundation"] { padding: 19.20% 19.20% 19.20% 19.20%; }
body #page-container .dtlb-logo-grid img[src*="city-of-lb-logo"] { padding: 5.45% 5.78% 5.89% 5.56%; }
body #page-container .dtlb-logo-grid img[src*="hahn-logo-2"] { padding: 3.15% 2.67% 1.72% 2.19%; }
body #page-container .dtlb-logo-grid img[src*="dtlb-alliance-logo"] { padding: 7.60% 5.33% 1.62% 3.89%; }
body #page-container .dtlb-logo-grid img[src*="MaryZendejas_Logo_v25"] { padding: 13.58% 13.58% 13.58% 13.58%; }
body #page-container .dtlb-logo-grid img[src*="GRG-Logo1"] { padding: 0; transform: translate(3.53%, 3.37%) scale(1.285); }
body #page-container .dtlb-logo-grid img[src*="Urbana-Real-Estate-Development-LLC"] { padding: 6.00% 6.00% 6.00% 6.00%; }
body #page-container .dtlb-logo-grid img[src*="Screenshot-2025-07-03-at-10-32-03-Coreland-Companiess-Tustin-CA-Commercial-Real-Estate-Agency-Information-Agents-Listings-Reviews-MyEListing"] { padding: 2.69% 2.69% 2.69% 2.69%; }
body #page-container .dtlb-logo-grid img[src*="POTLB-logo"] { padding: 6.00% 6.00% 6.00% 6.00%; }
/* ---------- Images ---------- */
body #page-container .et_pb_image img { display: block; width: 100%; }
/* ---------- Header / nav (unchanged from the original site CSS) ---------- */
#top-menu li a { font-family: var(--dtlb-display); text-transform: uppercase; font-size: 26px; }
.et_slide_in_menu_container ul#mobile_menu_slide { font-family: var(--dtlb-display); }
.et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a { font-size: 10vh !important; line-height: 0.6em; padding-top: 2vh !important; padding-bottom: 2vh !important; } /* sized to screen height so seven items breathe */
@media (max-width: 768px) { .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a { font-size: min(8vh, 11vw) !important; line-height: 0.4em; white-space: nowrap; } } /* capped by width so the longest label stays on one line */
.et_header_style_fullscreen ul#mobile_menu_slide { text-align: left; padding-left: max(calc((100% - var(--content-w)) / 2), calc((100% - var(--content)) / 2)); padding-right: max(calc((100% - var(--content-w)) / 2), calc((100% - var(--content)) / 2)); } /* menu sits on the content measure */
.et_header_style_fullscreen .et_pb_fullscreen_nav_container { margin-top: -120px; }
/* Fullscreen menu: title case, and the list optically centered in the screen (cap tops of the first item to the baseline of the last) */
.et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a { text-transform: none !important; transform: translateY(0.093em); }
@media (max-width: 768px) { .et_header_style_fullscreen .et_slide_in_menu_container .et_mobile_menu li a { transform: translateY(0.116em); } }
.et_header_style_fullscreen .et_slide_in_menu_container .et_pb_fullscreen_nav_container { position: absolute; inset: 0; margin-top: 0 !important; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.et_header_style_fullscreen .et_slide_in_menu_container ul#mobile_menu_slide { display: block; height: auto !important; min-height: 0 !important; pointer-events: auto; }
/* ---------- Events Calendar ---------- */
.tribe-common, .tribe-events .tribe-events-c-nav__next, .tribe-events .tribe-events-c-nav__prev,
.tribe-events-calendar-list__month-separator-text, .tribe-events-calendar-list__event-datetime,
.tribe-events-c-top-bar__datepicker-mobile, .tribe-events-c-top-bar__datepicker-desktop,
.tribe-events-c-top-bar__today-button, .tribe-events-c-subscribe-dropdown__button-text { font-family: var(--dtlb-mono) !important; }
.tribe-events-calendar-list__event-title a { font-family: var(--dtlb-display); text-transform: uppercase; font-size: 34px; line-height: 0.9; }
.tribe-events .tribe-events-c-subscribe-dropdown__button-text { font-weight: 500 !important; }
/* ---------- Events Calendar: width ---------- */
/* The plugin pads its container 42px per side; drop that so the calendar fills the content measure */
body .tribe-events .tribe-events-l-container { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; width: 100%; }
/* Calendar pages built by the plugin (not inside a Divi row) take the site content measure directly */
body #et-main-area > .tribe-events .tribe-events-l-container { width: var(--content-w); max-width: var(--content) !important; margin-left: auto; margin-right: auto; }
/* ---------- Events Calendar: event title links ---------- */
/* Black like the site's other titles, orange on hover, never underlined (plugin border and Divi text-link underline both off) */
body .tribe-events a[class*="title-link"],
body .tribe-events a[class*="title-link"]:visited {
color: var(--dtlb-black) !important; text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; transition: color .2s ease;
}
body .tribe-events a[class*="title-link"]:hover,
body .tribe-events a[class*="title-link"]:focus,
body .tribe-events a[class*="title-link"]:active { color: var(--dtlb-orange) !important; text-decoration: none !important; border-bottom: 0 !important; }
body #page-container .et_pb_text .tribe-events a:hover { text-decoration: none; }
/* ---------- Events Calendar: buttons, mapped to the system ---------- */
/* Primary button: Find Events, Subscribe to calendar */
body .tribe-events .tribe-events-c-search__button,
body .tribe-events .tribe-events-c-search__button:hover,
body .tribe-events .tribe-events-c-search__button:focus,
body .tribe-events .tribe-events-c-subscribe-dropdown__button,
body .tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
body .tribe-events .tribe-events-c-subscribe-dropdown__button:focus-within,
body .tribe-events .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active {
font-family: var(--dtlb-mono) !important; font-weight: 500; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.2; padding: 14px 36px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
background-color: var(--dtlb-black) !important; color: var(--dtlb-white) !important;
transition: background-color .2s ease, color .2s ease;
}
body .tribe-events .tribe-events-c-search__button:hover,
body .tribe-events .tribe-events-c-search__button:focus,
body .tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
body .tribe-events .tribe-events-c-subscribe-dropdown__button:focus-within,
body .tribe-events .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active {
background-color: var(--dtlb-orange) !important; color: var(--dtlb-black) !important;
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button-text {
font: inherit !important; letter-spacing: inherit; text-transform: inherit; color: inherit !important; padding: 0; background: none !important;
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button-icon {
color: inherit !important; margin-left: 1.1em; vertical-align: middle; transform: translateY(-2px);
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button-icon path { fill: currentColor !important; }
/* Arrow link: Previous Events / Next Events */
body .tribe-events .tribe-events-c-nav__prev,
body .tribe-events .tribe-events-c-nav__next {
font-family: var(--dtlb-mono) !important; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.2; color: var(--dtlb-black) !important; background: transparent !important; transition: color .2s ease;
}
body .tribe-events .tribe-events-c-nav__prev:hover, body .tribe-events .tribe-events-c-nav__prev:focus,
body .tribe-events .tribe-events-c-nav__next:hover, body .tribe-events .tribe-events-c-nav__next:focus { color: var(--dtlb-orange) !important; }
body .tribe-events .tribe-events-c-nav__prev-icon-svg, body .tribe-events .tribe-events-c-nav__next-icon-svg { display: none; }
body .tribe-events .tribe-events-c-nav__prev:before, body .tribe-events .tribe-events-c-nav__next:after {
font-family: "FontAwesome"; font-weight: 900; display: inline-block; line-height: 1; vertical-align: middle; transform: translateY(-2px);
}
body .tribe-events .tribe-events-c-nav__prev:before { content: "\f060"; margin-right: 1.1em; }
body .tribe-events .tribe-events-c-nav__next:after { content: "\f061"; margin-left: 1.1em; }
/* Text controls (arrow-link type, no arrow): Today, date range, view selector */
body .tribe-events .tribe-events-c-top-bar__today-button,
body .tribe-events .tribe-events-c-top-bar__datepicker-button,
body .tribe-events .tribe-events-c-view-selector__button {
font-family: var(--dtlb-mono) !important; font-weight: 700; font-size: 16px; letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.2; color: var(--dtlb-black) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
box-shadow: none !important; transition: color .2s ease;
}
body .tribe-events .tribe-events-c-top-bar__today-button { padding: 0 !important; }
body .tribe-events .tribe-events-c-top-bar__datepicker-button { font-size: 16px !important; }
body .tribe-events .tribe-events-c-top-bar__datepicker-button *,
body .tribe-events .tribe-events-c-view-selector__button * { font: inherit !important; letter-spacing: inherit; text-transform: inherit; color: inherit !important; }
body .tribe-events .tribe-events-c-top-bar__today-button:hover, body .tribe-events .tribe-events-c-top-bar__today-button:focus,
body .tribe-events .tribe-events-c-top-bar__datepicker-button:hover, body .tribe-events .tribe-events-c-top-bar__datepicker-button:focus,
body .tribe-events .tribe-events-c-view-selector__button:hover, body .tribe-events .tribe-events-c-view-selector__button:focus { color: var(--dtlb-orange) !important; }
/* Icon controls: top-bar arrows, search toggle, dropdown carets */
body .tribe-events .tribe-common-c-btn-icon,
body .tribe-events .tribe-events-c-events-bar__search-button,
body .tribe-events .tribe-events-c-top-bar__datepicker-button .tribe-common-c-svgicon,
body .tribe-events .tribe-events-c-view-selector__button .tribe-common-c-svgicon { color: var(--dtlb-black) !important; background: transparent !important; transition: color .2s ease; }
body .tribe-events .tribe-common-c-btn-icon path,
body .tribe-events .tribe-events-c-events-bar__search-button path { fill: currentColor !important; }
body .tribe-events .tribe-common-c-btn-icon:hover, body .tribe-events .tribe-common-c-btn-icon:focus,
body .tribe-events .tribe-events-c-events-bar__search-button:hover, body .tribe-events .tribe-events-c-events-bar__search-button:focus { color: var(--dtlb-orange) !important; }
/* Navigation that can't go anywhere is hidden (space kept so the other side doesn't shift) */
body .tribe-events .tribe-events-c-nav__prev:disabled,
body .tribe-events .tribe-events-c-nav__next:disabled,
body .tribe-events .tribe-events-c-top-bar__nav-link:disabled { visibility: hidden; }
/* ---------- Programs index ([dtlb_programs] in a Text module tagged dtlb-programs-wrap) ---------- */
/* Two-column program cards: image, index, title, tagline, intro, link. With an odd count the first card
becomes a full-width lead (image left, story right) so no card is left alone on the last row. */
body #page-container .dtlb-programs {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s6);
}
body #page-container .dtlb-programs .dtlb-program { display: flex; flex-direction: column; margin: 0; }
body #page-container .dtlb-programs .dtlb-program__image { display: block; overflow: hidden; margin: 0 0 var(--s3); }
body #page-container .dtlb-programs .dtlb-program__image img {
display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .4s ease;
}
body #page-container .dtlb-programs .dtlb-program:hover .dtlb-program__image img { transform: scale(1.04); }
body #page-container .dtlb-programs .dtlb-program__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
body #page-container .dtlb-programs .dtlb-program__index {
display: flex; align-items: center; gap: var(--s2); align-self: stretch; margin: 0 0 var(--s3);
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; color: var(--dtlb-orange);
}
body #page-container .dtlb-programs .dtlb-program__index:after { content: ""; flex: 1; height: 1px; background: var(--dtlb-rule); }
body #page-container .dtlb-programs h2.dtlb-program__title {
font-family: var(--dtlb-display); font-size: 44px; font-weight: 400; line-height: 0.9 !important; text-transform: uppercase; margin: 0 0 var(--s2); padding: 0;
}
body #page-container .dtlb-programs .dtlb-program__title a { line-height: inherit !important; color: var(--dtlb-black); transition: color .2s ease; }
body #page-container .dtlb-programs .dtlb-program:hover .dtlb-program__title a { color: var(--dtlb-orange); }
body #page-container .dtlb-programs p.dtlb-program__tagline {
font-family: var(--dtlb-mono); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--dtlb-black); margin: 0 0 var(--s3) !important; padding: 0;
}
body #page-container .dtlb-programs p.dtlb-program__summary {
font-family: var(--dtlb-mono); font-size: 18px; line-height: 1.5; color: var(--dtlb-black); margin: 0 0 var(--s4) !important; padding: 0;
}
body #page-container .dtlb-programs a.dtlb-program__link {
margin-top: auto; font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
color: var(--dtlb-black); text-decoration: none; transition: color .2s ease;
}
body #page-container .dtlb-programs a.dtlb-program__link:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-left: 1.1em; }
body #page-container .dtlb-programs a.dtlb-program__link:hover { color: var(--dtlb-orange); }
/* Lead card (odd count only) */
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) {
grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start;
}
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) .dtlb-program__image { margin: 0; }
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) .dtlb-program__title { font-size: 56px; }
@media (max-width: 980px) {
body #page-container .dtlb-programs { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) { display: flex; }
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) .dtlb-program__image { margin: 0 0 var(--s3); }
body #page-container .dtlb-programs .dtlb-program:first-child:nth-last-child(odd) .dtlb-program__title,
body #page-container .dtlb-programs h2.dtlb-program__title { font-size: 36px; }
}
/* ---------- Homepage: upcoming events strip ([dtlb_upcoming] in a Text module tagged dtlb-upcoming) ---------- */
/* Poster (4:5, the shape event flyers come in), date block, title, venue, short description, link. 3 / 1 columns. */
body #page-container .dtlb-upcoming .dtlb-events {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5);
}
body #page-container .dtlb-upcoming .dtlb-event { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
body #page-container .dtlb-upcoming .dtlb-event__image { display: block; width: 100%; overflow: hidden; margin: 0 0 var(--s3); }
body #page-container .dtlb-upcoming .dtlb-event__image img {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .4s ease;
}
body #page-container .dtlb-upcoming .dtlb-event:hover .dtlb-event__image img { transform: scale(1.04); }
body #page-container .dtlb-upcoming .dtlb-event__when { display: flex; align-items: flex-end; gap: var(--s2); margin: 0 0 var(--s3); }
body #page-container .dtlb-upcoming .dtlb-event__day {
font-family: var(--dtlb-display); font-size: 96px; font-weight: 400; line-height: 0.75; color: var(--dtlb-black);
}
body #page-container .dtlb-upcoming .dtlb-event__date { display: flex; flex-direction: column; gap: var(--s1); }
body #page-container .dtlb-upcoming .dtlb-event__month,
body #page-container .dtlb-upcoming .dtlb-event__time {
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
}
body #page-container .dtlb-upcoming .dtlb-event__month { color: var(--dtlb-orange); }
body #page-container .dtlb-upcoming .dtlb-event__time { color: var(--dtlb-black); text-transform: none; font-weight: 400; }
body #page-container .dtlb-upcoming h3.dtlb-event__title {
font-family: var(--dtlb-display); font-size: 34px; font-weight: 400; line-height: 0.95; text-transform: uppercase; margin: 0 0 var(--s2); padding: 0;
}
body #page-container .dtlb-upcoming .dtlb-event__title a { color: var(--dtlb-black); transition: color .2s ease; }
body #page-container .dtlb-upcoming .dtlb-event:hover .dtlb-event__title a { color: var(--dtlb-orange); }
body #page-container .dtlb-upcoming p.dtlb-event__venue {
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--dtlb-black); margin: 0 0 var(--s2); padding: 0;
}
body #page-container .dtlb-upcoming p.dtlb-event__excerpt {
font-family: var(--dtlb-mono); font-size: 16px; line-height: 1.5; color: var(--dtlb-black); margin: 0 0 var(--s3); padding: 0;
}
body #page-container .dtlb-upcoming a.dtlb-event__link {
margin-top: auto; font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
color: var(--dtlb-black); text-decoration: none; transition: color .2s ease;
}
body #page-container .dtlb-upcoming a.dtlb-event__link:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-left: 1.1em; }
body #page-container .dtlb-upcoming a.dtlb-event__link:hover { color: var(--dtlb-orange); }
body #page-container .dtlb-upcoming .dtlb-upcoming-empty { font-family: var(--dtlb-mono); font-size: 18px; line-height: 1.5; margin: 0; }
@media (max-width: 767px) {
body #page-container .dtlb-upcoming .dtlb-events { grid-template-columns: minmax(0, 1fr); row-gap: var(--s5); }
body #page-container .dtlb-upcoming .dtlb-event__day { font-size: 72px; }
}
/* ---------- News: lead story + story grid (Blog modules tagged dtlb-news-lead / dtlb-news-grid) ---------- */
/* Shared: date kicker, headline, excerpt */
body #page-container .dtlb-news-lead .et_pb_post,
body #page-container .dtlb-news-grid .et_pb_post { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
body #page-container .dtlb-news-lead .post-meta,
body #page-container .dtlb-news-grid .post-meta {
margin: 0 0 var(--s2); padding: 0; font-family: var(--dtlb-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; color: var(--dtlb-orange);
}
body #page-container .dtlb-news-lead .entry-title,
body #page-container .dtlb-news-grid .entry-title { font-family: var(--dtlb-display); font-weight: 400; text-transform: uppercase; margin: 0 0 var(--s3); padding: 0; }
body #page-container .dtlb-news-lead .entry-title a,
body #page-container .dtlb-news-grid .entry-title a { color: var(--dtlb-black); transition: color .2s ease; }
body #page-container .dtlb-news-lead .et_pb_post:hover .entry-title a,
body #page-container .dtlb-news-grid .et_pb_post:hover .entry-title a { color: var(--dtlb-orange); }
body #page-container .dtlb-news-lead .post-content-inner p,
body #page-container .dtlb-news-grid .post-content-inner p { font-family: var(--dtlb-mono); line-height: 1.5; color: var(--dtlb-black); margin: 0; padding: 0; }
body #page-container .dtlb-news-lead .entry-featured-image-url,
body #page-container .dtlb-news-grid .entry-featured-image-url { display: block; overflow: hidden; margin: 0; }
body #page-container .dtlb-news-lead .entry-featured-image-url img,
body #page-container .dtlb-news-grid .entry-featured-image-url img { display: block; width: 100%; height: auto; object-fit: cover; transition: transform .4s ease; }
body #page-container .dtlb-news-lead .et_pb_post:hover .entry-featured-image-url img,
body #page-container .dtlb-news-grid .et_pb_post:hover .entry-featured-image-url img { transform: scale(1.04); }
/* Lead story: image across columns 1-2, story in column 3; kicker reads "Latest / date" */
body #page-container .dtlb-news-lead .et_pb_post {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--gutter);
}
body #page-container .dtlb-news-lead .entry-featured-image-url { grid-column: 1 / span 2; grid-row: 1 / span 4; }
body #page-container .dtlb-news-lead .entry-featured-image-url img { aspect-ratio: 3 / 2; }
body #page-container .dtlb-news-lead .post-meta { grid-column: 3; grid-row: 1; }
body #page-container .dtlb-news-lead .post-meta:before { content: "Latest"; }
body #page-container .dtlb-news-lead .post-meta .published:before { content: "/"; margin: 0 var(--s2); }
body #page-container .dtlb-news-lead .entry-title { grid-column: 3; grid-row: 2; font-size: 56px; line-height: 0.9; }
body #page-container .dtlb-news-lead .post-content { grid-column: 3; grid-row: 3; }
body #page-container .dtlb-news-lead .post-content-inner p { font-size: 18px; }
body #page-container .dtlb-news-lead a.more-link {
display: inline-block; margin-top: var(--s4); font-size: 0; color: var(--dtlb-black); transition: color .2s ease;
}
body #page-container .dtlb-news-lead a.more-link:before {
content: "Read story"; font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
}
body #page-container .dtlb-news-lead a.more-link:after { content: "\f061"; font-family: "FontAwesome"; font-size: 16px; font-weight: 900; display: inline-block; margin-left: 1.1em; }
body #page-container .dtlb-news-lead a.more-link:hover { color: var(--dtlb-orange); }
/* Story grid: rows (not masonry) so stories stay in date order; 3 / 2 / 1 columns on the system gutter */
body #page-container .dtlb-news-lead + .dtlb-news-grid { margin-top: var(--s6); }
body #page-container .dtlb-news-grid .et_pb_salvattore_content[data-columns]:before { content: "1 .column.size-1of1" !important; }
body #page-container .dtlb-news-grid .column.size-1of1 {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s5); width: 100%; margin: 0; float: none;
}
body #page-container .dtlb-news-grid .et_pb_post { display: flex; flex-direction: column; }
body #page-container .dtlb-news-grid .et_pb_image_container { order: 0; margin: 0 0 var(--s3); }
body #page-container .dtlb-news-grid .post-meta { order: 1; }
body #page-container .dtlb-news-grid .entry-title { order: 2; }
body #page-container .dtlb-news-grid .post-content { order: 3; }
body #page-container .dtlb-news-grid .entry-featured-image-url img { aspect-ratio: 3 / 2; }
body #page-container .dtlb-news-grid .entry-title { font-size: 34px; line-height: 0.95; }
body #page-container .dtlb-news-grid .post-content-inner p { font-size: 16px; }
@media (max-width: 980px) {
body #page-container .dtlb-news-lead .et_pb_post { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
body #page-container .dtlb-news-lead .entry-featured-image-url,
body #page-container .dtlb-news-lead .post-meta,
body #page-container .dtlb-news-lead .entry-title,
body #page-container .dtlb-news-lead .post-content { grid-column: 1; grid-row: auto; }
body #page-container .dtlb-news-lead .entry-featured-image-url { margin-bottom: var(--s3); }
body #page-container .dtlb-news-lead .entry-title { font-size: 44px; }
body #page-container .dtlb-news-grid .column.size-1of1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
body #page-container .dtlb-news-grid .column.size-1of1 { grid-template-columns: minmax(0, 1fr); }
body #page-container .dtlb-news-lead + .dtlb-news-grid { margin-top: var(--s5); }
}
/* ---------- News: single post ("dispatch" layout) ---------- */
/* Black masthead continues out of the header: kicker (category / date) and headline. The feature image
straddles the masthead and the page. Story sits in columns 2-3 with "All news" in column 1. */
body.single-post #main-content { background-color: var(--dtlb-white); }
body.single-post #main-content .container { width: var(--content-w); max-width: var(--content); padding-top: 0; }
body.single-post #main-content .container:before { display: none; }
body.single-post #main-content #left-area { width: 100% !important; padding: 0 !important; float: none; }
body.single-post #sidebar { display: none; }
body.single-post #left-area article.et_pb_post {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin: 0; padding: 0 0 var(--s6);
}
body.single-post article.et_pb_post > .et_post_meta_wrapper:first-child {
grid-column: 1 / -1; display: flex; flex-direction: column; padding: var(--s6) 0 0; margin: 0;
border-image: linear-gradient(var(--dtlb-black), var(--dtlb-black)) fill 0 / 0 / 0 100vw;
}
body.single-post article.et_pb_post > .et_post_meta_wrapper:last-child:not(:first-child) { display: none; }
body.single-post #page-container .et_post_meta_wrapper .post-meta {
order: -1; display: flex; align-items: baseline; margin: 0 0 var(--s3); padding: 0; font-size: 0; line-height: 1;
}
body.single-post .et_post_meta_wrapper .post-meta .author { display: none; }
body.single-post #page-container .et_post_meta_wrapper .post-meta a,
body.single-post #page-container .et_post_meta_wrapper .post-meta .published {
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; color: var(--dtlb-orange);
}
body.single-post .et_post_meta_wrapper .post-meta a { order: 1; }
body.single-post .et_post_meta_wrapper .post-meta .published { order: 2; }
body.single-post .et_post_meta_wrapper .post-meta .published:before { content: "/"; margin: 0 var(--s2); }
body.single-post #page-container .et_post_meta_wrapper .post-meta a:hover { color: var(--dtlb-white); }
body.single-post #page-container .et_post_meta_wrapper h1.entry-title {
font-family: var(--dtlb-display); font-weight: 400; text-transform: uppercase; color: var(--dtlb-white);
font-size: clamp(56px, 7.2vw, 128px); line-height: 0.88; max-width: calc((100% - 2 * var(--gutter)) * 2 / 3 + var(--gutter)); margin: 0 0 var(--s5); padding: 0;
}
body.single-post .et_post_meta_wrapper > img {
display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 0 -28.125%;
}
body.single-post #page-container .entry-content a.dtlb-post-back {
grid-column: 1; grid-row: 1 / span 50; align-self: start; position: sticky; top: 140px;
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
color: var(--dtlb-black); transition: color .2s ease;
}
body.single-post #page-container .entry-content a.dtlb-post-back:before { content: "\f060"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-right: 1.1em; transform: translateY(-1px); }
body.single-post #page-container .entry-content a.dtlb-post-back:hover { color: var(--dtlb-orange); text-decoration: none; }
body.single-post article.et_pb_post > .entry-content {
grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: calc(28.125% + var(--s6)); padding: 0;
}
body.single-post article.et_pb_post > .entry-content > * { grid-column: 2 / -1; }
body.single-post article.et_pb_post > .entry-content > .dtlb-post-back { grid-column: 1; }
body.single-post #page-container .entry-content p { font-family: var(--dtlb-mono); font-size: 18px; line-height: 1.5; margin: 0 0 var(--s3); padding: 0; color: var(--dtlb-black); }
body.single-post #page-container .entry-content p:last-child { margin-bottom: 0; }
body.single-post #page-container .entry-content a { color: var(--dtlb-orange); }
body.single-post #page-container .entry-content a:hover { color: var(--dtlb-black); }
body.single-post #page-container .entry-content p.dtlb-post-cta { margin-top: calc(var(--s4) - var(--s3)); }
body.single-post #page-container .entry-content p.dtlb-post-cta a {
font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--dtlb-black); text-decoration: none; transition: color .2s ease;
}
body.single-post #page-container .entry-content p.dtlb-post-cta a:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-left: 1.1em; transform: translateY(-1px); }
body.single-post #page-container .entry-content p.dtlb-post-cta a:hover { color: var(--dtlb-orange); }
/* Older / newer */
body.single-post .dtlb-post-nav {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter);
border-top: 1px solid var(--dtlb-rule); padding: var(--s4) 0 var(--s6);
}
body.single-post .dtlb-post-nav__newer { text-align: right; }
body.single-post .dtlb-post-nav a { display: inline-block; color: var(--dtlb-black); transition: color .2s ease; }
body.single-post .dtlb-post-nav a:hover { color: var(--dtlb-orange); }
body.single-post .dtlb-post-nav__label {
display: block; margin-bottom: var(--s2); font-family: var(--dtlb-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
}
body.single-post .dtlb-post-nav__older .dtlb-post-nav__label:before { content: "\f060"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-right: 1.1em; }
body.single-post .dtlb-post-nav__newer .dtlb-post-nav__label:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-left: 1.1em; }
body.single-post .dtlb-post-nav__title { display: block; font-family: var(--dtlb-display); font-size: 34px; line-height: 0.95; text-transform: uppercase; }
@media (max-width: 980px) {
body.single-post #left-area article.et_pb_post { grid-template-columns: minmax(0, 1fr); }
body.single-post article.et_pb_post > .entry-content { grid-template-columns: minmax(0, 1fr); margin-top: calc(28.125% + var(--s5)); }
body.single-post article.et_pb_post > .entry-content > * { grid-column: 1; }
body.single-post article.et_pb_post > .entry-content > .dtlb-post-back { grid-row: auto; position: static; margin-bottom: var(--s4); }
}
@media (max-width: 767px) {
body.single-post .et_post_meta_wrapper:first-child { padding-top: var(--s5); }
body.single-post .dtlb-post-nav { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
body.single-post .dtlb-post-nav__newer { text-align: left; }
body.single-post .dtlb-post-nav__title { font-size: 28px; }
}
/* ---------- Contact form ---------- */
body #page-container .et_pb_contact_form .et_pb_contact_field { margin-bottom: var(--s2); }
body #page-container .et_pb_contact_form input, body #page-container .et_pb_contact_form textarea { font-family: var(--dtlb-mono); font-size: 16px; border: 1px solid var(--dtlb-black); border-radius: 0; background: var(--dtlb-white); }
/* ---------- Colored tile block (Home stats) ---------- */
body #page-container .dtlb-tiles .et_pb_column { padding: var(--s3); }
body #page-container .dtlb-tiles .et_pb_column .et_pb_module { margin-bottom: var(--s3); }
body #page-container .dtlb-tiles .et_pb_row + .et_pb_row { margin-top: 0; }
body #page-container .dtlb-tiles h3 { font-size: 34px; line-height: 0.9; overflow-wrap: normal; }
body #page-container .dtlb-tiles .et_pb_column { min-height: 360px; }
/* ---------- News row ---------- */
body #page-container .dtlb-news .et_pb_image img { aspect-ratio: 16 / 9; object-fit: cover; }
body #page-container .dtlb-news h5 + p, body #page-container .dtlb-news h3 + p { margin-top: var(--s3); }
/* Page intro: clears the fixed header, holds a consistent height */
body #page-container .dtlb-lead { padding-top: calc(104px + var(--s6)); min-height: 50vh; display: flex; align-items: center; }
body #page-container .dtlb-lead .et_pb_row { width: 89%; max-width: 1280px; }
@media (max-width: 767px) { body #page-container .dtlb-lead { padding-top: calc(80px + var(--s5)); min-height: 40vh; } }
/* Supporter logos (image modules): same 1:1 contain as the logo row */
body #page-container .dtlb-logos .et_pb_image img { aspect-ratio: 1 / 1; object-fit: contain; }
/* ---------- Colored tile block (Home stats): full-bleed, square tiles ---------- */
body #page-container .dtlb-tiles { padding-top: 0; padding-bottom: 0; }
body #page-container .dtlb-tiles .et_pb_row { width: 100% !important; max-width: none !important; }
body #page-container .dtlb-tiles .et_pb_row + .et_pb_row { margin-top: 0; }
body #page-container .dtlb-tiles .et_pb_column { aspect-ratio: 1 / 1; min-height: 0; padding: var(--s3); display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 0 !important; }
body #page-container .dtlb-tiles .et_pb_column .et_pb_module { margin-bottom: 0; }
body #page-container .dtlb-tiles .et_pb_text { font-size: 16px; line-height: 1.5; }
body #page-container .dtlb-tiles h3 { font-size: 34px; line-height: 0.9; overflow-wrap: normal; }
@media (max-width: 980px) { body #page-container .dtlb-tiles .et_pb_column { aspect-ratio: auto; min-height: 320px; } }
/* Number counters (stat tiles): big display figures, Divi animates them on scroll */
body #page-container .et_pb_number_counter .percent p { font-family: var(--dtlb-display); font-size: 120px; line-height: 0.9; font-weight: 400; margin: 0; }
body #page-container .dtlb-tiles .et_pb_number_counter { text-align: left; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent { height: auto; }
@media (max-width: 980px) { body #page-container .et_pb_number_counter .percent p { font-size: 80px; } }
/* Stat tiles: number dead-centre, label pinned bottom-left, quotes top-left */
body #page-container .dtlb-tiles .et_pb_column { position: relative !important; display: block; }
body #page-container .dtlb-tiles .et_pb_number_counter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: 220px; line-height: 0.8; }
body #page-container .dtlb-tiles .et_pb_text:last-child { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); }
body #page-container .dtlb-tiles .et_pb_text:not(:last-child) { position: absolute; left: var(--s3); right: var(--s3); top: var(--s3); bottom: 88px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
body #page-container .dtlb-tiles .et_pb_text:not(:last-child) .et_pb_text_inner { width: 100%; }
body #page-container .dtlb-tiles .percent-sign { display: inline; }
@media (max-width: 980px) { body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: 140px; } }
/* Stat tiles: testimonial (quote) modules centred in the tile */
body #page-container .dtlb-tiles .et_pb_testimonial { position: absolute; left: var(--s3); right: var(--s3); top: var(--s3); bottom: 88px; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; background: transparent; }
body #page-container .dtlb-tiles .et_pb_testimonial:before { position: static; margin: 0 auto var(--s2); }
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_description { font-size: 16px; line-height: 1.5; }
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_author { text-align: center; margin-top: var(--s2); }
/* ---------- Header: menu toggle (orange disc, black lines; previously supplied by Divi Pixel) ---------- */
#main-header .mobile_menu_bar.et_toggle_fullscreen_menu,
#main-header .mobile_menu_bar.et_pb_header_toggle { width: 48px; height: 48px; border-radius: 50%; background-color: var(--dtlb-orange); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s ease; }
#main-header .mobile_menu_bar.et_toggle_fullscreen_menu:hover,
#main-header .mobile_menu_bar.et_pb_header_toggle:hover { background-color: var(--dtlb-white); }
#main-header .mobile_menu_bar.et_toggle_fullscreen_menu:before,
#main-header .mobile_menu_bar.et_pb_header_toggle:before { color: var(--dtlb-black) !important; font-size: 26px; line-height: 1; position: static; }
.et_header_style_fullscreen .et_slide_in_menu_container .et_toggle_fullscreen_menu { width: 48px; height: 48px; border-radius: 50%; background-color: var(--dtlb-orange); display: flex; align-items: center; justify-content: center; }
.et_header_style_fullscreen .et_slide_in_menu_container .et_toggle_fullscreen_menu:before { color: var(--dtlb-black) !important; font-size: 26px; position: static; }
/* Stat tiles: quotes left-aligned throughout, author on its own line, left */
body #page-container .dtlb-tiles .et_pb_testimonial,
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_description,
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_description_inner,
body #page-container .dtlb-tiles .et_pb_testimonial p { text-align: left !important; }
body #page-container .dtlb-tiles .et_pb_testimonial:before { margin: 0 0 var(--s2) 0; }
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_author,
body #page-container .dtlb-tiles .et_pb_testimonial .et_pb_testimonial_meta { display: block; text-align: left !important; float: none; margin: var(--s2) 0 0; font-style: normal; }
body #page-container .dtlb-tiles .et_pb_text:not(:last-child),
body #page-container .dtlb-tiles .et_pb_text:not(:last-child) p { text-align: left !important; }
/* Stat tiles: quote icon as a 32px disc (not stretched), responsive columns and figure size */
body #page-container .dtlb-tiles .et_pb_testimonial { align-items: flex-start; }
body #page-container .dtlb-tiles .et_pb_testimonial:before { flex: none; width: 32px; height: 32px; line-height: 32px; border-radius: 16px; display: block; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(88px, 10vw, 220px); }
@media (max-width: 1440px) and (min-width: 981px) {
body #page-container .dtlb-tiles .et_pb_row .et_pb_column { width: 50% !important; margin-right: 0 !important; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(120px, 16vw, 220px); }
}
@media (max-width: 980px) {
body #page-container .dtlb-tiles .et_pb_row .et_pb_column { width: 50% !important; margin-right: 0 !important; aspect-ratio: 1 / 1; min-height: 0; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(96px, 16vw, 180px); }
}
@media (max-width: 767px) {
body #page-container .dtlb-tiles .et_pb_row .et_pb_column { width: 100% !important; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(120px, 30vw, 200px); }
}
/* ============================================================
Stat tiles v2: content stays in flow, so a tile grows with its text.
Square by default (aspect-ratio), taller when the content needs it;
flex row keeps every tile in a row the same height.
============================================================ */
body #page-container .dtlb-tiles .et_pb_row { display: flex; flex-wrap: wrap; align-items: stretch; }
body #page-container .dtlb-tiles .et_pb_row .et_pb_column { float: none; display: grid !important; grid-template-rows: 1fr auto; align-items: center; aspect-ratio: 1 / 1; height: auto !important; min-height: auto; padding: var(--s3); margin: 0 !important; position: relative !important; overflow: visible; }
body #page-container .dtlb-tiles .et_pb_column > .et_pb_module { position: static !important; inset: auto !important; margin: 0 !important; padding: 0; width: 100%; }
body #page-container .dtlb-tiles .et_pb_number_counter { display: block; text-align: center; align-self: center; }
body #page-container .dtlb-tiles .et_pb_testimonial { display: block; align-self: start; }
body #page-container .dtlb-tiles .et_pb_testimonial:before { position: static; display: block; margin: 0 0 var(--s2) 0; }
body #page-container .dtlb-tiles .et_pb_text:last-child { align-self: end; margin-top: var(--s3) !important; }
body #page-container .dtlb-tiles .et_pb_text:not(:last-child) { display: block; align-self: center; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(80px, 8.5vw, 220px); line-height: 0.85; }
@media (max-width: 1440px) { body #page-container .dtlb-tiles .et_pb_row .et_pb_column { width: 50% !important; } body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(96px, 13vw, 220px); } }
@media (max-width: 767px) { body #page-container .dtlb-tiles .et_pb_row .et_pb_column { width: 100% !important; } body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(120px, 26vw, 200px); } }
/* Stat tiles v3: no forced square. Height = content, with a floor. Number top-left, label bottom-left. */
body #page-container .dtlb-tiles .et_pb_row .et_pb_column { aspect-ratio: auto; min-height: 380px; grid-template-rows: auto 1fr auto; align-items: start; }
body #page-container .dtlb-tiles .et_pb_number_counter { text-align: left; align-self: start; }
body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(120px, 11vw, 240px); line-height: 0.8; }
body #page-container .dtlb-tiles .et_pb_testimonial { align-self: start; }
body #page-container .dtlb-tiles .et_pb_text:not(:last-child) { align-self: start; }
body #page-container .dtlb-tiles .et_pb_text:last-child { grid-row: 3; align-self: end; }
@media (max-width: 1440px) { body #page-container .dtlb-tiles .et_pb_row .et_pb_column { min-height: 400px; } body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(140px, 19vw, 260px); } }
@media (max-width: 767px) { body #page-container .dtlb-tiles .et_pb_row .et_pb_column { min-height: 320px; } body #page-container .dtlb-tiles .et_pb_number_counter .percent p { font-size: clamp(120px, 32vw, 220px); } }
/* News rows: 42px gutter between image and text (the library rows were built with no gutter) */
body #page-container .dtlb-news .et_pb_column + .et_pb_column { padding-left: var(--s4); }
@media (max-width: 980px) { body #page-container .dtlb-news .et_pb_column + .et_pb_column { padding-left: 0; padding-top: var(--s3); } }
/* Text colour comes from the section/module (dark sections keep their white text); body default stays black */
body { color: var(--dtlb-black); }
/* Newsletter (footer) button: orange accent, inline width, left aligned. Hover: white */
body #page-container .et_pb_newsletter_button_wrap { text-align: left; }
body #page-container .et_pb_newsletter_button.et_pb_button { display: inline-block; width: auto; background-color: var(--dtlb-orange); color: var(--dtlb-black); margin-top: var(--s2); }
body #page-container .et_pb_newsletter_button.et_pb_button:hover { background-color: var(--dtlb-white); color: var(--dtlb-black); }
body #page-container .et_pb_newsletter_button.et_pb_button:after { color: var(--dtlb-black); }
body #page-container .et_pb_newsletter_form .et_pb_newsletter_field { margin-bottom: 0; }
/* Logo row: images only. No label, no hover state */
body #page-container .dtlb-logo .et_pb_blurb_content .et_pb_module_header,
body #page-container .dtlb-logo .et_pb_blurb_description { display: none; }
body #page-container .dtlb-logo .et_pb_main_blurb_image { margin: 0; }
body #page-container .dtlb-logo .et_pb_main_blurb_image img,
body #page-container .dtlb-logo:hover .et_pb_main_blurb_image img { background: transparent; transition: none; }
/* Filterable grids: hide the category filter bar until there are real sub-categories */
body #page-container .et_pb_portfolio_filters { display: none; }
/* Newsletter button icon: same size and gap as every other button (Divi sets it to 32px) */
body #page-container .et_pb_newsletter_button.et_pb_button:after { font-size: 16px !important; margin-left: 0.5em !important; line-height: 1; } /* Divi leaves a whitespace node (~0.6em) before the icon, so 0.5em lands on the same 1.1em gap as other buttons */
/* ============================================================
Buttons v2 — two types only.
Primary: filled black (orange in footer), 16px/500 uppercase, 14x36 padding, icon 16px, 1.1em gap.
Secondary (arrow link): no fill, no side padding, 16px/800 uppercase, solid arrow 16px, 1.1em gap.
============================================================ */
body #page-container .et_pb_button,
body #page-container .et_pb_slider .et_pb_more_button,
body #page-container .et_pb_newsletter_button.et_pb_button,
body #page-container .et_pb_contact_submit { font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; }
body #page-container .et_pb_button:after,
body #page-container .et_pb_slider .et_pb_more_button:after,
body #page-container .et_pb_newsletter_button.et_pb_button:after,
body #page-container .et_pb_contact_submit:after { font-size: 16px !important; line-height: 1 !important; margin-left: 1.1em !important; opacity: 1 !important; display: inline-block !important; position: relative !important; right: auto !important; vertical-align: middle; transform: translateY(-2px); }
body #page-container .et_pb_newsletter_button.et_pb_button:after { margin-left: 1.1em !important; }
body #page-container a.et_pb_button.dtlb-arrow { font-weight: 800 !important; padding: 0 !important; background: transparent !important; color: var(--dtlb-black) !important; }
body #page-container a.et_pb_button.dtlb-arrow:hover { color: var(--dtlb-orange) !important; }
body #page-container a.et_pb_button.dtlb-arrow:after { content: "\f061" !important; font-family: "FontAwesome" !important; font-weight: 900 !important; color: inherit !important; }
/* Button icon nudges 12px right on hover (both types); button width stays fixed */
body #page-container .et_pb_button:after,
body #page-container .et_pb_slider .et_pb_more_button:after,
body #page-container .et_pb_newsletter_button.et_pb_button:after,
body #page-container .et_pb_contact_submit:after { transition: transform .2s ease !important; }
body #page-container .et_pb_button:hover:after,
body #page-container .et_pb_slider .et_pb_more_button:hover:after,
body #page-container .et_pb_newsletter_button.et_pb_button:hover:after,
body #page-container .et_pb_contact_submit:hover:after { transform: translate(12px, -2px) !important; }
/* Primary button icon follows the text colour: white on black, black on orange hover */
body #page-container .et_pb_button:not(.dtlb-arrow):after,
body #page-container .et_pb_slider .et_pb_more_button:after,
body #page-container .et_pb_contact_submit:after { color: inherit !important; }
body #page-container .et_pb_button:not(.dtlb-arrow):not(.et_pb_newsletter_button),
body #page-container .et_pb_slider .et_pb_more_button,
body #page-container .et_pb_contact_submit { color: var(--dtlb-white) !important; background-color: var(--dtlb-black) !important; }
body #page-container .et_pb_button:not(.dtlb-arrow):not(.et_pb_newsletter_button):hover,
body #page-container .et_pb_slider .et_pb_more_button:hover,
body #page-container .et_pb_contact_submit:hover { color: var(--dtlb-black) !important; background-color: var(--dtlb-orange) !important; }
body #page-container .et_pb_newsletter_button.et_pb_button { color: var(--dtlb-black) !important; background-color: var(--dtlb-orange) !important; }
body #page-container .et_pb_newsletter_button.et_pb_button:hover { background-color: var(--dtlb-white) !important; }
/* ---------- Grid tile hover: fixed frame, image zooms 4%, arrow appears after the title ---------- */
body #page-container .et_pb_portfolio_item .et_portfolio_image,
body #page-container .et_pb_portfolio_item .et_pb_portfolio_image { position: relative; overflow: hidden; display: block; }
body #page-container .et_pb_portfolio_item .et_portfolio_image img,
body #page-container .et_pb_portfolio_item .et_pb_portfolio_image img { transition: transform .45s cubic-bezier(.2,.7,.2,1); will-change: transform; }
body #page-container .et_pb_portfolio_item:hover .et_portfolio_image img,
body #page-container .et_pb_portfolio_item:hover .et_pb_portfolio_image img { transform: scale(1.04); }
body #page-container .et_pb_portfolio_item .et_overlay,
body #page-container .et_pb_portfolio_item .et_overlay:before { display: none !important; }
body #page-container .et_pb_portfolio_item h2 a,
body #page-container .et_pb_portfolio_item .et_pb_module_header a { display: inline-block; color: var(--dtlb-black); transition: color .2s ease; }
body #page-container .et_pb_portfolio_item h2 a:after,
body #page-container .et_pb_portfolio_item .et_pb_module_header a:after { content: ""; width: 14px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; display: inline-block; margin-left: 1.1em; vertical-align: middle; transform: translate(-6px, -2px); opacity: 0; transition: opacity .2s ease, transform .2s ease; }
body #page-container .et_pb_portfolio_item:hover h2 a:after,
body #page-container .et_pb_portfolio_item:hover .et_pb_module_header a:after { opacity: 1; transform: translate(0, -2px); }
/* Grid tile, 2-up variant (module_class dtlb-grid-2) */
body #page-container .dtlb-grid-2 .et_pb_portfolio_item { width: calc((100% - var(--gutter)) / 2) !important; margin: 0 var(--gutter) var(--gutter) 0 !important; clear: none !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item:nth-child(2n) { margin-right: 0 !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item:nth-child(3n) { margin-right: var(--gutter) !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item:nth-child(6n) { margin-right: 0 !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item:nth-child(3n+1) { clear: none !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item:nth-child(2n+1) { clear: both !important; }
body #page-container .dtlb-grid-2 .et_pb_portfolio_item h2 { font-size: 22px; margin-top: var(--s2); }
@media (max-width: 767px) { body #page-container .dtlb-grid-2 .et_pb_portfolio_item { width: 100% !important; margin-right: 0 !important; } }
/* Grid tiles: heavier title, two-line excerpt under it */
body #page-container .et_pb_portfolio_item h2,
body #page-container .et_pb_portfolio_item .et_pb_module_header { font-weight: 600; }
body #page-container .et_pb_portfolio_item .dtlb-excerpt { font-size: 16px; line-height: 1.5; margin: var(--s1) 0 0; color: var(--dtlb-black); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Hero: diagonal scrim (bottom-left dark to top-right clear) between the slides and the text layer */
body #page-container .dtlb-hero { position: relative; }
body #page-container .dtlb-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: linear-gradient(45deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0) 72%); }
body #page-container .dtlb-hero .et_pb_slider { position: relative; z-index: 1; }
/* Type scale v1.1: tighter leading on T1 (h2) and T2 (h4), everywhere they appear */
body #page-container h2, body #page-container .et_pb_slide_content h2 { line-height: 1.08 !important; }
body #page-container h4 { line-height: 1.1 !important; }
/* ============================================================
Mosaic grids (Programs & Directory concept) — one Portfolio module,
tile sizes vary in a repeating rhythm on a 6-column / 42px grid.
Row heights stay aligned because wide tiles use 16:9 and narrow
tiles beside them use 8:9 (same rendered height).
============================================================ */
body #page-container .dtlb-mosaic .et_pb_portfolio_grid_items,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_grid_items { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
body #page-container .dtlb-mosaic .et_pb_portfolio_item,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; grid-column: span 2; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item img,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item img { aspect-ratio: 3 / 2; }
/* Programs: 9-tile rhythm [4|2] [2|2|2] [3|3] [2|4] */
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1),
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9) { grid-column: span 4; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1) img,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9) img { aspect-ratio: 16 / 9; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+2) img,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+8) img { aspect-ratio: 21 / 25; } /* matches the 16:9 neighbour's height once the gutter is accounted for */
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+6),
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+7) { grid-column: span 3; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1) h2,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9) h2,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+6) h2,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+7) h2 { font-size: 24px; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1) .dtlb-excerpt,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9) .dtlb-excerpt { -webkit-line-clamp: 3; font-size: 18px; max-width: 60ch; }
/* Directory: 8-tile rhythm [3|3] [2|2|2] [2|2|2] */
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+1),
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+2) { grid-column: span 3; }
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+1) h2,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+2) h2 { font-size: 22px; }
/* Section header for these: orange label + title + lead, lead capped at a measure */
body #page-container .dtlb-section-head h6 { margin-bottom: var(--s2); }
body #page-container .dtlb-section-head p { max-width: 60ch; }
@media (max-width: 980px) {
body #page-container .dtlb-mosaic .et_pb_portfolio_grid_items,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_grid_items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
body #page-container .dtlb-mosaic .et_pb_portfolio_item,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item { grid-column: span 1 !important; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1),
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9),
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+1) { grid-column: span 2 !important; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item img,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item img { aspect-ratio: 3 / 2 !important; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+1) img,
body #page-container .dtlb-mosaic .et_pb_portfolio_item:nth-child(9n+9) img,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item:nth-child(8n+1) img { aspect-ratio: 16 / 9 !important; }
}
@media (max-width: 767px) {
body #page-container .dtlb-mosaic .et_pb_portfolio_grid_items,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_grid_items { grid-template-columns: 1fr; }
body #page-container .dtlb-mosaic .et_pb_portfolio_item,
body #page-container .dtlb-mosaic-dir .et_pb_portfolio_item { grid-column: span 1 !important; }
}
/* ---------- Hand-built galleries (10 Degrees Cooler): aligned rows, system gutter ---------- */
body #page-container .dtlb-gallery .et_pb_column { margin-right: var(--gutter) !important; }
body #page-container .dtlb-gallery .et_pb_column:last-child { margin-right: 0 !important; }
body #page-container .dtlb-gallery-2 .et_pb_column { width: calc((100% - var(--gutter)) / 2) !important; }
body #page-container .dtlb-gallery-3 .et_pb_column { width: calc((100% - 2 * var(--gutter)) / 3) !important; }
body #page-container .dtlb-gallery-2 .et_pb_image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
body #page-container .dtlb-gallery-3 .et_pb_image img { aspect-ratio: 2 / 3; object-fit: contain; width: 100%; background: var(--dtlb-surface); }
body #page-container .dtlb-gallery .et_pb_image { margin-bottom: var(--s2) !important; }
body #page-container .dtlb-gallery .et_pb_text { font-size: 16px; }
body #page-container .dtlb-gallery .et_pb_text p { margin: 0; }
body #page-container .dtlb-gallery .et_pb_text + .et_pb_image { margin-top: var(--s4); }
body #page-container .dtlb-lead-plain { padding-top: calc(104px + var(--s6)); }
@media (max-width: 980px) { body #page-container .dtlb-gallery-3 .et_pb_column { width: calc((100% - var(--gutter)) / 2) !important; } body #page-container .dtlb-gallery-3 .et_pb_column:nth-child(2n) { margin-right: 0 !important; } body #page-container .dtlb-gallery-3 .et_pb_column:nth-child(3n) { margin-right: var(--gutter) !important; } }
@media (max-width: 767px) { body #page-container .dtlb-gallery .et_pb_column { width: 100% !important; margin-right: 0 !important; margin-bottom: var(--s3) !important; } body #page-container .dtlb-lead-plain { padding-top: calc(80px + var(--s5)); } }
/* Secondary button, back variant: arrow before the text */
body #page-container a.et_pb_button.dtlb-arrow.dtlb-arrow-back:after { display: none !important; }
body #page-container a.et_pb_button.dtlb-arrow.dtlb-arrow-back:before { content: "\f060"; font-family: "FontAwesome"; font-weight: 900; font-size: 16px; line-height: 1; display: inline-block !important; opacity: 1 !important; position: static !important; margin-right: 1.1em; vertical-align: middle; transform: translateY(-2px); transition: transform .2s ease; }
body #page-container a.et_pb_button.dtlb-arrow.dtlb-arrow-back:hover:before { transform: translate(-12px, -2px); }
/* Entry template (directory / program pages): featured image, 3:2 */
body #page-container .dtlb-entry-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
body #page-container .dtlb-entry-image { margin-bottom: var(--s4) !important; }
/* ============================================================
Program entry template
============================================================ */
body #page-container .dtlb-program-hero { position: relative; min-height: 70vh; display: flex; align-items: flex-end; background: var(--dtlb-black) center / cover no-repeat; color: var(--dtlb-white); }
body #page-container .dtlb-program-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 80%); }
body #page-container .dtlb-program-hero__inner { position: relative; width: 89%; max-width: 1280px; margin: 0 auto; padding: calc(104px + var(--s6)) 0 var(--s6); }
body #page-container .dtlb-program-hero h6 { color: var(--dtlb-orange); margin-bottom: var(--s2); }
body #page-container .dtlb-program-hero h1 { font-size: 120px; line-height: 0.8; color: var(--dtlb-white); max-width: 14ch; }
body #page-container .dtlb-program-lead { font-size: 24px; line-height: 1.3; max-width: 44ch; margin-top: var(--s3); color: var(--dtlb-white); }
body #page-container .dtlb-program-hero--plain { min-height: 0; color: var(--dtlb-black); }
body #page-container .dtlb-program-hero--plain::before { display: none; }
body #page-container .dtlb-program-hero--plain h1, body #page-container .dtlb-program-hero--plain .dtlb-program-lead { color: var(--dtlb-black); }
body #page-container .dtlb-program-section-hero { padding: 0 !important; }
body #page-container .dtlb-program-section-hero .et_pb_row { width: 100%; max-width: none; }
body #page-container .dtlb-program-section-hero .et_pb_code_inner { width: 100%; }
body #page-container .dtlb-details { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: flex-end; }
body #page-container .dtlb-details__item { flex: 1 1 200px; }
body #page-container .dtlb-details__item h6 { margin-bottom: var(--s1); }
body #page-container .dtlb-details__item p { margin: 0; font-size: 18px; }
body #page-container .dtlb-details__cta { flex: 0 0 auto; }
body #page-container .dtlb-program-section-details { padding-top: var(--s5) !important; padding-bottom: var(--s5) !important; }
body #page-container a.et_pb_button.dtlb-primary:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; }
/* Related programs: 4 across */
body #page-container .dtlb-grid-related .et_pb_portfolio_item { width: calc((100% - 3 * var(--gutter)) / 4) !important; margin: 0 var(--gutter) var(--gutter) 0 !important; clear: none !important; }
body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(3n) { margin-right: var(--gutter) !important; }
body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(4n) { margin-right: 0 !important; }
body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(3n+1) { clear: none !important; }
body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(4n+1) { clear: both !important; }
body #page-container .dtlb-grid-related .dtlb-excerpt { display: none; }
@media (max-width: 980px) { body #page-container .dtlb-program-hero h1 { font-size: 80px; } body #page-container .dtlb-grid-related .et_pb_portfolio_item { width: calc((100% - var(--gutter)) / 2) !important; } body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(2n) { margin-right: 0 !important; } body #page-container .dtlb-grid-related .et_pb_portfolio_item:nth-child(2n+1) { clear: both !important; } }
@media (max-width: 767px) { body #page-container .dtlb-program-hero { min-height: 60vh; } body #page-container .dtlb-program-hero h1 { font-size: 64px; } body #page-container .dtlb-program-lead { font-size: 18px; } body #page-container .dtlb-grid-related .et_pb_portfolio_item { width: 100% !important; margin-right: 0 !important; } }
/* Program details section collapses when no fields are filled */
body #page-container .dtlb-program-section-details:has(.dtlb-none) { display: none; }
body #page-container .dtlb-program-hero h6 { opacity: 1; }
/* Inline links: orange, everywhere in body copy */
body #page-container .et_pb_text a, body #page-container .et_pb_post_content a, body #page-container .dtlb-excerpt a { color: var(--dtlb-orange); text-decoration: none; }
body #page-container .et_pb_text a:hover, body #page-container .et_pb_post_content a:hover { text-decoration: none; color: var(--dtlb-black); }
/* ============================================================
Content width (system): every row sits on the same measure.
Full-bleed sections (hero, stats tiles, program hero) opt out.
============================================================ */
body #page-container .et_pb_row { width: var(--content-w) !important; max-width: var(--content) !important; margin-left: auto !important; margin-right: auto !important; }
body #page-container .dtlb-lead .et_pb_row { width: var(--content-w); max-width: var(--content); }
body #page-container .dtlb-program-hero__inner { width: var(--content-w); max-width: var(--content); }
body #page-container .dtlb-tiles .et_pb_row,
body #page-container .dtlb-program-section-hero .et_pb_row,
body #page-container .dtlb-hero .et_pb_row { width: 100% !important; max-width: none !important; }
body #page-container .dtlb-hero-text .et_pb_row { width: var(--content-w) !important; max-width: var(--content) !important; }
@media (max-width: 767px) { :root { --content-w: 89%; } }
:root { --content: 1240px; --content-w: 84%; }
/* Rows nested inside Post Content (program pages) already sit in a measured row: fill it */
body #page-container .et_pb_post_content .et_pb_row { width: 100% !important; max-width: none !important; }
body #page-container .et_pb_post_content .et_pb_section { padding-left: 0; padding-right: 0; }
/* Page canvas: black behind everything (overscroll, the strip under the fixed header), white only where content lives */
html, body { background-color: var(--dtlb-black) !important; }
body #page-container { background-color: transparent !important; }
body #main-content { background-color: var(--dtlb-white); }
/* Theme Builder / Events Calendar pages have no #main-content: the whole content area is white, the footer stays black */
body #et-main-area { background-color: var(--dtlb-white); }
body #et-main-area > .et-l--footer { background-color: var(--dtlb-black); }
body #main-footer { background-color: var(--dtlb-black); }
/* ---------- Footer layout ---------- */
/* Left column: logo, Contact Us, social icons (modules 24 apart). Right column: signup, with the first line's
cap height aligned to the top of the logo (the text box is pulled up by its half-leading + ascender gap). */
body .et-l--footer .et_pb_social_media_follow_0_tb_footer {
display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--s1); text-align: left; margin: 0 !important; padding: 0;
}
body .et-l--footer .et_pb_social_media_follow_0_tb_footer li { margin: 0 !important; }
body .et-l--footer .et_pb_text_1_tb_footer { margin-top: 0 !important; }
body #page-container .et-l--footer .et_pb_text_1_tb_footer p:first-child { margin-top: -0.333em !important; }
@media (max-width: 980px) {
body #page-container .et-l--footer .et_pb_text_1_tb_footer p:first-child { margin-top: 0 !important; }
body .et-l--footer .et_pb_column_0_tb_footer { margin-bottom: var(--s5) !important; } /* stacked: space between the two groups */
body .et-l--footer .et_pb_column_1_tb_footer { display: none; }
}
/* ---------- Icon font ---------- */
/* Divi only loads its icon font on pages that contain Divi buttons, so arrows on other pages (404, some templates)
showed as boxes. Registering Divi's own Font Awesome files here makes the arrows available everywhere. */
@font-face {
font-family: "FontAwesome"; font-style: normal; font-weight: 900; font-display: block;
src: url("/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff2") format("woff2"), url("/wp-content/themes/Divi/core/admin/fonts/fontawesome/fa-solid-900.woff") format("woff");
}
/* ---------- 404 page ---------- */
body.error404 #main-content .container { width: var(--content-w); max-width: var(--content); padding: var(--s6) 0; }
body.error404 #main-content .container:before { display: none; }
body.error404 #main-content #left-area { width: 100% !important; padding: 0 !important; float: none; }
body.error404 #sidebar { display: none; }
body.error404 #page-container .not-found-title { margin: 0 0 var(--s3); padding: 0; }
body.error404 #page-container .entry p { max-width: 60ch; margin: 0; }
/* ---------- Header: menu button + mobile logo ---------- */
/* Header uses the same content width as the page, so the logo and menu button line up with the content edges. */
#main-header .container { width: var(--content-w) !important; max-width: var(--content) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Divi's full-width header adds 30px side padding on desktop */
/* The hamburger glyph sits 0.69px above the centre of its own box; nudge it so the three lines are optically centred in the circle. */
/* Divi's logo markup leaves a space-width gap before the logo; remove it so the logo sits on the container edge, mirroring the button. */
#main-header .logo_container { font-size: 0; }
.mobile_menu_bar::before { transform: translateY(0.69px); }
@media (max-width: 980px) {
/* Mobile header as one centred row: logo left, button right, both 48px, equal padding above and below.
(Divi adds 24px bottom padding inside the button and positions the logo absolutely; both undone here.) */
#main-header .container { display: flex !important; align-items: center; justify-content: space-between; padding: var(--s2) 0 !important; min-height: 0 !important; height: auto !important; }
#main-header .logo_container { position: static !important; display: flex !important; align-items: center; height: auto !important; width: auto !important; }
#main-header .logo_container .logo_helper { display: none; }
.et_header_style_left #et-top-navigation { float: none !important; padding: 0 !important; display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }
.et_header_style_left #et-top-navigation .mobile_menu_bar { padding-bottom: 0 !important; }
#main-header .logo_container a { display: block; flex: none; }
#main-header #logo { height: 48px !important; max-height: 48px !important; width: auto !important; max-width: none !important; display: block; }
}
/* ---------- Links: never underline on hover (site-wide rule) ---------- */
/* Hover is always a colour change, never an underline or a line under the text. */
body a:hover, body a:focus, body a:active { text-decoration: none !important; }
body .tribe-common a.tribe-common-anchor-thin:hover, body .tribe-common a.tribe-common-anchor-thin:focus, body .tribe-common a.tribe-common-anchor-thin:active,
body .tribe-common a.tribe-common-anchor:hover, body .tribe-common a.tribe-common-anchor:focus,
body .tribe-events-content a:hover, body .tribe-events-content a:focus, body .tribe-events-content a:active {
border-bottom-color: transparent !important; box-shadow: none !important;
}
body .tribe-events-content a:hover { color: var(--dtlb-black); }
/* ============================================================
Mobile stacking (v2.9.14): stacked content never touches.
Divi's global gutter setting (1) removes the space between columns
once they stack (980px and below), so an image column lands flush on the
text column below it. Stacked columns now sit one module-gap (24)
apart, the same rhythm as modules inside a column.
============================================================ */
@media (max-width: 980px) {
body #page-container .et_pb_row > .et_pb_column:not(:last-child):not(.et_pb_column_empty) { margin-bottom: var(--s3) !important; }
/* Keep their own system spacing: stat tiles abut, footer groups are 64 apart */
body #page-container .dtlb-tiles .et_pb_row > .et_pb_column:not(:last-child) { margin-bottom: 0 !important; }
body #page-container .et-l--footer .et_pb_row > .et_pb_column_0_tb_footer { margin-bottom: var(--s5) !important; }
/* News rows already add 24 above the text column; the column gap now does that */
body #page-container .dtlb-news .et_pb_column + .et_pb_column { padding-top: 0; }
}
/* Headings in Text modules keep their gap even when the copy below is
wrapped in extra markup (pasted text) rather than a bare paragraph */
body #page-container .et_pb_text h2 + :not(p),
body #page-container .et_pb_text h3 + :not(p),
body #page-container .et_pb_text h5 + :not(p) { margin-top: var(--s3); }
body #page-container .et_pb_text h4 + :not(p) { margin-top: var(--s2); }
/* Back link: the arrow sits on the content edge. Divi pulls a leading
button icon 1em outside the button; cancel that so the arrow, not the
text, aligns with the content below. */
body #page-container a.et_pb_button.dtlb-arrow.dtlb-arrow-back:before { margin-left: 0 !important; left: auto !important; }
/* ---------- Logo grids on tablet and phone: two across ----------
The 1/5 columns stack to full width once the screen narrows, so each logo filled the screen.
The grid steps 3 / 2 / 1 elsewhere; logos stay at 2 down to phone. The logo rows in a
section join one continuous two-column grid, so a row of five never leaves a logo alone. */
@media (max-width: 980px) {
body #page-container .et_pb_section:has(> .dtlb-logo-grid) {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0;
padding-left: calc((100% - min(var(--content-w), var(--content))) / 2) !important;
padding-right: calc((100% - min(var(--content-w), var(--content))) / 2) !important;
}
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row:not(.dtlb-logo-grid) { grid-column: 1 / -1; width: 100% !important; max-width: none !important; }
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row.dtlb-logo-grid { display: contents; }
/* Divi's clearfix pseudo-elements would become grid cells once the row dissolves */
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row.dtlb-logo-grid::before,
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row.dtlb-logo-grid::after { display: none !important; content: none !important; }
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row.dtlb-logo-grid > .et_pb_column { width: auto !important; float: none !important; margin: 0 0 var(--gutter) !important; }
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row.dtlb-logo-grid > .et_pb_column_empty { display: none !important; }
/* Title to logos keeps the 24 it had; the next title follows the logos' own gap */
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .et_pb_row:not(.dtlb-logo-grid):has(+ .dtlb-logo-grid) { margin-bottom: var(--s3); }
body #page-container .et_pb_section:has(> .dtlb-logo-grid) > .dtlb-logo-grid + .et_pb_row:not(.dtlb-logo-grid) { margin-top: 0 !important; }
body #page-container .et_pb_section:has(> .dtlb-logo-grid:last-child) { padding-bottom: calc(var(--s6) - var(--gutter)) !important; }
}
@media (max-width: 767px) {
body #page-container .et_pb_section:has(> .dtlb-logo-grid:last-child) { padding-bottom: calc(var(--s5) - var(--gutter)) !important; }
}
/* ============================================================
Single event page (Events Calendar template), mapped to the system:
content measure, section padding, arrow links, label headings.
============================================================ */
body #tribe-events-pg-template { width: var(--content-w); max-width: var(--content) !important; margin: 0 auto; padding: var(--s6) 0 !important; }
@media (max-width: 767px) { body #tribe-events-pg-template { padding: var(--s5) 0 !important; } }
body #tribe-events-pg-template .tribe-events-single { padding: 0; margin: 0; }
/* Back link: secondary button, back variant */
body #tribe-events-pg-template .tribe-events-back { margin: 0 0 var(--s4); padding: 0; line-height: 1.2; }
body #tribe-events-pg-template .tribe-events-back a { font-size: 0; color: var(--dtlb-black); text-decoration: none; transition: color .2s ease; }
body #tribe-events-pg-template .tribe-events-back a:before { content: "\f060"; font-family: "FontAwesome"; font-weight: 900; font-size: 16px; line-height: 1; display: inline-block; margin-right: 1.1em; vertical-align: middle; transform: translateY(-2px); transition: transform .2s ease; }
body #tribe-events-pg-template .tribe-events-back a:after { content: "All events"; font-family: var(--dtlb-mono); font-size: 16px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; }
body #tribe-events-pg-template .tribe-events-back a:hover { color: var(--dtlb-orange); }
body #tribe-events-pg-template .tribe-events-back a:hover:before { transform: translate(-12px, -2px); }
/* Title, date, poster */
body #page-container #tribe-events-pg-template h1.tribe-events-single-event-title { margin: 0; padding: 0; }
body #tribe-events-pg-template .tribe-events-schedule { margin: var(--s3) 0 0; padding: 0; }
body #tribe-events-pg-template .tribe-events-schedule, body #tribe-events-pg-template .tribe-events-schedule * { font-family: var(--dtlb-mono) !important; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--dtlb-black); }
body #tribe-events-pg-template .tribe-events-event-image { margin: var(--s4) 0; }
body #tribe-events-pg-template .tribe-events-event-image img { display: block; width: 100%; height: auto; }
/* Description: Divi rows inside it fill the measure (no second inset); paragraphs on the text rhythm */
body #page-container .tribe-events-single-event-description .et_pb_section { padding: 0 !important; border: 0 !important; background: transparent; }
body #page-container .tribe-events-single-event-description .et_pb_row { width: 100% !important; max-width: none !important; padding: 0 !important; }
body #page-container .tribe-events-single-event-description a:not(.small-button) { border-bottom: 0 !important; box-shadow: none !important; }
body #page-container .tribe-events-single-event-description p { padding: 0; margin: 0 0 var(--s2); font-size: 18px; line-height: 1.5; }
body #page-container .tribe-events-single-event-description p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { body #page-container .tribe-events-single-event-description p { font-size: 16px; } }
/* Old coloured "small-button" links in event copy: secondary arrow links */
body #page-container .tribe-events-single-event-description a.small-button {
display: inline-block; margin: 0; padding: 0; background: none !important; border: 0 !important; border-radius: 0; box-shadow: none !important; text-shadow: none !important;
font-family: var(--dtlb-mono); font-size: 16px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
color: var(--dtlb-black) !important; text-decoration: none; transition: color .2s ease;
}
body #page-container .tribe-events-single-event-description a.small-button:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; font-size: 16px; line-height: 1; display: inline-block; margin-left: 1.1em; vertical-align: middle; transform: translateY(-2px); transition: transform .2s ease; }
body #page-container .tribe-events-single-event-description a.small-button:hover { color: var(--dtlb-orange) !important; }
body #page-container .tribe-events-single-event-description a.small-button:hover:after { transform: translate(12px, -2px); }
/* Add to calendar, details, venue */
body #tribe-events-pg-template .tribe-events-c-subscribe-dropdown__container { margin: var(--s4) 0 0; }
body #tribe-events-pg-template .tribe-events-single-section.tribe-events-event-meta { margin: var(--s5) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--dtlb-rule); border-bottom: 0; background: transparent; }
body #tribe-events-pg-template .tribe-events-single-section-title {
font-family: var(--dtlb-mono) !important; font-size: 16px !important; font-weight: 500 !important; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2 !important;
color: var(--dtlb-orange) !important; margin: 0 0 var(--s2) !important; padding: 0 !important;
}
body #tribe-events-pg-template .tribe-events-event-meta dl, body #tribe-events-pg-template .tribe-events-event-meta dt, body #tribe-events-pg-template .tribe-events-event-meta dd,
body #tribe-events-pg-template .tribe-events-event-meta .tribe-venue, body #tribe-events-pg-template .tribe-events-event-meta .tribe-venue-location, body #tribe-events-pg-template .tribe-events-event-meta address {
font-family: var(--dtlb-mono) !important; font-size: 16px; line-height: 1.5; color: var(--dtlb-black);
}
body #tribe-events-pg-template .tribe-events-event-meta abbr { text-decoration: none; border: 0; }
body #tribe-events-pg-template .tribe-events-meta-group { margin: 0 0 var(--s4); padding: 0; }
body #tribe-events-pg-template .tribe-events-venue-map { margin: 0 0 var(--s4); }
/* Previous / next event: arrow links, on the post-nav pattern */
body #tribe-events-pg-template #tribe-events-footer { margin: var(--s2) 0 0; padding: var(--s4) 0 0; border-top: 1px solid var(--dtlb-rule); }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); margin: 0; padding: 0; list-style: none; }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav li { margin: 0; padding: 0; width: auto; float: none; }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-nav-next { grid-column: 2; text-align: right; }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a:before, body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a:after { flex: none; }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a {
display: inline-flex; align-items: baseline; font-family: var(--dtlb-mono) !important; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
color: var(--dtlb-black) !important; text-decoration: none; transition: color .2s ease;
}
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a span,
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a svg { display: none !important; }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-nav-previous a:before { content: "\f060"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-right: 1.1em; vertical-align: middle; transform: translateY(-2px); }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-nav-next a:after { content: "\f061"; font-family: "FontAwesome"; font-weight: 900; display: inline-block; margin-left: 1.1em; vertical-align: middle; transform: translateY(-2px); }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav a:hover { color: var(--dtlb-orange) !important; }
@media (max-width: 767px) {
body #tribe-events-pg-template #tribe-events-footer .tribe-events-sub-nav { grid-template-columns: minmax(0, 1fr); row-gap: var(--s3); }
body #tribe-events-pg-template #tribe-events-footer .tribe-events-nav-next { grid-column: 1; text-align: left; }
}
/* ---------- News: press coverage (stories written by other publications) ----------
Posts with an Article link (Press coverage box) link out to the publication.
Kicker reads "Publication / date"; the lead story's link reads "Read on Publication". */
body #page-container .dtlb-news-grid .dtlb-source + .published:before { content: "/"; margin: 0 var(--s2); }
body #page-container .dtlb-news-lead .dtlb-press .post-meta:before { content: none; }
body #page-container .dtlb-news-lead a.more-link[data-source]:before { content: "Read on " attr(data-source); }
/* ---------- Portfolio tiles: full descriptions (v2.9.17) ----------
Directory listings show their whole description; program tiles show none (set in functions.php). */
body #page-container .et_pb_portfolio_item .dtlb-excerpt { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* ---------- Directory: filter by type ----------
Types are sub-categories of Directory: Design, Media/Advertising, Institutions, Fashion, Culinary, Makers.
The grid is a CSS grid so filtered results close up with no gaps. */
body #page-container .dtlb-directory .et_pb_portfolio_filters { display: block; margin: 0 0 var(--s4); }
body #page-container .dtlb-directory .et_pb_portfolio_filters ul { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0; padding: 0; list-style: none; }
body #page-container .dtlb-directory .et_pb_portfolio_filters ul::before,
body #page-container .dtlb-directory .et_pb_portfolio_filters ul::after { display: none; content: none; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li { float: none; margin: 0; padding: 0; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="directory"]) { display: none; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li a { display: block; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; line-height: 1.2; transition: color .2s ease; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li a:hover { color: var(--dtlb-orange); }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="design"]) { order: 1; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="media-advertising"]) { order: 2; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="institutions"]) { order: 3; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="fashion"]) { order: 4; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="culinary"]) { order: 5; }
body #page-container .dtlb-directory .et_pb_portfolio_filters li:has(> a[data-category-slug="makers"]) { order: 6; }
body #page-container .dtlb-directory .et_pb_portfolio_items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
body #page-container .dtlb-directory .et_pb_portfolio_items::before,
body #page-container .dtlb-directory .et_pb_portfolio_items::after { display: none; content: none; }
body #page-container .dtlb-directory .et_pb_portfolio_items .et_pb_portfolio_item { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
@media (max-width: 980px) { body #page-container .dtlb-directory .et_pb_portfolio_items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { body #page-container .dtlb-directory .et_pb_portfolio_items { grid-template-columns: minmax(0, 1fr); } }
/* ---------- Now & Social: Follow along (Instagram, LinkedIn) ----------
Label, then the two arrow links side by side; they wrap onto two lines on a phone. */
body #page-container .dtlb-social .et_pb_column { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s4); row-gap: var(--s2); }
body #page-container .dtlb-social .et_pb_column > .et_pb_text { flex: 0 0 100%; margin: 0; }
body #page-container .dtlb-social .et_pb_column > .et_pb_button_module_wrapper { margin: 0; }
/* ---------- Homepage News: one large + two small (v2.9.19) ----------
Three stories on the 3-column grid. The newest spans two columns at lead-story scale (56px title,
18px copy); the next two stack in the third column as compact cards (image, date, title; no
summary), one gutter apart, so the stack matches the height of the large story.
Tablet: large story full width, the two small ones side by side below. Phone: one column. */
body #page-container .dtlb-news-feature .column.size-1of1 { row-gap: var(--gutter); align-items: start; }
body #page-container .dtlb-news-feature .et_pb_post:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
body #page-container .dtlb-news-feature .et_pb_post:first-child .entry-title { font-size: 56px; line-height: 0.9; }
body #page-container .dtlb-news-feature .et_pb_post:first-child .post-content-inner p { font-size: 18px; max-width: 60ch; }
body #page-container .dtlb-news-feature .et_pb_post:not(:first-child) .post-content { display: none; }
body #page-container .dtlb-news-feature .et_pb_post:not(:first-child) .entry-title { margin-bottom: 0; }
@media (max-width: 980px) {
body #page-container .dtlb-news-feature .column.size-1of1 { row-gap: var(--s5); }
body #page-container .dtlb-news-feature .et_pb_post:first-child { grid-column: 1 / -1; grid-row: auto; }
body #page-container .dtlb-news-feature .et_pb_post:first-child .entry-title { font-size: 44px; }
}
@media (max-width: 767px) {
body #page-container .dtlb-news-feature .et_pb_post:first-child .entry-title { font-size: 34px; line-height: 0.95; }
body #page-container .dtlb-news-feature .et_pb_post:first-child .post-content-inner p { font-size: 16px; }
}