],
'separator' => 'after',
'selectors' => [
- '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--top: {{SIZE}}px'
+ '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--bottom: -{{SIZE}}px'
],
]
);
.grid-constrain-fluid
margin: 0 auto
-.z-1
- z-index: 1
+@for $i from 1 through 10
+ .z-#{$i}
+ z-index: #{$i}
.elementor-widget-wrap
//display: grid !important
body.nous-contacter
.elementor-section:last-child > .elementor-container
padding-bottom: var(--space-xl-2xl)
- border-bottom: 1px solid #D8D8D8
+.vos-projets,
+.la-fondation
+ footer.content-info
+ .container
+ border: 0
+
footer.content-info
- padding: 51px 0
.container
+ padding: 51px 0
+ border-top: 1px solid #D8D8D8
+screen-size("small-desktop", "max")
+ padding: 36px 0 20px
flex-direction: column
.brand
z-index: 99
transition: all .3s
top: 0
+ +screen-size(small-desktop, 'max')
+ padding-top: 18px !important
img
width: 100%
transition: all .3s
left: 50%
display: flex
transform: translateX(-50%)
- &.active
+ &.prev
+ .leftside
+ height: 0
+ &.next
z-index: 1
+ &.active
+ height: 100%
+ z-index: 2
[class*="side"]
.overlay,
.thumbnail
.thumbnail
position: relative
- transition: height .4s cubic-bezier(.7, 0, .2, 1)
- img.bg
- height: 0
- bottom: 0
- img:not(.bg)
- bottom: 0
.text
opacity: 1
transition: opacity 750ms cubic-bezier(0.77, 0, 0.175, 1) 0s, top 1s
top: 0
- .leftside
- .overlay
- z-index: 2
- .thumbnail
- z-index: 3
-
- &:not(.active)
- [class*="side"]
- .overlay,
- .thumbnail
- height: 0
- margin-top: auto
-
.leftside,
.rightside
width: 50%
.leftside
display: flex
flex-direction: column
+ margin-top: auto
+ transition: all .9s cubic-bezier(.7, 0, .2, 1)
+ height: 100%
+ *
+ height: 100%
.overlay
background-position: center
background-size: cover
overflow: hidden
position: relative
+ img
+ position: absolute
+ width: max-content
+ height: max-content
+ bottom: var(--bottom)
+ left: var(--left)
+ transition: all 1s
- img
- position: absolute
- //top: 100%
- //bottom: calc(var(--bottom) + 30px)
- //transition: bottom 1s
- img.bg
- width: 100%
- height: 100%
- top: 0
- transition: bottom .9s cubic-bezier(.7, 0, .2, 1)
+ &.active
+ .thumbnail
+ img
- img:not(.bg)
- width: max-content
- height: max-content
- bottom: 0
- left: var(--left)
+ transition: all 1s
+ bottom: calc(var(--bottom) - 39px)
.rightside
display: flex
margin-top: initial
.overlay
top: 0
-
- img.bg
- bottom: 0
.rightside
margin-top: auto
.overlay
bottom: 0
- img.bg
- top: 0
-
&:not(.active)
- .overlay
- height: 0
- transition: height 0s
- transition-delay: 1s
.text
animation-name: anime
animation-duration: .8s
100%
top: 1.25vw
+@keyframes anime-thumb
+ 0%
+ bottom: calc(var(--bottom) + 39px)
+ 100%
+ bottom: var(--bottom)
+
.home-carousel-mobile
overflow: hidden
.thumbnail,
.politique-de-confidentialite,
.mentions-legales
-
+ .elementor-section:not(:first-child)
+ .elementor-widget-container
+ +screen-size(small-desktop)
+ width: 50%
+ margin: 0 auto
*
color: map-get($colors, 'grey', 'dark')
h2
margin-bottom: 84px
font-size: 39px
-
.swiper
&-container
.assoc
&-block
padding-bottom: 86px
- border-bottom: 1px solid #D8D8D8
h3,h2
width: 100%
z-index: 1
&-image
align-self: flex-start
+ +screen-size(small-desktop)
+ height: 100%
+screen-size(small-desktop, 'max')
margin-bottom: 18px
+ img
+ +screen-size(small-desktop)
+ height: 100%
+ object-fit: cover
+
+
&-subtitle
font-size: 20px
.text-blockbtn
- display: grid
- +special-gap(0)
+screen-size(small-desktop)
+ display: grid
+ +special-gap(0)
grid-template-columns: repeat(12, 1fr)
grid-template-rows: 1fr auto auto 1fr
align-items: flex-start
height: fit-content
+ &-gallery:not(.gallery-columns-2)
+ +screen-size(small-desktop)
+ height: 100%
+ *
+ height: 100%
+ img
+ height: 100%
+ object-fit: cover
+
&.gallery-left
+screen-size(small-desktop)
.text-blockbtn
&:not(.text-blockbtn-above-title)
font-size: 27px
&-bar
- width: 100%
+ width: 0
height: 38.8%
position: absolute
bottom: 0
left: 0
z-index: 0
+ transition: width .9s ease-in-out
+
+ &.active
+ .highlight-bar
+ width: 100%
@php
$key += 1;
@endphp
- <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 1 ? 'active' : '' }}">
- <div class="leftside">
+ <div class="elementor-repeater-item-{{$slide['_id']}} carousel-slide container {{ $key === 2 ? 'next' : '' }} {{ $key === 1 ? 'active' : '' }}">
+ <div class="leftside {{ $key === 1 ? 'active' : '' }}">
<div class="overlay overlayside" style="background-image: url({{$slide['background_image']['url']}})"></div>
@if(array_key_exists('image',$slide))
<div class="thumbnail">
<img src="{{ $slide['image']['url'] }})" />
- <img class="bg" src="{{ $slide['background_image']['url']}} " />
</div>
@endif
</div>