/** * Forms */ /* All elements */ .field { margin-bottom: 30px; position:relative; } .field label { display: inline-block; margin:0; } [data-validate-for] { display:none; font-size:10px; line-height:10px; position:absolute; right:0; bottom:-1.2em; } [data-validate-for].visible { display:block; } /* Textfields & textareas */ .field.textfield input, .field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; } /* Checkbox & Radio */ .field.checkbox label, .field.radio label { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; position:relative; margin-bottom:10px; cursor: pointer; } .field.checkbox input, .field.radio input, .field.checkbox span:before, .field.radio span:before { width:20px; height:20px; margin-right:10px; } .field.checkbox span:before, .field.radio span:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); border:1px solid #ccc; background:#fff; } .field.checkbox span:after, .field.radio span:after { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width: 14px; height:14px; background:#ccc; opacity:0; transition:all 0.5s ease 0s; } .field.checkbox input:checked+span:after, .field.radio input:checked+span:after { opacity: 1; } .field.checkbox span:before, .field.checkbox span:after { border-radius: 0; } .field.radio span:before, .field.radio span:after { border-radius: 50%; } .field.radio.inline, .field.checkbox.inline { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; } .field.radio.inline label, .field.checkbox.inline label { margin-right:15px; margin-bottom:0; } /* Select */ .field.select select { display:block; width:100%; padding:10px; border:1px solid #ccc; } /* Captcha */ .field.captcha { display:flex; flex-direction:row; justify-content:center; } /** * Navigation **/ /* Frontend editor */ .ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; } .ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;} .ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); } .ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); } /** * Legal **/ .legal { margin:60px 0; } .legal h1 { font-size:4rem; margin:0 0 1em 0; } .legal h2 { font-size:3rem; margin:1em 0; } .legal h3 { font-size:2.5rem; margin:1em 0; } .legal h4 { font-size:2rem; margin:1em 0; } .legal h5 { font-size:1.5rem; margin:1em 0; } .legal table { width:100%; margin:2em 0; } .legal table th, .legal table td { padding:1em; border:1px solid rgba(0,0,0,0.25); } :root{ --containerWidth: 1320px; } /** * -------------------------------------- General Elements -------------------------------------- Bleu foncé : #005581 Orange : #FAB400 Jaune : #FFDE38 light : 300 regular : 400 semibold : 600 // normal bold : 700 // bold extrabold : 900 **/ html { font-size:10px; } body { font-size:1.6rem; font-family: 'OpenSans'; font-weight: 400; color: #005581; line-height: 1.8em; } :focus, button:focus { outline:none; } /* Images */ img, svg { max-width:100%; height:auto; } img[data-sizes] { display:block; width:100%; } /* Paragraphs */ p { margin-bottom:1em; } p:last-child { margin-bottom:0; } /* Link */ #main a{ color:#FA1B5C; transition: color 0.2s linear; } #main a:hover { color: #FAB400; } /* Bold */ b, strong{ font-weight: 900; } /* Lists */ ul, ol { margin-bottom:0; padding:0; list-style:none; } /* Titles */ h1{ font-family: 'Omnes', sans-serif; font-style: italic; font-size: 3rem; line-height: 1em; color: #005581; } h2, h3, h4, h5, .h2, .h3{ margin: 1em 0 0.5em; line-height: 1em; font-family: 'Omnes', sans-serif; } h2, .h2{ font-family: 'OmnesCond'; font-style: italic; font-size: 5rem; min-height: 1em; } h2:after, .h2:after{ content: ""; display: block; width: 65px; height: 2px; background-color: #F8B623; margin-top: 0.5em; margin-left: -1rem; } h2 i, .h2 i, h2 em, .h2 em{ color: #FAB400; } h3{ font-family: 'OmnesCond'; font-style: italic; font-size: 3.8rem; margin-bottom: 0.2em; } h3:after{ content: ""; display: block; width: 65px; height: 2px; background-color: #F8B623; margin-top: 0.2em; } h4{ font-family: 'OmnesCond'; font-style: italic; font-size: 3rem; margin-bottom: 1em; } .emphase{ font-size:1.7rem; line-height: 1.8em; font-weight: 600; } /** * Components **/ .container-fluid{} .field label{ font-family: 'OmnesCond'; font-style: italic; font-size: 2rem; margin-left: 2rem; } .field.textfield input, .field.textarea textarea{ border: 2px solid #085480; border-radius: 2.5rem; } [data-validate-for]{ font-size: 1.3rem; color: #900; } .field.captcha [data-validate-for]{ left: 0; text-align: center; } .btn{ font-family: 'Omnes', sans-serif; font-style: italic; display: block; padding: 0.5rem 2rem; font-size: 1.6rem; background-color: #085480; border-radius: 2rem; color: #fff; white-space: nowrap; border: 0; } /* Alert */ .alert { position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: .25rem; } .alert .close { display:none; } .alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; } .alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; } .alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .alert-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } .alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .ico{ display: flex; align-items: center; } .ico:before{ content: ''; width: 3rem; min-width: 3rem; height: 3rem; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; } .ico#fb:before{ background-image: url(../themes/cristallys/assets/img/ico-fb.svg); } .ico#gmap:before{ background-image: url(../themes/cristallys/assets/img/ico-location.svg); height: 3.5rem; } .ico#tel:before{ background-image: url(../themes/cristallys/assets/img/ico-phone.svg); } .ico#mail:before{ background-image: url(../themes/cristallys/assets/img/ico-mail.svg); } .ico.dl:before{ background-image: url(../themes/cristallys/assets/img/ico-upload.svg); width: 2rem; height: 2rem; margin-right: 0.5rem; } #main a.dl{ color: #0f5480; margin: 0.5em 0 0.5em -0.3em; line-height: 1em; } /** * Effets graphiques **/ .vagues{ position: relative; display: block; width: 100%; height: 7vw; background-image: url(../themes/cristallys/assets/img/vague-z3.svg); background-repeat: repeat-x; background-position: 50% 100%; background-size: cover; } .vagues:before, .vagues:after{ content: ""; position: absolute; width: 100%; height: 5vw; left: 0; bottom: 0px; background-image: url(../themes/cristallys/assets/img/vague-z2.svg); background-repeat: repeat-x; background-position: 50% 100%; background-size: cover; opacity: 0.4; } .vagues:after{ background-image: url(../themes/cristallys/assets/img/vague-z1.svg); background-position: 0 0; opacity: 0.6; } .hfont{ font-family: 'Omnes'; } .lazy{ opacity: 0; transition: opacity 0.7s ease-out; } .lazyloaded{ opacity: 1; } .logo{ margin-top: 0; height: 95%; padding-top: 5%; margin-bottom: 0; } .logo img{ max-height: 120%; width: auto; max-width: 350px; } /* *-------------------------------------- LAYOUT -------------------------------------- */ .casper{ display: none; } #page { position: relative; width:100%; overflow:hidden; } #header{ position: fixed; z-index: 10; height: 15rem; width: 100%; background: rgba(255,255,255, 0.8); background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); transition: height 0.8s linear; } #header.not-top{ height: 9rem; } #header > div, #header > div > div, #header > div > div > div{ max-height: 100%; height: 100%; } #header .container-fluid{ max-width: 1320px; padding-left: 50px; padding-right: 50px; } #header .container-fluid > .row{ align-items: center; } #header .logo img{ margin-top: 1.5rem; } #nav{ display: flex; align-items: center; justify-content: flex-end; } #menu ul{ display: flex; align-items: center; justify-content: flex-end; height: 80%; } #menu li{ margin: 0 5px; } #menu .menu-item{ font-family: 'Omnes', sans-serif; font-style: italic; display: block; padding: 5px 10px; font-size: 1.6rem; background-color: #085480; border-radius: 2rem; color: #fff; white-space: nowrap; transition: all 0.2s ease-out; } #menu .menu-item:hover{ color: #FAB400; text-decoration: none; } #menu .menu-item.active{ background-color: #5bc2f0; cursor: default; } body.open #menu ul{ position: fixed; } body.open #menu li{ } body.open #menu .menu-item{ } #horaires{ position: relative; margin-top: 6rem; } #horaires-btn{ padding: 0; min-width: 35px; height: 35px; overflow: hidden; cursor: pointer; border:0; margin-left: 2rem; z-index: 1; background-color: #fff; transition: all 0.2s ease-out; border-radius: 50px; } #horaires-btn img{ transition: all 0.2s ease-out; } #horaires-btn:hover{ background-color: #FAB400; } #horaires .horaires-bloc{ position: absolute; width: 0; max-width: 85vw; right: -2em; top: 0; opacity: 0; transition: all 0.7s ease-out; overflow: hidden; } #horaires .horaires-bloc .pointer{ content: ''; position: absolute; top: -5px; right: 2em; width: 40px; height: 22px; background-size: 100%; overflow: hidden; z-index: 1; } #horaires .horaires-bloc-inner{ overflow: hidden; margin-top: 15px; background-color: rgb(255 255 255 / 90%); box-shadow: 0px 3px 8px rgb(0 0 0 / 15%); padding: 30px; border-radius: 1.5rem; font-size: 1.6rem; position: relative; width: 850px; float: right; margin: 17px 8px 8px; } #horaires .horaires-bloc-inner2{ max-height: 80vh; overflow-y: scroll; width: calc(100% + 50px); overflow-x: hidden; padding-right: 40px; } .horaires-h2{ text-transform: uppercase; font-weight: bold; font-size: 2rem; margin-bottom: 0.5em } .horaires-h3{ font-size: 1.6rem; } .horaires-h3 em{ font-style: normal; } .horaires-list li{ font-size: 1.4rem; line-height: 1em; padding: 5px 12px; background-color: rgb(255 236 152 / 75%); border-radius: 1em; margin: 5px 0; overflow: hidden; } .horaires-list li:nth-child(2n){ background-color: rgb(184 230 249 / 75%); } .horaires-list li strong{ font-weight: 600; width: 75px; float: left; height: 1.1em; } .horaires-list .ferie li strong { width: auto; white-space: nowrap; float: none; } .horaires-list li i{ white-space: nowrap; } .horaires-time{ font-size: 1.3rem; } body.horaires-open #horaires .horaires-bloc{ width: 900px; opacity: 1; } #hamburger{ display: none; padding-bottom: 10px; } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{ background-color: #085480; } #main{} #main header{ position: relative; background-size: cover; background-position: 50% 50%; padding-top: 15rem; display: flex; flex-direction: column; justify-content: flex-end; min-height: 40vw; } #main header .vagues{ bottom: -2px; } #main header h2{ font-size: 5rem; font-style: italic; margin: 0 0 1em; line-height: 1em; } #main header h2:after{ content: none; } #main header h2 i{ color: #fff; } #main header + section{ position: relative; top: -1px; } #main header + section + section{ position: relative; top: -2px; } #footer{ position: relative; background-size: cover; background-repeat: no-repeat; background-position: 50% 60%; color: #fff; font-size: 1.8rem; } #footer .vagues{ transform: rotate(180deg); top: -2px; } #footer .vagues:before, #footer .vagues:after{ background-position: 50% 0; } #footer .container{ position: relative; } #footer .data{ align-items: flex-end; } #footer .col-lg-3 { padding-top: 10px; padding-bottom: 10px; padding-left: 35px; position: relative; } #footer .col-lg-3:before{ content: ''; position: absolute; width: 3px; left: 15px; top: 0; border-radius: 2px; height: 100%; background-color: #fff; } #footer-socials { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; align-items: flex-end; } #footer .hfont{ font-style: italic; font-size: 1.8rem; } #footer .logo{ margin-bottom: 100px; } #footer .tel a{ display: inline; } #footer a{ color: inherit; } #footer p, #footer li{ line-height: 1em; margin-bottom: 1em; } #footer-coords{ font-size: 1.5rem; padding-bottom: 0.5em; } #footer-coords p{ margin-bottom: 0.5em; } #footer-coords strong{ font-family: 'Omnes'; font-style: italic; font-size: 1.8rem; } #footer .ico{ white-space: nowrap; width: 3rem; overflow: hidden; margin: 0.4em 0.6em; } #footer-palmes{ position: absolute; top: -7vw; right: 0; width: 20vw; height: 20vw; background: url(../themes/cristallys/assets/img/palmes.png) no-repeat 50% 50%; background-size: 100%; } .mentions-legales{ font-size: 1.2rem; line-height: 1.2em; margin-bottom: 1.5em; } .mentions-legales a{ opacity: 0.5; display: block; } .mentions-legales a:hover{ opacity: 0.8; } /* *-------------------------------------- PAGES -------------------------------------- */ /* Accueil */ #accueil{ } #accueil #main header{ background-color: #6ddbfe; background-position: 50% 70%; } #home-complexe{ position: relative; background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; padding: 5vw 0 20vw; } #home-complexe:before{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background: linear-gradient(180deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); } #home-complexe:after{ content: ''; position: absolute; z-index: 1; width: 100%; height: 12vw; left: 0; bottom: -5px; background: url(../themes/cristallys/assets/img/vague-btm.svg) no-repeat 50% 100%; background-size: 100% auto; } #home-complexe .complex-float{ position: relative; background-repeat: no-repeat; background-size: contain; background-position: 100% 100%; } #home-complexe .container{ position: relative; } #home-complexe-shape { margin-left: 16.666666%; } #bouee{ position: absolute; z-index: 1; width: 40%; padding-top: 40%; background: url(../themes/cristallys/assets/img/bouee_rose_ombre.png) no-repeat 50% 50%; background-size: 100%; } #bouee:before{ content:''; top: 0; position: absolute; width: 100%; height: 100%; background: url(../themes/cristallys/assets/img/bouee_rose.png) no-repeat 50% 50%; background-size: 100%; } #home-activites{ position: relative; z-index: 1; background-color: #fff; } #home-activites h2{ margin-top: 0; margin-bottom: 5rem; } #home-activites h2:after{ content: none; } .activite{ margin-bottom: 15px; } .activite .h2{ width: 100%; margin-top: 0.5em; } .activite .col-md-6{ display: flex; align-items: stretch; padding-left: 7px; padding-right: 7px; } .activite .text, .activite .img{ background-color: #F4F3F2; border-radius: 3rem; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: stretch; width: 100%; height: 100%; position: relative; } .activite .img img{ min-height: 100%; min-width: 100%; width: auto; position: absolute; object-fit: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); } .activite .text{ padding: 4rem 5vw 6rem; } .activite.odd .col-md-6:first-child{ order:2; } .activite.odd .col-md-6:last-child{ order:1; } a#to-activites{ margin: auto; display: inline-block; padding: 15px 20px 15px; text-align: center; border-radius: 3rem; color: #fff; text-decoration: none; line-height: 1.2em; float: right; margin-right: -10px; } a#to-activites:hover{ background-color: #F8B623; color: #fff; } #home-evenements{ clear: both; background-color: #6cd7f7; } #home-evenements:before{ content: ''; position: absolute; margin-top:-1px; width: 100%; height: 20rem; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); } #home-evenements:after { content:''; display: block; width: 100%; height: 10vw; background: url(../themes/cristallys/assets/img/accueil-evt-btm.svg) no-repeat 50% 110%; background-size: 100% auto; } .bloc-jaune{ background-color: rgb(248 182 35 / 90%); border-radius: 6rem; padding: 3rem; margin-top: 5rem; position: relative; overflow: hidden; margin-bottom: 6rem; } .bloc-jaune:before{ content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; left: 0; top: 0; background-color: #f8b623; mix-blend-mode: color; } .live{ position: relative; z-index: 1; background-color: #fff; border-radius: 3rem; padding: 2rem 5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .live h3{ margin: 0; } .live h3:after{ content: none; } .temperature{ display: flex; justify-content: flex-end; } .temp{ display: flex; align-items: flex-end; margin: 0 1rem; } .temp-label{ display: block; text-indent: 10rem; background: url(../themes/cristallys/assets/img/temperature-ext.svg) no-repeat 50% 50%; background-size: auto 100%; height: 6rem;width: 6rem; white-space: nowrap; overflow: hidden; } .temp-value{ font-family: 'OmnesCond'; font-size: 4rem; margin-bottom: 1rem; margin-left: 0.5rem; } .temp.eau .temp-label{ background: url(../themes/cristallys/assets/img/temperature-eau.svg) no-repeat 50% 50%; } .actu-events-block{ position: relative: z-index: 1; } .actu-events-block .col-md-6 { padding: 0 6rem; } .actu-events-block h3{ color: #fff; } .actu-events-block h3:after{ content: ''; display: block; width: 65px; height: 2px; background-color: #FFF; margin-top: 0.5em; } .actu h4{ font-family: inherit; font-style: normal; font-size: 1.8rem; margin-bottom: 0.2em; } .actu .desc{ line-height: 1.2em; } .actu .data{ font-weight: 600; line-height: 1.2em; font-style: italic; } .actu .data p{ display: inline; margin-bottom: 0.2em; } #home-fb{ position: relative; z-index: 0; } /* Piscine */ #piscine{} #equipements{ text-align: center; } #equipements .h2:after{ left: 50%; margin-left: auto; margin-right: auto; } .equipements-list{ position: relative; padding-left: 6rem; padding-right: 5rem; } .equipement-item{ padding: 3rem 7px; } .equipement-item img{ width: 100%; max-width: 460px; border-radius: 3rem; } .equipement-item figcaption h4{ font-size: 3.8rem; margin-bottom: 0.9em; font-style: italic; font-family: 'OmnesCond'; text-transform: capitalize; } .equipement-item figcaption p{ padding: 0 2rem; font-weight: 600; } #equipements .swiper-button-prev{ left: 0rem; top: calc( var(--containerWidth) /6 ); } #equipements .swiper-button-next{ right: 0rem; top: calc( var(--containerWidth) /6 ); } #slider{} #slider .swiper-container{ max-height: 90vh; } #slider .swiper-slide figure{ height: 62.5vw; max-height: 90vh; margin: 0; position: relative; } #slider .swiper-slide figure img{ position: relative; top: 50%; transform: translateY(-50%); } #slider .swiper-slide figcaption{ font-family: Omnes; position: absolute; bottom: 0; } .swiper-mask{ position: absolute; z-index: 9; width: 100%; height: 101%; left: 0; top: -0.5%; pointer-events: none; } .swiper-mask img{ width: 100%; height: 100%; } .swiper-buttons{ position: absolute; height: 100%; top: 0; left: 0; right: 0; } .swiper-button-next, .swiper-button-prev{ width: 35px; height: 35px; } .swiper-button-next:after, .swiper-button-prev:after{ font-size: 1.5rem; font-weight: bold; color: #fff; background-color: #085480; width: 100%; height: 100%; padding-right: 2px; display: flex; align-items: center; justify-content: center; border-radius: 30px; border: 4px solid #FFF; box-shadow: 0px 0px 0px 4px #085480; transition: all 0.2s ease-out; } .swiper-button-next:after{ padding-right: 0; padding-left: 2px; } .swiper-button-next:hover:after, .swiper-button-prev:hover:after{ color: #FAB400; border-color: #fab400; } /* Activités aquatiques */ #activites{} #intro{ overflow: hidden; } #intro .bg{ background-repeat: no-repeat; background-size: 100% auto; background-position: 50% 100%; padding-bottom: 18vw; } #intro .row{ align-items: center; } #intro .mask{ background-size: cover; position: relative; float: right; width: 100%; margin-right: 16.66666%; background-position: 50% 50%; } #intro .mask:before{ content: ''; display: block; padding-top: 100%; height:0; } #intro .mask:after{ content: ''; position: absolute; width: 101%; height: 101%; left: 0; top: 0; background: url(../themes/cristallys/assets/img/activites-mask.svg) no-repeat 0 0; background-size: contain; box-shadow: 0 0 0px 5px #fff; margin-left: -0.5%; margin-top: -0.5%; } #intro .mask.reverse{ background-position: 20% 50%; margin-right: 0; width: 120%; float: none; } #intro .mask.reverse:after{ transform: rotate(90deg); } /* ballon ombre */ #activites #intro:before{ content: ''; position: absolute; z-index: 1; width: 17vw; bottom: 5vw; left: 22.5vw; height: 8vw; background: url(../themes/cristallys/assets/img/montage_ballon_ombre.png) no-repeat 50% 100%; background-size: 100%; } #activites #intro.animate:before{ -webkit-animation: bounce-in-fwd 1.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 1s; animation: bounce-in-fwd 1.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 1s; } /* ballon */ #activites #intro .ballon{ position: absolute; z-index: 1; width: 15vw; height: 15vw; bottom: 8vw; left: 23vw; background: url(../themes/cristallys/assets/img/montage_ballon.png) no-repeat 50% 50%; background-size: 100%; -webkit-transform: translateY(-100vh); transform: translateY(-100vh); } #activites #intro.animate .ballon{ -webkit-animation: 1.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 1s 1 normal both running bounce-in-top; animation: 1.5s cubic-bezier(0.600, 0.040, 0.980, 0.335) 1s 1 normal both running bounce-in-top; } #activites-list{ min-height: 30vw; background: linear-gradient(180deg, rgba(244,243,242,1) 20vw, rgba(255,255,255,1) 70%); position: relative; margin-top: -1px; } #activites-list .container-fluid{ max-width: 1920px; } .sommaire{ margin: 0 15px 5rem; position: relative; top: -15vw; } .activite-anchor{ padding: 7px; } .activite-anchor a{ display: block; border-radius: 30px; overflow: hidden; position: relative; } .activite-anchor a figure{ margin: 0; background-color: rgb(0 85 129 / 80%); background-blend-mode: multiply; background-size: cover; /*transition: all 1s ease-out;*/ } .activite-anchor a img{ opacity: 0; width: 100%; } .activite-anchor a figcaption{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 3rem 2rem; color: #FAB400; font-family: 'OmnesCond'; font-style: italic; font-size: 2.5vw; line-height: 1.2em; transition: all 0.7s ease-out; } .activite-anchor a:hover figure{ background-color: rgb(0 85 129 / 0%); } .activite-anchor a:hover figcaption{ color: #FFF; opacity: 0.8; height: 30%; } .activite-detail{ background-color: rgba(255 255 255 / 0.97); border-radius: 3rem; margin-bottom: 1em; align-items: stretch; padding: 5% 3rem; max-width: 1600px; width: 90%; max-height: 90%; } .activite-detail h3{ margin-top: 0; } .activite-detail p{ margin-bottom: 0.2em; } .activite-detail .public{ text-transform: uppercase; } .activite-detail .public, .activite-detail .duree, .activite-detail .tarifs{ font-weight: 900; font-style: italic; line-height: 1.2em; } .activite-detail .description{ margin: 1em 0 3rem; } .activite-detail .detente, .activite-detail .savoir-nager{ font-style: italic; line-height: 1.2em; margin-top: 1em; color: #888; } .activite-detail .tarifs{ font-family: 'OmnesCond'; text-align: right; font-size: 1.8rem; } .activite-detail .tarifs p{ margin: 0.5em 0; } .activite-detail .tarifs span{ margin-left: 0.2em; } .activite-detail .horaires-list{ background-color: #FFD200; padding: 2rem; border-radius: 2rem; margin: 0; } .activite-detail .horaires-list ul{ background-color: #fff; padding: 5px 10px; border-radius: 10px; } .activite-detail h4{ font-family: 'OmnesCond'; font-size: 3.5rem; text-align: center; margin: 0 0 0.2em; text-transform: uppercase; } .activite-detail .img{ overflow: hidden; height: auto; position: relative; display: flex; width: 100%; } .activite-detail .img img{ object-fit: cover; width: 100%; height: 100%; max-width: none; position: absolute; left: 50%; transform: translateX(-50%); } .fancybox-slide--html .fancybox-close-small{ padding: 5px; right: 5px; top: 5px; } .coords{ display: flex; flex-wrap: wrap; justify-content: space-between; font-family: 'OmnesCond'; font-size: 2rem; color: #105581; margin: 1em 1rem 0; } .coords .ico{ margin-bottom: 0.5em; } .coords .ico a{ text-decoration: none; color: inherit; margin-left: 0.3em; transition: all 0.2s linear; white-space: nowrap; } .coords .ico a:hover{ font-size: 2.5rem; } #activites-no-details{ height: 43vw; } #activites-no-details > span{ height: 58vw; position: relative; top: -15vw; display: block; background-position: 50% 100%; background-size: 100% auto; position: relative; } #activites-no-details > span:before{ content: ''; position: absolute; width: 100%; height: 101%; left: 0; top: 0; background: url(../themes/cristallys/assets/img/activites-mask-2.svg) no-repeat 0 0; background-size: contain; margin-top: -0.5%; } #bien-etre{} #bien-etre #intro{ background-repeat: no-repeat; background-position: 50% 100%; background-size: contain; background-size: 100%; } #bien-etre-activites{ padding: 10rem 0 5rem; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 5%, rgba(184,230,249,1) 50%, rgba(255,255,255,1) 95%); } #bien-etre .petales{ display: block; height: 30vw; position: relative; } #bien-etre .petales i{ position: absolute; width: 10vw; height: 10vw; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; top: 18vw; left: 0; } #bien-etre .petales .p1{ transform: rotate(-102deg); background-image: url(../themes/cristallys/assets/img/petale1.png); } #bien-etre .petales .p2{ transform: rotate(-90deg); background-image: url(../themes/cristallys/assets/img/petale2.png); } #bien-etre .petales .p3{ transform: rotate(-85deg); background-image: url(../themes/cristallys/assets/img/petale3.png); } #bien-etre #intro.animate .petales i{ width: 12vw; height: 12vw; transition: all 1.2s ease-out; } #bien-etre #intro.animate .petales .p1{ left: 65vw; top: -13vw; transform: rotate(0); transition-delay: 0s; } #bien-etre #intro.animate .petales .p2{ left: 50vw; top: 0vw; transform: rotate(0); transition-delay: 0.3s; } #bien-etre #intro.animate .petales .p3{ left: 45vw; top: 15vw; transform: rotate(0); transition-delay: 0.5s; } #tarifs-entrees{ position: relative; background-repeat: no-repeat; background-size: 100%; background-position: 50% 100%; } #tarifs-entrees:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20vw; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); z-index: 0; } #tarifs-entrees .container{ position: relative; z-index: 1; } #tarifs-entrees .table{ background-color: rgb(184 230 249 / 80%); border-radius: 3rem; padding: 4rem 5vw; } #tarifs-entrees table{ position: relative; table-layout: fixed; width: 100%; font-family: 'OmnesCond'; font-weight: 600; text-align: center; border-collapse: separate; border-spacing: 0px 1.5em; } #tarifs-entrees table thead th:before{ content: ''; display: block; height: calc(100% - 2rem); border-left: 2px solid #085480; position: absolute; } #tarifs-entrees table thead th:first-child:before{ content: none; } #tarifs-entrees table thead th{ padding-bottom: 3rem; } #tarifs-entrees table thead th:first-child{ border-left: 0; } #tarifs-entrees table tbody th{ text-align: left; padding-left: 1em; } #tarifs-entrees table tbody td{ background-color: #F4F3F2; font-weight: 400;} #tarifs-entrees table tbody th{ background-color: #F4F3F2; border-radius: 2rem 0 0 2rem; } #tarifs-entrees table tbody td:last-child{ border-radius: 0 2rem 2rem 0; } #tarifs-entrees table tbody tr:nth-child(2n+1) td{ background-color: #FFF9E0; } #tarifs-entrees table tbody tr:nth-child(2n+1) th{ background-color: #FFF9E0; } #tarifs-activites{ background-color: #005581; color: #fff; } #tarifs-activites .container{ padding-top: 5rem; padding-left: 5rem; } #tarifs-activites .graph{ height: 51vw; background: url(../themes/cristallys/assets/img/image_bas_tarifs.jpg) no-repeat 50% 100%; background-size: cover; position: relative; } #tarifs-activites .graph:before{ content: ''; position: absolute; left: 0; top: -2px; width: 100%; height: 100%; background: url(../themes/cristallys/assets/img/vagues-mask-bleu.svg) no-repeat 0 0; background-size: 100% auto; } #tarifs-activites dl{ display: flex; flex-wrap: wrap; margin-bottom: 5rem; } a.tarif-activite{ width: 50%; display: flex; align-items: center; font-family: 'OmnesCond'; font-style: italic; margin-bottom: 2rem; font-size: 1.8rem; color: #fff; position: relative; } a.tarif-activite:before{ content: ''; display: block; width: 4.5rem; min-height: 5rem; margin: 1rem 3rem; mask: url(../themes/cristallys/assets/img/calendar.svg) 50% 50% no-repeat; padding: 1rem;-webkit-mask: url(../themes/cristallys/assets/img/calendar.svg) 50% 50% no-repeat; padding: 1rem; background-color: #fff; transition: all 0.5s ease-out; } a.tarif-activite:after{ content: ''; display: block; width: 7.5rem; height: 2px; background-color: #fff; position: absolute; bottom: -8px; left: 1.5rem; } a.tarif-activite:hover{ text-decoration: none; color: inherit; } a.tarif-activite:hover:before{ background-color: #FAB400; } a.tarif-activite dt{ color: #FAB400; } a.tarif-activite dd{ color: #FFF; } #contact-form{ } #contact-form form{ margin-top: 8rem; } #contact-form .btn{ margin: auto; } #contact-form .graph{ float: right; position: relative; width: 100%; background-repeat: no-repeat; background-size: auto 99%; background-position: 39% 5px; margin-top: 8rem; max-width: 350px; } #contact-form .graph:before{ content: ''; display: block; width: 100%; height: 0%; padding-top:245%; } #contact-form .graph:after{ content: ''; position: absolute; width: calc(100% + 2px); height: 100%; left: 0; top: 0; background: url(../themes/cristallys/assets/img/mask-blanc-8.svg) no-repeat 0 0; background-size: cover; margin-left: -2px; } #gbigmap{ position: relative; background-color: #bcdbec; } #gbigmap:before, #gbigmap:after{ content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: 100% auto; background-repeat: no-repeat; pointer-events: none; z-index: 1; } #gbigmap:before{ background-position: 50% 0; background-image: url(../themes/cristallys/assets/img/vagues-mask-blanc-top.svg); position: relative; height: 40vw; display: block; } #gbigmap:after{ background-position: 50% 100%; background-image: url(../themes/cristallys/assets/img/vagues-mask-blanc-btm.svg); } #gbigmap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; mix-blend-mode: multiply; } /* ---------------------------------------------- * Generated by Animista on 2021-3-5 16:12:16 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation vagues * ---------------------------------------- */ .vagues{ -webkit-animation: 7s ease-in-out 0s infinite alternate vagues1; animation: 7s ease-in-out 0s infinite alternate vagues1; } .vagues:before{ -webkit-animation: 9s ease-in-out 0s infinite alternate vagues3; animation: 9s ease-in-out 0s infinite alternate vagues3; } .vagues:after{ -webkit-animation: 10s ease-in-out 0s infinite alternate vagues2; animation: 10s ease-in-out 0s infinite alternate vagues2; } @-webkit-keyframes vagues1 { from { background-position: -20vw 100%; background-size: auto 90%; } to { background-position: 20vw 100%; background-size: auto 70%; } } @keyframes vagues1 { from { background-position: -20vw 100%; background-size: auto 90%; } to { background-position: 20vw 100%; background-size: auto 70%; } } @-webkit-keyframes vagues2 { from { background-position: -20vw 0; background-size: auto 95%; } to { background-position: 20vw 0; background-size: auto 100%; } } @keyframes vagues2 { from { background-position: -20vw 0; background-size: auto 95%; } to { background-position: 20vw 0; background-size: auto 100%; } } @-webkit-keyframes vagues3 { from { background-position: -20vw 100%; background-size: auto 90%; } to { background-position: 20vw 100%; background-size: auto 100%; } } @keyframes vagues3 { from { background-position: -20vw 100%; background-size: auto 90%; } to { background-position: 20vw 100%; background-size: auto 100%; } } /** * ---------------------------------------- * animation footer * ---------------------------------------- */ #footer{ -webkit-animation: 25s ease-out 0s infinite alternate fond_piscine; animation: 25s ease-out 0s infinite alternate fond_piscine; } @-webkit-keyframes fond_piscine { 0% { background-size: 100%; } 40% { background-size: 250%; } 100% { background-size: 100%; } } @keyframes fond_piscine { 0% { background-size: 100%; } 40% { background-size: 250%; } 100% { background-size: 100%; } } #footer-palmes{ -webkit-animation: 2s ease-in-out 0s infinite alternate palmes; animation: 2s ease-in-out 0s infinite alternate palmes; } @-webkit-keyframes palmes { 0% { transform: skew(-5deg, -2deg) scale(1, 0.97); } 100% { transform: skew(0deg, 0deg) scale(1, 1); } } @keyframes palmes { 0% { transform: skew(-5deg, -2deg) scale(1, 0.97); } 100% { transform: skew(0deg, 0deg) scale(1, 1); } } /** * ---------------------------------------- * animation bouée accueil * ---------------------------------------- */ .animate #bouee{ -webkit-animation: 5s linear 1s 1 normal both running bouee; animation: 5s linear 1s 1 normal both running bouee; } @-webkit-keyframes bouee { 0% { transform: translate(0%, -0%) rotate(-0deg); } 20% { transform: translate(30%, -12%) rotate(-20deg); } 40% { transform: translate(60%, -20%) rotate(-40deg); } 60% { transform: translate(90%, -38%) rotate(-60deg); } 80% { transform: translate(105%, -52%) rotate(-80deg); } 100% { transform: translate(120%, -60%) rotate(-100deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bouee { 0% { transform: translate(0%, -0%) rotate(-0deg); } 20% { transform: translate(30%, -12%) rotate(-20deg); } 40% { transform: translate(60%, -20%) rotate(-40deg); } 60% { transform: translate(90%, -38%) rotate(-60deg); } 80% { transform: translate(105%, -52%) rotate(-80deg); } 100% { transform: translate(120%, -60%) rotate(-100deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-top * ---------------------------------------- */ @-webkit-keyframes bounce-in-top { 0% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; /*opacity: 0;*/ } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; /*opacity: 1;*/ } 55% { -webkit-transform: translateY(-13vh); transform: translateY(-13vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-5.6vh); transform: translateY(-5.6vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-1.6vh); transform: translateY(-1.6vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-top { 0% { -webkit-transform: translateY(-100vh); transform: translateY(-100vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; /*opacity: 0;*/ } 38% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; /*opacity: 1;*/ } 55% { -webkit-transform: translateY(-13vh); transform: translateY(-13vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: translateY(-5.6vh); transform: translateY(-5.6vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 90% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: translateY(-1.6vh); transform: translateY(-1.6vh); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /** * ---------------------------------------- * animation bounce-in-fwd * ---------------------------------------- */ @-webkit-keyframes bounce-in-fwd { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes bounce-in-fwd { 0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } 55% { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 81% { -webkit-transform: scale(0.84); transform: scale(0.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 95% { -webkit-transform: scale(0.95); transform: scale(0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } body.admin:after{ content:"xl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:#EEE; z-index: 1000; } /** * Wide **/ @media (min-width: 1400px) { body.admin:after{ content:"xxl"; background-color: pink; } .container { max-width: 1320px; } .extra-container{ width: calc(100% + 15px + (100vw - 1320px)/2); } } /** * Extra large **/ @media (max-width: 1399px) { :root{ --containerWidth: 1140px; } body.admin:after{ content:"xl"; background-color: red; } .extra-container{ width: calc(100% + 15px + (100vw - 1140px)/2); } } /** * Large devices **/ @media (max-width: 1199px) { :root{ --containerWidth: 960px; } body.admin:after{ content:"lg"; background-color: orange; } .extra-container{ width: calc(100% + 15px + (100vw - 960px)/2); } } /** * Medium devices **/ @media (max-width: 991px) { :root{ --containerWidth: 720px; } body.admin:after{ content:"md"; background-color: green; } .extra-container{ width: calc(100% + 15px + (100vw - 720px)/2); } .casper-md{ display: none !important; } #header{ height: 9rem; } #hamburger{ display: block; } #menu ul{ display: flex; position: fixed; width: 100vw; left: 0; top: 90px; z-index: 10; height: 0; background-color: rgb(255 255 255 / 80%); padding: 0 50px; flex-direction: column; justify-content: center; transition: all 0.7s ease-in; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 60px, rgba(255,255,255,1) 100%); opacity: 0; } #menu li{ width: 100%; max-width: 240px; text-align: center; margin: 2vh auto; } #menu .menu-item{ padding: 5px; font-size: 2.5rem; border-radius: 4rem;} body.open #menu ul{ height: calc(100vh - 90px); opacity: 1; } #horaires-btn{ margin-left: 1rem; } #horaires .horaires-bloc-inner{ max-width: calc(100% - 15px); } #footer-menu{ display: none; } #accueil #main header { background-position: 0% 70%; } #home-complexe-shape{ width: 130%; max-width: none; } #activites{} #intro .mask{ min-width: 55vw; margin-right: 0; } .equipement-item { max-width: 40vw; margin: auto; } #contact .graph {display: none;} } /** * Small devices **/ @media (max-width: 767px) { :root{ --containerWidth: 540px; } body.admin:after{ content:"sm"; background-color: blue; } html { font-size: 9px; } .extra-container{ width: calc(100% + 15px + (100vw - 540px)/2); } .casper-sm{ display: none !important; } #header .container-fluid{ padding-left: 15px; padding-right: 15px; } .horaires-h3 { margin-top: 2rem; } #footer .col-lg-3{ margin-top: 10px; } #home-complexe .row { padding-bottom: 14vw; } #home-complexe-shape{ display: none; } .activite.odd .col-md-6:first-child{ order: 1; } .activite.odd .col-md-6:last-child { order: 2; } .activite .text{ border-radius: 3rem 3rem 0 0; margin-bottom: 0; padding-bottom: 3rem; } .activite .img{ border-radius: 0 0 3rem 3rem; position: relative; top:-1px; } .activite .img:before{ content:''; position: absolute; top:-1px; left: 0; width: 100%; height: 30%; background: url(../themes/cristallys/assets/img/activites-vague-mask.svg) no-repeat 50% 0; background-size: 100% auto; } .activite .img img{ position: static; transform: none; } .activite-anchor a figcaption{ font-size: 4.5vw; } .sommaire{ top: 0; } #activites-no-details{ height: auto; } #activites-no-details > span{ top: 0; } #intro .bg { padding-bottom: 26vw; } .equipement-item { max-width: 50vw; } #bien-etre #intro.animate .petales .p1 { top: 4vw; } #tarifs-entrees .table{ padding: 0 5vw;} #tarifs-entrees table thead{ display: none; } #tarifs-entrees table tbody table, #tarifs-entrees table tbody tbody, #tarifs-entrees table tbody tr, #tarifs-entrees table tbody th, #tarifs-entrees table tbody td{ display: block; clear: both; text-align: left; background-color: transparent !important; font-family: 'OpenSans'; } #tarifs-entrees table tbody td{ text-align: right; border-bottom: 1px solid #fff; border-radius: 0 !important; overflow: hidden; } #tarifs-entrees table tbody th{ border-bottom: 2px solid #005581; border-radius: 0 !important; } #tarifs-entrees table tbody td:before{ display: block; width: 70%; float: left; padding-left: 1em; text-align: left; } #tarifs-entrees table tbody tr{ padding-top: 1em; } #tarifs-entrees table tbody td:nth-child(2):before{ content: '1 entrée'; } #tarifs-entrees table tbody td:nth-child(3):before{ content: '10 entrées'; } #tarifs-entrees table tbody td:nth-child(4):before{ content: 'Trimestre'; } #tarifs-entrees table tbody td:nth-child(5):before{ content: 'Semestre'; } #tarifs-entrees table tbody td:nth-child(6):before{ content: 'Carte famille'; } } /** * Extra small devices **/ @media (max-width: 575px) { :root{ --containerWidth: 100%; } body.admin:after{ content:"--"; background-color: yellow; } html { font-size: 8px; } .extra-container{ width: calc(100% + 15px + (100vw - 540px)/2); } h2, .h2{ font-size: 4.4rem; } #footer{ background-size: auto 100% !important; } #footer .logo { height: auto; margin-bottom: 0; max-width: 40vw; } #footer-palmes{ display: none; } .activite-anchor a figcaption{ font-size: 7.5vw; } .equipements-list{ padding: 0; } .equipement-item { max-width: 70vw; } .live{ padding: 2rem 2rem; } .live h3{ margin-bottom: 0.5em; } #equipements .swiper-button-next, #equipements .swiper-button-prev {top: 55%;} a.tarif-activite {width: 100%;} }