/* 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 2
Stats
Known For
Frequent Collaborators
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.