@simplybusiness/theme-simplybusiness 2.13.3 → 2.13.5

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @simplybusiness/theme-simplybusiness
 
+## 2.13.5
+
+### Patch Changes
+
+- 4e49c3e: Transition created for use by Showcase and Recommendation pages
+- Updated dependencies [2dc7a77]
+- Updated dependencies [58a910a]
+- Updated dependencies [f0072cc]
+- Updated dependencies [4e49c3e]
+- Updated dependencies [f9c5b86]
+- Updated dependencies [c83707a]
+  - @simplybusiness/mobius-journey@11.34.0
+  - @simplybusiness/mobius@6.10.0
+  - @simplybusiness/theme-core@7.14.15
+  - @simplybusiness/mobius-datepicker@7.3.12
+  - @simplybusiness/mobius-chatbot@2.2.12
+  - @simplybusiness/mobius-interventions@3.8.2
+
+## 2.13.4
+
+### Patch Changes
+
+- Updated dependencies [9468edc]
+- Updated dependencies [3acb336]
+- Updated dependencies [5d13dfe]
+  - @simplybusiness/mobius-journey@11.33.0
+  - @simplybusiness/mobius-interventions@3.8.1
+
 ## 2.13.3
 
 ### Patch Changes

package/dist/index.css

@@ -70,6 +70,34 @@ h6.mobius-accordion__link-text,
 .mobius-accordion__link-icon.--is-open{
     transform:rotateZ(-180deg);
   }
