/* Tabs & Navigation */
.nav-tabs {
border-bottom: 1px solid rgba(255,255,255,0.1);
gap: 8px;
}
.nav-tabs .nav-link {
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 8px 8px 0 0;
font-weight: 500;
transition: all 0.3s ease;
background-color: rgba(255,255,255,0.05);
}
.nav-tabs .nav-link:hover {
background-color: rgba(229, 9, 20, 0.2);
}
.nav-tabs .nav-link.active {
background-color: #e50914;
color: #fff;
font-weight: 600;
box-shadow: 0 -2px 10px rgba(229, 9, 20, 0.3);
border: none;
}
.tab-pane {
padding: 30px 0;
animation: fadeIn 0.5s ease;
}
/* Profile Section */
.profile-header {
position: relative;
border-radius: 12px;
overflow: hidden;
margin-bottom: 30px;
background: rgba(20, 20, 30, 0.6);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.profile-image {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
}
.profile-image:hover {
transform: scale(1.02);
}
.person-name {
font-weight: 700;
margin-bottom: 15px;
font-size: 2.5rem;
letter-spacing: -0.5px;
}
.person-meta {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.person-meta-item {
display: flex;
align-items: center;
gap: 8px;
}
.person-meta-icon {
color: #e50914;
}
.biography {
line-height: 1.8;
font-size: 1.05rem;
}
.biography-collapse {
max-height: 300px;
overflow: hidden;
position: relative;
}
.biography-collapse.expanded {
max-height: none;
}
.biography-fade {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
background: linear-gradient(to bottom, rgba(20, 20, 30, 0), rgba(20, 20, 30, 1));
pointer-events: none;
}
.biography-collapse.expanded .biography-fade {
display: none;
}
.read-more-btn {
margin-top: 10px;
font-weight: 500;
color: #e50914;
cursor: pointer;
}
/* Movie Grid */
.movie-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
}
.movie-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 8px;
overflow: hidden;
background: rgba(30, 30, 40, 0.6);
height: 100%;
}
.movie-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(229, 9, 20, 0.2);
}
.movie-poster {
height: 225px;
object-fit: cover;
width: 100%;
}
.movie-info {
padding: 12px;
}
.movie-title {
font-weight: 600;
margin-bottom: 5px;
line-height: 1.3;
}
.movie-year {
font-size: 0.85rem;
opacity: 0.7;
}
/* Co-Star Grid */
.costar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 20px;
}
.costar-card {
text-align: center;
padding: 15px;
border-radius: 12px;
background: rgba(30, 30, 40, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.costar-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(229, 9, 20, 0.2);
}
.costar-image {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
margin: 0 auto 15px;
border: 3px solid rgba(229, 9, 20, 0.7);
}
.costar-name {
font-weight: 600;
margin-bottom: 5px;
}
.costar-projects {
font-size: 0.85rem;
opacity: 0.7;
}
/* Filmography Timeline */
.timeline {
border-radius: 12px;
padding: 20px;
background: rgba(30, 30, 40, 0.6);
}
.timeline-year {
font-weight: 700;
color: #e50914;
margin-top: 25px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 5px;
}
.timeline-movie {
margin-bottom: 12px;
padding-left: 20px;
position: relative;
}
.timeline-movie:before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 8px;
background: #e50914;
border-radius: 50%;
}
.timeline-role {
font-style: italic;
opacity: 0.7;
margin-left: 8px;
}
.award-badge {
display: inline-flex;
align-items: center;
background: rgba(255, 193, 7, 0.2);
color: #ffc107;
padding: 3px 8px;
border-radius: 20px;
font-size: 0.8rem;
margin-left: 8px;
}
/* Media Gallery */
.media-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 15px;
}
.gallery-item {
border-radius: 8px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.05);
}
.gallery-image {
width: 100%;
height: 250px;
object-fit: cover;
}
/* Award Stats */
.award-stats {
background: rgba(30, 30, 40, 0.6);
border-radius: 12px;
padding: 20px;
margin-bottom: 25px;
}
.award-stats-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
font-weight: 600;
}
.award-stats-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.award-stat-item {
text-align: center;
flex: 1;
min-width: 100px;
}
.award-stat-value {
font-size: 2rem;
font-weight: 700;
color: #e50914;
margin-bottom: 5px;
}
.award-stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
/* Filter Buttons */
.filter-buttons {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.filter-btn {
background: rgba(30, 30, 40, 0.6);
border: none;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.filter-btn:hover, .filter-btn.active {
background: #e50914;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive Design */
@media (max-width: 767px) {
.person-name {
font-size: 1.8rem;
margin-top: 15px;
}
.movie-grid, .costar-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 15px;
}
.movie-poster {
height: 180px;
}
.award-stats-list {
flex-direction: column;
gap: 10px;
}
.award-stat-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.award-stat-value {
font-size: 1.5rem;
}
}
Skip to content
From
Indonesian Archipelago
Overview
Filmography
Media 1
Stats
Known For
Frequent Collaborators
Complete Filmography
1926
1923
1922
1921
1920
1919
1917
1916
1915
MovieCovers
Your ultimate destination for movie discovery, ratings, and reviews. Find the perfect film for your next movie night.
© 2025 MovieCovers. All rights reserved.
This product uses the TMDB API but is not endorsed or certified by TMDB.