/* 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
Overview
Filmography
Media 1
Stats
Known For
Frequent Collaborators
Complete Filmography
2011
2009
2006
2005
2001
1993
1992
1990
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.