/* ======================== RESET ======================== */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; object-fit: cover; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; padding: 5px; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* ======================== FONT-FACES ======================== */ @font-face { font-family: 'Share'; src: url('../fonts/Share-Bold.woff2') format('woff2'), url('../fonts/Share-Bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Share'; src: url('../fonts/Share-Regular.woff2') format('woff2'), url('../fonts/Share-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'Share'; src: url('../fonts/Share-Italic.woff2') format('woff2'), url('../fonts/Share-Italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'Share'; src: url('../fonts/Share-BoldItalic.woff2') format('woff2'), url('../fonts/Share-BoldItalic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Coda'; src: url('../fonts/Coda-ExtraBold.woff2') format('woff2'), url('../fonts/Coda-ExtraBold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Coda'; src: url('../fonts/Coda-Regular.woff2') format('woff2'), url('../fonts/Coda-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?x8kh4h'); src: url('../fonts/icomoon.eot?x8kh4h#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?x8kh4h') format('truetype'), url('../fonts/icomoon.woff?x8kh4h') format('woff'), url('../fonts/icomoon.svg?x8kh4h#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ARROWS (TRIANGLE) */ .icon-arrow-up:before { content: "\e914"; } .icon-arrow-down:before { content: "\e907"; } .icon-arrow-left:before { content: "\e90f"; } .icon-arrow-right:before { content: "\e913"; } /* ARROWS (FAT) */ .icon-arrow-fat-up:before { content: "\e90e"; } .icon-arrow-fat-down:before { content: "\e917"; } .icon-arrow-fat-left:before { content: "\e90d"; } /* attention au nom... */ .icon-arrow-right-fat:before { content: "\e906"; } /* ARROW (LIGHT) */ .icon-arrow-light-up:before { content: "\e912"; } .icon-arrow-light-down:before { content: "\e910"; } .icon-arrow-light-left:before { content: "\e911"; } /* attention au nom... */ .icon-arrow-right-light:before { content: "\e901"; } /* HEADER */ .icon-picto-profile:before { content: "\e900"; font-size: 1.7em; } .icon-picto-cart:before { content: "\e902"; } .icon-picto-search:before { content: "\e904"; color: var(--dolpo--color--neutral-grey); } /* STARS */ .icon-star:before { content: "\e90b"; } .star-outline:before { content: "\e90c"; position: relative; top: -1px; font-size: 0.9rem; } /* CTA */ .icon-picto-library:before { content: "\e908"; } .icon-picto-heart:before { content: "\e903"; } .icon-picto-send:before { content: "\e905"; } /* BLOG */ .icon-user:before { content: "\e909"; } /* OTHERS */ .icon-notification:before { content: "\e90a"; } .icon-croix:before { content: "\e915"; color: var(--dolpo--color--primary-magenta); } .icon-delete:before { content: "\e916"; } /* ======================== VARIABLES ======================== */ :root { /* Color */ /* Primary */ /* Index (Header/Footer) */ --dolpo--color--primary-violet: #2D2A36; --dolpo--color--primary-magenta: #E6007E; --dolpo--color--primary-blue: #36A9E1; /* secondary */ --dolpo--color--secondary-blue-o: #2D2E83; --dolpo--color--secondary-blue-c: #36A9E1; --dolpo--color--secondary-blue-p: #29235C; --dolpo--color--secondary-green-f: #2FAC66; --dolpo--color--secondary-green-p: #DEDC00; --dolpo--color--secondary-green-e: #00A19A; --dolpo--color--secondary-green-pin: #006633; --dolpo--color--secondary-orange: #E94E1B; --dolpo--color--secondary-violet: #662483; --dolpo--color--secondary-purple: #A3195B; --dolpo--color--secondary-yellow: #F9B233; --dolpo--color--secondary-yellow-o: #FFED00; --dolpo--color--secondary-lightgrey: #EDEDED; --dolpo--color--secondary-brown: #A48A7B; /* Neutral */ --dolpo--color--neutral-white: #ffffff; --dolpo--color--neutral-grey: #989898; --dolpo--color--neutral-grey-d: #5E5E5E; --dolpo--color--neutral-grey-c: #DBDBDB; --dolpo--color--neutral-black: #000; /* font-size */ --dolpo--font-size--12px: .75rem; --dolpo--font-size--13px: .8125rem; --dolpo--font-size--14px: .875rem; --dolpo--font-size--18px: 1.125rem; --dolpo--font-size--19px: 1.1875rem; --dolpo--font-size--20px: 1.25rem; --dolpo--font-size--22px: 1.375rem; --dolpo--font-size--24px: 1.5rem; --dolpo--font-size--26px: 1.625rem; --dolpo--font-size--28px: 1.75rem; --dolpo--font-size--32px: 2rem; --dolpo--font-size--42px: 2.625rem; --dolpo--font-size--44px: 2.75rem; } /* ======================== COMMON ELEMENTS ======================== */ .item--qnt { display: inline-block; vertical-align: top; margin-left: 10px; font-size: 0.6875rem; color: var(--dolpo--color--primary-magenta); } .section-title .item--qnt { font-size: 1.125rem; } input[type="search"] { border-radius: 5px; } button { cursor: pointer; } /* SUGGESTION DE RECHERCHE DANS LA BARRE DE RECHERCHE */ .suggestion__list { position: absolute; top: 42px; width: 100%; padding: 6px 10px; background-color: var(--dolpo--color--neutral-grey-c); color: var(--dolpo--color--neutral-grey-d); border-radius: 5px; box-shadow: 0px 4px 27px 0px rgba(0, 0, 0, 0.25); } .suggestion__list--serie { border-bottom: 1px solid var(--dolpo--color--neutral-grey-d); } .suggestion__item { display: flex; column-gap: 8px; align-items: center; padding: 10px 0; } .suggestion__item .img-thumb { width: 29px; height: 43px; } /* ======================== Formulaire ======================== */ .contact-box { display: flex; padding: 4px 8px; border: 1px solid var(--dolpo--color--neutral-grey-c); margin-bottom: 16px; } .contact-box label { width: 100%; max-width: fit-content; margin-right: 10px; white-space: nowrap; } .contact-box select { width: 100%; } textarea.contact-box { width: 100%; min-height: 100px; } .contact-box input:not([type=radio], [type=checkbox]), .client__contact-form input:not([type=radio], [type=checkbox]) { width: 100%; } .contact-box input[type="checkbox"], .contact-box input[type="radio"] { position: relative; width: 20px; height: 20px; margin-right: 6px; border: 1px solid var(--dolpo--color--neutral-grey-d); } .contact-box--select { position: relative; } .contact-box--select::after { content: ""; position: relative; top: 5px; right: 5px; width: 20px; height: 20px; background-image: url(../img/img-pictos/arrow-down-black.svg); background-repeat: no-repeat; } /* ======================== ETIQUETTE SOUS-GENRE ======================== */ .sub-genre__item { position: relative; display: flex; justify-content: center; align-items: center; width: 133px; height: 37px; padding-top: 2px; margin: 10px 22px; text-align: center; text-transform: uppercase; font-family: 'Coda'; font-weight: 800; color: var(--dolpo--color--neutral-white); background-color: var(--dolpo--color--secondary-green-e); } .sub-genre__item--link { line-height: 1.1; } .sub-genre__item::before { content: ""; position: absolute; left: -22px; width: 22px; height: 40px; background-image: url(../img/img-pictos/deco-ctg-left.svg); background-repeat: no-repeat; background-position: left; } .sub-genre__item::after { content: ""; position: absolute; right: -20px; width: 20px; height: 43px; background-image: url(../img/img-pictos/deco-ctg-right-mobile.svg); background-repeat: no-repeat; background-position: right; } .sub-genre__title--small { font-size: 0.625rem; } @media screen and (min-width: 1080px){ .sub-genre__item { width: 277px; height: 37px; } .sub-genre__item--link { font-size: var(--dolpo--font-size--22px); } .sub-genre__title--small { font-size: 0.6875rem; } .sub-genre__item::before { left: -20px; width: 22px; height: 50px; } .sub-genre__item::after { right: -28px; width: 40px; height: 50px; background-image: url(../img/img-pictos/deco-ctg-right.svg); } } /* ======================== CUSTOM ELEMENTS ======================== */ .bold { font-weight: bold!important; } .text--center { text-align: center!important; } .text--upper { text-transform: uppercase!important; } .text--italic { font-style: italic; } .text--small { font-size: var(--dolpo--font-size--14px)!important; } .text--medium { font-size: var(--dolpo--font-size--20px)!important; } .w-100 { width: 100%!important; } .my-10 { margin: 10px 0!important; } .my-20 { margin: 20px 0!important; } .my-40 { margin: 40px 0!important; } .mt-20 { margin-top: 20px!important; } .mt-40 { margin-top: 40px!important; } .mb-20 { margin-bottom: 20px!important; } .mb-40 { margin-bottom: 40px!important; } .py-10 { padding: 10px 0!important; } .py-20 { padding: 20px 0!important; } .py-40 { padding: 40px 0!important; } .pt-20 { padding-top: 20px!important; } .pt-40 { padding-top: 40px!important; } .pb-20 { padding-bottom: 20px!important; } .pb-40 { padding-bottom: 40px!important; } .flex--wrap { display: flex!important; align-items: flex-start; flex-wrap: wrap!important; column-gap: 30px; row-gap: 30px; width: 100%; } .flex--center { display: flex!important; justify-content: center; column-gap: 20px; width: 100%; } .flex--align--center { display: flex!important; align-items: center!important; column-gap: 10px; } .flex--right { display: flex!important; justify-content: flex-end!important; column-gap: 20px!important; width: 100%; } .flex--sbetween { display: flex!important; align-items: flex-start; justify-content: space-between; column-gap: 20px; width: 100%; } .d-block { display: block!important; } .d-block-mobile { display: block!important; } /* Pour texte comme sur la page Wiki */ .row-desktop { display: flex!important; flex-direction: column!important; row-gap: 30px; text-align: justify; } @media screen and (min-width: 1080px){ .d-block-mobile { display: inline-block!important; } .row-desktop { flex-direction: row!important; column-gap: 30px; text-align: justify; } } /* BG COLORS */ .bg--grey { background-color: var(--dolpo--color--neutral-grey)!important; } .bg--magenta { background-color: var(--dolpo--color--primary-magenta)!important; } .bg--purple { background-color: var(--dolpo--color--secondary-purple)!important; } .bg--yellow { background-color: var(--dolpo--color--secondary-yellow)!important; } .bg--violet { background-color: var(--dolpo--color--secondary-violet)!important; } .bg--blue-o { background-color: var(--dolpo--color--secondary-blue-o)!important; } .bg--blue-c { background-color: var(--dolpo--color--secondary-blue-c)!important; } .bg--green-o { background-color: var(--dolpo--color--secondary-green-e)!important; } .bg--orange { background-color: var(--dolpo--color--secondary-orange)!important; } /* TEXT COLORS */ .text--magenta { color: var(--dolpo--color--primary-magenta)!important; } .text--grey { color: var(--dolpo--color--neutral-grey)!important; } .text--green-f { color: var(--dolpo--color--secondary-green-f)!important; } .text--orange { color: var(--dolpo--color--secondary-orange)!important; } .text--blue-c { color: var(--dolpo--color--secondary-blue-c)!important; } /* ======================== BASES ======================== */ body { position: static; width: 100%; height: 100%; font-family: 'Share'; font-size: 1rem; color: var(--dolpo--color--primary-violet); padding-top: 177px; margin-top: -177px; } #main { display: flex; justify-content: flex-start; align-items: flex-start; margin-top: 220px; /* Hauteur du header */ } .main__container { width: 100%; padding: 10px 12px 45px 12px; } .main__container--category { width: 100%; } section { position: relative; margin: 30px auto; max-width: 1180px; } .subst--section { position: relative; margin: 30px auto; max-width: 1200px; } @media screen and (min-width: 1080px){ .main__container { width: 100%; padding: 10px 20px 45px 20px; } .main__container--category { width: calc(100% - 237px); } } /* ======================== HEADER ======================== */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 182px; color: var(--dolpo--color--neutral-white); background-color: var(--dolpo--color--primary-violet); border-bottom: 3px solid #c21500; border-image-source: linear-gradient(90deg, #F0564C 2.08%, #F0DC22 21.87%, #6EF031 43.75%, #3ECDEC 63.54%, #3244EA 82.29%, #BA20E0 100%); border-image-slice: 1; z-index: 99; -webkit-transition: -webkit-transform .25s ease; transition: transform .25s ease, -webkit-transform .25s ease; } .header--unpinned { -webkit-transform: translateY(-150%); transform: translateY(-150%); transition: transform .25s ease, -webkit-transform .25s ease; } /* STRUCTURE HEADER MOBILE */ .header__content { display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(2, auto); row-gap: 18px; justify-items: center; padding: 16px; } /* LOGO */ .header__logo { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: center; align-self: center; width: 133px; height: 53px; margin-left: 16px; } /* SEARCH FIELD */ .header__search { position: relative; grid-column: 1 / 4; grid-row: 2 / 3; position: relative; align-self: center; width: 100%; height: 48px; } #search-field { width: 100%; height: 48px; padding-left: 10px; color: var(--dolpo--color--neutral-grey); background-color: var(--dolpo--color--secondary-lightgrey); } .button--search { position: absolute; right: 28px; top: 15px; } /* BUTTON CTA(PROFIL/CART) */ .header__cta { position: relative; grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; align-self: center; display: flex; column-gap: 9px; } .cta-title { display: none; } .cta--profil, .cta--cart { width: 45px; height: 45px; z-index: 9; } .header__cta .icon-picto-cart { font-size: 1.7em; z-index: 1; } .header__cta .icon-picto-profile { z-index: 1; } .cta--profil { background-color: var(--dolpo--color--primary-magenta); } .cta--profil:hover { background-color: #C4227B; transition: all .25s ease-in-out; } .cta--cart { background-color: var(--dolpo--color--primary-blue); } .cta--cart:hover { background-color: #4DA1CA; transition: all .25s ease-in-out; } /* MENU */ .header__menu { grid-column: 1 / 2; grid-row: 1 / 2; justify-self: start; margin-top: 10px; } .button--close-menu { position: absolute; top: 20px; right: 20px; width: 70px; height: 37px; padding: 10px 13px; font-size: 0.875rem; text-transform: uppercase; color: var(--dolpo--color--primary-blue); background: rgba(54, 169, 225, 0.12); } /* =========== MENU MOBILE =========== */ @media screen and (max-width: 1080px){ #header .button--close-menu { display: none; } /* BURGER ICON */ .button--burger { position: absolute; display: flex; width: 26px; height: 23px; justify-content: center; align-items: center; cursor: pointer; z-index: 999; } .button--burger span, .button--burger span:before, .button--burger span:after { content: ''; position: absolute; display: block; height: 5px; width: 26px; border-radius: 14px; background-color: var(--dolpo--color--neutral-white); transition: all .3s; } .button--burger span:before { bottom: 10px; } .button--burger span:after { top: 10px; } /* ===== JS CONTROL ===== */ .button--burger.active span { background-color: transparent; transition: all .3s; } .button--burger.active span::before { bottom: 0; transform: rotate(45deg); transition: all .3s; } .button--burger.active span::after { top: 0; transform: rotate(-45deg); transition: all .3s; } .menu__content { position: absolute; display: none; top: 78px; left: 0; width: 100vw; height: 100vh; opacity: 0; padding: 25px 19px 0 42px; color: #000; background-color: var(--dolpo--color--neutral-white); transform: translateX(-150%); transition: all .3s ease; overflow-y: scroll; } .menu__content.active { opacity: 1; transform: translateX(0); transition: all .3s ease; animation: BurgerSlide .3s; } .menu__content.active-display { display: block; } @keyframes BurgerSlide { 0% { opacity: 0; transform: translateX(-150%); } 100% { opacity: 1; transform: translateX(0); } } /* SEARCH FIELD IN BURGER MENU */ .menu__search--burger { position: relative; } #search-field--burger { position: relative; width: 100%; height: 45px; padding: 0 40px 0 15px; margin-bottom: 10px; background-color: var(--dolpo--color--secondary-lightgrey); } .menu__search--burger .button--search--burger { position: absolute; top: 0px; right: 20px; } .menu__item, .submenu__item, .submenu__title, .sub-submenu__item, .sub-submenu__title { width: 100%; max-width: 300px; font-weight: 700; background-image: url(../img/img-pictos/arrow-right-triangle-black.svg); background-repeat: no-repeat; background-position: top 18px right; background-size: 10px; } /* BORDER */ .menu__item--link, .submenu__item--link, .submenu__title--link, .sub-submenu__item--link, .sub-submenu__title--link { position: relative; display: block; padding: 14px 0; } .menu__item--link::after, .submenu__item--link::after, .submenu__title--link::after, .sub-submenu__item--link::after, .sub-submenu__title--link::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(to right,#ACACAC, #fff); } .menu__item .icon-arrow-down { display: none; } .submenu__icon--back { display: block; margin-bottom: 18.5px; color: var(--dolpo--color--neutral-grey); } .submenu__icon--back .icon-arrow-right-fat { display: inline-block; font-size: 0.75rem; transform: rotate(180deg); } /* SUB-SUBMENU */ .ss-menu-panel { top: 0; left: 0; width: 100%; height: 100%; background-color: var(--dolpo--color--neutral-white); } .sub-submenu__columns { display: flex; flex-direction: column; } /* ========== JS CONTROL SUB-MENU ===========*/ /* SUBMENU PANEL APPEARANCE */ .s-menu-panel, .ss-menu-panel { position: absolute; display: none; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; /* à régler... */ height: 200vh; padding: 25px 19px 0 42px; color: #000; background-color: var(--dolpo--color--neutral-white); transform: translateX(-150%); transition: all .3s ease-in-out; z-index: 9; } .s-menu-panel.active { opacity: 1; animation: MenuSlide .3s; transform: translateX(0); transition: all .3s ease-in-out; } .s-menu-panel.active-display { display: block; } @keyframes MenuSlide { 0% { opacity: 0; transform: translateX(-150%); } 100% { opacity: 1; transform: translateX(0); } } /* SUB-SUBMENU APPEARANCE */ .ss-menu-panel { display: none; opacity: 0; transform: translateX(-150%); transition: all .3s ease-in-out; } .ss-menu-panel.active { position: absolute; opacity: 1; animation: S-MenuSlide .3s; transform: translateX(0); transition: all .3s ease-in-out; } .ss-menu-panel.active-display { display: flex; flex-direction: column; } @keyframes S-MenuSlide { 0% { opacity: 0; transform: translateX(-150%); } 100% { opacity: 1; transform: translateX(0); } } } /* MENU HEADER (DESKTOP) */ @media screen and (min-width: 1080px){ .header__content { position: relative; grid-template-columns: repeat(3, min-content); justify-content: center; column-gap: 16px; } .header__content::before { content: ""; position: absolute; top: 10px; left: calc(50vw - 700px); width: 128px; height: 149px; background-image: url(../img/img-decos/flower-menu.svg); } .header__content::after { content: ""; position: absolute; top: 10px; right: calc(50vw - 700px); width: 128px; height: 149px; background-image: url(../img/img-decos/dragon-menu.svg); } /* LOGO */ .header__logo { grid-column: 1 / 2; grid-row: 1 / 2; justify-self: auto; width: 240px; height: 94px; margin-right: 18px; } /* SEARCH FIELD */ .header__search { grid-column: 2 / 3; grid-row: 1 / 2; position: relative; width: 100%; min-width: 412px; height: 48px; } /* BUTTON CTA(PROFIL/CART) */ .header__cta { grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; display: flex; column-gap: 9px; } .cta-title { display: block; padding-left: 14px; } .cta--profil, .cta--cart { display: flex; align-items: center; justify-content: center; width: 171px; height: 48px; } /* MENU */ .header__menu { grid-column: 1 / 4; grid-row: 2 / 3; justify-self: center; } .button--burger, #check--burger { display: none; } /* MENU CONTENT */ .menu__content { display: flex; } .menu__search--burger { display: none; } .menu__item { position: initial; width: auto; height: 23px; padding: 0; background-image: none; border-right: 1px solid var(--dolpo--color--neutral-grey); } .menu__item--link:hover, .menu__item--link.active { color: var(--dolpo--color--primary-blue); } .menu__item:last-of-type { border-right: none; } .menu__item::after { width: 0; height: 0; } .menu__item--link { display: flex; align-items: center; padding: 2px 20px; } .menu__item:first-of-type .menu__item--link { padding: 2px 20px 2px 0; } .menu__item:last-of-type .menu__item--link { padding: 2px 0 2px 20px; } .menu__item--link .icon-arrow-down { font-size: 0.375rem; padding-left: 9px; } /* SUBMENU PANEL */ .submenu { position: absolute; top: 193px; left: 50%; transform: translateX(-50%); width: 1257px; height: 388px; color: var(--dolpo--color--primary-violet); background-color: var(--dolpo--color--neutral-white); box-shadow: 0px 4px 27px rgba(0, 0, 0, 0.25); } .submenu__icon--back { display: none; } .submenu__items--zone { width: 301px; height: 378px; padding: 29px 64px 0 47px; margin: 4px; background-color: var(--dolpo--color--secondary-lightgrey); } .submenu__title, .sub-submenu__title { margin-bottom: 18px; font-family: 'Coda'; font-weight: 900; text-transform: uppercase; color: var(--dolpo--color--primary-magenta); } .submenu__title span:nth-child(2), .sub-submenu__title span:nth-child(2) { display: block; font-size: 1.5rem; } .submenu__item--link { display: block; margin-bottom: 12px; font-weight: 700; } .submenu__item--link:hover, .submenu__item--link.active-page { color: var(--dolpo--color--secondary-orange); background-image: url(../img/img-pictos/arrow-right-light-orange.svg); } .submenu__item--link, .bg-arrow-right-light { background-image: url(../img/img-pictos/arrow-right-light-black.svg); background-repeat: no-repeat; background-position: right; background-size: 13.5px; } .bg-arrow-right-light.link--auteurs { background-image: url(../img/img-pictos/arrow-right-light-blue.svg); } .bg-arrow-right-light.link--series { background-image: url(../img/img-pictos/arrow-right-light-brown.svg); } /* SUB-SUBMENU PANEL */ .sub-submenu { position: absolute; display: flex; column-gap: 40px; top: 0; left: 301px; padding: 33px 30px 39px 76px; z-index: 9; } /* SUB-SUBMENU CATEGORY */ .sub-submenu__columns { display: flex; column-gap: 40px; } .sub-submenu__columns > li:last-of-type { width: 150px; font-weight: 700!important; } .sub-submenu__title { color: var(--dolpo--color--secondary-violet); } .sub-submenu__item--link { display: block; margin-bottom: 12px; font-weight: 400; } .sub-submenu__columns > li:last-of-type .sub-submenu__item--link { font-weight: 700; } .hors-les-murs .sub-submenu__title { color: var(--dolpo--color--primary-blue); } /* COLORS ON LINKS */ .link--nouveautes { color: var(--dolpo--color--primary-magenta); } .link--auteurs { color: var(--dolpo--color--secondary-green-e); } .link--series { color: var(--dolpo--color--secondary-brown); } .button--close-menu { display: block; } /* JS CONTROL*/ /* SUBMENU PANEL APPEARANCE */ .s-menu-panel { display: none; opacity: 0; transition: all .1s ease-in-out; } .s-menu-panel.active { opacity: 1; animation: MenuFade .3s; transition: all .1s ease-in-out; } .s-menu-panel.active-display { display: block; } @keyframes MenuFade { 0% { opacity: 0; margin-top: -20px; } 100% { opacity: 1; margin-top: 0; } } /* SUB-SUBMENU APPEARANCE */ .ss-menu-panel { display: none; opacity: 0; transform: translateX(-20px); transition: all .1s ease-in-out; } .ss-menu-panel.active { opacity: 1; animation: S-MenuFade .3s; transform: translateX(0); transition: all .1s ease-in-out; } .ss-menu-panel.active-display { display: flex; } @keyframes S-MenuFade { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } } /* ======================== FOOTER ======================== */ #footer { position: relative; bottom: 0; width: 100%; color: var(--dolpo--color--neutral-white); background-color: var(--dolpo--color--primary-violet); z-index: 10; } .footer__menu { display: flex; flex-direction: column; justify-content: center; row-gap: 26px; width: 100%; max-width: 1512px; margin: 0 auto; padding: 20px 28px; } .footer__item--link { display: block; padding: 4px 0; font-weight: 400; } .menu__column:first-of-type .footer__item--link { padding: 8px 0; } .footer__item--title { padding: 0 0 16px 0; font-weight: 700; } .newsletter__title { font-family: 'Coda'; font-weight: 800; font-size: 1.625rem; margin-top: 24px; margin-bottom: 13px; } .newsletter__field { position: relative; } #newsletter { width: 100%; max-width: 450px; height: 48px; padding: 24px; color: var(--dolpo--color--neutral-grey); font-style: italic; background-color: var(--dolpo--color--neutral-white); } .button--newsletter { position: absolute; top: 0; right: 24px; color: var(--dolpo--color--primary-magenta); } #footer__mentions ul { display: flex; justify-content: flex-start; column-gap: 21px; padding: 20px; color: var(--dolpo--color--neutral-grey); } #footer a:hover { opacity: .7; transition: all .25s ease-in-out; } @media (min-width: 1080px) { .footer__menu { display: flex; flex-direction: row; justify-content: space-between; } #newsletter { width: 364px; height: 48px; margin-top: 0; } #footer__mentions ul { display: flex; justify-content: flex-end; } } /* ======================== DIRECTORY / SIDE MENU ======================== */ #main__side-menu { display: none; } #site-directory { position: absolute; display: block; top: 182px; padding: 18px 20px 8px 20px; background-color: var(--dolpo--color--neutral-white); } #site-directory ul { display: flex; color: var(--dolpo--color--neutral-grey); } .site-directory__item { position: relative; margin: 0 10px; } .site-directory__item:first-of-type { margin: 0 10px 0 0; } .site-directory__item:not(:last-of-type)::after { content: "/"; position: absolute; top: 0; right: -14px; } .site-directory__item .active-page { color: var(--dolpo--color--neutral-black); } @media screen and (min-width: 1080px){ #main__side-menu { display: block; position: sticky; top: 220px; bottom: 0; width: 100%; min-width: 237px; max-width: 237px; height: 100%; max-height: 100vh; /* margin-bottom: 337px; */ background-color: var(--dolpo--color--neutral-white); /* float: left; */ overflow-y: scroll; z-index: 9; transition: transform .4s ease, -webkit-transform .4s ease; } .side-menu--unpinned { -webkit-transform: translateY(-200px); transform: translateY(-200px); transition: transform .4s ease, -webkit-transform .4s ease; } .side-menu__content { padding: 25px 0; } .side-menu__item--link { position: relative; display: block; padding: 12px; font-size: var(--dolpo--font-size--18px); color: var(--dolpo--color--neutral-grey); background-image: url(../img/img-pictos/arrow-right-light-grey.svg); background-repeat: no-repeat; background-position: center right 15px; background-size: 13px; border-bottom: 1px solid var(--dolpo--color--secondary-lightgrey); } .side-menu__item--title { padding: 0 0 12px 17px; font-family: 'Coda'; font-weight: 800; font-size: 0.9rem; } .side-menu__item--title .icon-arrow-down { position: relative; top: -4px; font-size: 0.6rem; margin-left: 5px; } .side-menu__banner { display: block; height: 100%; text-align: center; margin: 90px 0 100px 0; } .side-menu__banner a { height: 100%; } } /* ======================== SLIDER SETTING ======================== */ section#category__slider, .subst--section#category__slider { width: 100%; max-width: 1500px; position: relative; } section#category__slider > section, .subst--section#category__slider > .subst--section { width: 100%; max-width: 1500px; } .splide { position: relative; } .splide__slide { display: flex; justify-content: center; } .splide__arrows { position: absolute; display: flex; flex-direction: row-reverse; bottom: -40px; left: 50%; } .splide__arrow { background-color: transparent; background-image: url(../img/img-pictos/arrow-right-black.svg); background-repeat: no-repeat; background-size: 25px; border-radius: 0; } .splide__arrow--prev { background-image: url(../img/img-pictos/arrow-left-black.svg); left: -2.8rem; } .splide__arrow--next { right: -2.8rem; } .splide__arrow svg { display: none; } .splide__pagination { display: none; } @media screen and (min-width: 1400px){ .splide__arrows { position: absolute; top: 50%; left: auto; right: 0; width: 100px; transform: translateY(-50%); z-index: 9; } .splide__arrow { background-image: url(../img/img-pictos/arrow-right-black.svg); left: auto; right: auto; } .splide .splide__arrow--prev { background-image: url(../img/img-pictos/arrow-left-black.svg); display: none; } .slider-gradation { position: absolute; top: 0; right: 0; width: 10%; height: 100%; background: linear-gradient(to right, #ffffff00 ,#FFF); z-index: 7; } } /* ======================== K-pis (4 picto) ======================== */ #kpis { display: flex; flex-direction: column; align-items: center; row-gap: 40px; margin-top: 100px; } .kpis__bloc { display: grid; grid-template-columns: auto; grid-template-rows: 90px auto auto; justify-items: center; width: 100%; max-width: 237px; text-align: center; } .kpis__picto { align-self: center; max-width: 100px; max-height: 70px; margin-bottom: 24px; } .kpis__title { font-size: var(--dolpo--font-size--20px); font-weight: 700; margin-bottom: 10px; } .kpis__bloc-01 .kpis__title { color: var(--dolpo--color--secondary-orange); } .kpis__bloc-02 .kpis__title { color: var(--dolpo--color--primary-blue); } .kpis__bloc-03 .kpis__title { color: var(--dolpo--color--secondary-yellow); } .kpis__bloc-04 .kpis__title { color: var(--dolpo--color--primary-magenta); } .kpis__description { font-weight: 400; color: var(--dolpo--color--neutral-grey); } .kpis__logo-payment { margin-top: 6px; } .kpis__logo-payment img { max-width: 70px; } @media screen and (min-width: 480px){ #kpis { display:grid ; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1f); justify-content: center; align-items: start } .kpis__bloc { justify-self: center; } } @media screen and (min-width: 900px){ #kpis { display: flex; flex-direction: row; justify-content: center; align-items: start; column-gap: 20px; margin-top: 135px; } }