From 574e2bb17431b574405a718bb4140b8d8bb0fa74 Mon Sep 17 00:00:00 2001 From: Antoine Date: Mon, 12 May 2025 16:48:44 +0200 Subject: [PATCH] STYLE Update app.css with new font imports, responsive container styles, and enhanced component styles for better layout and design consistency --- css/app.css | 1272 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 1066 insertions(+), 206 deletions(-) diff --git a/css/app.css b/css/app.css index c66488a..a094122 100644 --- a/css/app.css +++ b/css/app.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap'); + /* ! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com */ @@ -410,7 +412,7 @@ video { height: auto; } -*, ::before, ::after { +*, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -457,7 +459,7 @@ video { --tw-backdrop-sepia: ; } -::-webkit-backdrop { +::-webkit-backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -504,7 +506,7 @@ video { --tw-backdrop-sepia: ; } -::backdrop { +::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; @@ -551,371 +553,647 @@ video { --tw-backdrop-sepia: ; } -.container { +.container{ width: 100%; padding-right: 1rem; padding-left: 1rem; } -@media (min-width: 480px) { - .container { +@media (min-width: 480px){ + .container{ max-width: 480px; } } -@media (min-width: 600px) { - .container { +@media (min-width: 600px){ + .container{ max-width: 600px; padding-right: 2rem; padding-left: 2rem; } } -@media (min-width: 782px) { - .container { +@media (min-width: 782px){ + .container{ max-width: 782px; } } -@media (min-width: 960px) { - .container { +@media (min-width: 960px){ + .container{ max-width: 960px; padding-right: 0rem; padding-left: 0rem; } } -@media (min-width: 1280px) { - .container { +@media (min-width: 1280px){ + .container{ max-width: 1280px; } } -@media (min-width: 1440px) { - .container { +@media (min-width: 1440px){ + .container{ max-width: 1440px; } } -.m-8 { +@media (min-width: 1840px){ + .container{ + max-width: 1840px; + } +} + +.relative{ + position: relative; +} + +.m-8{ margin: 2rem; } -.my-3 { +.my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } -.my-8 { +.my-8{ margin-top: 2rem; margin-bottom: 2rem; } -.mx-auto { +.mx-auto{ margin-left: auto; margin-right: auto; } -.mb-8 { +.mb-8{ margin-bottom: 2rem; } -.mt-4 { - margin-top: 1rem; -} - -.mb-4 { +.mb-4{ margin-bottom: 1rem; } -.mb-1 { +.mb-1{ margin-bottom: 0.25rem; } -.mb-12 { +.mb-2{ + margin-bottom: 0.5rem; +} + +.mt-8{ + margin-top: 2rem; +} + +.mb-12{ margin-bottom: 3rem; } -.inline-block { - display: inline-block; +.block{ + display: block; } -.flex { +.flex{ display: flex; } -.h-1 { +.grid{ + display: grid; +} + +.h-1{ height: 0.25rem; } -.h-6 { - height: 1.5rem; +.h-48{ + height: 12rem; } -.min-h-screen { +.min-h-screen{ min-height: 100vh; } -.w-full { +.w-full{ width: 100%; } -.w-16 { +.w-16{ width: 4rem; } -.w-6 { - width: 1.5rem; -} - -.max-w-sm { +.max-w-sm{ max-width: 24rem; } -.max-w-screen-md { +.max-w-screen-md{ max-width: 782px; } -.flex-grow { +.flex-grow{ flex-grow: 1; } -.cursor-pointer { +.cursor-pointer{ cursor: pointer; } -.flex-col { +.grid-cols-1{ + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.flex-col{ flex-direction: column; } -.items-center { +.items-center{ align-items: center; } -.justify-center { +.justify-center{ justify-content: center; } -.justify-between { +.justify-between{ justify-content: space-between; } -.rounded { +.gap-6{ + gap: 1.5rem; +} + +.overflow-hidden{ + overflow: hidden; +} + +.rounded{ border-radius: 0.25rem; } -.border { +.rounded-lg{ + border-radius: 0.5rem; +} + +.border{ border-width: 1px; } -.border-b { +.border-b{ border-bottom-width: 1px; } -.border-primary { +.border-primary{ --tw-border-opacity: 1; - border-color: rgb(64 79 142 / var(--tw-border-opacity)); + border-color: rgb(19 111 99 / var(--tw-border-opacity)); } -.bg-primary { +.border-red-400{ + --tw-border-opacity: 1; + border-color: rgb(248 113 113 / var(--tw-border-opacity)); +} + +.bg-primary{ --tw-bg-opacity: 1; - background-color: rgb(64 79 142 / var(--tw-bg-opacity)); + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); } -.bg-gray-200 { +.bg-gray-200{ --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.bg-gray-50 { +.bg-red-100{ --tw-bg-opacity: 1; - background-color: rgb(249 250 251 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } -.bg-white { +.bg-white{ --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-red-500 { - --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +.object-cover{ + -o-object-fit: cover; + object-fit: cover; } -.p-4 { +.p-4{ padding: 1rem; } -.px-4 { +.px-4{ padding-left: 1rem; padding-right: 1rem; } -.py-2 { +.py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } -.px-3 { +.px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } -.py-12 { - padding-top: 3rem; - padding-bottom: 3rem; +.py-8{ + padding-top: 2rem; + padding-bottom: 2rem; } -.py-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; +.py-3{ + padding-top: 0.75rem; + padding-bottom: 0.75rem; } -.text-center { - text-align: center; -} - -.text-5xl { +.text-5xl{ font-size: 3rem; line-height: 1; } -.text-2xl { +.text-2xl{ font-size: 1.5rem; line-height: 2rem; } -.text-lg { +.text-lg{ font-size: 1.125rem; line-height: 1.75rem; } -.text-sm { +.text-sm{ font-size: 0.875rem; line-height: 1.25rem; } -.font-light { +.text-3xl{ + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-xl{ + font-size: 1.25rem; +} + +.font-light{ font-weight: 300; } -.font-bold { +.font-bold{ font-weight: 700; } -.font-extrabold { +.font-extrabold{ font-weight: 800; } -.uppercase { +.font-semibold{ + font-weight: 600; +} + +.uppercase{ text-transform: uppercase; } -.leading-tight { +.leading-tight{ line-height: 1.25; } -.text-gray-800 { +.text-gray-800{ --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); } -.text-white { +.text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - -.text-gray-900 { - --tw-text-opacity: 1; - color: rgb(17 24 39 / var(--tw-text-opacity)); -} - -.text-gray-600 { +.text-gray-600{ --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); } -.text-gray-700 { +.text-gray-700{ --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity)); } -.antialiased { +.text-red-700{ + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity)); +} + +.antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.alignfull { +.shadow-md{ + --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); +} + +.alignfull{ margin: 2rem calc(50% - 50vw) !important; max-width: 100vw !important; width: 100vw; } -.alignwide { +.alignwide{ margin: 2rem 0; max-width: 1280px !important; } -.alignnone { +.alignnone{ margin-left: 0px; margin-right: 0px; height: auto; max-width: 100%; } -.aligncenter { +.aligncenter{ margin: 0.5rem auto; display: block; } -@media (min-width: 600px) { - .alignleft:not(.wp-block-button) { +@media (min-width: 600px){ + .alignleft:not(.wp-block-button){ margin-right: 0.5rem; float: left; } - .alignright:not(.wp-block-button) { + .alignright:not(.wp-block-button){ margin-left: 0.5rem; float: right; } - .wp-block-button.alignleft a { + .wp-block-button.alignleft a{ float: left; margin-right: 1rem; } - .wp-block-button.alignright a { + .wp-block-button.alignright a{ float: right; margin-left: 1rem; } } -.wp-caption { +.wp-caption{ display: inline-block; } -.wp-caption img { +.wp-caption img{ margin-bottom: 0.5rem; line-height: 1; } -.wp-caption-text { +.wp-caption-text{ font-size: 0.875rem; color: #4b5563; } /* ########### BASE ############ */ +a { + text-decoration: none; + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); +} + +body { + font-family: 'Nunito Sans', sans-serif; + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Fjalla One', sans-serif; + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); +} + +h1{ + font-size: 3.75rem; + line-height: 1; +} + +h2{ + font-size: 3rem; + line-height: 1; +} + +body.wp-admin h1:not(.editor-visual-editor h1), +body.wp-admin h2:not(.editor-visual-editor h2), +body.wp-admin h3:not(.editor-visual-editor h3), +body.wp-admin h4:not(.editor-visual-editor h4), +body.wp-admin h5:not(.editor-visual-editor h5), +body.wp-admin h6:not(.editor-visual-editor h6) { + font-family: unset !important; + font-style: unset !important; + font-size: unset !important; + line-height: unset !important; + letter-spacing: unset !important; + text-transform: unset !important; + text-align: unset !important; +} + +.nunito { + font-family: 'Nunito Sans', sans-serif; +} + +.fjalla { + font-family: 'Fjalla One', sans-serif; +} + +.wp-block-button__link { + border-radius: 0px; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + background-color: transparent; + --tw-text-opacity: 1; + color: rgb(19 111 99 / var(--tw-text-opacity)); +} + +:root { + --swiper-pagination-bullet-border-radius: 0; + --swiper-pagination-bullet-height: 2px; + --swiper-pagination-bullet-width: 30px; + --swiper-pagination-bullet-horizontal-gap: 10px; + --swiper-theme-color: var( + --wp--preset--color--primary + ) !important; + --swiper-pagination-color: var( + --color-primary + ) !important; +} + +.swiper-pagination-bullet{ + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); +} + /* ########### COMPONENTS ############ */ +.post-card-dbmod__title{ + font-size: 1.5rem; + line-height: 2rem; + font-weight: 700; +} + +.post-card-dbmod__details{ + font-size: 0.875rem; + line-height: 1.25rem; + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.latest-news-swiper { + padding: 20px 40px; +} + +.news-card{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); +} + +.news-image img { + width: 100%; + height: 200px; + -o-object-fit: cover; + object-fit: cover; +} + +.news-content { + padding: 15px; +} + +.news-content h3 { + margin: 0 0 10px; + font-size: 1.2em; +} + +.news-excerpt { + font-size: 0.9em; + color: #666; +} + +.article-card{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding: 1rem; +} + +.article-card__title{ + padding-bottom: 1rem; + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 500; + text-transform: uppercase; +} + +.article-card__tags{ + display: flex; + flex-wrap: wrap; + gap: 1rem; + padding-top: 1rem; +} + +.article-caroussel{ + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 3rem; +} + +.content-meta{ + margin-bottom: 2.5rem; + display: flex; + align-items: flex-end; + gap: 1.5rem; +} + +.content-meta__type{ + font-size: 1.25rem; + font-weight: 700; +} + +.content-meta__type:before{ + margin-right: 0.5rem; + display: inline-block; + height: 0.75rem; + width: 0.75rem; + --tw-content: ''; + content: var(--tw-content); +} + +.content-meta__type--revue:before{ + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(255 166 48 / var(--tw-bg-opacity)); +} + +.content-meta__type--article:before{ + width: 1.5rem; + --tw-rotate: -45deg; + 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(214 195 255 / var(--tw-bg-opacity)); +} + +.content-meta__reading-time { + line-height: 27px; + /* @apply text-sm text-gray-500; */ +} + +.article-tag{ + position: relative; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + background-color: transparent; + padding-left: 0.75rem; + padding-right: 0.75rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.article-tag:after { + content: ''; + position: absolute; + top: 0px; + left: 50%; + height: 100%; + width: 100%; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + translate: -50% 0; + transform: perspective(800px) rotateY(10deg); +} + +.article-tag:hover{ + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + /* ########### LAYOUT ############ */ -.primary-menu-container { +.primary-menu-container{ position: relative; margin-left: auto; margin-right: auto; @@ -925,7 +1203,7 @@ video { height: -moz-fit-content; height: fit-content; --tw-bg-opacity: 1; - background-color: rgb(64 79 142 / var(--tw-bg-opacity)); + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); padding-top: 2rem; padding-bottom: 2rem; padding-left: 2rem; @@ -934,72 +1212,75 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -@media (min-width: 1440px) { - .primary-menu-container { +@media (min-width: 1440px){ + .primary-menu-container{ padding-left: 8rem; padding-right: 8rem; } } -.primary-menu-container nav#primary-menu-nav { +.primary-menu-container a{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.primary-menu-container nav#primary-menu-nav{ margin-left: auto; margin-right: auto; width: 100%; max-width: 1440px; } -.primary-menu-container .logo { +.primary-menu-container .logo{ margin-right: 3rem; width: 190px; } -@media (min-width: 1280px) { - .primary-menu-container .logo { +@media (min-width: 1280px){ + .primary-menu-container .logo{ width: 222px; } } -.primary-menu-container #primary-menu { +.primary-menu-container #primary-menu{ display: flex; flex-direction: column; align-items: center; justify-content: space-around; } -@media (min-width: 960px) { - .primary-menu-container #primary-menu { +@media (min-width: 960px){ + .primary-menu-container #primary-menu{ flex-direction: row; justify-content: space-between; } } -.primary-menu-container #primary-menu ul { +.primary-menu-container #primary-menu ul{ -moz-column-gap: 0.5rem; column-gap: 0.5rem; padding-right: 0px; } -@media (min-width: 960px) { - .primary-menu-container #primary-menu ul { +@media (min-width: 960px){ + .primary-menu-container #primary-menu ul{ display: flex; -moz-column-gap: 1rem; column-gap: 1rem; - padding-right: 1rem; } } -@media (min-width: 1280px) { - .primary-menu-container #primary-menu ul { +@media (min-width: 1280px){ + .primary-menu-container #primary-menu ul{ -moz-column-gap: 2rem; column-gap: 2rem; - padding-right: 6rem; } } /* Highlight using list element */ .primary-menu-container #primary-menu li.current-page-parent > a, - .primary-menu-container #primary-menu li.current_page_item > a { + .primary-menu-container #primary-menu li.current_page_item > a{ font-weight: 500; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -1010,7 +1291,7 @@ video { text-underline-offset: 8px; } -.primary-menu-container #primary-menu li.menu-item { +.primary-menu-container #primary-menu li.menu-item{ text-align: center; font-size: 0.875rem; line-height: 1.25rem; @@ -1018,10 +1299,10 @@ video { } .primary-menu-container #primary-menu li.menu-item:hover > a, - .primary-menu-container #primary-menu li.menu-item a:focus { + .primary-menu-container #primary-menu li.menu-item a:focus{ cursor: pointer; --tw-text-opacity: 1; - color: rgb(20 184 166 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); -webkit-text-decoration-line: underline; text-decoration-line: underline; text-underline-offset: 8px; @@ -1034,17 +1315,17 @@ video { /* IF SUBMENU CHILD */ .primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:hover, - .primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:focus { + .primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:focus{ --tw-text-opacity: 1; color: rgb(20 184 166 / var(--tw-text-opacity)); } -.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle { +.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle{ position: relative; padding-right: 1rem; } -.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:after { +.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:after{ right: 0px; content: '▼'; position: absolute; @@ -1068,6 +1349,23 @@ video { transform: rotate(180deg); } +.primary-menu-container #primary-menu li.menu-item.has-page-icon{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + gap: 0.75rem; +} + +.primary-menu-container #primary-menu li.menu-item.has-page-icon .page_icon{ + height: 1.25rem; + width: 1.25rem; + -o-object-fit: contain; + object-fit: contain; + -o-object-position: center; + object-position: center; +} + @media (min-width: 960px) { .primary-menu-container #primary-menu li.menu-item.menu-item-has-children:hover .menu-item-submenu-toggle:after { transform: rotate(180deg); @@ -1080,17 +1378,17 @@ video { /* submenus */ -.primary-menu-container #primary-menu li .sub-menu { +.primary-menu-container #primary-menu li .sub-menu{ position: static; margin-left: auto; margin-right: auto; --tw-bg-opacity: 1; - background-color: rgb(64 79 142 / var(--tw-bg-opacity)); + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); padding: 1.5rem; } -@media (min-width: 960px) { - .primary-menu-container #primary-menu li .sub-menu { +@media (min-width: 960px){ + .primary-menu-container #primary-menu li .sub-menu{ position: absolute; margin-left: 0px; margin-right: 0px; @@ -1106,13 +1404,13 @@ video { display: block; } -.primary-menu-container #primary-menu li .sub-menu li { +.primary-menu-container #primary-menu li .sub-menu li{ padding-top: 0.5rem; padding-bottom: 0.5rem; } -@media (min-width: 960px) { - .primary-menu-container #primary-menu li .sub-menu li { +@media (min-width: 960px){ + .primary-menu-container #primary-menu li .sub-menu li{ text-align: left; } } @@ -1130,7 +1428,35 @@ video { transition: all 0.3s ease-out; } -button#burger-menu-toggle { +.secondary-menu-container{ + display: flex; + align-items: center; + justify-content: space-between; + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + padding-left: 2rem; + padding-right: 2rem; +} + +@media (min-width: 1440px){ + .secondary-menu-container{ + padding-left: 8rem; + padding-right: 8rem; + } +} + +.secondary-menu-container a{ + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.secondary-menu-container .secondary-menu-nav ul{ + display: flex; + justify-content: space-between; + gap: 1rem; +} + +button#burger-menu-toggle{ position: absolute; right: 2.5rem; top: 50%; @@ -1139,8 +1465,8 @@ button#burger-menu-toggle { 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) { - button#burger-menu-toggle { +@media (min-width: 960px){ + button#burger-menu-toggle{ display: none; } } @@ -1150,7 +1476,7 @@ button#burger-menu-toggle { height: 26px; } -button#burger-menu-toggle .menu-toggle-bar { +button#burger-menu-toggle .menu-toggle-bar{ position: absolute; top: 50%; right: 0px; @@ -1174,7 +1500,7 @@ button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 7px); } -.nav-open button#burger-menu-toggle .menu-toggle-bar { +.nav-open button#burger-menu-toggle .menu-toggle-bar{ --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity)); } @@ -1191,21 +1517,21 @@ button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom { transform: translate(0, 0) rotate(-45deg); } -button#burger-menu-toggle:hover path { +button#burger-menu-toggle:hover path{ fill: #14B8A6; } /* RESPONSIVE */ @media (max-width: 960px) { - .primary-menu-container #primary-menu { + .primary-menu-container #primary-menu{ position: absolute; left: 0px; z-index: 40; margin-top: 0px; display: none; --tw-bg-opacity: 1; - background-color: rgb(64 79 142 / var(--tw-bg-opacity)); + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); /* transition: all 0.3s ease-out; transform: translateY(-120vh); */ min-height: 100vh; @@ -1218,11 +1544,11 @@ button#burger-menu-toggle:hover path { /* Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé) */ - .nav-open .primary-menu-container #primary-menu { + .nav-open .primary-menu-container #primary-menu{ display: flex; } - .primary-menu-container #primary-menu > ul { + .primary-menu-container #primary-menu > ul{ margin-left: auto; margin-right: auto; max-width: 20rem; @@ -1230,7 +1556,7 @@ button#burger-menu-toggle:hover path { padding-top: 5vh; } - .primary-menu-container #primary-menu li.menu-item { + .primary-menu-container #primary-menu li.menu-item{ margin-top: 0px; display: block !important; padding-top: 2rem; @@ -1244,14 +1570,14 @@ button#burger-menu-toggle:hover path { color: rgb(255 255 255 / var(--tw-text-opacity)); } - .primary-menu-container #primary-menu li.menu-item .sub-menu li { + .primary-menu-container #primary-menu li.menu-item .sub-menu li{ font-size: 0.875rem; line-height: 1.25rem; } /* BURGER MENU */ - body:has(.nav-open) { + body:has(.nav-open){ max-height: 100vh; overflow: hidden; /* #content, @@ -1272,41 +1598,80 @@ button#burger-menu-toggle:hover path { @apply w-max mx-auto; } */ - .primary-menu-container li.menu-item { + .primary-menu-container li.menu-item{ margin-left: auto; margin-right: auto; } } +footer{ + margin-left: auto; + margin-right: auto; + padding-left: 3rem; + padding-right: 3rem; + padding-top: 16rem; +} + +footer .branding{ + margin-bottom: 3rem; + width: 100%; +} + +footer .branding .website-title{ + width: 100%; +} + +footer .credits{ + width: 100%; + -moz-column-gap: 6rem; + column-gap: 6rem; + row-gap: 3rem; + display: grid; + -moz-column-gap: 100px; + column-gap: 100px; + grid-auto-flow: column; + /* clé ici */ + grid-template-rows: repeat(2, auto); + grid-template-columns: repeat(4, 1fr); +} + +footer .credits > :first-child { + grid-row: span 2; +} + +footer .socials a{ + display: block; +} + article > *:not(.entry-content), -.entry-content > * { +.entry-content > *{ margin-left: auto; margin-right: auto; max-width: 960px; } -.entry-content h1, .block-editor-block-list__layout h1 { +.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 { +.entry-content h2, .block-editor-block-list__layout h2{ font-size: 1.25rem; } -.entry-content h3, .block-editor-block-list__layout h3 { +.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 { +.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 { +.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; } @@ -1316,88 +1681,583 @@ article > *:not(.entry-content), .entry-content ol, .block-editor-block-list__layout p, .block-editor-block-list__layout ul, - .block-editor-block-list__layout ol { + .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 { +.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 { +.entry-content ol li, .block-editor-block-list__layout ol li{ list-style-position: inside; list-style-type: decimal; } +/* ########### PAGES ############ */ + +.archive-dbmob h1 span.acronyme{ + display: block; + width: 100%; +} + +.archive-dbmob h1 span.explanation{ + font-size: 1.875rem; + line-height: 2.25rem; + font-weight: 700; +} + +.archive-dbmob .page-heading{ + margin-left: auto; + margin-right: auto; + max-width: 960px; + text-align: center; +} + +.archive-dbmob__heading{ + --tw-bg-opacity: 1; + background-color: rgb(147 197 253 / var(--tw-bg-opacity)); +} + +.archive-dbmob .post-grid{ + display: grid; + grid-template-columns: repeat(1, minmax(0, 1fr)); + gap: 1rem; +} + +@media (min-width: 782px){ + .archive-dbmob .post-grid{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 960px){ + .archive-dbmob .post-grid{ + grid-template-columns: repeat(3, minmax(0, 1fr)); + } +} + /* ########### BLOCKS ############ */ +.block-front-header{ + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + padding-top: 8rem; + padding-bottom: 8rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.block-front-header a, + .block-front-header h1, + .block-front-header h2, + .block-front-header h3, + .block-front-header h4, + .block-front-header h5, + .block-front-header h6{ + margin-left: auto; + margin-right: auto; + margin-bottom: 1.5rem; + max-width: 782px; + padding-bottom: 0.75rem; + text-transform: uppercase; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); + line-height: 1.2; +} + +.block-front-header p{ + margin-left: auto; + margin-right: auto; + margin-bottom: 1.5rem; + max-width: 42rem; +} + +.block-front-header .wp-block-carhop-blocks-cta { + text-transform: none; + font-weight: 700; +} + +.front-header__innerblocks { + /* @apply bg-red-100; */ +} + +.chapter-section{ + margin-top: 0px !important; + margin-bottom: 0px !important; + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + padding-left: 3rem; + padding-right: 3rem; +} + +@media (min-width: 1440px){ + .chapter-section{ + gap: 3rem; + } +} + +.chapter-section { + /* min-height: 80vh; */ +} + +@media (min-width: 1280px){ + .chapter-section{ + padding-top: 8rem; + } +} + +.chapter-section{ + margin-left: auto; + margin-right: auto; +} + +/* & + *:not(.simple-screen) { + @apply xl:mt-32; + } */ + +.chapter-section--right{ + flex-direction: row-reverse; +} + +.chapter-section__content { + flex-shrink: 0; + max-width: 32rem; +} + +.chapter-section__content p{ + max-width: 24rem; + --tw-text-opacity: 1; + color: rgb(82 82 82 / var(--tw-text-opacity)); +} + +/* @apply max-w-xl; */ + +.chapter-section__innerblocks p { +} + +.chapter-section__cover{ + -o-object-fit: contain; + object-fit: contain; + min-width: 0; + flex-shrink: 1; + max-width: 100%; + /* Empêche de dépasser son conteneur */ + display: block; +} + +.chapter-section__cover--large{ + height: 24rem !important; +} + +.chapter-section__cover--grande{ + height: 20rem !important; +} + +.chapter-section__cover--medium{ + height: 16rem !important; +} + +.chapter-section__cover--small{ + height: 3rem !important; +} + +.subscribe-infolettre{ + position: relative; + padding-left: 6rem; + padding-right: 6rem; + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; + z-index: 5; +} + +.subscribe-infolettre:after{ + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + z-index: 0; + height: 100%; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + --tw-content: ""; + content: var(--tw-content); + left: 50%; + transform: perspective(800px) rotateY(3deg) + rotateX(1deg) translateX(-50%); +} + +.subscribe-infolettre__inner{ + position: relative; + z-index: 10; + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 1840px; + grid-template-columns: repeat(1, minmax(0, 1fr)); + align-items: center; + row-gap: 3rem; + padding-top: 6rem; + padding-bottom: 6rem; +} + +@media (min-width: 782px){ + .subscribe-infolettre__inner{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (min-width: 1280px){ + .subscribe-infolettre__inner{ + padding-top: 8rem; + padding-bottom: 8rem; + } +} + +@media (min-width: 1440px){ + .subscribe-infolettre__inner{ + -moz-column-gap: 8rem; + column-gap: 8rem; + padding-top: 10rem; + padding-bottom: 10rem; + } +} + +.subscribe-infolettre h1, + .subscribe-infolettre h2, + .subscribe-infolettre h3, + .subscribe-infolettre h4, + .subscribe-infolettre h5, + .subscribe-infolettre h6, + .subscribe-infolettre__title{ + font-weight: 700; + --tw-text-opacity: 1 !important; + color: rgb(255 255 255 / var(--tw-text-opacity)) !important; +} + +.subscribe-infolettre__content .block-title{ + margin-bottom: 1.5rem; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.subscribe-infolettre__content h2{ + margin-bottom: 3rem; + font-size: 3rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + line-height: 1.15; + max-width: 42rem; +} + +.subscribe-infolettre__content > *{ + max-width: 42rem; +} + +.subscribe-infolettre__description{ + font-size: 1.125rem; + line-height: 1.75rem; +} + +.subscribe-infolettre__form{ + max-width: 42rem; +} + +.subscribe-infolettre__form input{ + margin-bottom: 1rem; + display: block; + width: 100%; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); + background-color: transparent; + padding: 0.75rem; + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + +.block-dernieres-dynamiques{ + --tw-bg-opacity: 1; + background-color: rgb(255 248 235 / var(--tw-bg-opacity)); + padding-left: 3rem; + padding-right: 3rem; + padding-top: 8rem; + padding-bottom: 8rem; +} + +@media (min-width: 1280px){ + .block-dernieres-dynamiques{ + padding-left: 6rem; + padding-right: 6rem; + } +} + +.block-dernieres-dynamiques__inner{ + margin-left: auto; + margin-right: auto; + max-width: 1440px; +} + +.block-dernieres-dynamiques__header{ + margin-bottom: 3rem; + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 2rem; + font-size: 2.25rem; + line-height: 2.5rem; + text-transform: uppercase; +} + +.block-dernieres-dynamiques__header .block-title{ + display: flex; + flex-grow: 1; + align-items: flex-end; + justify-content: space-between; + gap: 2rem; + font-size: 2.25rem; + line-height: 2.5rem; + text-transform: uppercase; +} + +.block-dernieres-dynamiques__header .block-title span{ + display: block; + flex-shrink: 0; +} + +.block-dernieres-dynamiques__header .block-title:after{ + z-index: 50; + margin-bottom: 0.5rem; + display: block; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(19 111 99 / var(--tw-bg-opacity)); + height: 1px; + content: ' '; +} + +.block-dernieres-dynamiques__header .header-link{ + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 700; + font-family: 'Nunito Sans', sans-serif; + text-transform: none; +} + +.block-dernieres-dynamiques__header .header-link span{ + padding-top: 0.25rem; +} + +.block-dernieres-dynamiques__header .header-link svg{ + height: 2rem; + width: 2rem; + transition: transform 0.3s ease-in-out; +} + +.block-dernieres-dynamiques__header .header-link svg path, + .block-dernieres-dynamiques__header .header-link svg circle{ + stroke: #136F63; + stroke-width: 2; +} + +.block-dernieres-dynamiques__header .header-link:hover svg{ + --tw-translate-x: 0.5rem; + --tw-rotate: 45deg; + 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)); +} + +.block-dernieres-dynamiques__issue-info{ + margin-bottom: 2.5rem; + display: flex; + align-items: flex-end; + gap: 1.5rem; +} + +.block-dernieres-dynamiques__issue-info .block-dernieres-dynamiques__issue-type::before{ + margin-right: 0.5rem; + display: inline-block; + height: 0.75rem; + width: 0.75rem; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(255 166 48 / var(--tw-bg-opacity)); + --tw-content: ''; + content: var(--tw-content); +} + +.block-dernieres-dynamiques__issue-info .block-dernieres-dynamiques__issue-type{ + font-size: 1.25rem; + font-weight: 700; +} + +.block-dernieres-dynamiques__issue-info .block-dernieres-dynamiques__issue-reading-time { + line-height: 27px; +} + +.block-dernieres-dynamiques__issue-title{ + padding-bottom: 3rem; + font-size: 3.75rem; + text-transform: uppercase; + line-height: 1.1; +} + +.block-dernieres-dynamiques__issue-content-wrapper{ + display: grid; + gap: 3rem; + padding-bottom: 3rem; +} + +@media (min-width: 1440px){ + .block-dernieres-dynamiques__issue-content-wrapper{ + gap: 6rem; + } +} + +.block-dernieres-dynamiques__issue-content-wrapper { + grid-template-columns: 61.8fr 38.2fr; +} + +.block-dernieres-dynamiques__issue-content { +} + +.block-dernieres-dynamiques__issue-thumbnail-wrapper{ + position: relative; +} + +.block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background{ + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + top: 1.25rem; + left: 2rem; + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + height: 94%; + width: 104%; + transform: perspective(800px) rotateY(10deg) + skewX(1deg) rotateZ(4deg) rotateX(1deg) scale(0.98) + translateY(-2px); + z-index: 0; +} + +.block-dernieres-dynamiques__issue-thumbnail-wrapper .card-background::before{ + position: absolute; + right: 0px; + bottom: 0px; + height: 100%; + width: 100%; + --tw-bg-opacity: 1; + background-color: rgb(239 232 255 / var(--tw-bg-opacity)); + --tw-content: ''; + content: var(--tw-content); + width: calc(100% - 32px); + height: calc(100% - 32px); + left: 16px; + top: 16px; + z-index: 0; +} + +.block-dernieres-dynamiques__issue-thumbnail{ + border-width: 1px; + --tw-border-opacity: 1; + border-color: rgb(19 111 99 / var(--tw-border-opacity)); + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + transform: perspective(800px) rotateY(10deg) skewX(2deg); + height: 300px; + position: relative; + z-index: 10; +} + +.block-dernieres-dynamiques__issue-thumbnail img { + height: 100%; + -o-object-fit: cover; + object-fit: cover; + position: relative; + z-index: 2; +} + +.block-dernieres-dynamiques__issue-description{ + font-size: 1.25rem; +} + +.block-dernieres-dynamiques .related-articles__title{ + padding-bottom: 2rem; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.1em; + font-family: 'Nunito Sans', sans-serif; +} + /* Home */ -@media (min-width: 782px) { - .md\:my-6 { +@media (min-width: 600px){ + .sm\:inline{ + display: inline; + } +} + +@media (min-width: 782px){ + .md\:my-6{ margin-top: 1.5rem; margin-bottom: 1.5rem; } - .md\:flex { + .md\:flex{ display: flex; } - .md\:w-1\/2 { + .md\:w-1\/2{ width: 50%; } - .md\:text-3xl { + .md\:grid-cols-2{ + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } } -@media (min-width: 960px) { - .lg\:-mx-4 { - margin-left: -1rem; - margin-right: -1rem; - } - - .lg\:mx-4 { - margin-left: 1rem; - margin-right: 1rem; - } - - .lg\:mt-0 { - margin-top: 0px; - } - - .lg\:block { - display: block; - } - - .lg\:flex { +@media (min-width: 960px){ + .lg\:flex{ display: flex; } - .lg\:hidden { - display: none; + .lg\:grid-cols-3{ + grid-template-columns: repeat(3, minmax(0, 1fr)); } - .lg\:items-center { + .lg\:items-center{ align-items: center; } - .lg\:justify-between { + .lg\:justify-between{ justify-content: space-between; } - .lg\:bg-transparent { - background-color: transparent; - } - - .lg\:p-0 { - padding: 0px; - } - - .lg\:text-5xl { + .lg\:text-5xl{ font-size: 3rem; line-height: 1; }