@ptcwebops/ptcw-design 6.4.19-beta → 6.4.21-beta

package/dist/collection/components/ptc-card/ptc-card.css

@@ -572,7 +572,6 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card) ::slotted([slot=slot-date]) {
@@ -592,7 +591,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 
@@ -688,7 +686,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 @media only screen and (min-width: 1200px) {
@@ -734,7 +731,6 @@ ptc-footer {
   margin-bottom: 8px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 @media (min-width: 768px) {
@@ -763,7 +759,6 @@ ptc-footer {
     margin-bottom: 8px;
     margin-top: 0rem;
     word-break: break-word;
-    -webkit-hyphens: auto;
     hyphens: auto;
   }
 }
@@ -778,7 +773,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.listing-card-horizontal) ::slotted([slot=slot-description]) p {
@@ -942,8 +936,7 @@ ptc-footer {
   margin-bottom: 12px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: manual;
-          hyphens: manual;
+  hyphens: manual;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
@@ -954,7 +947,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) p {
@@ -966,7 +958,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-bottom: 39px;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.resource-center-card) ::slotted([slot=slot-description]) span {
@@ -1189,7 +1180,6 @@ ptc-footer {
   width: fit-content;
   clip-path: inset(-6px -6px -6px 0px);
   word-break: break-word;
-  -webkit-hyphens: manual;
   hyphens: manual;
 }
 :host(.related-card) .link-wrapper {
@@ -1282,7 +1272,6 @@ ptc-footer {
   display: inline-block;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) .card-body .small {
@@ -1303,7 +1292,6 @@ ptc-footer {
   margin-bottom: 14px;
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.related-card) ::slotted([slot=slot-description]) {
@@ -1407,7 +1395,6 @@ ptc-footer {
   color: var(--color-gray-11);
   margin-top: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
   margin-bottom: 0rem;
 }
@@ -1428,7 +1415,6 @@ ptc-footer {
   margin-top: 0rem;
   margin-block-start: 0rem;
   word-break: break-word;
-  -webkit-hyphens: auto;
   hyphens: auto;
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-description]) p {

package/dist/collection/components/ptc-card-content/ptc-card-content.css

@@ -409,16 +409,40 @@ ptc-footer {
 }
 
 :host(.card-on-demand-video) .ptc-card-content-wrapper::before {
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-sizing: border-box;
 }
 :host(.card-on-demand-video) .ptc-card-content-wrapper::after {
+  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="46" height="48" viewBox="0 0 46 48" fill="none"><g filter="url(%23filter0_d_2245_7)"><path d="M38 20L8 36V4L38 20Z" fill="white"/></g><defs><filter id="filter0_d_2245_7" x="0" y="0" width="46" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.24 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2245_7"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2245_7" result="shape"/></filter></defs></svg>');
   opacity: 1;
+  left: 0;
+  right: 0;
+  top: 8px;
+  bottom: 0;
+  transform: translate(0%) scale(1);
+  width: 100%;
+  height: 100%;
+  transform: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 
 :host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::before {
   background: transparent;
 }
+:host(.card-on-demand-video.mouse-hover) .ptc-card-content-wrapper::after {
+  transform: translate(0%) scale(1.07);
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout), transform var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
 
 :host(.card-on-demand-video:active) .ptc-card-content-wrapper::before {
   background: rgba(0, 0, 0, 0.12);
+}
+
+:host(.card-on-demand-video.dark) .ptc-card-content-wrapper::before {
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-sizing: border-box;
 }

package/dist/collection/components/ptc-card-content/ptc-card-content.js

@@ -5,6 +5,7 @@ export class PtcCardContent {
     this.outlineColor = undefined;
     this.styles = undefined;
     this.isLoading = false;
+    this.cardOnDemandVideoTheme = "light";
   }
   hoverEventHandler() {
     if (!this.el.classList.contains("speed-bump") &&
@@ -67,6 +68,9 @@ export class PtcCardContent {
     return {
       [this.cardType]: !!this.cardType ? true : false,
       [this.outlineColor]: !!this.outlineColor ? true : false,
+      [this.cardOnDemandVideoTheme]: !!this.cardOnDemandVideoTheme
+        ? true
+        : false,
     };
   }
   static get is() { return "ptc-card-content"; }
@@ -151,6 +155,24 @@ export class PtcCardContent {
         "attribute": "is-loading",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "cardOnDemandVideoTheme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"light\" | \"dark\"",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-on-demand-video-theme",
+        "reflect": false,
+        "defaultValue": "\"light\""
       }
     };
   }

package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js

@@ -26,6 +26,14 @@ export class PtcCardPlm {
       const cardOverlay = this.el.querySelector("ptc-overlay");
       cardOverlay.setOverlay("black-5");
     }
+    // Only toggle mouse-hover on nested ptc-card-content for on-demand video cards
+    const cardContent = this.el.querySelector("ptc-card-content");
+    if (cardContent) {
+      const contentClasses = cardContent.classList;
+      if (contentClasses.contains("card-on-demand-video")) {
+        contentClasses.add("mouse-hover");
+      }
+    }
   }
   leaveEventHandler() {
     if (this.el.classList.contains("extra-tall")) {
@@ -37,6 +45,14 @@ export class PtcCardPlm {
       const cardOverlay = this.el.querySelector("ptc-overlay");
       cardOverlay.setOverlay("black-4");
     }
+    // Remove hover state only for on-demand video card content
+    const cardContent = this.el.querySelector("ptc-card-content");
+    if (cardContent) {
+      const contentClasses = cardContent.classList;
+      if (contentClasses.contains("card-on-demand-video")) {
+        contentClasses.remove("mouse-hover");
+      }
+    }
   }
   componentDidLoad() {
     this.checkScreenSize();

package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

package/dist/collection/components/ptc-filter-dropdown/ptc-filter-dropdown.css

@@ -194,7 +194,6 @@ ptc-footer {
   display: flex;
   align-items: baseline;
   word-break: break-word;
-  -webkit-hyphens: manual;
   hyphens: manual;
 }
 :host .radio-label input {

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -252,8 +252,7 @@ ptc-footer {
   border-radius: 4px 4px 0px 0px;
   border-bottom: 2px solid var(--color-blue-07);
   background: transparent;
-  -webkit-backdrop-filter: blur(12px);
-          backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
   padding: 24px;
   word-wrap: normal;
   color: var(--color-white);

package/dist/collection/components/ptc-icon-component/ptc-icon-component.css

@@ -83,7 +83,8 @@ swiper-slide {
 }
 .swiper-backface-hidden .swiper-slide {
   transform: translateZ(0);
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 /* 3D Effects */
 .swiper-3d.swiper-css-mode .swiper-wrapper {
@@ -390,8 +391,7 @@ button.swiper-pagination-bullet {
   padding: 0;
   box-shadow: none;
   -webkit-appearance: none;
-          -moz-appearance: none;
-       appearance: none;
+          appearance: none;
 }
 .swiper-pagination-clickable .swiper-pagination-bullet {
   cursor: pointer;
@@ -559,8 +559,7 @@ button.swiper-pagination-bullet {
 .swiper-zoom-container > canvas {
   max-width: 100%;
   max-height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
 }
 .swiper-slide-zoomed {
   cursor: move;
@@ -606,7 +605,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cube .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
   visibility: hidden;
   transform-origin: 0 0;
@@ -635,7 +635,8 @@ swiper-container .swiper-notification {
 .swiper-cube .swiper-slide-shadow-left,
 .swiper-cube .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-cube .swiper-cube-shadow {
   position: absolute;
@@ -661,7 +662,8 @@ swiper-container .swiper-notification {
 }
 .swiper-flip .swiper-slide {
   pointer-events: none;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   z-index: 1;
 }
 .swiper-flip .swiper-slide .swiper-slide {
@@ -676,10 +678,12 @@ swiper-container .swiper-notification {
 .swiper-flip .swiper-slide-shadow-left,
 .swiper-flip .swiper-slide-shadow-right {
   z-index: 0;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
 }
 .swiper-creative .swiper-slide {
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
   transition-property: transform, opacity, height;
 }
@@ -688,7 +692,8 @@ swiper-container .swiper-notification {
 }
 .swiper-cards .swiper-slide {
   transform-origin: center bottom;
-  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
   overflow: hidden;
 }
 

package/dist/collection/components/ptc-image-download-strip/ptc-image-download-strip.css

@@ -66,8 +66,7 @@ ptc-footer {
 :host .strip {
   position: absolute;
   bottom: 0;
-  -webkit-backdrop-filter: blur(15.2px);
-          backdrop-filter: blur(15.2px);
+  backdrop-filter: blur(15.2px);
   background: white;
   background: rgba(255, 255, 255, 0.3);
   width: 100%;

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -206,15 +206,13 @@ ptc-footer {
   line-height: 24px;
   text-align: left;
   word-break: break-word;
-  -webkit-hyphens: auto;
-          hyphens: auto;
+  hyphens: auto;
   margin-bottom: 2px;
 }
 @media only screen and (min-width: 1200px) {
   :host(.media-card) .nav-card-wrap .media-card-wrap h4 {
     font-size: 12px;
-    -webkit-hyphens: auto;
-            hyphens: auto;
+    hyphens: auto;
     line-height: 18px;
     text-align: left;
     margin-bottom: 2px;
@@ -228,7 +226,6 @@ ptc-footer {
   font-stretch: normal;
   font-style: normal;
   font-weight: 400;
-  -webkit-hyphens: auto;
   hyphens: auto;
   letter-spacing: normal;
   line-height: 21px;

package/dist/collection/components/ptc-seo-title/ptc-seo-title.js

@@ -191,7 +191,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"margin-flush\"\r\n\t\t| \"margin-top-3\"\r\n\t\t| \"margin-top-4\"\r\n\t\t| \"margin-top-5\"\r\n\t\t| \"margin-top-6\"\r\n\t\t| \"margin-bottom-3\"\r\n\t\t| \"margin-bottom-4\"\r\n\t\t| \"margin-bottom-5\"\r\n\t\t| \"margin-bottom-6\"\r\n\t\t| \"margin-3\"\r\n\t\t| \"margin-4\"\r\n\t\t| \"margin-5\"\r\n\t\t| \"margin-6\"\r\n\t\t| \"margin-9\"",
+          "original": "| \"margin-flush\"\n\t\t| \"margin-top-3\"\n\t\t| \"margin-top-4\"\n\t\t| \"margin-top-5\"\n\t\t| \"margin-top-6\"\n\t\t| \"margin-bottom-3\"\n\t\t| \"margin-bottom-4\"\n\t\t| \"margin-bottom-5\"\n\t\t| \"margin-bottom-6\"\n\t\t| \"margin-3\"\n\t\t| \"margin-4\"\n\t\t| \"margin-5\"\n\t\t| \"margin-6\"\n\t\t| \"margin-9\"",
           "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-9\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
           "references": {}
         },
@@ -225,7 +225,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"xx-small\"\r\n\t\t| \"x-small\"\r\n\t\t| \"small\"\r\n\t\t| \"medium\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"xxxx-large-allbp\"\r\n\t\t| \"xx-large-allbp\"\r\n\t\t| \"xxxx-large-desktop\"\r\n\t\t| \"xxxx-large-store\"",
+          "original": "| \"xx-small\"\n\t\t| \"x-small\"\n\t\t| \"small\"\n\t\t| \"medium\"\n\t\t| \"large\"\n\t\t| \"x-large\"\n\t\t| \"xx-large\"\n\t\t| \"xxx-large\"\n\t\t| \"xxxx-large\"\n\t\t| \"xxxx-large-allbp\"\n\t\t| \"xx-large-allbp\"\n\t\t| \"xxxx-large-desktop\"\n\t\t| \"xxxx-large-store\"",
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-large-allbp\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\" | \"xxxx-large-allbp\" | \"xxxx-large-desktop\" | \"xxxx-large-store\"",
           "references": {}
         },
@@ -242,7 +242,7 @@ export class PtcSeoTitle {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| \"densest\"\r\n\t\t| \"denser\"\r\n\t\t| \"dense\"\r\n\t\t| \"normal\"\r\n\t\t| \"loose\"\r\n\t\t| \"looser\"\r\n\t\t| \"paragraph\"",
+          "original": "| \"densest\"\n\t\t| \"denser\"\n\t\t| \"dense\"\n\t\t| \"normal\"\n\t\t| \"loose\"\n\t\t| \"looser\"\n\t\t| \"paragraph\"",
           "resolved": "\"dense\" | \"denser\" | \"densest\" | \"loose\" | \"looser\" | \"normal\" | \"paragraph\"",
           "references": {}
         },

package/dist/collection/components/ptc-subnav-v2/ptc-subnav-v2.css

@@ -62,9 +62,12 @@ ptc-footer {
   color: var(--color-gray-07);
   text-decoration: none;
   padding: 8px 12px;
+  text-align: center;
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
   font-size: var(--ptc-font-size-xx-small);
   font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-densest);
+  line-height: 18px;
   display: flex;
   align-items: center;
   position: relative;
@@ -76,7 +79,6 @@ ptc-footer {
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown {
   position: absolute;
   top: 100%;
-  right: 0;
   background: var(--color-white);
   border-radius: var(--ptc-border-radius-standard);
   box-shadow: var(--ptc-shadow-x-large);
@@ -179,7 +181,7 @@ ptc-footer {
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-left ul.desktop-menu li a {
-    padding: 20px 0;
+    padding: 20px 0 17px 0;
   }
 }
 :host .subnav-menu-left ul.desktop-menu li a:hover {
@@ -205,10 +207,12 @@ ptc-footer {
 :host .subnav-menu-left .overflow-menu-container .overflow-button {
   background: none;
   border: none;
-  padding: 20px 0;
+  padding: 20px 0 17px 0;
   cursor: pointer;
   justify-content: center;
   min-width: 32px;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button:hover {
   color: var(--color-gray-10);
@@ -228,6 +232,7 @@ ptc-footer {
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
+  box-sizing: border-box;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover {
   background-color: var(--color-gray-04);
@@ -241,7 +246,7 @@ ptc-footer {
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded], :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active {
-  border-bottom: 3px solid var(--color-green-07);
+  border-bottom-color: var(--color-green-07);
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots, :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots {
   background-color: var(--color-green-07);
@@ -250,6 +255,14 @@ ptc-footer {
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots svg circle, :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots svg circle {
   fill: var(--color-white);
 }
+:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-right {
+  left: auto;
+  right: -2px;
+}
+:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-left {
+  left: 0;
+  right: auto;
+}
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:hover {
   background-color: var(--color-gray-02);
   color: var(--color-gray-10);
@@ -295,7 +308,7 @@ ptc-footer {
   background: transparent;
   border: none;
   border-bottom: 3px solid var(--color-green-07);
-  padding: 20px 0;
+  padding: 20px 0 17px 0;
   justify-content: center;
   gap: 10px;
   cursor: pointer;
@@ -368,6 +381,7 @@ ptc-footer {
   cursor: pointer;
   word-break: break-word;
   display: block;
+  box-sizing: border-box;
 }
 :host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active {
   color: var(--color-gray-10);