/* 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
Montreal, Quebec, Canada
Overview
Filmography
Media 0
Stats
Known For
Frequent Collaborators
Complete Filmography
2024
2023
2021
2015
2013
2010
2008
2006
2004
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.