/* ════════════════════════════════════════════════════════════════════════════════════ * * ██╗ ██╗ █████╗ ██████╗ ███████╗███████╗ █████╗ ███████╗████████╗ * ██║ ██║██╔══██╗██╔══██╗██╔════╝██╔════╝██╔══██╗██╔════╝╚══██╔══╝ * ███████║███████║██████╔╝█████╗ █████╗ ███████║███████╗ ██║ * ██╔══██║██╔══██║██╔══██╗██╔══╝ ██╔══╝ ██╔══██║╚════██║ ██║ (\ /) * ██║ ██║██║ ██║██████╔╝███████╗██║ ██║ ██║███████║ ██║ ( . .)♥ * ╚═╝ ╚═╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝╚══════╝ ╚═╝ c(”)(” * * ════════════════════════════════════════════════════════════════════════════════════ * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███████╗███████╗████████╗████████╗██╗███╗ ██╗ ██████╗ ███████╗ * ██╔════╝██╔════╝╚══██╔══╝╚══██╔══╝██║████╗ ██║██╔════╝ ██╔════╝ * ███████╗█████╗ ██║ ██║ ██║██╔██╗ ██║██║ ███╗███████╗ * ╚════██║██╔══╝ ██║ ██║ ██║██║╚██╗██║██║ ██║╚════██║ * ███████║███████╗ ██║ ██║ ██║██║ ╚████║╚██████╔╝███████║ * ╚══════╝╚══════╝ ╚═╝ ╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ ╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * BOOTSTRAP'S 3 BREAKPOINTS (+XL zone adding) * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COLORS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * FONT * ════════════════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Raleway'; src: url("/wp-content/themes/healthflex-child/scss/fonts/Raleway/Raleway-Regular.ttf"); } @font-face { font-family: 'Raleway SemiBold'; src: url("/wp-content/themes/healthflex-child/scss/fonts/Raleway/Raleway-SemiBold.ttf"); } /* ════════════════════════════════════════════════════════════════════════════════════ * TOOLS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * * ███╗ ███╗██╗██╗ ██╗██╗███╗ ██╗███████╗ * ████╗ ████║██║╚██╗██╔╝██║████╗ ██║██╔════╝ * ██╔████╔██║██║ ╚███╔╝ ██║██╔██╗ ██║███████╗ * ██║╚██╔╝██║██║ ██╔██╗ ██║██║╚██╗██║╚════██║ * ██║ ╚═╝ ██║██║██╔╝ ██╗██║██║ ╚████║███████║ * ╚═╝ ╚═╝╚═╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚══════╝ * * * ════════════════════════════════════════════════════════════════════════════════════ */ .test { color: red !important; } /* ════════════════════════════════════════════════════════════════════════════════════ * BOOTSTRAP / MAXIMAL-FIXED-LAYOUT ZONES * ════════════════════════════════════════════════════════════════════════════════════ * * These mixins have to be used with @include($zone) directives * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * USEFULL MIXINS * ════════════════════════════════════════════════════════════════════════════════════ * * Bunch of usefull mixins available for use * * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * PAGES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * LANDING PAGE — HABEFAST — ROUBERT BENOIT — 2019.03.01 * ════════════════════════════════════════════════════════════════════════════════════ * * This page is replacing the entire site since the TERARASSIÈRE CLINIC joins the ADENT * GROUP and has no more reason to have a distinct site. * * We keep all precedent site on WordPress (if needed later), but inactivate all pages * of this one. * * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ .home { background: white; /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ON THIS LANDING PAGE WE DON'T NEED ELEMENTS THAT ARE NORMALLY PRESENT ON THE SITE * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * GENERAL * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * DEFAUT FONTS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COLOR UTILITIES * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * GENERAL AERATION * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * MAIN CONTAINER * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * SECTIONS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * WPML MENU * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > BANDEAU * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > INTRODUCTION * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > NOS SOINS * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > NOS PRATICIENS * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > INFORMATIONS CLINIQUES * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ * ROW > FOOTER LANDING PAGE * ════════════════════════════════════════════════════════════════════════════════════ * ════════════════════════════════════════════════════════════════════════════════════ */ } .home .header, .home .main > .page_title_in_content, .home footer, .home .copyright { display: none !important; } .home h1, .home h2, .home h3 { font-family: "Montserrat SemiBold"; text-transform: none; } .home p { font-family: "Montserrat"; margin-bottom: 30px; } .home .color-green * { color: #76bd1c; } .home .color-blue * { color: #19b3de; } @media (max-width: 1280px) { .home .container { width: 100vw; margin: auto; } } @media (max-width: 991px) { .home .main > section { padding-top: 45px; padding-bottom: 45px; } } .home .wpml-ls { position: absolute; top: 65px; right: 0; margin: 0; z-index: 1000000; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -o-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } @media (min-width: 1280px) { .home .wpml-ls { right: calc((100vw - 1280px)/2); } } @media (max-width: 1280px) { .home .wpml-ls { top: calc((65/1280)*100vw); } } @media (max-width: 767px) { .home .wpml-ls { top: calc((100/1280)*100vw); } } .home #bandeau { background: transparent !important; /* ════════════════════════════════════════════════════════════════════════════════════ * HOMOTHETIC BEHAVIOR (for banner image; 1280px x 720px (x2)) * ════════════════════════════════════════════════════════════════════════════════════ */ height: calc((720/1280)*100vw); /* ════════════════════════════════════════════════════════════════════════════════════ * LOGO BLOCK * ════════════════════════════════════════════════════════════════════════════════════ */ } @media (min-width: 1280px) { .home #bandeau { height: 720px; } } .home #bandeau #bloc-logo { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%) !important; -ms-transform: translateX(-50%) !important; -o-transform: translateX(-50%) !important; transform: translateX(-50%) !important; /* We want the banner to be sufficiently big on mobile. So we exceed 100vw */ } @media (min-width: 1280px) { .home #bandeau #bloc-logo { width: 1280px; height: 130px; } } @media (max-width: 1280px) { .home #bandeau #bloc-logo { width: 100vw; height: calc((130/1280)*100vw); } } @media (max-width: 767px) { .home #bandeau #bloc-logo { width: 150vw; } } .home #bandeau #bloc-logo .vc_figure { background: white !important; border-radius: 0 !important; } .home #bloc-sur-bandeau { /* ════════════════════════════════════════════════════════════════════════════════════ * GENERAL PROPERTIES * ════════════════════════════════════════════════════════════════════════════════════ */ background: transparent; /* ════════════════════════════════════════════════════════════════════════════════════ * FIRST COLUMN * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * OVERLAP WITH #bandeau * ════════════════════════════════════════════════════════════════════════════════════ */ margin-top: calc(-1*(270/1280)*100vw); /* ════════════════════════════════════════════════════════════════════════════════════ * TABLEAU * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #bloc-sur-bandeau .wpb_column:first-child { max-width: 830px; } @media (max-width: 991px) { .home #bloc-sur-bandeau .wpb_column:first-child { padding: 30px !important; } } @media (max-width: 767px) { .home #bloc-sur-bandeau .wpb_column:first-child { /* Main TITLE */ } .home #bloc-sur-bandeau .wpb_column:first-child h1 { margin-top: 30px; font-size: 22px; } } @media (max-width: 767px) and (max-width: 320px) { .home #bloc-sur-bandeau .wpb_column:first-child h1 { font-size: 17px; } } @media (min-width: 1280px) { .home #bloc-sur-bandeau { margin-top: -270px; } } .home #bloc-sur-bandeau #tableau { max-width: 500px; } .home #bloc-sur-bandeau #tableau table td { position: relative; border: none; width: 50%; padding-left: 30px; } .home #bloc-sur-bandeau #tableau table td * { color: #626262; } .home #bloc-sur-bandeau #tableau table td img { position: absolute; top: 7.5px; left: 0; } @media (max-width: 480px) { .home #bloc-sur-bandeau #tableau table td { margin-top: 15px; width: 100%; display: block; } } .home #nos-soins { /* ════════════════════════════════════════════════════════════════════════════════════ * SERVICES ROW * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #nos-soins #rangee-services { font-size: 0; display: block; /* ════════════════════════════════════════════════════════════════════════════════════ * CORRECTION OF COLUMNS BEHAVIOR * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * 1/5 columns * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TEXT BLOCK * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #nos-soins #rangee-services .wpb_column { display: inline-block; vertical-align: top; float: none; } .home #nos-soins #rangee-services .wpb_column { width: 20%; } @media (min-width: 768px) and (max-width: 991px) { .home #nos-soins #rangee-services .wpb_column { width: calc((1/3)*100%); } } @media (max-width: 767px) { .home #nos-soins #rangee-services .wpb_column { width: 50%; } } @media (max-width: 480px) { .home #nos-soins #rangee-services .wpb_column { display: block; width: 100%; } } .home #nos-soins #rangee-services .wpb_text_column { /* ════════════════════════════════════════════════════════════════════════════════════ * General * ════════════════════════════════════════════════════════════════════════════════════ */ background: white; height: 130px; margin-bottom: 0px; /* ════════════════════════════════════════════════════════════════════════════════════ * Hover * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * Content * ════════════════════════════════════════════════════════════════════════════════════ */ /* Vertical centering */ } .home #nos-soins #rangee-services .wpb_text_column:hover { border: 3px solid #76bd1c; } .home #nos-soins #rangee-services .wpb_text_column .wpb_wrapper { position: relative; top: 50%; -webkit-transform: translateY(-50%) !important; -ms-transform: translateY(-50%) !important; -o-transform: translateY(-50%) !important; transform: translateY(-50%) !important; } .home #nos-soins #rangee-services .wpb_text_column p { font-size: 18px; font-family: "Raleway"; } .home #nos-soins #rangee-services .wpb_text_column p strong { font-family: "Raleway SemiBold"; } .home #nos-soins #rangee-services .wpb_text_column a { color: #323232; } .home #nos-soins #rangee-services .wpb_text_column:hover a { color: #76bd1c; } .home #nos-praticiens { /* ════════════════════════════════════════════════════════════════════════════════════ * PRATICIENS ROW * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #nos-praticiens #rangee-praticiens { /* ════════════════════════════════════════════════════════════════════════════════════ * CORRECTION OF COLUMN BEHAVIOR * ════════════════════════════════════════════════════════════════════════════════════ */ font-size: 0; display: block; /* ════════════════════════════════════════════════════════════════════════════════════ * TEXT BLOCK * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #nos-praticiens #rangee-praticiens .wpb_column { display: inline-block; vertical-align: top; float: none; } @media (max-width: 767px) { .home #nos-praticiens #rangee-praticiens .wpb_column { width: 50%; } } @media (max-width: 480px) { .home #nos-praticiens #rangee-praticiens .wpb_column { display: block; width: 100%; } } .home #nos-praticiens #rangee-praticiens .wpb_text_column { /* ════════════════════════════════════════════════════════════════════════════════════ * General * ════════════════════════════════════════════════════════════════════════════════════ */ border-top: 3px solid #19b3de; background: white; padding: 15px; margin: 15px; /* ════════════════════════════════════════════════════════════════════════════════════ * Hover * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * Content * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #nos-praticiens #rangee-praticiens .wpb_text_column:hover { border-color: #76bd1c; background: #fafafa; } .home #nos-praticiens #rangee-praticiens .wpb_text_column p { font-weight: 400; font-size: 14px; } .home #nos-praticiens #rangee-praticiens .wpb_text_column p strong, .home #nos-praticiens #rangee-praticiens .wpb_text_column p b { font-size: 16px; } .home #nos-praticiens #rangee-praticiens .wpb_text_column a { color: #323232; } .home #informations-cliniques { /* ════════════════════════════════════════════════════════════════════════════════════ * MAIN RIGHT COLUMN * ════════════════════════════════════════════════════════════════════════════════════ */ /* Shadow */ /* ════════════════════════════════════════════════════════════════════════════════════ * TABLE OF CLINICS * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #informations-cliniques .right-column { padding: 0; } .home #informations-cliniques .right-column > .wpb_wrapper { /* ════════════════════════════════════════════════════════════════════════════════════ * SEPARATION WITH LEFT COLUMN * ════════════════════════════════════════════════════════════════════════════════════ */ margin-left: calc((70/1280)*100vw); /* ════════════════════════════════════════════════════════════════════════════════════ * SHADOW * ════════════════════════════════════════════════════════════════════════════════════ */ -webkit-box-shadow: 0px 3px 7px 0px rgba(75, 75, 75, 0.1); box-shadow: 0px 3px 7px 0px rgba(75, 75, 75, 0.1); } @media (min-width: 1280px) { .home #informations-cliniques .right-column > .wpb_wrapper { margin-left: 70px; } } @media (max-width: 767px) { .home #informations-cliniques .right-column > .wpb_wrapper { margin-left: 0; } } .home #informations-cliniques #tableau { font-size: 0; display: block; /* ════════════════════════════════════════════════════════════════════════════════════ * COLUMNS * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #informations-cliniques #tableau .wpb_column { /* ════════════════════════════════════════════════════════════════════════════════════ * CORRECTION OF COLUMN BEHAVIOR * ════════════════════════════════════════════════════════════════════════════════════ */ display: inline-block; vertical-align: top; float: none; /* ════════════════════════════════════════════════════════════════════════════════════ * GENERAL * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * TEXT BLOCKS * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COLUMNS AERATION * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * CLINIC BLOCKS * ════════════════════════════════════════════════════════════════════════════════════ */ } @media (max-width: 480px) { .home #informations-cliniques #tableau .wpb_column { margin-bottom: 60px; } } .home #informations-cliniques #tableau .wpb_column .wpb_text_column { font-size: 14px; margin-bottom: 15px; } @media (min-width: 768px) { .home #informations-cliniques #tableau .wpb_column { padding: 22.5px; /* First clinics of each row (taking into account Introduction column) */ /* Last clinics of each row (taking into account Introduction column) */ } .home #informations-cliniques #tableau .wpb_column:nth-child(3n + 2) { padding-left: 30px; padding-right: 15px; } .home #informations-cliniques #tableau .wpb_column:nth-child(3n + 4) { padding-left: 15px; padding-right: 30px; } } @media (max-width: 767px) { .home #informations-cliniques #tableau .wpb_column { padding: 0 5%; } } .home #informations-cliniques #tableau .wpb_column .clinique-nom { font-size: 18px; } @media (min-width: 768px) and (max-width: 1199px) { .home #informations-cliniques #tableau .wpb_column .clinique-nom { font-size: calc((18/1280)*100vw); } } @media (max-width: 480px) { .home #informations-cliniques #tableau .wpb_column .clinique-nom { font-size: 16px; } } @media (max-width: 480px) and (max-width: 320px) { .home #informations-cliniques #tableau .wpb_column .clinique-nom { font-size: 14px; } } .home #informations-cliniques #tableau .wpb_column .clinique-nom a { color: #323232; } .home #informations-cliniques #tableau .wpb_column .clinique-adresse { font-size: 14px; font-weight: 400; /* We take the height of three lines since some addresses goes on three lines */ } @media (max-width: 1199px) { .home #informations-cliniques #tableau .wpb_column .clinique-adresse { height: 65px; } } @media (max-width: 480px) { .home #informations-cliniques #tableau .wpb_column .clinique-adresse { font-size: 12px; } } .home #informations-cliniques #tableau .wpb_column .clinique-horaires { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e1e1e1; font-size: 14px; } .home #informations-cliniques #tableau .wpb_column .clinique-horaires p { margin-bottom: 5px; } .home #informations-cliniques #tableau .wpb_column .clinique-horaires p strong { color: #76bd1c; font-weight: 400; } @media (min-width: 768px) and (max-width: 1199px) { .home #informations-cliniques #tableau .wpb_column .clinique-horaires { font-size: calc((14/1199)*100vw); } } @media (max-width: 480px) { .home #informations-cliniques #tableau .wpb_column .clinique-horaires { height: 65px; font-size: 12px; } } @media (max-width: 320px) { .home #informations-cliniques #tableau .wpb_column .clinique-horaires { font-size: 10px; } } .home #footer-landing-page { /* ════════════════════════════════════════════════════════════════════════════════════ * GENERAL * ════════════════════════════════════════════════════════════════════════════════════ */ padding-bottom: 0; /* ════════════════════════════════════════════════════════════════════════════════════ * LOGO * ════════════════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════════════════ * COPYRIGHT * ════════════════════════════════════════════════════════════════════════════════════ */ } .home #footer-landing-page #logo { margin-bottom: 20px; } .home #footer-landing-page #logo img { width: 230px; } .home #footer-landing-page #copyright * { font-weight: 300; font-size: 12px; color: black; }