.speakers {
--color-scheme-1-background: #1d0a5e;
--color-scheme-1-text: #ffe7d0;
--color-scheme-1-body: rgba(255, 231, 208, 0.8);
--opacity-white-30: rgba(255, 250, 245, 0.3);
--font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
--font-body: "General Sans", system-ui, sans-serif;
--text-sizes-heading-2: 48px;
--text-sizes-text-large: 20px;
--text-sizes-text-medium: 18px;
--text-sizes-text-small: 14px;
--page-padding-global: 64px;
--section-padding-large: 112px;
--container-large: 1280px;
--max-width-large: 768px;
--shadow-xlarge: 0 24px 48px -12px rgba(0, 0, 0, 0.18);
}
@media (max-width: 991px) {
.speakers {
--page-padding-global: 40px;
--section-padding-large: 80px;
}
}
@media (max-width: 479px) {
.speakers {
--page-padding-global: 20px;
--section-padding-large: 64px;
--text-sizes-heading-2: 36px;
}
}
.speakers {
position: relative;
background-color: var(--color-scheme-1-background);
background-image: url("/assets/img/speakers/speakers-bg-2576.webp");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
padding: var(--section-padding-large) var(--page-padding-global);
color: var(--color-scheme-1-text);
font-family: var(--font-body);
}
@media (max-width: 1439px) {
.speakers {
background-image: url("/assets/img/speakers/speakers-bg-1600.webp");
background-size: cover;
}
}
.speakers *,
.speakers *::before,
.speakers *::after {
box-sizing: border-box;
}
.speakers h2,
.speakers h3,
.speakers p,
.speakers ul {
margin: 0;
}
.speakers__container {
width: 100%;
max-width: var(--container-large);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 120px;
}
@media (max-width: 991px) {
.speakers__container {
gap: 96px;
}
}
.speakers .speakers__head {
width: 100%;
max-width: var(--max-width-large);
text-align: left;
align-self: flex-start;
}
.speakers .speakers__eyebrow {
display: block;
margin: 0 0 16px;
font-family: var(--font-body);
font-weight: 500;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0;
color: var(--color-scheme-1-body);
}
.speakers__heading {
width: 100%;
font-family: var(--font-heading);
font-weight: 500;
font-size: var(--text-sizes-heading-2);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-scheme-1-text);
}
.speakers__grid {
list-style: none;
padding: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 991px) {
.speakers__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
row-gap: 120px;
}
}
@media (max-width: 479px) {
.speakers__grid {
grid-template-columns: minmax(0, 1fr);
row-gap: 120px;
}
}
.speakers__card {
appearance: none;
background: none;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.speakers__card:focus-visible {
outline: 2px solid var(--color-scheme-1-text);
outline-offset: 8px;
}
.speakers__tile,
.speakers-modal__tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1 / 1;
overflow: visible;
}
.speakers__tile {
max-width: 280px;
margin-inline: auto;
}
.speakers__tile-img {
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: auto;
}
.speakers__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
width: 100%;
padding: 0 8px;
}
.speakers__title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
}
.speakers__icon {
display: inline-flex;
line-height: 0;
color: var(--color-scheme-1-text);
}
.speakers__name {
display: block;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--text-sizes-text-large);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--color-scheme-1-text);
text-decoration-line: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
@media (hover: hover) {
.speakers__card:hover .speakers__name {
text-decoration-color: currentColor;
}
}
.speakers__card:focus-visible .speakers__name {
text-decoration-color: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
.speakers__name {
transition: text-decoration-color 150ms ease-out;
}
}
.speakers__role {
display: block;
font-weight: 400;
font-size: var(--text-sizes-text-medium);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--color-scheme-1-text);
}
.speakers__bio {
display: block;
font-weight: 400;
font-size: var(--text-sizes-text-small);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--color-scheme-1-body);
}
.speakers__sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.speakers-modal {
padding: 0;
border: 0;
margin: auto;
background: transparent;
color: var(--color-scheme-1-text);
font-family: var(--font-body);
width: min(var(--container-large), calc(100% - (2 * var(--page-padding-global))));
max-width: none;
max-height: none;
overflow: visible;
}
.speakers-modal::backdrop {
background: var(--opacity-white-30, rgba(255, 250, 245, 0.3));
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.speakers-modal__panel {
position: relative;
width: 100%;
max-height: calc(100dvh - (2 * var(--page-padding-global)));
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--color-scheme-1-background);
padding: var(--section-padding-large) var(--page-padding-global);
box-shadow: var(--shadow-xlarge);
border-radius: 0;
}
.speakers-modal__close {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
padding: 10px;
margin: 0;
background: none;
border: 0;
cursor: pointer;
color: var(--color-scheme-1-text);
line-height: 0;
}
.speakers-modal__close:focus-visible,
.speakers-modal__linkedin:focus-visible {
outline: 2px solid var(--color-scheme-1-text);
outline-offset: 2px;
}
.speakers-modal__layout {
display: flex;
align-items: center;
gap: 80px;
}
.speakers-modal__tile {
flex-shrink: 0;
width: 360px;
max-width: 360px;
}
.speakers-modal__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.speakers-modal__title {
display: flex;
flex-direction: column;
gap: 8px;
}
.speakers-modal__role-row {
display: flex;
align-items: center;
gap: 8px;
}
.speakers-modal__linkedin {
display: inline-flex;
line-height: 0;
color: var(--color-scheme-1-text);
}
@media (hover: hover) {
.speakers-modal__linkedin:hover {
opacity: 0.8;
}
}
.speakers-modal__role {
font-weight: 400;
font-size: var(--text-sizes-text-large);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--color-scheme-1-body);
}
.speakers-modal__name {
font-family: var(--font-heading);
font-weight: 500;
font-size: var(--text-sizes-heading-2);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--color-scheme-1-text);
}
.speakers-modal__bio {
font-weight: 400;
font-size: var(--text-sizes-text-medium);
line-height: 1.4;
letter-spacing: 0.01em;
color: var(--color-scheme-1-body);
}
@media (max-width: 991px) {
.speakers-modal__layout {
flex-direction: column;
align-items: flex-start;
gap: 40px;
}
.speakers-modal__tile {
width: 100%;
max-width: 280px;
}
.speakers-modal__close {
top: 6px;
right: 6px;
}
}
@media (max-width: 479px) {
.speakers-modal__panel {
padding: 48px 24px;
}
.speakers-modal__tile {
margin-top: 40px;
}
}
@media (prefers-reduced-motion: no-preference) {
.speakers-modal[open] {
animation: speakers-panel-in 200ms ease-out;
}
.speakers-modal[open]::backdrop {
animation: speakers-fade-in 200ms ease-out;
}
}
@keyframes speakers-panel-in {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes speakers-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}