332 lines
7.1 KiB
CSS
332 lines
7.1 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
|
|
|
/*Bulma variables override and hacks*/
|
|
:root{
|
|
--bulma-primary-h: 50deg;
|
|
--bulma-primary-l: 50%;
|
|
--bulma-scheme-h: 0;
|
|
--bulma-scheme-s: 0%;
|
|
--bulma-scheme-l: 6%;
|
|
--bulma-body-line-height: 1;
|
|
--bulma-black-h: 0;
|
|
--bulma-black-s: 0%;
|
|
--bulma-black-l: 6%;
|
|
--bulma-body-background-color: hsl(0, 0%, 6%);
|
|
}
|
|
.card{
|
|
--bulma-card-shadow: none !important;
|
|
}
|
|
.has-text-weight-bold {
|
|
font-weight: 600 !important;
|
|
}
|
|
.has-text-weight-bolder {
|
|
font-weight: 1000 !important;
|
|
}
|
|
html{
|
|
scroll-behavior: smooth;
|
|
scrollbar-color: var(--bulma-background) var(--bulma-primary);
|
|
}
|
|
body{
|
|
--cursor-x:0;
|
|
--cursor-y:0;
|
|
}
|
|
#nav{
|
|
--bulma-navbar-item-img-max-height: 2.5rem;
|
|
}
|
|
#hero{
|
|
justify-content:center;
|
|
}
|
|
#hero .hero-body{
|
|
flex-direction: column;flex-grow:0;
|
|
}
|
|
h1{
|
|
margin:0;
|
|
}
|
|
.section.is-fullheight{
|
|
min-height:100lvh;
|
|
}
|
|
/* -----------------------------------------------*/
|
|
|
|
/*Custom classes*/
|
|
#nav{
|
|
background: transparent;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
#hero::before{
|
|
background:url('/assets/pattern.svg');
|
|
background-size: cover;
|
|
background-repeat: repeat;
|
|
background-attachment: fixed;
|
|
content:'';
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
opacity:0.04;
|
|
}
|
|
#reel{
|
|
width:100%;
|
|
height:100vh;
|
|
position: relative;
|
|
background: none;
|
|
}
|
|
video{
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
height:100vh;
|
|
width:100%;
|
|
object-fit: cover;
|
|
z-index:-20;
|
|
}
|
|
.squircle{
|
|
border-radius: 50%;
|
|
corner-shape: squircle;
|
|
aspect-ratio: 1;
|
|
}
|
|
#gallery{
|
|
position:relative;
|
|
}
|
|
.photo{
|
|
background: #f0f0f0;
|
|
/*background: var(--bulma-white);*/
|
|
padding:10px 10px 50px;
|
|
cursor:pointer;
|
|
border-radius: 5px;
|
|
box-shadow: 0 4px 6px hsla(0,0%,6%,0.3);
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
.photo:hover{
|
|
transform: rotate(0deg) !important;
|
|
}
|
|
.photo.full{
|
|
position:fixed;
|
|
top:0;
|
|
height:calc(100vh - 4rem);
|
|
transform: rotate(0deg) !important;
|
|
z-index:100;
|
|
margin:2rem;
|
|
}
|
|
/*#tournaments*/
|
|
.tournament-block{
|
|
display:grid;
|
|
place-items: center;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
.tournament-block img{
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
.tournament-block:hover img{
|
|
transform: scale(1.2);
|
|
}
|
|
.tournament-block:hover{
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
/*Custom tournament grid*/
|
|
.custom-grid{
|
|
display:grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap:0;
|
|
border:1px solid hsla(0,0%,6%,0.1);
|
|
}
|
|
.custom-grid .custom-cell{
|
|
position: relative;
|
|
aspect-ratio: 1 / 1;
|
|
display: grid;
|
|
place-items: center;
|
|
/*border:1px solid var(--bulma-black);*/
|
|
}
|
|
.custom-grid .custom-cell+.custom-cell{
|
|
border-left:1px solid hsla(0,0%,6%,0.1);
|
|
}
|
|
.custom-cell .bg{
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width:100%;
|
|
height:100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
mix-blend-mode: soft-light; /* overlay? */
|
|
transition: opacity 0.5s ease-out;
|
|
}
|
|
.custom-cell .bg.active {
|
|
opacity: 0;
|
|
mix-blend-mode: normal;
|
|
}
|
|
.custom-cell:hover .bg.active {
|
|
opacity: 0.6;
|
|
}
|
|
.custom-cell img{
|
|
position:relative;
|
|
transition: transform 0.5s ease-out;
|
|
transform: scale(1);
|
|
}
|
|
.custom-cell:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/*Ink splatters*/
|
|
.ink{
|
|
position:relative;
|
|
}
|
|
.ink::after{
|
|
position:absolute;
|
|
content:'';
|
|
left:0;
|
|
width:100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
pointer-events: none;
|
|
}
|
|
.ink.top{
|
|
padding-top:14vw;
|
|
}
|
|
.ink.bottom{
|
|
padding-bottom:21vw;
|
|
}
|
|
.ink.bottom::after{
|
|
bottom:0;
|
|
background-image: url('/assets/ink_bottom_black.png');
|
|
background-position: bottom center;
|
|
height:21vw;
|
|
}
|
|
.ink.top::after{
|
|
top:0;
|
|
background-image: url('/assets/ink_top_black.png');
|
|
background-position: top center;
|
|
height:14vw;
|
|
}
|
|
.ink.bottom.yellow::after{
|
|
bottom:0;
|
|
background-image: url('/assets/ink_bottom_yellow.png');
|
|
background-position: bottom center;
|
|
height:21vw;
|
|
}
|
|
.ink.top.yellow::after{
|
|
top:0;
|
|
background-image: url('/assets/ink_top_yellow.png');
|
|
background-position: top center;
|
|
height:14vw;
|
|
}
|
|
|
|
/*Incentives*/
|
|
.incentive-block {
|
|
display: grid;
|
|
place-items: center;
|
|
columns: 3;
|
|
}
|
|
|
|
/*TOURNAMENT PAGE*/
|
|
#tournament-header{
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
/*FAQ ACCORDIONS*/
|
|
/* Masque le marker natif et stylise le summary */
|
|
#faq summary { list-style: none; cursor: pointer; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
|
|
#faq summary::-webkit-details-marker { display: none; }
|
|
|
|
/* Effet boîte Bulma-compatible */
|
|
.faq-item { margin-bottom: 0.75rem; transition: box-shadow 0.15s ease; }
|
|
.faq-item[open] { box-shadow: 0 6px 18px rgba(10,10,10,0.08); }
|
|
|
|
/* Caret rotatif */
|
|
.faq-caret { transition: transform 0.18s ease; font-size: 1.1rem; color: rgba(255,255,255,0.6); }
|
|
.faq-item[open] .faq-caret { transform: rotate(180deg); }
|
|
|
|
/* Espace pour le contenu et rendu propre */
|
|
.faq-item .content { padding: 0 1rem 1rem 1rem; color: rgba(0,0,0,0.85); }
|
|
/*------------------------------------------------------------------*/
|
|
|
|
/*SPONSORS*/
|
|
.partner-link{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.partner-box{
|
|
background: #ffffff;
|
|
border-radius: 50%;
|
|
corner-shape: squircle;
|
|
padding: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/*height: 120px;*/
|
|
/*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);*/
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
/*FOOTER*/
|
|
.footer-logo{
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
align-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/*Twist animation*/
|
|
.twist{
|
|
/* 3D transform pivot on Y axis*/
|
|
/*transition: transform ease-out;*/
|
|
transform-style: preserve-3d;
|
|
transform-origin: center center -100px;
|
|
transform: translateZ(-500px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
|
|
/*perspective: 1000px;*/
|
|
/*perspective-origin: center;*/
|
|
}
|
|
.twist.middle{
|
|
transform: translateZ(0px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
|
|
}
|
|
.twist-fore{
|
|
transform: translateZ(-100px);
|
|
}
|
|
/*.twist::after{*/
|
|
/* content: '';*/
|
|
/* position: absolute;*/
|
|
/* top: 50%;*/
|
|
/* left: 50%;*/
|
|
/* background: red;*/
|
|
/* height:20px;*/
|
|
/* width:20px;*/
|
|
/* pointer-events: none;*/
|
|
/* transform: translateZ(200px);*/
|
|
/*}*/
|
|
.twist-fore{
|
|
transform: translateZ(200px);
|
|
}
|
|
|
|
/*View transition experiments*/
|
|
@view-transition {
|
|
navigation: auto;
|
|
}
|
|
@keyframes slide-from-right {
|
|
from {
|
|
/* Arrive from the right */
|
|
transform: translateX(100vw);
|
|
}
|
|
to {
|
|
/* Come into view */
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root) {
|
|
animation: none;
|
|
}
|
|
|
|
::view-transition-new(root) {
|
|
/* Apply animation to hobbies.html */
|
|
animation: slide-from-right 0.3s;
|
|
}
|