/* ------ reset ------ */ #main:not(.main-homepage) {padding-top: 0px; } .breadcrumb {display: none !important; } #wrapper { max-width: 100%; } footer { margin-top: 0; } @media (max-width: 640px) { .offerbumper-loader { display: none !important;} } /* ------ variables ------ */ .mlt__page { --CLARINS-FONT: ClarinsRegular, Clarins; --GOTHAM-LIGHT: "Gotham_Light"; --GOTHAM-BOOK: "Gotham SSm book A", "Gotham SSm book B", "Gotham Book",Helvetica, Arial, sans-serif; --GOTHAM-MEDIUM: "Gotham SSm medium A", "Gotham SSm medium B", "Gotham Medium",Helvetica, Arial, sans-serif; --COLOR-RED:#9d1425; --COLOR-ROSE:#e95b71; --COLOR-DEFAULT:#333; --RADIUS:8px; --ratioWidth: 1px; --mainOffset: 147px; } @media (max-width: 1280px) { .mlt__page { --ratioWidth: calc( 100vw / 1280 ); } } @media (max-width: 768px) { .mlt__page { --ratioWidth: calc( 100vw / 375 ); } } /* ------ page ------ */ .mlt__page {font-family: var(--GOTHAM-BOOK);font-weight: normal;color: #333333;position: relative;width: 100%; overflow: hidden; } .mlt__page * {box-sizing: border-box; } .mlt__page h1, .mlt__page h2, .mlt__page h3 {margin: 0;padding: 0;font-weight: normal; } .mlt__page p {margin: 0;padding: 0; } .mlt__page picture {display: block; /*! width: 100%; */} .mlt__page img {width: 100%;display: block; } .mlt__page a {color: var(--COLOR-DEFAULT);text-decoration: none; } .mlt__page .mlt__container {position: relative; max-width: 1050px; width: 90%; margin: 0 auto; } .mlt__page .mlt__bloc { position: relative; max-width:1600px; width: 100%; margin: 0 auto; } .mlt__page .mlt__title { color:var(--COLOR-ROSE); font-size: 48px;line-height: 1.15em; text-rendering: optimizeSpeed; } .mlt__page .mlt__title small { display: block; } .mlt__page .mlt__subtitle {font-family: var(--GOTHAM-MEDIUM);font-size: 24px;line-height: 1.33em; text-rendering: optimizeSpeed; } .mlt__page .mlt__text {font-size: 14px;line-height: 1.44em; text-rendering: optimizeSpeed; } .mlt__page .mlt__text>span {display: block; } .mlt__page .mlt__text .mlt__nowrap {white-space: nowrap; } .mlt__page .mlt__text a { text-decoration: underline; } .mlt__page .mlt__text a:hover { text-decoration: none; } .mlt__page .mlt__price {font-size: 14px;line-height: 1.28em; text-rendering: optimizeSpeed; } .mlt__page .mlt__priceperunit {font-size: 10px;line-height: 1.28em; text-rendering: optimizeSpeed; } .mlt__page .mlt__legend-text { font-size: 10px; line-height: 1.44em; text-align: center; text-rendering: optimizeSpeed;} .mlt__page .mlt__text strong, .mlt__page .mlt__strong {font-family: var(--GOTHAM-MEDIUM); font-weight: normal; } .mlt__page .mlt__price {font-size: 16px;line-height: 20px; } .mlt__page .mlt__cta { padding-top: 20px; } .mlt__page .mlt__cta-btn {cursor: pointer;display: inline-flex;min-width: 132px;height: auto;padding: 17px;font-size: 14px;line-height: 1em;text-align: center;text-decoration: none;letter-spacing: 0;color: #fff;background-color: #b40024;border: 2px solid #b40024;border-radius: 5px;font-family: var(--GOTHAM-MEDIUM, Helvetica, Arial);font-weight: 500; position: relative; top:0; left:0; align-items: center;justify-content: center;} .mlt__page .mlt__cta-btn:hover { color: #fff; outline: 0 !important; background-color: #8c0b26; border-color: #8c0b26; } .mlt__page .mlt__cta-white {color: var(--COLOR-DEFAULT); background: #fff; border: 1px solid #B0A9A5; transition:all 0.3s; } .mlt__page .mlt__cta-white:hover { color: var(--COLOR-DEFAULT); border: 1px solid #797674; background: #fff; box-shadow: 0px 0px 7px 0px #00000026; } .mlt__page .mlt__link a { text-decoration: underline; font-family: var(--GOTHAM-MEDIUM); font-size: 14px; line-height: 1.42em; letter-spacing: 0.02em; text-transform: uppercase; } .mlt__page .mlt__link a:hover { text-decoration: none; } .mlt__page .mlt__quickshop { display: none; } .mlt__page .mlt__addtobag { display: none; } /* .mlt__page .mlt__cta a.mlt__disabled { background-color: #cfcac9; border-color:#cfcac9; cursor: default; } */ @media (max-width: 768px) { .mlt__page .mlt__page { overflow: hidden;} .mlt__page .mlt__container { padding: 0;} .mlt__page .mlt__bloc { padding-bottom: 47px; } .mlt__page .mlt__title { font-size: 30px; } .mlt__page .mlt__subtitle {font-size: 18px;} .mlt__page .mlt__text>span t{ display: inline;} } /* header */ .mlt__page .mlt__bloc-header { --headerRatio:1px; position: relative; max-width: 1600px;width: 100%;margin: 0 auto; height:calc(500 * var(--headerRatio)); } .mlt__page .mlt__header-media {position: absolute; width: 100%; height: 100%; } .mlt__page .mlt__header-picture { width: 100%; height: 100%; } .mlt__page .mlt__header-img { width: 100%; height: 100%; object-fit:cover;} .mlt__page .mlt__header-body { position: relative; display: flex; align-items:center; height: 100%; } .mlt__page .mlt__header-content { position: relative;left: calc(50% - calc(550 * var(--headerRatio))); width: calc(505 * var(--headerRatio)); } .mlt__page .mlt__header-title { font-size: calc(40 * var(--headerRatio)); line-height: normal; padding-bottom: calc(10 * var(--headerRatio)); font-family: var(--GOTHAM-MEDIUM); } .mlt__page .mlt__header-title small { font-size: 0.75em; line-height:1.25em; font-family: var(--GOTHAM-BOOK); color:var(--COLOR-DEFAULT); } .mlt__page .mlt__header-title>span {display: inline;background-color: #cea150;background-image: url(images/holy_title.png);background-size: contain;background-repeat: repeat;-webkit-background-clip: text;-webkit-text-fill-color: transparent;-moz-background-clip: text;-moz-text-fill-color: transparent; } .mlt__page .mlt__header-body { position: relative; display: flex; align-items:center; height: 100%; } .mlt__page .mlt__header-link { position: absolute; display: block; width: calc(168 * var(--headerRatio)); height:calc(125 * var(--headerRatio)); cursor: pointer; } .mlt__page .mlt__header-link-day { left:calc(50% + calc(368 * var(--headerRatio))); top:calc(225 * var(--headerRatio)); } .mlt__page .mlt__header-link-night { left:calc(50% + calc(404 * var(--headerRatio))); top:calc(352 * var(--headerRatio)); } .mlt__page .mlt__header-media .mlt__header-link { display: none; } @media (max-width: 1220px) { .mlt__page .mlt__bloc-header { --headerRatio:calc(100vw / 1220); } } @media (max-width: 768px) { .mlt__page .mlt__bloc-header {height: auto; padding-bottom: 0; } .mlt__page .mlt__header-media {position: relative; height: auto; } .mlt__page .mlt__header-content { text-align: center; width: 100%; left:0; padding-top: 25px; } .mlt__page .mlt__header-title { font-size: 29px; line-height: 1.05em; padding-bottom: 2px; } .mlt__page .mlt__header-title small { font-size: 0.82em; line-height:1.25em; } .mlt__page .mlt__header-link { width: calc(325 * var(--headerRatio)); height:calc(247 * var(--headerRatio)); } .mlt__page .mlt__header-link-day { left:calc(50% + calc(160 * var(--headerRatio))); top:calc(343 * var(--headerRatio)); } .mlt__page .mlt__header-link-night { left:calc(50% + calc(232 * var(--headerRatio))); top:calc(589 * var(--headerRatio)); } .mlt__page .mlt__header-media .mlt__header-link { display: block; } .mlt__page .mlt__header-body .mlt__header-link { display: none; } } /* navigation */ .mlt__page .mlt__navigation { height: 45px; opacity: 0; transition:opacity 0.5s; } .mlt__page .mlt__navigation.mlt__visible { opacity: 1; } .mlt__page .mlt__navigation-content { width: 100%; height:100%; overflow: hidden; display: flex; justify-content:center; align-items:center; } .mlt__page .mlt__navigation-progress { position: absolute;left: 0;bottom: 0; width: 0; height: 2px; background: var(--COLOR-ROSE); background:#ffd7ea; display: block; box-shadow: 0 0 19px rgba(255,139,196,1); } /* .mlt__page .mlt__navigation-progress:after { content:""; position: absolute;right: 0;top: -3px; width: 30px; height: 8px; background:radial-gradient(farthest-side at right, #fff, transparent); display: block; } .mlt__page .mlt__navigation-progress:before { content:""; position: absolute;right: -10px;top: -3px; width: 10px; height: 8px; background:radial-gradient(farthest-side at left, #fff, transparent); display: block; } */ .mlt__page .mlt__navigation-progress:after { content:""; position: absolute;right: -62px;top: -50px; width: 200px; height: 100px; background:url(images/navigation.png) left top no-repeat;background-size: 100% auto; display: block; pointer-events:none; transform:rotate(2deg); } .mlt__page .mlt__navigation-handler {display: none; position: relative;left: 0;top: 0; } .mlt__page .mlt__navigation-handler-click { position: absolute;top: 0;left:0; width: 100%; height: 100%; display: block; cursor: pointer; } .mlt__page .mlt__navigation-handler-left { height: 44px;display: flex;align-items: center; color:#fff; } .mlt__page .mlt__navigation-handler-right { padding-right: 20px; display: flex;align-items: center; } .mlt__page .mlt__navigation-handler-text {font-size: 11px;line-height: 1.2em;padding: 0 20px;display: block;text-transform: uppercase; pointer-events:none; } .mlt__page .mlt__navigation-handler-arrow { background: url(images/holy_arrow.svg) left top no-repeat;background-size: 100% auto;width: 8px;height: 15px;transform: rotate(90deg);transition: transform 0.3s; pointer-events:none; } .mlt__page .mlt__navigation-inside {position: relative; top:0; left:0; z-index:1; background: var(--COLOR-ROSE); color: #fff; height: 45px; } .mlt__page .mlt__navigation-inside ul {display: flex;padding: 0;list-style: none;margin: 0 20px; flex-wrap: wrap;justify-content: center; } .mlt__page .mlt__navigation-inside li {white-space: nowrap;display: flex; margin: 0 12px;position: relative;cursor: pointer; } .mlt__page .mlt__navigation-inside li:hover, .mlt__page .mlt__navigation-inside li.mlt__active {} .mlt__page .mlt__navigation-inside ul a {text-transform: uppercase;color: #fff; } .mlt__page .mlt__navigation-inside ul a span { font-size: 11px;line-height: 28px;font-family:var(--GOTHAM-MEDIUM);color: display: block;text-align: center; position: relative;} .mlt__page .mlt__navigation-inside ul li { opacity: 0.7; } .mlt__page .mlt__navigation-inside ul li.mlt__active { opacity: 1; } .mlt__page .mlt__navigation-inside ul li:hover { opacity: 1; } .mlt__page.mlt__stack .mlt__navigation-inside { position: fixed; top: var(--mainOffset); left: 0; z-index: 10; width: 100%; } .mlt__page .mlt__navigation .mlt__cta-btn { padding-top: 9px; padding-bottom: 9px; } .mlt__page .mlt__navigation-handler .mlt__cta-btn { display: none; } @media (max-width: 1023px) { .mlt__page.mlt__stack .mlt__navigation-inside {top: var(--mainOffset); } } @media (max-width: 900px) { .mlt__page .mlt__navigation-content { justify-content: flex-start; align-items: flex-start; flex-direction:column; text-align: left; background: var(--COLOR-ROSE); height: auto; max-height: 0; transition:max-height 0.5s ease-out; } .mlt__page .mlt__navigation-inside.mlt__opened .mlt__navigation-content { max-height: 190px; } .mlt__page .mlt__navigation-handler { display: flex; justify-content:space-between; } .mlt__page .mlt__navigation-inside.mlt__opened .mlt__navigation-handler-arrow { transform: rotate(-90deg); } .mlt__page .mlt__navigation-inside .mlt__navigation-progress { opacity: 1; transition:opacity 0.25s; } .mlt__page .mlt__navigation-inside.mlt__opened .mlt__navigation-progress { opacity: 0; } .mlt__page .mlt__navigation-inside ul { flex-direction:column; padding-bottom: 10px; } .mlt__page .mlt__navigation-inside ul li { margin: 0 0 15px 20px; display: block; } .mlt__page .mlt__navigation-inside ul a { text-transform: none; } .mlt__page .mlt__navigation-inside ul a span { padding: 0; font-size: 11px; line-height: 1.2em; letter-spacing: 0.05em;} .mlt__page .mlt__navigation-content .mlt__cta-btn { display: none; } .mlt__page .mlt__navigation-handler .mlt__cta-btn { display: block; margin-left: 20px; } } /* film */ .mlt__page .mlt__bloc-film { padding-top:44px; padding-bottom: 18px; } .mlt__page .mlt__bloc-film .mlt__container { max-width: 1172px } .mlt__page .mlt__film-title { text-align: center; padding-bottom: 18px; } .mlt__page .mlt__film-title small { font-size: 0.72em; line-height:1.25em; } .mlt__page .mlt__film-subtitle { text-align: center; padding-bottom: 35px; } .mlt__page .mlt__film { display: flex; text-align: center; position: relative; } .mlt__page .mlt__film-media { width: 100%; } .mlt__page .mlt__film-media-title { color: var(--COLOR-ROSE); padding-bottom: 15px; } .mlt__page .mlt__film-media-content {cursor: pointer; position: relative;top: 0;left: 0;width: 100%;display: block; } .mlt__page .mlt__film-media-img {width: 100%;height: 100%;display: block;object-fit: cover; } .mlt__page .mlt__film-media-play {position: absolute;top: calc(50% - 30px);left: calc(50% - 30px);width: 60px;height: 60px;border: 1px #fff solid;border-radius: 50%;display: block;margin: 0 auto;background-color: rgba(0,0,0,0.15); } .mlt__page .mlt__film-media-play:after {content: "";position: absolute;top: calc(50% - 10px);left: calc(50% - 5px);border-left: solid #fff 15px;border-top: solid transparent 10px;border-bottom: solid transparent 10px; } .mlt__page .mlt__film-video { position: relative; border-radius: var(--RADIUS); overflow: hidden; } .mlt__page .mlt__film-video iframe { width: 100%; height: 100%; display: block; } .mlt__page .mlt__film-media-vimeo { position: absolute;top: 0;left: 0;width: 100%;display: block;height: 100%; } .mlt__page .mlt__film-video.mlt__playing .mlt__film-media-content { opacity: 0; pointer-events:none; } .mlt__page .mlt__film-content { width: 100%; text-align: left; padding:30px 40px 0 40px; } .mlt__page .mlt__film-text { font-size: 18px; padding-bottom: 1em; } .mlt__page .mlt__film-text.mtl__strong { font-size: 20px; } .mlt__page .mlt__film-legend { padding-top: 60px; } @media (max-width: 768px) { .mlt__page .mlt__bloc-film { padding-bottom: 10px; padding-top: 42px; } .mlt__page .mlt__film { flex-direction:column; } .mlt__page .mlt__film-title { padding-bottom: 10px; } .mlt__page .mlt__film-title small { font-size: 0.82em; } .mlt__page .mlt__film-subtitle { padding-bottom: 30px; } .mlt__page .mlt__film-text { font-size: 14px; } .mlt__page .mlt__film-text.mlt__strong { font-size: 16px; } .mlt__page .mlt__film-content { text-align: center; padding : 25px 0 0 0; } .mlt__page .mlt__film-legend { padding-top: 8px; } } /* collection */ .mlt__page .mlt__bloc-collection { padding-bottom: 0;} .mlt__page .mlt__collection-top { text-align: center; padding-top: 64px; padding-bottom:78px; position: absolute; top:0; width: 100%;z-index: 1; -webkit-backspace-visibility: hidden; transform:translate3d(0,0,0); } .mlt__page .mlt__collection-bottom { text-align: center; position: absolute; bottom:0; width: 90%;left: 5%; padding-top: 50px; padding-bottom: 20px;-webkit-backspace-visibility: hidden; transform:translate3d(0,0,0); } .mlt__page .mlt__collection-top-bkgd { position: absolute; top:60%; left:50%; width: 90%; max-width:1423px; height: 80%; transform:translate(-50%, -50%); opacity: 1; pointer-events:none; } .mlt__page .mlt__collection-top-bkgd-img { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);} .mlt__page .mlt__collection-top .mlt__title, .mlt__page .mlt__collection-top .mlt__subtitle { position: relative; } .mlt__page .mlt__collection-title { padding-bottom: 12px; text-transform: uppercase; } .mlt__page .mlt__collection-title small { font-size: 0.82em; } .mlt__page .mlt__collection-subtitle { padding-bottom: 16px; width: 90%; max-width: 620px; margin: 0 auto; } .mlt__page .mlt__collection-subtitle-2 { color: var(--COLOR-ROSE); width: 90%; max-width: 620px; margin: 0 auto; } .mlt__page .mlt__collection-subtitle-3 { width: 90%; margin: 0 auto; padding-bottom: 20px; } .mlt__page .mlt__collection-legend { padding-top: 45px; padding-bottom: 15px; } .mlt__page .mlt__collection { position: relative; --DuoWidthRatio:1px; --DuoMediaRatio:0.8; --DuoMediaWidth:calc(530 * var(--DuoWidthRatio)); --SlashDeltaWidth:8vw; --SlashCloseWidth:4vw; --PaddingTop:376px; --PaddingBottom:0; --SlashSlideWidth:0; } .mlt__page .mlt__collection-arrow { cursor:pointer; position: absolute; top:calc( var(--PaddingTop) + var(--DuoMediaWidth) * var(--DuoMediaRatio) * 0.5 - 30px); width: calc(37 * var(--DuoWidthRatio)); height: calc(69 * var(--DuoWidthRatio)); display: block; } .mlt__page .mlt__collection-arrow svg { width: 100%; height: 100%; display: block; position: relative;} .mlt__page .mlt__collection-arrow-left { left:calc( 50% - 150px - var(--DuoMediaWidth)*0.5 ); transition: left 0.8s, transform 0.4s 0.1s; } .mlt__page .mlt__collection-arrow-left polygon { fill:#e95c72; } .mlt__page .mlt__collection-arrow-right { right:calc( 50% - 150px - var(--DuoMediaWidth)*0.5 ); transform:rotate(180deg); transition: right 0.8s, transform 0.4s 0.1s; } .mlt__page .mlt__collection-arrow-right polygon { fill:#9d1526; } .mlt__page .mlt__collection[data-duo="day"] .mlt__collection-arrow-left { opacity: 0; pointer-events:none; transform:rotate(180deg); } .mlt__page .mlt__collection[data-duo="day"] .mlt__collection-arrow-right { right: calc( var(--SlashCloseWidth) - 20px); transform:rotate(0deg); opacity: 1; } .mlt__page .mlt__collection[data-duo="night"] .mlt__collection-arrow-left { left: calc( var(--SlashCloseWidth) - 20px); transform:rotate(180deg); opacity: 1; } .mlt__page .mlt__collection[data-duo="night"] .mlt__collection-arrow-right { opacity: 0; pointer-events:none; transform:rotate(0deg); } .mlt__page .mlt__duos { text-align: center; position: relative; top:0; left:0; height: 100%; } .mlt__page .mlt__duo { overflow: hidden; display: block; position: relative; top:0; left:0; width:100%; -webkit-backspace-visibility: hidden; transform:translate3d(0,0,0); transition: -webkit-clip-path 0.8s, clip-path 0.8s; padding-top: var(--PaddingTop); padding-bottom: var(--PaddingBottom); } .mlt__page .mlt__duo-night { position:absolute; -webkit-clip-path: polygon(calc(45% + var(--SlashDeltaWidth) ) 0%, 100% 0%, 100% 100%, 45% 100%); clip-path: polygon(calc(45% + var(--SlashDeltaWidth) ) 0%, 100% 0%, 100% 100%, 45% 100%); } .mlt__page .mlt__duo-inside { position: relative; top:0; left:0; -webkit-backspace-visibility: hidden; transition:height 0.5s 0.8s; } .mlt__page .mlt__duo-bkgd { position: absolute; top:0; left:0; width: 100%; height: 100%; pointer-events:none; } .mlt__page .mlt__duo-day .mlt__duo-bkgd { background: -webkit-linear-gradient(59deg, #f08298, #fce9ec); background: linear-gradient(59deg, #f08298, #fce9ec); } .mlt__page .mlt__duo-night .mlt__duo-bkgd { background: -webkit-linear-gradient(-30deg, #e07583, #f5b1c0); background: linear-gradient(-30deg, #e07583, #f5b1c0); } .mlt__page .mlt__duo-closed-bkgd { position: absolute; top:0; left:0; width: 100%; height: 100%; opacity:0; -webkit-backspace-visibility: hidden; transition:opacity 0.8s; pointer-events:none; } .mlt__page .mlt__duo-night .mlt__duo-closed-bkgd { background: -webkit-linear-gradient(30deg, #d54c5c, #f0a0af); background: linear-gradient(30deg, #d54c5c, #f0a0af); } .mlt__page .mlt__duo-day .mlt__duo-closed-bkgd { background: -webkit-linear-gradient(0deg, #f5a9b7, #fce9ec); background: linear-gradient(0deg, #f5a9b7, #fce9ec); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-closed-bkgd { opacity:1; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-day .mlt__duo-closed-bkgd { opacity:1; } .mlt__page .mlt__duo-opened-bkgd { position: absolute; top:0; width: 40vw; height: 100%; opacity:1; transition:left 0.8s, opacity 0.8s; /*! transform: rotate(2deg); */ pointer-events:none; } .mlt__page .mlt__duo-day .mlt__duo-opened-bkgd { background: -webkit-linear-gradient(-75deg, rgba(253,242,244,1) 0%, rgba(253,242,244,0) 40%); background: linear-gradient(-75deg, rgba(253,242,244,1) 0%, rgba(253,242,244,0) 40%); left:calc(50% - 36vw); opacity: 0.6; } .mlt__page .mlt__duo-night .mlt__duo-opened-bkgd { background: -webkit-linear-gradient(92deg, rgba(221,99,116,1) 0%, rgba(221,99,116,0) 40%); background: linear-gradient(92deg, rgba(221,99,116,1) 0%, rgba(221,99,116,0) 40%); left:calc(50% - 9vw); opacity: 0.8; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-opened-bkgd { left: calc( 100% - var(--SlashCloseWidth)) } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-opened-bkgd { left: calc( 100% - var(--SlashCloseWidth)) } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-day .mlt__duo-opened-bkgd { left: calc( var(--SlashCloseWidth)) } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-opened-bkgd { left: calc( var(--SlashCloseWidth)) } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-opened-bkgd, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-day .mlt__duo-opened-bkgd { opacity:0; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-opened-bkgd, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-opened-bkgd { opacity:0; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night { -webkit-clip-path: polygon(calc(100% - var(--SlashCloseWidth)) 0%, 100% 0%, 100% 100%, calc(100% - var(--SlashDeltaWidth) - var(--SlashCloseWidth)) 100%); clip-path: polygon(calc(100% - var(--SlashCloseWidth)) 0%, 100% 0%, 100% 100%, calc(100% - var(--SlashDeltaWidth) - var(--SlashCloseWidth)) 100%); } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night { -webkit-clip-path: polygon(calc(var(--SlashDeltaWidth) + var(--SlashCloseWidth)) 0%, 100% 0%, 100% 100%, var(--SlashCloseWidth) 100%); clip-path: polygon(calc(var(--SlashDeltaWidth) + var(--SlashCloseWidth)) 0%, 100% 0%, 100% 100%, var(--SlashCloseWidth) 100%); } .mlt__page .mlt__duo-media { width: var(--DuoMediaWidth); position: absolute; top:0; -webkit-backspace-visibility: hidden; transition:left 0.8s; } .mlt__page .mlt__duo-day .mlt__duo-media { left: calc( 50% - var(--DuoMediaWidth) * 0.5 + 2px); } .mlt__page .mlt__duo-night .mlt__duo-media { left: calc( 50% - var(--DuoMediaWidth) * 0.5 - 1px); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-media { left: calc( 50% - 30px ); } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-media { left: calc( 50% - var(--DuoMediaWidth) + 30px ); } .mlt__page .mlt__duo-media-img { position: relative; top:0; left: 0; } .mlt__page .mlt__duo-media-bkgd { position: absolute; top: calc(var(--DuoMediaWidth) * (-1) * .63); left: calc(var(--DuoMediaWidth) * (-1) * .23); width: calc(var(--DuoMediaWidth) * 2.5); height: calc(var(--DuoMediaWidth) * 2.5); opacity: 0; transition:opacity 0.8s; } .mlt__page .mlt__duo-media-bkgd-inside { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);} .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-media-bkgd { opacity: 1; } .mlt__page .mlt__duo-body { position: relative; display: flex; flex-direction: column; width: calc( 50% - ( 60 * var(--DuoWidthRatio) ) - var(--DuoMediaWidth)*0.5); transition:width 0.8s; } .mlt__page .mlt__duo-body-bottom { position: relative; top:0; left:0; /*height: 0; min-height: calc( var(--DuoMediaWidth) * var(--DuoMediaRatio) - ( 60 * var(--DuoWidthRatio))); */ } /* .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-body-bottom, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-body-bottom { height: auto; } */ .mlt__page .mlt__duo-body-inside { position: absolute; top:0; left:0; } .mlt__page .mlt__duo-day .mlt__duo-body { justify-content:flex-end; } .mlt__page .mlt__duo-night .mlt__duo-body { margin-left: auto; justify-content:flex-start; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-body, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-body { width: calc( 50% - 3.75vw - 30px ); } .mlt__page .mlt__collection .mlt__duo-body-inside, .mlt__page .mlt__collection .mlt__duo-body-inside { width: 100%; } .mlt__page .mlt__duo-content { display: flex; flex-direction: column; align-items: flex-end; text-align: left; padding-top:5px; opacity: 0; -webkit-backspace-visibility: hidden; transition:opacity 0.5s 0s; } .mlt__page .mlt__duo-day .mlt__duo-content { padding-left: 4vw; } .mlt__page .mlt__duo-night .mlt__duo-content { align-items: flex-start; padding-right: 4vw; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-content { opacity: 1; transition-delay:1.25s; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-content { opacity: 1; transition-delay:1.25s; } .mlt__page .mlt__duo-title { text-transform: uppercase; -webkit-backspace-visibility: hidden; transform: translateY(calc(75 * var(--DuoWidthRatio))); opacity: 1; transition:opacity 0.5s, transform 0.5s 0.8s; font-size: calc(60 * var(--DuoWidthRatio)); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-title, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-title { -webkit-backspace-visibility: hidden; transform: translateY(-15px); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-title, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-day .mlt__duo-title { opacity: 0; } .mlt__page .mlt__duo-title span { position: relative; } .mlt__page .mlt__duo-title span:before { content: ""; position: absolute; top:0; left:-1.1em; background: left center no-repeat; background-size: 100% auto; width: 0.9em; height: 100%; display: block; } .mlt__page .mlt__duo-day .mlt__duo-title { color: var(--COLOR-ROSE); text-align: right; } .mlt__page .mlt__duo-day .mlt__duo-title span:before { width: 1.1em; left:-1.3em; background-image:url(images/picto_day.svg); } .mlt__page .mlt__duo-night .mlt__duo-title { color: var(--COLOR-RED); text-align: left; padding-left: 1.1em; } .mlt__page .mlt__duo-night .mlt__duo-title span:before { background-image:url(images/picto_night.svg); } .mlt__page .mlt__duo-percents { display: flex; justify-content: space-between; padding-bottom: 30px; } .mlt__page .mlt__duo-percent { text-align: center; } .mlt__page .mlt__duo-percent:nth-child(2n+1) { margin-right: 15px; } .mlt__page .mlt__duo-percent:nth-child(2n) { margin-left: 15px; } .mlt__page .mlt__duo-percent-value { font-size: 48px; line-height: 0.85em; font-weight: 300; padding-bottom:2px; } .mlt__page .mlt__duo-percent-glyph { font-size: 1em; line-height: 1em; } .mlt__page .mlt__duo-percent-text { font-size: 14px; line-height: 1.5em; max-width: 185px; } .mlt__page .mlt__duo-cta { margin-top: 25px; } .mlt__page .mlt__duo-text { padding-bottom: 1em; max-width: 390px; } .mlt__page .mlt__duo-name { padding-bottom: 9px; } .mlt__page .mlt__duo-price { padding-bottom: 2px; } .mlt__page .mlt__duo-day .mlt__duo-text, .mlt__page .mlt__duo-day .mlt__duo-name, .mlt__page .mlt__duo-day .mlt__duo-price, .mlt__page .mlt__duo-day .mlt__duo-priceperunit { text-align: right; } .mlt__page .mlt__legend-text.mlt__mobile { display: none; } .mlt__page .mlt__collection-close, .mlt__page .mlt__collection-products, .mlt__page .mlt__collection-more { display: none; } @media (max-width: 1300px) { .mlt__page .mlt__collection { --DuoWidthRatio:calc(100vw / 1300); } .mlt__page .mlt__collection .mlt__duo-body-inside, .mlt__page .mlt__collection .mlt__duo-body-inside { width: calc( 100vw - var(--DuoMediaWidth) - var(--SlashDeltaWidth) - var(--SlashCloseWidth) - 4.38vw ); min-width: auto; } } @media (max-width: 768px) { .mlt__page .mlt__bloc-collection { background: url(images/bkgd-collection-m.jpg) center center no-repeat; background-size: cover; } .mlt__page .mlt__collection { --DuoMediaWidth:60vw; --SlashDeltaWidth:12vw; --SlashCloseWidth:0vw; --PaddingTop:300px; --PaddingBottom:0; } .mlt__page .mlt__collection-top { position:relative; padding-top: calc( 25 * var(--ratioWidth)); padding-bottom: calc( 18 * var(--ratioWidth)); transform:none; } .mlt__page .mlt__collection-bottom { position:relative; } .mlt__page .mlt__collection-title { padding-bottom: 12px; } .mlt__page .mlt__collection-subtitle { padding-bottom: 20px; } .mlt__page .mlt__collection-subtitle-3 { width: 100%; padding-bottom: calc( 15 * var(--ratioWidth)); color:#fff; } .mlt__page .mlt__collection-bottom { padding-top: calc( 28 * var(--ratioWidth)); } .mlt__page .mlt__collection-products { display:block; margin-left: 18%; width: 70%; position: relative; top:0; left:0; } .mlt__page .mlt__collection-products-link { position: absolute; width: 57vw; height: 43vw; display: block; } .mlt__page .mlt__collection-products-link[data-duo="day"] { top:0; left:0; } .mlt__page .mlt__collection-products-link[data-duo="night"] { top:43vw; left:13vw; } .mlt__page .mlt__duos { position: absolute; width: 100%; z-index: 1; pointer-events:none; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duos, .mlt__page .mlt__collection[data-duo="night"] .mlt__duos { pointer-events:unset; } .mlt__page .mlt__duo { position: absolute; padding-top: 0; padding-bottom: 0; overflow: unset; } .mlt__page .mlt__duo-night { -webkit-clip-path: unset !important; clip-path: unset !important; transition:none; } .mlt__page .mlt__duo-inside { width: 90%; height: auto !important; transition: none; position: relative; left:5%; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-inside, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-inside { box-shadow: 0px 0px 7px 0px #00000026; background: #fff; border-radius: 5px; padding: calc(32 * var(--ratioWidth)) 5vw calc(20 * var(--ratioWidth)) 5vw; } .mlt__page .mlt__duo-body-top { transition:none; position: absolute; } .mlt__page .mlt__duo-day .mlt__duo-body-top { top: 6.25vw; left: 69vw; } .mlt__page .mlt__duo-night .mlt__duo-body-top { top: 49vw; left:-2vw; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-body-top, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-body-top { position: relative; top: 0; left:0; width: 100%; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-body, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-body { width: 100%; } .mlt__page .mlt__duo-body-bottom { width: 100%; transition:none; display: none; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-body-bottom, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-body-bottom { display: block; } .mlt__page .mlt__legend-text { color:#fff; } .mlt__page .mlt__legend-text.mlt__mobile { display: block; color:#797674; padding-top: calc( 20 * var(--ratioWidth)); width: 80%; margin: 0 auto; } .mlt__page .mlt__duo-body-inside {position: relative; width: 100%; } .mlt__page .mlt__duo-bkgd, .mlt__page .mlt__duo-closed-bkgd, .mlt__page .mlt__duo-opened-bkgd { display: none; } .mlt__page .mlt__collection .mlt__duo-content { display: flex; padding: 0; opacity: 1; position: relative;} .mlt__page .mlt__duo-content { padding-top: calc( var(--DuoMediaWidth) * var(--DuoMediaRatio) ); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-body-inside, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-body-inside { width: 100% } .mlt__page .mlt__duo-title { transform: none !important; font-size: calc(24 * var(--ratioWidth)); transition:none; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-title, .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-title { transform: none !important; font-size: calc(36 * var(--ratioWidth)); padding-bottom: calc(28 * var(--ratioWidth)) } .mlt__page .mlt__duo-day .mlt__duo-title { text-align: center; } .mlt__page .mlt__duo-night .mlt__duo-title { text-align: center; padding-left: 0; } .mlt__page .mlt__legend-text.mlt__desktop { display: none; } .mlt__collection-close { display:none; position: absolute; top:calc(18 * var(--ratioWidth)); right:calc(15 * var(--ratioWidth)); cursor: pointer; width:calc(16 * var(--ratioWidth)); } .mlt__collection-close img { width: 100%; display: block; } .mlt__page .mlt__collection[data-duo="day"] .mlt__collection-close, .mlt__page .mlt__collection[data-duo="night"] .mlt__collection-close { display: block; } .mlt__page .mlt__collection-arrow { display: none; } .mlt__page .mlt__collection-more { display:block; position: absolute; width: calc(32 * var(--ratioWidth)); height: calc(32 * var(--ratioWidth)); border-radius: 50%; color:#fff; font-size: calc(24 * var(--ratioWidth)); line-height: calc(32 * var(--ratioWidth)); text-align: center; cursor: pointer; background: #e36677; } .mlt__page .mlt__collection-more-day { top:6vw; left:15.5vw; } .mlt__page .mlt__collection-more-night { top:48.5vw; left:81.5vw; } .mlt__page .mlt__duo-media { display: none; } .mlt__page .mlt__duo-content { align-items: center; } .mlt__page .mlt__duo-night .mlt__duo-content { align-items: center; } .mlt__duo-content { position: absolute; } .mlt__page .mlt__duo-text, .mlt__page .mlt__duo-name, .mlt__page .mlt__duo-price, .mlt__page .mlt__duo-priceperunit { text-align: center !important; } .mlt__page .mlt__duo-percent { text-align: center; } .mlt__page .mlt__duo-percent:nth-child(2n+1) { margin-right: 15px; } .mlt__page .mlt__duo-percent:nth-child(2n) { margin-left: 15px; } .mlt__page .mlt__duo-percent-value { font-size: calc(48 * var(--ratioWidth)); padding-bottom:calc(2 * var(--ratioWidth)); } .mlt__page .mlt__duo-percent-text { font-size: calc(14 * var(--ratioWidth)); max-width: 185px; } .mlt__page .mlt__duo-percents { padding-bottom: calc(24 * var(--ratioWidth)); } .mlt__page .mlt__duo-text { font-size: calc(14 * var(--ratioWidth)); max-width: calc(390 * var(--ratioWidth)); } .mlt__page .mlt__duo-title span { display: inline-flex; } .mlt__page .mlt__duo-title span:before { position: relative; } .mlt__page .mlt__duo-day .mlt__duo-title span:before { width: 1.1em; height: 1.1em; left:0; top:0; margin-right: 0.1em; } .mlt__page .mlt__duo-night .mlt__duo-title span:before { width: 1.1em; height: 1.1em; left:0; top:0; margin-right: 0.1em; } /* .mlt__page .mlt__duo-day { background: linear-gradient(59deg, #f3a0b1, #fbe7eb); } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day { background: linear-gradient(59deg, #ec90a2, #fbe7eb); } .mlt__page .mlt__duo-night { background: linear-gradient(30deg, #dd6272, #f7c0cc); } */ .mlt__page .mlt__collection-legend { padding-top: 0; } .mlt__page .mlt__collection-bottom-inside { padding-bottom: 55px; } /* .mlt__page .mlt__collection { --SlashDeltaWidth:0; --SlashCloseWidth:0; } .mlt__page .mlt__duo-night { width: 50vw; left:50vw; overflow: hidden; transition: width 0.8s, left 0.8s; -webkit-clip-path: none; clip-path: none; height: 100%; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night { -webkit-clip-path: none; clip-path: none } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night { -webkit-clip-path: none; clip-path: none; width: 100vw; left:100vw; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night { -webkit-clip-path: none; clip-path: none; width: 100vw; left:0vw; } .mlt__page .mlt__duo-day .mlt__duo-opened-bkgd { left: 10vw; } .mlt__page .mlt__duo-night .mlt__duo-opened-bkgd { left: 0px; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-day .mlt__duo-opened-bkgd { left:100vw; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-opened-bkgd { left:0vw; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-day .mlt__duo-opened-bkgd { left:0vw; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-opened-bkgd { left:0vw; } .mlt__page .mlt__duo-night .mlt__duo-inside { position: absolute; transition: left 0.8s; width: 100vw; left:-50vw; transform:translateY(var(--PaddingTop)); height: 100%; } .mlt__page .mlt__collection[data-duo="day"] .mlt__duo-night .mlt__duo-inside { left:-100vw; } .mlt__page .mlt__collection[data-duo="night"] .mlt__duo-night .mlt__duo-inside { left:0vw; } */ .mlt__page .mlt__collection-top-bkgd { top:50%; height: 160%; } .mlt__page .mlt__collection-top-bkgd-img { height: 100%; } } .mlt__wrapper-legend { height: 0; position: relative; top:0; left: 0; } .mlt__wrapper-legend .mlt__collection-legend { position: absolute; top:0; left: 0; transform:translateY(-100%); width: 100%; padding-bottom: 30px; } /* innovation */ .mlt__page .mlt__bloc-innovation { height: calc(1092 * var(--ratioWidth)); background: #f194a5; padding-top:calc(100 * var(--ratioWidth));; padding-bottom: 0; overflow: hidden; } .mlt__page .mlt__innovation-insert { background: rgba(255,255,255,0.6); border-radius: var(--RADIUS); position: relative; margin: 0 auto calc(50 * var(--ratioWidth)) auto; width:100%; max-width:calc(770 * var(--ratioWidth)); z-index: 1; } .mlt__page .mlt__innovation-insert-media { width: calc(166 * var(--ratioWidth)); display: block; border-radius: 50%; overflow: hidden; position: absolute; top: calc(50% - (83 * var(--ratioWidth))); left: calc((-1) * 80 * var(--ratioWidth));} .mlt__page .mlt__innovation-insert-picture { width: 100%; display: block; } .mlt__page .mlt__innovation-insert-content { text-align: left; padding: calc(30 * var(--ratioWidth)) 0 calc(35 * var(--ratioWidth)) calc(120 * var(--ratioWidth)); } .mlt__page .mlt__innovation-insert-title { color:var(--COLOR-ROSE); font-size: calc(24 * var(--ratioWidth)); line-height: 1.33em; padding-bottom:calc(10 * var(--ratioWidth)); } .mlt__page .mlt__innovation-insert-text { font-size: calc(18 * var(--ratioWidth)); line-height: 1.33em; } .mlt__page .mlt__innovation-top { position: relative; top:0; left:0; display:flex; max-width: calc(1050 * var(--ratioWidth)); width: 90%; margin: 0 auto; padding-top: calc(140 * var(--ratioWidth)); } .mlt__page .mlt__innovation-bottom { position: relative; max-width: calc(1050 * var(--ratioWidth)); width: 90%; margin: 0 auto; } .mlt__page .mlt__innovation-title { color:#fff; font-size: calc(44 * var(--ratioWidth)); line-height:1.25em; padding-bottom:calc(26 * var(--ratioWidth)); } .mlt__page .mlt__innovation-title small { display: block; font-size: 0.8em; line-height: 1.25em; } .mlt__page .mlt__innovation-media { position: absolute; top:0; left:calc( 50% - calc(800 * var(--ratioWidth)) ); width: calc(1600 * var(--ratioWidth)); } .mlt__page .mlt__innovation-content { position: relative; } .mlt__page .mlt__innovation-content-text { color:#fff; font-size: calc(18 * var(--ratioWidth)); line-height: 1.33em; width:100%; max-width: calc(540 * var(--ratioWidth)); padding-bottom: 1em; } .mlt__page .mlt__innovation-content-subtitle { color:var(--COLOR-ROSE); max-width: calc(540 * var(--ratioWidth)); font-size: calc(24 * var(--ratioWidth)); } @media (max-width: 768px) { .mlt__page .mlt__bloc-innovation {height: auto; } .mlt__page .mlt__innovation-insert { margin-bottom: 0; } .mlt__page .mlt__innovation-insert-media { width: calc(142 * var(--ratioWidth)); position: absolute; top: calc((-1) * 71 * var(--ratioWidth)); left:calc(50% - (71 * var(--ratioWidth)));} .mlt__page .mlt__innovation-insert-content { text-align: center; padding: calc(82 * var(--ratioWidth)) 2vw calc(20 * var(--ratioWidth)) 2vw; } .mlt__page .mlt__innovation-insert-title { font-size: calc(18 * var(--ratioWidth)); padding-bottom:calc(7 * var(--ratioWidth)); } .mlt__page .mlt__innovation-insert-text { font-size: calc(14 * var(--ratioWidth));} .mlt__page .mlt__innovation { text-align: center; padding-top: 0; padding-bottom: calc(30 * var(--ratioWidth)); background: #fdf4f9; } .mlt__page .mlt__innovation-top { justify-content:center; align-items:center; width: 90%; height:50vw; margin: 0 auto calc(391 * var(--ratioWidth)) auto; padding-top: 0; } .mlt__page .mlt__innovation-title { font-size: calc(32 * var(--ratioWidth)); color:var(--COLOR-ROSE); padding-bottom: calc(10 * var(--ratioWidth)); } .mlt__page .mlt__innovation-title small { font-size: 0.72em; line-height: 1.25em; } .mlt__page .mlt__innovation-media { position: absolute; top:0; left:0; width: 100%; } .mlt__page .mlt__innovation-content-text { color:var(--COLOR-DEFAULT); font-size: calc(14 * var(--ratioWidth)); width: 55vw; max-width: font-size: calc(300 * var(--ratioWidth)); margin-left: 35vw; text-align: left; padding-bottom: 1em; } .mlt__page .mlt__innovation-content-subtitle { width: 90%; max-width: 100%; font-size: calc(18 * var(--ratioWidth)); margin: 0 auto; } } /* --- ingredient -- */ .mlt__page .mlt__ingredients { position: absolute; top:0; left:0; width: 100%; height: 100%; } .mlt__page .mlt__ingredient { position: absolute; } .mlt__page .mlt__ingredient[data-item="1"] { top:calc(370 * var(--ratioWidth)); left: calc(50% + (180 * var(--ratioWidth))); } .mlt__page .mlt__ingredient[data-item="2"] { top:calc(667 * var(--ratioWidth)); left: calc(50% + calc(465 * var(--ratioWidth))); } .mlt__page .mlt__ingredient::before { content: "+"; width: calc(32 * var(--ratioWidth)); height: calc(32 * var(--ratioWidth)); border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #e36677; color: #fff; position: absolute; z-index: 3; top: calc(-16 * var(--ratioWidth)); left: calc(-16 * var(--ratioWidth)); font-family: var(--FONT-GOTHAM-BOOK); font-size: calc(22 * var(--ratioWidth)); cursor: pointer; transition: transform ease-in-out 0.25s; } .mlt__page .mlt__ingredient[data-open="1"]::before { transform: rotate(45deg); } .mlt__page .mlt__ingredient-name { background-color: rgba(227, 102, 119, 0.89); font-size: calc(14 * var(--ratioWidth)); line-height: 1.2em; font-weight: normal; margin: 0; color: #fff; position: absolute; display: flex; flex-direction: column; bottom: calc(30 * var(--ratioWidth)); text-align: left; padding: calc(8 * var(--ratioWidth)) calc(12 * var(--ratioWidth)); font-family: var(--GOTHAM-MEDIUM); left: 0; transform: translateX(-50%); } .mlt__page .mlt__ingredient-name span { display: block; white-space: nowrap; } .mlt__page .mlt__ingredient-popin { position: absolute; background-color: #fff; font-size: calc(14 * var(--ratioWidth)); line-height: 1.33em; box-sizing: border-box; top: calc(30 * var(--ratioWidth)); width: calc(254 * var(--ratioWidth)); left: calc((-1) * 125 * var(--ratioWidth)); text-align: center; transition: all ease-in-out 0.5s; overflow: hidden; } .mlt__page .mlt__ingredient-popin-wrapper { padding: calc(15 * var(--ratioWidth)) calc(15 * var(--ratioWidth)); display: block; width: 100%; text-align: center; } .mlt__page .mlt__ingredient[data-open="0"] .mlt__ingredient-popin { max-height: 0 !important; } .mlt__page .mlt__ingredient[data-open="1"] .mlt__ingredient-popin { z-index: 5; } .mlt__page .mlt__ingredient-popin-name { text-transform: uppercase; display: flex; flex-direction: column; color: #e36677; } .mlt__page .mlt__ingredient-popin-text { margin: calc(10 * var(--ratioWidth)) 0; } .mlt__page .mlt__ingredient-popin-link { margin: 0; display: flex; flex-direction: column; font-size: calc(11 * var(--ratioWidth)); line-height: 1.4em; font-family: var(--FONT-GOTHAM-MEDIUM); color: #333; text-transform: uppercase; text-decoration: underline; } .mlt__page .mlt__ingredient-popin-link span { display: block; } .mlt__page .mlt__ingredient-popin-link:hover { text-decoration: none; } @media(max-width:768px) { .mlt__page .mlt__ingredients { margin-top: 76vw; } .mlt__page .mlt__ingredient[data-item="1"] { top:60vw; left: 26vw; } .mlt__page .mlt__ingredient[data-item="2"] { top:102vw; left: 65vw; } .mlt__page .mlt__ingredient[data-item="1"] .mlt__ingredient-popin { left:0; transform: translateX( calc( -70 * var(--ratioWidth)) ); } .mlt__page .mlt__ingredient[data-item="2"] .mlt__ingredient-popin { left:0; transform: translateX( calc( -50% - 10 * var(--ratioWidth)) ); } } /* Background */ .mlt__page .mlt__bkgd { position: relative; background:url(images/bkgd.jpg) center top no-repeat; background-size: calc(1600 * var(--ratioWidth)) auto; } .mlt__page .mlt__bkgd:before { content: ""; position: absolute; top: calc((-1) * 335 * var(--ratioWidth)); left: calc(50% - (800 * var(--ratioWidth))); background: url(images/barres.png) left top no-repeat; background-size:auto 100%; width: calc(544 * var(--ratioWidth)); height: calc(1300 * var(--ratioWidth)); display: block; mix-blend-mode:overlay; } @media(max-width:768px) { .mlt__page .mlt__bkgd { background-image:url(images/bkgd-m.jpg); background-size: 100% auto; } .mlt__page .mlt__bkgd:before { top: -150px; left:-178px; } } /* Routine */ .mlt__page .mlt__bloc-routine { padding-bottom: 100px;text-align: center; overflow: hidden; } .mlt__page .mlt__routine-title { font-size: 30px; line-height: 1.33em; padding-bottom:10px; text-align: center; text-transform: uppercase; } .mlt__routine-selector { display: inline-flex; flex-direction:row; height: 30px; align-items:center; --SELECT-WIDTH: 60px; margin-top: 32px;margin-bottom: 5px;} .mlt__routine-selector-item { color:var(--COLOR-ROSE); font-size: 16px; line-height: 1.16em; padding: 0 12px; font-family: var(--GOTHAM-MEDIUM); text-transform: uppercase; cursor: pointer; } .mlt__routine-selector-select { background: #efefef; width: var(--SELECT-WIDTH); height: 100%; border-radius: 15px; overflow: hidden; position: relative; left:0; top:0; cursor: pointer; } .mlt__routine-selector-track { background: #e36677; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; position: relative; left:calc(50% - 12px); top:calc(50% - 12px); transition: transform 0.25s ease-in-out; } .mlt__routine[data-panel="day"] .mlt__routine-selector-track { transform:translateX( calc(var(--SELECT-WIDTH) * (-0.5) + 18px )); } .mlt__routine[data-panel="night"] .mlt__routine-selector-track { transform:translateX( calc(var(--SELECT-WIDTH) * (0.5) - 18px )); } .mlt__page .mlt__routine-panel { display:none; position: relative; top:0; left:0; width: 100%; padding-top: 0;} .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-panel[data-panel="day"] { display: block; } .mlt__page .mlt__routine[data-panel="night"] .mlt__routine-panel[data-panel="night"] { display: block; } .mlt__page .mlt__routine-products { position: relative;top: 0;left: 0;width: 100%; margin: 0 auto; } .mlt__page .mlt__routine-product { padding: 0 15px; } .mlt__page .mlt__routine-product-media { height: 300px; display: flex; align-items: flex-end; margin: 0 auto; } .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-product[data-item="1"] .mlt__routine-product-media { width:85px; } .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-product[data-item="2"] .mlt__routine-product-media { width:70px; } .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-product[data-item="3"] .mlt__routine-product-media { width:120px; } .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-product[data-item="4"] .mlt__routine-product-media { width:75px; } .mlt__page .mlt__routine[data-panel="day"] .mlt__routine-product[data-item="5"] .mlt__routine-product-media { width:45px; } .mlt__page .mlt__routine[data-panel="night"] .mlt__routine-product[data-item="1"] .mlt__routine-product-media { width:85px; } .mlt__page .mlt__routine[data-panel="night"] .mlt__routine-product[data-item="2"] .mlt__routine-product-media { width:70px; } .mlt__page .mlt__routine[data-panel="night"] .mlt__routine-product[data-item="3"] .mlt__routine-product-media { width:120px; } .mlt__page .mlt__routine-product-content {text-align: center; } .mlt__page .mlt__routine-product-variant { font-size: 10px; line-height: 12px; text-decoration: underline; text-transform: uppercase; min-height: 30px;display: inline-flex;align-items: center;} .mlt__page .mlt__routine-product-variant:hover { text-decoration: none; } .mlt__page .mlt__routine-product-category { color:var(--COLOR-ROSE); font-size: 18px; line-height: 1em; padding-top: 10px; padding-bottom: 12px; border-top: var(--COLOR-ROSE) 1px solid; width: 100%; max-width: 150px; margin: 30px auto 0 auto; } .mlt__page .mlt__routine-product-variant + .mlt__routine-product-category { margin-top: 0px; } .mlt__page .mlt__routine-product-title { font-size: 14px; line-height: 1.375em; min-height: 62px; } .mlt__page .mlt__routine-product-title small { display: block; } .mlt__page .mlt__routine-product-price { font-size: 14px; line-height: 1.375em; font-family: var(--GOTHAM-MEDIUM); } .mlt__page .mlt__routine-product-priceperunit { font-size: 10px; line-height: 1.6em; min-height: 1.6em; } @media (max-width: 768px) { .mlt__page .mlt__bloc-routine .mlt__container { width: 100%; } .mlt__page .mlt__bloc-routine { padding-bottom: 50px; } .mlt__page .mlt__routine-title { font-size: 24px; line-height:1.25em; padding-bottom:10px; width: 90%; margin: 0 auto; } .mlt__page .mlt__routine-product-title { min-height: 52px; } } /* chat */ .mlt__page .mlt__bloc-chat {padding-bottom:100px; } .mlt__page .mlt__chat {position: relative;display: flex;align-items: center;justify-content: stretch;background-color: #fff;border-radius: var(--RADIUS); width: 100%; box-shadow: 0 0 18px rgba(81,44,2, 0.04); } .mlt__page .mlt__chat-media { position: absolute; border-radius: 50%; box-shadow: 0 0 8px rgba(0,0,0,0.2); overflow: hidden; } .mlt__page .mlt__chat-media[data-item="1"] { left:182px; top:-30px; width:182px; } .mlt__page .mlt__chat-media[data-item="2"] { left:60px; bottom:-26px; width:126px; } .mlt__page .mlt__chat-content { text-align: left; padding: 50px 15px 40px 390px; } .mlt__page .mlt__chat-title { color: var(--COLOR-ROSE); font-size:24px; font-family: var(--GOTHAM-MEDIUM); padding-bottom: 18px;} .mlt__page .mlt__chat-text { } .mlt__page .mlt__chat-text a { color:var(--COLOR-DEFAULT); text-decoration: underline; } .mlt__page .mlt__chat-text a:hover { text-decoration: none; } .mlt__page .mlt__chat-decor { position:absolute; width: 292px; top:-4px; left:12px; overflow: hidden; height: calc(100% + 4px); } .mlt__page .mlt__chat-decor-picture { opacity: 0.2; } .mlt__page .mlt__chat-decor-img { transform: scaleX(-1) rotate(10deg); } @media (max-width: 1250px) { .mlt__page .mlt__chat-media[data-item="1"] { left:calc(120px + 6vw); } .mlt__page .mlt__chat-media[data-item="2"] { left:6vw; } .mlt__page .mlt__chat-content { padding-left: calc(9vw + 306px); } } @media (max-width: 768px) { .mlt__page .mlt__bloc-chat { padding-bottom: 30px; } .mlt__page .mlt__chat { display: block; margin-top: 60px; } .mlt__page .mlt__chat-media[data-item="1"] { left:calc(50% - 25px); top:-60px; width:162px; } .mlt__page .mlt__chat-media[data-item="2"] { left:calc(50% - 140px); bottom:auto; width:114px; top: 21px;} .mlt__page .mlt__chat-decor { width: 100%; height:45vw; left:0; top:0px; overflow: hidden; } .mlt__page .mlt__chat-decor-picture { opacity: 0.5; width: 365px; position: absolute; top:-155px; left:calc(50% - 196px); } .mlt__page .mlt__chat-decor-img { transform: scaleX(1) rotate(40deg); } .mlt__page .mlt__chat-media { width: 74%; max-width: 100%; margin: 0 auto;} .mlt__page .mlt__chat-content { padding: 160px 9% 25px 9%; text-align: center; } .mlt__page .mlt__chat-title { font-size:18px; padding-bottom: 8px; } .mlt__page .mlt__chat-text { font-size:16px; } } /* spa */ .mlt__page .mlt__bloc-spa {padding-bottom: 73px; } .mlt__page .mlt__spa { display: flex;align-items: flex-start; text-align: center; position: relative; } .mlt__page .mlt__spa-media { width: 504px; border-radius: var(--RADIUS); overflow: hidden; } .mlt__page .mlt__spa-picture { width: 100%; display: block;} .mlt__page .mlt__spa-body { width: calc( 100% - 504px); text-align: left; padding:10px 40px 0 0; } .mlt__page .mlt__spa-content {} .mlt__page .mlt__spa-title { font-size:30px; padding-bottom: 20px; } .mlt__page .mlt__spa-subtitle { padding-bottom: 20px; } .mlt__page .mlt__spa-text { font-size: 16px; padding-bottom: 1em; } .mlt__page .mlt__spa-bottom { padding-top: 70px; text-align: center; width: 90%; margin:0 auto; } @media (max-width: 1120px) { .mlt__page .mlt__spa-media { width: 45vw; } .mlt__page .mlt__spa-body { width: calc( 100% - 45vw ); } } @media (max-width: 768px) { .mlt__page .mlt__bloc-spa {padding-bottom: 23px; } .mlt__page .mlt__spa { flex-direction:column-reverse; } .mlt__page .mlt__spa-media { width: 100%; } .mlt__page .mlt__spa-body { width: 100%; text-align: center; padding: 25px 0 0 0;} .mlt__page .mlt__spa-title { font-size:24px; padding-bottom: 15px; } .mlt__page .mlt__spa-subtitle { padding-bottom: 10px; } .mlt__page .mlt__spa-text { font-size: 14px; padding-bottom: 27px; } .mlt__page .mlt__spa-bottom { padding-top: 48px; width: 100%; } } /* slick */ .mlt__page .slick-arrow {/*! background: url(images/holy_arrow.svg) left top no-repeat; *//*! background-size: 30% auto; *//*! font-size: 0; *//*! height: 60px; *//*! background-position: center center; *//*! width: 50px; *//*! position: absolute; *//*! display: block; *//*! top: 84px; *//*! cursor: pointer; *//*! z-index: 3; *//*! border: 0px; *//*! transform: none; */ } .mlt__page .slick-arrow.slick-prev {/*! transform: scaleX(-1); */ } .mlt__page .slick-next {right: -2vw; } .mlt__page .slick-prev {left: -2vw; } .mlt__page .slick-arrow:hover { border-radius: 5px; background-color: rgba(255,255,255,.3); box-shadow: 0 0 7px 0 rgba(0,0,0,.15); } .mlt__page .slick-arrow:focus-visible { box-shadow:0 0 0 1px #fff,0 0 0 3px #6893d2 !important; z-index:1 } .mlt__page .slick-prev:not(.cba-button-style), .mlt__page .slick-next:not(.cba-button-style){height:32px; width:32px; min-width:auto; border-color: transparent; padding: 0;} .mlt__page .slick-prev:not(.cba-button-style):focus, .mlt__page .slick-next:not(.cba-button-style):focus {outline : none !important; } .mlt__page .slick-prev:not(.cba-button-style):after, .mlt__page .slick-next:not(.cba-button-style):after { height: 32px; width: 32px; } /* .mlt__page .slick-next, .mlt__page .slick-prev { background-color:transparent; border:1px solid transparent } .mlt__page .slick-next:focus-visible, .mlt__page .slick-prev:focus-visible { box-shadow:0 0 0 1px #fff,0 0 0 3px #6893d2 !important; z-index:1 } .mlt__page .slick-next:focus, .mlt__page .slick-prev:focus { outline:none !important; } .mlt__page .slick-next:focus-visible, .mlt__page .slick-prev:focus-visible { border-radius:5px; background-color:#fff } .mlt__page .slick-next:hover:not(:focus-visible), .mlt__page .slick-prev:hover:not(:focus-visible) { border-radius:5px; background-color:rgba(255,255,255,.3); box-shadow:0 0 7px 0 rgba(0,0,0,.15) } .mlt__page .slick-next:active:not(:focus-visible), .mlt__page .slick-prev:active:not(:focus-visible) { border-radius:5px; background-color:#fff; opacity:1; border:1px solid #e9e3de; outline:none; box-shadow:0 0 7px 0 rgba(0,0,0,.15) } */ .mlt__page .slick-slider:focus { outline:none } .mlt__page .slick-arrow.slick-disabled {height: 0;width: 0;padding: 0;overflow: hidden;margin: -9999px; } .mlt__page .slick-dotted {padding-bottom: 62px; margin-bottom: 0 } .mlt__page .slick-dots {display: block;position: absolute;bottom: 0;list-style: none;text-align: center;padding: 0;margin: 0;width: 100%; height: 10px; } .mlt__page .slick-dots li {font-size: 11px;line-height: 10px;text-decoration: none;display: inline-block;height: 10px;width: 10px;background: #bfbfbf;color: #4e443c;border-radius: 10px;text-indent: -9999px;-webkit-box-shadow: none;box-shadow: none;margin-right: 9px; } @media(min-width: 1024px) {.mlt__page .slick-dots li { margin-right: 7px } } .mlt__page .slick-dots li button {border: 0;background: transparent } .mlt__page .slick-dots li.slick-active {background: #0c0c0c;color: #fff;-webkit-box-shadow: 0 0 2px #f0efe7;box-shadow: 0 0 2px #f0efe7 } @media (max-width: 768px) { .mlt__page .slick-list { overflow: visible;} .mlt__page .slick-track { display: flex;} .mlt__page .slick-next { right: 4vw;} .mlt__page .slick-prev { left: 4vw;} .mlt__page .slick-dotted {padding-bottom: 52px; margin-bottom: 0 } } /*---------------------------------------------------------------------------------------*/ #main:not(.main-homepage) { padding-top: 0; padding: 0 !important; margin: 0 auto !important; max-width: 100%; width: 100% !important; } #wrapper.pt_category-wide .site-width-slot, #wrapper.pt_category-wide .breadcrumb-container { max-width: 100% !important; margin: 0 auto; } /* ------------------------- */ /* .mlt__page .mlt__ingredient[data-item="1"][data-open="0"] .mlt__ingredient-popin { max-height: 115px !important; } */ .mlt__page .mlt__innovation-title { padding-right: 34%; } @media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (-webkit-min-device-pixel-ratio: 2) { } @media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) { .mlt__page .mlt__film-subtitle { width: 64%; margin: 0 auto; } .mlt__page .mlt__film-content { padding: 30px 10px 0 40px; } .mlt__page .mlt__routine-product-variant { line-height: 13px; } .mlt__page .mlt__spa-body { width: calc( 100% - 44vw ); } } @media (orientation : portrait){ .mlt__page .mlt__duo-percent-text { font-size: 12.5px; } } @media only screen and (min-device-width : 834px) and (max-device-width : 1112px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) { .mlt__page .mlt__film-content { padding: 30px 0px 0 20px; } .mlt__page .mlt__film-legend { width: 72%; margin: 0 auto; } .mlt__page .mlt__spa-bottom { width: 78%; } } /*iPhone 13*/ @media (max-width: 480px) { .mlt__page .mlt__film-text:last-of-type, .mlt__page .mlt__collection-top .mlt__title, .mlt__page .mlt__spa-title, .mlt__page .mlt__spa-text{ margin: 0 auto; } .mlt__page .mlt__film-text:last-of-type { width: 83%; } .mlt__legend.mlt__film-legend p.mlt__legend-text { color: var(--COLOR-DEFAULT); } .mlt__page .mlt__collection-top .mlt__title { width: 90%; } .mlt__page .mlt__duo-day .mlt__duo-body-top { left: 68vw; } .mlt__page .mlt__duo-day .mlt__duo-title { font-size: calc(22 * var(--ratioWidth)); } .mlt__page .mlt__duo-night .mlt__duo-body-top { left: 2vw; } .mlt__page .mlt__duo-day .mlt__duo-text, .mlt__page .mlt__duo-night .mlt__duo-text { width: 90%; } .mlt__page .mlt__innovation-title { padding-right: 0; } .mlt__page .mlt__innovation-content-subtitle { width: 84%; } .mlt__page .mlt__spa-title { width: 90%; } .mlt__page .mlt__spa-bottom p.mlt__text.mlt__spa-text { width: 83%; } } /* Multi Active */ #wrapper.pt_wrapper #mlt__page .mlt__navigation { display: none; }