RUX/assets/css/style.css

1169 lines
No EOL
17 KiB
CSS

@import 'normalize.css';
@font-face {
font-family: 'MoodboardFont';
font-weight: 400;
src: url('../fonts/moodboardfont-webfont.woff2') format('woff2'),
url('../fonts/moodboardfont-webfont.woff') format('woff');
}
@font-face {
font-family: 'TT-Chocolates-Trial-Bold';
src: url('../fonts/TT-Chocolates-Trial-Bold-BF64000de738662.otf');
}
@font-face {
font-family: 'TT-Chocolates-Trial-Regular';
src: url('../fonts/TT-Chocolates-Trial-Regular-BF64000de741fcc.otf');
}
@font-face {
font-family: 'TT-Chocolates-Trial-ExtraBold';
src: url('../fonts/TT-Chocolates-Trial-ExtraBold-BF64000de66f30b.otf');
}
@font-face {
font-family: 'TT-Chocolates-Trial-Light';
src: url('../fonts/TT-Chocolates-Trial-Light-BF64000de64da1c.otf');
}
@font-face {
font-family: 'TT-Chocolates-Trial-ExtraBold-Italic';
src: url('../fonts/TT-Chocolates-Trial-ExtraBold-Italic-BF64000de688e43.otf');
}
@font-face {
font-family: 'TT-Chocolates-Trial-DemiBold';
src: url('../fonts/TT-Chocolates-Trial-DemiBold-BF64000de5e93e5.otf');
}
*,
:after,
:before {
box-sizing: border-box;
margin: 0;
}
:root {
--color-bg-head: #77A3D2;
}
html {
scroll-behavior: smooth;
}
@media(prefers-color-scheme: dark) {
:root {
--color-bg-head: #77A3D2;
--color-bg: #f3f2f0;
--color-bg-sctn-pink: #EDCCE7;
--color-bg-sctn-green: #CDFB52;
--color-bg-sctn-blue: #52f8fb;
--color-bg-sctn-fuscia: #FF00C7;
--color-active: #FF00C7;
--color-visited: #4B003B;
--color-hover: #EDCCE7;
--color-link: #000000;
--color-icone: #f3f2f0;
--color-discu-pink: #FFB4EF;
--color-link-f: #00fa6c;
--color-link-block: #4B003B;
}
[data-theme="light"] {
--color-bg: #f3f2f0;
--color-txt: #001f1f;
--color-link: #000000;
--color-linknav: #f3f2f0;
--color-icone: #000;
--color-discu-pink: #FFB4EF;
--color-discu-green: #CEFFB2;
--color-discu-blue: #B4E9FF;
--color-bg-all: #ffffff;
}
[data-theme="dark"] {
--color-bg: #000000;
--color-txt: #f3f2f0;
--color-txt-b: #000000;
--color-link: #f3f2f0;
--color-linknav: #000000;
--color-icone: #f3f2f0;
--color-discu-pink: #4B003B;
--color-discu-green: #1C4D00;
--color-discu-blue: #00354B;
--color-bg-all: #202023;
}
}
/*BTN THEME*/
[data-theme="dark"] .btn__dark {
display: none;
}
[data-theme="dark"] .btn__light {
display: inline;
}
.logoDWT__dark-mode {
display: none;
}
.logo__dark-mode {
display: none;
}
body {
font-family: 'TT-Chocolates-Trial-Regular';
font-size: 18px;
color: var(--color-txt);
background-color: var(--color-bg-all);
padding: 0;
margin: 0;
line-height: 1.5;
}
/*LINK*/
a {
color: var(--color-bg-sctn-fuscia);
font-family: TT-Chocolates-Trial-Light;
text-decoration: none;
}
a :visited {
color: var(--color-visited);
}
/*GRID*/
.grid {
display: grid;
grid-template-columns: 1fr 6fr 6fr 1fr;
padding-left: 30px;
padding-bottom: 2.5em;
padding-right: 30px;
gap: 3em 20px;
background-color: var(--color-bg-all);
}
.grid>* {
grid-column: 1/-1;
}
.grid>figure {
margin: 0;
}
.grid__discu {
display: grid;
grid-template-columns: 3fr 4fr 4fr 3fr;
grid-template-rows: 125px repeat(1, 1fr);
padding-left: 30px;
padding-right: 30px;
gap: 3em 20px;
margin-top: 2em;
}
.mgrid-start01 {
grid-column-start: 1;
}
.mgrid-start02 {
grid-column-start: 2;
}
.mgrid-start03 {
grid-column-start: 3;
}
.mgrid-start04 {
grid-column-start: 4;
}
.mgrid-end02 {
grid-column-end: 2;
}
.mgrid-end03 {
grid-column-end: 3;
}
.mgrid-end04 {
grid-column-end: 4;
}
.grid__title {
display: grid;
grid-template-columns: 1fr;
padding-left: 30px;
padding-right: 30px;
gap: 3em 20px;
}
.grid--content {
gap: 9em 20px;
}
/*HEADER*/
header {
display: flex;
position: fixed;
z-index: 2;
top: 93vh;
flex-direction: row-reverse;
justify-content: space-around;
background-color: var(--color-bg-all);
}
.headtitle h1 {
visibility: hidden;
}
.main, .footer {
margin: 0 1.5em;
}
.rux {
background-color: var(--color-active);
margin-top: 1rem;
}
.header--second {
align-items: center;
flex-direction: row-reverse;
border: 2px solid #000000d1;
}
.header__btn--theme {
color: var(--color-bg-head);
width: 35px;
height: 35px;
background-color: transparent;
background-repeat: no-repeat;
border: none;
overflow: hidden;
position: relative;
cursor: pointer;
z-index: 2;
}
.header__button--txt {
/*le laisser en-dessous de dark-mode*/
position: absolute;
white-space: nowrap;
text-indent: 100%;
}
.navlink__list {
text-decoration: none;
list-style: none;
display: flex;
gap: 38px;
padding: 0;
}
.navlink__txt {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.navlink__list .navlink__el {
position: relative;
width: 2em;
}
.navlink__icon{
width: 47px;
height: 47px;
border-color: var(--color-link);
}
.header__span--none {
display: none;
}
.headback {
margin-bottom: 21em;
}
.title {
font-size: 38px;
margin-top: 0;
padding-top: 1em;
font-family: 'TT-Chocolates-Trial-Bold';
font-weight: 300;
font-style: normal;
text-transform: uppercase;
margin-bottom: 2rem;
}
.title--head {
font-size: 59px;
background-color: var(--color-bg-all);
font-family: 'TT-Chocolates-Trial-DemiBold';
margin-top: -41rem;
padding-top: 0;
line-height: 1.5;
}
.title--medium {
font-size: 14px;
background: none;
color: var(--color-txt-b);
}
.RevealUX{
color: var(--color-bg-head);
}
p {
font-size: 20px;
margin: 1em 0;
}
.bg {
width: 100%;
text-align: center;
background-repeat: no-repeat;
padding: 9em 0em 12em 0em;
margin: 63vw 0em 1em 0vw;
display: flex;
background-image: url(../images/eleve.png);
background-color: var(--color-bg-head);
filter: contrast(130%);
background-size: cover;
}
.partie1_blackfill {
padding: 1.25em 18px;
display: inline;
background: #000000;
color: #ffffff;
box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
}
img {
max-width: 100%;
min-width: 100%;
float: left;
}
.img__content {
padding-bottom: 3em;
}
.element_dot {
text-align: center;
}
.slide {
overflow-x: scroll;
width: auto !important;
height: 364px;
overflow-y: hidden;
}
.image_slide {
min-width: 236vh;
float: left;
height: 108vh;
}
.image_undertxt {
object-fit: cover;
max-width: 100%;
min-width: 100%;
float: left;
height: 100%
}
.image_undertxt--iv {
filter: invert(1);
}
.image_undertxt--slide {
height: 354px;
}
.image_sequence {
min-width: 25%;
}
.myChart {
width: 100%;
max-width: 700px;
}
/*
.strip {
box-sizing: border-box;
width: 90%;
height: 4em;
z-index: -1;
position: absolute;
margin-left: -19px;
}*/
.strip--1 {
top: 55em;
transform: skew(30deg) rotate(30deg);
background-color: #FF00C7;
}
.strip--2 {
top: 82em;
transform: skew(-30deg) rotate(-30deg);
background-color: #FF00C7;
}
.strip--3 {
top: 109em;
transform: skew(30deg) rotate(30deg);
background-color: #FF00C7;
}
.strip--cash {
max-width: 100%;
background-image: url(/assets/images/stripeuro.png);
background-size: cover;
filter: invert(1);
margin-top: -19em;
position: static;
}
.miroframe {
max-width: 100%;
min-width: 100%;
padding: 1em;
}
.list--footer,
.list {
text-decoration: none;
list-style: none;
padding: 0;
background-color: var(--color-txt-b);
}
body[data-menu] {
position: fixed;
top: -57px;
padding-top: 0px;
width: 48%;
height: 122%;
background: #77a3d2b5;
transform: translatex(0%);
transition: transform 0.3s ease-out;
display: flex;
flex-direction: column;
backdrop-filter: blur(15px);
margin-top: -4em;
z-index: 2;
}
.discu__el {
text-decoration: none;
border-radius: 25px;
display: inline-flex;
align-items: center;
margin-top: 1em;
border-radius: 3px;
border: 2px solid black;
}
.discu__el--pink {
background-color: var(--color-discu-pink);
padding: 2rem;
}
.discu__el--green {
background-color: var(--color-discu-green);
padding: 2rem;
}
.discu__el--blue {
background-color: var(--color-discu-blue);
padding: 2rem;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.slide_set {
margin-bottom: 2em;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 15%;
text-align: center;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: var(--color-active);
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 0.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.equipe {
list-style: none;
}
.equipe__grid {
margin-top: 5em;
}
.el__equipe {
font-size: 30px;
}
.equipe__liste {
list-style: none;
display: grid;
}
.equipe__txt {
font-size: 30px;
}
.equipe__liste .equipe__el {
position: relative;
margin-top: 7em;
}
.equipe__icon {
width: 18vh;
border-radius: 7px;
}
.DWT {
width: 37px;
height: 47px;
filter: drop-shadow(2px 4px 6px black);
}
.footer__el {
display: inline-block;
flex-direction: row;
justify-content: center;
margin-left: 1vh;
}
.footer__liste {
display: initial;
gap: 30px;
float: inherit;
}
.details[open] {
border-radius: 5%;
}
.details__QR>ul> :nth-child(even) {
margin-left: 30px;
margin-top: -10px;
font-style: italic;
}
.title__slot {
font-size: 25px;
}
h3 {
font-size: 18px;
}
.guide__el {
list-style: " → ";
font-size: 26px;
margin-left: -2em;
}
.guide__liste {
list-style: " — ";
}
footer {
display: flex;
padding-bottom: 5rem;
margin-top: 0px;
color: var(--color-primary);
border-top: solid 3px;
}
.equipe {
margin-top: 8rem;
display: grid;
}
/* reseaux */
.reseaux__el {
text-decoration: none;
border-radius: 25px;
display: inline-flex;
align-items: center;
}
.reseaux {
list-style: none;
margin-top: 5rem;
}
.reseaux__el a {
width: 35px;
height: 45px;
display: inline-block;
background-color: border;
}
.reseaux__txt {
position: absolute;
visibility: hidden;
pointer-events: none;
}
.reseaux__icon {
width: 100%;
height: 100%;
}
.reseaux__liste .reseaux__el {
position: relative;
width: 5em;
height: 3em;
margin: 1px 1px 0px;
}
.reseaux__el:active {
transform: scale(0.98);
}
.reseaux__liste .reseaux__el a {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
z-index: 1;
font-weight: 400;
text-decoration: none;
overflow: hidden;
transition: 0.5s;
backdrop-filter: blur(15px);
}
.reseaux__liste .reseaux__el a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
transition: 0, 5s;
}
.reseaux__liste .reseaux__el:hover a::before {
transform: skewX(45deg) translateX(100px);
}
.reseaux__liste .reseaux__el::before {
content: '';
position: absolute;
left: 60%;
transform: translateX(90%);
bottom: -9px;
width: 30px;
height: 10px;
border-radius: 10px;
transition: 0.02s;
}
.reseaux__liste .reseaux__el:hover::before {
bottom: 0;
height: 50%;
width: 80%;
border-radius: 30px;
transition-delay: 0.2s;
}
.reseaux__liste .reseaux__el::after {
content: '';
position: absolute;
left: 60%;
transform: translateX(-50%);
top: -5px;
width: 30px;
height: 10px;
border-radius: 10px;
transition: 0.05s;
border-bottom: #b2f098;
}
.reseaux__liste .reseaux__el:hover::after {
top: 0;
height: 50%;
width: 80%;
border-radius: 30px;
transition-delay: 0.008s;
}
/*icone des contacts*/
.contact__icon {
width: 47px;
height: 47px;
fill: var(--color-icone);
}
/*DIV BESOINS DEFILENT*/
.section--besoin {
overflow: hidden;
}
.besoins {
display: inline-flex;
animation: Scroll 10s linear 1s infinite;
align-items: center;
}
.besoins__el {
font-family: "obviously-narrow", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 20px;
line-height: 1;
text-transform: uppercase;
color: #000000;
border-radius: 6px;
background-color: var(--color-secondary);
width: 8em;
height: fit-content;
min-height: 2em;
padding: 1em 1em;
margin: 1rem 1em;
}
.besoins__el--white {
background-color: #FDFDFC;
}
.besoins__el--dark {
background-color: #000000;
color: #FDFDFC;
}
@keyframes Scroll {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
@media only screen and (min-width: 750px) {
.header__navigation{
position: fixed;
}
.grid {
display: grid;
grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
padding-left: 0;
padding-right: 0;
gap: 3em 20px;
}
.grid>* {
grid-column: 1/-1;
}
.grid>figure {
margin: 0;
}
.tgrid-start01 {
grid-column-start: 1;
}
.tgrid-start02 {
grid-column-start: 2;
}
.tgrid-start03 {
grid-column-start: 3;
}
.tgrid-start04 {
grid-column-start: 4;
}
.tgrid-start05 {
grid-column-start: 5;
}
.tgrid-start06 {
grid-column-start: 5;
}
.tgrid-end01 {
grid-column-end: 1;
}
.tgrid-end02 {
grid-column-end: 2;
}
.tgrid-end03 {
grid-column-end: 3;
}
.tgrid-end04 {
grid-column-end: 4;
}
.tgrid-end05 {
grid-column-end: 5;
}
.tgrid-end06 {
grid-column-end: 6;
}
.tgrid-end07 {
grid-column-end: 7;
}
.header--second {
border: none;
box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
}
p {
max-width: 55ch;
font-size: 21px;
}
figcaption {
font-size: 18px;
}
.image_sequence {
min-width: 25%;
}
.image_sequence--m {
max-width: 10%;
}
a {
color: #00fa6c;
}
.discu__liste {
display: inline-flex;
gap: 1rem;
margin-bottom: 5rem;
}
.js-theme-trigger {
width: 6%;
}
footer {
display: flex;
padding-bottom: 10px;
padding-top: 15px;
color: var(--color-primary);
border-top: solid 3px;
justify-content: center;
}
.slide {
height: 500px;
}
}
@media only screen and (min-width: 1024px) {
/*GRID*/
.grid {
display: grid;
grid-template-columns: 1fr 6fr 6fr 1fr 1fr;
padding-left: 0;
padding-right: 0;
gap: 3em 20px;
}
.grid>* {
grid-column: 1/-1;
}
.grid>figure {
margin: 0;
}
.grid__discu {
display: grid;
grid-template-columns: 1fr 3fr 3fr 3fr 3fr 1fr;
grid-template-rows: 125px repeat(1, 1fr);
padding-left: 30px;
padding-right: 30px;
gap: 3em 20px;
margin-top: 2em;
}
.dgrid-start01 {
grid-column-start: 1;
}
.dgrid-start02 {
grid-column-start: 2;
}
.dgrid-start03 {
grid-column-start: 3;
}
.dgrid-start04 {
grid-column-start: 4;
}
.dgrid-start05 {
grid-column-start: 5;
}
.dgrid-start06 {
grid-column-start: 5;
}
.dgrid-end01 {
grid-column-end: 1;
}
.dgrid-end02 {
grid-column-end: 2;
}
.dgrid-end03 {
grid-column-end: 3;
}
.dgrid-end04 {
grid-column-end: 4;
}
.dgrid-end05 {
grid-column-end: 5;
}
.dgrid-end06 {
grid-column-end: 6;
}
.dgrid-end07 {
grid-column-end: 7;
}
.grid__title {
display: grid;
grid-template-columns: 1fr;
padding-left: 30px;
padding-right: 30px;
gap: 3em 20px;
}
/*HEADER*/
header {
height: 6%;
}
.header--second {
box-shadow: .5em 0 0 #FF00C7, -.5em 0 0 #FF00C7;
border: none;
}
.navlink__list {
gap: 25vh;
}
/*Natif Heading*/
.title {
margin-right: 0;
font-size: 75px;
}
p {
max-width: 43ch;
font-size: 21px;
}
.img__content {
padding-bottom: 3em;
}
.content__objet {
margin-left: -1em;
margin-right: -1rem;
}
.partie1_blackfill {
padding: 2.25em 18px;
}
/*STRIP
.strip {
height: 7em;
}
.strip--1 {
top: 116rem;
}
.strip--2 {
top: 164rem;
}
*/
/*PHILACTÈRE*/
.discu__liste {
display: inline-flex;
gap: 1rem;
}
.discu__el {
display: flex;
}
.discu__el--pink {
padding: 3rem;
}
.discu__el--green {
padding: 3rem;
}
.discu__el--blue {
padding: 3rem;
}
/*images*/
.image_undertxt--slide {
min-width: 36%;
max-width: 77%;
}
/*footer*/
footer {
display: flex;
padding-bottom: 10px;
padding-top: 15px;
color: var(--color-primary);
border-top: solid 3px;
justify-content: center;
}
.DWT {
margin-top: -9rem;
width: 95px;
height: 100px;
filter: drop-shadow(2px 4px 6px black);
}
/*list--footer*/
.footer__liste {
padding-bottom: 0em;
}
.strip--3 {
display: none;
}
a:hover {
color: #00fa6c;
font-weight: 700;
}
a {
color: var(--color-active);
text-decoration: none;
}
.navlink__list {
gap: 11vh;
}
.strip--cash {
margin-top: -21em;
position: static;
margin-left: 34em;
}
.discu__liste {
display: inline-flex;
gap: 1rem;
margin-bottom: 3rem;
}
.title--medium {
font-size: 28px;
text-align: center;
}
.equipe__liste {
display: flex;
}
.equipe__txt {
margin-left: 2rem;
}
}