*/
#wrapper header p {
text-transform: none !important; /* Forces sentence case */
font-family: "Montserrat", Helvetica, sans-serif;
font-weight: 300;
font-size: 1em;
letter-spacing: 0.025em;
line-height: 1.65;
}
/* ====================================================
15. HEADER CV BUTTON (LINKED WIDTH/HEIGHT)
====================================================
*/
:root {
/* Desktop Size: 3.35em is larger than the standard 3em Menu button. */
--cv-btn-height: 3.35em;
}
#header nav .cv-button-img {
display: inline-block;
height: var(--cv-btn-height);
width: calc(var(--cv-btn-height) * 4.095); /* Auto-Width */
margin-right: 0.5em;
background-image: url('../../images/cv1.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle; /* Align with Menu */
border-bottom: none;
transition: background-image 0.2s ease-in-out;
}
#header nav .cv-button-img:hover { background-image: url('../../images/cv2.png'); }
#header nav .cv-button-img .label { display: none; }
/* MOBILE OVERRIDE: 10% SMALLER */
@media screen and (max-width: 736px) {
#header nav .cv-button-img {
/* 2.5em = ~10% smaller than the original 2.75em mobile height */
height: 2.5em;
width: calc(2.5em * 4.095);
}
}
/* --- 16. Custom Thumbnails (Optimized for Speed) --- */
.vimeo-custom-thumb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* NEW: Ensures the
![]()
tag fills the box perfectly without stretching */
object-fit: cover;
z-index: 90;
transition: opacity 0.5s ease, visibility 0.5s;
pointer-events: none;
}
/* Hide thumb when playing */
.custom-video-wrapper:not(.is-paused) .vimeo-custom-thumb {
opacity: 0;
visibility: hidden;
}
/* --- 21. Performance: Defer Offscreen Rendering --- */
/* This tells the browser: "Don't even calculate the layout for these videos until the user scrolls near them." */
.custom-video-wrapper {
content-visibility: auto;
contain-intrinsic-size: 100% 300px; /* Prevents the scrollbar from jumping */
}
/* --- 17. Banner Actor Button (Yellow Border) --- */
/* 1. Container Styling: Force Left Align & Remove Template Indentation */
#banner ul.actions {
margin-top: 1.5em;
margin-bottom: 0;
/* Explicitly align flex items to the start (Left) */
justify-content: flex-start;
/* Override default template negative margins to ensure it sits flush left */
margin-left: 0;
padding-left: 0;
}
/* 2. List Item Styling: Remove default padding */
#banner ul.actions li {
padding-left: 0;
}
/* 3. The Button Styling */
#banner .actions #actor-site-button {
height: 3em;
line-height: 3em;
padding: 0 1.8em;
/* Solid Yellow Box */
box-shadow: inset 0 0 0 2px #f8c51d;
color: #ffffff !important;
}
#banner .actions #actor-site-button:hover {
/* Invert slightly on hover */
color: #f8c51d !important;
background-color: rgba(248, 197, 29, 0.05);
}
/* --- 18. Custom IMDB Icon in Footer --- */
ul.contact li.custom-imdb-icon:before {
content: '' !important;
background-image: url('../../images/imdb.png');
/* UPDATED: 2.4em fills 96% of the circle */
background-size: 2.4em;
background-position: center;
background-repeat: no-repeat;
color: transparent !important;
border: solid 2px rgba(255, 255, 255, 0.125) !important; /* Ensure circle border stays for IMDB too */
}
/* --- 20. Film Festival Layout Fix (v6 - Image & Credits Only) --- */
.festival-container {
display: flex;
flex-direction: column; /* Vertical Stack: Image top, Credits bottom */
align-items: flex-start; /* Left Align */
gap: 1.5em;
margin-top: 2em;
margin-bottom: 1.5em; /* Add space between credits and the Watch button */
text-align: left;
}
.festival-laurel {
flex: 0 0 auto;
width: 150px;
margin: 0;
}
.festival-laurel img {
width: 100%;
height: auto;
display: block;
}
.festival-content {
display: block;
width: 100%;
}
.festival-credits {
font-size: 0.9em;
opacity: 0.9;
line-height: 1.6;
color: #ffffff;
display: block;
}
/* --- MOBILE SPECIFICS --- */
@media screen and (max-width: 736px) {
.festival-laurel {
width: 130px;
}
}
/* --- 22. Mobile Fixes for Banner Button --- */
@media screen and (max-width: 480px) {
#banner ul.actions {
/* CRITICAL: 'align-items' handles left alignment when in column mode */
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
margin-left: 0 !important;
padding-left: 0 !important;
width: 100% !important;
}
#banner ul.actions li {
/* Override template's forcing of centered text */
display: block !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
}
#banner ul.actions li .button {
/* Stop the button from stretching 100% width */
width: auto !important;
display: inline-block !important;
margin-left: 0 !important;
}
}
/* --- 23. RESTORE FOOTER ICON DESIGN & CONTENT (EXPLICIT OVERRIDES) --- */
/* Step 1: Re-establish the Circle container.
We apply generic values here, but specific fonts in the next steps.
*/
ul.contact li:before {
box-sizing: border-box;
border-radius: 100%;
border: solid 2px rgba(255, 255, 255, 0.125);
width: 2.5em;
height: 2.5em;
/* Positioning & Layout */
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Text/Icon Alignment */
line-height: 2.35em;
text-align: center;
font-size: 0.8em;
color: #ffffff;
font-style: normal;
/* SAFETY: Ensure it doesn't inherit Montserrat */
font-family: inherit;
}
/* Step 2: Explicitly force correct Font Family, Weight, and Content for each icon
The use of !important ensures we beat any conflicts with the template's default styles.
*/
/* Map Marker */
ul.contact li.fa-map-marker-alt:before {
content: "\f3c5" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
/* Envelope (Email) */
ul.contact li.fa-envelope:before {
content: "\f0e0" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
/* Download Icon */
ul.contact li.fa-download:before {
content: "\f019" !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900 !important;
}
/* LinkedIn (Requires 'Brands' font family) */
ul.contact li.fa-linkedin-in:before {
content: "\f0e1" !important;
font-family: "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
}
/* IMDB (Image Override) */
ul.contact li.custom-imdb-icon:before {
content: '' !important;
background-image: url('../../images/imdb.png');
background-size: 2.4em;
background-position: center;
background-repeat: no-repeat;
color: transparent !important;
}
/* --- 24. Desktop Alignment Spacer --- */
/* Adjusted to 50px because the left description text is longer than the right */
.credit-alignment-spacer {
height: 40px;
display: block;
}
/* Remove this space on mobile so it stacks naturally */
@media screen and (max-width: 736px) {
.credit-alignment-spacer { display: none; }
}