.about-hero {
padding-top: calc(7rem + var(--spacing-xl));
padding-bottom: var(--spacing-xl);
min-height: 60vh;
display: flex;
align-items: center;
}
.about-container {
max-width: 140rem;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
align-items: center;
}
.about-image {
position: relative;
overflow: hidden;
max-width: 60rem;
}
.about-image img {
width: 100%;
height: auto;
filter: grayscale(100%);
transition: filter var(--transition-slow);
}
.about-image:hover img {
filter: grayscale(0%);
}
.about-title {
margin-bottom: var(--spacing-lg);
font-size: clamp(4rem, 6vw, 6rem);
}
.about-intro {
font-size: 1.8rem;
line-height: 1.8;
}
.biography {
padding: var(--spacing-xl) 0;
background-color: var(--color-gray-light);
}
.section-subtitle {
font-size: 3.2rem;
text-align: center;
margin-bottom: var(--spacing-lg);
position: relative;
padding-bottom: var(--spacing-md);
}
.section-subtitle::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 8rem;
height: 1px;
background-color: var(--color-black);
}
.bio-content {
max-width: 80rem;
margin: 0 auto;
text-align: center;
}
.bio-content p {
margin-bottom: var(--spacing-md);
line-height: 2;
}
.philosophy {
padding: var(--spacing-xl) 0;
}
.philosophy-quote {
font-family: var(--font-serif);
font-size: 2.4rem;
text-align: center;
margin: var(--spacing-lg) auto;
max-width: 80rem;
position: relative;
padding: var(--spacing-lg);
}
.philosophy-quote::before,
.philosophy-quote::after {
content: '"';
font-size: 6rem;
position: absolute;
color: var(--color-gray-medium);
}
.philosophy-quote::before {
top: 0;
left: 0;
}
.philosophy-quote::after {
bottom: 0;
right: 0;
}
.philosophy-content {
max-width: 80rem;
margin: 0 auto;
text-align: center;
line-height: 2;
}
.timeline {
padding: var(--spacing-xl) 0;
background-color: var(--color-gray-light);
}
.timeline-container {
max-width: 80rem;
margin: 0 auto;
position: relative;
}
.timeline-container::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: var(--color-gray-medium);
}
.timeline-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
position: relative;
}
.timeline-item:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-year {
flex: 0 0 45%;
text-align: right;
font-size: 2.4rem;
font-weight: 700;
color: var(--color-gray-dark);
}
.timeline-item:nth-child(even) .timeline-year {
text-align: left;
}
.timeline-content {
flex: 0 0 45%;
background-color: var(--color-white);
padding: var(--spacing-md);
position: relative;
}
.timeline-content h3 {
font-size: 2rem;
margin-bottom: var(--spacing-xs);
}
.timeline-content p {
font-size: 1.4rem;
line-height: 1.6;
color: var(--color-gray-dark);
}
.timeline-item::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1.6rem;
height: 1.6rem;
background-color: var(--color-black);
border-radius: 50%;
z-index: 1;
}
.awards {
padding: var(--spacing-xl) 0;
}
.awards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: var(--spacing-lg);
max-width: 100rem;
margin: 0 auto;
}
.award-item {
text-align: center;
padding: var(--spacing-lg);
border: 1px solid var(--color-gray-medium);
transition: all var(--transition-fast);
}
.award-item:hover {
border-color: var(--color-black);
transform: translateY(-0.5rem);
}
.award-year {
font-size: 3.2rem;
font-weight: 700;
color: var(--color-gray-dark);
margin-bottom: var(--spacing-sm);
}
.award-title {
font-size: 1.8rem;
margin-bottom: var(--spacing-xs);
}
.award-description {
font-size: 1.4rem;
color: var(--color-gray-dark);
}
.press-logos {
padding: var(--spacing-xl) 0;
background-color: var(--color-gray-light);
}
.logos-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-md);
max-width: 120rem;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.logo-item {
display: flex;
align-items: center;
justify-content: center;
height: 12rem;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.05em;
color: var(--color-gray-dark);
background-color: var(--color-white);
border: 1px solid var(--color-gray-light);
transition: all var(--transition-fast);
padding: var(--spacing-sm);
text-align: center;
}
.logo-item:hover {
color: var(--color-black);
border-color: var(--color-black);
background-color: var(--color-gray-light);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1200px) {
.logos-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.logos-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.logo-item {
height: 10rem;
font-size: 1.4rem;
}
}
@media (max-width: 480px) {
.logos-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 1024px) {
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
.about-image {
max-width: 50rem;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.timeline-container::before {
left: 2rem;
}
.timeline-item {
flex-direction: column !important;
align-items: flex-start;
padding-left: 6rem;
}
.timeline-item:nth-child(even) {
align-items: flex-start;
}
.timeline-year {
text-align: left !important;
margin-bottom: var(--spacing-sm);
}
.timeline-content {
width: 100%;
}
.timeline-item::after {
left: 2rem;
}
.philosophy-quote {
font-size: 2rem;
padding: var(--spacing-md);
}
.philosophy-quote::before,
.philosophy-quote::after {
font-size: 4rem;
}
}
.skills {
padding: var(--spacing-xl) 0;
background-color: var(--color-gray-light);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-xl);
}
.skill-category {
background-color: var(--color-white);
padding: var(--spacing-lg);
text-align: center;
transition: all var(--transition-medium);
border: 1px solid transparent;
}
.skill-category:hover {
transform: translateY(-0.5rem);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--color-gray-medium);
}
.skill-icon {
width: 6rem;
height: 6rem;
margin: 0 auto var(--spacing-md);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gray-light);
border-radius: 50%;
transition: all var(--transition-medium);
}
.skill-category:hover .skill-icon {
background-color: var(--color-black);
color: var(--color-white);
}
.skill-icon i {
font-size: 2.4rem;
color: var(--color-gray-dark);
transition: color var(--transition-medium);
}
.skill-category:hover .skill-icon i {
color: var(--color-white);
}
.skill-category h3 {
font-size: 2rem;
font-weight: 500;
margin-bottom: var(--spacing-md);
color: var(--color-black);
}
.skill-list {
list-style: none;
padding: 0;
}
.skill-list li {
font-size: 1.4rem;
line-height: 2;
color: var(--color-gray-dark);
position: relative;
padding-left: var(--spacing-sm);
}
.skill-list li::before {
content: "·";
position: absolute;
left: 0;
color: var(--color-black);
font-weight: 700;
}
@media (max-width: 768px) {
.skills-grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.skill-category {
padding: var(--spacing-md);
}
.skill-icon {
width: 5rem;
height: 5rem;
}
.skill-icon i {
font-size: 2rem;
}
}