+.mobius-accordion-list{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+.mobius-accordion-list .mobius-accordion__link{
+    justify-content:space-between;
+    -webkit-text-decoration:none;
+    -webkit-text-decoration:none;
+    text-decoration:none;
+    --accordion-icon-margin:0;
+  }
+:is(.mobius-accordion-list .mobius-accordion__link):hover,:is(.mobius-accordion-list .mobius-accordion__link):active{
+      -webkit-text-decoration:none;
+      -webkit-text-decoration:none;
+      text-decoration:none;
+    }
+.mobius-accordion-list .mobius-accordion__link-text{
+    color:var(--color-text-medium);
+    font-size:var(--font-size-regular);
+    font-weight:var(--font-weight-semibold);
+  }
+.mobius-accordion-list .mobius-accordion__content{
+    color:var(--color-text-medium);
+    font-size:var(--font-size-regular);
+    font-weight:var(--font-weight-light);
+    line-height:var(--line-height-normal);
+  }
 .mobius-alert__icon{
   margin-right:var(--size-sm);
 }
@@ -2528,7 +2556,9 @@ svg:not(:host).svg-inline--mobius-icon{
   --font-size-4:20px;
   --font-size-5:24px;
   --font-size-6:32px;
+  --font-weight-light:400;
   --font-weight-normal:500;
+  --font-weight-semibold:600;
   --font-weight-bold:700;
   --line-height-normal:1.5;
   --line-height-tight:1.333;
@@ -4227,7 +4257,7 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-agreement-question{
   display:flex;
   flex-direction:column;
-  gap:var(--spacing-md);
+  gap:var(--size-md);
 }
 .mobius-agreement-question__text{
   color:var(--color-text-medium);
@@ -4243,18 +4273,6 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-agreement-question__text strong{
   color:var(--color-text);
 }
-.mobius-agreement-question__text p:last-child{
-  margin-bottom:0;
-}
-.mobius-agreement-question__text ul,
-.mobius-agreement-question__text ol{
-  margin:0 0 var(--spacing-sm) var(--spacing-md);
-  padding-left:var(--spacing-md);
-}
-.mobius-agreement-question__text ul:last-child,
-.mobius-agreement-question__text ol:last-child{
-  margin-bottom:0;
-}
 .mobius-question__annual-turnover-select.mobius-select__wrapper{
   margin-bottom:var(--size-lg);
 }
@@ -6485,15 +6503,25 @@ svg:not(:host).svg-inline--mobius-icon{
   transition:height 1s;
 }
 .questionnaire-page__container{
-  padding:0 10%;
   display:flex;
-  gap:20px;
+  max-width:var(--size-inner-container);
+  margin:auto;
+  gap:var(--size-md);
 }
 .questionnaire-page__questionnaire{
   padding:20px;
   flex:1;
   min-width:60%;
 }
+.questionnaire-page__questionnaire .mobius-actions{
+    max-width:100%;
+  }
+.questionnaire-page__questionnaire .mobius-actions__back{
+    font-weight:var(--font-weight-bold);
+    font-size:var(--font-size-4);
+    line-height:24px;
+    padding:var(--button-padding-md);
+  }
 .questionnaire-page__questionnaire .mobius-section__question-container{
   max-width:100%;
 }
@@ -6503,7 +6531,7 @@ svg:not(:host).svg-inline--mobius-icon{
   justify-content:center;
 }
 .questionnaire-page__coverage-summary{
-  margin-top:118px;
+  margin-top:142px;
   padding:20px;
   flex:2;
   min-width:30%;
@@ -6549,17 +6577,15 @@ svg:not(:host).svg-inline--mobius-icon{
 }
 .mobius-showcase-explore__subtitle{
   margin:0;
-  font-weight:600;
-  text-transform:uppercase;
-  color:var(--color-text-light);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list{
   margin:0;
   padding-left:var(--size-lg);
-  color:var(--color-text);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__list-item{
-  color:var(--color-text);
+  color:var(--color-text-medium);
 }
 .mobius-showcase-explore__form{
   margin-top:auto;
@@ -6640,6 +6666,253 @@ svg:not(:host).svg-inline--mobius-icon{
 .mobius-showcase__pricing .mobius-price-block__value{
   line-height:normal;
 }
+.mobius-tailoring-coverage-transition__modal{
+  background-color:transparent;
+}
+.mobius-tailoring-coverage-transition__modal::backdrop{
+    display:none;
+  }
+.mobius-tailoring-coverage-transition__fallback{
+  position:relative;
+  width:100%;
+  height:100%;
+  background-color:var(--color-azure-500);
+  animation-duration:300ms, 0s;
+  animation-timing-function:ease-in-out, ease-in-out;
+  animation-delay:1000ms, 1250ms;
+  animation-fill-mode:forwards, forwards;
+  animation-name:fadeOut, hideOverlay;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__fallback{
+    background-color:var(--color-azure-200);
+}
+  }
+.mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader{
+    position:absolute;
+    width:20px;
+    height:20px;
+    top:50%;
+    left:50%;
+    transform:translate(-50%, -50%);
+  }
+:is(.mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader)::before{
+      border:4px solid var(--color-bubblegum-500);
+      animation:1000ms infinite linear rotate;
+      clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+      content:"";
+      position:absolute;
+      box-sizing:border-box;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      border-radius:50%;
+    }
+.mobius-tailoring-coverage-transition__transition-icon{
+  display:block;
+  height:110px;
+  margin:0 auto;
+  width:110px;
+  animation-duration:3s;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:fadeIn;
+  rotate:-45deg;
+}
+.mobius-tailoring-coverage-transition__overlay{
+  position:relative;
+  width:100%;
+  height:100%;
+  animation-duration:500ms, 0s;
+  animation-delay:3300ms, 3800ms;
+  animation-timing-function:ease-in-out, ease-in-out;
+  animation-fill-mode:forwards, forwards;
+  animation-name:fadeOut, hideOverlay;
+}
+.mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader{
+    width:110px;
+    height:110px;
+    rotate:45deg;
+  }
+:is(.mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader)::before{
+      border:10px solid var(--color-bubblegum-500);
+      animation-duration:2s;
+      animation-timing-function:linear;
+      animation-fill-mode:forwards;
+      animation-name:prixClipFix;
+      clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+      content:"";
+      position:absolute;
+      box-sizing:border-box;
+      top:0;
+      right:0;
+      bottom:0;
+      left:0;
+      border-radius:50%;
+    }
+.mobius-tailoring-coverage-transition__transition{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  background-color:var(--color-azure-500);
+  animation-duration:800ms;
+  animation-delay:2800ms;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:fadeInPinkMobile;
+  height:100%;
+  box-sizing:border-box;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__transition{
+    background-color:var(--color-azure-200);
+    animation-name:fadeInPinkDesktop;
+}
+  }
+.mobius-tailoring-coverage-transition__content{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  gap:20px;
+  animation-duration:650ms;
+  animation-delay:2800ms;
+  animation-timing-function:ease-in-out;
+  animation-fill-mode:forwards;
+  animation-name:moveUp;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__content{
+    gap:30px;
+}
+  }
+.mobius-tailoring-coverage-transition__art--mobile{
+  display:block;
+}
+.mobius-tailoring-coverage-transition__art--desktop{
+  display:none;
+}
+@media screen and (min-width: 671px){
+  .mobius-tailoring-coverage-transition__art--mobile{
+    display:none;
+  }
+  .mobius-tailoring-coverage-transition__art--desktop{
+    display:block;
+  }
+}
+.mobius-tailoring-coverage-transition__trade-image{
+  max-width:220px;
+  width:70vw;
+}
+@media screen and (min-width: 671px){
+.mobius-tailoring-coverage-transition__trade-image{
+    max-width:260px;
+    width:30vw;
+}
+  }
+@media (max-height: 600px){
+.mobius-tailoring-coverage-transition__trade-image{
+    display:none;
+}
+  }
+@media screen and (prefers-reduced-motion: reduce){
+  .mobius-tailoring-coverage-transition__fallback .mobius-tailoring-coverage-transition__loader::before{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__transition-icon{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__overlay .mobius-tailoring-coverage-transition__loader::before{
+    animation:none;
+  }
+
+  .mobius-tailoring-coverage-transition__content{
+    animation-name:none;
+  }
+}
+@keyframes fadeInPinkDesktop{
+  0%{
+    background-color:var(--color-azure-200);
+  }
+
+  100%{
+    background-color:var(--color-bubblegum-500);
+  }
+}
+@keyframes fadeInPinkMobile{
+  0%{
+    background-color:var(--color-azure-500);
+  }
+
+  100%{
+    background-color:var(--color-bubblegum-500);
+  }
+}
+@keyframes rotate{
+  100%{
+    transform:rotate(360deg);
+  }
+}
+@keyframes fadeIn{
+  0%{
+    opacity:0;
+  }
+
+  66%{
+    opacity:0;
+  }
+
+  100%{
+    opacity:1;
+  }
+}
+@keyframes moveUp{
+  0%{
+    transform:translateY(0);
+  }
+
+  100%{
+    transform:translateY(-100%);
+  }
+}
+@keyframes fadeOut{
+  0%{
+    opacity:1;
+  }
+
+  100%{
+    opacity:0;
+  }
+}
+@keyframes hideOverlay{
+  0%{
+    left:0;
+  }
+
+  100%{
+    left:-100%;
+  }
+}
+@keyframes prixClipFix{
+  0%{
+    clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+  }
+  25%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+  }
+  50%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+  }
+  75%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+  }
+  100%{
+    clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+  }
+}
 .mobius-showcase__layout{
   flex-direction:column;
   width:100%;
@@ -7480,7 +7753,7 @@ input[type="date"]::-webkit-datetime-edit-year-field{
 #priceNudgeIntervention .mobius-modal__content{
   margin:0;
 }
-.mobius-interventions__pricing-nudge>.mobius-flex{
+.mobius-interventions__pricing-nudge > .mobius-flex{
   gap:0;
 }
 .mobius-interventions__pricing-nudge-text{
@@ -7489,6 +7762,12 @@ input[type="date"]::-webkit-datetime-edit-year-field{
   text-align:center;
   text-wrap-style:auto;
 }
+.mobius-interventions__pricing-nudge-text-large{
+  font-size:36px;
+  margin:24px 0;
+  text-align:center;
+  text-wrap-style:auto;
+}
 .mobius-interventions__pricing-nudge-subtext{
   font-size:18px;
   margin:0 0 32px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplybusiness/theme-simplybusiness",
-  "version": "2.13.3",
+  "version": "2.13.5",
   "main": "dist/index.css",
   "simplyBusiness": {
     "publishToPublicNpm": true
@@ -28,12 +28,12 @@
     "./fonts": "./dist/fonts.css"
   },
   "dependencies": {
-    "@simplybusiness/mobius": "^6.9.10",
-    "@simplybusiness/mobius-chatbot": "^2.2.11",
-    "@simplybusiness/mobius-datepicker": "^7.3.11",
-    "@simplybusiness/mobius-interventions": "^3.8.0",
-    "@simplybusiness/mobius-journey": "^11.32.0",
-    "@simplybusiness/theme-core": "^7.14.14"
+    "@simplybusiness/mobius": "^6.10.0",
+    "@simplybusiness/mobius-chatbot": "^2.2.12",
+    "@simplybusiness/mobius-datepicker": "^7.3.12",
+    "@simplybusiness/mobius-interventions": "^3.8.2",
+    "@simplybusiness/mobius-journey": "^11.34.0",
+    "@simplybusiness/theme-core": "^7.14.15"
   },
   "devDependencies": {
     "build-scripts": "^1.1.0",