/* LESS Document */ //COLORS @bleu:#1aaba9; @marine:#00183e; @green:#00b5ac; @orange:#ee7203; @grey:#738095; @clair:#52bfbe; .bleu { color:@bleu; } .marine { color:@marine; } .green { color:@green; } * { margin:0; padding:0; } body { position:relative; padding-bottom:200px; } // HEADER header { position:fixed; top:0; z-index:9999; width:100vw; height:120px; background:@green; color:#FFF; } .fullimg { position:relative; min-height:100%; } .title { text-transform:uppercase; font-family:'DINblack'; text-align:left; position:relative; width:45%; top:0; float:left; padding:20px 10px 10px 10px; .bigt { font-size:50px; display:block; line-height:38px; } .litt { font-size:30px; line-height:30px; display:block; sup { font-size:18px; } } .smat { font-size:20px; display:block; line-height:20px; letter-spacing:1px; font-family:'DINmedium'; } } header .logo { width:8%; float:left; padding:30px 0 0 0; img { width:100%; height:auto; } } #navigation { float:right; margin-right:40px; font-size:50px; line-height:120px; i { cursor:pointer; } } #menu { display:none; position:fixed; top:0; z-index:2; height:100vh; width:125vw; padding:120px 0 0 0; ul { position:relative; top:0; padding:0; margin:0; width:100%; height:100%; overflow:hidden; color:#6d8098; background:rgba(255,255,255,0.95); li { display:none; padding:10% 5% 0 0; position:relative; width:20%; height:100%; float:left; text-align:left; overflow:hidden; margin-left:0; border-left:solid 1px #6d8098; -webkit-transition: all 0.3s; transition: all 0.3s; a { top:0; color:#6d8098; &:hover { color:@bleu; } } .number { display:block; padding-left:5%; position:relative; margin-top:0; font-size:140px; line-height:140px; font-family:'Amp'; } .titre { display:block; padding-left:5%; position:relative; width:100%; text-transform:uppercase; margin-top:0; font-size:32px; line-height:38px; font-family:'DINbold'; } .separator { width:30%; height:5px; display:block; background:#6d8098; margin:30px 0 0 5%; } ul { padding:0; background:transparent; top:auto; height:auto; li { display:block; height:auto; border-left:0; width:100% !important; padding-right:0 !important; font-family:'DINbold'; font-size:20px; padding:0 0 0 5%; margin-top:20px; } } } } } #menu li:hover { width:25%; padding-right:10%; -webkit-transition: all 0.3s; transition: all 0.3s; } #menu li.four:hover { margin-left:-5%; -webkit-transition: all 0.3s; transition: all 0.3s; } // HOME article { position:relative; } ul#homemenu { position:relative; top:0; padding:0; margin:0; height:100vh; width:125%; overflow:hidden; color:#FFF; li { position:relative; width:20%; height:100%; float:left; padding:0; text-align:left; overflow:hidden; margin-left:0; -webkit-transition: all 0.3s; transition: all 0.3s; img { position: absolute; min-height:75%; height:75%; width:auto; left: 50%; transform: translate(-50%, 0); z-index:0; } .number { display:block; padding-left:5%; position:relative; top:70%; font-size:140px; line-height:90px; font-family:'Amp'; } .titre { display:block; padding-left:5%; margin-top:10px; padding-right:15%; position:relative; width:100%; text-transform:uppercase; top:70%; font-size:32px; line-height:38px; font-family:'DINbold'; -webkit-transition: width 0.3s; transition: width 0.3s; } } } li.color-turquoise { background:@green; } li.color-orange { background:@orange; } li.color-gris { background:@grey; } li.color-bleu { background:@clair; } ul#homemenu li:hover { width:25%; -webkit-transition: width 0.3s; transition: width 0.3s; .titre { width:80%; -webkit-transition: width 0.3s; transition: width 0.3s; } } ul#homemenu li.line-4:hover { margin-left:-5%; -webkit-transition: all 0.3s; transition: all 0.3s; } .hometitle { position:absolute; text-align:center; left:50%; top:40%; transform: translate(-50%, 0); z-index:1; width:80%; height:0; h1 { text-transform:uppercase; font-family:'DINblack'; font-size:70px; font-weight:normal; margin:0; padding:0; line-height:0; color:#FFF; } } // PAGE STANDARD #slider { width:100vw; position:relative; z-index:-1; img { width:100%; height:auto; } } .top, .chapitre { .number { display:block; margin-top:-150px; font-size:250px; padding:0 5%; line-height:170px; font-family:'Amp'; color:#FFF; } h1 { text-transform:uppercase; font-family:'DINmedium'; font-size:65px; width:70%; line-height:70px; font-weight:normal; margin:0; padding:0 5%; color:@green; margin-bottom:10px; } .intro { display:block; padding:0 30% 0 15%; font-size:28px; font-weight:bold; } } .multiple { height:60vh; padding:150px 0 0 0; background:@orange; } .multiple.top .number { display: inline-block; vertical-align:bottom; margin-top: 0; font-size: 250px; line-height: 145px; padding-left:5%; } .multiple ul{ margin-top:50px; list-style-type:none; color:@marine; li { display:inline-block; border-right:solid 2px @marine; padding:0 40px 0 40px; font-size:32px; line-height:28px; font-family:'DINmedium'; a { color:@marine; } } } .multiple ul li:first-child { padding:0 40px 0 0; } .multiple ul li:last-child { border-right:0; } .multiple ul li a:hover { font-weight:700; } .part-menu { display: inline-block; vertical-align:bottom; height:100%; width:80%; padding:0 0 0 0; h1 { color:#FFF; font-size:80px; line-height:80px; width:100%; padding:0; } } .part-title { font-family:'DINbold'; font-size:36px; line-height:36px; padding:2px 10px; margin:0 5%; background:#FFF; margin-bottom:20px; } .chapitre h1 { color:@orange; width:100%; margin-top:20px; } .part { margin-top:-25px; h1 { margin: 20px 0 0 0; } } .ancre { margin-top:-200px; height:200px; } .ancre2 { margin-top:-120px; height:120px; } .info { padding:30px 5% 0; margin-top:30px; h2 { font-family:'DINbold'; color:@green; text-transform:none; font-size:28px; margin-bottom:30px; } } .info.color-gris { background:#eae7e7; padding:50px 5%; margin-top:50px; } .chapo { padding:30px 0; p { font-size:22px; padding:0 30% 0 15%; } h2 { padding:0 30% 0 15%; font-family:'DINmedium'; font-size:50px; line-height:50px; margin:30px 0; } } .content { padding:0 30% 0 15%; img { width:100%; height:auto; margin:20px 0; } } .content .color-gris { background:#cacfd7; padding:30px; margin:20px 0; h3 { margin-top:0; } } .content .color-orange { background:#eb9141; padding:30px; margin:20px 0; h3 { margin-top:0; } } .content .color-bleu { background:@bleu; padding:30px; margin:20px 0; h3 { margin-top:0; } } .full { width:100%; position:relative; z-index:-1; img { width:100%; height:auto; margin:0; } } .verticale img { float:left; width:50%; margin:0 4% 2% 0; } .verticale .legende { display:block; width:50%; float:left; background:@marine; color:#FFF; font-size:16px; line-height:18px; margin:-18px 4% 2% 0; padding:2px 10px; font-family:'DINmedium'; } .legende { display:block; width:100%; background:@marine; color:#FFF; font-size:16px; line-height:18px; margin:-25px 4% 2% 0; padding:2px 10px; font-family:'DINmedium'; } #slider .legende, .full .legende { display:inline-block; position:absolute; background:@marine; color:#FFF; font-size:16px; width:auto; line-height:18px; bottom:5%; right:40px; text-align:right; padding:2px 10px; font-family:'DINmedium'; z-index:50; } .interview { margin:50px 30% 50px 15%; padding:20px 0; .portrait { overflow:hidden; width:110px; height:110px; float:left; margin:0 20px 0 0; -webkit-border-radius: 55px; -moz-border-radius: 55px; border-radius: 55px; img { width:100%; height:auto; } } h3 { margin:20px 0 10px; font-size:26px; line-height:26px; font-family:'DINmedium'; } h4 { margin:0 0 40px 0; color:@marine; } p { font-family:'DINmedium'; } } .less { display:none; text-align:right; img { width:40px; height:20px; cursor:pointer; } } .more { text-align:right; img { width:40px; height:20px; cursor:pointer; } } .suite { display:none; img { width:50% !important; height:auto !important; } } .interview.color-bleu { border-top:solid 1px @marine; border-bottom:solid 7px @marine; color:#606f87; } .interview.color-vert { border-top:solid 1px @bleu; border-bottom:solid 7px @bleu; color:@bleu; } #citation { position:relative; margin:0; width:100vw; font-size:0; list-style-type:none; li { min-height:450px; padding:20px 5%; width:25%; border:0; overflow:hidden; display: inline-block; vertical-align:top; margin: 0; border:1px solid #9adad9; .portrait { display:block; overflow:hidden; width:110px; height:110px; margin:0 0 20px 0; -webkit-border-radius: 55px; -moz-border-radius: 55px; border-radius: 55px; img { width:100%; height:auto; } } h3 { margin:20px 0 0; color:#000; font-size:18px; line-height:20px; font-family:'DINmedium'; } h4 { margin:0; line-height:20px; color:@marine; } .in { float:left; margin:10px 0 0 -55px; } .out { float:left; margin:20px 0 0 10px; } } } #citation li:nth-child(odd) { background:#d1eeee; } #citation li:nth-child(even) { background:#bae6e5; } #citation .texte { display:none; position:absolute; top:0; left:0; width:100%; height:100%; padding:0 50px 0 0; background:#FFF; font-size:0; border:1px solid #FFF; } .texte .cel1 { width:25%; box-sizing:border-box; display:inline-block; vertical-align:top; padding:20px 5%; } .texte .cel2 { width:75%; box-sizing:border-box; display:inline-block; vertical-align:top; padding:20px; } .cel2 i { display:block; color:#000; font-size:40px; margin:0 0 20px 20px; line-height:50px; text-align:center; float:right; cursor:pointer; } .read { background:@orange; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display:inline-block; font-size:18px; color:#FFF; padding:2px 5px 0; margin-top:10px; cursor:pointer; font-family:'DINmedium'; } article#post-40 { font-size:0; } .diapo { position: relative; width:25vw; height:26.5vw; display:inline-block; vertical-align:top; font-size:0; margin:0; border:0; .backdiapo { position:relative; width:100%; height:auto; z-index:0; } .vignette { position:absolute; left:20%; top:15%; width:56%; height:auto; transform: rotate(10deg); z-index:1; cursor:pointer; } h3 { position:absolute; left:14%; top:62%; width:56%; height:auto; font-size:14px; line-height:16px; transform: rotate(10deg); z-index:2; } } .diapo-txt { width:25vw; height:26.5vw; width:100%; height:100%; background:#FFF; padding:20px; p { font-size:16px; line-height:18px; margin-top:0; } h4 { color:@bleu; margin-bottom:0; } } // FAQ #faq { display:none; position:relative; background:@marine; color:#FFF; bottom:0; top:0; left:0; width:100%; z-index:99999; min-height:100vh; font-size:22px; line-height:24px; ul { list-style-type:none; } i { font-size:60px; cursor:pointer; } .titre { font-size:40px; margin:20px 0 40px 0; } } .faq-wrap { position:relative; bottom:0; padding:50px 15% 100px; } #faq .question { display:block; background:#FFF; color:@marine; margin-top:20px; padding:10px 60px 10px 40px; font-family:'DINmedium'; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; i { float:right; margin:0 -20px 0 20px; cursor:pointer; line-height:24px; font-size:28px; } } .reponse { display:none; background:#e5f2f1; color:@marine; padding:10px 40px; font-family:'DINmedium'; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size:20px; line-height:22px; } // NAV nav { position:relative; width:100%; padding:0 10%; display:block; top:40%; ul { list-style-type:none; font-size:30px; line-height:30px; font-family:'DINblack'; text-transform:uppercase; li { display:inline-block; padding:10px; max-width:24%; color:#FFF; border:1px solid #FFF; margin-right:14%; text-align:left; vertical-align:top; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:rgba(255,255,255,0.00); -webkit-transition: all 1s; transition: all 1s; } li:last-child { margin-right:0; } } } nav ul li:hover { color:@bleu; border:1px solid @bleu; background:rgba(255,255,255,0.75); margin-top:-20px; -webkit-transition: all 0.6s; transition: all 0.6s; } nav ul li a { color:#FFF; -webkit-transition: all 0.6s; transition: all 0.6s; } nav ul li:hover a { color:@bleu; -webkit-transition: all 0.6s; transition: all 0.6s; } // BALISES h2 { font-family:'DINmedium'; font-size:40px; line-height:40px; margin:30px 0; font-weight:normal; } h3 { font-family:'DINbold'; font-size:22px; line-height:22px; margin:30px 0 -20px; font-weight:normal; } h4 { font-family:'DINbold'; font-size:17px; font-weight:normal; } p, ul { font-size:18px; line-height:30px; margin:20px 0; } // MAIN aside { display:none; } .secback { position:absolute; z-index:-999; width:100vw; height:100vh; } .section.standard { width:100vw; height:100vh; position:relative; .wrapper { top:30%; } h4 { width:33%; } } .section.chiffre { width:100vw; height:100vh; position:relative; .wrapper { top:20%; } h2 { font-size:100px; line-height:105px; } h4 { width:40%; display:inline-block; vertical-align:bottom; } .number { font-family:'DINblack'; font-size:250px; line-height:220px; display:inline-block; vertical-align:bottom; } } // SINGLE .art-single { margin:0 30% 150px 15%; h1 { text-transform:uppercase; font-family:'DINmedium'; font-size:40px; width:70%; line-height:40px; font-weight:normal; margin:200px 0 0 0; color:@green; margin-bottom:10px; } a { color:@marine; font-weight:bold; &:hover { color:@bleu; } } ul li { margin:0 0 0 10px; padding:0 0 0 10px; } } // FOOTER footer { width:100%; height:200px; position:absolute; bottom:0; padding:40px 0; background:@marine; .logo { width:14%; margin-right:5%; display:inline-block; vertical-align:middle; } .contact { display:inline-block; vertical-align:middle; span { display:block; } .savoir { text-transform:uppercase; font-family:'DINmedium'; font-size:20px; color:#FFF; } .site { color:@bleu; font-family:'DINblack'; font-size:30px; line-height:32px; a { color:@bleu; } a:hover { color:#FFF; } } .coord { font-family:'DINbold'; font-size:20px; line-height:26px; color:@bleu; a { color:@bleu; } a:hover { color:#FFF; } } .mentions { font-family:'DINmedium'; font-size:13px; line-height:26px; color:#FFF; a { color:#FFF; } a:hover { color:@clair; } } } } .brochure { border:solid 1px #FFF; float:right; padding:10px 20px; font-family:'DINbold'; font-size:18px; line-height:18px; text-align:center; margin-top:10px; } .brochure:hover { border:solid 1px @bleu; color:@bleu !important; } .brochure a:hover { color:@bleu; } .faqbtn { color:#FFF; border:solid 1px #FFF; float:right; padding:10px 20px; font-family:'DINblack'; font-size:36px; line-height:52px; text-align:center; margin:10px 0 0 20px; cursor:pointer; } .faqbtn:hover { border:solid 1px @bleu; color:@bleu !important; } // POINTS NAV ul#points { position:fixed; top:40%; left:2%; list-style-type:none; padding:0; z-index:999; li { background:#c2c2c4; width:15px; height:15px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; margin-bottom:30px; -webkit-transition: background 0.3s; transition: background 0.3s; &:hover { background:@marine; -webkit-transition: background 0.3s; transition: background 0.3s; } } } // TECH .phone { display:none; } .desktop { display:block; } clearfix { clear:both; } // RESPONSIVE @media only screen and (max-width:1439px) { .hometitle h1 { font-size: 60px; } ul#homemenu li { .number { top: 74%; font-size: 100px; line-height: 35px; } .titre { top: 75%; font-size: 26px; line-height: 30px; } } #menu ul li { padding: 2% 5% 0 0 } .multiple { padding: 150px 0 0 0; height:60vh; } .part-menu h1 { font-size: 70px; line-height: 70px; } .diapo h3 { font-size:12px; line-height:13px; } #citation li h4 { line-height:20px; } } @media only screen and (max-width:1279px) { header { height: 95px; } .title { .bigt { font-size: 32px; line-height: 24px; } .litt { font-size: 32px; sup { font-size: 20px; } } } .hometitle h1 { font-size: 50px; } ul#homemenu li { .number { top: 74%; font-size: 100px; line-height: 35px; } .titre { top: 75%; font-size: 22px; line-height: 26px; } } .part-menu { width: 70%; } .diapo-txt p { font-size: 11px; line-height: 14px; } } @media only screen and (max-width:1023px) { header { height: 95px; } .title { .bigt { font-size: 28px; line-height: 18px; } .litt { font-size: 28px; sup { font-size: 18px; } } .smat { font-size: 16px; line-height: 16px; letter-spacing: 0.5px; } } #navigation { font-size:36px; line-height: 90px; } #menu { padding: 90px 0 0 0; ul li .titre { font-size:22px; line-height:22px; } } .hometitle h1 { font-size: 50px; line-height:50px; } ul#homemenu li { .number { top: 74%; font-size: 100px; line-height: 35px; } .titre { top: 75%; font-size: 22px; line-height: 26px; } } footer { .contact { .savoir, .site, .coord { font-size: 16px; line-height:18px; } } } .top .number, .chapitre .number { margin-top: -100px; font-size: 150px; line-height: 120px; } .top h1, .chapitre h1 { font-size: 45px; width: 90%; line-height: 40px; } .top .intro, .chapitre .intro { font-size: 24px; } .multiple ul { margin-top: 10px; li { font-size: 22px; line-height: 18px; padding: 0 20px; } } .multiple ul li:first-child { padding: 0 20px 0 0; } .diapo { width: 50vw; height: 53vw; } } @media only screen and (max-width:767px) { .phone { display:block; } .desktop { display:none; } header { .title { display:none; } .logo { width: 25%; float: left; padding: 30px 0 0 10px; } } .hometitle h1 { font-size: 40px; line-height: 40px; } ul#homemenu li { .number { top: 66%; font-size: 80px; line-height: 25px; } .titre { top: 70%; font-size: 11px; line-height: 13px; letter-spacing:0; } } #menu { padding: 90px 0 0 0; ul li { width:100%; float:none; height:20%; .titre { font-size:14px; line-height:14px; letter-spacing:0; } .number { display:none; } .separator { display:none; } ul li { font-size: 14px; line-height:18px; padding: 0 0 0 5%; margin-top: 0; } } } #slider .legende, .full .legende { display:none; } .legende, .verticale .legende { font-size: 11px; line-height: 13px; } .top h1, .chapitre h1 { font-size: 30px; line-height: 25px; } .top .intro, .chapitre .intro { font-size: 18px; } .chapo h2 { font-size: 33px; line-height: 33px; } .chapo p { font-size: 15px; } .part-title { font-size: 24px; line-height: 24px; padding: 2px 7px; } p, ul { font-size: 12px; line-height: 20px; } .reponse { font-size: 13px; line-height: 15px; } .part-menu { width: 90%; padding:20px 5%; } .multiple ul li { display: block; border-right: 0; padding: 0 0 10px 0 !important; font-size: 20px; line-height: 18px; } ul#points { left: 2px; } .interview .portrait { display:block; float:none; } .diapo { width: 100vw; height: 106vw; display: block; } } @media only screen and (max-width:767px) and (orientation: portrait) { #slider img { width: 200%; height: auto; } } @media only screen and (orientation: portrait) { .multiple { height: 30vh; } }