Refine lookbook block styling

Author: CySSoO

views/css/everblock.css

@@ -25,31 +25,112 @@
 }
 /* Lookbook product markers */
 .lookbook-marker {
-    width: 2rem;
-    height: 2rem;
+    position: relative;
+    width: 2.75rem;
+    height: 2.75rem;
     border-radius: 50%;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    background-color: #fff;
+    border: 3px solid #f25b76;
+    box-shadow: 0 12px 24px rgba(242, 91, 118, 0.25);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.lookbook-marker::after {
+    content: "";
+    display: block;
+    width: 0.9rem;
+    height: 0.9rem;
+    border-radius: 50%;
+    background-color: #f25b76;
 }
+
+.lookbook-marker:focus,
+.lookbook-marker:hover {
+    transform: scale(1.05);
+    box-shadow: 0 16px 32px rgba(242, 91, 118, 0.35);
+}
+
 .prettyblock-lookbook {
     width: 100%;
     display: grid;
-    gap: 1rem;
+    gap: 1.5rem;
+    align-items: start;
 }
+
 .prettyblock-lookbook.columns-2 {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+
 .prettyblock-lookbook.columns-3 {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.prettyblock-lookbook .lookbook-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.prettyblock-lookbook .lookbook-item--main {
+    padding: 0 1.5rem;
+}
+
+.lookbook-main-wrapper {
+    max-width: 640px;
+    margin: 0 auto;
+}
+
+.lookbook-helper {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 999px;
+    background-color: #fff;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+    font-size: 0.95rem;
+    color: #3a3a3a;
+}
+
+.lookbook-helper-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(242, 91, 118, 0.12), rgba(242, 91, 118, 0.25));
+    color: #f25b76;
+}
+
+.lookbook-helper-svg {
+    display: block;
+}
+
+.lookbook-helper-text {
+    font-weight: 600;
 }
+
 @media (max-width: 767.98px) {
     .prettyblock-lookbook.columns-2,
     .prettyblock-lookbook.columns-3 {
         grid-template-columns: 1fr;
     }
 }
+
+@media (min-width: 992px) {
+    .prettyblock-lookbook {
+        gap: 0;
+    }
+
+    .prettyblock-lookbook .lookbook-item--main {
+        padding: 0 3rem;
+    }
+}
 /* Style pour le panier déroulant */
 .ever-shopping-cart .dropdown-menu.cart-dropdown-content {
     padding: 15px;

views/templates/hook/prettyblocks/prettyblock_lookbook.tpl

@@ -24,10 +24,10 @@
 
 {assign var=columns value=$block.settings.columns|default:'1'}
 <div class="prettyblock-lookbook columns-{$columns}{$prettyblock_visibility_class}"{if $prettyblock_lookbook_wrapper_style} style="{$prettyblock_lookbook_wrapper_style}"{/if}>
-  <div class="lookbook-item">
+  <div class="lookbook-item lookbook-item--before">
     {prettyblocks_zone zone_name="block-lookbook-{$block.id_prettyblocks}-before"}
   </div>
-  <div class="lookbook-item">
+  <div class="lookbook-item lookbook-item--main">
     {capture name='prettyblock_lookbook_inner_style'}
       {if isset($block.settings.default.bg_color) && $block.settings.default.bg_color}
         background-color:{$block.settings.default.bg_color|escape:'htmlall':'UTF-8'};
@@ -41,7 +41,7 @@
         <div class="row">
       {/if}
 
-      <div class="{if $block.settings.default.container|default:false}container{/if} text-center">
+      <div class="{if $block.settings.default.container|default:false}container{/if} text-center lookbook-main-wrapper">
         {if $block.settings.title}
           <h2 class="mb-3">{$block.settings.title|escape:'htmlall':'UTF-8'}</h2>
         {/if}
@@ -59,8 +59,13 @@
             {/foreach}
           {/if}
         </div>
-        <div class="mt-3">
-          <small class="text-muted">{l s='Cliquez sur un point pour voir le produit' mod='everblock'}</small>
+        <div class="lookbook-helper" role="note">
+          <span class="lookbook-helper-icon" aria-hidden="true">
+            <svg class="lookbook-helper-svg" width="20" height="20" viewBox="0 0 20 20" focusable="false" aria-hidden="true">
+              <path d="M5 2.5a1 1 0 0 0-1 1v10.042a1 1 0 0 0 1.707.707l2.586-2.586 2.48 4.96a1 1 0 0 0 1.342.447l1.856-.928a1 1 0 0 0 .447-1.342l-2.48-4.96 3.293.658A1 1 0 0 0 16 8.52V3.5a1 1 0 0 0-1-1H5z" fill="currentColor"/>
+            </svg>
+          </span>
+          <span class="lookbook-helper-text">{l s='Cliquez sur un point pour voir le produit' mod='everblock'}</span>
         </div>
       </div>
 
@@ -69,7 +74,7 @@
       {/if}
     </div>
   </div>
-  <div class="lookbook-item">
+  <div class="lookbook-item lookbook-item--after">
     {prettyblocks_zone zone_name="block-lookbook-{$block.id_prettyblocks}-after"}
   </div>
 </div>