/* ==========================================================================
Speakers section — overrides theme stylesheet.css for the speakers grid
Markup:
!important is needed because stylesheet.css loads before this file and
styles .speaker-image-wrapper, .speaker-name, etc. for the old design
(circular avatars, pink bg, red border).
========================================================================== */
/* Heading wrapper */
.speakers { padding: 1rem 0 2rem; }
.speakers h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 900; color: #fff; text-align: center; letter-spacing: .02em; margin: 0; }
.speakers h1 sup { font-size: .55em; vertical-align: super; opacity: .7; }
/* Card text — wrap up to 2 lines, then ellipsis. Stops long titles
(e.g. "Author and Professor of Law and Health Science, University of
Surrey") from making cards 4+ lines tall and pushing the whole page
into a vertical scrollbar. The modal scope below re-enables full
unconstrained wrapping where the speaker bio lives. */
.speaker-name,
.speaker-name.text-ellipsis,
.speaker-position,
.speaker-position.text-ellipsis,
.speaker-company,
.speaker-company.text-ellipsis {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
}
/* Inside the modal, undo the line clamp so the full text shows. */
#speakerModal .modal-body .speaker-name,
#speakerModal .modal-body .speaker-position,
#speakerModal .modal-body .speaker-company {
display: block !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Vertical rhythm between speaker rows */
.row > .col-md-3:has(> .speaker-image-wrapper) { margin-bottom: 2.5rem; }
/* Photo wrapper — square, dark bg, slightly rounded (NOT circular) */
.speaker-image-wrapper {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
overflow: hidden !important;
border-radius: 2px !important;
border: 0 !important;
background-color: #11151d !important;
background-image: none !important;
margin: 0 auto 1rem !important;
padding: 0 !important;
box-shadow: none !important;
display: block !important;
transition: transform .25s ease;
}
.speaker-image-wrapper:hover { transform: translateY(-4px); }
/* Higher-specificity overrides for the and ![]()
inside the wrapper.
The old design styles a.modalLink with a pink bg + red ring + 50% radius;
these selectors must beat those rules. */
.speaker-image-wrapper a,
.speaker-image-wrapper a.modalLink,
div.speaker-image-wrapper a,
div.speaker-image-wrapper a.modalLink {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
}
.speaker-image-wrapper img,
.speaker-image-wrapper a img,
.speaker-image-wrapper a.modalLink img,
div.speaker-image-wrapper img,
div.speaker-image-wrapper a img,
div.speaker-image-wrapper a.modalLink img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
border-radius: 0 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: transparent !important;
outline: 0 !important;
}
/* Name */
.speaker-name {
font-size: 1rem !important;
font-weight: 700 !important;
color: #fff !important;
line-height: 1.3 !important;
margin: 0 0 .35rem !important;
padding: 0 !important;
text-align: center !important;
}
.speaker-name a { color: #fff !important; text-decoration: none !important; transition: color .2s ease; }
.speaker-name a:hover { color: #E34A21 !important; }
/* Position + Company */
.speaker-position {
font-size: .85rem !important;
color: rgba(255,255,255,.75) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
margin: 0 0 .25rem !important;
text-align: center !important;
}
.speaker-company {
font-size: .85rem !important;
color: rgba(255,255,255,.6) !important;
font-weight: 400 !important;
line-height: 1.4 !important;
margin: 0 !important;
text-align: center !important;
}
/* ==========================================================================
Speaker modal — #speakerModal in the page template
========================================================================== */
#speakerModal .modal-dialog,
.speaker-modal { max-width: 720px !important; }
#speakerModal .modal-content {
background: #1a1a1f !important;
color: #e6e8ec !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 16px !important;
overflow: hidden !important;
box-shadow: 0 30px 80px -20px rgba(0,0,0,.7) !important;
}
#speakerModal .modal-header {
border-bottom: 1px solid rgba(255,255,255,.08) !important;
padding: 1rem 1.5rem !important;
align-items: center !important;
background: #1a1a1f !important;
}
#speakerModal .modal-title {
color: #fff !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 !important;
text-align: left !important;
}
#speakerModal .btn-close {
filter: invert(1) grayscale(100%) brightness(2) !important;
opacity: .75 !important;
transition: opacity .15s ease !important;
}
#speakerModal .btn-close:hover { opacity: 1 !important; }
#speakerModal .modal-body { padding: 1.5rem 1.75rem 1.75rem !important; background: #1a1a1f !important; color: #e6e8ec !important; }
#speakerModal .modal-body .row { --bs-gutter-x: 2rem; }
/* Photo column (any width — col-lg-3, col-md-5, or .speaker-modal-left).
Force rectangular dark photo regardless of any other CSS in the theme. */
#speakerModal .modal-body .speaker-image-wrapper {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
overflow: hidden !important;
background-color: #11151d !important;
background-image: none !important;
border: 0 !important;
margin: 0 0 1rem !important;
padding: 0 !important;
box-shadow: none !important;
display: block !important;
}
#speakerModal .modal-body .speaker-image-wrapper a,
#speakerModal .modal-body .speaker-image-wrapper a.modalLink {
display: block !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
#speakerModal .modal-body .speaker-image-wrapper img,
#speakerModal .modal-body img.speaker-image,
#speakerModal .modal-body img.speaker-image.img-fluid {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
border-radius: 0 !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Speaker name in the body — bigger, bold, white */
#speakerModal .modal-body .speaker-name {
color: #fff !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin: 0 0 .35rem !important;
text-align: left !important;
text-transform: uppercase !important;
letter-spacing: .01em !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
#speakerModal .modal-body .speaker-name a { color: #fff !important; text-decoration: none !important; }
/* Position lines — white */
#speakerModal .modal-body .speaker-position {
color: #fff !important;
font-size: .9rem !important;
font-weight: 500 !important;
line-height: 1.55 !important;
margin: 0 0 .35rem !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* Company — softer white below position */
#speakerModal .modal-body .speaker-company {
color: rgba(255,255,255,.65) !important;
font-size: .85rem !important;
font-weight: 400 !important;
line-height: 1.45 !important;
margin: 0 0 1.25rem !important;
text-align: left !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
border-bottom: 1px solid rgba(255,255,255,.1) !important;
padding-bottom: 1rem !important;
}
/* Description / bio block */
#speakerModal .modal-body .speaker-description {
color: rgba(255,255,255,.75) !important;
font-size: .88rem !important;
line-height: 1.6 !important;
text-align: left !important;
}
#speakerModal .modal-body .speaker-description p { margin: 0 0 .65rem; color: rgba(255,255,255,.75); }
#speakerModal .modal-body .speaker-description p:last-child { margin-bottom: 0; }
/* "Speaker Involvement" heading + list (injected by speakers.js) */
#speakerModal .modal-body .speaker-involvement-title {
color: #fff !important;
font-size: .95rem !important;
font-weight: 700 !important;
margin: 1rem 0 .5rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
#speakerModal .modal-body .speaker-involvement-list {
color: #2dd17a !important;
font-size: .9rem !important;
line-height: 1.55 !important;
margin: 0 0 1rem !important;
padding: 0 !important;
list-style: none !important;
}
#speakerModal .modal-body .speaker-involvement-list .involvement-item {
margin: 0 0 .5rem !important;
padding: 0 !important;
}
/* Footer with orange Close button */
#speakerModal .modal-footer {
border-top: 1px solid rgba(255,255,255,.08) !important;
padding: 1rem 1.5rem !important;
justify-content: flex-end !important;
background: #1a1a1f !important;
}
#speakerModal .modal-footer .btn-secondary {
background: #E34A21 !important;
border-color: #E34A21 !important;
color: #fff !important;
font-weight: 600 !important;
font-size: .9rem !important;
padding: .55rem 2rem !important;
border-radius: 6px !important;
letter-spacing: .03em !important;
transition: background .2s ease, transform .15s ease !important;
}
#speakerModal .modal-footer .btn-secondary:hover {
background: #d63a14 !important;
border-color: #d63a14 !important;
transform: translateY(-1px) !important;
}
/* Backdrop slightly darker for contrast */
.modal-backdrop.show { opacity: .75 !important; }
/* Mobile — stack the columns */
@media (max-width: 575.98px) {
#speakerModal .modal-body .speaker-image-wrapper { aspect-ratio: 4 / 3 !important; max-width: 260px; margin-left: auto !important; margin-right: auto !important; }
}