wip #5812 @6:00

diff --git a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php
index 6b8c801620d28c6ac8ea889b3f676856beb28275..85fc1c344150655fc63da0a6d3ceddf222774cab 100644 (file)
--- a/wp-content/mu-plugins/cube/Widgets/CarouselHome.php
+++ b/wp-content/mu-plugins/cube/Widgets/CarouselHome.php
@@ -128,7 +128,7 @@ class CarouselHome extends _Base {
                 ],
                 'separator' => 'after',
                 'selectors' => [
-                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'left: {{SIZE}}px'
+                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--left: {{SIZE}}px'
                 ],
             ]
         );
@@ -150,7 +150,7 @@ class CarouselHome extends _Base {
                 ],
                 'separator' => 'after',
                 'selectors' => [
-                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail img' => 'bottom: -{{SIZE}}px'
+                    '{{WRAPPER}} {{CURRENT_ITEM}} .thumbnail' => '--top: {{SIZE}}px'
                 ],
             ]
         );

diff --git a/wp-content/mu-plugins/cube/Widgets/StickyNav.php b/wp-content/mu-plugins/cube/Widgets/StickyNav.php
index 6b694eef9ef4abc9054cb482771c41717941b312..c302c86d33397699322b5f5fe6b91c6556cbcaa1 100644 (file)
--- a/wp-content/mu-plugins/cube/Widgets/StickyNav.php
+++ b/wp-content/mu-plugins/cube/Widgets/StickyNav.php
@@ -36,7 +36,7 @@ class StickyNav extends CarouselHome
                     echo '
                     <div class="text '.$active.'">
                         <img src="'.$item['background_image']['url'].'" />
