/* ************************************************************
***************************************************************
***************************************************************
:: RESETS
***************************************************************
***************************************************************
************************************************************* */
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
color: var(--black) !important;
-webkit-text-fill-color: var(--black);
-webkit-box-shadow: none;
transition: background-color 5000s ease-in-out 0s;
}
html, body {
overscroll-behavior: none; /* blockt Bouncing */
color: #fff;
}
.opa0 {
opacity: 0;
}
.dim0 {
width: 0px;
height: 0px;
}
.sideBySide {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
margin-top: 1rem;
gap: 1rem;
}
.flx-str {
justify-content: flex-start;
}
/* ************************************************************
***************************************************************
***************************************************************
:: FONTS
***************************************************************
***************************************************************
************************************************************* */
@font-face {
font-family: 'Barlow';
src: url('../ressources/fonts/Barlow-Regular.eot');
src: url('../ressources/fonts/Barlow-Regular.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/Barlow-Regular.woff2') format('woff2'),
url('../ressources/fonts/Barlow-Regular.woff') format('woff'),
url('../ressources/fonts/Barlow-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('../ressources/fonts/Barlow-Medium.eot');
src: url('../ressources/fonts/Barlow-Medium.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/Barlow-Medium.woff2') format('woff2'),
url('../ressources/fonts/Barlow-Medium.woff') format('woff'),
url('../ressources/fonts/Barlow-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('../ressources/fonts/Barlow-SemiBold.eot');
src: url('../ressources/fonts/Barlow-SemiBold.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/Barlow-SemiBold.woff2') format('woff2'),
url('../ressources/fonts/Barlow-SemiBold.woff') format('woff'),
url('../ressources/fonts/Barlow-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('../ressources/fonts/Barlow-Bold.eot');
src: url('../ressources/fonts/Barlow-Bold.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/Barlow-Bold.woff2') format('woff2'),
url('../ressources/fonts/Barlow-Bold.woff') format('woff'),
url('../ressources/fonts/Barlow-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Barlow';
src: url('../ressources/fonts/Barlow-Black.eot');
src: url('../ressources/fonts/Barlow-Black.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/Barlow-Black.woff2') format('woff2'),
url('../ressources/fonts/Barlow-Black.woff') format('woff'),
url('../ressources/fonts/Barlow-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BarlowCondensed';
src: url('../ressources/fonts/BarlowCondensed-Regular.eot');
src: url('../ressources/fonts/BarlowCondensed-Regular.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/BarlowCondensed-Regular.woff2') format('woff2'),
url('../ressources/fonts/BarlowCondensed-Regular.woff') format('woff'),
url('../ressources/fonts/BarlowCondensed-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BarlowCondensed';
src: url('../ressources/fonts/BarlowCondensed-Medium.eot');
src: url('../ressources/fonts/BarlowCondensed-Medium.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/BarlowCondensed-Medium.woff2') format('woff2'),
url('../ressources/fonts/BarlowCondensed-Medium.woff') format('woff'),
url('../ressources/fonts/BarlowCondensed-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'BarlowCondensed';
src: url('../ressources/fonts/BarlowCondensed-Bold.eot');
src: url('../ressources/fonts/BarlowCondensed-Bold.eot?#iefix') format('embedded-opentype'),
url('../ressources/fonts/BarlowCondensed-Bold.woff2') format('woff2'),
url('../ressources/fonts/BarlowCondensed-Bold.woff') format('woff'),
url('../ressources/fonts/BarlowCondensed-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ************************************************************
***************************************************************
***************************************************************
:: MAIN PAGE ELEMENTS
***************************************************************
***************************************************************
************************************************************* */
:root {
--headerNavHeight: 50px;
--footerNavHeight: 50px;
}
html {
background: rgba(6,22,25,1);
min-height: 100%;
font-family: 'Barlow';
font-weight: normal;
font-size: 16px;
color: var(--white);
height: 100%;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
html::-webkit-scrollbar {
display: none;
}
body {
min-height: 100%;
height: auto;
margin: 0px;
/*padding-bottom: var(--footerNavHeight);*/
}
html, body {
padding-bottom: var(--footerNavHeight);
}
/* Logo SVG */
.logoSvg {
-webkit-mask-size: cover;
mask-size: cover;
background-color: hsl(var(--col_gs_white));
display: block;
aspect-ratio: 1 / 0.19;
-webkit-mask: url('data:image/svg+xml,') no-repeat center center;
mask: url('data:image/svg+xml,') no-repeat center center;
}
/* Links */
a, a:link, a:visited, a:hover,
.lnk {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a:hover,
.lnk {
/*color: hsl(var(--col_pr_4));*/
}
/* Footer Navi */
.naviFooter {
font-size: 0.625rem;
position: fixed;
bottom: -1px;
left: 0px;
width: 100%;
padding: 1.4em;
color: hsl(var(--col_gs_white));
background: linear-gradient(rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.95)), hsl(var(--col_se_1));
z-index: 2;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-around;
align-items: center;
}
.naviFooter .elm {
flex-grow: 1;
width: 46px;
height: 46px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
align-items: center;
}
.naviFooter .elm svg {
width: 2.2em;
height: 2.2em;
margin-bottom: 0.6em;
}
.naviFooter .threebar {
display: block;
width: 2.2em;
height: 2.2em;
margin-bottom: 0.7em;
cursor: pointer;
}
.naviFooter .threebar .bar {
width: 100%;
height: 3px;
background: hsl(var(--col_gs_white));
margin-bottom: 4px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.naviFooter .threebar:hover .bar {
opacity: 0.8;
}
.naviFooter .threebar .bar:nth-child(1) {
transform-origin: 50% !important;
}
.naviFooter .threebar .bar:nth-child(2) {
transform-origin: 50% !important;
}
.naviFooter .threebar .bar:nth-child(3) {
margin-bottom: 0px;
}
.naviFooter .threebar.cross .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg) !important;
}
.naviFooter .threebar.cross .bar:nth-child(2) {
opacity: 0 !important;
margin-left: 1000%;
}
.naviFooter .threebar.cross .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg) !important;
}
/* Main Menu */
.mainNavigation {
font-size: 1.5rem;
display: none;
position: fixed;
z-index: 1;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
transform: scale(0);
transition: transform 250ms ease-out 0s;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), hsl(var(--col_se_1));
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.mainNavigation .inner {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
height: 100%;
padding-left: 2.5em;
}
.mainNavigation .inner > div:nth-child(1) {
height: 100%;
width: 100%;
display: flex;
gap: 2rem;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
justify-content: center;
color: hsl(var(--col_gs_white));
}
.mainNavigation .inner > div:nth-child(1) .elm {
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: color 0.25s;
}
.mainNavigation .inner > div:nth-child(1) .lastElm {
display: flex;
gap:0.5rem;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
font-weight: 700;
cursor: pointer;
}
.mainNavigation .inner > div:nth-child(1) .elm:hover,
.mainNavigation .inner > div:nth-child(1) .lastElm .subElm:hover {
color: hsl(var(--col_se_4));
}
.mainNavigation .inner > div:nth-child(1) .elm:active,
.mainNavigation .inner > div:nth-child(1) .lastElm .subElm:active {
color: hsl(var(--col_se_5));
}
.mainNavigation .inner > div:nth-child(2) {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
flex-wrap: nowrap;
height: var(--footerNavHeight);
color: hsl(var(--col_gs_white));
}
.mainNavigation .inner > div:nth-child(2) svg {
width: 28px;
height: 28px;
fill: hsl(var(--col_gs_white));
}
/* Side Menu */
.sideMenu {
border: 1px red solid;
width: 300px;
height: 100%;
min-height: 100vh;
}
/* BigLoadingScreen */
.bigLoadingScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
z-index: 10000;
background-color: rgba(0,0,0,0.93);
color: hsl(var(--col_gs_white));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
}
.bigLoadingScreen.active {
opacity: 1;
transition: all 250ms ease-in-out;
}
.bigLoadingScreen .txt {
margin-top: 1rem;
font-weight: bold;
opacity: 0;
height: 0px;
overflow: hidden;
transition: all 500ms ease-in-out 500ms;
}
.bigLoadingScreen.active .txt {
opacity: 1;
height: auto;
}
.bigLoadingScreen svg {
width: 2.5rem;
height: 2.5rem;
animation: rotate infinite 2s linear;
}
.bigLoadingScreen .spinner .icon {
background-color: hsl(var(--col_pr_4));
min-width: 2.5rem;
min-height: 2.5rem;
}
/* ************************************************************
***************************************************************
***************************************************************
***************************************************************
***************************************************************
***************************************************************
***************************************************************
:: VIEWS & MODALS
***************************************************************
***************************************************************
***************************************************************
***************************************************************
***************************************************************
***************************************************************
************************************************************* */
.viewBox > section {
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), hsl(var(--col_se_1));
color: hsl(var(--col_gs_white));
}
.viewBox > section > .body {
width: 100%;
max-width: 500px;
min-height: calc(100vh - var(--footerNavHeight));
margin: 0px auto 5rem auto;
padding: 1rem 0px 0px 0px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
/*justify-content: space-between;*/
justify-content: flex-start;
text-align: left;
}
.modalBox > section {
background: linear-gradient(hsl(var(--col_se_4)), hsl(var(--col_se_5))), hsl(var(--col_se_1));
color: hsl(var(--col_gs_white));
}
.modalBox > section > .body {
width: 100%;
max-width: 500px;
margin: 0px auto;
padding: 0px;
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
}
/* ************************************************************
***************************************************************
:: HOME
***************************************************************
************************************************************* */
section[data-sectionname="home"] {
min-width: 100vw;
min-height: 100%;
height: 100%;
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
padding: 0px !important;
}
section[data-sectionname="home"] .leftMenu {
display: none;
}
section[data-sectionname="home"] .content {
height: 100%;
min-height: 100vh;
flex-grow: 1;
padding: 0rem 1.5rem 0rem 1.5rem;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
}
section[data-sectionname="home"] .content .headMenu {
padding: 1.25rem 1.25rem 1rem 1rem;
position: absolute;
right: 0px;
top: 0px;
color: hsl(var(--col_gs_gray1));
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
z-index: 10000;
}
section[data-sectionname="home"] .content .headMenu .signs .userImgCircle {
font-size: 0.75rem;
width: 1.5rem;
min-width: 1.5rem;
max-width: 1.5rem;
height: 1.5rem;
min-height: 1.5rem;
max-height: 1.5rem;
color: hsla(var(--col_gs_white),0.75);
background-color: hsl(var(--col_pr_3));
border-radius: 1.5em;
padding: 0.5em 0.35em;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: center;
align-items: center;
}
section[data-sectionname="home"] .content .headMenu .signs .userImgCircle .icon {
background: hsla(var(--col_gs_white),0.75);
}
section[data-sectionname="home"] .content .headMenu .naviHeaderUserMenu {
position: relative;
cursor: pointer;
}
section[data-sectionname="home"] .content .headMenu .naviHeaderMainMenu:hover .dropOutMenu,
section[data-sectionname="home"] .content .headMenu .naviHeaderUserMenu:hover .dropOutMenu {
display: block;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu {
display: none;
font-size: 1.125rem;
line-height: 2.25rem;
color: hsl(var(--col_gs_white));
white-space: nowrap;
position: absolute;
top: 100%;
margin-left: 1.5rem;
transform: translateX(-100%);
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .bg {
background-color: hsl(var(--col_se_5));
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
position: absolute !important;
border-radius: 1rem;
z-index: 0;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .inner * {
position: relative;
z-index: 1;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .inner {
margin-top: 1.125rem;
padding: 1.125em 1.75em 1.125em 1.75em;
border-radius: 1rem;
background-color: rgba(10,10,10,0.4);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .inner .userIdArea {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
line-height: 1.25rem;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .inner .userIdArea .userImgCircle {
font-size: 1.125rem;
width: 2.75rem;
min-width: 2.75rem;
max-width: 2.75rem;
height: 2.75rem;
min-height: 2.75rem;
max-height: 2.75rem;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .elm {
cursor: pointer;
}
section[data-sectionname="home"] .content .headMenu .dropOutMenu .elm:hover {
color: hsl(var(--col_se_3));
}
section[data-sectionname="home"] .headBreadcrump {
padding: 1rem 1rem 1rem 0rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 0.5rem;
}
section[data-sectionname="home"] .headBreadcrump .icon {
background: hsl(var(--col_gs_gray1));
}
section[data-sectionname="home"] .headBreadcrump .icon:hover {
background: hsl(var(--col_gs_white));
}
section[data-sectionname="home"] .headBreadcrump > div {
position: relative;
padding-right: 1.5rem;
color: hsl(var(--col_gs_gray1));
cursor: pointer;
}
section[data-sectionname="home"] .headBreadcrump > div:hover {
color: hsl(var(--col_gs_white));
}
section[data-sectionname="home"] .headBreadcrump > div:not(:last-child):after {
content: '';
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 1.3rem;
height: 1.3rem;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
}
section[data-sectionname="home"] .subMenu {
margin-top: 1rem;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px hsl(var(--col_gs_gray6)) solid;
}
section[data-sectionname="home"] .subMenu > div {
font-weight: 600;
cursor: pointer;
}
section[data-sectionname="home"] .subMenu > div:hover {
color: hsl(var(--col_pr_2));
}
section[data-sectionname="home"] .subMenu > div.active {
color: hsl(var(--col_pr_3));
}
section[data-sectionname="home"] .content .main {
flex-grow: 1;
padding-top: 1.25rem;
}