Oblic-Parallels-website/style.css

/*-Impports----------------------------------------------------------*/
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*-Fonts----------------------------------------------------------*/

/* @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format('woff2');
  } */


/*-Page----------------------------------------------------------*/

html, body {
  height: 100%;
  margin: 0;
}

body {

    user-select: none;
    /* background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%); */
    background-color: #000000;
    /* background-image: url(assets/svg/background.svg); */
    
    background-size: cover;
    background-attachment: fixed;
    padding:0;

    font-family: 'Inter';
}

.halo {
    position: fixed;
    z-index: 0;

    height: 100vh;
    width: 100vw;
    background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%);
}

  /*-Texts----------------------------------------------------------*/


h1 {
    position: fixed;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%); /*Center (compensate size)*/
    z-index: -1;

    color: #eaeaea;
    text-align: center;
    font-family: "Inter";
    font-weight: 600;
    font-size: 500%;
    user-select: none;
    letter-spacing: 0.1rem;   
}

h2 {
    position: fixed;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%); /*Center (compensate size)*/
    z-index: -1;

    color: white;
    text-align: center;
    font-family: "IBM Plex Mono";
    font-weight: 400;
    font-size: 250%;
    user-select: none;
}

  /*-Cards----------------------------------------------------------*/

.card-container{

    position: absolute;
    bottom: 10%;
    z-index: 1;

    height: 40%;
    /* width: 200%; */

    /*Calculate offset to center the second card*/
    /* screen_width - (card1_width + card2_margins)/2 */ /* Width includes margins */ 
    /*TODO correct with JS*/
    margin-left: calc( 50vw - ( (500px + 4rem) + (500px + 6rem) / 2 ));

    display: flex; /* Flexbox */
    flex-direction: row;/* Align content horizontally */
    justify-content: center;
    overflow: visible; /*Prevent cards shadows to be cut off*/
}


.card_old {

    position: relative;
    top: 0px;
    
    width: 500px;
    height: 300px;

    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 3rem;
    margin-right: 3rem;

    color: #FFFFFF00; /*Temporary*/
    background-color: #121212;

    /*Testing with borders*/
    padding: 20px;
    border-radius: 1.4em;
    /* border-width: 0.1em; */
    /* border-style: solid; */
    border: 4px solid transparent;
    background-clip: padding-box;

    /* Could prevent inconcistencies with boders */
    /* overflow:hidden  */


    filter: drop-shadow(#00000040 0 3em 40px);
}

.card {
    position: relative;
    top: 0px;

    width: 31.2rem;
    height: 18rem;

    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: 2rem;
    margin-right: 2rem;

    color: #FFFFFF00; /*Temporary*/
    background-color: #121212;

    /* padding: 20px; */
    border: 4px solid transparent;
    border-radius: 1.4em;
    background-clip: padding-box;
  
    transition: 300ms;
}

/*Cards borders*/
.card::after {

    position: absolute;
    top: -0.05em; bottom: -0.05em;
    left: -0.05em; right: -0.05em;

    background: linear-gradient(135deg, #353be5 0%, #43434388 100%);
    content: '';
    z-index: -1;
    border-radius: 1.2em;

    filter: drop-shadow(#00000080 0 2em 40px);

    transition: 500ms;

}


.card:hover {
    /* background: linear-gradient(135deg, #7b2df1 0%, #353be5A0 100%); */
    /* filter: drop-shadow(#353be5A0 0 2em 40px); */
    top: -1%
}

.card:hover::after {
    background: linear-gradient(135deg, #4000ff 0%, #353be570 100%);
    filter: drop-shadow(#4f35e5a0 0 2em 40px);

    top: -0.1em; bottom: -0.1em;
    left: -0.1em; right: -0.1em;

}

.card-title {

    position: absolute;
    top: 12%;
    left: 25%;

    font-family: 'IBM Plex Mono';
    font-weight: 500;
    font-size: 2em;
    color: #eaeaea;
}

.card-desc {

    position: absolute;
    top: 50%;
    left: 25%;

    height: fit-content;
    width: 65%;

    font-family: 'IBM Plex Mono';
    font-size: 1.4em;
    color: #eaeaea;
}

.card > img {

    position: absolute;
    top: 10%;
    left: 6%;
    width: 4em;
    height: 4em;
}



.logo {
    position: fixed;
    margin-top: 3vh;
    margin-left: 3vh;
    width: 3.7rem;
    height: 3.7rem;

    transition-duration: 500ms;

}

.logo:hover {

    filter: drop-shadow(0 0 4px #7782ff);
    -webkit-filter: drop-shadow(0 0 4px #7782ff);
    
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-duration: 500ms;
}