/* ================================================
THE KING IS BORN - LANDING PAGE V2
Faith-Based Film Landing Page
Journey to Bethlehem Visual Style + Sound of Freedom Structure
================================================ */
/* ================================================
CSS VARIABLES & DESIGN TOKENS
================================================ */
:root {
/* Colors - Bethlehem Night Sky Palette */
/* Deep Black Backgrounds - Theater-like Aesthetic */
--color-primary-dark: #0a0a0a;
--color-primary-mid: #0a0a0a;
--color-primary-light: #1a1a1a;
--color-teal-deep: #0a0a0a;
--color-teal-accent: #1a1a1a;
/* Multi-Layered Gold Palette */
--color-gold-bright: #FFD700;
--color-gold-antique: #DAA520;
--color-gold-pale: #F0E68C;
--color-bronze: #CD853F;
--color-bronze-dark: #8B5A2B;
/* Text Colors */
--color-cream: #FFF8E7;
--color-cream-dark: #E8DCC7;
--color-sand: #D4C5A9;
--color-white-soft: #FFF8DC;
/* Gradients - Deep Black & Gold */
--gradient-hero: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(15,15,15,0.9) 50%, rgba(20,20,20,0.85) 100%);
--gradient-hero-overlay: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.3) 100%);
--gradient-gold: linear-gradient(135deg, #FFD700 0%, #DAA520 50%, #CD853F 100%);
--gradient-gold-metallic: linear-gradient(135deg, #FFD700 0%, #F0E68C 25%, #DAA520 50%, #CD853F 75%, #8B5A2B 100%);
--gradient-gold-bright: linear-gradient(135deg, #FFD700, #FFA500);
--gradient-teal: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
--gradient-teal-glass: linear-gradient(135deg, rgba(10,10,10,0.6) 0%, rgba(20,20,20,0.4) 100%);
/* Hollywood Premium Gold Foil Gradients (16+ stops) */
--gradient-gold-foil-premium: linear-gradient(135deg,
#FFF9E5 0%, #FFD700 6%, #F4E4A6 12%, #FFD700 18%,
#E8C547 25%, #FFE55C 31%, #DAA520 37%, #F0E68C 43%,
#CD853F 50%, #E8C547 56%, #B8860B 62%, #DAA520 68%,
#8B7355 75%, #CD853F 81%, #6B5D3F 87%, #8B5A2B 93%,
#5C4A2F 100%);
--gradient-gold-foil-shine: linear-gradient(135deg,
#FFFEF0 0%, #FFD700 8%, #FFF4C1 16%, #FFE55C 24%,
#FFD700 32%, #F0E68C 40%, #DAA520 48%, #FFE55C 56%,
#CD853F 64%, #DAA520 72%, #B8860B 80%, #8B5A2B 88%,
#6B5D3F 96%, #5C4A2F 100%);
--gradient-gold-foil-intense: linear-gradient(135deg,
#FFFFFF 0%, #FFF9E5 5%, #FFD700 10%, #FFF4C1 15%,
#FFE55C 20%, #FFD700 25%, #F4E4A6 30%, #E8C547 35%,
#FFD700 40%, #F0E68C 45%, #DAA520 50%, #FFE55C 55%,
#CD853F 60%, #E8C547 65%, #B8860B 70%, #DAA520 75%,
#8B7355 80%, #CD853F 85%, #6B5D3F 90%, #8B5A2B 95%,
#5C4A2F 100%);
/* Cinematic Deep Black Depth Gradients */
--gradient-teal-cinematic: linear-gradient(135deg,
rgba(10,10,10,0.98) 0%, rgba(10,10,10,0.95) 20%,
rgba(15,15,15,0.92) 40%, rgba(20,20,20,0.88) 60%,
rgba(25,25,25,0.85) 80%, rgba(20,20,20,0.90) 100%);
--gradient-teal-atmospheric: radial-gradient(ellipse at center,
rgba(20,20,20,0.3) 0%, rgba(15,15,15,0.5) 30%,
rgba(10,10,10,0.7) 60%, rgba(10,10,10,0.85) 100%);
/* Typography */
--font-display: 'Cinzel', serif;
--font-body: 'Montserrat', sans-serif;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;
--space-3xl: 6rem;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-full: 9999px;
/* Hollywood Cinematic Shadow System */
/* Base Shadows - Multi-Layer Depth */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 15px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.5);
/* Cinematic Multi-Layer Shadows */
--shadow-cinematic-sm:
0 1px 2px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(0, 0, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.2);
--shadow-cinematic-md:
0 2px 4px rgba(0, 0, 0, 0.5),
0 4px 8px rgba(0, 0, 0, 0.4),
0 8px 16px rgba(0, 0, 0, 0.3),
0 16px 32px rgba(0, 0, 0, 0.2);
--shadow-cinematic-lg:
0 4px 8px rgba(0, 0, 0, 0.6),
0 8px 16px rgba(0, 0, 0, 0.5),
0 16px 32px rgba(0, 0, 0, 0.4),
0 32px 64px rgba(0, 0, 0, 0.3),
0 64px 128px rgba(0, 0, 0, 0.2);
/* Gold Glow System - Subtle to Intense */
--shadow-gold: 0 4px 15px rgba(255, 215, 0, 0.4);
--shadow-gold-md: 0 6px 20px rgba(255, 215, 0, 0.5);
--shadow-gold-lg: 0 8px 30px rgba(255, 215, 0, 0.6);
--glow-gold-subtle:
0 0 10px rgba(255, 215, 0, 0.2),
0 0 20px rgba(255, 215, 0, 0.1);
--glow-gold-medium:
0 0 15px rgba(255, 215, 0, 0.3),
0 0 30px rgba(255, 215, 0, 0.2),
0 0 45px rgba(255, 215, 0, 0.1);
--glow-gold-intense:
0 0 20px rgba(255, 215, 0, 0.5),
0 0 40px rgba(255, 215, 0, 0.3),
0 0 60px rgba(255, 215, 0, 0.2),
0 0 80px rgba(255, 215, 0, 0.1);
/* Combined Shadow + Glow (Hollywood Premium) */
--shadow-gold-glow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.2);
--shadow-gold-intense: 0 0 30px rgba(255, 215, 0, 0.6), 0 0 60px rgba(255, 215, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.4);
--shadow-gold-cinematic:
0 0 15px rgba(255, 215, 0, 0.4),
0 0 30px rgba(255, 215, 0, 0.3),
0 4px 8px rgba(0, 0, 0, 0.5),
0 8px 16px rgba(0, 0, 0, 0.3);
--shadow-gold-premium:
0 0 20px rgba(255, 215, 0, 0.5),
0 0 40px rgba(255, 215, 0, 0.3),
0 0 60px rgba(255, 215, 0, 0.2),
0 4px 12px rgba(0, 0, 0, 0.6),
0 8px 24px rgba(0, 0, 0, 0.4),
0 16px 48px rgba(0, 0, 0, 0.2);
/* 3D Bevel Effects */
--bevel-gold-light:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
inset 0 -1px 0 rgba(0, 0, 0, 0.3);
--bevel-gold-medium:
inset 0 2px 4px rgba(255, 255, 255, 0.4),
inset 0 -2px 4px rgba(0, 0, 0, 0.4),
inset 1px 0 2px rgba(255, 255, 255, 0.2),
inset -1px 0 2px rgba(0, 0, 0, 0.2);
--bevel-gold-intense:
inset 0 3px 6px rgba(255, 255, 255, 0.5),
inset 0 -3px 6px rgba(0, 0, 0, 0.5),
inset 2px 0 4px rgba(255, 255, 255, 0.3),
inset -2px 0 4px rgba(0, 0, 0, 0.3);
/* Glass Morphism - Deep Black */
--glass-bg: rgba(10, 10, 10, 0.15);
--glass-bg-dark: rgba(10, 10, 10, 0.3);
--glass-border: rgba(255, 215, 0, 0.2);
--glass-border-bright: rgba(255, 215, 0, 0.4);
/* Hollywood Cinematic Transitions */
--transition-base: all 0.3s ease;
--transition-slow: all 0.5s ease;
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-premium: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-elastic: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Texture Overlays */
--texture-film-grain: url('data:image/svg+xml;utf8,');
--texture-canvas: repeating-linear-gradient(
0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px),
repeating-linear-gradient(
90deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 4px);
/* Particle & Animation Speeds */
--anim-speed-slow: 20s;
--anim-speed-medium: 12s;
--anim-speed-fast: 6s;
--anim-speed-shimmer: 3s;
}
/* ================================================
RESET & BASE STYLES
================================================ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
/* Full-Page Video Background */
.page-video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: -1;
pointer-events: none;
}
body {
font-family: var(--font-body);
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-cream);
background-color: var(--color-primary-dark);
/* Hollywood Enhanced Multi-Layered Bethlehem Starfield */
background-image:
/* Extra large hero stars with glow */
radial-gradient(3px 3px at 25% 35%, rgba(255,215,0,0.9), rgba(255,215,0,0.3) 50%, transparent),
radial-gradient(3px 3px at 75% 65%, rgba(255,215,0,0.9), rgba(255,215,0,0.3) 50%, transparent),
/* Large bright gold stars */
radial-gradient(2px 2px at 20% 30%, #FFD700, transparent),
radial-gradient(2px 2px at 60% 70%, #FFD700, transparent),
radial-gradient(2px 2px at 90% 60%, #FFD700, transparent),
radial-gradient(2px 2px at 40% 85%, #FFD700, transparent),
radial-gradient(2px 2px at 85% 20%, #FFD700, transparent),
/* Medium antique gold stars */
radial-gradient(1.5px 1.5px at 15% 80%, #DAA520, transparent),
radial-gradient(1.5px 1.5px at 75% 25%, #DAA520, transparent),
radial-gradient(1.5px 1.5px at 45% 15%, #DAA520, transparent),
radial-gradient(1.5px 1.5px at 55% 55%, #DAA520, transparent),
radial-gradient(1.5px 1.5px at 30% 40%, #DAA520, transparent),
radial-gradient(1.5px 1.5px at 70% 80%, #DAA520, transparent),
/* Small cream stars */
radial-gradient(1px 1px at 50% 50%, #FFF8DC, transparent),
radial-gradient(1px 1px at 80% 10%, #FFF8DC, transparent),
radial-gradient(1px 1px at 33% 90%, #FFF8DC, transparent),
radial-gradient(1px 1px at 65% 45%, #FFF8DC, transparent),
radial-gradient(1px 1px at 12% 25%, #FFF8DC, transparent),
radial-gradient(1px 1px at 88% 75%, #FFF8DC, transparent),
radial-gradient(1px 1px at 42% 68%, #FFF8DC, transparent),
radial-gradient(1px 1px at 58% 32%, #FFF8DC, transparent),
/* Pale gold shimmer stars */
radial-gradient(1px 1px at 25% 60%, #F0E68C, transparent),
radial-gradient(1px 1px at 85% 85%, #F0E68C, transparent),
radial-gradient(1px 1px at 10% 40%, #F0E68C, transparent),
radial-gradient(1px 1px at 95% 15%, #F0E68C, transparent),
radial-gradient(1px 1px at 38% 78%, #F0E68C, transparent),
/* Atmospheric deep black depth layers */
radial-gradient(circle at 30% 40%, rgba(10,10,10,0.15), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(15,15,15,0.12), transparent 45%),
radial-gradient(circle at 50% 50%, rgba(10,10,10,0.1), transparent 50%);
background-size:
600px 600px, 600px 600px,
400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px, 350px 350px,
300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
250px 250px, 250px 250px, 250px 250px, 250px 250px, 250px 250px,
100% 100%, 100% 100%, 100% 100%;
background-attachment: fixed;
overflow-x: hidden;
position: relative;
}
/* Hollywood Film Grain Texture Overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--texture-film-grain);
background-size: 300px 300px;
opacity: 0.4;
pointer-events: none;
z-index: 1;
mix-blend-mode: overlay;
}
/* Enhanced Twinkling Star Animation Layer */
body::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
/* Large twinkling stars */
radial-gradient(2px 2px at 35% 45%, rgba(255,215,0,0.8), rgba(255,215,0,0.2) 50%, transparent),
radial-gradient(2px 2px at 65% 55%, rgba(255,215,0,0.8), rgba(255,215,0,0.2) 50%, transparent),
/* Medium twinkling stars */
radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,248,220,0.6), transparent),
radial-gradient(1.5px 1.5px at 55% 75%, rgba(218,165,32,0.6), transparent),
radial-gradient(1.5px 1.5px at 20% 60%, rgba(240,230,140,0.6), transparent),
/* Small shimmer stars */
radial-gradient(1px 1px at 45% 30%, rgba(255,215,0,0.5), transparent),
radial-gradient(1px 1px at 80% 85%, rgba(255,248,220,0.5), transparent);
background-size: 500px 500px;
animation: twinkle-premium 6s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* Hollywood Cinematic Animations */
@keyframes twinkle-premium {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
25% {
opacity: 0.6;
transform: scale(1.02);
}
50% {
opacity: 1;
transform: scale(1.05);
}
75% {
opacity: 0.6;
transform: scale(1.02);
}
}
/* Floating Particles Animation */
@keyframes float-particles {
0%, 100% {
transform: translateY(0) translateX(0);
opacity: 0.3;
}
25% {
transform: translateY(-20px) translateX(10px);
opacity: 0.6;
}
50% {
transform: translateY(-40px) translateX(-5px);
opacity: 1;
}
75% {
transform: translateY(-20px) translateX(-10px);
opacity: 0.6;
}
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-base);
}
ul, ol {
list-style: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
/* ================================================
TYPOGRAPHY
================================================ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
color: var(--color-gold);
}
/* Hollywood Premium Typography */
h1 {
font-size: clamp(2.5rem, 6vw, 5rem);
/* Gold Foil Text Effect */
background: var(--gradient-gold-foil-intense);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
/* Enhanced Cinematic Shadow */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 30px rgba(255, 215, 0, 0.4))
drop-shadow(0 0 60px rgba(255, 215, 0, 0.2));
animation: gold-shimmer 8s ease-in-out infinite;
}
@keyframes gold-shimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
h2 {
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
/* Subtle Gold Foil Effect */
background: var(--gradient-gold-foil-shine);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Cinematic Shadow */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4))
drop-shadow(0 0 20px rgba(255, 215, 0, 0.3));
}
h3 {
font-size: 1.75rem;
color: var(--color-gold-bright);
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 0 15px rgba(255, 215, 0, 0.3);
}
p {
margin-bottom: 1rem;
}
/* ================================================
LAYOUT CONTAINERS
================================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-lg);
}
.container-narrow {
max-width: 900px;
}
.section {
padding: var(--space-3xl) 0;
position: relative;
}
/* Section Divider - Enhanced golden light ray effect */
.section-divider {
width: 100%;
height: 2px;
margin: var(--space-2xl) 0;
position: relative;
overflow: hidden;
}
.section-divider::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(
to right,
transparent 0%,
rgba(212, 175, 55, 0.2) 10%,
rgba(212, 175, 55, 0.5) 50%,
rgba(212, 175, 55, 0.2) 90%,
transparent 100%
);
}
.section-divider::after {
content: '';
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 75%;
height: 12px;
background: radial-gradient(
ellipse at center,
rgba(212, 175, 55, 0.35) 0%,
rgba(212, 175, 55, 0.15) 30%,
transparent 70%
);
filter: blur(3px);
}
/* ================================================
BUTTONS
================================================ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 1rem 3rem;
border-radius: var(--radius-full);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: var(--transition-premium);
font-size: 1rem;
min-height: 44px;
cursor: pointer;
position: relative;
will-change: transform;
}
/* Hollywood Premium Gold Button */
.btn-primary {
/* Multi-Stop Metallic Gold Foil Background */
background: var(--gradient-gold-foil-premium);
background-size: 200% 100%;
color: var(--color-primary-dark);
/* Hollywood Cinematic Shadow + Glow */
box-shadow: var(--shadow-gold-premium);
/* 3D Bevel Effect */
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 -1px 0 rgba(0, 0, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.3);
position: relative;
overflow: hidden;
font-weight: 700;
border: 1px solid rgba(255, 215, 0, 0.3);
}
/* Inner Highlight for 3D Effect */
.btn-primary::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.3) 0%,
transparent 100%);
border-radius: var(--radius-full) var(--radius-full) 0 0;
pointer-events: none;
}
/* Hollywood Shimmer Sweep Animation */
.btn-primary::before {
content: '';
position: absolute;
top: -50%;
left: -100%;
width: 100%;
height: 200%;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 25%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0.1) 75%,
transparent 100%);
transform: skewX(-25deg);
transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover::before {
left: 200%;
}
.btn-primary:hover {
/* 3D Lift Effect */
transform: translateY(-4px) scale(1.02);
/* Enhanced Glow on Hover */
box-shadow:
0 0 25px rgba(255, 215, 0, 0.6),
0 0 50px rgba(255, 215, 0, 0.4),
0 0 75px rgba(255, 215, 0, 0.3),
0 6px 16px rgba(0, 0, 0, 0.6),
0 12px 32px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
/* Animate Background */
background-position: 100% 0;
}
.btn-primary:active {
transform: translateY(-2px) scale(0.98);
box-shadow:
0 0 20px rgba(255, 215, 0, 0.5),
0 0 40px rgba(255, 215, 0, 0.3),
0 4px 12px rgba(0, 0, 0, 0.5);
}
/* Hollywood Glass-Morphism Secondary Button */
.btn-secondary {
background: linear-gradient(135deg,
rgba(10, 10, 10, 0.2) 0%,
rgba(15, 15, 15, 0.3) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.5);
color: var(--color-cream);
position: relative;
overflow: hidden;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.3),
0 0 20px rgba(255, 215, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Gold Fill Animation */
.btn-secondary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-gold-foil-shine);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
/* Shimmer Effect */
.btn-secondary::after {
content: '';
position: absolute;
top: -50%;
left: -100%;
width: 50%;
height: 200%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent);
transform: skewX(-25deg);
transition: left 0.6s ease;
}
.btn-secondary:hover {
border-color: rgba(255, 215, 0, 0.9);
color: var(--color-primary-dark);
transform: translateY(-4px) scale(1.02);
box-shadow:
0 0 30px rgba(255, 215, 0, 0.5),
0 0 60px rgba(255, 215, 0, 0.3),
0 6px 16px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.4),
0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn-secondary:hover::before {
opacity: 1;
}
.btn-secondary:hover::after {
left: 150%;
}
.btn-secondary:active {
transform: translateY(-2px) scale(0.98);
}
.btn-lg {
padding: 1.25rem 3.5rem;
font-size: 1.125rem;
}
.btn-block {
width: 100%;
}
/* ================================================
NAVIGATION - DYNAMIC BEHAVIOR
================================================ */
/* Initial State: Absolute positioning (scrolls with page) */
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: var(--space-md) 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
/* Deep black glassmorphism with golden accents */
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(212, 175, 55, 0.15);
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.5),
0 0 40px rgba(212, 175, 55, 0.05);
}
/* Scrolled State: Fixed/Sticky with theater-like glassmorphism */
.navbar.scrolled {
position: fixed;
top: 0;
padding: var(--space-md) 0;
/* Deep black glassmorphism with golden accents */
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(212, 175, 55, 0.15);
box-shadow:
0 4px 30px rgba(0, 0, 0, 0.5),
0 0 40px rgba(212, 175, 55, 0.05);
}
/* Show logo, menu, and CTA by default */
.navbar .nav-logo,
.navbar .nav-menu,
.navbar .btn-nav {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* Hamburger is always visible */
.navbar .nav-toggle {
opacity: 1;
visibility: visible;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-lg);
position: relative;
}
/* Adjustment 2: Enhanced padding around navbar logo for more breathing room */
.nav-logo img {
max-height: 60px;
width: auto;
padding: var(--space-sm) var(--space-md); /* Added vertical and horizontal padding */
transition: var(--transition-premium);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.nav-logo img:hover {
transform: scale(1.08) translateY(-2px);
filter:
drop-shadow(0 0 15px rgba(255, 215, 0, 0.5))
drop-shadow(0 0 30px rgba(255, 215, 0, 0.3))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
animation: logo-pulse 2s ease-in-out infinite;
}
@keyframes logo-pulse {
0%, 100% {
filter:
drop-shadow(0 0 15px rgba(255, 215, 0, 0.5))
drop-shadow(0 0 30px rgba(255, 215, 0, 0.3))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
50% {
filter:
drop-shadow(0 0 20px rgba(255, 215, 0, 0.7))
drop-shadow(0 0 40px rgba(255, 215, 0, 0.4))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
}
.nav-menu {
display: flex;
align-items: center;
gap: var(--space-lg);
}
.nav-link {
color: var(--color-cream);
font-weight: 500;
padding: var(--space-xs) var(--space-sm);
position: relative;
transition: var(--transition-premium);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
/* No borders - clean minimal look */
}
/* Permanent Golden Underline - Always Visible */
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 90%; /* Permanent underline - always visible */
height: 2px;
background: var(--gradient-gold-foil-shine);
transition: var(--transition-premium);
box-shadow:
0 0 8px rgba(255, 215, 0, 0.6),
0 0 16px rgba(255, 215, 0, 0.3);
}
.nav-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent);
border-radius: 50%;
transition: var(--transition-premium);
z-index: -1;
}
.nav-link:hover::after {
width: 100%; /* Expand to full width on hover */
box-shadow:
0 0 12px rgba(255, 215, 0, 0.8),
0 0 24px rgba(255, 215, 0, 0.5); /* Enhanced glow on hover */
}
.nav-link:hover::before {
width: 120%;
height: 120%;
}
.nav-link:hover {
color: var(--color-gold-bright);
text-shadow:
0 0 10px rgba(255, 215, 0, 0.5),
0 0 20px rgba(255, 215, 0, 0.3),
0 2px 4px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}
.btn-nav {
padding: 0.75rem 2rem;
}
.nav-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
cursor: pointer;
background: transparent;
border: none;
padding: 0;
z-index: 1001;
transition: transform 0.3s ease;
}
.nav-toggle:hover {
transform: scale(1.1);
}
.hamburger {
width: 28px;
height: 2px;
background: var(--color-gold);
position: relative;
transition: var(--transition-base);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.hamburger::before,
.hamburger::after {
content: '';
position: absolute;
width: 28px;
height: 2px;
background: var(--color-gold);
transition: var(--transition-base);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.hamburger::before {
top: -8px;
}
.hamburger::after {
bottom: -8px;
}
/* Animated hamburger to X transformation */
.nav-toggle[aria-expanded="true"] .hamburger {
background: transparent;
box-shadow: none;
}
.nav-toggle[aria-expanded="true"] .hamburger::before {
top: 0;
transform: rotate(45deg);
background: var(--color-gold-bright);
}
.nav-toggle[aria-expanded="true"] .hamburger::after {
bottom: 0;
transform: rotate(-45deg);
background: var(--color-gold-bright);
}
/* Desktop: Hide hamburger when scrolled and full menu is visible */
@media (min-width: 1024px) {
.navbar.scrolled .nav-toggle {
display: none;
}
.navbar.scrolled .nav-menu {
display: flex;
}
}
/* ================================================
HERO SECTION
================================================ */
.hero {
min-height: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 80px 0 0 0;
margin: 0;
overflow: hidden;
}
/* Ornamental Border Frame */
.hero::before {
content: '';
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border: 2px solid var(--color-gold-antique);
border-radius: var(--radius-md);
box-shadow:
inset 0 0 30px rgba(255, 215, 0, 0.1),
0 0 30px rgba(255, 215, 0, 0.2);
z-index: 1;
pointer-events: none;
opacity: 0.6;
}
.hero-background {
position: relative;
width: 100%;
height: auto;
background-image: url('../images/BTI%20-%20A%20King%20Is%20Born%20-%20Digital%20-%201920x1080.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #0a0a0a;
z-index: 0;
aspect-ratio: 16 / 9;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 1000px;
margin: 0 auto;
}
/* Adjustment 1: Reduced spacing around hero logo for tighter, more compact layout */
.hero-logo {
margin-bottom: var(--space-sm); /* Reduced from var(--space-lg) to var(--space-sm) */
margin-top: 0; /* Explicit zero top margin */
}
.hero-logo img {
max-width: 600px;
width: 100%;
margin: 0 auto;
padding: 0 var(--space-sm); /* Added horizontal padding for edge spacing control */
}
.hero-tagline {
font-size: 1.125rem;
color: var(--color-gold-bright);
margin-bottom: var(--space-md);
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
.hero-title {
margin-bottom: var(--space-xl);
color: var(--color-cream);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-title .highlight {
color: var(--color-gold-bright);
text-shadow:
0 0 20px rgba(255, 215, 0, 0.6),
0 2px 10px rgba(0, 0, 0, 0.5);
}
/* Hero CTA Buttons */
.hero-cta-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-lg);
margin: var(--space-xl) 0;
flex-wrap: wrap;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 1.25rem 3rem;
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: var(--radius-md);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
position: relative;
overflow: hidden;
min-width: 220px;
}
.hero-btn-primary {
background: var(--gradient-gold-metallic);
color: var(--color-primary-dark);
border: 2px solid var(--color-gold-bright);
box-shadow:
0 4px 20px rgba(255, 215, 0, 0.4),
0 8px 30px rgba(255, 215, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hero-btn-primary:hover {
transform: translateY(-3px);
box-shadow:
0 8px 30px rgba(255, 215, 0, 0.6),
0 12px 40px rgba(255, 215, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.hero-btn-secondary {
background: var(--glass-bg-dark);
backdrop-filter: blur(10px);
color: var(--color-gold-bright);
border: 2px solid var(--color-gold-bright);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 215, 0, 0.1);
}
.hero-btn-secondary:hover {
transform: translateY(-3px);
background: rgba(15, 15, 15, 0.3);
border-color: var(--color-gold-bright);
box-shadow:
0 8px 25px rgba(255, 215, 0, 0.4),
0 12px 35px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 215, 0, 0.2);
}
.hero-btn svg {
width: 24px;
height: 24px;
}
/* ================================================
CINEMATIC ICON SYSTEM
Professional SVG icons with metallic gold styling
================================================ */
/* Hollywood Premium Icon Container - Multi-Layered Metallic */
.cta-icon,
.highlight-icon,
.card-icon,
.pillar-icon,
.resource-icon {
width: 90px;
height: 90px;
margin: 0 auto var(--space-md);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
/* Premium Multi-Stop Gold Foil Gradient */
background: var(--gradient-gold-foil-premium);
background-size: 200% 200%;
/* Hollywood Cinematic Shadow System */
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.5),
0 8px 16px rgba(0, 0, 0, 0.4),
0 12px 24px rgba(0, 0, 0, 0.3),
0 0 30px rgba(255, 215, 0, 0.4),
0 0 60px rgba(255, 215, 0, 0.2),
inset 0 3px 6px rgba(255, 255, 255, 0.5),
inset 0 -3px 6px rgba(139, 90, 43, 0.4);
position: relative;
transition: var(--transition-premium);
will-change: transform;
animation: icon-breathe 4s ease-in-out infinite;
}
/* Subtle Breathing Animation */
@keyframes icon-breathe {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Inner highlight ring - Enhanced */
.cta-icon::before,
.highlight-icon::before,
.card-icon::before,
.pillar-icon::before,
.resource-icon::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3);
pointer-events: none;
}
/* Outer glow ring - Enhanced Gold Glow */
.cta-icon::after,
.highlight-icon::after,
.card-icon::after,
.pillar-icon::after,
.resource-icon::after {
content: '';
position: absolute;
top: -6px;
left: -6px;
right: -6px;
bottom: -6px;
border-radius: 50%;
border: 3px solid rgba(255, 215, 0, 0.4);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
/* SVG icon styling */
.cta-icon svg,
.highlight-icon svg,
.card-icon svg,
.pillar-icon svg,
.resource-icon svg {
width: 40px;
height: 40px;
stroke: #ffffff;
stroke-width: 2.5;
fill: none;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
transition: all 0.3s ease;
}
/* Hollywood 3D Transform Hover Effects */
.cta-card:hover .cta-icon,
.highlight-card:hover .highlight-icon,
.involvement-card:hover .card-icon,
.pillar-card:hover .pillar-icon,
.resource-card:hover .resource-icon {
transform: translateY(-8px) scale(1.1) rotateY(5deg);
animation: icon-float 2s ease-in-out infinite;
/* Premium Cinematic Glow */
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.6),
0 16px 32px rgba(0, 0, 0, 0.4),
0 24px 48px rgba(0, 0, 0, 0.3),
0 0 40px rgba(255, 215, 0, 0.6),
0 0 80px rgba(255, 215, 0, 0.4),
0 0 120px rgba(255, 215, 0, 0.2),
inset 0 4px 8px rgba(255, 255, 255, 0.6),
inset 0 -4px 8px rgba(139, 90, 43, 0.5);
}
/* Floating Animation */
@keyframes icon-float {
0%, 100% {
transform: translateY(-8px) scale(1.1) rotateY(5deg);
}
50% {
transform: translateY(-12px) scale(1.12) rotateY(-5deg);
}
}
.cta-card:hover .cta-icon::after,
.highlight-card:hover .highlight-icon::after,
.involvement-card:hover .card-icon::after,
.pillar-card:hover .pillar-icon::after,
.resource-card:hover .resource-icon::after {
opacity: 1;
}
/* Hover effect for SVG icons */
.cta-card:hover .cta-icon svg,
.highlight-card:hover .highlight-icon svg,
.involvement-card:hover .card-icon svg,
.pillar-card:hover .pillar-icon svg,
.resource-card:hover .resource-icon svg {
transform: scale(1.1);
stroke: #ffffff;
}
/* Smaller icon variant for trust signals and materials - Enhanced Gold */
.trust-icon,
.material-icon {
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--gradient-gold-metallic);
box-shadow:
0 2px 8px rgba(255, 215, 0, 0.4),
0 4px 15px rgba(255, 215, 0, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}
.trust-icon svg,
.material-icon svg {
width: 24px;
height: 24px;
stroke: #ffffff;
stroke-width: 2.5;
fill: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.trust-item:hover .trust-icon,
.material-item:hover .material-icon {
transform: scale(1.1);
box-shadow:
0 4px 15px rgba(255, 215, 0, 0.5),
0 6px 20px rgba(255, 215, 0, 0.3),
0 0 30px rgba(255, 215, 0, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
/* Icon size class for larger icons */
.icon-large {
width: 40px;
height: 40px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.icon-medium {
width: 32px;
height: 32px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
.icon-small {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
/* Ensure Feather Icons tags display as inline-block */
i[data-feather] {
display: inline-block;
vertical-align: middle;
}
/* Ensure all SVG icons display properly */
.cta-icon svg,
.highlight-icon svg,
.card-icon svg,
.pillar-icon svg,
.resource-icon svg,
.material-icon svg,
.trust-icon svg {
display: block;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Legacy emoji fallback (hidden when Feather icons load) */
.cta-icon:not(:has(svg)),
.highlight-icon:not(:has(svg)),
.card-icon:not(:has(svg)),
.pillar-icon:not(:has(svg)),
.resource-icon:not(:has(svg)) {
font-size: 3rem;
background: none;
box-shadow: none;
width: auto;
height: auto;
}
.trust-icon:not(:has(svg)),
.material-icon:not(:has(svg)) {
font-size: 2rem;
background: none;
box-shadow: none;
width: auto;
height: auto;
}
/* Premiere Countdown - Timer Stands Alone (Container Removed) */
.countdown-title {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-gold);
margin: var(--space-xl) 0 var(--space-lg);
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
text-align: center;
/* Subtle golden glow to match site aesthetic */
text-shadow:
0 0 20px rgba(212, 175, 55, 0.4),
0 0 40px rgba(212, 175, 55, 0.2),
0 2px 4px rgba(0, 0, 0, 0.3);
/* Fix z-index layering - bring above background image */
position: relative;
z-index: 2;
}
.countdown-timer {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
margin-bottom: var(--space-md);
/* Fix z-index layering - bring above background image */
position: relative;
z-index: 2;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
}
/* Flip Clock Card - Authentic Analog Split-Flap Display */
.flip-card {
position: relative;
width: 110px;
height: 130px;
perspective: 1000px;
/* Dark mechanical background with subtle texture */
background: linear-gradient(180deg,
#2a2a2a 0%,
#1f1f1f 48%,
#0d0d0d 52%,
#1a1a1a 100%);
/* Enhanced golden border for prominence */
border: 3px solid #D4AF37;
border-radius: 8px;
/* Enhanced golden glow effect for cinematic theme */
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.7),
/* Stronger golden glow layers */
0 0 30px rgba(212, 175, 55, 0.6),
0 0 50px rgba(212, 175, 55, 0.4),
0 0 70px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(0, 0, 0, 0.8),
/* Inner golden glow */
inset 0 0 20px rgba(212, 175, 55, 0.15);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Top half of flip card - lighter shading */
.flip-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 100%);
z-index: 1;
pointer-events: none;
}
/* Middle split line - the mechanical divider */
.flip-card::after {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0.9) 100%);
transform: translateY(-50%);
z-index: 10;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.1),
0 -1px 0 rgba(0, 0, 0, 0.8),
0 0 8px rgba(0, 0, 0, 0.9);
}
.countdown-number {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 700;
/* Enhanced golden color for cinematic theme */
color: #D4AF37;
line-height: 1;
/* Enhanced golden glow for prominence */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.8),
0 0 30px rgba(212, 175, 55, 0.8),
0 0 50px rgba(212, 175, 55, 0.5),
0 0 70px rgba(212, 175, 55, 0.3);
letter-spacing: -0.05em;
position: relative;
z-index: 5;
}
/* Flip animation */
@keyframes flip {
0% {
transform: rotateX(0deg);
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(0deg);
}
}
.flip-card.flipping .flip-card-top {
animation: flip 0.6s ease-in-out;
}
.countdown-label {
font-size: 0.875rem;
/* Enhanced golden color for cinematic theme */
color: #C9A961;
text-transform: uppercase;
letter-spacing: 0.15em;
font-weight: 600;
/* Add golden glow to labels */
text-shadow:
0 0 20px rgba(201, 169, 97, 0.6),
0 2px 4px rgba(0, 0, 0, 0.5);
}
.countdown-date {
margin-top: var(--space-md);
margin-bottom: var(--space-xl);
font-size: 0.9375rem;
color: var(--color-cream-dark);
font-style: italic;
opacity: 0.9;
text-align: center;
/* Subtle glow to match site aesthetic */
text-shadow:
0 0 15px rgba(212, 175, 55, 0.25),
0 2px 4px rgba(0, 0, 0, 0.3);
/* Fix z-index layering - bring above background image */
position: relative;
z-index: 2;
}
/* Impact Stats - DEPRECATED (replaced by countdown) */
.impact-stats {
display: flex;
justify-content: center;
gap: var(--space-xl);
margin: var(--space-xl) 0;
padding: var(--space-lg);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.stat-number {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-gold);
line-height: 1;
margin-bottom: var(--space-xs);
}
.stat-label {
font-size: 0.875rem;
color: var(--color-cream-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Hero Video Player */
.hero-video-wrapper {
max-width: 800px;
margin: var(--space-xl) auto;
}
.hero-video-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: var(--radius-lg);
border: 3px solid var(--color-gold-bright);
box-shadow:
0 8px 30px rgba(255, 215, 0, 0.4),
0 12px 40px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 215, 0, 0.1);
}
.hero-video-embed video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
background: var(--color-primary-dark);
}
/* Hero Scroll Indicator */
.hero-scroll {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
color: var(--color-gold);
margin-top: var(--space-xl);
animation: bounce 2s infinite;
}
.hero-scroll span {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* ================================================
SCROLL INDICATOR - Animated Down Arrow
================================================ */
.scroll-indicator {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs);
color: var(--color-gold);
text-decoration: none;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-indicator:hover {
color: var(--color-gold-bright);
transform: translateX(-50%) scale(1.1);
animation-play-state: paused;
}
.scroll-indicator:focus {
outline: 2px solid var(--color-gold);
outline-offset: 8px;
border-radius: var(--radius-sm);
}
.scroll-icon {
width: 44px;
height: 44px;
filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
transition: all 0.3s ease;
}
.scroll-indicator:hover .scroll-icon {
filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8))
drop-shadow(0 0 40px rgba(212, 175, 55, 0.4));
}
.scroll-text {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
opacity: 0.9;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
/* Scroll bounce animation */
@keyframes scrollBounce {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(10px);
}
}
/* Fade out scroll indicator when scrolled */
.scroll-indicator.hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.scroll-indicator {
bottom: 30px;
}
.scroll-icon {
width: 36px;
height: 36px;
}
.scroll-text {
font-size: 0.65rem;
}
}
/* ================================================
SECTION TITLES & DECORATIONS - Illuminated Manuscript Style
================================================ */
/* Hollywood Premium Section Title */
.section-title {
text-align: center;
margin-bottom: var(--space-md);
position: relative;
display: inline-block;
left: 50%;
transform: translateX(-50%);
/* Premium Gold Foil Effect */
background: var(--gradient-gold-foil-premium);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
/* Hollywood Cinematic Shadow */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 25px rgba(255, 215, 0, 0.4))
drop-shadow(0 0 50px rgba(255, 215, 0, 0.2));
animation: title-shimmer 6s ease-in-out infinite;
}
@keyframes title-shimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Ornamental Star Divider */
.section-title::before,
.section-title::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: var(--color-gold-bright);
text-shadow:
0 0 10px rgba(255, 215, 0, 0.6),
0 0 20px rgba(255, 215, 0, 0.3);
animation: star-twinkle 3s ease-in-out infinite;
}
.section-title::before {
left: -3rem;
}
.section-title::after {
right: -3rem;
}
@keyframes star-twinkle {
0%, 100% {
opacity: 0.5;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateY(-50%) scale(1.2);
}
}
.section-subtitle {
text-align: center;
font-size: 1.25rem;
color: var(--color-sand);
margin-bottom: var(--space-xl);
position: relative;
}
/* Illuminated gold underline */
.section-subtitle::after {
content: '';
display: block;
width: 120px;
height: 2px;
background: var(--gradient-gold-bright);
margin: var(--space-sm) auto 0;
border-radius: 2px;
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
/* ================================================
CINEMATIC TRAILER SECTION - Theater Experience
================================================ */
.section-trailer-cta {
/* Deep black theater background */
background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
position: relative;
padding: 100px 0 120px;
overflow: hidden;
}
/* Subtle starfield texture (optional) */
.section-trailer-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.15), transparent),
radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.15), transparent),
radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.1), transparent);
background-size: 200% 200%;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
/* Background Image - Positioned at Bottom */
.section-trailer-cta::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 60%; /* Covers bottom 60% of section */
background-image: url('../images/sunset-hills-background.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
opacity: 0.85;
pointer-events: none;
z-index: 0;
/* Gradient fade at top for smooth blend */
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,1) 40%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.3) 15%, rgba(0,0,0,1) 40%);
}
/* Trailer Section Title */
.trailer-section-title {
text-align: center;
margin-bottom: var(--space-2xl);
/* Ensure title appears above background image */
position: relative;
z-index: 2;
/* Enhanced golden glow for prominence */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 30px rgba(212, 175, 55, 0.4))
drop-shadow(0 0 50px rgba(212, 175, 55, 0.2));
}
/* Video Container - Premium Frame */
.trailer-video-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-lg);
position: relative;
z-index: 1;
}
.trailer-video-embed {
position: relative;
/* 16:9 standard widescreen aspect ratio - native video format */
padding-bottom: 56.25%; /* 16:9 = 9/16 = 0.5625 */
height: 0;
overflow: hidden;
background: #000000;
/* Simple, clean look without prominent border */
border-radius: 4px;
}
.trailer-video-embed video,
.trailer-video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
object-fit: contain;
z-index: 1;
border: none;
}
/* Video controls styling */
.trailer-video-embed video::-webkit-media-controls-panel {
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}
/* Video Thumbnail with Play Button */
.video-thumbnail {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
overflow: hidden;
}
.video-thumbnail img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.video-thumbnail:hover img {
transform: scale(1.05);
}
.video-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: none;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 2;
}
.video-play-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.video-play-btn svg {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}
.trailer-video-embed video::-webkit-media-controls-play-button,
.trailer-video-embed video::-webkit-media-controls-current-time-display,
.trailer-video-embed video::-webkit-media-controls-time-remaining-display {
color: #D4AF37;
}
/* CTA Buttons - Cinematic Styling */
.trailer-cta-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 30px;
margin-bottom: var(--space-xl);
flex-wrap: wrap;
position: relative;
z-index: 1;
}
/* Cinematic Button Base - Override hero-btn for trailer section */
.trailer-cta-buttons .hero-btn {
font-family: 'Montserrat', 'Roboto', sans-serif;
font-weight: 700;
font-size: 17px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 16px 40px;
border-radius: 6px;
transition: all 0.3s ease;
min-width: 200px;
cursor: pointer;
}
/* Primary CTA - "Watch Now" - Rich Golden */
.trailer-cta-buttons .hero-btn-primary {
background: linear-gradient(135deg, #D4AF37 0%, #C9A961 100%);
color: #1a1a1a;
border: 2px solid #D4AF37;
box-shadow:
0 4px 15px rgba(212, 175, 55, 0.4),
0 2px 8px rgba(0, 0, 0, 0.3);
}
.trailer-cta-buttons .hero-btn-primary:hover {
background: linear-gradient(135deg, #E5C158 0%, #D4AF37 100%);
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.6),
0 4px 15px rgba(212, 175, 55, 0.4),
0 0 30px rgba(212, 175, 55, 0.3);
}
/* Secondary CTA - "Support Mission" - Outlined Golden */
.trailer-cta-buttons .hero-btn-secondary {
background: transparent;
color: #D4AF37;
border: 2px solid #D4AF37;
backdrop-filter: none;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(212, 175, 55, 0.1);
}
.trailer-cta-buttons .hero-btn-secondary:hover {
background: linear-gradient(135deg, #D4AF37 0%, #C9A961 100%);
color: #1a1a1a;
transform: translateY(-2px);
box-shadow:
0 8px 25px rgba(212, 175, 55, 0.5),
0 4px 15px rgba(212, 175, 55, 0.3);
}
/* Button Icons */
.trailer-cta-buttons .hero-btn svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.trailer-cta-buttons .hero-btn:hover svg {
transform: scale(1.1);
}
/* Focus states for accessibility */
.trailer-cta-buttons .hero-btn:focus {
outline: 3px solid rgba(212, 175, 55, 0.5);
outline-offset: 2px;
}
/* ================================================
TRAILER SECTION (Legacy)
================================================ */
.section-trailer {
background: transparent;
position: relative;
}
.trailer-wrapper {
max-width: 1000px;
margin: 0 auto var(--space-lg);
}
.video-embed {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
border-radius: var(--radius-lg);
border: 2px solid var(--color-gold);
box-shadow: var(--shadow-lg);
}
.video-embed iframe,
.video-embed video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
background: var(--color-primary-dark);
}
/* Video player controls styling */
.video-embed video::-webkit-media-controls-panel {
background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.9));
}
.video-embed video::-webkit-media-controls-play-button,
.video-embed video::-webkit-media-controls-current-time-display,
.video-embed video::-webkit-media-controls-time-remaining-display {
color: var(--color-gold-bright);
}
.social-share {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
margin-top: var(--space-lg);
/* Fix z-index layering - bring above background image */
position: relative;
z-index: 2;
}
.share-label {
font-weight: 600;
color: var(--color-gold);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.share-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
transition: var(--transition-base);
}
.share-btn:hover {
background: var(--color-gold);
color: var(--color-primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
/* Trailer Featured Image - Full Width Transparent Overlay */
.trailer-featured-image {
position: relative;
width: 100%;
margin: var(--space-3xl) 0 0;
padding: 0;
z-index: 1;
}
.trailer-featured-image img {
width: 100%;
height: auto;
display: block;
/* Remove border radius for edge-to-edge effect */
border-radius: 0;
/* Subtle overlay effect */
opacity: 0.95;
/* Minimal shadow for depth */
box-shadow:
0 -10px 40px rgba(0, 0, 0, 0.5),
0 0 60px rgba(212, 175, 55, 0.15);
transition: var(--transition-base);
}
.trailer-featured-image img:hover {
opacity: 1;
box-shadow:
0 -10px 50px rgba(0, 0, 0, 0.6),
0 0 80px rgba(212, 175, 55, 0.2);
}
/* ================================================
ABOUT SECTION - Two Column Layout
================================================ */
.section-about {
background: transparent;
position: relative;
}
/* Two Column Layout */
.about-layout {
display: grid;
grid-template-columns: 1fr 400px;
gap: var(--space-3xl);
align-items: start;
margin-top: var(--space-xl);
}
.about-left {
text-align: left;
}
.about-content {
margin-bottom: var(--space-xl);
}
.about-text {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-cream-dark);
margin-bottom: var(--space-md);
text-align: left;
}
/* Movie Poster */
.about-right {
position: sticky;
top: 100px;
}
.movie-poster {
border-radius: var(--radius-lg);
overflow: hidden;
/* Premium golden border matching site theme */
border: 3px solid rgba(212, 175, 55, 0.8);
/* Layered golden glow effect matching countdown timer aesthetic */
box-shadow:
0 0 30px rgba(212, 175, 55, 0.3),
0 0 60px rgba(212, 175, 55, 0.15),
0 12px 40px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 215, 0, 0.08);
transition: var(--transition-premium);
}
.movie-poster:hover {
transform: translateY(-8px) scale(1.02);
/* Enhanced glow on hover */
box-shadow:
0 0 40px rgba(212, 175, 55, 0.5),
0 0 80px rgba(212, 175, 55, 0.25),
0 16px 50px rgba(0, 0, 0, 0.6),
inset 0 0 30px rgba(255, 215, 0, 0.12);
}
.movie-poster img {
width: 100%;
height: auto;
display: block;
}
/* Vertical Highlight Cards - Small Button-Like Cards Centered Below Text */
.highlight-cards-vertical {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--space-md);
max-width: 600px; /* Centered container width */
margin: 0 auto; /* Center the container */
}
.highlight-cards-vertical .highlight-card {
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
min-height: auto; /* Remove fixed height */
background: linear-gradient(135deg,
rgba(10, 10, 10, 0.25) 0%,
rgba(15, 15, 15, 0.35) 100%);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 215, 0, 0.3);
border-radius: var(--radius-md);
transition: var(--transition-base);
flex: 0 1 auto; /* Don't grow, shrink if needed */
}
.highlight-cards-vertical .highlight-card:hover {
transform: translateY(-3px);
border-color: rgba(255, 215, 0, 0.6);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 215, 0, 0.2);
}
.highlight-cards-vertical .highlight-icon {
flex-shrink: 0;
margin: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-gold);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}
.highlight-cards-vertical .highlight-icon .icon-large {
width: 16px;
height: 16px;
color: var(--color-primary-dark);
stroke: var(--color-primary-dark);
stroke-width: 2.5;
fill: none;
}
.highlight-cards-vertical .highlight-icon svg {
width: 16px;
height: 16px;
stroke: var(--color-primary-dark);
stroke-width: 2.5;
fill: none;
}
.highlight-cards-vertical .highlight-text {
flex: 1;
}
.highlight-cards-vertical .highlight-text h3 {
margin-bottom: 0;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-gold);
line-height: 1.2;
}
.highlight-cards-vertical .highlight-text p {
display: none; /* Hide description text for button-like appearance */
}
/* Highlight Cards Grid */
.highlight-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
/* Hollywood Premium Glass-Morphism Card */
.highlight-card {
/* Advanced Glass-Morphism with Texture - Pure Black/Transparent */
background: linear-gradient(135deg,
rgba(10, 10, 10, 0.25) 0%,
rgba(15, 15, 15, 0.35) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
/* Premium Gold Border with Gradient */
border: 2px solid transparent;
border-image: linear-gradient(135deg,
rgba(255, 215, 0, 0.3) 0%,
rgba(218, 165, 32, 0.5) 50%,
rgba(255, 215, 0, 0.3) 100%) 1;
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
transition: var(--transition-premium);
position: relative;
overflow: hidden;
/* Hollywood Cinematic Shadow */
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.4),
0 8px 16px rgba(0, 0, 0, 0.3),
0 16px 32px rgba(0, 0, 0, 0.2),
0 0 40px rgba(255, 215, 0, 0.1),
inset 0 1px 0 rgba(255, 215, 0, 0.15);
}
/* Texture Overlay */
.highlight-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--texture-canvas);
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
/* Content Layer */
.highlight-card > * {
position: relative;
z-index: 1;
}
/* Hollywood 3D Hover Transform */
.highlight-card:hover {
transform: translateY(-12px) scale(1.02) rotateX(2deg);
/* Enhanced Border Glow */
border-image: linear-gradient(135deg,
rgba(255, 215, 0, 0.6) 0%,
rgba(255, 215, 0, 0.9) 50%,
rgba(255, 215, 0, 0.6) 100%) 1;
/* Brighter Glass Effect - Pure Black/Transparent */
background: linear-gradient(135deg,
rgba(15, 15, 15, 0.35) 0%,
rgba(20, 20, 20, 0.45) 100%);
/* Premium Cinematic Glow */
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.5),
0 16px 32px rgba(0, 0, 0, 0.4),
0 24px 48px rgba(0, 0, 0, 0.3),
0 0 60px rgba(255, 215, 0, 0.4),
0 0 120px rgba(255, 215, 0, 0.2),
inset 0 1px 0 rgba(255, 215, 0, 0.3);
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.highlight-card h3 {
font-size: 1.5rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
}
.highlight-card p {
color: var(--color-cream-dark);
margin: 0;
}
/* Creative Team - Legacy */
.creative-team {
margin-top: var(--space-xl);
padding: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
}
.team-heading {
text-align: center;
font-size: 1.75rem;
margin-bottom: var(--space-lg);
color: var(--color-gold);
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
.team-member {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-role {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-cream-dark);
margin-bottom: var(--space-xs);
}
.team-name {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--color-gold);
}
/* Creative Team - Simplified with Headshots */
.creative-team-simple {
margin-top: var(--space-3xl);
text-align: center;
}
.creative-team-simple .team-heading {
font-size: 1.75rem;
margin-bottom: var(--space-xl);
color: var(--color-gold);
}
.team-members-simple {
display: flex;
justify-content: center;
gap: var(--space-3xl);
flex-wrap: wrap;
}
.team-member-simple {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-sm);
}
.team-headshot {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--color-gold-bright);
box-shadow:
0 3px 15px rgba(255, 215, 0, 0.3),
0 6px 20px rgba(0, 0, 0, 0.4),
inset 0 0 15px rgba(255, 215, 0, 0.1);
transition: var(--transition-premium);
background: var(--color-primary-dark);
}
.team-headshot:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 6px 20px rgba(255, 215, 0, 0.5),
0 10px 30px rgba(0, 0, 0, 0.5),
inset 0 0 20px rgba(255, 215, 0, 0.15);
}
.team-headshot img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member-simple .team-name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--color-gold-bright);
margin: 0;
}
.team-member-simple .team-role {
font-size: 0.8125rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-cream-dark);
margin: 0;
}
/* ================================================
GET INVOLVED SECTION
================================================ */
.section-get-involved {
background: transparent;
position: relative;
}
.involvement-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
}
/* Hollywood Premium Glass-Morphism Card */
.involvement-card {
/* Advanced Glass-Morphism with Texture - Pure Black/Transparent */
background: linear-gradient(135deg,
rgba(10, 10, 10, 0.25) 0%,
rgba(15, 15, 15, 0.35) 100%);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
/* Premium Gold Border with Gradient */
border: 2px solid transparent;
border-image: linear-gradient(135deg,
rgba(255, 215, 0, 0.3) 0%,
rgba(218, 165, 32, 0.5) 50%,
rgba(255, 215, 0, 0.3) 100%) 1;
border-radius: var(--radius-lg);
padding: var(--space-lg);
display: flex;
flex-direction: column;
transition: var(--transition-premium);
position: relative;
overflow: hidden;
/* Hollywood Cinematic Shadow */
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.4),
0 8px 16px rgba(0, 0, 0, 0.3),
0 16px 32px rgba(0, 0, 0, 0.2),
0 0 40px rgba(255, 215, 0, 0.1),
inset 0 1px 0 rgba(255, 215, 0, 0.15);
}
/* Texture Overlay */
.involvement-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--texture-canvas);
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
/* Content Layer */
.involvement-card > * {
position: relative;
z-index: 1;
}
/* Hollywood 3D Hover Transform */
.involvement-card:hover {
transform: translateY(-12px) scale(1.02) rotateX(2deg);
/* Enhanced Border Glow */
border-image: linear-gradient(135deg,
rgba(255, 215, 0, 0.6) 0%,
rgba(255, 215, 0, 0.9) 50%,
rgba(255, 215, 0, 0.6) 100%) 1;
/* Brighter Glass Effect - Pure Black/Transparent */
background: linear-gradient(135deg,
rgba(15, 15, 15, 0.35) 0%,
rgba(20, 20, 20, 0.45) 100%);
/* Premium Cinematic Glow */
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.5),
0 16px 32px rgba(0, 0, 0, 0.4),
0 24px 48px rgba(0, 0, 0, 0.3),
0 0 60px rgba(255, 215, 0, 0.4),
0 0 120px rgba(255, 215, 0, 0.2),
inset 0 1px 0 rgba(255, 215, 0, 0.3);
}
.involvement-card-featured {
border-color: var(--color-gold-bright);
border-width: 3px;
background: rgba(10, 10, 10, 0.2);
box-shadow:
0 4px 20px rgba(255, 215, 0, 0.3),
inset 0 1px 0 rgba(255, 215, 0, 0.15);
}
/* Adjustment 3: Repositioned badges to top-right corner to avoid overlapping card titles */
.card-badge {
position: absolute;
top: var(--space-md); /* Changed from -12px to var(--space-md) to position inside card */
right: var(--space-md);
background: var(--gradient-gold);
color: var(--color-primary-dark);
padding: 0.25rem 1rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10; /* Ensure badge stays on top but doesn't overlap content */
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: var(--space-md);
}
.card-title {
font-size: 1.5rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
}
.card-description {
color: var(--color-cream-dark);
margin-bottom: var(--space-md);
flex-grow: 1;
}
.card-benefits {
margin-bottom: var(--space-md);
}
.card-benefits li {
color: var(--color-cream-dark);
margin-bottom: var(--space-xs);
font-size: 0.9375rem;
}
.card-note {
font-size: 0.875rem;
color: var(--color-cream-dark);
text-align: center;
margin-top: var(--space-sm);
font-style: italic;
}
/* Adjustment 4: Reduced button size within involvement cards for more compact, proportional design */
.involvement-card .btn,
.involvement-card .btn-primary,
.involvement-card .btn-secondary {
font-size: 0.875rem; /* Reduced from 1rem */
padding: 0.75rem 2rem; /* Reduced from 1rem 3rem */
min-height: 44px; /* Maintain accessibility touch target */
}
/* Email Signup Form */
.email-signup-form {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.email-signup-form input {
padding: 0.75rem 1rem;
border-radius: var(--radius-md);
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.1);
color: var(--color-cream);
font-size: 1rem;
}
.email-signup-form input::placeholder {
color: var(--color-cream-dark);
}
/* Social Buttons */
.social-buttons {
display: flex;
justify-content: center;
gap: var(--space-sm);
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
transition: var(--transition-base);
}
.social-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.social-yt:hover {
background: #FF0000;
color: white;
}
.social-fb:hover {
background: #1877F2;
color: white;
}
.social-tw:hover {
background: #1DA1F2;
color: white;
}
.social-ig:hover {
background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
color: white;
}
.social-tk:hover {
background: #000000;
color: white;
}
/* Full-Width Involvement Card (Follow Us on Social Media) */
.involvement-card-full-width {
grid-column: 1 / -1; /* Span all columns */
text-align: center;
align-items: center;
}
.involvement-card-full-width .card-icon {
margin: 0 auto;
}
.involvement-card-full-width .card-title,
.involvement-card-full-width .card-description {
text-align: center;
}
.involvement-card-full-width .social-buttons {
justify-content: center;
margin-top: var(--space-md);
}
/* ================================================
MISSION SECTION
================================================ */
.section-mission {
background: transparent;
position: relative;
}
.mission-statement {
max-width: 800px;
margin: 0 auto var(--space-xl);
padding: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
text-align: center;
font-size: 1.25rem;
line-height: 1.8;
color: var(--color-cream);
}
/* Three Pillars */
.pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.pillar-card {
background: var(--glass-bg-dark);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
transition: var(--transition-base);
position: relative;
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 215, 0, 0.1);
}
.pillar-card:hover {
transform: translateY(-8px);
border-color: var(--glass-border-bright);
background: rgba(15, 15, 15, 0.25);
box-shadow:
0 8px 30px rgba(255, 215, 0, 0.4),
0 12px 40px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 215, 0, 0.2);
}
.pillar-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--gradient-gold-metallic);
color: var(--color-primary-dark);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
box-shadow:
0 4px 15px rgba(255, 215, 0, 0.5),
0 0 30px rgba(255, 215, 0, 0.3);
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.pillar-card h3 {
font-size: 1.5rem;
margin-bottom: var(--space-md);
color: var(--color-gold-bright);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.pillar-card p {
color: var(--color-cream-dark);
margin: 0;
}
/* Stories of Impact */
.impact-stories {
margin-top: var(--space-xl);
}
.stories-heading {
text-align: center;
font-size: 2rem;
margin-bottom: var(--space-lg);
color: var(--color-gold);
}
.stories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.story-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
position: relative;
transition: var(--transition-base);
}
.story-card:hover {
transform: translateY(-5px);
border-color: var(--color-gold);
box-shadow: 0 8px 25px rgba(244, 197, 66, 0.3);
}
.quote-mark {
font-family: var(--font-display);
font-size: 4rem;
color: var(--color-gold);
opacity: 0.3;
line-height: 1;
position: absolute;
top: var(--space-md);
left: var(--space-md);
}
.story-text {
font-size: 1rem;
line-height: 1.7;
color: var(--color-cream-dark);
margin-bottom: var(--space-md);
padding-top: var(--space-lg);
}
.story-author {
font-family: var(--font-display);
font-size: 1rem;
color: var(--color-gold);
font-style: italic;
}
/* Mission CTA */
.mission-cta {
text-align: center;
padding: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--color-gold);
border-radius: var(--radius-lg);
}
.mission-cta h3 {
font-size: 2rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
}
.mission-cta p {
font-size: 1.125rem;
color: var(--color-cream-dark);
margin-bottom: var(--space-lg);
}
/* ================================================
SUPPORT/CROWDFUNDING SECTION
================================================ */
.section-support {
background: transparent;
position: relative;
}
.tiers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.tier-card {
/* Modern Glassmorphism Effect - Allows silk texture to show through */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
/* Golden border with enhanced visibility */
border: 2px solid #D4AF37;
border-radius: var(--radius-lg);
/* Flexbox structure for vertical button alignment */
display: flex;
flex-direction: column;
min-height: 100%;
transition: var(--transition-base);
position: relative;
overflow: visible;
/* Glassmorphism shadow with golden glow */
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.37),
0 0 20px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tier-card:hover {
transform: translateY(-5px);
/* Enhanced glass effect on hover */
background: rgba(255, 255, 255, 0.1);
border-color: #FFD700;
box-shadow:
0 12px 40px 0 rgba(0, 0, 0, 0.4),
0 0 30px rgba(212, 175, 55, 0.5),
0 0 60px rgba(212, 175, 55, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tier-card-featured {
/* Featured card with stronger glassmorphism */
background: rgba(255, 255, 255, 0.08);
border-color: #FFD700;
border-width: 3px;
transform: scale(1.05);
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.37),
0 0 30px rgba(255, 215, 0, 0.5),
0 0 60px rgba(255, 215, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.tier-card-featured:hover {
transform: scale(1.08) translateY(-5px);
background: rgba(255, 255, 255, 0.12);
box-shadow:
0 12px 40px 0 rgba(0, 0, 0, 0.4),
0 0 40px rgba(255, 215, 0, 0.6),
0 0 80px rgba(255, 215, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.tier-card-premium {
/* Premium card with glassmorphism and bronze accent */
background: rgba(255, 255, 255, 0.06);
border-color: #CD853F;
border-width: 2px;
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.37),
0 0 20px rgba(205, 133, 63, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tier-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--gradient-gold-bright);
color: var(--color-primary-dark);
padding: 0.375rem 0.875rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
z-index: 10;
box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
white-space: nowrap;
}
.tier-badge-premium {
background: var(--gradient-gold-metallic);
color: var(--color-primary-dark);
}
.tier-header {
background: var(--gradient-purple);
padding: var(--space-lg);
padding-right: calc(var(--space-lg) + 120px);
text-align: center;
position: relative;
}
.tier-name {
font-size: 1.5rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
max-width: 100%;
word-wrap: break-word;
/* Enhanced text shadow for readability on glassmorphism */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.6),
0 0 10px rgba(0, 0, 0, 0.4);
}
.tier-price {
display: flex;
flex-direction: column;
align-items: center;
}
.price-amount {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-cream);
line-height: 1;
/* Enhanced text shadow for readability on glassmorphism */
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.6),
0 0 10px rgba(0, 0, 0, 0.4);
}
.price-period {
font-size: 0.875rem;
color: var(--color-cream-dark);
margin-top: var(--space-xs);
/* Subtle text shadow for readability */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tier-body {
padding: var(--space-lg);
/* Allows content to grow and push button to bottom */
flex-grow: 1;
display: flex;
flex-direction: column;
}
.tier-description {
color: var(--color-cream-dark);
margin-bottom: var(--space-md);
font-size: 0.9375rem;
/* Subtle text shadow for readability on glassmorphism */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tier-benefits {
margin-bottom: var(--space-md);
/* Ensures consistent minimum height for benefit lists */
min-height: 180px;
}
.tier-benefits li {
color: var(--color-cream-dark);
margin-bottom: var(--space-xs);
font-size: 0.9375rem;
/* Subtle text shadow for readability on glassmorphism */
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tier-footer {
/* Anchors button at bottom with consistent spacing */
padding: 0 var(--space-lg) var(--space-lg);
margin-top: auto;
}
/* Ensure all tier buttons have uniform dimensions */
.tier-footer .btn {
/* Flexible height for all tier buttons to accommodate text */
min-height: 56px;
height: auto;
/* Increased padding for better text accommodation */
padding: 1rem 1.5rem;
/* Consistent font size */
font-size: 0.9375rem;
/* Allow text wrapping for longer button text */
white-space: normal;
line-height: 1.4;
/* Full width within card */
width: 100%;
}
/* Custom Amount Card */
.custom-amount-card {
max-width: 600px;
margin: 0 auto var(--space-xl);
padding: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
text-align: center;
}
.custom-amount-card h3 {
font-size: 1.75rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
}
.custom-amount-card p {
color: var(--color-cream-dark);
margin-bottom: var(--space-lg);
}
.custom-amount-form {
display: flex;
gap: var(--space-sm);
max-width: 400px;
margin: 0 auto var(--space-sm);
}
.amount-input-wrapper {
position: relative;
flex: 1;
}
.currency-symbol {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-gold);
font-size: 1.25rem;
font-weight: 700;
}
.custom-amount-form input {
width: 100%;
padding: 0.75rem 1rem 0.75rem 2.5rem;
border-radius: var(--radius-md);
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.1);
color: var(--color-cream);
font-size: 1.125rem;
font-weight: 600;
}
.form-note {
font-size: 0.875rem;
color: var(--color-cream-dark);
font-style: italic;
margin: 0;
}
/* Trust Signals */
.trust-signals {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.trust-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-xs);
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.trust-text {
font-size: 0.875rem;
color: var(--color-cream-dark);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ================================================
WHERE TO WATCH SECTION
================================================ */
.section-watch {
background: transparent;
position: relative;
}
.watch-featured {
margin-bottom: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
position: relative;
}
.featured-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: var(--gradient-gold);
color: var(--color-primary-dark);
padding: 0.5rem 1.5rem;
border-radius: var(--radius-full);
font-weight: 700;
text-transform: uppercase;
font-size: 0.875rem;
}
.watch-featured-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--space-xl);
align-items: center;
}
.watch-featured-image img {
width: 100%;
border-radius: var(--radius-md);
}
.watch-featured-text h3 {
font-size: 2rem;
margin-bottom: var(--space-sm);
color: var(--color-gold);
}
.watch-featured-text p {
color: var(--color-cream-dark);
margin-bottom: var(--space-md);
}
.watch-benefits {
margin-bottom: var(--space-lg);
}
.watch-benefits li {
color: var(--color-cream-dark);
margin-bottom: var(--space-xs);
}
/* ================================================
RESOURCES SECTION
================================================ */
.section-resources {
background: transparent;
position: relative;
}
.resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-lg);
margin-bottom: var(--space-xl);
}
.resource-card {
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 2px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
transition: var(--transition-base);
position: relative;
}
.resource-card:hover {
transform: translateY(-8px);
border-color: var(--color-gold);
box-shadow: 0 8px 25px rgba(244, 197, 66, 0.3);
}
.resource-card-featured {
border-color: var(--color-gold);
border-width: 3px;
}
.resource-badge {
position: absolute;
top: -12px;
right: var(--space-md);
background: var(--gradient-gold);
color: var(--color-primary-dark);
padding: 0.25rem 1rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.resource-card h3 {
font-size: 1.5rem;
margin-bottom: var(--space-md);
color: var(--color-gold);
}
.resource-card p {
color: var(--color-cream-dark);
margin-bottom: var(--space-lg);
}
/* Additional Materials */
.additional-materials {
max-width: 800px;
margin: 0 auto;
}
.materials-heading {
text-align: center;
font-size: 1.5rem;
margin-bottom: var(--space-lg);
color: var(--color-gold);
}
.materials-list {
display: grid;
gap: var(--space-sm);
}
.material-item {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
transition: var(--transition-base);
}
.material-item:hover {
border-color: var(--color-gold);
transform: translateX(5px);
}
/* Icon styles moved to unified CINEMATIC ICON SYSTEM section above */
.material-name {
flex: 1;
color: var(--color-cream);
font-weight: 500;
}
.material-action {
color: var(--color-gold);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ================================================
FOOTER
================================================ */
.footer {
background: rgba(0, 31, 41, 0.5);
backdrop-filter: blur(10px);
border-top: 2px solid rgba(255, 215, 0, 0.3);
padding: var(--space-3xl) 0 var(--space-lg);
box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.1);
position: relative;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: var(--space-xl);
align-items: center;
margin-bottom: var(--space-xl);
}
.footer-logo {
text-align: center;
}
.footer-logo img {
margin: 0 auto var(--space-sm);
}
.footer-tagline {
font-family: var(--font-display);
font-size: 1rem;
color: var(--color-gold);
font-style: italic;
margin: 0;
}
.footer-nav {
display: flex;
justify-content: center;
gap: var(--space-lg);
flex-wrap: wrap;
}
.footer-link {
color: var(--color-cream-dark);
font-size: 0.9375rem;
transition: var(--transition-base);
}
.footer-link:hover {
color: var(--color-gold);
}
.footer-social {
display: flex;
justify-content: center;
gap: var(--space-sm);
}
.footer-social-btn {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gold);
transition: var(--transition-base);
}
.footer-social-btn:hover {
background: var(--color-gold);
color: var(--color-primary-dark);
transform: translateY(-3px);
box-shadow: var(--shadow-gold);
}
.footer-bottom {
text-align: center;
padding-top: var(--space-lg);
border-top: 1px solid rgba(244, 197, 66, 0.1);
}
.footer-bottom p {
color: var(--color-cream-dark);
font-size: 0.875rem;
margin: 0;
}
/* ================================================
RESPONSIVE STYLES
================================================ */
/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
:root {
font-size: 15px;
}
h2 {
font-size: 2rem;
}
.container {
padding: 0 var(--space-md);
}
.section {
padding: var(--space-2xl) 0;
}
/* Hero */
.hero-cta-cards {
grid-template-columns: 1fr;
}
.impact-stats {
flex-direction: column;
gap: var(--space-md);
}
/* Grids */
.highlight-grid,
.team-grid,
.involvement-grid,
.pillars-grid,
.stories-grid,
.resources-grid {
grid-template-columns: repeat(2, 1fr);
}
.tiers-grid {
grid-template-columns: repeat(2, 1fr);
}
/* About Section - Stack on tablet */
.about-layout {
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.about-right {
position: relative;
top: 0;
max-width: 400px;
margin: 0 auto;
}
.highlight-cards-vertical {
gap: var(--space-md);
}
/* Team Members */
.team-members-simple {
gap: var(--space-xl);
}
.team-headshot {
width: 80px;
height: 80px;
}
/* Trailer Section - Tablet */
.section-trailer-cta {
padding: 80px 0 100px;
}
.trailer-section-title {
font-size: 2rem;
margin-bottom: var(--space-xl);
}
/* Background Image - Tablet Adjustments */
.section-trailer-cta::after {
height: 55%; /* Slightly reduced height for tablet */
background-size: cover;
background-position: center bottom;
}
.trailer-video-wrapper {
max-width: 900px;
padding: 0 var(--space-md);
}
.trailer-cta-buttons .hero-btn {
font-size: 16px;
padding: 15px 36px;
}
/* Trailer Featured Image - Tablet (Full Width Maintained) */
.trailer-featured-image {
margin-top: var(--space-2xl);
}
/* Footer */
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
}
/* Mobile (0 - 767px) */
@media (max-width: 767px) {
:root {
font-size: 14px;
}
/* Adjust section divider for mobile */
.section-divider {
margin: var(--space-lg) 0;
}
.section-divider::after {
width: 85%;
height: 10px;
}
body {
font-size: 1rem;
}
h1 {
font-size: clamp(2rem, 8vw, 3rem);
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.25rem;
}
.container {
padding: 0 var(--space-sm);
}
.section {
padding: var(--space-xl) 0;
}
/* Navigation - Mobile */
.navbar {
position: fixed !important;
width: 100% !important;
left: 0 !important;
right: 0 !important;
}
.nav-container {
padding: 0 !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
/* Hide logo and desktop CTA on mobile */
.nav-logo,
.navbar .btn-nav {
display: none !important;
}
/* Hamburger button - always visible and properly positioned */
.nav-toggle,
#nav-toggle,
.navbar .nav-toggle {
display: flex !important;
position: fixed !important;
top: 20px !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
z-index: 9999 !important;
background: rgba(10, 10, 10, 0.95) !important;
padding: 10px !important;
border-radius: 8px !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border: 2px solid #FFD700 !important;
box-shadow:
0 0 20px rgba(255, 215, 0, 0.6),
0 0 40px rgba(255, 215, 0, 0.3),
inset 0 0 10px rgba(255, 215, 0, 0.1) !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
justify-content: center !important;
align-items: center !important;
transform: none !important;
flex-shrink: 0 !important;
cursor: pointer !important;
}
/* Ensure hamburger lines are visible with strong glow */
.nav-toggle .hamburger,
#nav-toggle .hamburger {
background: #FFD700 !important;
box-shadow:
0 0 15px rgba(255, 215, 0, 1),
0 0 30px rgba(255, 215, 0, 0.6) !important;
width: 26px !important;
height: 3px !important;
display: block !important;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after,
#nav-toggle .hamburger::before,
#nav-toggle .hamburger::after {
content: '' !important;
background: #FFD700 !important;
box-shadow:
0 0 15px rgba(255, 215, 0, 1),
0 0 30px rgba(255, 215, 0, 0.6) !important;
width: 26px !important;
height: 3px !important;
display: block !important;
position: absolute !important;
left: 0 !important;
}
.nav-toggle .hamburger::before,
#nav-toggle .hamburger::before {
top: -9px !important;
}
.nav-toggle .hamburger::after,
#nav-toggle .hamburger::after {
bottom: -9px !important;
top: auto !important;
}
/* Mobile menu - full screen slide-in from right */
.nav-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100vh !important;
background: rgba(10, 10, 10, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
padding: var(--space-xl) !important;
padding-top: 100px !important;
transform: translateX(100%) !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
border-left: 1px solid rgba(212, 175, 55, 0.2) !important;
box-shadow: -4px 0 30px rgba(0, 0, 0, 0.5) !important;
z-index: 1000 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* Menu active state - slide in */
.nav-menu.active {
transform: translateX(0) !important;
}
/* Nav links in mobile menu - golden accents */
.nav-link {
width: 100%;
max-width: 300px;
text-align: center;
padding: var(--space-md) var(--space-lg);
margin: var(--space-sm) 0;
font-size: 1.2rem;
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
color: var(--color-cream) !important;
background: rgba(10, 10, 10, 0.5);
border-radius: 8px;
}
.nav-link::after {
display: none;
}
.nav-link:hover {
background: rgba(212, 175, 55, 0.2);
color: var(--color-gold-bright) !important;
}
/* Support button inside mobile menu */
.nav-menu .btn-nav {
display: block !important;
width: 100%;
max-width: 300px;
margin-top: var(--space-lg);
}
/* Hero - Mobile: Increased top padding to prevent navbar overlap */
.hero {
padding: 120px var(--space-sm) var(--space-xl);
}
/* Hero - Mobile: When navbar is scrolled/fixed, reduce padding */
.navbar.scrolled ~ .hero {
padding-top: 70px;
}
.hero-logo img {
max-width: 350px;
}
.hero-cta-buttons {
flex-direction: column;
gap: var(--space-md);
}
.hero-btn {
width: 100%;
min-width: auto;
padding: 1rem 2rem;
font-size: 1rem;
}
.hero-video-wrapper {
max-width: 100%;
}
.countdown-timer {
gap: var(--space-md);
}
.countdown-item {
min-width: 70px;
}
/* Flip Clock - Mobile Adjustments */
.flip-card {
width: 90px;
height: 110px;
}
.countdown-number {
font-size: 2.5rem;
}
.countdown-title {
font-size: 1.25rem;
}
/* Trailer Section - Mobile */
.section-trailer-cta {
padding: 60px 0 80px;
}
.trailer-section-title {
font-size: 1.5rem;
margin-bottom: var(--space-lg);
/* Slightly reduce glow intensity on mobile */
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 20px rgba(212, 175, 55, 0.3));
}
/* Background Image - Mobile Adjustments */
.section-trailer-cta::after {
height: 50%; /* Reduced height for mobile */
background-size: cover;
background-position: center bottom;
opacity: 0.75; /* Slightly more transparent on mobile */
/* Adjusted gradient fade for mobile */
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,1) 35%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,1) 35%);
}
.trailer-video-wrapper {
padding: 0 var(--space-md);
}
.trailer-video-embed {
/* Maintain 16:9 aspect ratio on mobile - native video format */
padding-bottom: 56.25%;
border-radius: 2px;
}
/* Trailer CTA Buttons - Stack vertically on mobile */
.trailer-cta-buttons {
flex-direction: column;
gap: 15px;
margin-top: 25px;
}
.trailer-cta-buttons .hero-btn {
width: 100%;
max-width: 400px;
font-size: 15px;
padding: 14px 32px;
letter-spacing: 1.5px;
}
/* Trailer Featured Image - Mobile (Full Width Maintained) */
.trailer-featured-image {
margin-top: var(--space-xl);
}
/* Buttons */
.btn {
padding: 0.875rem 2rem;
font-size: 0.875rem;
}
.btn-lg {
padding: 1rem 2.5rem;
font-size: 1rem;
}
/* All Grids to Single Column */
.highlight-grid,
.team-grid,
.involvement-grid,
.pillars-grid,
.stories-grid,
.tiers-grid,
.resources-grid {
grid-template-columns: 1fr;
}
/* About Section - Mobile */
.about-layout {
grid-template-columns: 1fr;
}
.about-right {
max-width: 100%;
}
.highlight-cards-vertical {
max-width: 100%; /* Full width on mobile */
flex-direction: column; /* Stack vertically on mobile */
}
.highlight-cards-vertical .highlight-card {
min-height: auto; /* Auto height on mobile */
}
/* Team Members - Mobile */
.team-members-simple {
flex-direction: column;
align-items: center;
gap: var(--space-xl);
}
.team-headshot {
width: 90px;
height: 90px;
}
/* Featured tier card - remove scale */
.tier-card-featured {
transform: scale(1);
}
.tier-card-featured:hover {
transform: translateY(-5px);
}
/* Watch Section */
.watch-featured-content {
grid-template-columns: 1fr;
}
/* Footer */
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.footer-nav {
flex-direction: column;
gap: var(--space-sm);
}
/* Social Share */
.social-share {
flex-wrap: wrap;
}
/* Trust Signals */
.trust-signals {
gap: var(--space-md);
}
}
/* ================================================
PERFORMANCE & ACCESSIBILITY OPTIMIZATIONS
Hollywood Quality with Accessibility First
================================================ */
/* Reduced Motion Support - Accessibility First */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Disable all custom animations */
body::after,
.cta-icon,
.highlight-icon,
.card-icon,
.pillar-icon,
.resource-icon,
.hero-scroll {
animation: none !important;
}
/* Keep essential transforms but remove animations */
.btn-primary::before,
.btn-secondary::after {
transition: none !important;
}
}
/* Mobile Performance Optimizations */
@media (max-width: 767px) {
/* Simplified Starfield for Mobile Performance */
body {
background-image:
/* Reduced to 12 essential star layers */
radial-gradient(2px 2px at 25% 35%, rgba(255,215,0,0.8), transparent),
radial-gradient(2px 2px at 75% 65%, rgba(255,215,0,0.8), transparent),
radial-gradient(1.5px 1.5px at 20% 30%, #FFD700, transparent),
radial-gradient(1.5px 1.5px at 60% 70%, #FFD700, transparent),
radial-gradient(1px 1px at 50% 50%, #FFF8DC, transparent),
radial-gradient(1px 1px at 80% 10%, #FFF8DC, transparent),
radial-gradient(1px 1px at 33% 90%, #FFF8DC, transparent),
radial-gradient(1px 1px at 65% 45%, #FFF8DC, transparent),
radial-gradient(1px 1px at 25% 60%, #F0E68C, transparent),
radial-gradient(1px 1px at 85% 85%, #F0E68C, transparent),
/* Atmospheric depth layers */
radial-gradient(circle at 50% 50%, rgba(10,10,10,0.15), transparent 50%),
radial-gradient(circle at 30% 70%, rgba(15,15,15,0.1), transparent 40%);
background-size:
400px 400px, 400px 400px,
350px 350px, 350px 350px,
300px 300px, 300px 300px, 300px 300px, 300px 300px,
250px 250px, 250px 250px,
100% 100%, 100% 100%;
}
/* Simplified Film Grain for Mobile */
body::before {
opacity: 0.2;
}
/* Simplified Twinkling for Mobile */
body::after {
background-image:
radial-gradient(1.5px 1.5px at 35% 45%, rgba(255,215,0,0.6), transparent),
radial-gradient(1.5px 1.5px at 65% 55%, rgba(255,215,0,0.6), transparent),
radial-gradient(1px 1px at 45% 30%, rgba(255,215,0,0.4), transparent);
background-size: 400px 400px;
}
/* Simplified Glass-Morphism for Mobile Performance */
.navbar.scrolled,
.btn-secondary,
.highlight-card,
.involvement-card {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Reduce Shadow Complexity on Mobile */
.btn-primary {
box-shadow:
0 0 20px rgba(255, 215, 0, 0.4),
0 4px 12px rgba(0, 0, 0, 0.5);
}
.btn-primary:hover {
box-shadow:
0 0 30px rgba(255, 215, 0, 0.5),
0 6px 16px rgba(0, 0, 0, 0.5);
}
/* Simplified Icon Shadows on Mobile */
.cta-icon,
.highlight-icon,
.card-icon,
.pillar-icon,
.resource-icon {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.4),
0 0 20px rgba(255, 215, 0, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.4);
}
/* Disable 3D Transforms on Mobile for Performance */
.highlight-card:hover,
.involvement-card:hover {
transform: translateY(-8px) scale(1.01);
}
.cta-card:hover .cta-icon,
.highlight-card:hover .highlight-icon,
.involvement-card:hover .card-icon {
transform: translateY(-6px) scale(1.08);
}
}
/* GPU Acceleration for Smooth Animations */
.btn,
.btn-primary,
.btn-secondary,
.nav-link,
.highlight-card,
.involvement-card,
.cta-icon,
.highlight-icon,
.card-icon,
.pillar-icon,
.resource-icon {
will-change: transform;
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.btn-primary {
border: 3px solid var(--color-gold-bright);
}
.btn-secondary {
border: 3px solid var(--color-gold-bright);
}
.highlight-card,
.involvement-card {
border: 3px solid var(--color-gold-bright);
}
.nav-link {
text-shadow: none;
}
}
/* Print Styles */
@media print {
/* Hide non-essential elements */
.navbar,
.hero-scroll,
.social-share,
.btn,
body::before,
body::after {
display: none !important;
}
/* Simplify backgrounds */
body,
.section {
background: white !important;
color: black !important;
}
/* Ensure text is readable */
h1, h2, h3, h4, h5, h6,
.section-title {
color: black !important;
text-shadow: none !important;
filter: none !important;
-webkit-text-fill-color: black !important;
}
/* Remove shadows and effects */
* {
box-shadow: none !important;
text-shadow: none !important;
}
}
/* Focus Visible for Keyboard Navigation */
:focus-visible {
outline: 3px solid var(--color-gold-bright);
outline-offset: 2px;
}
/* Remove outline for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Ensure Interactive Elements are Accessible */
button,
a,
input,
textarea,
select {
min-height: 44px;
min-width: 44px;
}
/* Loading Performance - Prevent Layout Shift */
img,
video {
max-width: 100%;
height: auto;
}
/* Smooth Scroll with Reduced Motion Respect */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ================================================
VIDEO MODAL
================================================ */
.modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md);
}
.modal[hidden] {
display: none;
}
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
cursor: pointer;
backdrop-filter: blur(10px);
}
.modal-content {
position: relative;
background: #000000;
border-radius: var(--radius-lg);
max-width: 1200px;
width: 100%;
max-height: 90vh;
overflow: hidden;
border: 2px solid var(--color-gold);
box-shadow:
0 0 40px rgba(212, 175, 55, 0.5),
0 0 80px rgba(212, 175, 55, 0.3),
0 20px 60px rgba(0, 0, 0, 0.8);
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-close {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.8);
border: 2px solid var(--color-gold);
border-radius: 50%;
color: var(--color-gold);
z-index: 10;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-close:hover {
background: rgba(212, 175, 55, 0.2);
border-color: var(--color-gold-bright);
color: var(--color-gold-bright);
transform: scale(1.1);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}
.modal-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
background: #000000;
}
.modal-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (max-width: 768px) {
.modal-content {
max-width: 95%;
}
.modal-close {
width: 36px;
height: 36px;
}
}
/* ================================================
TEMPORARY HIDDEN SECTIONS
================================================ */
/* Hide Creative Team Section */
.creative-team-simple {
display: none !important;
}
/* Hide Host Screening Card */
.card-host-screening {
display: none !important;
}
/* Hide Merchandise Card */
.card-merchandise {
display: none !important;
}