@ptcwebops/ptcw-design 6.2.18 → 6.2.19-beta

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

@@ -1178,23 +1178,38 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

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

@@ -74,6 +74,10 @@ ptc-link, ptc-square-card,
   text-decoration: none;
   transition: color var(--ptc-transition-fast) var(--ptc-ease-inout);
 }
+.ptc-link.focus-state-dark-background {
+  border: 2px solid transparent;
+  margin: -2px;
+}
 .ptc-link:active {
   transition: none;
 }
@@ -96,6 +100,10 @@ ptc-link, ptc-square-card,
   text-decoration-thickness: 2px;
   transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
+.simple.focus-state-dark-background {
+  border: 2px solid transparent;
+  margin: -2px;
+}
 .simple:hover {
   color: var(--color-green-06);
   transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);

package/dist/collection/components/ptc-link/ptc-link.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { getSeoTagType } from '../../utils/utils';
+import { getSeoTagType, CheckDarkFocusState } from '../../utils/utils';
 export class PtcLink {
   constructor() {
     this.disabled = false;
@@ -17,6 +17,9 @@ export class PtcLink {
     this.tabNav = 0;
     this.darkFocusState = false;
   }
+  componentWillLoad() {
+    CheckDarkFocusState(this, this.el);
+  }
   seoCompRender() {
     const classMap = this.getCssClassMap();
     const [TagType, firstChild] = getSeoTagType(this.el, "a");

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

@@ -82,6 +82,7 @@ ptc-link, ptc-square-card,
   align-content: flex-end;
   z-index: 50020;
   transform: translateY(-100%);
+  position: relative;
 }
 @media only screen and (min-width: 992px) {
   .wrapper .modal-popup {
@@ -97,6 +98,9 @@ ptc-link, ptc-square-card,
 .wrapper .modal-popup.xl {
   max-width: 64.0625rem;
 }
+.wrapper .modal-popup.fit-content {
+  max-width: fit-content;
+}
 .wrapper .modal-popup.max {
   width: calc(100% - 4rem);
   max-width: 75rem;

package/dist/collection/components/ptc-modal/ptc-modal.js

@@ -34,6 +34,9 @@ export class PtcModal {
       const wrapperEle = this.el.shadowRoot.querySelector('.wrapper');
       wrapperEle && wrapperEle.focus();
     }, 100);
+    setTimeout(() => {
+      this.setInitialFocus();
+    }, 150);
   }
   componentWillLoad() {
     let body = document.querySelector('body');
@@ -127,6 +130,20 @@ export class PtcModal {
   close() {
     this.show = false;
   }
+  setInitialFocus() {
+    var _a, _b, _c;
+    const firstFocusableElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, a, input, select, textarea, [tabindex]:not([tabindex="-1"]), ptc-close-icon');
+    const closeIcon = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ptc-close-icon');
+    const closeSvg = (_c = closeIcon === null || closeIcon === void 0 ? void 0 : closeIcon.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('svg');
+    if (closeSvg) {
+      console.log('close svg found');
+      closeSvg.focus();
+    }
+    else if (firstFocusableElement) {
+      console.log('first focus ele found!');
+      firstFocusableElement.focus();
+    }
+  }
   render() {
     let content;
     let overlay;
@@ -227,8 +244,8 @@ export class PtcModal {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "'sm' | 'md' | 'lg' | 'xl' | 'max'| 'sm-modal'",
-          "resolved": "\"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
+          "original": "'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | 'max'| 'sm-modal'",
+          "resolved": "\"fit-content\" | \"lg\" | \"max\" | \"md\" | \"sm\" | \"sm-modal\" | \"xl\"",
           "references": {}
         },
         "required": false,

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

@@ -104,6 +104,9 @@ p.main {
 p.primary-grey {
   color: var(--color-gray-10);
 }
+p.primary-green {
+  color: var(--color-green-06);
+}
 p.gray-darker {
   color: var(--color-gray-11);
 }

package/dist/collection/components/ptc-para/ptc-para.js

@@ -185,8 +185,8 @@ export class PtcPara {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'primary-grey' | 'white' | 'gray-darker'",
-          "resolved": "\"gray-darker\" | \"primary-grey\" | \"white\"",
+          "original": "'primary-grey' | 'primary-green' | 'white' | 'gray-darker'",
+          "resolved": "\"gray-darker\" | \"primary-green\" | \"primary-grey\" | \"white\"",
           "references": {}
         },
         "required": false,

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

@@ -5602,23 +5602,38 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -476,18 +476,18 @@ ptc-link, ptc-square-card,
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
-  column-gap: 40px;
 }
 .skeleton-home-page .slide-container .skeleton-slides .slide {
   background: linear-gradient(to right, var(--color-gray-02) 25%, var(--color-gray-03) 50%, var(--color-gray-02) 75%);
   background-size: 200% 100%;
   animation: loading 2.5s linear infinite;
   border-radius: 4px;
-  width: 100%;
+  width: 296px;
   height: 140px;
 }
 @media only screen and (min-width: 992px) {
   .skeleton-home-page .slide-container .skeleton-slides .slide {
+    width: 356px;
     height: 116px;
   }
 }
@@ -1999,7 +1999,7 @@ ptc-link, ptc-square-card,
   margin-bottom: 38px;
   margin-top: 22px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-1 {
     margin-bottom: 40px;
   }
@@ -2009,7 +2009,7 @@ ptc-link, ptc-square-card,
   margin-bottom: 24px;
   align-self: center;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-2 {
     margin-bottom: 25px;
   }
@@ -2023,7 +2023,7 @@ ptc-link, ptc-square-card,
     width: 335px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
     width: 445px;
   }
@@ -2037,7 +2037,7 @@ ptc-link, ptc-square-card,
     width: 397px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
     width: 525px;
   }
@@ -2047,7 +2047,7 @@ ptc-link, ptc-square-card,
   align-self: center;
   margin-bottom: 20px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-5 {
     width: 769px;
   }
@@ -2061,7 +2061,7 @@ ptc-link, ptc-square-card,
     width: 411px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
     width: 621px;
   }
@@ -2075,7 +2075,7 @@ ptc-link, ptc-square-card,
     width: 383px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
     display: none;
   }
@@ -2089,7 +2089,7 @@ ptc-link, ptc-square-card,
     width: 435px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
     display: none;
   }
@@ -2103,7 +2103,7 @@ ptc-link, ptc-square-card,
     width: 199px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
     display: none;
   }
@@ -2119,7 +2119,7 @@ ptc-link, ptc-square-card,
     width: 411px;
   }
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
     width: 232px;
     margin-top: 35px;
