bcbae992a3
This commit introduces a completely redesigned sponsor list page. The previous two-column layout is replaced with a modern, single-column auto-scrolling list that unifies all sponsors. A dynamic canvas animation has been added to the background for a more engaging visual experience. Previous versions of the page have been archived. This update also includes data corrections for sponsor names and minor fixes to the related PPT assets.
386 lines
6.5 KiB
CSS
386 lines
6.5 KiB
CSS
.tpl-speech {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.speech-card {
|
|
background: rgba(20, 20, 20, 0.85);
|
|
backdrop-filter: blur(12px);
|
|
border-radius: 24px;
|
|
padding: 50px;
|
|
width: 90%;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 215, 0, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 50%;
|
|
}
|
|
|
|
.speech-card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -50%;
|
|
left: -50%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 215, 0, 0.03) 0%,
|
|
transparent 70%
|
|
);
|
|
transform: rotate(30deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.decorative-elements {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.decorative-corner {
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 120px;
|
|
}
|
|
|
|
.corner-tl {
|
|
top: 0;
|
|
left: 0;
|
|
border-top: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-left: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-top-left-radius: 24px;
|
|
}
|
|
|
|
.corner-tr {
|
|
top: 0;
|
|
right: 0;
|
|
border-top: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-right: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-top-right-radius: 24px;
|
|
}
|
|
|
|
.corner-bl {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-bottom: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-left: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-bottom-left-radius: 24px;
|
|
}
|
|
|
|
.corner-br {
|
|
bottom: 0;
|
|
right: 0;
|
|
border-bottom: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-right: 2px solid rgba(255, 215, 0, 0.5);
|
|
border-bottom-right-radius: 24px;
|
|
}
|
|
|
|
.gold-line {
|
|
position: absolute;
|
|
height: 1px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 215, 0, 0.5),
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.line-1 {
|
|
top: 30%;
|
|
left: 5%;
|
|
right: 5%;
|
|
}
|
|
|
|
.line-2 {
|
|
bottom: 30%;
|
|
left: 5%;
|
|
right: 5%;
|
|
}
|
|
|
|
.speaker-info {
|
|
display: flex;
|
|
gap: 50px;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.speaker-avatar {
|
|
width: 320px;
|
|
height: 320px;
|
|
border-radius: 16px;
|
|
object-fit: cover;
|
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
|
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.1);
|
|
transition: all 0.4s ease;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.speaker-avatar:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 215, 0, 0.15);
|
|
}
|
|
|
|
.avatar-glow {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 340px;
|
|
height: 340px;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(255, 215, 0, 0.2) 0%,
|
|
transparent 70%
|
|
);
|
|
border-radius: 20px;
|
|
filter: blur(10px);
|
|
z-index: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
|
|
.avatar-container:hover .avatar-glow {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.speaker-meta {
|
|
flex: 1;
|
|
}
|
|
|
|
.speaker-name {
|
|
font-size: 4.2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
color: #fff;
|
|
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 1.5px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.speaker-name::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
width: 80px;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #ffd700, transparent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.speaker-name-en {
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
margin-bottom: 25px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-style: italic;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.speaker-title {
|
|
font-size: 1.8rem;
|
|
font-weight: 300;
|
|
margin-bottom: 35px;
|
|
color: rgba(255, 255, 255, 0.85);
|
|
padding-left: 20px;
|
|
border-left: 4px solid #ffd700;
|
|
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.speaker-bio {
|
|
background: rgba(0, 0, 0, 0.25);
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
margin-top: 35px;
|
|
font-size: 1.2rem;
|
|
line-height: 1.9;
|
|
text-align: justify;
|
|
border-left: 4px solid rgba(255, 215, 0, 0.5);
|
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.speaker-bio::before {
|
|
content: '"';
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
font-size: 4rem;
|
|
color: rgba(255, 215, 0, 0.2);
|
|
font-family: serif;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 55px;
|
|
height: 55px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(
|
|
145deg,
|
|
rgba(30, 30, 30, 0.9),
|
|
rgba(10, 10, 10, 0.9)
|
|
);
|
|
color: #ffd700;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
font-size: 1.4rem;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.social-links a::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), transparent);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 215, 0, 0.2),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
color: #fff;
|
|
}
|
|
|
|
.social-links a:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.watermark {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
right: 25px;
|
|
font-size: 1rem;
|
|
opacity: 0.5;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.event-title {
|
|
position: absolute;
|
|
top: 25px;
|
|
left: 25px;
|
|
font-size: 1.1rem;
|
|
opacity: 0.7;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.speaker-info {
|
|
gap: 40px;
|
|
}
|
|
|
|
.speaker-avatar {
|
|
width: 280px;
|
|
height: 280px;
|
|
}
|
|
|
|
.avatar-glow {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
.speaker-name {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.speaker-name-en {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.speaker-title {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.speaker-info {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.speaker-name::after {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.speaker-title {
|
|
border-left: none;
|
|
padding-left: 0;
|
|
border-bottom: 3px solid #ffd700;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.speech-card {
|
|
padding: 40px 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.speaker-name {
|
|
font-size: 2.8rem;
|
|
}
|
|
|
|
.speaker-name-en {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.speaker-title {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.speaker-avatar {
|
|
width: 240px;
|
|
height: 240px;
|
|
}
|
|
|
|
.avatar-glow {
|
|
width: 260px;
|
|
height: 260px;
|
|
}
|
|
|
|
.speech-card {
|
|
padding: 30px 20px;
|
|
}
|
|
|
|
.speaker-bio {
|
|
padding: 20px;
|
|
font-size: 1.1rem;
|
|
}
|
|
}
|