@asante-org/atlascopco-vt-litesitegenerator 1.6.28 → 1.6.31

package/dist/index.esm.scss

@@ -218,6 +218,34 @@
   --lsg-video-divider-color: var(--lsg-color-primary);
   --lsg-video-divider-width: 1px;
   --lsg-video-transition: 300ms ease;
+  --lsg-image-max-width: 960px;
+  --lsg-image-height: 600px;
+  --lsg-image-bg: var(--lsg-color-light, #eeeeee);
+  --lsg-image-tags-inset: 24px;
+  --lsg-image-tags-max-width-desktop: 419px;
+  --lsg-image-tags-max-width-mobile: 290px;
+  --lsg-image-tag-gap: 10px;
+  --lsg-image-tag-height: 54px;
+  --lsg-image-tag-padding-x: 16px;
+  --lsg-image-tag-radius: var(--lsg-theme-radius);
+  --lsg-image-tag-bg: rgba(238, 238, 238, 0.10);
+  --lsg-image-tag-bg-hover: rgba(238, 238, 238, 0.20);
+  --lsg-image-tag-border: rgba(255, 255, 255, 0.2);
+  --lsg-image-tag-blur: 8px;
+  --lsg-image-tag-color: var(--lsg-color-primary);
+  --lsg-image-tag-font-size: 1.125rem;
+  --lsg-image-link-overlay-bg: rgba(0, 0, 0, 0.08);
+  --lsg-image-caption-bg: var(--lsg-color-white);
+  --lsg-image-caption-height: 81px;
+  --lsg-image-caption-height-hover: 116px;
+  --lsg-image-caption-padding-x: 24px;
+  --lsg-image-caption-padding-y: 12px;
+  --lsg-image-title-color: var(--lsg-color-black, #090909);
+  --lsg-image-title-font-size: 1.3125rem;
+  --lsg-image-text-font-size: 1.125rem;
+  --lsg-image-divider-color: var(--lsg-color-primary);
+  --lsg-image-divider-width: 1px;
+  --lsg-image-transition: 300ms ease;
 }
 
 .lsg-button {
@@ -1934,6 +1962,162 @@
   }
 }
 
