#home {
position: relative;
width: 100%;
height: 100vh; /* full viewport height – adjust as needed */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* ── The YouTube iframe lives inside this wrapper ── */
#yt-bg-wrapper {
position: absolute;
inset: 0; /* top/right/bottom/left: 0 */
z-index: 0;
pointer-events: none; /* prevent clicks hijacking to YouTube */
}
/*
Cover trick:
The iframe is made much larger than the viewport so the
16:9 video always fills the screen regardless of aspect ratio,
then centred with the translate trick.
*/
#yt-bg-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
/* Minimum dimensions: keep video taller/wider than viewport */
width: max(100vw, 177.78vh); /* 177.78 = 16/9 * 100 */
height: max(56.25vw, 100vh); /* 56.25 = 9/16 * 100 */
transform: translate(-50%, -50%);
border: none;
}
/* ── Dark overlay so text stays readable ── */
#home::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 1;
}
/* ── Hero content sits above overlay ── */
.hero-content {
position: relative;
z-index: 2;
color: #fff;
padding: 0 1.5rem;
max-width: 860px;
}
.hero-content h1 {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.15;
text-transform: uppercase;
margin-bottom: 1.25rem;
text-shadow: 0 2px 18px rgba(0,0,0,0.7);
}
.hero-content h1 span {
color: #e8c84a; /* golden accent – matches the film/TV feel */
}
.hero-content p {
font-size: clamp(1rem, 2vw, 1.35rem);
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.hero-btn {
display: inline-block;
padding: 0.85rem 2.4rem;
border: 2px solid #e8c84a;
color: #e8c84a;
font-family: inherit;
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
transition: background 0.25s, color 0.25s;
margin: 0 0.4rem 0.6rem;
}
.hero-btn:hover {
background: #e8c84a;
color: #000;
}
.hero-btn.secondary {
border-color: rgba(255,255,255,0.7);
color: rgba(255,255,255,0.85);
}
.hero-btn.secondary:hover {
background: rgba(255,255,255,0.15);
color: #fff;
}
/* ── Scroll-down caret ── */
.scroll-caret {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
animation: bounce 1.8s infinite;
}
.scroll-caret svg {
width: 32px;
height: 32px;
fill: none;
stroke: rgba(255,255,255,0.65);
stroke-width: 2;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
/* ── Mute / unmute toggle button ── */
#mute-btn {
position: absolute;
bottom: 2rem;
right: 1.5rem;
z-index: 3;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
padding: 0.45rem 0.9rem;
font-size: 0.75rem;
letter-spacing: 0.08em;
cursor: pointer;
text-transform: uppercase;
transition: background 0.2s;
}
#mute-btn:hover { background: rgba(0,0,0,0.7); }
BLACKLAB FILM+TV
Now Part of ACTIVE | MESSAGE
Film | Video | TV
Media Production
Telling your story — through film, broadcast, and digital media —
with the aesthetics and craft of feature film production.
Demo Reel
Find Out More
BLACKLAB FILM+TV
Now Part of ACTIVE | MESSAGE
Film | Video | TV
Media Production
Telling your story — through film, broadcast, and digital media —
with the aesthetics and craft of feature film production.
Demo Reel
Find Out More
