* {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body {
margin-top: 44px !important;
overflow: hidden !important;
height: 100vh !important;
font-family: 'Open Sans', sans-serif !important;
background: #000 !important;
color: #fff !important;
}
.film-container {
position: relative !important;
width: 100vw !important;
height: calc(100vh - 44px) !important;
overflow: hidden !important;
}
.film-grain-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii45IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB0eXBlPSJmcmFjdGFsTm9pc2UiLz48ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+PC9maWx0ZXI+PHBhdGggZD0iTTAgMGgzMDB2MzAwSDB6IiBmaWx0ZXI9InVybCgjYSkiIG9wYWNpdHk9Ii4zNSIvPjwvc3ZnPg==') !important;
opacity: 0.15 !important;
pointer-events: none !important;
z-index: 998 !important;
animation: grain 0.8s steps(10) infinite !important;
}
@keyframes grain {
0%, 100% {
transform: translate(0, 0) !important;
}
10% {
transform: translate(-5%, -5%) !important;
}
20% {
transform: translate(-10%, 5%) !important;
}
30% {
transform: translate(5%, -10%) !important;
}
40% {
transform: translate(-5%, 15%) !important;
}
50% {
transform: translate(-10%, 5%) !important;
}
60% {
transform: translate(15%, 0%) !important;
}
70% {
transform: translate(0%, 10%) !important;
}
80% {
transform: translate(-15%, 0%) !important;
}
90% {
transform: translate(10%, 5%) !important;
}
}
.vignette-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0,0,0,0.4) 100%) !important;
pointer-events: none !important;
z-index: 997 !important;
}
.fixed-text-container {
position: fixed !important;
top: 50% !important;
left: 5% !important;
width: 500px !important;
max-width: 40% !important;
z-index: 999 !important;
pointer-events: none !important;
opacity: 0 !important;
transform: translateY(-50%) translateX(-30px) scale(0.95) !important;
filter: blur(4px) !important;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.fixed-text-container.active {
opacity: 1 !important;
transform: translateY(-50%) translateX(0) scale(1) !important;
filter: blur(0px) !important;
}
.fixed-text-container.align-right {
left: auto !important;
right: 5% !important;
transform: translateY(-50%) translateX(30px) scale(0.95) !important;
}
.fixed-text-container.align-right.active {
transform: translateY(-50%) translateX(0) scale(1) !important;
}
.film-strip-horizontal {
display: flex !important;
flex-direction: row !important;
width: fit-content !important;
height: 100% !important;
will-change: transform !important;
}
.frame {
position: relative !important;
min-width: 100vw !important;
width: 100vw !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
background: #000 !important;
box-sizing: border-box !important;
}
.frame-background {
position: absolute !important;
top: 5.5% !important;
left: 0.5% !important;
width: 99% !important;
height: 87% !important;
z-index: 1 !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.film-frame-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10 !important;
pointer-events: none !important;
}
.frame-background img,
.frame-background video,
.intro-video,
.frame-video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
.intro-frame {
background: #000 !important;
}
.intro-video {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
.intro-text-simple-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 5 !important;
pointer-events: none !important;
display: block !important;
}
.frame-content {
display: none !important;
}
.fixed-text-container .frame-content {
display: block !important;
position: relative !important;
background: rgba(0, 0, 0, 0.75) !important;
padding: 40px !important;
border-radius: 8px !important;
backdrop-filter: blur(10px) !important;
}
.event-date {
display: block !important;
font-family: 'Special Elite', monospace !important;
font-size: 14px !important;
color: #ccc !important;
margin-bottom: 10px !important;
letter-spacing: 2px !important;
}
.event-title {
font-family: 'Cinzel', serif !important;
font-size: 42px !important;
font-weight: 700 !important;
color: #fff !important;
margin-bottom: 10px !important;
line-height: 1.2 !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}
.event-subtitle {
font-family: 'Montserrat', sans-serif !important;
font-size: 24px !important;
font-weight: 600 !important;
color: #f0f0f0 !important;
margin-bottom: 15px !important;
line-height: 1.3 !important;
}
.event-description {
font-family: 'Open Sans', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #e0e0e0 !important;
line-height: 1.6 !important;
text-align: justify !important;
}
@media (max-width: 768px) {
.intro-text {
font-size: 120px !important;
letter-spacing: 10px !important;
}
.frame-content {
max-width: 90% !important;
padding: 25px !important;
}
.event-title {
font-size: 32px !important;
}
.event-subtitle {
font-size: 18px !important;
}
.event-description {
font-size: 14px !important;
}
}