+.lsg-image {
+  position: relative;
+  width: 100%;
+  max-width: var(--lsg-image-max-width);
+  margin-inline: auto;
+  font-family: var(--lsg-font-family-primary);
+  border-radius: var(--lsg-image-container-radius, 0);
+  overflow: var(--lsg-image-container-overflow, visible);
+}
+.lsg-image--full-width {
+  max-width: none;
+}
+.lsg-image__media {
+  position: relative;
+  width: 100%;
+  height: var(--lsg-image-height);
+  overflow: var(--lsg-image-media-overflow, hidden);
+  background: var(--lsg-image-bg);
+  border: var(--lsg-image-media-border, none);
+  box-sizing: border-box;
+}
+.lsg-image--parallax .lsg-image__media {
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+}
+@media (max-width: 767px) {
+  .lsg-image--parallax .lsg-image__media {
+    background-attachment: scroll;
+  }
+}
+.lsg-image__picture {
+  position: absolute;
+  inset: 0;
+}
+.lsg-image__img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.lsg-image__link {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lsg-color-primary);
+  cursor: pointer;
+  text-decoration: none;
+  z-index: 2;
+}
+.lsg-image__link:focus-visible {
+  outline: 2px solid var(--lsg-color-primary);
+  outline-offset: -2px;
+}
+.lsg-image__overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--lsg-image-link-overlay-bg);
+  opacity: 0;
+  transition: opacity var(--lsg-image-transition);
+  pointer-events: none;
+  z-index: 1;
+}
+@media (min-width: 768px) {
+  .lsg-image__link:hover + .lsg-image__overlay, .lsg-image__link:focus-visible + .lsg-image__overlay {
+    opacity: 1;
+  }
+}
+.lsg-image__tags {
+  position: absolute;
+  left: var(--lsg-image-tags-inset);
+  top: var(--lsg-image-tags-position-top, auto);
+  bottom: var(--lsg-image-tags-position-bottom, var(--lsg-image-tags-inset));
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--lsg-image-tag-gap);
+  max-width: var(--lsg-image-tags-max-width-mobile);
+  z-index: 3;
+}
+.lsg-image__tag {
+  height: var(--lsg-image-tag-height);
+  padding: 0 var(--lsg-image-tag-padding-x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--lsg-image-tag-radius, var(--lsg-theme-radius, 0));
+  background-color: var(--lsg-image-tag-bg);
+  backdrop-filter: blur(var(--lsg-image-tag-blur, 0px));
+  -webkit-backdrop-filter: blur(var(--lsg-image-tag-blur, 0px));
+  border: var(--lsg-image-tag-border-width, 1px) var(--lsg-image-tag-border-style, solid) var(--lsg-image-tag-border);
+  font-size: var(--lsg-image-tag-font-size);
+  font-weight: var(--lsg-font-weight-semibold, 600);
+  color: var(--lsg-image-tag-color);
+  white-space: nowrap;
+  transition: background-color var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__tag, .lsg-image:focus-within .lsg-image__tag {
+  background-color: var(--lsg-image-tag-bg-hover);
+}
+.lsg-image__caption {
+  position: var(--lsg-image-caption-position, relative);
+  top: var(--lsg-image-caption-top, auto);
+  bottom: var(--lsg-image-caption-bottom, auto);
+  left: 0;
+  right: 0;
+  z-index: 2;
+  width: 100%;
+  height: var(--lsg-image-caption-height);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: var(--lsg-image-caption-padding-y) var(--lsg-image-caption-padding-x);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--lsg-image-caption-bg);
+  border-top: var(--lsg-image-divider-width) solid var(--lsg-image-divider-color);
+  transition: height var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__caption, .lsg-image:focus-within .lsg-image__caption {
+  height: var(--lsg-image-caption-height-hover);
+}
+.lsg-image__title {
+  font-size: var(--lsg-image-title-font-size);
+  font-weight: var(--lsg-font-weight-semibold, 600);
+  line-height: 1.2;
+  color: var(--lsg-image-title-color);
+  margin: 0;
+}
+.lsg-image__text {
+  font-size: var(--lsg-image-text-font-size);
+  font-weight: var(--lsg-font-weight-regular, 400);
+  line-height: 1.4;
+  color: var(--lsg-image-text-color, var(--lsg-color-black, #090909));
+  margin: 4px 0 0;
+  opacity: 0;
+  transition: opacity var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__text, .lsg-image:focus-within .lsg-image__text {
+  opacity: 1;
+}
+@media (min-width: 768px) {
+  .lsg-image__tags {
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: var(--lsg-image-tags-max-width-desktop);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lsg-image__caption, .lsg-image__tag, .lsg-image__text, .lsg-image__overlay {
+    transition: none;
+  }
+}
+
 .cmp-container {
   width: 100%;
 }
@@ -4775,4 +4959,226 @@
   .lsg-accordion__title {
     padding-left: var(--lsg-accordion-icon-gap);
   }
+}
+:root {
+  --atlascopco-blue-1: #f5fbfc;
+  --atlascopco-blue-3: #b8e0ec;
+  --atlascopco-blue-5: #7ac6dc;
+  --atlascopco-blue-7: #3daccc;
+  --atlascopco-blue-9: #0092bc;
+  --atlascopco-blue-11: #006f8f;
+  --atlascopco-gray-1: #f8f9f9;
+  --atlascopco-gray-3: #d1d4d7;
+  --atlascopco-gray-5: #aab0b5;
+  --atlascopco-gray-7: #828b92;
+  --atlascopco-gray-9: #5b6770;
+  --atlascopco-gray-11: #2f363a;
+  --atlascopco-beige-1: #f5f2ef;
+  --atlascopco-beige-2: #efebe6;
+  --atlascopco-beige-3: #e7e0da;
+  --atlascopco-beige-4: #dfd6ce;
+  --atlascopco-blue: #0092bc;
+  --atlascopco-blue-dark: #006f8f;
+  --atlascopco-black: #000000;
+  --atlascopco-white: #ffffff;
+  --atlascopco-gradient-blue: linear-gradient(135deg, #0092bc 0%, #006f8f 100%);
+  --atlascopco-gradient-gray: linear-gradient(135deg, #f8f9f9 0%, #aab0b5 100%);
+  --atlascopco-gradient-beige: linear-gradient(135deg, #f5f2ef 0%, #e7e0da 100%);
+  --atlascopco-gradient-dark: linear-gradient(135deg, #5b6770 0%, #2f363a 100%);
+  --atlascopco-grey-100: #f8f9f9;
+  --atlascopco-grey-200: #d1d4d7;
+  --atlascopco-grey-300: #aab0b5;
+  --atlascopco-grey-400: #828b92;
+  --atlascopco-grey-500: #5b6770;
+  --atlascopco-grey-600: #2f363a;
+  --color-primary: #0092bc;
+  --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
+  --spacing-zero: 0px;
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 36px;
+  --spacing-xxl: 48px;
+  --spacing-3xl: 72px;
+  --spacing-4xl: 96px;
+  --h1-mobile-size: 32px;
+  --h1-mobile-line-height: 1.2;
+  --h2-mobile-size: 24px;
+  --h2-mobile-line-height: 1.2;
+  --h3-mobile-size: 18px;
+  --h3-mobile-line-height: 1.6;
+  --body-mobile-size: 14px;
+  --body-mobile-line-height: 1.5;
+  --h1-desktop-size: 55px;
+  --h1-desktop-line-height: 1.15;
+  --h2-desktop-size: 40px;
+  --h2-desktop-line-height: 1.2;
+  --h3-desktop-size: 32px;
+  --h3-desktop-line-height: 1.2;
+  --body-desktop-size: 18px;
+  --body-desktop-line-height: 1.6;
+  --text-lg-size: 27px;
+  --text-lg-line-height: 1.4;
+  --text-xl-size: 36px;
+  --text-xl-line-height: 1.4;
+  --text-xxl-size: 64px;
+  --text-xxl-line-height: 1;
+}
+
+.lsg-image {
+  position: relative;
+  width: 100%;
+  max-width: var(--lsg-image-max-width);
+  margin-inline: auto;
+  font-family: var(--lsg-font-family-primary);
+  border-radius: var(--lsg-image-container-radius, 0);
+  overflow: var(--lsg-image-container-overflow, visible);
+}
+.lsg-image--full-width {
+  max-width: none;
+}
+.lsg-image__media {
+  position: relative;
+  width: 100%;
+  height: var(--lsg-image-height);
+  overflow: var(--lsg-image-media-overflow, hidden);
+  background: var(--lsg-image-bg);
+  border: var(--lsg-image-media-border, none);
+  box-sizing: border-box;
+}
+.lsg-image--parallax .lsg-image__media {
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+}
+@media (max-width: 767px) {
+  .lsg-image--parallax .lsg-image__media {
+    background-attachment: scroll;
+  }
+}
+.lsg-image__picture {
+  position: absolute;
+  inset: 0;
+}
+.lsg-image__img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  display: block;
+}
+.lsg-image__link {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--lsg-color-primary);
+  cursor: pointer;
+  text-decoration: none;
+  z-index: 2;
+}
+.lsg-image__link:focus-visible {
+  outline: 2px solid var(--lsg-color-primary);
+  outline-offset: -2px;
+}
+.lsg-image__overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--lsg-image-link-overlay-bg);
+  opacity: 0;
+  transition: opacity var(--lsg-image-transition);
+  pointer-events: none;
+  z-index: 1;
+}
+@media (min-width: 768px) {
+  .lsg-image__link:hover + .lsg-image__overlay, .lsg-image__link:focus-visible + .lsg-image__overlay {
+    opacity: 1;
+  }
+}
+.lsg-image__tags {
+  position: absolute;
+  left: var(--lsg-image-tags-inset);
+  top: var(--lsg-image-tags-position-top, auto);
+  bottom: var(--lsg-image-tags-position-bottom, var(--lsg-image-tags-inset));
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--lsg-image-tag-gap);
+  max-width: var(--lsg-image-tags-max-width-mobile);
+  z-index: 3;
+}
+.lsg-image__tag {
+  height: var(--lsg-image-tag-height);
+  padding: 0 var(--lsg-image-tag-padding-x);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--lsg-image-tag-radius, var(--lsg-theme-radius, 0));
+  background-color: var(--lsg-image-tag-bg);
+  backdrop-filter: blur(var(--lsg-image-tag-blur, 0px));
+  -webkit-backdrop-filter: blur(var(--lsg-image-tag-blur, 0px));
+  border: var(--lsg-image-tag-border-width, 1px) var(--lsg-image-tag-border-style, solid) var(--lsg-image-tag-border);
+  font-size: var(--lsg-image-tag-font-size);
+  font-weight: var(--lsg-font-weight-semibold, 600);
+  color: var(--lsg-image-tag-color);
+  white-space: nowrap;
+  transition: background-color var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__tag, .lsg-image:focus-within .lsg-image__tag {
+  background-color: var(--lsg-image-tag-bg-hover);
+}
+.lsg-image__caption {
+  position: var(--lsg-image-caption-position, relative);
+  top: var(--lsg-image-caption-top, auto);
+  bottom: var(--lsg-image-caption-bottom, auto);
+  left: 0;
+  right: 0;
+  z-index: 2;
+  width: 100%;
+  height: var(--lsg-image-caption-height);
+  overflow: hidden;
+  box-sizing: border-box;
+  padding: var(--lsg-image-caption-padding-y) var(--lsg-image-caption-padding-x);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: var(--lsg-image-caption-bg);
+  border-top: var(--lsg-image-divider-width) solid var(--lsg-image-divider-color);
+  transition: height var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__caption, .lsg-image:focus-within .lsg-image__caption {
+  height: var(--lsg-image-caption-height-hover);
+}
+.lsg-image__title {
+  font-size: var(--lsg-image-title-font-size);
+  font-weight: var(--lsg-font-weight-semibold, 600);
+  line-height: 1.2;
+  color: var(--lsg-image-title-color);
+  margin: 0;
+}
+.lsg-image__text {
+  font-size: var(--lsg-image-text-font-size);
+  font-weight: var(--lsg-font-weight-regular, 400);
+  line-height: 1.4;
+  color: var(--lsg-image-text-color, var(--lsg-color-black, #090909));
+  margin: 4px 0 0;
+  opacity: 0;
+  transition: opacity var(--lsg-image-transition);
+}
+.lsg-image:hover .lsg-image__text, .lsg-image:focus-within .lsg-image__text {
+  opacity: 1;
+}
+@media (min-width: 768px) {
+  .lsg-image__tags {
+    display: flex;
+    flex-wrap: nowrap;
+    max-width: var(--lsg-image-tags-max-width-desktop);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .lsg-image__caption, .lsg-image__tag, .lsg-image__text, .lsg-image__overlay {
+    transition: none;
+  }
 }