/* ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: currentColor; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::-webkit-backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .container { width: 100%; padding-right: 1rem; padding-left: 1rem; } @media (min-width: 480px) { .container { max-width: 480px; } } @media (min-width: 600px) { .container { max-width: 600px; padding-right: 2rem; padding-left: 2rem; } } @media (min-width: 782px) { .container { max-width: 782px; } } @media (min-width: 960px) { .container { max-width: 960px; padding-right: 0rem; padding-left: 0rem; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1440px) { .container { max-width: 1440px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .m-8 { margin: 2rem; } .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .mb-8 { margin-bottom: 2rem; } .mb-4 { margin-bottom: 1rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-12 { margin-bottom: 3rem; } .block { display: block; } .flex { display: flex; } .h-1 { height: 0.25rem; } .min-h-screen { min-height: 100vh; } .w-full { width: 100%; } .w-16 { width: 4rem; } .max-w-sm { max-width: 24rem; } .max-w-screen-md { max-width: 782px; } .flex-grow { flex-grow: 1; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .rounded { border-radius: 0.25rem; } .border { border-width: 1px; } .\!border { border-width: 1px !important; } .border-b { border-bottom-width: 1px; } .border-primary { --tw-border-opacity: 1; border-color: rgb(47 1 84 / var(--tw-border-opacity)); } .border-secondary { --tw-border-opacity: 1; border-color: rgb(223 30 30 / var(--tw-border-opacity)); } .bg-primary { --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); } .bg-secondary { --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); } .bg-acoustique-coproprietes { --tw-bg-opacity: 1; background-color: rgb(36 94 242 / var(--tw-bg-opacity)); } .bg-acoustique-coproprietes-light { --tw-bg-opacity: 1; background-color: rgb(223 241 255 / var(--tw-bg-opacity)); } .bg-energies-urbanisme { --tw-bg-opacity: 1; background-color: rgb(2 126 80 / var(--tw-bg-opacity)); } .bg-energies-urbanisme-light { --tw-bg-opacity: 1; background-color: rgb(227 255 240 / var(--tw-bg-opacity)); } .bg-isolation-quotidien { --tw-bg-opacity: 1; background-color: rgb(194 69 3 / var(--tw-bg-opacity)); } .bg-isolation-quotidien-light { --tw-bg-opacity: 1; background-color: rgb(255 251 236 / var(--tw-bg-opacity)); } .bg-patrimoine-renovation { --tw-bg-opacity: 1; background-color: rgb(139 47 247 / var(--tw-bg-opacity)); } .bg-patrimoine-renovation-light { --tw-bg-opacity: 1; background-color: rgb(255 229 253 / var(--tw-bg-opacity)); } .bg-location { --tw-bg-opacity: 1; background-color: rgb(223 0 43 / var(--tw-bg-opacity)); } .bg-location-light { --tw-bg-opacity: 1; background-color: rgb(254 226 231 / var(--tw-bg-opacity)); } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .text-center { text-align: center; } .text-5xl { font-size: 3rem; line-height: 1; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .font-light { font-weight: 300; } .font-extrabold { font-weight: 800; } .uppercase { text-transform: uppercase; } .leading-tight { line-height: 1.25; } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .text-primary { --tw-text-opacity: 1; color: rgb(47 1 84 / var(--tw-text-opacity)); } .text-secondary { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .text-acoustique-coproprietes { --tw-text-opacity: 1; color: rgb(36 94 242 / var(--tw-text-opacity)); } .text-acoustique-coproprietes-light { --tw-text-opacity: 1; color: rgb(223 241 255 / var(--tw-text-opacity)); } .text-energies-urbanisme { --tw-text-opacity: 1; color: rgb(2 126 80 / var(--tw-text-opacity)); } .text-energies-urbanisme-light { --tw-text-opacity: 1; color: rgb(227 255 240 / var(--tw-text-opacity)); } .text-isolation-quotidien { --tw-text-opacity: 1; color: rgb(194 69 3 / var(--tw-text-opacity)); } .text-isolation-quotidien-light { --tw-text-opacity: 1; color: rgb(255 251 236 / var(--tw-text-opacity)); } .text-patrimoine-renovation { --tw-text-opacity: 1; color: rgb(139 47 247 / var(--tw-text-opacity)); } .text-patrimoine-renovation-light { --tw-text-opacity: 1; color: rgb(255 229 253 / var(--tw-text-opacity)); } .text-location { --tw-text-opacity: 1; color: rgb(223 0 43 / var(--tw-text-opacity)); } .text-location-light { --tw-text-opacity: 1; color: rgb(254 226 231 / var(--tw-text-opacity)); } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .alignfull { margin: 2rem calc(50% - 50vw) !important; max-width: 100vw !important; width: 100vw; } .alignwide { margin: 2rem 0; max-width: 1280px !important; } .alignnone { margin-left: 0px; margin-right: 0px; height: auto; max-width: 100%; } .aligncenter { margin: 0.5rem auto; display: block; } @media (min-width: 600px) { .alignleft:not(.wp-block-button) { margin-right: 0.5rem; float: left; } .alignright:not(.wp-block-button) { margin-left: 0.5rem; float: right; } .wp-block-button.alignleft a { float: left; margin-right: 1rem; } .wp-block-button.alignright a { float: right; margin-left: 1rem; } } .wp-caption { display: inline-block; } .wp-caption img { margin-bottom: 0.5rem; line-height: 1; } .wp-caption-text { font-size: 0.875rem; color: #718096; } /* ########### UTILITIES ############ */ .shadowed { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fade-out { 0% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes slide-in { 0% { transform: translateY(-80%); } 100% { transform: translateY(0%); } } @keyframes slide-in { 0% { transform: translateY(-80%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-10%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-10%); } } @-webkit-keyframes height-in { 0% { max-height: 0px; } 100% { max-height: 300px; } } @keyframes height-in { 0% { max-height: 0px; } 100% { max-height: 300px; } } @-webkit-keyframes height-out { 0% { max-height: 300px; } 100% { max-height: 0px; } } @keyframes height-out { 0% { max-height: 300px; } 100% { max-height: 0px; } } @-webkit-keyframes translate-in { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } } @keyframes translate-in { 0% { transform: translateY(0%); } 100% { transform: translateY(100%); } } @-webkit-keyframes translate-out { 0% { transform: translateY(100%); } 100% { transform: translateY(60%); } } @keyframes translate-out { 0% { transform: translateY(100%); } 100% { transform: translateY(60%); } } /* ########### BASE ############ */ body:not(.wp-admin) { font-family: 'Raleway', sans-serif; font-weight: 400; } body { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:focus, button:focus { outline: red solid 1px; outline-width: 1px; outline-offset: 8px; outline-radius: 50px; /* border-radius: 10px; */ } .filter-acoustique-coproprietes { filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%); } .filter-energies-urbanisme { filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%); } .filter-isolation-quotidien { filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%); } .filter-patrimoine { filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .filter-location { filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } /* ########### COMPONENTS ############ */ .cta { margin-top: 0.5rem; margin-bottom: 0.5rem; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-size: 1rem; line-height: 1.5rem; font-weight: 700; } .cta--button { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-radius: 9999px; padding-left: 2rem; padding-right: 2rem; padding-top: 1rem; padding-bottom: 1rem; font-weight: 700; } .cta--button:focus { border-radius: 9999px; } .cta--circular { display: flex; aspect-ratio: 1 / 1; width: 3rem; align-items: center; justify-content: center; border-radius: 9999px; } .cta--circular:focus { border-radius: 9999px; } .cta--circular { outline-offset: 5px !important; } .cta--primary { --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .cta--primary:hover { --tw-bg-opacity: 1; background-color: rgb(19 0 35 / var(--tw-bg-opacity)); } .cta--secondary { --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .cta--secondary:hover { --tw-bg-opacity: 1; background-color: rgb(152 3 3 / var(--tw-bg-opacity)); } .cta--outline { border-width: 2px; background-color: transparent; } .cta--outline:hover { background-color: rgb(239, 239, 239, 0.6); } /* &--outline-secondary { @apply border-secondary border; } */ .cta--shadowed { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .cta--shadowed:hover { --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .cta--streched::after { position: absolute; content: var(--tw-content); top: 0px; right: 0px; bottom: 0px; left: 0px; } .cta.cta--button.cta--outline { --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .cta--read-more { margin-top: auto; display: flex; width: 100%; align-items: center; justify-content: space-between; --tw-text-opacity: 1; color: rgb(47 1 84 / var(--tw-text-opacity)); } .cta--read-more:hover { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .cta--with-arrow-button .cta_arrow_button { transition: transform 0.3s ease-in-out; } .cta--with-arrow-button:hover .cta_arrow_button { filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%) contrast(100%); transform: translateX(3px); } .external-link { display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; align-items: center; font-weight: 600; } .external-link:hover { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .external-link:after { margin-left: 0.5rem; display: block; content: url('../resources/img/graphic-assets/icone-external-link.svg'); transform: translateY(1px); } &.card-acoustique:hover .cta_arrow_button, &.card-petites-coproprietes:hover .cta_arrow_button { filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%); } &.card-au-quotidien:hover .cta_arrow_button, &.card-isolation:hover .cta_arrow_button { filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%); } &.card-energies:hover .cta_arrow_button, &.card-urbanisme:hover .cta_arrow_button { filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%); } &.card-location:hover .cta_arrow_button { filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } &.card-patrimoine:hover .cta_arrow_button { filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .card-large-content-container { display: flex; flex-direction: column; align-items: center; background-color: rgb(239, 239, 239, 0.6); padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 960px) { .card-large-content-container { padding-left: 3rem; padding-right: 3rem; } } .card-large-content-container--has-illustration { padding-top: 12rem; } .card-large-content { position: relative; width: 100%; max-width: 1440px; border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 4rem; } .card-large-content--has-illustration { padding-top: 10rem; } .card-large-content__top-illustration { position: absolute; top: 0px; left: 50%; transform: translate(-50%, -50%); } .card-large-content__links-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } .card-large-content__link { margin-top: 2rem; font-size: 1.5rem; line-height: 2rem; } .card-large-content__link__page_icon { max-width: 80px; } .card-large-content__link__title { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 700; } .card-large-content__link__excerpt { padding-top: 0.75rem; font-size: 1.125rem; line-height: 1.75rem; } .card-large-content__link .cta { margin-top: 2rem; } .section_titling { padding-bottom: 2rem; text-align: center; } .section_titling__title { padding-bottom: 0.5rem; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .section_titling__subtitle { margin-left: auto; margin-right: auto; max-width: 48rem; font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .section_titling__description { margin-left: auto; margin-right: auto; max-width: 48rem; padding-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; } .content-intertitle { padding-bottom: 0.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .search-module { position: absolute; left: 0px; bottom: 0px; z-index: 10; width: 100%; --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding-left: 4rem; padding-right: 4rem; padding-top: 1.5rem; padding-bottom: 1.5rem; display: block; } /* transition: all 0.5s; transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99); */ .search-module[mobile-closed] { display: none; } .search-module[mobile-closing] { /* animation: translate-out 400ms forwards cubic-bezier(0, 0.51, 0.23, 0.99), fade-out 800ms forwards ease-in; */ -webkit-animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in; animation: translate-out 800ms forwards ease-in, fade-out 600ms forwards ease-in; } .search-module[mobile-opened] { -webkit-animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99), fade-in 600ms forwards ease-out; animation: translate-in 700ms forwards cubic-bezier(0, 0.51, 0.23, 0.99), fade-in 600ms forwards ease-out; } .search-module__wrapper-container { margin-left: auto; margin-right: auto; max-width: 1280px; } .search-module__search-form { display: flex; flex-wrap: wrap; } .search-module__search-form__title { display: block; width: 100%; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; } .search-module__search-form__separator { margin-top: 0.5rem; margin-bottom: 2rem; width: 100%; border-style: none; --tw-bg-opacity: 1; background-color: rgb(118 117 117 / var(--tw-bg-opacity)); opacity: 0.5; height: 1px; } .search-module__search-form__input { display: block; max-width: 100%; flex-grow: 1; border-top-left-radius: 1.5rem; border-bottom-left-radius: 1.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1rem; padding-right: 1rem; } .search-module__search-form button[type='submit'] { display: flex; width: 16.666667%; align-items: center; justify-content: center; gap: 0.75rem; border-top-right-radius: 1.5rem; border-bottom-right-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); max-width: 300px; } .search-module__search-form button[type='submit'] .search_icon { --tw-invert: invert(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .search-module__suggestions { display: flex; flex-wrap: wrap; -moz-column-gap: 0.75rem; column-gap: 0.75rem; padding-top: 1rem; } .search-module__suggestions__navlist { display: flex; flex-wrap: wrap; -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .search-module__suggestions__navlist .suggestion-item { font-weight: 700; -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 4px; } .card-news { position: relative; border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .card-news__thumbnail { height: 190px; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; -o-object-fit: cover; object-fit: cover; } .card-news__inner { height: 100%; padding: 2rem; } .card-news__heading { display: flex; flex-direction: column-reverse; } .card-news__tag { margin-bottom: 1rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: 0.75rem; --tw-bg-opacity: 1; background-color: rgb(255 237 236 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.25rem; padding-bottom: 0.25rem; --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .card-news__title { margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); line-height: 1.1; } .card-frequent-question { position: relative; border-radius: 1.5rem; padding: 2rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .card-frequent-question__icon { max-width: 80px; } .card-frequent-question__title { margin-top: 1rem; padding-bottom: 1rem; font-size: 1.25rem; font-weight: 700; } .card-frequent-question__details-container { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; } .card-frequent-question__tags_container { display: flex; flex-wrap: wrap; -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .card-frequent-question__tags_container .tag { border-radius: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; padding-left: 1rem; padding-right: 1rem; } .card-frequent-question.card-acoustique:hover .cta_arrow_button, .card-frequent-question.card-petites-coproprietes:hover .cta_arrow_button { filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%); } .card-frequent-question.card-au-quotidien:hover .cta_arrow_button, .card-frequent-question.card-isolation:hover .cta_arrow_button { filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%); } .card-frequent-question.card-energies:hover .cta_arrow_button, .card-frequent-question.card-urbanisme:hover .cta_arrow_button { filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%); } .card-frequent-question.card-location:hover .cta_arrow_button { filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } .card-frequent-question.card-patrimoine:hover .cta_arrow_button { filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .card-thematique { position: relative; display: flex; flex-direction: column; border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 2rem; transition: all 0.3s ease-in-out; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); } .card-thematique__thumbnail { width: 100%; align-self: flex-end; max-height: 250px; width: auto; margin-top: -110px; margin-right: 0px; } .card-thematique__title { padding-bottom: 1rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; } .card-thematique__descritpion { } .card-thematique__cta { display: flex; align-items: center; justify-content: space-between; padding-top: 2rem; font-weight: 700; } .card-thematique__cta::after { position: absolute; content: var(--tw-content); top: 0px; right: 0px; bottom: 0px; left: 0px; } .card-thematique__cta:hover { opacity: 1; } .card-thematique__cta { transition: font-weight 0.3s ease-in-out; } .card-thematique__cta .cta_arrow_button { display: block; width: 50px; height: 50px; } .card-thematique:hover { transform: scale(1.02) translateY(-10px); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15); } .card-thematique:hover .cta_arrow_button { opacity: 1; } .card-thematique.card-acoustique:hover .cta_arrow_button, .card-thematique.card-petites-coproprietes:hover .cta_arrow_button { filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%); } .card-thematique.card-au-quotidien:hover .cta_arrow_button, .card-thematique.card-isolation:hover .cta_arrow_button { filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%); } .card-thematique.card-energies:hover .cta_arrow_button, .card-thematique.card-urbanisme:hover .cta_arrow_button { filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%); } .card-thematique.card-location:hover .cta_arrow_button { filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } .card-thematique.card-patrimoine:hover .cta_arrow_button { filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } /* ########### LAYOUT ############ */ header#main-header { display: flex; flex-direction: column-reverse; } @media (min-width: 960px) { header#main-header { flex-direction: column; } } .skiplinks { --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); padding-left: 2rem; } .skiplinks__link { transition: margin 0.25s ease-in-out; display: block; max-height: 0px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; overflow: hidden; border-radius: 0.375rem; --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); padding-left: 1rem; padding-right: 1rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .skiplinks__link:focus { margin-top: 1rem; margin-bottom: 1rem; max-height: 3rem; border-width: 1px; padding-top: 0.5rem; padding-bottom: 0.5rem; } .sub-menu { z-index: 10; } .site-footer { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; background-color: rgb(239, 239, 239, 0.6); padding-left: 2rem; padding-right: 2rem; } .site-footer__informative-message { grid-column: span 4 / span 4; display: flex; justify-content: center; border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); padding: 2rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .site-footer__informative-message img { margin-right: 0.5rem; } .site-footer__partenaires, .site-footer__metiers-patrimoine, .site-footer__infos-contact, .site-footer__navigation-menu { border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 2rem; } .site-footer__infos-contact { grid-column: span 4 / span 4; display: grid; gap: 1.5rem; } @media (min-width: 960px) { .site-footer__infos-contact { grid-column: span 1 / span 1; } } .site-footer__infos-contact .external-link { margin-top: 0.25rem; padding-top: 0.5rem; } .site-footer__navigation-menu { grid-column: span 4 / span 4; } @media (min-width: 960px) { .site-footer__navigation-menu { grid-column: span 3 / span 3; } } .site-footer__navigation-menu .footer-menu-renovateur { display: flex; width: 100%; align-items: flex-end; justify-content: center; gap: 1rem; --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); } .site-footer__navigation-menu .footer-menu-renovateur .sub-menu { display: none; } .site-footer__navigation-menu .extra_details { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .site-footer__navigation-menu .extra_details .social-networks { display: flex; gap: 1rem; } .site-footer__partenaires { grid-column: span 4 / span 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; } @media (min-width: 782px) { .site-footer__partenaires { grid-column: span 2 / span 2; } } .site-footer__metiers-patrimoine { grid-column: span 4 / span 4; } @media (min-width: 782px) { .site-footer__metiers-patrimoine { grid-column: span 2 / span 2; } } article > *:not(.entry-content), .entry-content > * { margin-left: auto; margin-right: auto; max-width: 960px; } .entry-content h1, .block-editor-block-list__layout h1 { font-size: 1.5rem; line-height: 2rem; } .entry-content h2, .block-editor-block-list__layout h2 { font-size: 1.25rem; } .entry-content h3, .block-editor-block-list__layout h3 { font-size: 1.125rem; line-height: 1.75rem; } .entry-content p a, .entry-content ul a, .entry-content ol a, .block-editor-block-list__layout p a, .block-editor-block-list__layout ul a, .block-editor-block-list__layout ol a { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); -webkit-text-decoration-line: underline; text-decoration-line: underline; } .entry-content p a:hover, .entry-content ul a:hover, .entry-content ol a:hover, .block-editor-block-list__layout p a:hover, .block-editor-block-list__layout ul a:hover, .block-editor-block-list__layout ol a:hover { -webkit-text-decoration-line: none; text-decoration-line: none; } .entry-content p, .entry-content ul, .entry-content ol, .block-editor-block-list__layout p, .block-editor-block-list__layout ul, .block-editor-block-list__layout ol { margin-bottom: 2rem; } .entry-content ul:not(.block-editor-block-variation-picker__variations) li, .block-editor-block-list__layout ul:not(.block-editor-block-variation-picker__variations) li { list-style-position: inside; list-style-type: disc; } .entry-content ol li, .block-editor-block-list__layout ol li { list-style-position: inside; list-style-type: decimal; } .menu-renovateur { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; padding-left: 1rem; padding-right: 1rem; --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (min-width: 600px) { .menu-renovateur { padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 782px) { .menu-renovateur { padding-left: 4rem; padding-right: 4rem; } } .menu-renovateur .website_logo { order: 1; margin-right: 3rem; width: 190px; } @media (min-width: 1280px) { .menu-renovateur .website_logo { width: 222px; } } .menu-renovateur .website_logo a:focus img { outline: red solid 1px; outline-width: 1px; outline-offset: 8px; outline-radius: 50px; } /* &__main-elements { @apply w-full bg-red-200 flex justify-between items-center; } */ .menu-renovateur__navlist { position: relative; justify-content: center; } @media (min-width: 960px) { .menu-renovateur__navlist { display: flex; } } .menu-renovateur__navlist > .menu-item:hover > a, .menu-renovateur__navlist > .menu-item:hover > button, .menu-renovateur__navlist > .menu-item > a:focus, .menu-renovateur__navlist > .menu-item > button:focus { background-color: rgb(239, 239, 239, 0.6); --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .menu-renovateur__navlist > .menu-item { display: flex; align-items: center; justify-content: center; font-weight: 700; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } @media (min-width: 960px) { .menu-renovateur__navlist > .menu-item { position: relative; } } /* Generic Submenu Item */ .menu-renovateur__navlist .sub-menu { position: fixed; top: 0px; z-index: 50; min-height: 100vh; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 2rem; } @media (min-width: 960px) { .menu-renovateur__navlist .sub-menu { position: absolute; min-height: 0px; width: 100vw; max-width: 48rem; bottom: -31px; transform: translateY(100%); top: unset; } } .menu-renovateur__navlist .sub-menu--closed { display: none; } .menu-renovateur__navlist .sub-menu--open { display: block; } /* Conseils — Thamtiques Submenu Item */ .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist { display: grid; gap: 1rem; } @media (min-width: 782px) { .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__item a { display: flex; gap: 1rem; } .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__thematique-icon { max-width: 80px; } .menu-renovateur__navlist li#menu-item-168 .sub-menu__navlist__description { font-size: 0.875rem; line-height: 1.25rem; font-weight: 400; line-height: 1.3; } /* Conseils — Thamtiques Submenu Item */ .menu-renovateur__navlist li#menu-item-169 .sub-menu { /* @apply hidden; */ } .menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist { display: flex; gap: 1.25rem; } .menu-renovateur__navlist li#menu-item-169 .sub-menu__navlist li { -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 4px; } .menu-renovateur__navlist-container { order: 3; width: 100%; } @media (min-width: 960px) { .menu-renovateur__navlist-container { order: 2; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media screen and (max-width: 960px) { .menu-renovateur__navlist-container { overflow: hidden; } .menu-renovateur__navlist-container[opened] { -webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in; animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in; } .menu-renovateur__navlist-container[closing] { -webkit-animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in; animation: height-out 500ms forwards ease-out, fade-out 800ms forwards ease-in; } .menu-renovateur__navlist-container[closed] { display: none; } } .menu-renovateur__interaction_toggles { order: 2; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; } @media (min-width: 960px) { .menu-renovateur__interaction_toggles { order: 3; } } .menu-renovateur__mobile-menu-toggle { display: flex; align-items: center; gap: 1rem; } @media (min-width: 960px) { .menu-renovateur__mobile-menu-toggle { display: none; } } .menu-renovateur__mobile-menu-toggle { /* &:after { @apply block w-8 h-8; content: url('../resources/images/menu.svg'); } */ } .menu-renovateur__mobile-menu-toggle .toggle-icon { /* transform: translate(0, 7px); */ position: relative; height: 1rem; width: 1.5rem; opacity: 0.8; } .menu-renovateur__mobile-menu-toggle .toggle-icon__bar { position: absolute; width: 100%; --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); height: 3px; } .menu-renovateur__mobile-menu-toggle .toggle-icon__bar--top { top: 0; transition: all 0.3s ease-in-out; } .menu-renovateur__mobile-menu-toggle .toggle-icon__bar--middle { top: 50%; transform: translateY(-50%); } .menu-renovateur__mobile-menu-toggle .toggle-icon__bar--bottom { bottom: 0; transition: all 0.3s ease-in-out; } .menu-renovateur__mobile-menu-toggle[aria-expanded='true'] .toggle-icon { position: relative; } .menu-renovateur__mobile-menu-toggle[aria-expanded='true'] .toggle-icon__bar--top { top: 50%; transform: translateY(-50%) rotate(45deg); } .menu-renovateur__mobile-menu-toggle[aria-expanded='true'] .toggle-icon__bar--middle { opacity: 0; } .menu-renovateur__mobile-menu-toggle[aria-expanded='true'] .toggle-icon__bar--bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); } .menu-renovateur__search-module-toggle { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } .menu-renovateur .menu-item .page_icon { height: 50px; width: 50px; } .menu-renovateur .menu-item__submenu-title { margin-bottom: 1rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(118 117 117 / var(--tw-border-opacity)); padding-bottom: 1rem; } .menu-renovateur .menu-item__submenu-toggle, .menu-renovateur .menu-item > a { border-radius: 1.5rem; padding: 1.5rem; } .menu-renovateur .menu-item__submenu-toggle { text-align: left; } .menu-renovateur .menu-item__submenu-close { position: absolute; top: 2rem; right: 2rem; height: auto; border-radius: 9999px; text-align: right; outline-offset: 4px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding: 0; } .menu-renovateur--footer { display: grid; row-gap: 1rem; } @media (min-width: 600px) { .menu-renovateur--footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .menu-renovateur--footer { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .menu-renovateur--footer li .page_icon { height: 50px; width: 50px; } .menu-renovateur--footer li { display: flex; align-items: center; justify-content: flex-start; font-weight: 700; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } .menu-renovateur--footer li .sub-menu { display: none; } /* .primary-menu-container { */ .menu-homegrade { position: relative; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; width: 100%; --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); padding-top: 1rem; padding-bottom: 1rem; padding-left: 2rem; padding-right: 2rem; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } @media (min-width: 1440px) { .menu-homegrade { padding-left: 8rem; padding-right: 8rem; } } .menu-homegrade { /*##### RESPONSIVE */ /* @media (max-width: 960px) { &__wrapper-container { @apply mt-0 left-0 z-40 absolute hidden; min-height: 100vh; height: fit-content; top: 0; width: 100vw; // Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé) .nav-open & { @apply flex; } > ul { @apply max-w-xs mx-auto; padding-top: 5vh; } li.menu-item { @apply mt-0 text-center text-white font-medium py-8 text-lg !block pb-0; .sub-menu li { @apply text-sm; } } } // BURGER MENU body:has(.nav-open) { @apply max-h-screen overflow-hidden; } } */ /* @media (max-width: 960px) and (hover: none) { li.menu-item { @apply mx-auto } } */ } /* submenus */ .menu-homegrade .sub-menu[open] { display: block; } .menu-homegrade .sub-menu { position: static; bottom: 0px; margin-left: auto; margin-right: auto; --tw-translate-y: 100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); padding: 1.5rem; } @media (min-width: 960px) { .menu-homegrade .sub-menu { position: absolute; margin-left: 0px; margin-right: 0px; } } .menu-homegrade .sub-menu { z-index: 999; display: none; } .menu-homegrade .sub-menu--closed { display: none; } .menu-homegrade .sub-menu--open { display: block; } .menu-homegrade .sub-menu li { padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (min-width: 960px) { .menu-homegrade .sub-menu li { text-align: left; } } .menu-homegrade .sub-menu > a::after { transform: translateY(-2px) rotate(-90deg); content: ''; display: inline-block; height: 10px; width: 10px; margin-left: 20px; background-image: url('../resources/img/arrow_down_white.svg'); background-repeat: no-repeat; background-size: contain; transition: all 0.3s ease-out; } /* &__wrapper-container { } */ .menu-homegrade__navlist { margin-left: auto; margin-right: auto; width: 100%; max-width: 1440px; justify-content: flex-end; padding-right: 0px; } @media (min-width: 960px) { .menu-homegrade__navlist { display: flex; } } /* Highlight using list element */ .menu-homegrade__navlist li.current-page-parent > a, .menu-homegrade__navlist li.current_page_item > a { font-weight: 500; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); -webkit-text-decoration-line: underline; text-decoration-line: underline; -webkit-text-decoration-color: #DF1E1E; text-decoration-color: #DF1E1E; text-underline-offset: 8px; } .menu-homegrade__navlist li.menu-item { border-radius: 0.75rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center; font-weight: 500; } .menu-homegrade__navlist li.menu-item:hover, .menu-homegrade__navlist li.menu-item button:focus, .menu-homegrade__navlist li.menu-item a:focus { cursor: pointer; background-color: rgba(255, 255, 255, 0.1); } .menu-homegrade__navlist li.menu-item button:focus, .menu-homegrade__navlist li.menu-item a:focus { border-radius: 0.375rem; text-decoration: none; outline: 1px solid rgba(255, 255, 255, 0.8); outline-offset: 8px; } /* IF SUBMENU CHILD */ .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:hover, .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:focus { /* @apply text-secondary; */ } .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle { position: relative; padding-right: 1rem; } .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle:after { content: ''; display: inline-block; transition: all 0.3s ease-out; border-bottom: 2px solid white; border-right: 2px solid white; height: 10px; width: 10px; margin-left: 10px; } .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='false']:after { transform: translateY(-20%) rotate(45deg); } .menu-homegrade__navlist li.menu-item .menu-item__submenu-toggle[aria-expanded='true']:after { /* transform: rotate(225deg); */ transform: translateY(40%) rotate(225deg); } .menu-homegrade__burger-menu-toggle { position: absolute; right: 2.5rem; top: 50%; z-index: 50; --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 960px) { .menu-homegrade__burger-menu-toggle { display: none; } } .menu-homegrade__burger-menu-toggle { width: 26px; height: 26px; } .menu-homegrade__burger-menu-toggle .menu-toggle-bar { position: absolute; top: 50%; right: 0px; display: block; height: 2px; width: 100%; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); margin-top: -1px; transition: all 0.3s ease; } .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top { transform: translate(0, -7px); } .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle { } .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 7px); } .nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar { --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); } .nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top { transform: translate(0, 0) rotate(45deg); } .nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle { opacity: 0; } .nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 0) rotate(-45deg); } .menu-homegrade__burger-menu-toggle:hover path { fill: #DF1E1E; } @media screen and (max-width: 960px) { .menu-homegrade { overflow: hidden; } .menu-homegrade[opened] { -webkit-animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in; animation: height-in 400ms forwards ease-out, fade-in 800ms forwards ease-in; } .menu-homegrade[closing] { -webkit-animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in; animation: height-out 500ms forwards ease-in, fade-out 800ms forwards ease-in; } .menu-homegrade[closed] { display: none; } } .menu-homegrade--header { } .menu-homegrade--footer { margin-top: 2rem; display: grid; row-gap: 2rem; } @media (min-width: 600px) { .menu-homegrade--footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 782px) { .menu-homegrade--footer { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .menu-homegrade--footer li.menu-item a:hover { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .menu-homegrade--footer > li.menu-item { order: 5; } .menu-homegrade--footer > li.menu-item-has-children { order: 1; } .menu-homegrade--footer > li.menu-item > a, .menu-homegrade--footer h6.page-group-title { margin-bottom: 0.5rem; display: block; font-weight: 700; } .menu-homegrade--footer h6.page-group-title { cursor: not-allowed; /* order: 1; */ } .menu-homegrade--footer .sub-menu li { margin-top: 0.25rem; margin-bottom: 0.25rem; display: block; } .menu-homegrade--footer .wpml-ls-menu-item { display: none; } /* ########### BLOCKS ############ */ /* Home */ .home-header { margin-left: auto; margin-right: auto; margin-bottom: 6rem; max-width: 1280px; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 4rem; } @media (min-width: 960px) { .home-header { padding-left: 4rem; padding-right: 4rem; } } @media (min-width: 1280px) { .home-header { padding-top: 5rem; } } .home-header { isolation: isolate; /* relative */ } /* background-color: #fbfff5a6; */ .home-header__titling { position: relative; z-index: 10; margin-bottom: -100px; max-width: 580px; } @media (min-width: 960px) { .home-header__titling { position: absolute; margin-bottom: 0px; } } /* min-height: 80vh; */ .home-header__title { padding-bottom: 1.5rem; padding-top: 4rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; } @media (min-width: 782px) { .home-header__title { font-size: 2.25rem; line-height: 2.5rem; } } .home-header__title { line-height: 1.2; } /* aspect-ratio: 1.5; */ .home-header__scroll-down-indicator { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); width: 80px; height: 80px; } .home-header__scroll-down-indicator__arrow { -webkit-animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); animation: bouncingArrow 1s infinite alternate cubic-bezier(0.01, 0.61, 0.67, 0.99); /* cubic-bezier(0.01, 0.61, 0.39, 1); */ /* cubic-bezier(0.18, 0.89, 0.3, 1); */ } /* bg-red-100 */ .home-header__fresque { width: 100%; z-index: -1; --tw-bg-opacity: 1; background-color: rgb(250 245 255 / var(--tw-bg-opacity)); } .home-header__fresque img { height: 100%; max-height: 100%; width: 100%; -o-object-fit: contain; object-fit: contain; } /* object-position: 100% 100%; */ @media (min-width: 960px) { .home-header__fresque img { /* object-position: 100% 0%; */ } } @media (max-aspect-ratio: 16 / 9) { .home-header__fresque img { /* @apply bg-red-100; */ } } @media (min-aspect-ratio: 16 / 9) { .home-header__fresque img { /* @apply bg-green-100; */ } } @-webkit-keyframes bouncingArrow { 0% { transform: translateY(4px); } 100% { transform: translateY(-6px); } } @keyframes bouncingArrow { 0% { transform: translateY(4px); } 100% { transform: translateY(-6px); } } .section_latest_news { padding-top: 6rem; padding-bottom: 6rem; } .section_latest_news .section_titling { margin-left: auto; margin-right: auto; max-width: 28rem; } .section_latest_news .articles_container { margin-left: auto; margin-right: auto; display: grid; max-width: 1440px; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; padding-left: 2rem; padding-right: 2rem; padding-top: 4rem; padding-bottom: 4rem; } @media (min-width: 600px) { .section_latest_news .articles_container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1280px) { .section_latest_news .articles_container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #block-aides-financieres .section_titling { max-width: 782px; } #block-aides-financieres .card-large-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } @media (min-width: 960px) { #block-aides-financieres .card-large-content { display: grid; } } /* .logo_renolution { */ #block-aides-financieres .card-large-content__renolution-details .renolution__logo { margin-bottom: 2rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: 1.5rem; --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); padding: 1.5rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } #block-aides-financieres .card-large-content__renolution-details .renolution__title { padding-bottom: 0.75rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } #block-aides-financieres .card-large-content__renolution-details .cta { margin-top: 2rem; } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; padding-top: 1.5rem; } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_title { padding-top: 1.5rem; padding-bottom: 0.5rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_explanation { font-size: 0.875rem; line-height: 1.25rem; } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url { margin-top: 0.5rem; display: block; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url:hover { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } #block-aides-financieres .card-large-content__renolution-details .renolution__guide-external-links .question_url img { margin-left: 0.25rem; margin-top: -0.25rem; display: inline-block; } #block-aides-financieres .card-large-content__renolution-illustration-picture { margin-left: auto; } .swiper-content { position: relative; margin-left: auto; margin-right: auto; max-width: 1440px; padding-left: 6rem; padding-right: 6rem; /* @apply bg-fuchsia-100; */ } .swiper-container { height: auto; overflow: hidden; padding-left: 0.75rem; padding-right: 0.75rem; /* @apply bg-yellow-50; */ } .swiper-wrapper { width: 100%; flex-direction: column; row-gap: 5rem; padding-top: 6rem; padding-bottom: 4rem; } @media (min-width: 960px) { .swiper-wrapper { flex-direction: row; } } .swiper-slide .card-thematique { height: 100%; } .thematique-button-next, .thematique-button-prev { position: absolute; top: 50%; z-index: 50; display: none; opacity: 0.8; } @media (min-width: 960px) { .thematique-button-next, .thematique-button-prev { display: block; } } .thematique-button-next, .thematique-button-prev { width: 60px; height: 60px; } .thematique-button-next:hover, .thematique-button-next:focus, .thematique-button-prev:hover, .thematique-button-prev:focus { opacity: 1; filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } .thematique-button-next:focus, .thematique-button-prev:focus { border-radius: 9999px; } .thematique-button-next { right: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .thematique-button-prev { left: 0px; } .swiper-pagination { display: none; } @media (min-width: 960px) { .swiper-pagination { display: block; } } .swiper-pagination-bullet { margin-left: 0.5rem; margin-right: 0.5rem; height: 0.75rem; width: 0.75rem; border-width: 2px !important; border-style: solid !important; --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); opacity: 0.8; } .swiper-pagination-bullet:focus { outline-offset: 4px; } .swiper-pagination-bullet-active { --tw-border-opacity: 1 !important; border-color: rgb(223 30 30 / var(--tw-border-opacity)) !important; --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); opacity: 1; } /* .swiper-slide { background-color: red !important; text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } */ .section-show-thematiques { padding-left: 4rem; padding-right: 4rem; padding-top: 2rem; padding-bottom: 8rem; } .section-show-thematiques .thematiques-container { margin-left: auto; margin-right: auto; display: grid; max-width: 1280px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; row-gap: 8rem; padding-top: 4rem; } #block-demarches-administratives.card-large-content-container--has-illustration { padding-top: 16rem; } #block-demarches-administratives .card-large-content--has-illustration { padding-top: 7rem; } #block-demarches-administratives .card-large-content__top-illustration { transform: translate(-50%, -70%); } #block-demarches-administratives .card-large-content__links-container { grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 782px) { #block-demarches-administratives .card-large-content__links-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { #block-demarches-administratives .card-large-content__links-container { grid-template-columns: repeat(4, minmax(0, 1fr)); } } #block-questions-frequentes { padding-top: 7rem; padding-bottom: 7rem; } .questions-frequentes-grid { margin-left: auto; margin-right: auto; display: grid; max-width: 1280px; gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } @media (min-width: 782px) { .questions-frequentes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .questions-frequentes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ########### PAGE ############ */ .demo-components .title { padding-bottom: 4rem; text-align: center; font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; } .demo-components .buttons { padding-top: 8rem; padding-bottom: 8rem; } .demo-components .buttons .buttons-example { display: flex; justify-content: center; gap: 2rem; } .hover\:bg-primary:hover { --tw-bg-opacity: 1; background-color: rgb(47 1 84 / var(--tw-bg-opacity)); } .hover\:bg-secondary:hover { --tw-bg-opacity: 1; background-color: rgb(223 30 30 / var(--tw-bg-opacity)); } .hover\:bg-acoustique-coproprietes:hover { --tw-bg-opacity: 1; background-color: rgb(36 94 242 / var(--tw-bg-opacity)); } .hover\:bg-acoustique-coproprietes-light:hover { --tw-bg-opacity: 1; background-color: rgb(223 241 255 / var(--tw-bg-opacity)); } .hover\:bg-energies-urbanisme:hover { --tw-bg-opacity: 1; background-color: rgb(2 126 80 / var(--tw-bg-opacity)); } .hover\:bg-energies-urbanisme-light:hover { --tw-bg-opacity: 1; background-color: rgb(227 255 240 / var(--tw-bg-opacity)); } .hover\:bg-isolation-quotidien:hover { --tw-bg-opacity: 1; background-color: rgb(194 69 3 / var(--tw-bg-opacity)); } .hover\:bg-isolation-quotidien-light:hover { --tw-bg-opacity: 1; background-color: rgb(255 251 236 / var(--tw-bg-opacity)); } .hover\:bg-patrimoine-renovation:hover { --tw-bg-opacity: 1; background-color: rgb(139 47 247 / var(--tw-bg-opacity)); } .hover\:bg-patrimoine-renovation-light:hover { --tw-bg-opacity: 1; background-color: rgb(255 229 253 / var(--tw-bg-opacity)); } .hover\:bg-location:hover { --tw-bg-opacity: 1; background-color: rgb(223 0 43 / var(--tw-bg-opacity)); } .hover\:bg-location-light:hover { --tw-bg-opacity: 1; background-color: rgb(254 226 231 / var(--tw-bg-opacity)); } .hover\:text-primary:hover { --tw-text-opacity: 1; color: rgb(47 1 84 / var(--tw-text-opacity)); } .hover\:text-secondary:hover { --tw-text-opacity: 1; color: rgb(223 30 30 / var(--tw-text-opacity)); } .hover\:text-acoustique-coproprietes:hover { --tw-text-opacity: 1; color: rgb(36 94 242 / var(--tw-text-opacity)); } .hover\:text-acoustique-coproprietes-light:hover { --tw-text-opacity: 1; color: rgb(223 241 255 / var(--tw-text-opacity)); } .hover\:text-energies-urbanisme:hover { --tw-text-opacity: 1; color: rgb(2 126 80 / var(--tw-text-opacity)); } .hover\:text-energies-urbanisme-light:hover { --tw-text-opacity: 1; color: rgb(227 255 240 / var(--tw-text-opacity)); } .hover\:text-isolation-quotidien:hover { --tw-text-opacity: 1; color: rgb(194 69 3 / var(--tw-text-opacity)); } .hover\:text-isolation-quotidien-light:hover { --tw-text-opacity: 1; color: rgb(255 251 236 / var(--tw-text-opacity)); } .hover\:text-patrimoine-renovation:hover { --tw-text-opacity: 1; color: rgb(139 47 247 / var(--tw-text-opacity)); } .hover\:text-patrimoine-renovation-light:hover { --tw-text-opacity: 1; color: rgb(255 229 253 / var(--tw-text-opacity)); } .hover\:text-location:hover { --tw-text-opacity: 1; color: rgb(223 0 43 / var(--tw-text-opacity)); } .hover\:text-location-light:hover { --tw-text-opacity: 1; color: rgb(254 226 231 / var(--tw-text-opacity)); } @media (min-width: 782px) { .md\:my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; } .md\:flex { display: flex; } .md\:w-1\/2 { width: 50%; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } } @media (min-width: 960px) { .lg\:text-5xl { font-size: 3rem; line-height: 1; } }