diff --git a/mons/assets/svg/Group 88.svg b/mons/assets/svg/Group 88.svg new file mode 100644 index 00000000..70b27321 --- /dev/null +++ b/mons/assets/svg/Group 88.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/mons/assets/svg/arrow-next.svg b/mons/assets/svg/arrow-next.svg new file mode 100644 index 00000000..f37abef4 --- /dev/null +++ b/mons/assets/svg/arrow-next.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/mons/assets/svg/banner.jpg b/mons/assets/svg/banner.jpg new file mode 100644 index 00000000..37083d88 Binary files /dev/null and b/mons/assets/svg/banner.jpg differ diff --git a/mons/assets/svg/city.png b/mons/assets/svg/city.png new file mode 100644 index 00000000..02db84d4 Binary files /dev/null and b/mons/assets/svg/city.png differ diff --git a/mons/assets/svg/close.svg b/mons/assets/svg/close.svg new file mode 100644 index 00000000..281ccbcc --- /dev/null +++ b/mons/assets/svg/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mons/assets/svg/img-banner.png b/mons/assets/svg/img-banner.png new file mode 100644 index 00000000..2b439f2a Binary files /dev/null and b/mons/assets/svg/img-banner.png differ diff --git a/mons/assets/svg/logo-mons-site.svg b/mons/assets/svg/logo-mons-site.svg new file mode 100644 index 00000000..aea14276 --- /dev/null +++ b/mons/assets/svg/logo-mons-site.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/mons/assets/svg/logo-mons.svg b/mons/assets/svg/logo-mons.svg new file mode 100644 index 00000000..7486ea40 --- /dev/null +++ b/mons/assets/svg/logo-mons.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/mons/assets/svg/placeholder.jpg b/mons/assets/svg/placeholder.jpg new file mode 100644 index 00000000..5ab6066f Binary files /dev/null and b/mons/assets/svg/placeholder.jpg differ diff --git a/mons/assets/svg/svg-titre.svg b/mons/assets/svg/svg-titre.svg new file mode 100644 index 00000000..281ccbcc --- /dev/null +++ b/mons/assets/svg/svg-titre.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/mons/icons/android-chrome-144x144.png b/mons/icons/android-chrome-144x144.png new file mode 100644 index 00000000..d23b182c Binary files /dev/null and b/mons/icons/android-chrome-144x144.png differ diff --git a/mons/icons/android-chrome-192x192.png b/mons/icons/android-chrome-192x192.png new file mode 100644 index 00000000..2f31be36 Binary files /dev/null and b/mons/icons/android-chrome-192x192.png differ diff --git a/mons/icons/android-chrome-256x256.png b/mons/icons/android-chrome-256x256.png new file mode 100644 index 00000000..b1e58a46 Binary files /dev/null and b/mons/icons/android-chrome-256x256.png differ diff --git a/mons/icons/android-chrome-36x36.png b/mons/icons/android-chrome-36x36.png new file mode 100644 index 00000000..0c392f07 Binary files /dev/null and b/mons/icons/android-chrome-36x36.png differ diff --git a/mons/icons/android-chrome-384x384.png b/mons/icons/android-chrome-384x384.png new file mode 100644 index 00000000..3279a5e2 Binary files /dev/null and b/mons/icons/android-chrome-384x384.png differ diff --git a/mons/icons/android-chrome-48x48.png b/mons/icons/android-chrome-48x48.png new file mode 100644 index 00000000..094d25d9 Binary files /dev/null and b/mons/icons/android-chrome-48x48.png differ diff --git a/mons/icons/android-chrome-512x512.png b/mons/icons/android-chrome-512x512.png new file mode 100644 index 00000000..60f024b1 Binary files /dev/null and b/mons/icons/android-chrome-512x512.png differ diff --git a/mons/icons/android-chrome-72x72.png b/mons/icons/android-chrome-72x72.png new file mode 100644 index 00000000..5ce6255e Binary files /dev/null and b/mons/icons/android-chrome-72x72.png differ diff --git a/mons/icons/android-chrome-96x96.png b/mons/icons/android-chrome-96x96.png new file mode 100644 index 00000000..cd2d9668 Binary files /dev/null and b/mons/icons/android-chrome-96x96.png differ diff --git a/mons/icons/apple-touch-icon-1024x1024.png b/mons/icons/apple-touch-icon-1024x1024.png new file mode 100644 index 00000000..2b846d0d Binary files /dev/null and b/mons/icons/apple-touch-icon-1024x1024.png differ diff --git a/mons/icons/apple-touch-icon-114x114.png b/mons/icons/apple-touch-icon-114x114.png new file mode 100644 index 00000000..b852fbff Binary files /dev/null and b/mons/icons/apple-touch-icon-114x114.png differ diff --git a/mons/icons/apple-touch-icon-120x120.png b/mons/icons/apple-touch-icon-120x120.png new file mode 100644 index 00000000..cf92582b Binary files /dev/null and b/mons/icons/apple-touch-icon-120x120.png differ diff --git a/mons/icons/apple-touch-icon-144x144.png b/mons/icons/apple-touch-icon-144x144.png new file mode 100644 index 00000000..9f98ed0f Binary files /dev/null and b/mons/icons/apple-touch-icon-144x144.png differ diff --git a/mons/icons/apple-touch-icon-152x152.png b/mons/icons/apple-touch-icon-152x152.png new file mode 100644 index 00000000..2d9c197e Binary files /dev/null and b/mons/icons/apple-touch-icon-152x152.png differ diff --git a/mons/icons/apple-touch-icon-167x167.png b/mons/icons/apple-touch-icon-167x167.png new file mode 100644 index 00000000..1dffac51 Binary files /dev/null and b/mons/icons/apple-touch-icon-167x167.png differ diff --git a/mons/icons/apple-touch-icon-180x180.png b/mons/icons/apple-touch-icon-180x180.png new file mode 100644 index 00000000..ddea4c49 Binary files /dev/null and b/mons/icons/apple-touch-icon-180x180.png differ diff --git a/mons/icons/apple-touch-icon-57x57.png b/mons/icons/apple-touch-icon-57x57.png new file mode 100644 index 00000000..e13b0a7b Binary files /dev/null and b/mons/icons/apple-touch-icon-57x57.png differ diff --git a/mons/icons/apple-touch-icon-60x60.png b/mons/icons/apple-touch-icon-60x60.png new file mode 100644 index 00000000..d55a4c10 Binary files /dev/null and b/mons/icons/apple-touch-icon-60x60.png differ diff --git a/mons/icons/apple-touch-icon-72x72.png b/mons/icons/apple-touch-icon-72x72.png new file mode 100644 index 00000000..293bd8eb Binary files /dev/null and b/mons/icons/apple-touch-icon-72x72.png differ diff --git a/mons/icons/apple-touch-icon-76x76.png b/mons/icons/apple-touch-icon-76x76.png new file mode 100644 index 00000000..35410919 Binary files /dev/null and b/mons/icons/apple-touch-icon-76x76.png differ diff --git a/mons/icons/apple-touch-icon-precomposed.png b/mons/icons/apple-touch-icon-precomposed.png new file mode 100644 index 00000000..ddea4c49 Binary files /dev/null and b/mons/icons/apple-touch-icon-precomposed.png differ diff --git a/mons/icons/apple-touch-icon.png b/mons/icons/apple-touch-icon.png new file mode 100644 index 00000000..ddea4c49 Binary files /dev/null and b/mons/icons/apple-touch-icon.png differ diff --git a/mons/icons/favicon-16x16.png b/mons/icons/favicon-16x16.png new file mode 100644 index 00000000..f6a21905 Binary files /dev/null and b/mons/icons/favicon-16x16.png differ diff --git a/mons/icons/favicon-32x32.png b/mons/icons/favicon-32x32.png new file mode 100644 index 00000000..0ea96bda Binary files /dev/null and b/mons/icons/favicon-32x32.png differ diff --git a/mons/icons/favicon-48x48.png b/mons/icons/favicon-48x48.png new file mode 100644 index 00000000..094d25d9 Binary files /dev/null and b/mons/icons/favicon-48x48.png differ diff --git a/mons/icons/favicon.ico b/mons/icons/favicon.ico new file mode 100644 index 00000000..bf088451 Binary files /dev/null and b/mons/icons/favicon.ico differ diff --git a/mons/icons/logo.png b/mons/icons/logo.png new file mode 100644 index 00000000..258a083d Binary files /dev/null and b/mons/icons/logo.png differ diff --git a/mons/icons/manifest.webmanifest b/mons/icons/manifest.webmanifest new file mode 100644 index 00000000..ec5a3d08 --- /dev/null +++ b/mons/icons/manifest.webmanifest @@ -0,0 +1,65 @@ +{ + "dir": "auto", + "lang": "en-US", + "display": "standalone", + "orientation": "any", + "start_url": "/?homescreen=1", + "background_color": "#fff", + "theme_color": "#fff", + "icons": [ + { + "src": "android-chrome-36x36.png", + "sizes": "36x36", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-48x48.png", + "sizes": "48x48", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-72x72.png", + "sizes": "72x72", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-96x96.png", + "sizes": "96x96", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-144x144.png", + "sizes": "144x144", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-256x256.png", + "sizes": "256x256", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png", + "purpose": "any" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any" + } + ] +} \ No newline at end of file diff --git a/mons/index.html b/mons/index.html new file mode 100755 index 00000000..e4ae4234 --- /dev/null +++ b/mons/index.html @@ -0,0 +1,72 @@ + + + + Mons + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ + + diff --git a/mons/manifest.cfg b/mons/manifest.cfg new file mode 100755 index 00000000..2a16058f --- /dev/null +++ b/mons/manifest.cfg @@ -0,0 +1,21 @@ +[theme] +title = Template for mons +description = A Diazo based Plone theme +preview = preview.png +rules = /++theme++mons/rules.xml +prefix = /++theme++mons +doctype = + +enabled-bundles = +disabled-bundles = + +production-js = /++theme++mons/dist/js/theme.js +production-css = /++theme++mons/dist/css/theme.css +tinymce-content-css = /++theme++mons/dist/css/theme.css + + +#[theme:overrides] +#directory = template-overrides + +[theme:parameters] +# portal_url = python: portal.absolute_url() diff --git a/mons/package.json b/mons/package.json new file mode 100755 index 00000000..350a0fbb --- /dev/null +++ b/mons/package.json @@ -0,0 +1,36 @@ +{ + "name": "@imiobe/plonetheme-smartweb-mons", + "description": "iA.Smartweb base theme for Plone", + "private": false, + "publishConfig": { + "access": "public" + }, + "maintainers": [ + { + "name": "Thomas Lambert (iMio)", + "email": "thomas.lambert@imio.be", + "url": "https://imio.be" + } + ], + "homepage": "https://mons.preprod.imio.be", + "keywords": [ + "imio", + "plone", + "smartweb" + ], + "version": "0.0.1", + "license": "GPL version 2", + "scripts": { + "stylelint": "npx stylelint 'src/**/*.{css,less}' 'src/**/*.{css,less}", + "stylelint:fix": "npx stylelint 'src/**/*.{css,less}' --fix", + "prettier": "npx prettier --single-quote --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'", + "prettier:fix": "npx prettier --single-quote --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,sass}'", + "dry-release": "release-it --dry-run", + "release": "release-it" + }, + "devDependencies": { + "@plone/plonetheme-barceloneta-base": "3.0.0", + "@imiobe/plonetheme-smartweb-base": "0.1.0", + "@popperjs/core": "^2.11.6" + } +} diff --git a/mons/preview.png b/mons/preview.png new file mode 100644 index 00000000..aaffa432 Binary files /dev/null and b/mons/preview.png differ diff --git a/mons/rules.xml b/mons/rules.xml new file mode 100755 index 00000000..0d471ed6 --- /dev/null +++ b/mons/rules.xml @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + col-md-12 + col-md-6 + col-md-4 + col-md-3 + col-md-4 + + +
+ + + + + +

+ + + + +
    + +
  • + + +
    • +     +
+ + + + + + +

+ + + + + + + +
+ + + + + + + + + + + + diff --git a/mons/src/index.js b/mons/src/index.js new file mode 100644 index 00000000..52bbd124 --- /dev/null +++ b/mons/src/index.js @@ -0,0 +1,48 @@ +import "./scss/main.scss"; +$(document).ready(function () { + $("#portal-globalnav-collapse").on("show.bs.collapse", function () { + document.body.classList.add("open-nav-overflow"); + document.documentElement.classList.add("open-nav-overflow"); + }); + $("#portal-globalnav-collapse").on("hidden.bs.collapse", function () { + document.body.classList.remove("open-nav-overflow"); + document.documentElement.classList.remove("open-nav-overflow"); + }); + + // For custom slider + if ($(".sectionnews .swiper").length > 0) { + var newsSwiper = $(".sectionnews .swiper")[0].swiper; + newsSwiper.params.spaceBetween = 30; + (newsSwiper.params.speed = 1000), newsSwiper.update(); + } + if ($(".sectionevents .swiper").length > 0) { + var eventsSwiper = $(".sectionevents .swiper")[0].swiper; + eventsSwiper.params.spaceBetween = 30; + (eventsSwiper.params.speed = 1000), eventsSwiper.update(); + } + + + // For banner + + let checkBanner = document.querySelector("#portal-header #banner"); + let headerCustom = document.getElementById("portal-header"); + + if (checkBanner != null) { + headerCustom.classList.add("header-custom"); + } +}); + +document.addEventListener('scroll', function() { + const accountElement = document.querySelector('.btn-demarches'); + if (accountElement) { + if (window.scrollY > 80) { + accountElement.classList.add('visible'); + console.log('Element is visible'); + } else { + accountElement.classList.remove('visible'); + console.log('Element is not visible'); + } + } else { + console.log('Element .btn-demarches not found'); + } +}); diff --git a/mons/src/scss/contact.scss b/mons/src/scss/contact.scss new file mode 100644 index 00000000..43df50fe --- /dev/null +++ b/mons/src/scss/contact.scss @@ -0,0 +1,11 @@ +#portal-column-content .sectioncontact { + .contact-type-organization { + background: #fff; + } + + h2, + h3, + h4 { + font-family: $font-family-base; + } +} diff --git a/mons/src/scss/home/a-la-une.scss b/mons/src/scss/home/a-la-une.scss new file mode 100644 index 00000000..427f1d00 --- /dev/null +++ b/mons/src/scss/home/a-la-une.scss @@ -0,0 +1,217 @@ +.a-la-une { + //background: url(../../assets/svg/bg-a-la-une.svg) center top no-repeat $primary; + background-size: 100%; + padding-top: 0; + padding-bottom: 0; + margin: 0; + max-width: 100vw; + width: 100vw; + left: 50%; + transform: translateX(-50%); + position: relative; + + .container { + position: relative; + z-index: 1; + } + + @media screen and (max-width: 992px) { + padding-top: 3.5rem; + padding-bottom: 3.5rem; + margin: 3rem 0 0; + } + + &::before { + display: none; + } + + .swiper-wrapper { + padding-bottom: 0; + } + + @media screen and (max-width: 992px) { + .swiper-wrapper { + padding-bottom: 80px; + } + } + + .swiper-pagination { + display: none; + } + + .section-title { + font-weight: 350; + font-size: 45px; + position: absolute; + z-index: 0; + margin-top: 10px; + left: calc(60% + 60px); + color: $primary-red; + display: none; + } + + .swiper_date { + display: none; + } + + .swiper-slide { + .swiper-image { + border-radius: 20px; + } + + .swiper_title { + background: transparent; + } + + .swiper_title h3 { + margin-bottom: 20px; + padding-left: 45px; + padding-top: 90px; + font-weight: 500 !important; + text-align: left; + position: relative; + + &::before { + color: $primary-red; + font-weight: 500; + bottom: auto; + content: "À la une"; + left: 15px; + padding: 15px 30px; + position: absolute; + top: 0; + width: auto; + z-index: 2; + font-size: 45px; + } + + &::after { + background: #fff; + color: #000; + border: solid 1px #cbcbcb; + font-weight: 400; + border-radius: 8px; + bottom: -80px; + content: "Lire plus"; + left: 40px; + padding: 15px 30px; + position: absolute; + top: auto; + width: auto; + z-index: 2; + font-size: 16px; + transition: all 0.5s ease; + } + + &:hover { + &::after { + background: #000; + color: #fff; + border: solid 1px #000; + transition: all 0.5s ease; + } + } + } + + a { + display: grid; + grid-template-columns: 60% 40%; + grid-template-rows: auto 1fr; + } + + @media screen and (max-width: 992px) { + .swiper_title h3 { + padding: 0 1rem; + } + + a { + grid-template-columns: 100% !important; + grid-template-rows: 1fr !important; + } + } + + .swiper_description { + font-size: 16px; + + p { + color: #fff; + } + } + } + + .swiper-button-next, + .swiper-button-prev { + top: 50% !important; + box-shadow: rgb(99 99 99 / 20%) 0 2px 8px 0; + } + + .swiper-button-prev { + background-image: url('data:image/svg+xml;utf8,'); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + background-color: $primary-red; + left: 50%; + margin-left: 0; + margin-bottom: 30px; + top: auto !important; + bottom: 0; + } + + .swiper-button-next { + background-image: url('data:image/svg+xml;utf8,'); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + background-color: $primary-red; + left: 50%; + margin-left: 50px; + margin-bottom: 30px; + top: auto !important; + bottom: 0; + } + + @media screen and (max-width: 992px) { + .swiper-button-prev { + background-image: url('data:image/svg+xml;utf8,'); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + left: 0; + margin-left: 20px; + top: auto !important; + bottom: 0; + } + + .swiper-button-next { + background-image: url('data:image/svg+xml;utf8,'); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + left: 0; + margin-left: 80px; + top: auto !important; + bottom: 0; + } + } + + @media screen and (max-width: 767px) { + .swiper-button-prev { + display: block; + } + + .swiper-button-next { + display: block; + } + } + + @media screen and (max-width: 575px) { + .swiper-slide .swiper-image { + border-radius: 20px; + } + } + + .see_all { + display: none; + } +} diff --git a/mons/src/scss/home/actualites.scss b/mons/src/scss/home/actualites.scss new file mode 100644 index 00000000..157ee70b --- /dev/null +++ b/mons/src/scss/home/actualites.scss @@ -0,0 +1,181 @@ +.bloc-actu { + margin: 80px 0; + padding: 0 auto; + + @media screen and (max-width: 992px) { + margin: 3.6rem 0; + } + + .section-container { + position: relative; + } + + .container { + padding: 0 40px; + } + + .section-title { + font-weight: 350; + margin: 0 auto 40px; + width: max-content; + font-size: 45px; + } + + .swiper-wrapper { + .swiper-slide { + background: transparent; + border-radius: 20px; + transition: 0.5s; + + &:hover, + &:focus { + transition: 0.5s; + background: $primary-red; + border-radius: 40px; + } + + & > a { + align-items: center; + padding-bottom: 0; + transition: 0.5s; + + .swiper-image { + transition: 0.5s; + padding-bottom: 450px; + border-radius: 20px; + + &::before { + top: 0; + bottom: 0; + left: 0; + background: linear-gradient(to top, #0a0a0a, transparent); + content: ""; + display: block; + height: 100%; + position: absolute; + width: 100%; + margin-left: 0; + z-index: 0; + opacity: 100%; + border-radius: 20px; + transition: 0.5s; + } + + &::after { + top: 0; + bottom: 0; + left: 0; + background: $primary-red; + content: ""; + display: block; + height: 100%; + position: absolute; + width: 100%; + margin-left: 0; + z-index: 0; + opacity: 0%; + border-radius: 20px; + transition: 0.5s; + } + } + + .auth_source_container_title { + color: #fff; + font-size: 16px; + margin: 0; + padding: 10px 20px; + text-align: left; + position: absolute; + top: 0; + background: $primary-red; + border-radius: 20px 0; + max-width: 230px; + } + + .swiper_category { + position: absolute; + top: 0; + right: 0; + } + + .swiper_date { + font-family: $font-family-base; + width: 100%; + display: none; + } + + .swiper_title { + width: 100%; + z-index: 1; + margin: 0 0 15px; + position: absolute; + bottom: 0; + text-align: left; + + h3 { + font-family: $font-family-base; + transition: 0.5s; + color: #fff; + text-align: left; + } + } + + .swiper_description { + p { + margin: 0; + } + } + + &:hover { + transition: 0.5s; + + .swiper_title { + transition: 0.5s; + + h3 { + transition: 0.5s; + } + } + + .swiper-image { + &::after { + background: $primary-red; + opacity: 80%; + transition: 0.5s; + } + } + } + } + } + } + + .swiper-button-prev { + display: none; + } + + .swiper-button-next { + display: none; + } + + .swiper-pagination-bullet-active { + background: $primary-red !important; + } +} + +.sectionnews .see_all { + justify-content: right; + + a { + background: #fff; + color: #000; + border: solid 1px #cbcbcb; + font-weight: 400; + border-radius: 8px; + + &:hover { + background: #000; + border: solid 1px #000; + color: #fff; + } + } +} diff --git a/mons/src/scss/home/banner.scss b/mons/src/scss/home/banner.scss new file mode 100644 index 00000000..8ff765a2 --- /dev/null +++ b/mons/src/scss/home/banner.scss @@ -0,0 +1,201 @@ +.section-home-page { + #portal-header { + margin: 0 !important; + } + + #portal-header #portal-header-top #portal-logo { + margin: -10px 0 0; + content: url("../../assets/svg/logo-mons.svg") !important; + } + + #portal-header #portal-header-top { + border-bottom: 1px solid #fff; + + &::after { + content: ""; + background: transparent; + } + } + + #portal-globalnav > li > a { + color: #fff; + } + + #portal-globalnav.activated > li > a { + color: #fff !important; + } + + #portal-globalnav > li.has_subtree > a::after { + background-image: url("data:image/svg+xml;utf8,"); + } + + .smartweb_herobanner { + border-radius: 0; + overflow: hidden; + width: 100vw; + margin-top: -90px !important; + margin-bottom: 0; + } + + .smartweb_herobanner .bannerSwiper { + height: 50vw; + max-height: 700px; + min-height: 500px; + //margin-bottom: 80px; + + .swiper-slide::after { + top: 0; + bottom: 0; + left: 0; + background: linear-gradient(to bottom, #0a0a0a, transparent); + content: ""; + display: block; + height: 100%; + position: absolute; + width: 100vw; + margin-left: 0; + z-index: 0; + opacity: 95%; + } + + .swiper-slide .swiper-banner-content-wrapper { + position: absolute; + top: 40%; + transform: none; + bottom: auto; + max-width: 100%; + width: 100%; + left: 100px; + z-index: 1; + } + } +} + +.section-slide .swiper-banner-content { + background: none !important; +} + +.bannerSwiper .section-slide { + .swiper-banner-content { + position: relative; + left: -13px; + max-width: 750px !important; + width: 100% !important; + border-radius: 0 80px 0 0; + font-family: $font-family-title; + height: auto; + display: grid; + align-items: center; + padding: 40px 60px !important; + + .swiper-banner-title { + font-weight: 600; + + @media screen and (max-width: 800px) { + font-size: 28px !important; + } + } + + .swiper-banner-description { + position: relative; + width: 100% !important; + margin: auto; + color: #fff !important; + padding-bottom: 30px; + line-height: 50px; + + @media screen and (max-width: 800px) { + p { + margin: 0; + color: #fff !important; + font-size: 16px !important; + } + } + } + + @media screen and (max-width: 600px) { + display: none; + } + } + + .swiper-banner-title { + line-height: 40px; + } +} + +.bloc-int-banner { + .cont-bloc { + background: red; + display: block; + position: fixed; + top: 100px; + right: 40px; + transition: all 0.3s ease; + z-index: 1; + + &:hover { + right: 50px; + transition: all 0.3s ease; + } + + .btn-demarches { + background: $primary-red; + color: #fff; + text-decoration: none; + position: absolute; + display: block; + width: 60px; + font-weight: 400; + font-size: 18px; + height: 180px; + padding-left: 20px; + line-height: 40px; + border-radius: 0 20px 20px 0; + text-align: center; + transform: rotate(180deg); + writing-mode: vertical-rl; + opacity: 0%; // Opacité initiale à 0% + transition: all 0.3s ease; + + &:hover { + background: $primary; + color: #fff; + transition: all 0.3s ease; + } + } + + .btn-demarches.visible { + opacity: 100%; // Opacité à 100% lorsque la classe 'visible' est ajoutée + } + } +} + +.btn-feder { + content: ""; + width: 350px; + height: 130px; + display: block; + background: url("../../assets/svg/img-banner.png"); + background-size: cover; + background-position: center; + background-color: #fff; + position: absolute; + margin-top: -130px; + right: 0; + border-radius: 20px 0 0; + + @media screen and (max-width: 600px) { + width: 100%; + height: 130px; + display: block; + background: url("../../assets/svg/img-banner.png"); + background-size: contain; + background-position: center; + background-color: #fff; + background-repeat: no-repeat; + position: absolute; + margin-top: -130px; + right: 0; + border-radius: 0; + } +} diff --git a/mons/src/scss/home/cpas.scss b/mons/src/scss/home/cpas.scss new file mode 100644 index 00000000..e69de29b diff --git a/mons/src/scss/home/espace-citoyen.scss b/mons/src/scss/home/espace-citoyen.scss new file mode 100644 index 00000000..1a7ccc3e --- /dev/null +++ b/mons/src/scss/home/espace-citoyen.scss @@ -0,0 +1,69 @@ +.espace-citoyen { + background: #fff; + padding-top: 4vw; + padding-bottom: 4vw; + border-radius: 30px; + margin-bottom: 4vw; + margin-top: 4vw; + + .section-title { + text-align: center; + position: relative; + margin-bottom: 2rem; + } + + .body-section { + .row { + max-width: 80%; + margin: 0 auto; + box-shadow: 0 20px 40px rgba(0, 0, 0, 16%); + border-radius: 15px; + + li { + padding: 0 !important; + } + + .table_display { + height: 100%; + } + + .table_image { + padding: 1.5rem 1rem; + background: #fff; + border-radius: 15px; + display: flex; + gap: 20px; + align-items: center; + justify-content: center; + text-decoration: none; + height: 100%; + + .image { + width: auto; + + svg { + height: auto; + width: 40px; + max-height: 40px; + } + } + + &:hover { + background: $primary; + + .image { + svg { + fill: #fff; + } + } + + .table_title { + span { + color: #fff; + } + } + } + } + } + } +} diff --git a/mons/src/scss/home/events.scss b/mons/src/scss/home/events.scss new file mode 100644 index 00000000..4a9849a6 --- /dev/null +++ b/mons/src/scss/home/events.scss @@ -0,0 +1,186 @@ +.sectionevents { + margin: 130px 0 0; + max-width: 100vw; + width: 100vw; + left: 50%; + transform: translateX(-50%); + padding-top: 80px; + padding-bottom: 80px; + + &::after { + background: $primary-red; + border-radius: 0 20px 20px 0; + bottom: 0; + content: ""; + left: 0%; + position: absolute; + top: 0; + width: 97%; + z-index: -2; + + @media screen and (max-width: 1500px) { + border-radius: 0; + width: 100%; + } + } + + &::before { + top: -201px; + left: 0; + background: url("../../assets/svg/city.png"); + background-position: bottom; + background-repeat: no-repeat; + content: ""; + display: block; + height: 201px; + position: absolute; + width: 100%; + max-width: 982px; + margin-left: 0; + z-index: 0; + } + + .section-container { + position: relative; + + .swiper-pagination-bullet-active { + background: #fff !important; + } + } + + .section-title { + font-weight: 350; + margin: 0 0 40px; + width: max-content; + font-size: 45px; + } + + .swiper-wrapper { + .swiper-slide { + background: transparent; + border-radius: 20px; + transition: 0.5s; + + &:hover, + &:focus { + transition: 0.5s; + background: #cd2f29; + border-radius: 20px; + } + + & > a { + padding-bottom: 30px; + + .swiper-image { + transition: 0.5s; + opacity: 100%; + } + + .swiper_category { + position: absolute; + top: 0; + right: 0; + + span { + display: inline-block; + background: $primary-svg; + border-radius: 0 0 0 10px; + text-transform: none; + } + } + + .auth_source_container_title { + color: $primary-red; + font-size: 16px; + margin: 0; + padding: 10px 20px; + text-align: left; + position: absolute; + top: 0; + background: #fff; + border-radius: 20px 0; + max-width: 230px; + } + + .swiper_date { + font-family: $font-family-base; + transition: 0.5s; + font-size: 16px; + font-weight: 300; + + .end_date .to { + margin: 0 0.25em; + } + + div { + margin: 0 auto; + } + } + + .swiper_title { + width: 100%; + + h3 { + font-family: $font-family-base; + transition: 0.5s; + font-weight: 500 !important; + } + } + + .swiper_description { + width: 100%; + + p { + margin: 0; + } + } + + &:hover { + .swiper_date { + transition: 0.5s; + } + + .swiper_title { + h3 { + transition: 0.5s; + } + } + + .swiper-image { + opacity: 30%; + } + } + } + } + } + + .swiper-button-prev { + display: none; + } + + .swiper-button-next { + display: none; + } + + .section-container .swiper-pagination-bullet-active { + background: #fff !important; + } +} + +.sectionevents .see_all { + justify-content: right; + + a { + background: $primary-red; + color: #fff; + border: solid 1px #cbcbcb; + font-weight: 400; + border-radius: 8px; + + &:hover { + background: #000; + border: solid 1px #000; + color: #fff; + } + } +} diff --git a/mons/src/scss/home/footer.scss b/mons/src/scss/home/footer.scss new file mode 100644 index 00000000..752249ed --- /dev/null +++ b/mons/src/scss/home/footer.scss @@ -0,0 +1,438 @@ +#smartweb-footer .sectiontext figure, +#smartweb-minisite-footer .sectiontext figure { + max-width: 65% !important; +} + +#smartweb-footer .sectiontext figure img, +#smartweb-minisite-footer .sectiontext figure img { + max-width: 200px !important; + width: 100% !important; +} + +#portal-footer-wrapper { + .row { + li { + flex-direction: row; + list-style-type: none; + padding-left: 0; + } + } + + text-align: left !important; + + @media screen and (max-width: 992px) { + margin-top: 0; + } + + #portal-footer { + background: $primary !important; + + #smartweb-footer, + #smartweb-minisite-footer { + a, + span, + p, + div, + h2 { + color: #fff; + text-decoration: none; + } + + h2 { + font-size: 22px !important; + font-weight: 500; + margin-top: 0; + + &.section-title { + margin-bottom: 0.5rem; + margin-top: 0; + } + } + + .sectiontext { + figure { + img { + max-width: 100%; + } + } + } + } + } +} + +#portal-footer-wrapper #portal-footer h2.section-title { + margin-bottom: 0.5rem; +} + +.smartweb-footer .body-section figure img { + border-radius: 0 !important; +} + +#portal-footer-wrapper + #portal-footer + .sectionlinks + .container + .nb-items-batch-1 + .body-section { + .row { + li { + .table_display { + .table_image { + .image { + position: absolute; + + svg { + fill: #fff; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary-red !important; + transition: all 0.5s ease; + } + } + } + } + } + } + } +} + +#portal-colophon { + background: linear-gradient( + -90deg, + rgba(0, 0, 0, 100%) 0%, + rgba(86, 86, 86, 100%) 100% + ); + padding: 1rem; + + ul { + display: flex; + flex-wrap: wrap; + margin-bottom: 0; + + /*&:nth-last-child(n+1){ + display: block; + }*/ + li { + color: #fff; + + a, + span, + p, + div { + color: #fff; + } + } + } +} + +#portal-footer-wrapper { + //background: url(../../assets/svg/bg-a-la-une.svg) center top no-repeat $primary; + padding: 7rem 0 4rem !important; + padding-top: 100px; + background: $primary; + background-size: 100%; +} + +.section-home-page #portal-footer-wrapper { + //background: url(../../assets/svg/bg-footer.svg) center top no-repeat $primary; + background-size: 100%; + padding: 7rem 0 4rem !important; + padding-top: 100px; +} + +#portal-footer-wrapper { + li { + padding-left: calc(var(--bs-gutter-x) * 0.5); + } +} + +@media screen and (max-width: 992px) { + #portal-footer-wrapper { + padding: 4rem 1rem 1rem !important; + } +} + +footer { + .schedule .opening_informations::after { + content: ""; + width: 9px; + height: 6px; + background-image: url('data:image/svg+xml;utf8,'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + margin-left: 0.4rem; + display: inline-block; + vertical-align: middle; + } + + .sectiontext ul li::before { + display: none !important; + } +} + +#portal-footer-wrapper + #portal-footer + #smartweb-minisite-footer + .sectionlinks + .container + .nb-items-batch-1 + .body-section { + .row { + li { + &:nth-child(1) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + + &:nth-child(2) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + + &:nth-child(3) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + + &:nth-child(4) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + + &:nth-child(5) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + + &:nth-child(6) { + .table_display { + .table_image { + .image { + width: 30px; + position: absolute; + + svg { + fill: #fff !important; + } + } + + .table_title { + padding-left: 30px !important; + font-size: 1rem !important; + + span { + transition: all 0.5s ease; + } + + &:hover { + span { + color: $primary !important; + transition: all 0.5s ease; + } + } + } + } + } + } + } + } +} + +#portal-footer-wrapper li.facebook, +#portal-footer-wrapper li.twitter { + display: block !important; +} + +.rs-footer { + max-width: 400px; + left: auto; + padding: 0; + width: 100%; + display: block; + height: 200px; + + .row { + li { + width: 15% !important; + + .table_display { + .table_image { + .image { + margin: 0 auto; + background: #fff; + position: absolute; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + transition: all 0.5s ease; + + svg { + width: 100%; + fill: $primary !important; + transition: all 0.5s ease; + padding: 0 !important; + margin: 0; + } + + &:hover { + background: $primary-red; + + svg { + fill: #fff !important; + } + } + } + + .table_title { + display: none; + } + } + } + } + } +} diff --git a/mons/src/scss/home/intro.scss b/mons/src/scss/home/intro.scss new file mode 100644 index 00000000..e299f6ae --- /dev/null +++ b/mons/src/scss/home/intro.scss @@ -0,0 +1,71 @@ +.liens-accueil { + padding: 0; + padding-bottom: 0; + + &::before { + background: linear-gradient(to top, #000 75px, #fff 75px); + bottom: 0; + content: ""; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); + width: 100vw; + z-index: -1; + } + + ul { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + padding: 0 40px; + + /* align-items: center; */ + position: relative; + + li { + width: 100%; + padding: 0 !important; + text-align: center; + + .table_display { + background: $primary-svg; + width: 100%; + padding: 25px; + border-radius: 10px; + transition: all 0.3s ease; + + .table_image { + color: #fff; + text-decoration: none; + font-size: 18px; + + .d-block { + text-align: center; + height: 40px; + + svg { + fill: #fff; + height: auto; + width: 30px; + } + } + } + + &:hover { + background: $primary; + transition: all 0.3s ease; + } + } + } + + @media screen and (max-width: 1200px) { + grid-template-columns: 1fr 1fr; + } + + @media screen and (max-width: 600px) { + grid-template-columns: 1fr; + grid-gap: 10px; + } + } +} diff --git a/mons/src/scss/home/quick.scss b/mons/src/scss/home/quick.scss new file mode 100644 index 00000000..5ed432b0 --- /dev/null +++ b/mons/src/scss/home/quick.scss @@ -0,0 +1,352 @@ +#main-container .quick-access { + margin: 2rem 0 4rem; + padding: 0; + + @include media-breakpoint-down(lg) { + margin: 0; + } +} + +.quick-access { + .body-section { + ul { + max-width: 1200px !important; + + li { + .table_image { + .image.d-block { + background: none !important; + width: 108px; + height: 108px; + transition: all 0.3s ease; + position: relative; + } + + &:hover, + &:focus { + .image.d-block { + transform: translateY(-10px); + transition: all 0.3s ease; + } + } + + .table_title { + margin: 20px 0 0; + + span { + line-height: 1; + } + } + } + } + } + } + + @media screen and (max-width: 992px) { + .body-section { + ul { + li { + .table_image { + .image.d-block { + width: 70px; + height: 70px; + } + } + + a .table_title span { + font-size: 14px; + } + } + } + } + } + + .row { + @include media-breakpoint-down(lg) { + grid-gap: 20px; + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); + + li { + width: auto !important; + } + } + } + + .section-title { + font-weight: 200; + + //font-family:$font-family-roboto; + text-transform: uppercase; + color: $primary !important; + margin: 0 0 2rem; + } +} + +.sectionlinks.quick-access .body-section li a { + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 10px; +} + +.sectionlinks.quick-access .body-section ul { + max-width: 900px; + margin-left: auto; + margin-right: auto; +} + +.quick-annuaire { + display: none !important; + padding: 80px 0; + background-size: contain !important; + + .section-title { + font-weight: 800; + text-align: center; + text-transform: uppercase; + position: relative; + margin: 0 auto 4.5rem; + width: max-content; + font-size: 3rem; + z-index: 0; + + &::after { + left: 0%; + top: 70px; + bottom: 0; + content: ""; + display: block; + height: 13px; + position: absolute; + width: 113px; + } + } + + .body-section { + width: 40%; + position: relative; + margin: 0 auto; + left: -10%; + + .row { + grid-gap: 25px; + + li { + width: 25%; + + .table_image { + text-decoration: none; + + .image.d-block { + background: $primary-svg; + transition: all 0.5s ease; + position: relative; + + display: flex; + width: 100px; + height: 100px; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + border-radius: 50%; + box-shadow: none; + + svg { + width: 30px; + height: auto; + fill: #fff; + } + } + + &:hover, + &:focus { + .image.d-block { + transform: translateY(-10px); + transition: all 0.5s ease; + } + } + } + + &:nth-child(4) { + margin-left: 12%; + } + + a .table_title { + margin: 1rem 0 0; + text-align: center; + text-decoration: none; + + span { + font-size: 14px; + color: #000; + text-transform: uppercase; + font-weight: 700; + font-family: "Open Sans", sans-serif; + } + } + } + } + } + + @media screen and (max-width: 992px) { + .body-section { + width: 100%; + left: 0%; + + .row { + grid-gap: 25px; + + li { + width: 33%; + + .table_image { + text-decoration: none; + + .image.d-block { + width: 80px; + height: 80px; + + svg { + width: 30px; + } + } + } + + &:nth-child(4) { + margin-left: 0%; + } + + a .table_title { + margin: 1rem 0 0; + text-align: center; + text-decoration: none; + + span { + font-size: 14px; + color: #000; + text-transform: uppercase; + font-weight: 700; + font-family: "Open Sans", sans-serif; + } + } + } + } + } + } + + .row { + @include media-breakpoint-down(lg) { + grid-gap: 20px; + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); + + li { + width: auto !important; + } + } + } +} + +.quick-partenaires { + display: none !important; + padding-top: 0; + + .section-title { + text-align: center; + font-weight: 800; + text-transform: uppercase; + position: relative; + margin: 0 auto 4.5rem; + width: max-content; + font-size: 3rem; + + &::after { + left: 0%; + top: 70px; + bottom: 0; + content: ""; + display: block; + height: 13px; + position: absolute; + width: 113px; + } + } + + .body-section { + text-align: center; + + li { + padding: 20px 10px 0; + + .table_image { + text-decoration: none; + position: relative; + padding-bottom: 50px; + + .image.d-block { + display: none !important; + } + } + + .table_title { + span { + line-height: 1; + } + } + + .table_title span { + font-size: 20px; + color: #000; + text-transform: uppercase; + font-weight: 700; + font-family: "Open Sans", sans-serif; + padding-bottom: 60px; + display: block; + transition: all 0.5s ease; + min-height: 100px; + + &:hover { + transition: all 0.5s ease; + } + + @media screen and (max-width: 992px) { + .table_title span { + font-size: 16px; + } + } + + a .table_title { + margin: 1rem 0 0; + text-align: center; + text-decoration: none; + position: relative; + + span { + font-size: 16px; + color: #000; + text-transform: uppercase; + font-weight: 700; + font-family: "Open Sans", sans-serif; + } + } + } + } + } + + .row { + @include media-breakpoint-down(lg) { + grid-gap: 20px; + display: grid; + grid-auto-rows: 1fr; + grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); + + li { + width: auto !important; + } + } + } +} diff --git a/mons/src/scss/info-trav.scss b/mons/src/scss/info-trav.scss new file mode 100644 index 00000000..55cceaca --- /dev/null +++ b/mons/src/scss/info-trav.scss @@ -0,0 +1,96 @@ +.template-facetednavigation_view.faceted-map { + background-color: #f8f8f8; + + input, + fieldset { + background-color: #fff !important; + } + + .eea-preview-items { + .faceted-map-item { + box-shadow: none !important; + + & > a { + display: block; + background-color: $primary-light; + border-radius: 10px; + padding: 1rem; + + .items-content { + flex-direction: row-reverse; + gap: 20px; + + @media screen and (max-width: 450px) { + flex-direction: column !important; + } + + @media screen and (min-width: 992px) { + &::before { + content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='20' style='fill:%2327606a'/%3E%3Cpath d='M20 19.62a1.92 1.92 0 1 1 .001-3.841A1.92 1.92 0 0 1 20 19.62m0-7.29c-2.97 0-5.37 2.4-5.37 5.37 0 4.03 5.37 9.97 5.37 9.97s5.37-5.94 5.37-9.97c0-2.97-2.4-5.37-5.37-5.37Z' style='fill:%23fff'/%3E%3C/svg%3E"); + display: block; + order: 1; + flex: 100%; + max-width: 40px; + } + } + + .geo-item-text { + padding: 0; + + .geo-item-title { + color: $primary; + } + + .geo-item-description { + color: $primary; + } + } + } + + &:hover { + background-color: $primary-svg; + + .items-content { + .geo-item-text { + .geo-item-title { + color: #000; + } + + .geo-item-description { + color: #000; + } + } + } + } + } + } + } +} + +// filters +#top---default---widgets { + #search_widget { + #search_button { + font-size: 0; + border-left: 0; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + border-color: transparent; + position: absolute; + right: 13px; + width: auto; + } + } +} + +@media screen and (max-width: 992px) { + #portal-header #portal-header-top #header-links #search-link a { + padding-left: 10px; + } +} + +.template-facetednavigation_view .faceted-top-widgets .faceted_select, +.template-facetednavigation_view .faceted-top-widgets input { + border-radius: 5px; +} diff --git a/mons/src/scss/main.scss b/mons/src/scss/main.scss new file mode 100644 index 00000000..8b52bdf9 --- /dev/null +++ b/mons/src/scss/main.scss @@ -0,0 +1,902 @@ +//// VARIABLES + +// ... add your variables here + +$enable-roboto-webfont: false; + +//// IMPORTS + +// Import barceloneta files from node_modules --load-path=node_modules + +// @import "@plone/plonetheme-barceloneta-base/scss/barceloneta"; + +// @import "@imiobe/plonetheme-smartweb-base/src/scss/main"; + +@import "./variables"; +@import "../../../base/src/scss/main"; + +//// STYLES + +// ... add your styles here +@import "./home/banner"; +@import "./home/intro"; +@import "./home/quick"; +@import "./home/a-la-une"; +@import "./home/espace-citoyen"; +@import "./home/actualites"; +@import "./home/events"; +@import "./home/footer"; +@import "./info-trav"; +@import "./se-link"; +@import "./se-files"; +@import "./contact"; + +body { + background: #fff; +} + +#portal-header #portal-header-top #portal-logo { + margin: -10px 0 0; +} + +//search +#portal-header #portal-header-top #header-links #search-link a { + width: 40px; + height: 40px; + background: $primary; + border: solid 2px $primary; + transition: all 0.3s ease; +} + +@media screen and (max-width: 992px) { + #portal-header #portal-header-top #header-links #search-link a { + padding-left: 0 !important; + } +} + +#portal-header #portal-header-top #header-links #search-link a:hover { + background: $primary-red; + border: solid 2px $primary-red; +} + +#portal-header #portal-header-top #portal-logo { + svg { + width: 160px; + } +} + +.section-home-page + #portal-header + #portal-header-top + #header-links + #search-link + a { + width: 40px; + height: 40px; + background: transparent; + border: solid 2px #fff; + transition: all 0.3s ease; +} + +@media screen and (max-width: 992px) { + .section-home-page + #portal-header + #portal-header-top + #header-links + #search-link + a { + padding-left: 0 !important; + } +} + +.section-home-page + #portal-header + #portal-header-top + #header-links + #search-link + a:hover { + background: $primary; + border: solid 2px $primary; +} + +.section-home-page #portal-header #portal-header-top #portal-logo { + svg { + width: 160px; + } +} + +.header-custom #banner::after { + display: none !important; +} + +h1 { + font-family: $font-family-base !important; + font-weight: 500 !important; +} + +h2 { + font-weight: 500 !important; + font-size: 24px; +} + +#header-actions .account { + text-decoration: none; + font-weight: 500; + position: relative; + + span { + transition: all 0.3s ease; + color: #fff !important; + background: $primary-red !important; + padding: 7px 20px; + font-weight: 400; + border-radius: 50px; + } + + &:hover { + span { + transition: all 0.3s ease; + background: $primary !important; + } + + &::before { + opacity: 100%; + } + } +} + +.smartweb_herobanner { + border-radius: 0; + overflow: hidden; + width: 100vw; +} + +.smartweb_herobanner + .bannerSwiper + .swiper-slide + .swiper-banner-content-wrapper { + position: absolute; + top: auto; + transform: none; + bottom: 0 !important; + max-width: 100%; + width: 100%; +} + +.r-item-img.r-item-img-placeholder { + background: url("../../assets/svg/placeholder.jpg"); + background-size: cover; + background-position: center; +} + +//footer +footer { + #container-section-noussuivre { + .table_title { + display: none; + } + + ul.row { + flex-flow: row wrap; + + li { + width: auto; + } + } + } +} + +.sectiontext .section-text .body-section figure figcaption { + display: block; +} + +.portaltype-imio-smartweb-directoryview, +.portaltype-imio-smartweb-newsview, +.portaltype-imio-smartweb-eventsview { + #content > header { + display: none; + } +} + +// bug z-index + +.pagination { + .page-item.active { + z-index: 0; + } +} + +footer #container-section-noussuivre { + li { + svg { + path { + fill: #fff; + } + } + + &:nth-child(1), + &:nth-child(3) { + svg path:nth-child(2) { + fill: #3f3f3f !important; + } + } + } +} + +@media screen and (max-width: 900px) { + .portaltype-imio-smartweb-portalpage .section-title { + font-size: 40px !important; + margin-bottom: 20px; + } + + .portaltype-imio-smartweb-portalpage .section-title::after { + top: 45px; + } +} + +#portal-breadcrumbs { + background: transparent !important; + + .container, + .breadcrumb { + padding-left: 0; + } +} + +#portal-globalnav > li a:hover { + color: $primary-svg; +} + +.portaltype-imio-smartweb-portalpage { + //background: url(../../assets/svg/bg-villers.svg) center 280px no-repeat; + background-size: cover; +} + +// footer +.footer-logo { + figure img { + width: 100% !important; + } +} + +.footer-slogan { + .text { + max-width: 204px; + text-align: center; + + p { + font-size: 33px; + font-weight: 200; + } + } +} + +.footer-fb { + .table_image { + display: flex; + align-items: center; + justify-content: center; + flex-direction: row-reverse; + gap: 10px; + text-decoration: none; + + .image { + width: auto; + + svg { + height: 25px; + fill: #fff; + } + } + } +} + +#portal-footer-wrapper { + .smartweb_footer { + .text { + h4 { + color: #fff; + } + } + } +} + +.r-add-contact a, +.r-add-event a, +.r-add-news a { + background: $primary-red; + border-radius: 8px; + color: #fff; + padding: 1rem; + text-decoration: none; + transition: all 0.5s ease; + + &:hover { + background: #000; + transition: all 0.5s ease; + } +} + +.r-filter div[class*="control"] { + border-radius: 5px; +} + +.procedure a::after { + content: "\F135"; + font-family: Bootstrap-icons; + margin-left: 0.5rem; + position: relative; + top: 3px; +} + +// sub-nav + +.subsite-container { + background: linear-gradient(90deg, #fff 0, #fff 100px, #ededed); + border-radius: 10px; + + #subsite-logo { + font-size: 18px; + background: $primary-svg; + border-radius: 10px; + } +} + +.sectiontext .section-text .section-title a { + text-decoration: none; +} + +.sectiontext .section-text .section-title a.collapsed { + color: #000 !important; +} + +/*.sectiontext .section-text .body-section a { + color: #fff!important; + }*/ +.sectiontext figure img { + border-radius: 15px; +} + +/*#viewlet-above-content-body { + .procedure{ + display: none; + } + }*/ + +// header common + +.breadcrumb-item { + a { + text-decoration: none; + } +} + +.breadcrumb { + font-size: 13px; +} + +#portal-breadcrumbs { + margin: 0 !important; + position: relative; + + //z-index: -1; + .breadcrumb { + margin: 0 !important; + background-color: #fff !important; + padding: 12px 0 !important; + + .breadcrumb-item { + a { + color: #2f294e !important; + + &:hover { + color: #2f294e !important; + } + } + + &.active { + color: #2f294e !important ; + } + + &::before { + color: #2f294e !important; + } + } + } +} + +.header-custom { + #banner { + z-index: -1; + + &::after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + 0deg, + rgba(0, 0, 0, 0%) 0%, + rgba(0, 0, 0, 50%) 100% + ); + } + } + + #portal-breadcrumbs { + margin: 0 !important; + position: absolute; + z-index: 1; + + .breadcrumb { + margin: 0 !important; + background-color: #fff !important; + padding: 15px 30px !important; + + .breadcrumb-item { + a { + color: #000 !important; + + &:hover { + color: #2f294e !important; + } + } + + &.active { + color: $primary-red !important ; + } + + &::before { + color: #000 !important; + } + } + } + } +} + +.block-menu-element a .card-title.h2, +.block-menu-element a h2.card-title { + font-size: 1rem; +} + +.template-facetednavigation_view.faceted-map + .eea-preview-items + .faceted-map-item + > a { + background: none; +} + +.template-facetednavigation_view.faceted-map + .eea-preview-items + .faceted-map-item + > a:hover { + background-color: #fff; +} + +#portal-column-content .sectioncontact .contact-type-organization { + background: none; +} + +.sectionlinks { + background: none; +} + +.sectionlinks h2::before { + display: none !important; +} + +@media screen and (max-width: 992px) { + .navbar-dark .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3e%3cpath stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-miterlimit=%2710%27 stroke-width=%272%27 d=%27M4 7h22M4 15h22M4 23h22%27/%3e%3c/svg%3e") !important; + } + + .navbar .container { + padding: 0 5px 0 0 !important; + } +} + +.bloc-newsletter { + text-align: $newsletter-align; + position: relative; + margin: 6rem 0; + padding-bottom: 6.5rem; + padding-top: 6rem; + + .section-title { + font-weight: 800; + text-align: center; + text-transform: uppercase; + position: relative; + margin: 0 auto 4.5rem; + width: max-content; + font-size: 3rem; + color: #fff; + + &::after { + left: 0%; + top: 70px; + bottom: 0; + content: ""; + display: block; + height: 13px; + position: absolute; + width: 113px; + } + } + + @media screen and (max-width: 900px) { + .section-title { + &::after { + top: 45px; + } + } + } + + .table_image { + text-decoration: none; + + .table_title span { + background: #fff; + padding: 1rem 3rem; + border-radius: 8px; + color: #000; + transition: all 0.5s ease; + + &:hover { + background: #133641 !important; + color: #fff !important; + transition: all 0.5s ease; + } + } + + @media screen and (max-width: 900px) { + .table_title span { + font-size: 14px !important; + padding: 1rem !important; + } + } + } + + &::after { + content: ""; + position: absolute; + width: 100vw; + left: 50%; + transform: translateX(-50%); + z-index: -1; + top: 0; + bottom: 0; + background: $newsletter-bg-color; + } + + .lead { + margin: 0; + } +} + +@media screen and (max-width: 992px) { + .bloc-newsletter { + margin: 4.5rem 0; + padding-bottom: 4rem; + padding-top: 3rem; + } +} + +#portal-breadcrumbs .breadcrumb .breadcrumb-item a, +#portal-breadcrumbs .breadcrumb .breadcrumb-item a:hover, +#portal-breadcrumbs .breadcrumb .breadcrumb-item.active, +#portal-breadcrumbs .breadcrumb .breadcrumb-item::before { + color: #000 !important; +} + +#portal-breadcrumbs .breadcrumb .breadcrumb-item a, +#portal-breadcrumbs .breadcrumb .breadcrumb-item a:hover, +#portal-breadcrumbs .breadcrumb .breadcrumb-item::before { + color: #000 !important; +} + +#portal-breadcrumbs .breadcrumb .breadcrumb-item.active { + color: #000 !important; + text-decoration: underline; +} + +#portal-globalnav .dropdown .nav-title a { + color: $primary-svg; +} + +#portal-header #portal-header-top #portal-globalnav-wrapper { + margin: 0 2rem; +} + +@media screen and (min-width: 992px) { + #portal-globalnav-wrapper #portal-globalnav > li > .has_subtree, + #subsite-navigation #portal-globalnav > li > .has_subtree { + margin-top: 3.5rem; + } +} + +@media screen and (max-width: 992px) { + #body-section-en-un-clic li { + width: 100% !important; + } +} + +#messagesviewlet .portalMessage.info, +#localmessagesviewlet .portalMessage.info { + background-color: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.error, +#localmessagesviewlet .portalMessage.error { + background-color: $primary-red; + color: #fff; +} + +#messagesviewlet .portalMessage.warning, +#localmessagesviewlet .portalMessage.warning { + background: $primary-orange; + color: #fff; +} + +#messagesviewlet .portalMessage.info .messagesviewlet-type, +#localmessagesviewlet .portalMessage.info .messagesviewlet-type { + background: $primary-green; + color: #000; +} + +#messagesviewlet .portalMessage.warning .messagesviewlet-type, +#localmessagesviewlet .portalMessage.warning .messagesviewlet-type { + background: $primary-orange; + color: #fff; +} + +// logo minisite +#portal-header #portal-header-top .minisite_logo { + max-width: 100px !important; +} + +#portal-footer-wrapper #portal-footer #smartweb-minisite-footer h2 { + margin-top: 0; +} + +.sectiontext mark, +.r-content-text mark { + background-color: $primary-red; + border: 0; + border-radius: 8px; + color: #fff; + display: inline-block; + font-weight: 500; + padding: 20px 45px 20px 26px; + + a { + color: #fff !important; + } +} + +.portaltype-imio-smartweb-page + #main-container + .sectionfiles + .section-container + .table_display + .table_image { + background-color: $primary-red; + border: 0; + border-radius: 8px; + color: #fff; + font-weight: 500; + padding: 20px 45px 20px 26px; + + div, + span { + color: #fff !important; + } + + a { + color: #fff !important; + } +} + +.sectionfiles::after { + background-color: $primary-red; + border-radius: 8px; + bottom: 0; + content: ""; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50vw); + width: 100vw; + z-index: -1; +} + +h3 { + font-size: 18px; + font-weight: 400; + color: $primary-red; +} + +.subsection-services-communaux-communication-bulletin-communal + .block-menu-element + a + .card-img-top { + padding-top: 135%; + background-position: top; +} + +.sectiontext ol > li::before { + content: counter(sectioncounter) "." !important; +} + +#portal-footer-wrapper #portal-footer #smartweb-footer a, +#portal-footer-wrapper #portal-footer #smartweb-minisite-footer a { + color: #fff; + transition: all 0.5s ease; +} + +#portal-footer-wrapper #portal-footer #smartweb-footer a:hover, +#portal-footer-wrapper #portal-footer #smartweb-minisite-footer a:hover { + color: $primary-red; + transition: all 0.5s ease; +} + +//navbar +.navbar-toggler { + padding: 0 !important; + background: #fff !important; + height: 40px !important; + width: 40px !important; + border-radius: 50% !important; + font-size: var(--bs-navbar-toggler-font-size); + line-height: 1; + color: var(--bs-navbar-color); + background-color: transparent; + border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color); + transition: var(--bs-navbar-toggler-transition); +} + +.navbar .container { + padding: 0 !important; +} + +.portaltype-imio-smartweb-portalpage.section-home-page { + #messagesviewlet { + position: absolute; + top: 100px; + } +} + +#portal-globalnav-collapse .dropdown .nav-link:focus, +#portal-globalnav-collapse .dropdown .nav-link:hover, +#subsite-navigation .dropdown .nav-link:focus, +#subsite-navigation .dropdown .nav-link:hover { + color: $primary-red; + + .site-cpas .swiper-banner-content-wrapper .swiper-banner-content { + .swiper-banner-title { + display: none; + } + + .swiper-banner-description p { + font-size: 24px; + font-weight: 700; + color: #fff !important; + line-height: 34px; + } + } +} + +.template-block_view #content-core, +.template-block_view_with_images #content-core, +.template-summary_view #content-core, +.template-summary_view_with_images #content-core { + margin-bottom: 3rem; +} + +.galerie-accueil { + .section-title { + font-weight: 350; + margin: 0 0 40px; + width: max-content; + font-size: 45px; + justify-self: center; + } + + margin: 120px 0 100px; + overflow: hidden; + border-radius: 0; + padding: 0 10px !important; + + img { + border-radius: 20px; + position: relative; + } + + .section_gallery_item { + &::after { + top: 0; + bottom: 0; + left: 0; + background: $primary-red; + content: ""; + display: block; + height: 100%; + position: absolute; + width: 100%; + margin-left: 0; + z-index: 0; + opacity: 0%; + border-radius: 20px; + transition: 0.5s; + } + + &:hover { + &::after { + opacity: 80%; + transition: 0.5s; + } + } + } + + @media screen and (max-width: 1000px) { + border-radius: 0; + margin: 5px 0 100px; + } +} + +.r-add-contact a, +.r-add-event a, +.r-add-news a { + background: $primary-red; + border-radius: 8px; + color: #fff; + padding: 1rem; + text-decoration: none; + transition: all 0.5s ease; + font-size: 14px !important; + line-height: 28px !important; + + &:hover { + background: #000; + transition: all 0.5s ease; + } +} + +@media screen and (min-width: 900px) { + .r-add-contact, + .r-add-event { + bottom: 0; + padding-bottom: 1rem; + position: absolute; + right: 0; + top: 0; + padding-top: 20px; + padding-right: 13px; + } +} + +@media screen and (min-width: 1200px) { + .r-add-news { + bottom: 0; + padding-bottom: 1rem; + position: absolute; + right: 0; + top: 0; + padding-top: 0; + padding-right: 0; + } +} + +@media screen and (max-width: 1199px) { + .r-add-news { + top: auto; + padding-bottom: 0; + } +} + +#portal-column-content + .section-contact + .contact-type-position + .contact_leadimage { + aspect-ratio: 4 / 5; + background-position: top; +} diff --git a/mons/src/scss/se-files.scss b/mons/src/scss/se-files.scss new file mode 100644 index 00000000..47ed1e86 --- /dev/null +++ b/mons/src/scss/se-files.scss @@ -0,0 +1,77 @@ +.portaltype-imio-smartweb-page #main-container .sectionfiles { + background-color: #fff; + border-radius: 0; + font-weight: bold; + margin-top: 1vw; + margin-bottom: 1vw; + padding: 0 !important; + + &::after { + display: none !important; + } + + .section-title { + font-weight: 400; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 0; + width: auto; + color: #000; + padding: 0 !important; + + a { + text-decoration: none; + } + + a.collapsed { + color: #000 !important; + } + } + + .section-container { + background-color: #fff; + border-radius: 0; + display: flex; + + @media screen and (min-width: 800px) { + padding: 0 50px; + } + + .section-title { + font-weight: 400; + font-family: $font-family-base; + + &::before { + content: ""; + background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='uuid-6ea3f586-ad4e-4ea5-a2a3-9081708c3e7f' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52.65 52.14'%3E%3Cg id='uuid-9a101051-056e-49bb-ae55-6f9050a07aa4'%3E%3Cpath id='uuid-29306b0f-134c-436a-bf15-da5b7f22ca53' d='m52.22,6.39L46.01.46c-.23-.28-.57-.45-.94-.46h-24.9c-.73,0-1.32.59-1.32,1.32v4.05l-8.78,1.5c-.7.12-1.18.79-1.06,1.5l.44,2.6c-2.85.96-5.78,1.95-8.61,2.97-.67.25-1.02.99-.78,1.66l5.63,15.64c.13.41.56.63.97.5s.63-.56.5-.97c0-.02-.01-.03-.02-.05L1.61,15.31c2.66-.96,5.42-1.89,8.12-2.8l2.65,15.45,3.05,17.8c.13.7.79,1.17,1.5,1.06l8.26-1.42,6.45-1.11-9.71,3.49-7.66,2.75-5.95-16.54c-.14-.4-.59-.61-.99-.47-.4.14-.61.59-.47.99h0l6.03,16.77c.19.51.67.85,1.22.85.15,0,.3-.03.44-.08l7.89-2.83,17.9-6.44,3.42-.59h7.56c.73,0,1.32-.59,1.32-1.32V7.26c0-.34-.16-.66-.43-.87h0Zm-2.04.18h-3.96c-.19,0-.62,0-.73-.1-.05-.08-.07-.17-.06-.27V2.05s4.74,4.52,4.74,4.52Zm.93,34.1h-30.72v-15.03c0-.43-.35-.77-.77-.77s-.77.35-.77.77v15.25c0,.73.59,1.32,1.32,1.32h14.48l-9.72,1.67-8.02,1.38-3.01-17.55-3.32-19.35,8.27-1.42v15.12c0,.43.35.77.77.77s.77-.35.77-.77V1.54h23.5v4.66c-.02.5.17,1,.52,1.36.48.4,1.09.6,1.71.55h4.99v32.55Z'/%3E%3Cpath id='uuid-19ebad54-5d64-4b6a-8103-ea87acd3b7be' d='m24.11,11.98c0,.43.35.77.77.77h22.05c.43,0,.77-.35.77-.77s-.35-.77-.77-.77h-22.06c-.43,0-.77.35-.77.77h0Z'/%3E%3Cpath id='uuid-94f5426d-7a34-4f04-8977-dfef88c94e0e' d='m46.93,16.69h-22.06c-.43,0-.77.35-.77.77s.35.77.77.77h22.05c.43,0,.77-.35.77-.77s-.35-.77-.77-.77h0Z'/%3E%3Cpath id='uuid-49cdd075-c8ef-441e-82f3-758422fd3a43' d='m46.93,22.17h-22.06c-.43,0-.77.35-.77.77s.35.77.77.77h22.05c.43,0,.77-.35.77-.77s-.35-.77-.77-.77h0Z'/%3E%3Cpath id='uuid-38952654-25ec-4697-8b92-cd6b8ef71e7c' d='m46.93,27.65h-22.06c-.43,0-.77.35-.77.77s.35.77.77.77h22.05c.43,0,.77-.35.77-.77s-.35-.77-.77-.77h0Z'/%3E%3Cpath id='uuid-f05adc20-cb95-46d5-a304-98314e3d5047' d='m46.93,33.13h-22.06c-.43,0-.77.35-.77.77s.35.77.77.77h22.05c.43,0,.77-.35.77-.77s-.35-.77-.77-.77h0Z'/%3E%3C/g%3E%3C/svg%3E%0A"); + width: 25px; + height: 25px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + margin: 0; + } + } + + .table_display { + border-color: white; + + .table_image { + border: solid 1px #000; + text-decoration: none; + padding: 20px; + border-radius: 0; + + span, + p, + a, + div { + color: #000 !important; + font-weight: 400; + } + } + } + } +} diff --git a/mons/src/scss/se-link.scss b/mons/src/scss/se-link.scss new file mode 100644 index 00000000..0d93311b --- /dev/null +++ b/mons/src/scss/se-link.scss @@ -0,0 +1,83 @@ +.portaltype-imio-smartweb-page #main-container .sectionlinks { + background-color: white; + + .section-container { + .rich_description { + display: none; + } + + & > div { + .section-title { + font-weight: 400; + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 2vw; + font-family: $font-family-base; + + &::before { + content: ""; + background: url("data:image/svg+xml,%3Csvg id='link' xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath id='Path_751' data-name='Path 751' d='M24,0A24,24,0,1,0,48,24,24,24,0,0,0,24,0Zm0,46.4A22.4,22.4,0,1,1,46.4,24,22.4,22.4,0,0,1,24,46.4Zm0,0'/%3E%3Cpath id='Path_752' data-name='Path 752' d='M145.279,126.465a3.971,3.971,0,0,0-2.828,1.171l-4.526,4.526a4.005,4.005,0,0,0-.508,5.034l-.115.115a4.005,4.005,0,0,0-5.034.508l-4.526,4.526A4,4,0,0,0,133.4,148l4.526-4.526a4.005,4.005,0,0,0,.508-5.034l.115-.115a4.005,4.005,0,0,0,5.034-.508l4.526-4.526a4,4,0,0,0-2.829-6.828Zm-8.485,15.879-4.525,4.525a2.458,2.458,0,0,1-3.394,0,2.4,2.4,0,0,1,0-3.394l4.525-4.525a2.372,2.372,0,0,1,2.724-.462l-1.592,1.593a.8.8,0,1,0,1.131,1.131l1.593-1.593A2.4,2.4,0,0,1,136.794,142.344Zm10.182-10.182-4.525,4.525a2.4,2.4,0,0,1-2.725.462l1.593-1.593a.8.8,0,0,0-1.131-1.131l-1.593,1.593a2.4,2.4,0,0,1,.462-2.725l4.525-4.525a2.4,2.4,0,1,1,3.394,3.394Zm0,0' transform='translate(-113.926 -113.818)'/%3E%3C/svg%3E"); + width: 25px; + height: 25px; + display: block; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + + .body-section { + .row { + flex-direction: row; + list-style-type: none; + gap: 30px 2%; + + li { + padding: 0; + } + + .table_image { + display: flex; + width: 100%; + gap: 20px; + + .image { + width: auto; + + svg { + max-width: 120px; + background-size: contain; + background-repeat: no-repeat; + border: solid 1px rgb(165, 169, 172); + border-radius: 5px; + width: auto; + height: auto; + padding: 1rem; + } + } + + .table_title { + span { + display: flex; + align-items: first baseline; + gap: 10px; + + &::before { + content: ""; + display: block; + width: 10px; + height: 11px; + background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.25 6.51'%3E%3Cpath d='M3.96 2.55 1.71.29C1.32-.1.68-.1.29.29s-.39 1.03 0 1.42l1.55 1.55L.29 4.81A.996.996 0 0 0 1 6.51c.26 0 .51-.1.71-.29l2.25-2.25a.996.996 0 0 0 0-1.41Z' style='fill:%23ffb81c'/%3E%3C/svg%3E"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } + } + } + } + } + } + } +} diff --git a/mons/src/scss/variables.scss b/mons/src/scss/variables.scss new file mode 100644 index 00000000..44b34950 --- /dev/null +++ b/mons/src/scss/variables.scss @@ -0,0 +1,423 @@ +//*// COLORS +$primary: #000 !default; +$primary-svg: #ee3831 !default; +$primary-blue: #3cc4ce !default; +$primary-green: #80c41c !default; +$primary-orange: #fba609 !default; +$primary-red: #ee3831 !default; +$primary-yellow: #ee3831 !default; +$primary-light: #ee3831 !default; + +//*// TYPOGRAPHY + +@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=SUSE:wght@100..800&display=swap"); + +$font-family-base: "Jost", sans-serif !default; +$font-family-title: "Jost", sans-serif !default; +$font-title-color: $primary !default; +$font-title-color-light: #fff !default; +$font-title-color-dark: #000 !default; +$font-title-weight: 700 !default; + +// $font-size-base affects the font size of the body text +$font-size-base: 1rem !default; // Assumes the browser default, typically `16px` +$font-size-sm: $font-size-base * 0.875 !default; +$font-size-lg: $font-size-base * 1.25 !default; +$h1-font-size: $font-size-base * 2.5 !default; +$h2-font-size: $font-size-base * 2 !default; +$h3-font-size: $font-size-base * 1.5 !default; +$h4-font-size: $font-size-base * 1.25 !default; +$h5-font-size: $font-size-base * 1.25 !default; +$h6-font-size: $font-size-base !default; + +// Include Roboto as webfont + +//*// GLOBAL + +@function url-encoded-color($color) { + @return "%23" + str-slice("#{$color}", 2, -1); +} +$container-max-widths: ( + sm: 100%, + md: 100%, + lg: 960px, + xl: 1140px, + xxl: 1320px, +); +$global-radius: 0 !default; +$enable-title-uppercase: false !default; +$home-section-title-size: 3.25rem !default; +$home-section-title-margin: 0 0 2rem 0 !default; +$home-section-title-padding: 0 !default; +$home-section-title-align: left !default; +$section-padding-top: 0 !default; +$to-portal-link-color: #282828 !default; +$img-placeholder: #f2f2f2 !default; + +//swiper +$swiper-icon-color: $primary-svg !default; +$swiper-button-height: 45px !default; +$swiper-button-width: 45px !default; +$swiper-button-top: 26% !default; +$swiper-prev-icon: url('data:image/svg+xml;utf8,') !default; +$swiper-next-icon: url('data:image/svg+xml;utf8,') !default; +$swiper-background-size: 50% !default; +$swiper-background-color: #fff !default; +$swiper-raduis: 50px !default; +$swipper-bullet-color: $primary-svg !default; + +//*// HEADER +$main-logo-max-width: 140px !default; +$header-top-padding: 1rem 0 !default; +$header-top-background: #fff !default; +$header-center-nav: false !default; +$header-nav-margin: 0 1rem 0 1rem !default; +$header-nav-link-color: $primary !default; +$header-nav-link-font-size: 14px !default; +$header-nav-link-font-family: $font-family-base !default; +$header-links-color: $primary !default; +$header-links-account-margin: 0 !default; +$header-links-account-padding: 0 !default; +$header-links-account-border: solid 0 #000 !default; +$header-links-account-bg: transparent !default; +$header-links-account-hover-border: solid 0 #000 !default; +$header-links-account-hover-bg: transparent !default; +$header-links-account-hover-color: #000 !default; +$header-search-icon-color: #fff !default; +$header-search-icon: url('data:image/svg+xml;utf8,') !default; +$toggler-color: white !default; +$header-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='#{$toggler-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !default; + +//bredcrumb +$breadcrumb-bg: #fff !default; +$enable-full-width-breacrumb: false !default; + +// sitenav +$navbar-padding-x: 2.5rem !default; +$nav-mask-background: rgb(15 11 11 / 76%) !default; +$nav-title-font-family: $font-family-base !default; +$nav-link-color: $primary !default; +$nav-link-open-color: $primary !default; +$nav-link-active-color: $primary-svg !default; +$nav-link-font-size: initial !default; +$nav-link-font-weight: 500 !default; +$nav-link-drop-color: $primary-red !default; +$nav-link-drop: url('data:image/svg+xml;utf8,') !default; +$nav-link-drop-color-mobile: #000 !default; +$nav-link-drop-mobile: url('data:image/svg+xml;utf8,') !default; +$nav-first-level-gap: 30px !default; +$nav-first-level-uppercase: false !default; +$nav-quick-link-color: $primary-svg !default; +$nav-quick-link-size: 18px !default; +$nav-quick-link-weight: bold !default; +$nav-quick-link-padding: 0 !default; +$nav-sub-link-font-size: $nav-link-font-size !default; +$nav-sub-link-font-weight: $nav-link-font-weight !default; +$nav-overlay-radius: $global-radius !default; +$nav-overlay-title-color: $primary !default; +$nav-overlay-title-font-size: 24px !default; +$nav-overlay-title-font-weight: bold !default; +$nav-overlay-next-color-hover: $primary !default; +$nav-overlay-next-icon-color: #000; +$nav-overlay-next-icon-hover-color: $primary; +$nav-overlay-next-icon: url('data:image/svg+xml;utf8,') !default; +$nav-overlay-next-icon-hover: url('data:image/svg+xml;utf8,') !default; + +//sub-header +$subsite-logo-background: $primary !default; +$subsite-logo-color: #fff !default; +$subsite-navbar-bg: #fff !default; + +//sub-sitenav +$sub-navbar-padding: 1rem 0 !default; +$sub-nav-link-color: #000 !default; +$sub-nav-link-open-color: #000 !default; +$sub-nav-link-drop-color: #000 !default; +$sub-nav-link-drop: url('data:image/svg+xml;utf8,') !default; + +//*// SECTION HOMEPAGE + +// banner +$banner-enable-full-width: true !default; +$banner-heigh: 500px !default; +$banner-content-width: max-content !default; +$banner-content-max-width: 100% !default; +$banner-content-margin: 0 !default; +$banner-content-padding: 1rem !default; +$banner-content-background: rgb(256 256 256 / 50%) !default; +$banner-content-is-vertical-center: true !default; +$banner-content-title-font-size: 60px !default; +$banner-content-title-color: #fff !default; +$banner-content-title-text-transform: uppercase !default; +$banner-content-text-align: left !default; +$banner-content-description-font-size: 25px !default; +$banner-content-description-color: #fff !default; + +// see_all +$see-all-padding: 15px 30px; +$see-all-margin: 2rem 0 0 0 !default; +$see-all-bg: $primary-red; +$see-all-color: #000 !default; +$see-all-radius: 10px !default; +$see-all-border: solid 1px $primary-red !default; +$see-all-text-transform: none !default; +$see-all-font-size: 16px; +$see-all-font-weight: 500; +$see-all-transition: all 0.5s ease !default; +$see-all-hover-bg: $primary !default; +$see-all-hover-color: #fff !default; +$see-all-hover-radius: 10px !default; +$see-all-hover-border: solid 1px $primary !default; +$see-all-justify-content: center; +$see-all-underline-color: transparent; +$see-all-underline-width: 25% !default; +$see-all-hover-underline-width: 50% !default; + +// Quick access +$quick-access-section-full-width: false !default; +$quick-access-title-color: $primary !default; +$quick-access-title-margin: $home-section-title-margin !default; +$quick-access-title-padding: $home-section-title-padding !default; +$quick-access-title-align: $home-section-title-align !default; +$quick-access-container-padding: 1rem 0 !default; +$quick-access-width: 100px !default; +$quick-access-height: 100px !default; +$quick-access-background: #fff !default; +$quick-access-border: solid 1px $primary !default; +$quick-access-border-radius: 100px !default; +$quick-access-shadow: none !default; +$quick-access-svg-width: 108px !default; +$quick-access-svg-color: $primary !default; +$quick-access-item-title-margin: 1rem 0 0 0 !default; +$quick-access-title-font-size: 18px !default; +$quick-access-title-color: $primary !default; +$quick-access-title-text-transform: initial !default; +$quick-access-title-weight: 400 !default; + +$quick-access-enable-full-bg: false !default; +$quick-access-full-bg-color: $primary !default; +$quick-access-full-bg-border: solid 1px green !default; +$quick-access-full-bg-shadow: none !default; + +// A la une +$a-la-une-title-color: $font-title-color !default; +$a-la-une-title-align: $home-section-title-align !default; +$a-la-une-title-margin: $home-section-title-margin !default; +$a-la-une-title-padding: $home-section-title-padding !default; +$a-la-une-text-bg: rgb(244, 244, 244) !default; +$a-la-une-item-image-margin: 0 !default; +$a-la-une-item-title-color: $primary !default; +$a-la-une-item-title-font-size: $h3-font-size !default; +$a-la-une-item-title-margin: 0 !default; +$a-la-une-item-title-padding: 36px 36px 0 !default; +$a-la-une-item-title-radius: 0 !default; +$a-la-une-item-description-font-size: $font-size-lg !default; +$a-la-une-item-description-color: initial !default; +$a-la-une-item-description-margin: 0 !default; +$a-la-une-item-description-padding: 0 36px 36px !default; +$a-la-une-item-description-radius: 0 !default; +$a-la-une-item-image-radius: 20px !default; + +// Actu +$actu-section-full-width: true !default; +$actu-section-padding-top: 1rem; +$actu-section-padding-bottom: 1rem; +$actu-section-margin: 0 !default; +$actu-title-color: $primary !default; +$actu-title-align: $home-section-title-align !default; +$actu-title-margin: $home-section-title-margin !default; +$actu-title-padding: $home-section-title-padding !default; +$actu-image-margin-bottom: 0 !default; +$actu-image-border-radius: 30px 0 30px 0 !default; +$actu-item-bg-color: transparent; +$actu-item-bg-radius: 50px 0 50px 0; +$actu-category-margin: 0; +$actu-category-padding: 0.5rem 1rem; +$actu-category-color: #fff !default; +$actu-category-bg-color: transparent !default; +$actu-category-text-transform: uppurcase !default; +$actu-category-font-size: 14px; +$actu-category-font-weight: initial !default; +$actu-category-radius: 0 0 8px 0; +$actu-item-title-margin: 0 0 0 0; +$actu-item-title-padding: 0 1rem; +$actu-item-title-color: initial !default; +$actu-item-title-text-transform: initial !default; +$actu-item-title-font-size: $h4-font-size !default; +$actu-item-title-font-weight: 400 !important; +$actu-item-title-align: center !default; +$actu-item-description-margin: 0 0 1rem 0; +$actu-item-description-padding: 0 1rem; +$actu-item-description-color: initial !default; +$actu-item-description-align: center !default; +$actu-item-description-font-family: $font-family-base !default; +$actu-date-margin: 1rem 0 0.5rem 0; +$actu-date-padding: 0 1rem; +$actu-date-color: $primary !default; +$actu-date-font-size: 12px; +$actu-date-align: center !default; +$actu-see-all-justify-content: $see-all-justify-content !default; + +// Event +$event-section-full-width: true !default; +$event-section-padding-top: 8rem; +$event-section-padding-bottom: 3rem; +$event-section-margin: 0 !default; +$event-title-color: #fff !default; +$event-title-align: $home-section-title-align !default; +$event-title-margin: $home-section-title-margin !default; +$event-title-padding: $home-section-title-padding !default; +$event-image-margin-bottom: 0 !default; +$event-image-border-radius: 20px !default; +$event-item-bg-color: transparent; +$event-item-bg-radius: 0; +$event-category-margin: -37px 0 0 0; +$event-category-padding: 0.5rem 2rem; +$event-category-color: #fff !default; +$event-category-bg-color: transparent !default; +$event-category-text-transform: uppurcase !default; +$event-category-font-size: 14px; +$event-category-font-weight: initial !default; +$event-category-radius: 30px 0 30px 0; +$event-item-title-margin: 0 0 0 0; +$event-item-title-padding: 0 1rem; +$event-item-title-color: #fff !default; +$event-item-title-text-transform: initial !default; +$event-item-title-font-size: $h4-font-size !default; +$event-item-title-font-weight: 400 !important; +$event-item-title-align: center !default; +$event-item-description-margin: 0 0 1rem 0; +$event-item-description-padding: 0 1rem; +$event-item-description-color: initial !default; +$event-item-description-align: center !default; +$event-item-description-font-family: $font-family-base !default; +$event-date-margin: 1rem 0 0.5rem 0; +$event-date-padding: 0 1rem; +$event-date-color: #fff !default; +$event-date-font-size: 12px; +$event-date-align: center !default; +$event-see-all-justify-content: $see-all-justify-content !default; + +// Album +$album-section-full-width: true !default; +$album-section-bg: #edeae5 !default; +$album-section-padding-top: 2rem !default; +$album-section-padding-bottom: 2rem !default; +$album-section-margin: 0 !default; +$album-title-color: $primary !default; +$album-title-align: $home-section-title-align !default; +$album-title-margin: $home-section-title-margin !default; +$album-title-padding: $home-section-title-padding !default; +$album-image-margin-bottom: 0.7rem !default; +$album-image-border-radius: $global-radius !default; +$album-item-bg-color: rgb(244, 244, 244) !default; +$album-item-bg-radius: $global-radius + 2 !default; +$album-category-margin: 0 0 0.3rem 0 !default; +$album-category-padding: 0 !default; +$album-category-color: $primary !default; +$album-category-bg-color: #000 !default; +$album-category-text-transform: uppurcase !default; +$album-category-font-size: 14px !default; +$album-category-font-weight: initial !default; +$album-category-radius: $global-radius !default; +$album-item-title-margin: 1rem 0 !default; +$album-item-title-padding: 0 !default; +$album-item-title-color: initial !default; +$album-item-title-text-transform: initial !default; +$album-item-title-font-size: $h3-font-size !default; +$album-item-title-font-weight: initial !default; +$album-date-margin: 0 !default; +$album-date-padding: 0 !default; +$album-date-color: $primary !default; +$album-date-font-size: 14px !default; +$album-see-all-justify-content: $see-all-justify-content !default; + +// Newsletter +$newsletter-bg-color: $primary-svg !default; +$newsletter-align: center !default; +$newsletter-padding-top: 2rem !default; +$newsletter-padding-bottom: 2rem !default; +$newsletter-margin: 3rem 0 !default; +$newsletter-text-color: #fff !default; + +/////////////// interne /////////////// + +//*// SECTION TEXTE +$font-size-texte: $font-size-base !default; +$mark-background-color: #f3f3f3 !default; +$mark-color: #5c5c5c !default; +$mark-padding-sec: 20px 45px 20px 26px !default; +$mark-border: solid 2px $primary !default; +$mark-radius: $global-radius !default; +$mark-weight: 500 !default; +$list-style-color: $primary !default; +$list-style-custom: url('data:image/svg+xml;utf8,') !default; +$section-text-h2-margin-top: 2rem !default; +$section-text-h2-margin-bottom: 1.5rem !default; +$section-text-h3-margin-top: 0 !default; +$section-text-h3-margin-bottom: 0.5rem !default; +$section-text-link-color: $primary !default; +$section-text-link-hover-decoration: solid 1px $primary !default; +$section-text-max-width: 760px !default; + +// Section +$section-padding-y: 5.31rem; +$section-padding: ( + sm: 3rem, + md: 4rem, + lg: 4.3rem, +); + +// section-contact +$section-contact-title-size: $h2-font-size; +$section-contact-sub-title-size: $font-size-lg; +$section-contact-title-color: $primary; +$section-contact-p-margin: 1rem 0; +$section-contact-portrait-ration: calc(4 / 5); +$section-contact-background: #f3f3f3 !default; + +// section-files +$section-file-background-color: $primary !default; +$enable-full-width-section-files: true !default; +$enable-light-color-section-files: true !default; + +// section-link +$section-link-background-color: #f8f8f8; +$enable-full-width-section-link: true; +$enable-light-color-section-link: false; + +// section-list-block-img +$section-list-block-img-card-title: 1.25rem; + +//*// LIST + +//Liste Block +$block-full-shadow: 0 20px 40px #0000001a; +$block-small-shadow: rgba(0, 0, 0, 16%) 0 1px 4px; +$list-group-border-width: 0; +$list-group-item-padding-x: 0; + +// Message Viewlets + +$message-info: #27789c; +$message-warning: #c06d01; +$message-error: #ae2609; + +//QUICK ACCESS +$quick-access-title-font-family: $font-family-title !default; + +//SEE ALL +$see-all-font-family: $font-family-title !default; + +:root { + --bs-card-spacer-x: 1rem; + --bs-card-spacer-y: 1rem; +} + +// bootstrap +.breadcrumb { + --bs-breadcrumb-margin-bottom: 0 !important; + --bs-breadcrumb-padding-x: 0 !important; + --bs-breadcrumb-padding-y: 10px !important; + --bs-breadcrumb-bg: transparent !important; +}