-                        <h3 class="text-2xl">'.$item['title'].'</h3>
+                        <h3>'.$item['title'].'</h3>
                         <p>
                             '.$item['text'].'
                         </p>

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass
index 9e3cfa3a0f1dff8bf2de1097660afc87b51e735a..d55f3348f777d46b18827f68be60edf25b8bfa94 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/common/helpers.sass
@@ -1,4 +1,4 @@
-$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': 3.815rem,'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem)
+$fontSizes: ( '3xl': 9.313rem,'2xl': 4.768rem,'xl': var(--step-7),'lg': 1.953rem,'md': 1.25rem, 'sm': 1rem)
 $fontWeights: (light: 300,normal: 400,medium: 500,semibold: 600,bold: 700,'extra-bold': 800,black: 900)
 $colors: ('red': ('full': #F42865,'clear': #707070,'transparent': rgba(249,195,211,.5)),'turquoise': #28CABD,'blue': ('full': #092CC8,'clear': #C3CBF0),'orange': ( 'full': #FD6120,'transparent': rgba(255,226,199,.5)),'grey': ('disabled': #B0B4C1,'dark': #141414))
 $breakpoint: ('phone': '500px', 'tablet': '768px', 'small-desktop': '1140px', 'desktop': '1344px', 'widescreen': '1680px')
@@ -80,6 +80,7 @@ $textPositions: ('left','center','right')
 
   --space-20-44: clamp(1.25rem, calc(0.70rem + 2.44vw), 2.75rem)
   --space-36-126: clamp(2.25rem, calc(0.19rem + 9.15vw), 7.88rem)
+  --space-36-86: clamp(2.38rem, calc(1.28rem + 4.88vw), 5.38rem)
   --space-74-126: clamp(4.63rem, calc(3.44rem + 5.28vw), 7.88rem)
   --space-56-128: clamp(3.50rem, calc(1.85rem + 7.32vw), 8.00rem)
 
@@ -92,3 +93,4 @@ $textPositions: ('left','center','right')
   --step-4: clamp(3.90rem, calc(1.50rem + 12.02vw), 11.60rem)
   --step-5: clamp(4.39rem, calc(1.24rem + 15.79vw), 14.50rem)
   --step-6: clamp(4.94rem, calc(0.82rem + 20.59vw), 18.12rem)
+  --step-7: clamp(2.28rem, calc(1.37rem + 4.04vw), 4.77rem)

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass
new file mode 100644 (file)
index 0000000..e5ecfc9
--- /dev/null
+++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.sass
@@ -0,0 +1,35 @@
+header.banner
+  position: fixed
+  width: 100%
+  z-index: 99
+  transition: all .3s
+  top: 0
+  img
+    width: 100%
+    transition: all .3s
+
+body.sticky header.banner
+  background-color: #FFFFFF
+  padding: 0.5rem 0
+  img
+    width: 80%
+
+body.home:not(.sticky)
+  a
+    color: #FFFFFF
+
+#menu-menu
+  display: flex
+  li:not(:last-child)
+      margin-right: 62px
+
+  li.current-menu-item a
+    color: map-get($colors, 'red', 'full')
+
+  li:hover a
+    border-bottom: 1px solid
+
+  a
+    font-weight: 500
+    transition: border-bottom .3s
+    padding-bottom: 2px

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss b/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss
deleted file mode 100644 (file)
index ef6167a..0000000
--- a/wp-content/themes/sycomore-fondation/resources/styles/partials/header.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-header.banner {
-  position: fixed;
-  width: 100%;
-  z-index: 99;
-  transition: all .3s;
-  top: 0;
-  img {
-    width: 100%;
-    transition: all .3s;
-  }
-}
-
-body.sticky header.banner {
-  background-color: #FFFFFF;
-  padding: 0.5rem 0;
-  img {
-    width: 80%;
-  }
-}
-
-#menu-menu {
-  display: flex;
-  li:not(:last-child) {
-      margin-right: 62px
-    }
-  li.current-menu-item a,
-  li:hover a {
-    border-bottom: 1px solid;
-  }
-  a {
-    font-weight: 500;
-    transition: all .3s;
-    padding-bottom: 2px;
-  }
-}

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
index 8a98dd3659e0ae007b3599207eb71568023e52d8..534d64c567ae1b70f122cbb5e1fcfd89dad91978 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/home-carousel.sass
@@ -15,17 +15,26 @@
       &.active
         z-index: 1
         [class*="side"]
-          .overlay
+          .overlay,
+          .thumbnail
             height: 100%
+
           .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
+          .overlay,
+          .thumbnail
             height: 0
+            margin-top: auto
 
       .leftside,
       .rightside
@@ -40,11 +49,13 @@
 
         position: absolute
         left: 0
-        transition: all .7s
+        transition: all .9s cubic-bezier(.7, 0, .2, 1)
         img
           object-fit: cover
 
       .leftside
+        display: flex
+        flex-direction: column
         .overlay
           background-position: center
           background-size: cover
@@ -54,18 +65,26 @@
 
         .thumbnail
           position: relative
-          height: 100%
+          height: 0
+          transition: height .9s cubic-bezier(.7, 0, .2, 1), background-position-y 1s
+          background-size: 100%
+          background-repeat: no-repeat
+          background-position: left var(--left) top calc(100% + var(--top))
 
         img
           width: 100%
-          height: auto
+          height: 100% //auto
           position: absolute
-          object-fit: contain
-          bottom: 0
+          object-fit: cover
+          left: var(--left)
+          bottom: calc(var(--bottom) + 30px)
+          transition: bottom 1s
 
       .rightside
         display: flex
         align-items: flex-end
+        position: relative
+        z-index: 4
 
         .text
           padding-bottom: 137px
@@ -86,6 +105,7 @@
       &.next
         .leftside
           margin-bottom: auto
+          margin-top: 0
           .overlay
             top: 0
         .rightside

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass
index c259e5ae87eb4cb4345d042d7415222c7f4eb8ca..bc13eb8689c9689c58d65b45745361042b80955b 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/partials/responsive-navigation.sass
@@ -11,6 +11,7 @@
     padding-top: 126px
     transform: translateX(-100%)
     transition: all .3s
+    overflow-y: auto
     #menu-menu
       flex-direction: column
       padding: 0

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
index 002db7cb1a0e831a38a25482a30a1db7bd613960..c36c17136863a066932d41a2d90ced7d8a6d7f02 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/blockText.sass
@@ -5,13 +5,13 @@
         margin-bottom: var(--space-l-xl)
 
 .text-block
-  display: grid
-  +special-gap(0)
   +screen-size(small-desktop)
+    display: grid
     grid-template-columns: repeat(12, 1fr)
     //grid-template-rows: 1fr auto auto 1fr
     align-items: center
     height: fit-content
+    +special-gap(0)
   &-title,
   &-subtitle
     margin-bottom: 21px
@@ -54,3 +54,28 @@
 
   &-subtitle
     font-size: 20px
+
+  &-body
+    h2
+      width: max-content
+      margin-top: var(--space-36-86)
+      color: map-get($colors, 'red','full') !important
+      position: relative
+      margin-bottom: 23px
+      font-size: 1.653rem
+      line-height: 1
+      font-weight: map-get($fontWeights, 'bold')
+      font-family: "Proxima Nova", Sans-serif
+      +screen-size(small-desktop)
+        font-size: map-get($fontSizes, 'lg')
+      &:after
+        content: ""
+        width: 100%
+        height: 38.8%
+        background-color: map-get($colors, 'red','transparent')
+        position: absolute
+        left: 0
+        bottom: 0
+
+    a
+      color: map-get($colors, 'grey', 'dark')

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass
index 097a587510b65c3e09c94c9903825f1ea64424ee..f1673a097251da3a69298ae5ed2712ef74ae993b 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/highlightTitle.sass
@@ -1,6 +1,9 @@
 .highlight
   width: max-content
   line-height: 1
+  +screen-size(phone, 'max')
+    &:not(.text-blockbtn-above-title)
+      font-size: 27px
   &-bar
     width: 100%
     height: 38.8%

diff --git a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass
index 9fda70c214d76f27ebe52861f00d713f0f7fa2e2..856a02440cec9d0e1710f22c81c2cb480ad30cc1 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass
+++ b/wp-content/themes/sycomore-fondation/resources/styles/widgets/stickyNav.sass
@@ -1,6 +1,6 @@
 .sticky-nav
-  display: grid
   +screen-size(small-desktop)
+    display: grid
     grid-template-columns: repeat(2, 1fr)
   .leftside
     width: 100%
@@ -17,6 +17,7 @@
             color: #DDDDDD
       h3
         margin-bottom: var(--space-m-l)
+        font-size: var(--step-7)
     img
       display: block
       margin-bottom: 18px

diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
index a81fa83d3f2494a65e7ef2ca712e716c0aac3c6f..1fab3ab9a82b5e8a39f94b731da27223ab561c2d 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/carousel-home.blade.php
@@ -7,8 +7,7 @@
       <div class="leftside">
         <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'] }}" />
+          <div class="thumbnail" style="background-image: url({{ $slide['image']['url'] }})">
           </div>
         @endif
       </div>
@@ -24,4 +23,7 @@
       </div>
     </div>
   @endforeach
+  <div class="counter">
+
+  </div>
 </div>

diff --git a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
index 3aaa56f4ea4574e1584ec4f887e09229e27254d0..eea1de073359203b061b090a7de08f9c4e7d79ab 100644 (file)
--- a/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
+++ b/wp-content/themes/sycomore-fondation/resources/views/widgets/text-image.blade.php
@@ -1,8 +1,10 @@
 <div class="text-block {{ $settings['gallery_position'] }}">
-  <p class="text-block-above-title highlight text-lg relative font-bold">
-    <span class='relative z-1'>{{ $settings['above_title'] }}</span>
-    <span class='highlight-bar'></span>
-  </p>
+  @if($settings['above_title'])
+    <p class="text-block-above-title highlight text-lg relative font-bold">
+      <span class='relative z-1'>{{ $settings['above_title'] }}</span>
+      <span class='highlight-bar'></span>
+    </p>
+  @endif
 
   <div class="text-block-image">
       <img class="" src="{{ $settings['image']['url'] }}" />