diff --git a/css/app.css b/css/app.css index be75e7a..8c3294d 100644 --- a/css/app.css +++ b/css/app.css @@ -1192,28 +1192,23 @@ summary { } .filter-acoustique-coproprietes { - filter: invert(27%) sepia(88%) saturate(1302%) - hue-rotate(206deg) brightness(105%) contrast(114%); + 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: 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: 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-patrimoine-renovation { + 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%); +.filter-location-renovation-circulaire { + filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%); } /* ########### COMPONENTS ############ */ @@ -1374,28 +1369,23 @@ summary { } &.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%); + 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%); + 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%); + 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%); + 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%); + filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .card-large-content-container { @@ -1988,28 +1978,23 @@ summary { } .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%); + 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%); + 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%); + 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%); + 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%); + filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .card-thematique { @@ -2084,28 +2069,23 @@ summary { } .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%); + 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%); + 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%); + 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%); + 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%); + filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); } .post-conseils-chapter-header { @@ -3285,6 +3265,10 @@ body.petites-coproprietes .post-conseils-chapter-header time, .entry-content--p color: rgb(36 94 242 / var(--tw-text-opacity)); } +body.petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover, body.acoustique .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--acoustique .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--acoustique .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--acoustique .homegrade-blocks-lien-chapitre__cta:hover { + filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%); +} + /* PETITES COPROPRIÉTÉS — SPECIFIC */ body.petites-coproprietes .post-conseils-chapter-header, .entry-content--petites-coproprietes .post-conseils-chapter-header, .post-conseil-page--petites-coproprietes .post-conseils-chapter-header, .post-question-page--petites-coproprietes .post-conseils-chapter-header { @@ -3446,6 +3430,10 @@ body.urbanisme .post-conseils-chapter-header time, .entry-content--urbanisme .p color: rgb(2 126 80 / var(--tw-text-opacity)); } +body.urbanisme .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--urbanisme .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--urbanisme .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--urbanisme .homegrade-blocks-lien-chapitre__cta:hover, body.energies .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--energies .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--energies .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--energies .homegrade-blocks-lien-chapitre__cta:hover { + filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%); +} + /* URBANISME — SPECIFIC */ body.urbanisme .post-conseils-chapter-header, .entry-content--urbanisme .post-conseils-chapter-header, .post-conseil-page--urbanisme .post-conseils-chapter-header, .post-question-page--urbanisme .post-conseils-chapter-header { @@ -3592,6 +3580,10 @@ body.au-quotidien .post-conseils-chapter-header time, .entry-content--au-quotid color: rgb(194 69 3 / var(--tw-text-opacity)); } +body.au-quotidien .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover, body.isolation .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--isolation .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--isolation .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--isolation .homegrade-blocks-lien-chapitre__cta:hover { + filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%); +} + /* AU QUOTIDIEN — SPECIFIC */ body.au-quotidien .post-conseils-chapter-header, .entry-content--au-quotidien .post-conseils-chapter-header, .post-conseil-page--au-quotidien .post-conseils-chapter-header, .post-question-page--au-quotidien .post-conseils-chapter-header { @@ -3690,6 +3682,10 @@ body.patrimoine .post-conseils-chapter-header time, .entry-content--patrimoine color: rgb(139 47 247 / var(--tw-text-opacity)); } +body.patrimoine .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--patrimoine .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--patrimoine .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--patrimoine .homegrade-blocks-lien-chapitre__cta:hover { + filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); +} + body.renovation .post-conseils-chapter-header, .entry-content--newpurplethematic .post-conseils-chapter-header, .post-conseil-page--newpurplethematic .post-conseils-chapter-header, .post-question-page--newpurplethematic .post-conseils-chapter-header { background: var(--wp--preset--gradient--gradient-purple); } @@ -3832,6 +3828,10 @@ body.location .post-conseils-chapter-header time, .entry-content--location .pos color: rgb(223 0 43 / var(--tw-text-opacity)); } +body.location .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--location .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--location .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--location .homegrade-blocks-lien-chapitre__cta:hover, body.renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover, .entry-content--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover, .post-conseil-page--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover, .post-question-page--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover { + filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%); +} + /* RENOVATION CIRCULAIRE — SPECIFIC */ body.renovation-circulaire .post-conseils-chapter-header, .entry-content--renovation-circulaire .post-conseils-chapter-header, .post-conseil-page--renovation-circulaire .post-conseils-chapter-header, .post-question-page--renovation-circulaire .post-conseils-chapter-header { @@ -4780,13 +4780,46 @@ article > *:not(.entry-content, .chapter-header-block), height: fit-content; width: 100%; border-radius: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); aspect-ratio: 1/1; - background-color: red; } .homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cover img { - max-width: 86%; - max-height: 86%; + max-width: 76%; + max-height: 76%; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 2rem; + font-weight: 700; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta::after { + position: absolute; + content: var(--tw-content); + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta:hover { + opacity: 1; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta { + transition: font-weight 0.3s ease-in-out; +} + +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta .cta_arrow_button { + display: block; + width: 50px; + height: 50px; } .homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre { @@ -4803,6 +4836,10 @@ article > *:not(.entry-content, .chapter-header-block), font-weight: 700; } +.homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre__cta { + font-weight: 700; +} + /* ########### PAGE ############ */ .demo-components .title { diff --git a/resources/css/blocks/chapitrage-thematique.css b/resources/css/blocks/chapitrage-thematique.css index 2402643..f90b888 100644 --- a/resources/css/blocks/chapitrage-thematique.css +++ b/resources/css/blocks/chapitrage-thematique.css @@ -5,12 +5,28 @@ @apply mt-0; } &__cover { - @apply rounded-3xl w-full h-fit; + @apply rounded-3xl w-full h-fit bg-white shadowed; aspect-ratio: 1/1; - background-color: red; + img { - max-width: 86%; - max-height: 86%; + max-width: 76%; + max-height: 76%; + } + } + &__cta { + @apply after:absolute + after:inset-0 + font-bold + hover:opacity-100 + pt-8 + flex + items-center + justify-between; + transition: font-weight 0.3s ease-in-out; + .cta_arrow_button { + @apply block; + width: 50px; + height: 50px; } } } @@ -20,5 +36,8 @@ &__title { @apply text-xl font-bold pb-3; } + &__cta { + @apply font-bold; + } } }