/* =========================================================

   Y2K AUTOMOTIVE STUDIO PORTAL
   
   STYLE.CSS
   
   PS2 / EARLY 2000s MENU STYLE

========================================================= */



/* =========================================
   EASY COLOR CHANGES

   CHANGE THESE VALUES ONLY
========================================= */


:root{


--metal-light:#c7cbd0;

--metal-mid:#727980;

--metal-dark:#171a1d;


--blue-accent:#6aa8d8;

--background:#050607;


--text:#eeeeee;


}







*{

margin:0;

padding:0;

box-sizing:border-box;

}





body{


width:100vw;

height:100vh;


overflow:hidden;


background:

var(--background);


font-family:

Arial, Helvetica, sans-serif;


color:white;


}









/* =========================================
   3D SHOWROOM BACKGROUND

   ADD YOUR IMAGE HERE:

   textures/SHOWROOM_BACKGROUND_HERE.jpg

========================================= */



.showroom-background{


position:absolute;


inset:0;



background-image:


linear-gradient(

90deg,

rgba(0,0,0,.65),

rgba(0,0,0,.15),

rgba(0,0,0,.75)

),



url(

"textures/SHOWROOM_BACKGROUND_HERE.jpg"

);



background-size:cover;


background-position:center;



animation:

cameraMove 20s infinite alternate;



z-index:-5;


}





/* slow camera movement */


@keyframes cameraMove{


from{


transform:scale(1);


}


to{


transform:scale(1.08);


}


}









/* =========================================
   LIGHT BEAM

   AUTOMOTIVE SHOWROOM LIGHTING
========================================= */


.light-beam{


position:absolute;


width:300px;


height:120%;


top:-10%;


left:-20%;



background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.12),

transparent

);



transform:

rotate(18deg);



animation:

lightMove 12s infinite;



}


@keyframes lightMove{


0%{

left:-40%;

}


100%{

left:130%;

}


}










/* =========================================
   DUST PARTICLES LAYER
========================================= */


.dust{


position:absolute;


inset:0;



background-image:


url(

"textures/DUST_TEXTURE_HERE.png"

);



opacity:.15;



animation:

dustMove 30s linear infinite;


}





@keyframes dustMove{


from{

transform:translateY(0);

}


to{

transform:translateY(-100px);

}


}









/* =========================================
   CRT / OLD CONSOLE SCREEN EFFECT
========================================= */


.screen-effect{


position:absolute;


inset:0;



background:


repeating-linear-gradient(

0deg,

transparent,

transparent 3px,

rgba(255,255,255,.025) 4px

);



pointer-events:none;


}









/* =========================================
   HOME BUTTON

   METAL DASHBOARD STYLE
========================================= */


.home-button{


position:absolute;


top:35px;


left:35px;



padding:

12px 25px;



text-decoration:none;



font-size:14px;



letter-spacing:3px;



color:

#111;



background:



linear-gradient(

180deg,

#eeeeee,

#777777

);



border:

1px solid #222;



box-shadow:


inset 0 2px 5px white,


0 8px 20px black;



transition:.3s;



}





.home-button:hover{


transform:

translateX(10px);



color:white;



background:


linear-gradient(

180deg,

#ffffff,

#4d5962

);


}









/* =========================================
   LOGO

   CHROME TEXT
========================================= */


.studio-logo{


position:absolute;


top:70px;


left:50%;


transform:

translateX(-50%);



font-size:45px;



letter-spacing:12px;



font-weight:bold;



background:


linear-gradient(

180deg,

white,

#777777

);



-webkit-background-clip:text;


-webkit-text-fill-color:transparent;



text-shadow:


0 5px 15px black;



}










/* =========================================
   MAIN MENU

   CENTERED PS2 STYLE
========================================= */


.main-menu{


position:absolute;


top:55%;


left:50%;



transform:

translate(-50%,-50%);



display:flex;


flex-direction:column;


align-items:center;



gap:18px;



}








/* =========================================
   MENU OPTIONS

   METAL PLATES

========================================= */



.menu-option{


width:320px;


height:65px;



display:flex;



align-items:center;



text-decoration:none;



color:

var(--text);



letter-spacing:5px;



font-size:20px;



background:



linear-gradient(

90deg,

#111,

#3a4045,

#111

);



border-left:

4px solid var(--blue-accent);



box-shadow:


0 10px 30px black;



position:relative;



overflow:hidden;



transition:.25s;



}







/* numbers */


.number{


width:70px;


padding-left:20px;



color:

var(--blue-accent);



font-size:14px;



}








/* metallic sweep */


.menu-option::after{


content:"";

position:absolute;


top:0;


left:-120%;


height:100%;


width:60%;



background:


linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);



transform:

skewX(-20deg);



transition:.5s;


}






/* hover */


.menu-option:hover{


transform:

translateX(-20px);



background:


linear-gradient(

90deg,

#222,

#777,

#222

);



}





.menu-option:hover::after{


left:140%;


}








/* click */

.menu-option:active{


transform:

translateX(-10px)
scale(.97);


}










/* =========================================
   MOBILE
========================================= */


@media(max-width:700px){


.studio-logo{


font-size:25px;


letter-spacing:5px;


}



.main-menu{


right:auto;


left:50%;


transform:

translate(-50%,-50%);


}



.menu-option{


width:280px;


}



}