diff --git a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css index 1646baf..4f64799 100644 --- a/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css +++ b/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css @@ -1,100 +1,182 @@ @font-face { font-family: 'gilroy-semibold'; src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff'); - } +} +#sites-map-container { + background-color: transparent; + text-align: center; + position: relative; + width: 155%; + max-width: 600px; + margin: 0 auto; + height: auto; +} +@media (max-width: 810px) { #sites-map-container { - background-color: transparent; - text-align: center; - position: relative; - width: 155%; - max-width: 600px; - margin: 0 auto; - height: auto; + width: 80%; } - @media (max-width: 810px) { - #sites-map-container { - width: 80%; - } +} +@media (max-width: 530px) { + #sites-map-container { + width: 100%; + height: 485px; } - @media (max-width: 530px) { - #sites-map-container { - width: 100%; - height: 485px; - } - } - @media (max-width: 400px) { - #sites-map-container { - width: 100%; - height: 430px; - } - } - #sites-map-container .site-link:hover { - cursor: pointer; +} +@media (max-width: 400px) { + #sites-map-container { + width: 100%; + height: 430px; } +} +#sites-map-container .site-link:hover { + cursor: pointer; +} +#sites-map-container #popup { + font-family: 'gilroy-light'; + display: none; + position: absolute; + z-index: 1000; + text-align: left; + padding-left: 1rem; + /* pointer-events: none; */ +} +@media (max-width: 1090px) { #sites-map-container #popup { - font-family: 'gilroy-light'; - display: none; - position: absolute; - z-index: 1000; - text-align: left; - padding-left: 1rem; - /* pointer-events: none; */ + bottom: 20px; } - @media (max-width: 1090px) { - #sites-map-container #popup { - bottom: 20px; - } - } - @media (min-width: 1090px) { - #sites-map-container #popup { - top: 50%; - left: 80%; - transform: translateY(-50%); - width: 300px; - } - } - #sites-map-container strong { - color: #f7002b; - font-family: 'gilroy-bold'; - } - #sites-map-container a { - /* display: none; */ - align-items: center; - color: white; - background: black; - text-transform: uppercase; - font-size: 0.5rem; - padding-left: 0.5rem; - text-decoration: none; - margin-top: 0.7rem; - height: 1.3rem; - padding-top: 0.2rem; - padding-bottom: 0.2rem; - font-family: 'gilroy-medium'; - display: inline-flex; - - } - #sites-map-container a:after { - display: inline-flex; - content: url("../img/noun-arrow-to-right.svg"); - padding-right: 0.5rem; - padding-left: 0.5rem; +} +@media (min-width: 1090px) { + #sites-map-container #popup { + top: 50%; + left: 88%; + transform: translateY(-50%); + width: 300px; } +} +#sites-map-container strong a { + color: #f7002b; + font-family: 'gilroy-bold'; +} +/* #sites-map-container a { + display: none; + align-items: center; + color: white; + background: black; + color: #f7002b; + font-family: 'gilroy-bold'; + text-transform: uppercase; + font-size: 0.5rem; + padding-left: 0.5rem; + text-decoration: none; + margin-top: 0.7rem; + height: 1.3rem; + padding-top: 0.2rem; + padding-bottom: 0.2rem; + font-family: 'gilroy-medium'; + display: inline-flex; +} */ +/* #sites-map-container a:after { + display: inline-flex; + content: url("../img/noun-arrow-to-right.svg"); + padding-right: 0.5rem; + padding-left: 0.5rem; +} */ +#popup-content { + width: 350px; + padding-right: 30px; + font-size: 0.6rem !important; + position: relative; +} +#popup-content p { + font-size: 0.6rem !important; +} +@media (max-width: 810px) { #popup-content { width: 300px; - padding-right: 30px; - font-size: 0.6rem !important; + background-color: white; + border-radius: 5px; + padding: 0.5rem; + padding-left: 1rem; } - #popup-content p { - font-size: 0.6rem !important; +} +#popup-content ul{ + padding-left: 0; + position: relative; + margin-top: 2rem; +} +#popup-content ul::before { + content: ""; + position: absolute; + top: -55px; + left: 0; + width: 100%; + height: 1px; + background-color: black; + z-index: 0; +} +#popup-content ul li { + position: relative; + color: black; + font-family: "gilroy-semibold"; + /* border-bottom: black solid 1px; */ + padding-top: 0.3rem; + padding-bottom: 0.5rem; + background-color: #f6f7f3; + /* padding-left: 0.3rem; */ +} + +#popup-content ul li::after { + content: ""; + position: absolute; + bottom: 0; + left: 0rem; /* même valeur que le padding-left */ + /* width: calc(100% - 0.3rem); réduit la longueur */ + width: 100%; + height: 1px; + background: black; +} + + +/* Spécifique au li .laureat */ +#popup-content ul li.laureat { + padding-left: 0.1rem; /* on crée la place pour le badge */ + padding-top: 0rem; +} + +/* Badge LAUREAT responsive */ +#popup-content ul li.laureat::before { + content: ""; + position: absolute; + left: -1.3rem; /* aligne avec le début du contenu */ + top: 0%; /* milieu vertical du li */ + transform: translateY(-50%); /* centre verticalement */ + width: 2.3rem; + height: 2.5rem; + background-color: #f6f7f3; + background-image: url("../img/LAUREAT.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + z-index: -1; /* sous le texte mais au-dessus du fond */ +} + +/* Mobile : on resserre tout, le badge suit */ +@media (max-width: 810px) { + #popup-content { + width: 300px; + background-color: white; + border-radius: 5px; + padding: 0.5rem 0.5rem 0.5rem 1rem; } - @media (max-width: 810px) { - #popup-content { - width: 300px; - background-color: white; - border-radius: 5px; - padding: 0.5rem; - padding-left: 1rem; - } + + #popup-content ul li.laureat { + padding-left: 2.4rem; } - \ No newline at end of file + + #popup-content ul li.laureat::before { + width: 2.2rem; + height: 2.2rem; + left: 0.1rem; + top: 0.4rem; + } +} \ No newline at end of file diff --git a/web/modules/custom/q2d_mod/assets/img/LAUREAT.svg b/web/modules/custom/q2d_mod/assets/img/LAUREAT.svg new file mode 100644 index 0000000..ef72509 --- /dev/null +++ b/web/modules/custom/q2d_mod/assets/img/LAUREAT.svg @@ -0,0 +1,32 @@ + + + + + + + + + + +