.apb-event-modal {
border: none;
padding: 0;
background: transparent;
overflow: visible; width: auto;
max-width: 100vw; inset: 0;
}
.apb-event-modal::backdrop {
background-color: var(--overlay-dark, rgba(0, 0, 0, 0.6));
animation: fadeIn var(--transition-speed-slow, 0.3s) ease-in;
}
.apb-event-modal[open] {
animation: fadeIn var(--transition-speed-slow, 0.3s) ease-in;
} .apb-modal-content {
background-color: var(--color-white, #fff);
margin: 5% auto; --apb-modal-close-size: 44px;
--apb-modal-padding: 24px;
padding: calc(var(--apb-modal-padding) + 4px) calc(var(--apb-modal-padding)) var(--apb-modal-padding) var(--apb-modal-padding);
border-radius: var(--radius-lg, 12px); width: min(calc(100vw - 40px), 1100px);
max-width: 1100px; overflow-x: hidden;
overflow-y: auto;
max-height: 90vh;
position: relative;
animation: slideDown var(--transition-speed-slow, 0.3s) ease-out;
box-shadow: var(--shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.18));
box-sizing: border-box;
} .apb-modal-close {
position: absolute;
right: 12px;
top: 12px;
width: var(--apb-modal-close-size, 44px);
height: var(--apb-modal-close-size, 44px);
background: rgba(0, 0, 0, 0.06);
border: none;
border-radius: 50%;
color: var(--color-gray-700, #555);
font-size: 20px;
font-weight: normal;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed, 0.2s);
line-height: 1;
z-index: 2;
}
.apb-modal-close:hover,
.apb-modal-close:focus {
background: rgba(0, 0, 0, 0.12);
color: var(--color-black, #111);
transform: scale(1.05);
outline: 2px solid transparent;
outline-offset: 2px;
} .apb-modal-body {
margin-top: 10px;
}
.apb-modal-body > h2 {
font-size: 2em;
} .apb-event-modal.registration-modal .apb-modal-content {
max-width: 600px;
padding: 18px 20px 16px;
}
.apb-event-modal.registration-modal .apb-modal-body {
margin-top: 0;
}
.apb-event-modal.registration-modal .form-remark-accordion {
width: calc(100% - 24px);
max-width: 540px;
margin: 0 auto 10px;
} .hs-form-frame {
width: 100%;
max-width: 100%;
box-sizing: border-box;
} .hs-form-frame iframe {
width: 100% !important;
max-width: 100%;
display: block;
margin-top: 8px;
} .hubspot-event-id {
font-size: 0.6em;
color: var(--accent-color, #0B70C1);
margin-left: 0.5em;
white-space: nowrap;
} .apb-event-modal.speaker-bio-modal .apb-modal-content { min-width: 50vw;
width: min(75vw, 720px);
max-height: 80vh;
overflow: auto;
padding: 0;
scrollbar-width: thin;
scrollbar-color: #e0e0e0 #fff;
}
.apb-event-modal.speaker-bio-modal .apb-modal-content::-webkit-scrollbar {
width: 8px;
background: #fff;
}
.apb-event-modal.speaker-bio-modal .apb-modal-content::-webkit-scrollbar-thumb {
background: #e0e0e0;
border-radius: 8px;
} .apb-event-modal.speaker-bio-modal .apb-modal-close {
position: absolute;
top: 10px;
right: 14px;
background: none;
width: var(--apb-modal-close-size, 44px);
height: var(--apb-modal-close-size, 44px);
font-size: 22px;
color: #777;
}
.apb-event-modal.speaker-bio-modal .apb-modal-close:hover,
.apb-event-modal.speaker-bio-modal .apb-modal-close:focus {
color: #222;
background: none;
transform: none;
} .apb-event-modal.speaker-bio-modal .apb-modal-body {
margin-top: 0;
padding: 0;
}
.speaker-name {
font-size: 20px;
font-weight: 600;
color: #222;
margin: 0; padding: 24px 56px 12px 24px;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 10px;
}
.speaker-chinese-name {
font-size: 16px;
font-weight: 400;
color: #555;
}
.speaker-company {
font-size: 14px;
color: #666;
padding: 0 24px 12px 24px;
border-bottom: 1px solid #f0f0f0;
} .speaker-meta-line {
font-size: 14px;
color: #555;
padding: 8px 24px 12px 24px;
border-bottom: 1px solid #f0f0f0;
}
.speaker-bio-text {
font-size: 15px;
line-height: 1.6;
color: #444;
padding: 20px 24px 24px 24px;
}
.speaker-bio-text p {
margin: 0 0 12px 0;
}
.speaker-bio-text p:last-child {
margin-bottom: 0;
} .speaker-bio-modal-name {
font-size: 20px;
font-weight: 600;
color: #222;
margin: 0;
padding: 24px 56px 12px 24px;
border-bottom: 1px solid #f0f0f0;
} .speaker-bio-meta {
padding: 12px 24px;
border-bottom: 1px solid #f0f0f0;
} .speaker-bio-role {
font-size: 14px;
color: #555;
line-height: 1.4;
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}  @media (max-width: 600px) {
.apb-modal-content { width: min(90vw, calc(100vw - 40px));
max-width: none;
min-width: auto;
margin: 10% auto;
padding: var(--spacing-lg, 20px);
} .apb-event-modal.registration-modal .apb-modal-content {
width: min(90vw, calc(100vw - 40px));
max-width: none;
} .apb-event-modal.speaker-bio-modal .apb-modal-content {
max-width: none;
width: min(90vw, calc(100vw - 40px));
max-height: 85vh;
}
.speaker-name,
.speaker-bio-modal-name {
font-size: 18px;
padding: 18px 56px 10px 16px;
}
.speaker-company {
padding: 0 16px 10px 16px;
}
.speaker-bio-meta {
padding: 10px 16px;
}
.speaker-bio-text {
font-size: 14px;
padding: 14px 16px 18px 16px;
}
}