/*** * ###### ######## ## ## ######## ######## ### ## * ## ## ## ### ## ## ## ## ## ## ## * ## ## #### ## ## ## ## ## ## ## * ## #### ###### ## ## ## ###### ######## ## ## ## * ## ## ## ## #### ## ## ## ######### ## * ## ## ## ## ### ## ## ## ## ## ## * ###### ######## ## ## ######## ## ## ## ## ######## */ img { max-width: 100%; height: auto; } :root { --wrapper_margin: 8rem; --wrapper_w: calc(100vw - var(--wrapper_margin) * 2); --wrapper_col: calc(var(--wrapper_w) / 12); --wrapper_side_space: var(--wrapper_margin); /** * Variables couleur */ --color_primary : #263f8f; --color_secondary: #D9C070; --color_red: #e84855; } @media screen and (max-width: 760px) { :root { --wrapper_margin: 5rem; } } /*** * ## ### ## ## ####### ## ## ######## * ## ## ## ## ## ## ## ## ## ## * ## ## ## #### ## ## ## ## ## * ## ## ## ## ## ## ## ## ## * ## ######### ## ## ## ## ## ## * ## ## ## ## ## ## ## ## ## * ######## ## ## ## ####### ####### ## */ .wrapper { width: var(--wrapper_w); max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; } section { padding-top: 4rem; } /*** * ######## ## ## ######## ####### ###### ######## ### ######## ## ## #### ######## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## #### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ######## ## ## ## #### ######## ## ## ######## ######### ## ###### * ## ## ## ## ## ## ## ## ## ######### ## ## ## ## ## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ## ####### ###### ## ## ## ## ## ## ## #### ######## */ .u-h1 { font-size: 36px; font-weight: 600; } .u-h2 { font-size: 28px; font-weight: 600; } /* .u-h3 {} .u-h4 {} */ /*** * ## ## ####### ######## ## ## ## ### ######## ######## ## ####### ###### ## ## ###### * ### ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * #### #### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ### ## ## ## ## ## ## ## ## ## ## ######## ######## ## ## ## ## ##### ###### * ## ## ## ## ## ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ####### ######## ####### ######## ## ## ## ## ######## ######## ####### ###### ## ## ###### */ /* .modular-blocks { padding: 0 8rem 0 0; } */ .modular-blocks * { position: relative; box-sizing: border-box; -webkit-box-sizing: border-box; } .modular-blocks p { text-align: justify; } .modular-blocks figure { float: unset; margin: 0; } .modular-blocks figcaption { font-size: 16px; font-style: italic; } /** * Text-MB */ .text-mb__wysiwyg { max-width: 75%; } .text-mb__wysiwyg p { font-size: 18px; line-height: 1.5; } @media screen and (max-width: 960px) { .text-mb__wysiwyg { max-width: 100%; } } /** * Text-Image-MB */ .text-image-mb__wrapper { display: flex; justify-content: space-between; align-items: center; } .text-image-mb:nth-of-type(odd) .text-image-mb__wrapper { flex-direction: row-reverse; } .text-image-mb__wysiwyg { width: calc(var(--wrapper_col) * 4.5); } .text-image-mb__wysiwyg p { font-size: 18px; line-height: 1.5; } .text-image-mb__image { width: calc(var(--wrapper_col) * 4.5); overflow: hidden; } .text-image-mb__image img {width: 100%; object-fit: cover; } @media screen and (max-width: 960px) { .text-image-mb__wrapper, .text-image-mb:nth-of-type(odd) .text-image-mb__wrapper { flex-direction: column; } .text-image-mb__wysiwyg { width: 100%; } .text-image-mb__image { width: 100%; overflow: hidden; } } /** * Media-MB */ .media-mb__media { max-height: 100vh; overflow: hidden; } .media-mb__media img { max-width: 100%; object-fit: cover; } /** * Gallery-MB */ /* .gallery-mb__gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .gallery-mb__image { width: 100%; height: 20rem; overflow: hidden; display: flex; justify-content: center; align-items: center; } .gallery-mb__image img { width: 100%; object-fit: cover; } @media screen and (max-width: 960px) { .gallery-mb__gallery { grid-template-columns: repeat(3, 1fr); } } */ /*** * ###### #### ## ## ###### ## ######## ###### #### ######## ###### ## ## #### ######## * ## ## ## ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## #### ## ## ## ## ## ## ## ## ## ## ## ## ## * ###### ## ## ## ## ## #### ## ###### ## ## ######## ## ## ## ## ## * ## ## ## #### ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ## ## ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ###### #### ## ## ###### ######## ######## ###### #### ## ## ###### ####### #### ## */ .circuit-template-default { /* cacher les indésirables du site web */ #toolbar, .page-header, footer > .widget-area, footer > .site-info, .menu > nav { display: none; } } .circuit-template-default main, .circuit-template-default section { position: relative; } .circuit-template-default header { overflow: hidden; } .circuit-template-default section.map__wrapper { padding-top: var( --wrapper_margin); background-color: var(--color_primary); position: sticky; top: 0; } /* Header du theme par defaut */ .circuit-template-default .site-header { display: none; } /* MEDIA QUERIES */ @media screen and (max-width: 1200px) { /* .circuit-template-default section.map__wrapper { padding-top: 15rem; } */ } /*** * # # ## ##### # # ###### ## ##### ###### ##### * ## ## # # # # # # # # # # # # # # * # ## # # # # # ###### ##### # # # # ##### # # * # # ###### ##### # # # ###### # # # ##### * # # # # # # # ###### # # ##### ###### # # */ .circuit-template-default .map-header { display: flex; align-items: center; position: absolute; left: 0; z-index: 2; justify-content: space-between; background-color: var(--color_primary); width: 100%; height: var( --wrapper_margin); } .circuit-template-default .map-header__title { padding-right: 4rem; } .circuit-template-default .map-header h2 { color: white; } /* .circuit-template-default .map-header__circuit-selector select { padding: 0.5em; height: fit-content; } */ .circuit-template-default .map-header__headline { display: flex; justify-content: flex-end; align-items: center; padding: 2rem; } .circuit-template-default .map-header__logo { width: 8rem; min-width: 8rem; } /* MEDIA QUERIES */ @media screen and (max-width: 1200px) { .circuit-template-default .map-header__headline { width: 100%; justify-content: space-between;} /* .circuit-template-default .map-header { right: unset; padding-left: 2rem; max-width: 100%; width: calc(100% - 2rem); justify-content: space-between; align-items: flex-start; } */ } @media screen and (max-width: 960px) { .circuit-template-default .map-header h2 { font-size: 30px; } /*.circuit-template-default .map-header__circuit-selector { margin-right: 1rem; } */ } @media screen and (max-width: 760px) { /* .circuit-template-default .map-header__logo { max-width: 8rem; } .circuit-template-default .map-header { flex-direction: column-reverse; } .circuit-template-default .map-header__circuit-selector { margin-right: 0; margin-top: 1rem; } .circuit-template-default .map-header__circuit-selector select { position: absolute; top: 0; right: 1.5rem; max-width: 50%; } */ } @media screen and (max-width: 550px) { .circuit-template-default .map-header__headline { padding: 0.75rem; } .circuit-template-default .map-header__title { padding-right: 2rem; } .circuit-template-default .map-header h2 { font-size: 18px; } .circuit-template-default .map-header__logo { min-width: 4rem; width: 4rem; } } /*** * # # ## ##### # # #### ##### ## # * ## ## # # # # ## ## # # # # # # # * # ## # # # # # # ## # # # # # # # # * # # ###### ##### # # # # # # ###### # * # # # # # # # #### ##### # # ##### */ .map-modal { display: none; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.8); z-index: 20; min-height: 100%; opacity: 0; /*transition: opacity 1.5s ease-in;*/ } .map-modal.--active { display: block; pointer-events: auto; opacity: 1; overscroll-behavior: contain;} .map-modal__header { position: sticky; top: 2rem; background-color: transparent; height: 0; } .map-modal__header #modal-close-button { display: block; margin-left: auto; /*margin-right: -4rem;*/ margin: 0 -4rem 0 auto; width: 2rem; height: 2rem; background-color: var(--color_primary); color: white; border: none; font-size: 1rem; border-radius: 50%; cursor: pointer; outline: 2px solid white; } .map-modal__wrapper { position: relative; margin: 1rem; width: 75%; height: 100%; margin-left: auto; margin-right: auto; background-color: white; } .map-modal__content { position: relative; width: 100%; height: 100%; max-height: 100vh; overflow-y: auto; scrollbar-width: none;} @media screen and (max-width: 1200px) { .map-modal__wrapper { width: 85%; } } @media screen and (max-width: 960px) { .map-modal__wrapper { width: 100%; margin: 0; } .map-modal__header { position: relative; top: 1rem; display: block; } .map-modal__header #modal-close-button { z-index: 10; position: sticky; margin-right: 2rem; } } /* Transitions */ /* .map-modal .map-modal__content > .poi { opacity: 0; transition: all 5s ease-in; } .map-modal.--active .map-modal__content > .poi { opacity: 1; } */ /* .map-modal__content .poi-header, .map-modal__content .modular-blocks, .map-modal__content .poi-comments { background-color: white; } */ /*** * ###### #### ## ## ###### ## ######## ######## ####### #### * ## ## ## ### ## ## ## ## ## ## ## ## ## ## * ## ## #### ## ## ## ## ## ## ## ## ## * ###### ## ## ## ## ## #### ## ###### ######## ## ## ## * ## ## ## #### ## ## ## ## ## ## ## ## * ## ## ## ## ### ## ## ## ## ## ## ## ## * ###### #### ## ## ###### ######## ######## ## ####### #### */ .single-point-interet { /* cacher les indésirables du site web */ #toolbar, .page-header { display: none; } } .poi-banner {height: 20rem; overflow: hidden; display: flex; align-items: center; } .poi-banner img { width: 100%; object-fit: cover; } .poi-content__wrapper { padding: 0 4rem 2rem; } .poi-header { margin: 2rem 0; } .poi-header__title { font-weight: 800; } .poi-header__subtitle { font-weight: 400; font-style: italic; } /* Visteurs */ .poi-visitors { display: flex; align-items: center; font-size: 24px; justify-content: flex-end; margin-top: 2rem; } /* Formulaires */ .poi-comments { margin: 2rem 0; } .poi-comments h2 { font-size: 2rem; } .poi-form__button, .poi-form__wrapper input[type='submit'] { margin-top: 1rem; border: 1px solid white; background-color: var(--color_primary); color: white; padding: 1rem 0.8rem; cursor: pointer; transition: all 0.2s ease-in-out; } .poi-form__wrapper input { width: 50%; } .poi-form__wrapper select { width: 50%; padding: 10px 5px; } .poi-form__wrapper textarea { width: 100%; } .poi-form__button:hover, .poi-form__wrapper input[type='submit']:hover { background-color: white; color: var(--color_primary); border-color: var(--color_primary); } .poi-form__wrapper { display: none; padding: 0 4rem 2rem; } @media screen and (max-width: 960px) { .poi-content__wrapper { padding: 0 2rem 2rem; } } /*** * ######## ######## ## ## ######## ## ### ######## ######## ######## ####### #### * ## ## ### ### ## ## ## ## ## ## ## ## ## ## ## ## * ## ## #### #### ## ## ## ## ## ## ## ## ## ## ## ## * ## ###### ## ### ## ######## ## ## ## ## ###### ######## ## ## ## * ## ## ## ## ## ## ######### ## ## ## ## ## ## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ######## ## ## ## ######## ## ## ## ######## ## ####### #### */ .display-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; margin: 4rem 0; } .display-grid__item { width: 100%; height: 20rem; } .display-grid__img { height: 12rem; overflow: hidden; position: relative; } .display-grid__content { margin-top: 2rem; } .display-grid__content a { display: block; } /*** * ######## ######## ## ## ######## ## ### ######## ######## ###### #### ######## ###### ## ## #### ######## ###### * ## ## ### ### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## #### #### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ###### ## ### ## ######## ## ## ## ## ###### ## ## ######## ## ## ## ## ## ###### * ## ## ## ## ## ## ######### ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ######## ## ## ## ######## ## ## ## ######## ###### #### ## ## ###### ####### #### ## ###### */ .page-template-template-circuits { /* cacher les indésirables du site web */ #toolbar, .page-header { display: none; } } .page-template-template-circuits .circuits__intro { display: flex; justify-content: space-between; } .page-template-template-circuits .circuits__intro .circuits__wysiwyg { padding-right: 4rem; } .page-template-template-circuits .circuits__intro .circuits__wysiwyg h1{ margin-bottom: 1rem; } .page-template-template-circuits .circuits__list { cursor: initial; } .page-template-template-circuits .circuits__item .u-h2 { margin-bottom: 0.5rem; } @media screen and (max-width: 960px) { .page-template-template-circuits .circuits__intro { flex-direction: column; } .page-template-template-circuits .circuits__intro .circuits__wysiwyg { margin-bottom: 4rem; } } /*** * ## ## ### ######## ######## #### ## ######## ######## ######## ###### * ### ### ## ## ## ## ## ## ## ## ## ## ## ## ## * #### #### ## ## ## ## ## ## ## ## ## ## ## ## * ## ### ## ## ## ######## ###### ## ## ## ###### ######## ###### * ## ## ######### ## ## ## ## ## ## ## ## ## * ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## ## ## ## ## #### ######## ## ######## ## ## ###### */ /* */ /* .map-header__filters-ctn { min-width: 45%; } */ .map-header__filters-ctn { padding: 2rem 2rem 0; } .map-header__filters { display: flex; flex-direction: column-reverse; } button.map-header__filters-trigger { display: none; background: transparent; border: none; cursor: pointer; } button.map-header__filters-trigger svg { width: 2rem; height: 2rem; fill: white; } .wpgmza_map.wpgmza-auto-center { height: calc(100vh - var(--wrapper_margin)) !important; } /* Filtres de catégories */ .wpgmza-standalone-component { background-color: var(--color_primary); } .wpgmza-marker-listing-category-filter { /*position: fixed; top:0;*/ position: relative; background-color: var(--color_primary); color: white; white-space: nowrap; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder { display: inline-block; } .wpgmza-standalone-component .wpgmza-marker-listing-category-filter.wpgmza-list ul { padding-left: 0 !important; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul { display: flex; margin-left: 0; padding-left: 0; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li { margin-left: 3rem; position: relative; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li * { cursor: pointer; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li input { display: none; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li label { display: inline-block; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li label img { display: inline-block; transition: filter 200ms ease-in-out; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li label span.filter_label_text { visibility: hidden; width: fit-content; position: absolute; top: -90%; font-size: 18px; left: 0; white-space: nowrap; transition: visibility 200ms ease-in-out; transform: translateX(-25%); } /* États des filtres */ .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li:hover label span.filter_label_text {visibility: visible; transition-delay: 1s; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li label.label--checked img { filter: invert(1); } /* Custom markers filters */ .wpgmza-filter-widgets { color: white; /*position: fixed; top: 5rem; */ position: relative; } .wpgmza-filter-widgets .wpgmza-reset-custom-fields { display: none; } ul.wpgmza-checkboxes { display: inline-flex !important; list-style-type:none; opacity: 1!important; margin-left: 0; } .wpgmza-placeholder-label:hover ul.wpgmza-checkboxes {display: inline-flex !important;} ul.wpgmza-checkboxes li { padding-left: 2rem; margin-bottom: 0; } .wpgmza_cat_ul > .wpgmza_cat_checkbox_item_holder { display: flex; align-items: center; } /* .wpgmza_cat_ul > .wpgmza_cat_checkbox_item_holder img { padding-left: 1rem; } */ /* Info Windows */ /* .wpgmza_map .wpgmza-inner-stack.right > div { background-color: rgba(0,0,0,0.8); } */ .wpgmza_map .wpgmza-inner-stack.right .grouping ~ .grouping-handle { background-color: var(--color_primary); } /* Liens des info windows */ /* .wpgmza_map .wpgmza-inner-stack.right .wpgmza-infowindow-link a { pointer-events: none; cursor: default !important; } */ /* Map Icons */ .ol-overlay-container.ol-selectable { cursor: pointer; } /* Map markers hover states */ .ol-overlay-container.ol-selectable .ol-marker img { transition: filter 0.2s ease-out; } .ol-overlay-container.ol-selectable .ol-marker:hover img { filter: invert(0.6); } .ol-overlay-container.ol-selectable .ol-marker .custom-marker__overlay { pointer-events: none; position: absolute; top: 0; left: 0; z-index:5; background-color: rgba(232,72,85, 0.75); transform: translateX(-50%); } /* MEDIA QUERIES */ @media screen and (max-width: 1200px) { .map-header__filters-ctn { padding: 0 2rem 0; } .map-header__filters { display: none; position: absolute; left: 0; top: var(--wrapper_margin); background-color: var(--color_primary); padding: 1rem 2rem 0; } .map-header__filters.--active { display: flex; border-top: 1px dashed white; border-radius: 0 0 20px 20px; } button.map-header__filters-trigger { display: block; } .wpgmza-marker-listing-category-filter { display: flex; } /* .wpgmza_map.wpgmza-auto-center { height: calc(100vh - 15rem) !important; } */ /* .wpgmza-marker-listing-category-filter { top: 7rem; } .wpgmza-filter-widgets { top: 11.5rem; } */ } @media screen and (max-width: 760px) { /* .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li { margin-left: 2rem; position: relative; } */ .map-header__filters-ctn { padding: 0 0.75rem 0; } button.map-header__filters-trigger svg { width: 1rem; height: 1rem; } .wpgmza-marker-listing-category-filter .wpgmza_cat_checkbox_holder ul li { margin-left: 1.5rem; } } /*** * #### ## ## ######## ####### ## ## #### ## ## ######## ####### ## ## * ## ### ## ## ## ## ## ## ## ## ### ## ## ## ## ## ## ## ## * ## #### ## ## ## ## ## ## ## ## #### ## ## ## ## ## ## ## ## * ## ## ## ## ###### ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## * ## ## #### ## ## ## ## ## ## ## ## #### ## ## ## ## ## ## ## * ## ## ### ## ## ## ## ## ## ## ## ### ## ## ## ## ## ## ## * #### ## ## ## ####### ### ### #### ## ## ######## ####### ### ### */ /* Images de l'info-window*/ .wpgmza_map .wpgmza-inner-stack .wpgmza-panel-info-window .wpgmza-gallery-container { max-height: 30vh!important; } select#circuit-selector {width: 100%; border-bottom: 1px solid black; } .custom-poi-nav__ctn { display: flex; justify-content: space-between; min-width: 50%; padding: 0 1rem; align-items: center; } .custom-poi-nav__btn { background-color: transparent; color: black; font-weight: bold; min-width: 5rem; height: 100%!important; } .custom-poi-nav__btn { transition: all 0.2s ease-out; } .custom-poi-nav__btn:hover span { color: #9b032b; } .custom-poi-nav__btn span { display: block; pointer-events: none; width: 2rem; height: 2rem; transition: all 0.2s ease-in-out; } .custom-poi-nav__btn--previous:hover > span { transform: translateX(-0.2em); } .custom-poi-nav__btn--next:hover > span { transform: translateX(0.2em); } .custom-poi-nav__order { display: none; }