@@ -2144,7 +2144,7 @@ ptc-link, ptc-square-card,
   width: 65%;
   margin-bottom: 20px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .short-16 {
     width: 275px;
   }
@@ -2152,7 +2152,7 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .short-11 {
   width: 95%;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .short-11 {
     width: 60%;
   }
@@ -2160,7 +2160,7 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .short-12 {
   width: 89%;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .short-12 {
     display: none;
   }
@@ -2175,18 +2175,13 @@ ptc-link, ptc-square-card,
     width: 290px;
   }
 }
-@media only screen and (min-width: 992px) {
-  .preloader-events-listing .short-15 {
-    display: none;
-  }
-}
 .preloader-events-listing .grid-cards {
   display: flex;
   flex-direction: row;
   column-gap: 24px;
   overflow-x: hidden;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-cards {
     margin: 0 120px;
   }
@@ -2199,7 +2194,7 @@ ptc-link, ptc-square-card,
   flex-grow: 1;
   min-width: 250px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-cards .short-17 {
     width: 270px;
     min-width: 270px;
@@ -2209,13 +2204,12 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .grid-cards-desktop {
   display: none;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-cards-desktop {
     display: flex;
     flex-direction: row;
     column-gap: 24px;
     overflow-x: hidden;
-    justify-content: center;
   }
 }
 .preloader-events-listing .grid-cards-desktop .short-17 {
@@ -2226,20 +2220,11 @@ ptc-link, ptc-square-card,
   flex-grow: 1;
   min-width: 250px;
 }
-@media only screen and (min-width: 992px) {
-  .preloader-events-listing .grid-cards-desktop .short-17 {
-    width: 22%;
-    min-width: 22%;
-    height: 530px;
-    flex-grow: initial;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-cards-desktop .short-17 {
-    width: 275px;
-    min-width: 275px;
+    width: 270px;
+    min-width: 270px;
     height: 530px;
-    flex-grow: initial;
   }
 }
 .preloader-events-listing .grid-long-cards-mobile {
@@ -2254,18 +2239,17 @@ ptc-link, ptc-square-card,
   width: 100%;
   height: 391px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards-mobile .short-13 {
     width: 996px;
     height: 391px;
     min-width: 996px;
-    display: none;
   }
 }
 .preloader-events-listing .grid-long-cards-mobile .short-14 {
   display: none;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards-mobile .short-14 {
     display: block;
     width: 996px;
@@ -2282,12 +2266,6 @@ ptc-link, ptc-square-card,
   margin-bottom: 30px;
   display: none;
 }
-@media only screen and (min-width: 992px) {
-  .preloader-events-listing .grid-long-cards {
-    margin-left: 24px;
-    display: flex;
-  }
-}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards {
     margin-left: 120px;
@@ -2298,17 +2276,17 @@ ptc-link, ptc-square-card,
   width: 100%;
   height: 391px;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards .short-13 {
-    width: 80%;
+    width: 996px;
     height: 391px;
-    min-width: 80%;
+    min-width: 996px;
   }
 }
 .preloader-events-listing .grid-long-cards .short-14 {
   display: none;
 }
-@media only screen and (min-width: 992px) {
+@media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards .short-14 {
     display: block;
     width: 996px;

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.js

@@ -70,7 +70,7 @@ export class PtcPreloaderSection {
         return (h("div", { class: "preloader-wrapper preloader-generic-form" }, h("div", { class: "jumbotron" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }), h("div", { class: "skeleton-block cta" }))))))), h("div", { class: "ptc-container" }, h("div", { class: "is-grid block form-block-1" }, h("div", { class: "is-col-12" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))), h("div", { class: "is-grid block grid-1" }, h("div", { class: "is-col-12-xs is-col-12-sm is-col-10-md is-col-7-lg" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin line-1" }), h("div", { class: "skeleton-block thin line-2" }), h("div", { class: "skeleton-block thin line-3" }), h("div", { class: "skeleton-block thin line-4" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin line-6" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" })), h("div", { class: "skeleton-block block-2" }))), h("div", { class: "is-col-1-lg" }), h("div", { class: "is-col-12-xs is-col-12-sm is-col-4-lg form-block-2" }, Array.from({ length: 7 }).map(() => (h("div", { class: "skeleton form-block-skeleton" }, h("div", { class: "skeleton-block bold" })))), h("div", { class: "skeleton" }, h("div", { class: "skeleton-block very-bold" })))))));
       }
       case 'events-listing': {
-        return (h("div", { class: "preloader-wrapper preloader-events-listing" }, h("div", { class: "jumbotron " }, h("div", { class: "jumbotron-bg" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short-1" }), h("div", { class: "skeleton-block thin short-2" }), h("div", { class: "skeleton-block bold short-3" }), h("div", { class: "skeleton-block thin short-4" }), h("div", { class: "skeleton-block thin short-5" }), h("div", { class: "skeleton-block thin short-6" }), h("div", { class: "skeleton-block thin short-7" }), h("div", { class: "skeleton-block thin short-8" }), h("div", { class: "skeleton-block thin short-9" }), h("div", { class: "skeleton-block thick short-10" }))))), h("div", { class: "grid-cards-div" }, h("div", { class: "skeleton grid-cards" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" })), h("div", { class: "skeleton grid-cards-desktop ptc-container" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }))), h("div", { class: "white-placeholder" }))), h("div", { class: "ptc-container grid-2" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-16" }), h("div", { class: "skeleton-block thin short-11" }), h("div", { class: "skeleton-block thin short-12" }))))), h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "ptc-container skeleton grid-long-cards-mobile" }, h("div", { class: "skeleton-block short-13" })), h("div", { class: "skeleton" }, h("div", { class: "grid-long-cards" }, h("div", { class: "skeleton-block short-13" }), h("div", { class: "skeleton-block short-14" })), h("div", { class: "skeleton-block bold short-15" }))))));
+        return (h("div", { class: "preloader-wrapper preloader-events-listing" }, h("div", { class: "jumbotron " }, h("div", { class: "jumbotron-bg" }, h("div", { class: "ptc-container" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thin short-1" }), h("div", { class: "skeleton-block thin short-2" }), h("div", { class: "skeleton-block bold short-3" }), h("div", { class: "skeleton-block thin short-4" }), h("div", { class: "skeleton-block thin short-5" }), h("div", { class: "skeleton-block thin short-6" }), h("div", { class: "skeleton-block thin short-7" }), h("div", { class: "skeleton-block thin short-8" }), h("div", { class: "skeleton-block thin short-9" }), h("div", { class: "skeleton-block thick short-10" }))))), h("div", { class: "grid-cards-div" }, h("div", { class: "skeleton grid-cards" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" })), h("div", { class: "skeleton grid-cards-desktop ptc-container" }, h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }), h("div", { class: "skeleton-block short-17" }))), h("div", { class: "white-placeholder" }))), h("div", { class: "ptc-container grid-2" }, h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick short-16" }), h("div", { class: "skeleton-block thin short-11" }), h("div", { class: "skeleton-block thin short-12" }))))), h("div", { class: "is-grid has-no-row-gap" }, h("div", { class: "is-col-12" }, h("div", { class: "ptc-container skeleton" }, h("div", { class: "grid-long-cards-mobile " }, h("div", { class: "skeleton-block short-13" }))), h("div", { class: "skeleton" }, h("div", { class: "grid-long-cards" }, h("div", { class: "skeleton-block short-13" }), h("div", { class: "skeleton-block short-14" })), h("div", { class: "skeleton-block bold short-15" }))))));
       }
       case 'pdf-skeleton': {
         return (h("div", { class: "preloader-wrapper pdf-skeleton-preloader" }, h("div", { class: "jumbotron-sec" }, h("div", { class: "ptc-container skeleton-jumbotron" }, h("div", { class: "is-grid has-no-row-gap has-col-gap-lg" }, h("div", { class: "is-col-12 is-col-8-lg" }, h("div", { class: "sekleton" }, h("div", { class: "skeleton-block thin short" }), h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "cta-wrap" }, h("div", { class: "skeleton-block cta" }))))))), h("div", { class: "ptc-container" }, h("div", { class: "section-1" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block line-1" }), h("div", { class: "skeleton-block line-2 thin" }), h("div", { class: "skeleton-block line-3 thin" }), h("div", { class: "skeleton-block line-4 thin" }))), h("div", { class: "pdf-area" }, h("div", { class: "pdf-section" }, h("div", { class: "top-border" }), h("div", { class: "pdf-body" }, h("div", { class: "skeleton" }, h("div", { class: "skeleton-block thick" }), h("div", { class: "skeleton-block thick" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("ptc-spacer", { breakpoint: "small", size: "large" }), h("ptc-spacer", { breakpoint: "x-small", size: "x-large" }), h("div", { class: "skeleton-block thick-block" }), h("div", { class: "skeleton-block thin" }), h("div", { class: "skeleton-block thin medium" }))))))));

package/dist/collection/components/ptc-previous-url/ptc-previous-url.css

@@ -82,4 +82,20 @@ ptc-link, ptc-square-card,
   text-decoration: underline;
   text-decoration-color: var(--color-green-07);
   outline: none;
+}
+
+.light {
+  display: inline-block;
+  background: rgba(0, 0, 0, 0.54);
+  border-radius: 4px;
+  padding: 0.5rem 0.75rem;
+  padding: 0.25rem 1rem 0.5rem 0.75rem;
+  cursor: pointer;
+  position: relative;
+  display: block;
+}
+.light:hover span {
+  text-decoration: underline;
+  text-decoration-color: var(--color-green-07);
+  outline: none;
 }

package/dist/collection/components/ptc-previous-url/ptc-previous-url.js

@@ -3,10 +3,18 @@ export class PtcPreviousUrl {
   constructor() {
     this.href = undefined;
     this.text = undefined;
+    this.theme = 'standard';
     this.styles = undefined;
   }
   render() {
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)), h("slot", null)));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": this.href }, this.theme == 'light' ?
+      (h("a", { class: this.getCssClassMap() }, h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("span", { class: "back-to-videos" }, this.text))) :
+      [h("ptc-svg-btn", { class: "backarrow", "svg-name": "back-arrow", display: "inline-block" }), h("a", { class: "back-to-videos" }, this.text)]), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {
+      [this.theme]: true
+    };
   }
   static get is() { return "ptc-previous-url"; }
   static get encapsulation() { return "shadow"; }
@@ -56,6 +64,24 @@ export class PtcPreviousUrl {
         "attribute": "text",
         "reflect": false
       },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'standard' | 'light'",
+          "resolved": "\"light\" | \"standard\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'standard'"
+      },
       "styles": {
         "type": "string",
         "mutable": false,

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

@@ -82,23 +82,38 @@ a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
 }
 
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a), .background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
+  margin: -2px;
+  border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited, .background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a).disabled, .background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a):focus-visible, .background-plm-grey a.light-link:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
+  border: 2px solid transparent;
+}
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-link {
   color: var(--color-gray-10);