.tns-wp-grid-wrapper, .tns-wp-timeline-wrapper {
--primary-color: #bc002d; --primary-glow: rgba(188, 0, 45, 0.15);
--primary-hover: #9a0022;
--bg-canvas: #f8f9fc; --bg-card: #ffffff; --bg-card-hover: #fafbfc; --border-color: #e6e6ec; --border-glow: rgba(188, 0, 45, 0.08);
--text-main: #1a1a1f; --text-muted: #5e5e6a; --transition-fast: 0.2s ease;
--transition-cool: cubic-bezier(0.25, 0.8, 0.25, 1);
--transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Poppins', sans-serif;
color: var(--text-main);
box-sizing: border-box;
}
.tns-wp-grid-wrapper *, .tns-wp-timeline-wrapper * {
box-sizing: border-box;
} .tns-wp-grid-wrapper .cast-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
}
.tns-wp-grid-wrapper .cast-card {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
overflow: hidden;
transition: var(--transition);
position: relative;
display: flex;
flex-direction: column;
cursor: pointer;
}
.tns-wp-grid-wrapper .cast-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--primary-color), transparent 60%);
z-index: 1;
opacity: 0;
transition: var(--transition-fast);
}
.tns-wp-grid-wrapper .cast-card:hover {
transform: translateY(-8px) scale(1.02);
border-color: var(--primary-color);
box-shadow: 0 12px 35px rgba(188, 0, 45, 0.15);
}
.tns-wp-grid-wrapper .cast-card:hover::before {
opacity: 1;
}
.tns-wp-grid-wrapper .cast-img-wrapper {
width: 100%;
aspect-ratio: 1 / 1.05; overflow: hidden;
position: relative;
z-index: 2;
}
.tns-wp-grid-wrapper .cast-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
filter: grayscale(20%) brightness(95%);
transition: transform 0.6s var(--transition-cool);
}
.tns-wp-grid-wrapper .cast-card:hover .cast-img-wrapper img {
transform: scale(1.06);
filter: grayscale(0%) brightness(100%);
}
.tns-wp-grid-wrapper .cast-info {
padding: 15px 18px 18px;
position: relative;
z-index: 2;
background-color: var(--bg-card);
transition: background-color var(--transition-fast);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.tns-wp-grid-wrapper .cast-card:hover .cast-info {
background-color: var(--bg-card-hover);
}
.tns-wp-grid-wrapper .cast-info h3 {
font-family: var(--font-heading);
font-size: 16px;
font-weight: 900;
margin: 0 0 4px 0;
letter-spacing: -0.3px;
text-transform: uppercase;
color: var(--text-main);
}
.tns-wp-grid-wrapper .cast-role {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 800;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
}
.tns-wp-grid-wrapper .cast-bio {
font-family: var(--font-body);
color: var(--text-muted);
font-size: 13.5px;
margin-bottom: 15px;
line-height: 1.6;
flex-grow: 1;
}
.tns-wp-grid-wrapper .cast-bio p {
margin-bottom: 10px;
}
.tns-wp-grid-wrapper .cast-bio p:last-child {
margin-bottom: 0;
}
.tns-wp-grid-wrapper .cast-more-trigger {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--primary-color);
margin-top: 8px;
transition: var(--transition-fast);
}
.tns-wp-grid-wrapper .cast-card:hover .cast-more-trigger {
color: var(--text-main);
}
.tns-wp-grid-wrapper .cast-social {
display: flex;
gap: 15px;
margin-top: auto;
}
.tns-wp-grid-wrapper .cast-social a {
color: var(--text-muted);
font-size: 16px;
transition: var(--transition-fast);
text-decoration: none;
}
.tns-wp-grid-wrapper .cast-social a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}  .tns-wp-grid-wrapper .cast-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(18, 18, 23, 0.65);
backdrop-filter: blur(12px);
z-index: 100001; 
display: flex;
align-items: flex-start; 
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); padding: 98px 20px 40px 20px; 
overflow-y: auto; 
} body.admin-bar .tns-wp-grid-wrapper .cast-modal {
padding-top: 130px; }
.tns-wp-grid-wrapper .cast-modal.active {
opacity: 1;
pointer-events: auto;
}
.tns-wp-grid-wrapper .cast-modal-container {
background-color: var(--bg-card);
border: 1px solid var(--border-color);
width: 100%;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
position: relative;
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
.tns-wp-grid-wrapper .cast-modal.active .cast-modal-container {
transform: scale(1);
}
.tns-wp-grid-wrapper .cast-modal-close {
position: absolute;
top: 25px;
right: 25px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--border-color);
color: var(--text-main);
width: 45px;
height: 45px;
transform: skewX(-10deg);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: var(--transition-fast);
z-index: 10;
}
.tns-wp-grid-wrapper .cast-modal-close i {
transform: skewX(10deg);
display: inline-block;
}
.tns-wp-grid-wrapper .cast-modal-close:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
box-shadow: 0 0 15px var(--primary-glow);
}
.tns-wp-grid-wrapper .cast-modal-content {
padding: 50px;
text-align: left;
}
.tns-wp-grid-wrapper .cast-modal-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
margin-bottom: 45px;
}
.tns-wp-grid-wrapper .cast-modal-img {
width: 100%;
aspect-ratio: 1 / 1.15;
object-fit: cover;
border: 1px solid var(--border-color);
}
.tns-wp-grid-wrapper .cast-modal-info h2 {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 900;
margin: 0 0 5px 0;
color: var(--text-main);
text-transform: uppercase;
}
.tns-wp-grid-wrapper .cast-modal-role {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 800;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 20px;
}
.tns-wp-grid-wrapper .cast-modal-bio {
font-family: var(--font-body);
color: var(--text-muted);
font-size: 15px;
line-height: 1.7;
margin-bottom: 25px;
}
.tns-wp-grid-wrapper .cast-modal-bio p {
margin-bottom: 15px;
}
.tns-wp-grid-wrapper .cast-modal-bio p:last-child {
margin-bottom: 0;
}
.tns-wp-grid-wrapper .cast-modal-social {
display: flex;
gap: 15px;
}
.tns-wp-grid-wrapper .cast-modal-social a {
color: var(--text-muted);
font-size: 20px;
transition: var(--transition-fast);
}
.tns-wp-grid-wrapper .cast-modal-social a:hover {
color: var(--primary-color);
} .tns-wp-grid-wrapper .past-roles-section {
border-top: 1px solid var(--border-color);
padding-top: 35px;
}
.tns-wp-grid-wrapper .past-roles-section h4 {
font-family: var(--font-heading);
font-size: 18px;
margin: 0 0 25px 0;
letter-spacing: 1px;
color: var(--text-main);
text-transform: uppercase;
}
.tns-wp-grid-wrapper .past-roles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); gap: 15px; font-size: 0.85em; }  .tns-wp-timeline-wrapper .timeline-container {
position: relative;
margin-top: 40px;
padding: 20px 0;
}
.tns-wp-timeline-wrapper .timeline-container::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% - 130px);
background-color: var(--border-color);
box-shadow: none;
z-index: 1;
}
.tns-wp-timeline-wrapper .timeline-item {
display: flex;
justify-content: flex-start;
align-items: center;
width: 100%;
margin-bottom: -50px !important;
position: relative;
z-index: 2;
}
.tns-wp-timeline-wrapper .timeline-item:last-child {
margin-bottom: 0;
}
.tns-wp-timeline-wrapper .timeline-item:nth-child(even) {
justify-content: flex-end;
}
.tns-wp-timeline-wrapper .timeline-badge {
position: absolute;
left: 50%;
transform: translateX(-50%) skewX(-15deg);
background-color: var(--primary-color);
color: #ffffff;
width: 90px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 900;
font-size: 18px;
letter-spacing: 1px;
box-shadow: 0 0 15px var(--primary-glow);
z-index: 10;
transition: var(--transition-fast);
}
.tns-wp-timeline-wrapper .timeline-badge span {
transform: skewX(15deg);
display: inline-block;
}
.tns-wp-timeline-wrapper .timeline-item:hover .timeline-badge {
transform: translateX(-50%) skewX(-15deg) scale(1.06);
box-shadow: 0 0 20px rgba(188, 0, 45, 0.35);
}
.tns-wp-timeline-wrapper .timeline-panel {
width: 44%;
background-color: var(--bg-card);
border: 1px solid var(--border-color);
padding: 30px;
position: relative;
transition: var(--transition);
}
.tns-wp-timeline-wrapper .timeline-panel:hover {
transform: translateY(-5px);
border-color: var(--primary-color);
box-shadow: 0 10px 30px rgba(188, 0, 45, 0.08);
}
.tns-wp-timeline-wrapper .timeline-img {
width: 100%;
height: 200px;
overflow: hidden;
margin-bottom: 20px;
border: 1px solid var(--border-color);
background-color: #f1f2f6;
}
.tns-wp-timeline-wrapper .timeline-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--transition-cool);
}
.tns-wp-timeline-wrapper .timeline-panel:hover .timeline-img img {
transform: scale(1.04);
}
.tns-wp-timeline-wrapper .timeline-heading h4 {
font-family: var(--font-heading);
font-size: 20px;
margin: 0 0 12px 0;
font-weight: 800;
text-transform: uppercase;
color: var(--text-main);
}
.tns-wp-timeline-wrapper .timeline-body p {
font-family: var(--font-body);
color: var(--text-muted);
font-size: 14.5px;
line-height: 1.6;
margin-bottom: 10px;
}
.tns-wp-timeline-wrapper .timeline-body p:last-child {
margin-bottom: 0;
} .tns-wp-timeline-wrapper .collapse-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.8s ease-in-out;
}
.tns-wp-timeline-wrapper .collapse-content.expanded {
max-height: 10000px;
}
.tns-wp-timeline-wrapper .timeline-toggle-wrapper {
margin-top: 50px;
position: relative;
z-index: 10;
text-align: center;
} .tns-wp-timeline-wrapper .btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
font-family: var(--font-heading);
font-weight: 800;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
border: 2px solid var(--text-main);
background-color: transparent;
color: var(--text-main);
cursor: pointer;
transition: var(--transition);
transform: skewX(-10deg);
}
.tns-wp-timeline-wrapper .btn-secondary span {
transform: skewX(10deg);
display: inline-block;
}
.tns-wp-timeline-wrapper .btn-secondary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
box-shadow: 0 0 25px var(--primary-glow);
transform: skewX(-10deg) translateY(-3px);
} .tns-wp-timeline-wrapper .reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.tns-wp-timeline-wrapper .reveal.active {
opacity: 1;
transform: translateY(0);
} @media (max-width: 991px) {
.tns-wp-timeline-wrapper .timeline-container::before {
left: 16px; }
.tns-wp-timeline-wrapper .timeline-item {
justify-content: flex-end;
padding-left: 58px; margin-bottom: 50px !important;
}
.tns-wp-timeline-wrapper .timeline-item:nth-child(even) {
justify-content: flex-end;
}
.tns-wp-timeline-wrapper .timeline-panel {
width: 100%;
} .tns-wp-timeline-wrapper .timeline-badge {
left: 0;
margin-left: -24px;
transform: none;
width: 80px;
height: 40px;
clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.tns-wp-timeline-wrapper .timeline-badge span {
transform: none;
padding-right: 8px; }
.tns-wp-timeline-wrapper .timeline-item:hover .timeline-badge {
transform: scale(1.06);
transform-origin: left center;
}
.tns-wp-grid-wrapper .cast-modal-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.tns-wp-grid-wrapper .cast-modal-img {
max-width: 300px;
margin: 0 auto;
}
.tns-wp-grid-wrapper .cast-modal-content {
padding: 35px 25px;
}
}
@media (max-width: 767px) { .tns-wp-grid-wrapper .cast-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.tns-wp-grid-wrapper .cast-img-wrapper {
aspect-ratio: 1 / 1; }
.tns-wp-grid-wrapper .cast-info {
padding: 10px 12px 12px;
}
.tns-wp-grid-wrapper .cast-info h3 {
font-size: 13px;
}
.tns-wp-grid-wrapper .cast-role {
font-size: 9px;
margin-bottom: 6px;
}
.tns-wp-grid-wrapper .cast-more-trigger {
font-size: 10px;
margin-top: 5px;
}
.tns-wp-grid-wrapper .past-roles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px; }
.tns-wp-timeline-wrapper .btn-secondary {
width: 100%;
} .tns-wp-grid-wrapper .cast-modal {
padding-top: 80px; align-items: flex-start; }
} #timeline:has(.timeline-modal.active),
.timeline-section:has(.timeline-modal.active) {
z-index: 999999 !important;
}
#cast:has(.cast-modal.active),
.cast-section:has(.cast-modal.active) {
z-index: 999999 !important;
}
body.timeline-modal-open #timeline,
body.timeline-modal-open .timeline-section {
z-index: 999999 !important;
}
body.cast-modal-open #cast,
body.cast-modal-open .cast-section {
z-index: 999999 !important;
}