* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #080808;
color: #eee;
font-family:
Inter,
Arial,
sans-serif;
overflow-x: hidden;
}
body::selection {
background: #b9151d;
color: white;
}
a {
color: inherit;
}
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #080808;
transition:
opacity .8s,
visibility .8s;
}
#preloader.loaded {
opacity: 0;
visibility: hidden;
}
.loader-content {
width: min(400px, 80vw);
text-align: center;
}
.loader-small {
font-size: 8px;
letter-spacing: 4px;
color: #666;
}
.loader-logo {
margin: 20px 0;
font-family: Oswald;
font-size: 100px;
line-height: .8;
color: #eee;
}
.loader-line {
height: 1px;
background: #222;
overflow: hidden;
}
.loader-line span {
display: block;
width: 0;
height: 100%;
background: #b9151d;
animation:
loading 1.2s
cubic-bezier(.7,0,.3,1)
forwards;
}
.loader-status {
margin-top: 12px;
font-size: 8px;
letter-spacing: 2px;
color: #555;
}
.loader-status b {
color: #b9151d;
}
@keyframes loading {
to {
width: 100%;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 76px;
z-index: 100;
padding:
0 5vw;
display: flex;
align-items: center;
justify-content: space-between;
background:
linear-gradient(
180deg,
rgba(8,8,8,.92),
rgba(8,8,8,.45)
);
backdrop-filter:
blur(16px);
border-bottom:
1px solid rgba(255,255,255,.05);
}
.logo {
font-family: Oswald;
font-size: 23px;
font-weight: 700;
text-decoration: none;
letter-spacing: -1px;
}
.logo span {
color: #b9151d;
}
.navbar nav {
display: flex;
gap: 28px;
}
.navbar nav a {
color: #777;
font-size: 9px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: .3s;
}
.navbar nav a:hover {
color: white;
}
.nav-actions {
display: flex;
align-items: center;
gap: 10px;
}
.cinematic-button,
.outline-button {
border: 1px solid #333;
background: transparent;
color: #aaa;
padding:
12px 15px;
font-size: 8px;
letter-spacing: 1px;
cursor: pointer;
transition: .3s;
}
.cinematic-button:hover,
.outline-button:hover {
color: white;
border-color: #b9151d;
}
.join-button,
.main-button,
.final-button {
display: inline-flex;
align-items: center;
gap: 25px;
padding:
13px 18px;
background: #b9151d;
color: white;
text-decoration: none;
font-size: 8px;
font-weight: 700;
letter-spacing: 1px;
transition: .35s;
}
.join-button:hover,
.main-button:hover,
.final-button:hover {
background: #d51a24;
transform:
translateY(-2px);
box-shadow:
0 15px 40px
rgba(185,21,29,.25);
}
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
padding:
130px 8vw 70px;
background:
radial-gradient(
circle at 72% 48%,
#3d0b10,
transparent 28%
),
#080808;
}
.hero-grid {
position: absolute;
inset: 0;
opacity: .13;
background-image:
linear-gradient(
#ffffff08 1px,
transparent 1px
),
linear-gradient(
90deg,
#ffffff08 1px,
transparent 1px
);
background-size:
70px 70px;
mask-image:
linear-gradient(
90deg,
black,
transparent 80%
);
}
.hero-glow {
position: absolute;
width: 600px;
height: 600px;
right: 10%;
top: 15%;
border-radius: 50%;
background:
#b9151d;
filter:
blur(170px);
opacity: .12;
animation:
glowPulse 5s
ease-in-out
infinite;
}
@keyframes glowPulse {
50% {
opacity: .2;
transform: scale(1.08);
}
}
.hero-content {
position: relative;
z-index: 5;
max-width: 650px;
}
.hero-kicker {
font-size: 9px;
letter-spacing: 3px;
color: #666;
margin-bottom: 35px;
}
.hero-kicker::before {
content: "";
display: inline-block;
width: 25px;
height: 1px;
background: #b9151d;
margin-right: 10px;
vertical-align: middle;
}
.hero h1 {
margin: 0;
font-family: Oswald;
font-size:
clamp(
120px,
18vw,
270px
);
line-height: .67;
letter-spacing:
-10px;
text-transform: uppercase;
}
.hero-lee {
display: block;
color: #eee;
animation:
heroReveal 1.2s
cubic-bezier(.2,.8,.2,1);
}
.hero-famq {
display: block;
margin-left: 70px;
color: #b9151d;
animation:
heroReveal 1.4s
.15s
backwards;
}
@keyframes heroReveal {
from {
opacity: 0;
transform:
translateY(70px)
skewY(5deg);
}
to {
opacity: 1;
transform:
translateY(0)
skewY(0);
}
}
.hero-description {
margin:
50px 0 30px;
max-width: 420px;
color: #777;
font-size: 12px;
line-height: 1.7;
}
.hero-description b {
color: #ddd;
}
.hero-buttons {
display: flex;
gap: 10px;
align-items: center;
}
.hero-image {
position: absolute;
z-index: 3;
right: 4vw;
top: 50%;
transform:
translateY(-48%);
width:
min(44vw, 650px);
height:
min(44vw, 650px);
}
.hero-image-frame {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image-frame::before {
content: "";
position: absolute;
inset: 8%;
border:
1px solid
rgba(185,21,29,.55);
border-radius: 50%;
animation:
circlePulse 4s
ease-in-out
infinite;
}
.hero-image-frame::after {
content: "";
position: absolute;
inset: 14%;
border:
1px solid
rgba(255,255,255,.08);
border-radius: 50%;
}
@keyframes circlePulse {
50% {
transform:
scale(1.04);
opacity: .5;
}
}
.hero-image img {
position: relative;
z-index: 2;
width: 82%;
height: 82%;
object-fit: contain;
filter:
drop-shadow(
0 30px 80px
rgba(0,0,0,.8)
);
transition:
transform .25s;
}
.hero-image-scan {
position: absolute;
z-index: 5;
left: 10%;
right: 10%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
#b9151d,
transparent
);
box-shadow:
0 0 20px #b9151d;
animation:
scan 4s
ease-in-out
infinite;
}
@keyframes scan {
0%,
100% {
top: 15%;
opacity: 0;
}
15% {
opacity: 1;
}
85% {
opacity: 1;
}
100% {
top: 85%;
}
}
.hero-image-label {
position: absolute;
right: 5%;
bottom: 4%;
font-size: 8px;
letter-spacing: 3px;
color: #555;
}
.hero-bottom {
position: absolute;
bottom: 28px;
left: 8vw;
right: 8vw;
display: flex;
align-items: center;
gap: 20px;
font-size: 8px;
color: #555;
letter-spacing: 2px;
}
.hero-bottom div {
flex: 1;
height: 1px;
background: #222;
}
.particles {
position: absolute;
inset: 0;
pointer-events: none;
}
.particles span {
position: absolute;
bottom: -10px;
width: 2px;
height: 2px;
background: #b9151d;
border-radius: 50%;
opacity: 0;
animation:
particleUp
linear
infinite;
}
@keyframes particleUp {
0% {
transform:
translateY(0)
scale(.5);
opacity: 0;
}
20% {
opacity: .6;
}
80% {
opacity: .3;
}
100% {
transform:
translateY(-100vh)
scale(1.5);
opacity: 0;
}
}
.section {
padding:
130px 8vw;
border-top:
1px solid #171717;
position: relative;
}
.section-label {
font-size: 8px;
letter-spacing: 3px;
color: #666;
}
.section-label::before {
content: "";
display: inline-block;
width: 25px;
height: 1px;
margin-right: 10px;
vertical-align: middle;
background: #b9151d;
}
.section-heading {
margin:
40px 0 70px;
display: grid;
grid-template-columns:
1fr 1fr;
gap: 8vw;
align-items: end;
}
.section-heading h2 {
margin: 0;
font-family: Oswald;
font-size:
clamp(
65px,
9vw,
125px
);
line-height: .78;
letter-spacing:
-5px;
}
.section-heading h2 span {
color: #b9151d;
}
.section-heading p {
max-width: 470px;
color: #666;
font-size: 12px;
line-height: 1.8;
}
.stats {
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top:
1px solid #292929;
border-bottom:
1px solid #292929;
}
.stat {
padding:
35px 20px;
border-right:
1px solid #292929;
}
.stat:last-child {
border-right: 0;
}
.stat strong {
display: block;
font-family: Oswald;
font-size: 60px;
color: #ddd;
}
.stat span {
font-size: 8px;
letter-spacing: 2px;
color: #555;
}
.direction-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 15px;
}
.direction-card {
min-height: 560px;
position: relative;
overflow: hidden;
padding: 35px;
background: #0c0c0c;
border:
1px solid #282828;
transition:
transform .6s,
border-color .4s;
}
.direction-card:hover {
transform:
translateY(-8px);
border-color:
#70151a;
}
.direction-number {
position: relative;
z-index: 5;
font-family: Oswald;
font-size: 25px;
color: #b9151d;
}
.direction-bg {
position: absolute;
right: -50px;
bottom: 30px;
font-family: Oswald;
font-size: 130px;
color: white;
opacity: .025;
transform: rotate(-90deg);
}
.direction-content {
position: absolute;
left: 35px;
right: 35px;
bottom: 35px;
z-index: 5;
}
.direction-status {
display: inline-block;
padding:
7px 10px;
border:
1px solid #383838;
color: #777;
font-size: 7px;
letter-spacing: 2px;
margin-bottom: 20px;
}
.government .direction-status {
color: #b9151d;
border-color:
#641218;
}
.direction-content h3 {
margin: 0 0 15px;
font-family: Oswald;
font-size: 50px;
line-height: .9;
}
.direction-content p {
max-width: 420px;
color: #666;
font-size: 11px;
line-height: 1.8;
}
.direction-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 25px;
}
.direction-tags span {
padding:
7px 9px;
border:
1px solid #292929;
color: #666;
font-size: 7px;
letter-spacing: 1px;
}
.crime {
position: relative;
overflow: hidden;
filter:
grayscale(.75);
background:
linear-gradient(
135deg,
#0c0c0c,
#090909
);
}
.crime::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background:
radial-gradient(
circle at center,
transparent 15%,
rgba(0,0,0,.45)
);
}
.police-tape {
position: absolute;
z-index: 20;
left: -20%;
width: 140%;
height: 48px;
display: flex;
align-items: center;
overflow: hidden;
background:
repeating-linear-gradient(
-45deg,
#d6b800 0,
#d6b800 18px,
#111 18px,
#111 36px
);
border-top:
2px solid #090909;
border-bottom:
2px solid #090909;
box-shadow:
0 8px 25px
rgba(0,0,0,.5);
color: #050505;
font-family: Oswald;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
white-space: nowrap;
}
.police-tape-1 {
top: 38%;
transform:
rotate(-13deg);
}
.police-tape-2 {
top: 58%;
transform:
rotate(13deg);
}
.police-tape span {
display: block;
width: max-content;
animation:
policeTapeMove
18s
linear
infinite;
}
.police-tape-2 span {
animation-direction:
reverse;
}
@keyframes policeTapeMove {
from {
transform:
translateX(0);
}
to {
transform:
translateX(-35%);
}
}
.crime-lock {
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
transform:
translate(-50%, -50%)
rotate(-4deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 240px;
padding: 22px 30px;
background:
rgba(7,7,7,.88);
border:
1px solid
rgba(214,184,0,.4);
box-shadow:
0 20px 60px
rgba(0,0,0,.7);
backdrop-filter:
blur(8px);
}
.crime-lock-icon {
width: 32px;
height: 32px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid #d6b800;
color: #d6b800;
font-family: Arial;
font-size: 16px;
}
.crime-lock strong {
color: #eee;
font-family: Oswald;
font-size: 27px;
letter-spacing: 2px;
}
.crime-lock span {
margin-top: 5px;
color: #777;
font-size: 7px;
letter-spacing: 2px;
}
.crime .direction-content {
z-index: 30;
}
.crime .direction-status {
color: #d6b800;
border-color:
rgba(214,184,0,.35);
}
.crime .direction-tags span {
color: #555;
}
.crime:hover {
transform:
translateY(-2px);
border-color:
rgba(214,184,0,.3);
}
.crime:hover
.police-tape {
animation-play-state:
paused;
}
.steps-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
border-top:
1px solid #292929;
}
.step {
padding:
30px;
min-height: 300px;
border-right:
1px solid #292929;
transition: .5s;
}
.step:last-child {
border-right: 0;
}
.step:hover {
background: #0d0d0d;
transform:
translateY(-5px);
}
.step > span {
font-family: Oswald;
font-size: 30px;
color: #b9151d;
}
.step h3 {
font-family: Oswald;
font-size: 24px;
line-height: 1;
margin:
25px 0 15px;
}
.step p {
color: #666;
font-size: 10px;
line-height: 1.8;
}
.garage-slider {
display: grid;
grid-template-columns:
1.7fr .8fr;
min-height: 520px;
border:
1px solid #292929;
}
.garage-image {
position: relative;
overflow: hidden;
background: #111;
}
.garage-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition:
opacity .3s,
transform 1s;
}
.garage-image:hover img {
transform:
scale(1.04);
}
.garage-changing {
opacity: 0;
}
.garage-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent,
rgba(0,0,0,.5)
);
}
.garage-counter {
position: absolute;
top: 25px;
left: 25px;
font-family: Oswald;
font-size: 14px;
color: #aaa;
z-index: 3;
}
.garage-counter span:first-child {
color: #b9151d;
font-size: 25px;
}
.garage-info {
padding: 35px;
display: flex;
flex-direction: column;
justify-content:
flex-end;
background: #0d0d0d;
}
.garage-meta {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.garage-meta span {
padding:
7px 9px;
border:
1px solid #292929;
color: #777;
font-size: 7px;
letter-spacing: 1px;
}
#garageStatus {
color: #b9151d;
border-color:
#651219;
}
.garage-info h3 {
margin: 0;
font-family: Oswald;
font-size: 65px;
line-height: .8;
}
.garage-navigation {
display: flex;
gap: 8px;
margin-top: 40px;
}
.garage-navigation button {
width: 55px;
height: 45px;
border:
1px solid #333;
background: transparent;
color: #aaa;
cursor: pointer;
transition: .3s;
}
.garage-navigation button:hover {
color: white;
border-color:
#b9151d;
}
.timeline-list {
max-width: 850px;
margin-left: 8vw;
border-left:
1px solid #292929;
}
.timeline-item {
position: relative;
display: grid;
grid-template-columns:
100px 1fr;
gap: 50px;
padding:
35px 0 35px 45px;
border-bottom:
1px solid #181818;
}
.timeline-year {
color: #555;
font-family: Oswald;
}
.timeline-dot {
position: absolute;
left: -5px;
top: 45px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #222;
border:
2px solid #080808;
}
.timeline-item.active
.timeline-dot {
background:
#b9151d;
box-shadow:
0 0 20px
#b9151d;
}
.timeline-item h3 {
margin: 0 0 10px;
font-family: Oswald;
font-size: 28px;
}
.timeline-item p {
margin: 0;
color: #666;
font-size: 11px;
line-height: 1.8;
}
.members-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 14px;
}
.member-card {
position: relative;
min-height: 420px;
background: #0d0d0d;
border:
1px solid #292929;
overflow: hidden;
transition: .5s;
}
.member-card:hover {
transform:
translateY(-8px);
border-color:
#721319;
}
.member-image {
position: absolute;
inset: 0;
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter:
grayscale(.7)
brightness(.7);
transition:
.7s;
}
.member-card:hover
.member-image img {
filter:
grayscale(0)
brightness(.9);
transform:
scale(1.05);
}
.member-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
transparent 30%,
#080808
);
}
.member-info {
position: absolute;
z-index: 4;
left: 20px;
right: 20px;
bottom: 20px;
}
.member-info small {
color: #b9151d;
font-size: 7px;
letter-spacing: 2px;
}
.member-info h3 {
margin:
8px 0;
font-family: Oswald;
font-size: 27px;
}
.member-info span {
color: #777;
font-size: 8px;
letter-spacing: 2px;
}
.gallery-grid {
display: grid;
grid-template-columns:
1.4fr 1fr 1fr;
grid-auto-rows:
270px;
gap: 14px;
}
.gallery-item {
position: relative;
overflow: hidden;
background:
radial-gradient(
circle,
#3b0b0f,
#101010
);
border:
1px solid #292929;
cursor: pointer;
transition:
.5s;
}
.gallery-item:hover {
border-color:
#721319;
transform:
translateY(-6px);
}
.gallery-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter:
grayscale(.3)
brightness(.75);
transition:
transform .9s,
filter .6s;
}
.gallery-item:hover img {
transform:
scale(1.07);
filter:
grayscale(0)
brightness(.95);
}
.gallery-big {
grid-row:
span 2;
}
.gallery-wide {
grid-column:
span 2;
}
.gallery-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
transparent 35%,
rgba(0,0,0,.85)
);
}
.gallery-info {
position: absolute;
z-index: 3;
left: 20px;
bottom: 20px;
}
.gallery-info span {
display: block;
color: #aaa;
font-size: 8px;
letter-spacing: 2px;
margin-bottom: 5px;
}
.gallery-info strong {
font-family: Oswald;
font-size: 30px;
}
.promo-grid {
display: grid;
grid-template-columns:
1fr 1fr;
gap: 15px;
}
.promo-card {
border:
1px solid #292929;
background:
#0d0d0d;
transition: .5s;
}
.promo-card:hover {
transform:
translateY(-7px);
border-color:
#721319;
}
.promo-image {
height: 330px;
position: relative;
overflow: hidden;
}
.promo-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: .8s;
}
.promo-card:hover
.promo-image img {
transform:
scale(1.05);
}
.promo-image span {
position: absolute;
z-index: 3;
top: 20px;
left: 20px;
font-size: 8px;
letter-spacing: 2px;
color: #aaa;
}
.promo-content {
padding: 25px;
}
.promo-content small {
font-size: 8px;
letter-spacing: 2px;
color: #777;
}
.promo-code {
display: flex;
margin-top: 20px;
border:
1px solid #292929;
}
.promo-code code {
flex: 1;
padding: 15px;
color: #e7dfd2;
font-family: Oswald;
font-size: 20px;
}
.promo-code button {
padding:
0 20px;
border: 0;
background:
#b9151d;
color: white;
cursor: pointer;
font-size: 8px;
letter-spacing: 1px;
}
.final {
min-height:
90vh;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background:
radial-gradient(
circle,
#35090d,
#080808 60%
);
}
.final-background {
position: absolute;
font-family: Oswald;
font-size:
45vw;
line-height: .7;
color: white;
opacity: .025;
user-select: none;
}
.final-content {
position: relative;
z-index: 5;
}
.final h2 {
margin:
35px 0;
font-family: Oswald;
font-size:
clamp(
90px,
13vw,
190px
);
line-height: .72;
letter-spacing:
-6px;
}
.final h2 span {
color: #b9151d;
}
.final p {
color: #777;
font-size: 12px;
margin-bottom: 30px;
}
.final-button {
padding:
18px 25px;
}
footer {
padding:
30px 7vw;
display: flex;
align-items: center;
justify-content:
space-between;
border-top:
1px solid #222;
color: #555;
font-size: 8px;
letter-spacing: 2px;
}
.footer-logo {
font-family: Oswald;
color: white;
font-size: 20px;
}
.footer-logo span {
color: #b9151d;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: #777;
text-decoration: none;
}
.footer-links a:hover {
color: white;
}
.music-player {
position: fixed;
right: 25px;
bottom: 25px;
z-index: 90;
display: flex;
align-items: center;
gap: 10px;
padding:
8px 12px 8px 8px;
border:
1px solid #292929;
background:
rgba(10,10,10,.9);
backdrop-filter:
blur(15px);
}
.music-player button {
width: 35px;
height: 35px;
border: 0;
background: #b9151d;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.music-bars {
display: flex;
gap: 2px;
height: 15px;
align-items: center;
}
.music-bars i {
display: block;
width: 2px;
height: 5px;
background: white;
}
.music-player.playing
.music-bars i {
animation:
musicBars .6s
ease-in-out
infinite
alternate;
}
.music-bars i:nth-child(2) {
animation-delay:
.15s;
}
.music-bars i:nth-child(3) {
animation-delay:
.3s;
}
.music-bars i:nth-child(4) {
animation-delay:
.45s;
}
@keyframes musicBars {
to {
height: 15px;
}
}
.music-info {
display: flex;
flex-direction: column;
}
.music-info small {
color: #666;
font-size: 7px;
letter-spacing: 2px;
}
.music-info strong {
color: #aaa;
font-family: Oswald;
font-size: 11px;
}
#lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background:
rgba(0,0,0,.95);
opacity: 0;
visibility: hidden;
transition: .4s;
}
#lightbox.active {
opacity: 1;
visibility: visible;
}
#lightbox img {
max-width:
82vw;
max-height:
82vh;
object-fit: contain;
box-shadow:
0 30px 100px
rgba(0,0,0,.8);
}
#lightbox button {
position: fixed;
border: 0;
background: transparent;
color: #aaa;
cursor: pointer;
font-size: 35px;
transition: .3s;
}
#lightbox button:hover {
color: #b9151d;
}
#lightboxClose {
top: 30px;
right: 35px;
}
#lightboxPrev {
left: 35px;
}
#lightboxNext {
right: 35px;
}
#lightboxCounter {
position: absolute;
bottom: 30px;
color: #555;
font-size: 9px;
letter-spacing: 3px;
}
#cinematic {
position: fixed;
inset: 0;
z-index: 5000;
overflow: hidden;
background: #000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .7s
cubic-bezier(.2,.8,.2,1);
}
#cinematic.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.cinema-background {
position: absolute;
inset: 0;
overflow: hidden;
}
.cinema-background img {
position: absolute;
inset: -5%;
width: 110%;
height: 110%;
object-fit: cover;
filter:
grayscale(.2)
contrast(1.2)
brightness(.45);
transform:
scale(1.08);
animation:
cinemaZoom
18s
ease-in-out
infinite
alternate;
}
@keyframes cinemaZoom {
from {
transform:
scale(1.08)
translate3d(-1%,0,0);
}
to {
transform:
scale(1.18)
translate3d(1%, -1%, 0);
}
}
.cinema-image-dark {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
#000 0%,
rgba(0,0,0,.65) 35%,
rgba(0,0,0,.25) 65%,
#000 100%
),
linear-gradient(
0deg,
#000 0%,
transparent 40%,
#000 100%
);
}
.cinema-red-light {
position: absolute;
width: 45vw;
height: 45vw;
right: -10vw;
top: 10vh;
border-radius: 50%;
background:
#b9151d;
filter:
blur(180px);
opacity: .18;
animation:
cinemaLight
5s
ease-in-out
infinite;
}
@keyframes cinemaLight {
50% {
opacity: .3;
transform:
scale(1.15);
}
}
.cinema-noise {
position: absolute;
inset: 0;
z-index: 10;
opacity: .12;
pointer-events: none;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
animation:
noiseMove
.15s
steps(2)
infinite;
}
@keyframes noiseMove {
0% {
transform: translate(0,0);
}
25% {
transform: translate(2%,-1%);
}
50% {
transform: translate(-1%,2%);
}
75% {
transform: translate(1%,1%);
}
100% {
transform: translate(-2%,-1%);
}
}
.cinema-scanlines {
position: absolute;
inset: 0;
z-index: 11;
pointer-events: none;
opacity: .14;
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 3px,
rgba(255,255,255,.05) 4px
);
}
.cinematic-top,
.cinematic-bottom {
position: absolute;
left: 0;
right: 0;
height: 14vh;
z-index: 20;
background: #000;
}
.cinematic-top {
top: 0;
}
.cinematic-bottom {
bottom: 0;
}
.cinematic-content {
position: absolute;
z-index: 30;
inset: 14vh 8vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cinematic-mini {
font-size: 9px;
color: #aaa;
letter-spacing: 7px;
opacity: 0;
transform:
translateY(20px);
}
#cinematic.active
.cinematic-mini {
animation:
cinemaTextIn
.9s
.2s
forwards;
}
.cinematic-logo {
display: flex;
align-items: baseline;
gap: 12px;
margin:
30px 0 12px;
font-family: Oswald;
line-height: .7;
opacity: 0;
transform:
scale(.8)
translateY(30px);
}
#cinematic.active
.cinematic-logo {
animation:
cinemaLogoIn
1.3s
.5s
cubic-bezier(.2,.8,.2,1)
forwards;
}
.cinematic-logo span {
font-size:
clamp(
120px,
20vw,
300px
);
color: #eee;
letter-spacing:
-8px;
}
.cinematic-logo small {
font-size:
clamp(
35px,
6vw,
80px
);
color: #b9151d;
letter-spacing:
-2px;
}
@keyframes cinemaLogoIn {
to {
opacity: 1;
transform:
scale(1)
translateY(0);
}
}
.cinematic-sub {
color: #b9151d;
font-size: 10px;
letter-spacing: 7px;
opacity: 0;
}
#cinematic.active
.cinematic-sub {
animation:
cinemaTextIn
.8s
1s
forwards;
}
.cinema-location {
display: flex;
gap: 12px;
margin-top: 30px;
font-size: 7px;
letter-spacing: 3px;
opacity: 0;
}
#cinematic.active
.cinema-location {
animation:
cinemaTextIn
.8s
1.2s
forwards;
}
.cinema-location span {
color: #555;
}
.cinema-location b {
color: #aaa;
font-weight: 500;
}
@keyframes cinemaTextIn {
to {
opacity: 1;
transform:
translateY(0);
}
}
.cinema-progress {
width:
min(330px, 60vw);
height: 1px;
margin-top: 35px;
background: rgba(255,255,255,.12);
overflow: hidden;
opacity: 0;
}
#cinematic.active
.cinema-progress {
animation:
cinemaProgressIn
.5s
1.35s
forwards;
}
.cinema-progress span {
display: block;
width: 0;
height: 100%;
background:
#b9151d;
}
#cinematic.active
.cinema-progress span {
animation:
cinemaProgress
2.5s
1.5s
cubic-bezier(.2,.8,.2,1)
forwards;
}
@keyframes cinemaProgressIn {
to {
opacity: 1;
}
}
@keyframes cinemaProgress {
to {
width: 100%;
}
}
.cinema-loading {
margin-top: 12px;
color: #555;
font-size: 7px;
letter-spacing: 3px;
opacity: 0;
}
#cinematic.active
.cinema-loading {
animation:
cinemaTextIn
.8s
1.6s
forwards;
}
.cinematic-enter {
margin-top: 35px;
padding:
15px 25px;
display: flex;
align-items: center;
gap: 25px;
border:
1px solid
rgba(255,255,255,.25);
background:
rgba(0,0,0,.35);
color: #eee;
cursor: pointer;
font-size: 8px;
letter-spacing: 3px;
opacity: 0;
transform:
translateY(15px);
backdrop-filter:
blur(10px);
transition:
.35s;
}
#cinematic.active
.cinematic-enter {
animation:
cinemaTextIn
.8s
2s
forwards;
}
.cinematic-enter span {
color: #b9151d;
font-size: 15px;
}
.cinematic-enter:hover {
background:
#b9151d;
border-color:
#b9151d;
color: white;
transform:
translateY(-3px);
}
.cinema-line {
position: absolute;
width: 100px;
height: 1px;
background:
#b9151d;
opacity: 0;
}
.cinema-line-top {
top: 20%;
left: 0;
}
.cinema-line-bottom {
bottom: 20%;
right: 0;
}
#cinematic.active
.cinema-line {
animation:
cinemaLineIn
1s
1.8s
forwards;
}
@keyframes cinemaLineIn {
to {
opacity: .8;
width: 180px;
}
}
@media(max-width:700px) {
.cinematic-logo {
gap: 5px;
}
.cinematic-logo span {
letter-spacing:
-5px;
}
.cinematic-logo small {
font-size: 30px;
}
.cinematic-sub {
font-size: 7px;
letter-spacing: 4px;
}
.cinema-location {
flex-direction:
column;
gap: 5px;
}
.cinematic-top,
.cinematic-bottom {
height: 10vh;
}
.cinematic-content {
inset:
10vh 5vw;
}
body.cinematic-open {
overflow: hidden;
}
}
.reveal {
opacity: 0;
transform:
translateY(35px);
transition:
opacity .8s,
transform .8s;
}
.reveal.visible {
opacity: 1;
transform:
translateY(0);
}
@media(max-width:1100px) {
.navbar nav {
display: none;
}
.hero-image {
opacity: .45;
right: -10vw;
width: 65vw;
height: 65vw;
}
.stats,
.steps-grid,
.members-grid {
grid-template-columns:
1fr 1fr;
}
.direction-grid,
.garage-slider {
grid-template-columns:
1fr;
}
}
@media(max-width:700px) {
.navbar {
height: 65px;
padding:
0 5vw;
}
.cinematic-button {
display: none;
}
.join-button {
padding:
11px 12px;
}
.hero {
padding:
120px 6vw 80px;
min-height:
850px;
}
.hero h1 {
font-size:
100px;
letter-spacing:
-6px;
}
.hero-famq {
margin-left:
30px;
}
.hero-image {
top:
52%;
right:
-15vw;
width:
90vw;
height:
90vw;
opacity:
.3;
}
.hero-description {
position: relative;
z-index: 8;
margin-top:
35px;
}
.hero-buttons {
position: relative;
z-index: 10;
flex-direction:
column;
align-items:
flex-start;
}
.section {
padding:
90px 6vw;
}
.section-heading {
grid-template-columns:
1fr;
gap:
25px;
}
.stats,
.steps-grid,
.members-grid,
.promo-grid {
grid-template-columns:
1fr;
}
.stat {
border-right: 0;
border-bottom:
1px solid #292929;
}
.direction-grid {
grid-template-columns:
1fr;
}
.direction-card {
min-height:
480px;
}
.garage-slider {
min-height:
650px;
}
.garage-image {
min-height:
400px;
}
.gallery-grid {
grid-template-columns:
1fr;
grid-auto-rows:
250px;
}
.gallery-big,
.gallery-wide {
grid-column:
auto;
grid-row:
auto;
}
.timeline-list {
margin-left:
0;
}
.timeline-item {
grid-template-columns:
70px 1fr;
gap:
20px;
padding-left:
30px;
}
.footer-links {
display: none;
}
footer {
gap: 15px;
flex-wrap: wrap;
}
.music-player {
bottom: 15px;
right: 15px;
}
}
@media(prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration:
.01ms !important;
animation-iteration-count:
1 !important;
scroll-behavior:
auto !important;
transition-duration:
.01ms !important;
}
}