@ptcwebops/ptcw-design 6.2.12 → 6.2.13-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (232) hide show
  1. package/dist/cjs/blog-detail-content_2.cjs.entry.js +1 -1
  2. package/dist/cjs/blog-detail-layout.cjs.entry.js +1 -1
  3. package/dist/cjs/blogs-search-section.cjs.entry.js +1 -1
  4. package/dist/cjs/{component-06dda623.js → component-4dd13907.js} +2643 -832
  5. package/dist/cjs/{event-jumbotron-example_16.cjs.entry.js → event-jumbotron-example_15.cjs.entry.js} +105 -45
  6. package/dist/cjs/featured-list.cjs.entry.js +1 -1
  7. package/dist/cjs/homepage-jumbotron.cjs.entry.js +1 -1
  8. package/dist/cjs/homepage-toggled-content.cjs.entry.js +1 -1
  9. package/dist/cjs/innovator-toggle-container.cjs.entry.js +1 -1
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/cjs/modal-form-example.cjs.entry.js +94 -0
  12. package/dist/cjs/most-popular-news.cjs.entry.js +1 -1
  13. package/dist/cjs/my-component.cjs.entry.js +1 -1
  14. package/dist/cjs/ptc-accordion-item.cjs.entry.js +1 -1
  15. package/dist/cjs/ptc-background-video.cjs.entry.js +1 -1
  16. package/dist/cjs/ptc-bio-card.cjs.entry.js +1 -1
  17. package/dist/cjs/ptc-case-studies-slider.cjs.entry.js +1 -1
  18. package/dist/cjs/ptc-collapse-list.cjs.entry.js +14 -1
  19. package/dist/cjs/ptc-data-lookup.cjs.entry.js +1 -2
  20. package/dist/cjs/ptc-featured-list.cjs.entry.js +1 -1
  21. package/dist/cjs/ptc-filter-level-theater.cjs.entry.js +1 -1
  22. package/dist/cjs/ptc-footer.cjs.entry.js +1 -1
  23. package/dist/cjs/{ptc-form-checkbox_2.cjs.entry.js → ptc-form-checkbox_4.cjs.entry.js} +787 -5
  24. package/dist/cjs/ptc-homepage-image-feature.cjs.entry.js +1 -1
  25. package/dist/cjs/ptc-homepage-video-background.cjs.entry.js +1 -1
  26. package/dist/cjs/ptc-icon-card.cjs.entry.js +8 -2
  27. package/dist/cjs/ptc-icon-minimize.cjs.entry.js +1 -1
  28. package/dist/cjs/ptc-jumbotron.cjs.entry.js +1 -1
  29. package/dist/cjs/ptc-media-card.cjs.entry.js +1 -1
  30. package/dist/cjs/ptc-nav-submenu.cjs.entry.js +1 -1
  31. package/dist/cjs/ptc-overlay.cjs.entry.js +34 -0
  32. package/dist/cjs/ptc-podcast-card.cjs.entry.js +1 -1
  33. package/dist/cjs/ptc-previous-url.cjs.entry.js +10 -2
  34. package/dist/cjs/ptc-pricing-packaging-table.cjs.entry.js +1 -1
  35. package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
  36. package/dist/cjs/ptc-product-card.cjs.entry.js +1 -1
  37. package/dist/cjs/ptc-product-category.cjs.entry.js +1 -1
  38. package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +1 -1
  39. package/dist/cjs/ptc-readmore-char.cjs.entry.js +1 -1
  40. package/dist/cjs/ptc-readmore-v3.cjs.entry.js +1 -1
  41. package/dist/cjs/ptc-social-icons-footer.cjs.entry.js +7 -2
  42. package/dist/cjs/ptc-tooltip-v2.cjs.entry.js +1 -1
  43. package/dist/cjs/ptc-value-led-speed-bump.cjs.entry.js +1 -1
  44. package/dist/cjs/ptc-white-paper.cjs.entry.js +1 -1
  45. package/dist/cjs/ptcw-design.cjs.js +1 -1
  46. package/dist/cjs/{utils-87d7b99f.js → utils-ad441b07.js} +9 -0
  47. package/dist/collection/collection-manifest.json +1 -0
  48. package/dist/collection/components/icon-asset/media/designer-v6.0.6.svg +30 -2
  49. package/dist/collection/components/innovator-toggle-container/innovator-toggle-container.css +20 -5
  50. package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css +19 -1
  51. package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.css +31 -17
  52. package/dist/collection/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.js +48 -8
  53. package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.css +26 -0
  54. package/dist/collection/components/organism-bundles/form/modal-from-example/modal-form-example.js +99 -0
  55. package/dist/collection/components/ptc-bio-card/ptc-bio-card.css +20 -5
  56. package/dist/collection/components/ptc-button/ptc-button.js +4 -1
  57. package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.css +6 -0
  58. package/dist/collection/components/ptc-card-wrapper/ptc-card-wrapper.js +20 -0
  59. package/dist/collection/components/ptc-case-studies-slider/ptc-case-studies-slider.css +20 -5
  60. package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.js +31 -0
  61. package/dist/collection/components/ptc-featured-list/ptc-featured-list.css +20 -5
  62. package/dist/collection/components/ptc-filter-level-theater/ptc-filter-level-theater.css +20 -5
  63. package/dist/collection/components/ptc-footer/ptc-footer-v2.css +14 -1
  64. package/dist/collection/components/ptc-icon-card/ptc-icon-card.css +10 -0
  65. package/dist/collection/components/ptc-icon-card/ptc-icon-card.js +25 -1
  66. package/dist/collection/components/ptc-icon-minimize/ptc-icon-minimize.css +0 -17
  67. package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +20 -5
  68. package/dist/collection/components/ptc-link/ptc-link.css +8 -0
  69. package/dist/collection/components/ptc-link/ptc-link.js +4 -1
  70. package/dist/collection/components/ptc-modal/ptc-modal.css +66 -0
  71. package/dist/collection/components/ptc-modal/ptc-modal.js +81 -4
  72. package/dist/collection/components/ptc-para/ptc-para.css +3 -0
  73. package/dist/collection/components/ptc-para/ptc-para.js +2 -2
  74. package/dist/collection/components/ptc-podcast-card/ptc-podcast-card.css +20 -5
  75. package/dist/collection/components/ptc-previous-url/ptc-previous-url.css +16 -0
  76. package/dist/collection/components/ptc-previous-url/ptc-previous-url.js +27 -1
  77. package/dist/collection/components/ptc-product-card/ptc-product-card.css +20 -5
  78. package/dist/collection/components/ptc-product-category/ptc-product-category.css +20 -5
  79. package/dist/collection/components/ptc-product-highlight-card/ptc-product-highlight-card.css +20 -5
  80. package/dist/collection/components/ptc-readmore-char/ptc-readmore-char.css +20 -5
  81. package/dist/collection/components/ptc-readmore-v3/ptc-readmore-v3.css +20 -5
  82. package/dist/collection/components/ptc-scroll-button/ptc-scroll-button.js +94 -3
  83. package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.css +10 -0
  84. package/dist/collection/components/ptc-social-icons-footer/ptc-social-icons-footer.js +24 -1
  85. package/dist/collection/components/ptc-tooltip-v2/ptc-tooltip-v2.css +20 -5
  86. package/dist/collection/components/ptc-value-led-speed-bump/ptc-value-led-speed-bump.css +20 -5
  87. package/dist/collection/components/ptc-white-paper/ptc-white-paper.css +20 -5
  88. package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css +7 -0
  89. package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js +45 -0
  90. package/dist/collection/stories/organisms/eSupport/SupportArticle/preview.stories.js +47 -0
  91. package/dist/collection/stories/organisms/eSupport/SupportPage/preview.stories.js +157 -0
  92. package/dist/collection/utils/utils.js +8 -0
  93. package/dist/custom-elements/index.d.ts +6 -0
  94. package/dist/custom-elements/index.js +266 -50
  95. package/dist/esm/blog-detail-content_2.entry.js +1 -1
  96. package/dist/esm/blog-detail-layout.entry.js +1 -1
  97. package/dist/esm/blogs-search-section.entry.js +1 -1
  98. package/dist/esm/{component-274da230.js → component-9c921cc6.js} +2592 -793
  99. package/dist/esm/{event-jumbotron-example_16.entry.js → event-jumbotron-example_15.entry.js} +106 -45
  100. package/dist/esm/featured-list.entry.js +1 -1
  101. package/dist/esm/homepage-jumbotron.entry.js +1 -1
  102. package/dist/esm/homepage-toggled-content.entry.js +1 -1
  103. package/dist/esm/innovator-toggle-container.entry.js +1 -1
  104. package/dist/esm/loader.js +1 -1
  105. package/dist/esm/modal-form-example.entry.js +90 -0
  106. package/dist/esm/most-popular-news.entry.js +1 -1
  107. package/dist/esm/my-component.entry.js +1 -1
  108. package/dist/esm/ptc-accordion-item.entry.js +1 -1
  109. package/dist/esm/ptc-background-video.entry.js +1 -1
  110. package/dist/esm/ptc-bio-card.entry.js +1 -1
  111. package/dist/esm/ptc-case-studies-slider.entry.js +1 -1
  112. package/dist/esm/ptc-collapse-list.entry.js +14 -1
  113. package/dist/esm/ptc-data-lookup.entry.js +1 -2
  114. package/dist/esm/ptc-featured-list.entry.js +1 -1
  115. package/dist/esm/ptc-filter-level-theater.entry.js +1 -1
  116. package/dist/esm/ptc-footer.entry.js +1 -1
  117. package/dist/esm/{ptc-form-checkbox_2.entry.js → ptc-form-checkbox_4.entry.js} +784 -4
  118. package/dist/esm/ptc-homepage-image-feature.entry.js +1 -1
  119. package/dist/esm/ptc-homepage-video-background.entry.js +1 -1
  120. package/dist/esm/ptc-icon-card.entry.js +9 -3
  121. package/dist/esm/ptc-icon-minimize.entry.js +1 -1
  122. package/dist/esm/ptc-jumbotron.entry.js +1 -1
  123. package/dist/esm/ptc-media-card.entry.js +1 -1
  124. package/dist/esm/ptc-nav-submenu.entry.js +1 -1
  125. package/dist/esm/ptc-overlay.entry.js +30 -0
  126. package/dist/esm/ptc-podcast-card.entry.js +1 -1
  127. package/dist/esm/ptc-previous-url.entry.js +10 -2
  128. package/dist/esm/ptc-pricing-packaging-table.entry.js +1 -1
  129. package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
  130. package/dist/esm/ptc-product-card.entry.js +1 -1
  131. package/dist/esm/ptc-product-category.entry.js +1 -1
  132. package/dist/esm/ptc-product-highlight-card.entry.js +1 -1
  133. package/dist/esm/ptc-readmore-char.entry.js +1 -1
  134. package/dist/esm/ptc-readmore-v3.entry.js +1 -1
  135. package/dist/esm/ptc-social-icons-footer.entry.js +7 -2
  136. package/dist/esm/ptc-tooltip-v2.entry.js +1 -1
  137. package/dist/esm/ptc-value-led-speed-bump.entry.js +1 -1
  138. package/dist/esm/ptc-white-paper.entry.js +1 -1
  139. package/dist/esm/ptcw-design.js +1 -1
  140. package/dist/esm/{utils-b7c6422e.js → utils-ff65c75b.js} +9 -1
  141. package/dist/ptcw-design/media/designer-v6.0.6.svg +30 -2
  142. package/dist/ptcw-design/{p-1cff585f.entry.js → p-0d806031.entry.js} +1 -1
  143. package/dist/ptcw-design/p-0de8e37e.entry.js +1 -0
  144. package/dist/ptcw-design/{p-760507e1.entry.js → p-11e0edaf.entry.js} +1 -1
  145. package/dist/ptcw-design/{p-69686408.entry.js → p-139a02e6.entry.js} +1 -1
  146. package/dist/ptcw-design/p-1b257420.entry.js +1 -0
  147. package/dist/ptcw-design/p-257deac0.entry.js +1 -0
  148. package/dist/ptcw-design/{p-fce2bd81.entry.js → p-2749c178.entry.js} +1 -1
  149. package/dist/ptcw-design/p-2ac5ed9c.entry.js +1 -0
  150. package/dist/ptcw-design/{p-eab1042e.entry.js → p-2c6fc745.entry.js} +1 -1
  151. package/dist/ptcw-design/p-34c50b3e.entry.js +1 -0
  152. package/dist/ptcw-design/p-36007a57.entry.js +1 -0
  153. package/dist/ptcw-design/p-50d68602.entry.js +1 -0
  154. package/dist/ptcw-design/p-58f138a3.entry.js +1 -0
  155. package/dist/ptcw-design/p-5ef23b5c.entry.js +1 -0
  156. package/dist/ptcw-design/{p-cffebefe.entry.js → p-6d3326da.entry.js} +1 -1
  157. package/dist/ptcw-design/{p-085e82b8.entry.js → p-72df6678.entry.js} +1 -1
  158. package/dist/ptcw-design/{p-d1857ada.entry.js → p-77cad16c.entry.js} +1 -1
  159. package/dist/ptcw-design/p-799afee5.entry.js +1 -0
  160. package/dist/ptcw-design/{p-52b82ac5.entry.js → p-7a9611b4.entry.js} +1 -1
  161. package/dist/ptcw-design/{p-e38ed0e3.entry.js → p-808ec62a.entry.js} +1 -1
  162. package/dist/ptcw-design/p-8872161f.js +1 -0
  163. package/dist/ptcw-design/p-90c4f08b.entry.js +1 -0
  164. package/dist/ptcw-design/p-95187918.entry.js +1 -0
  165. package/dist/ptcw-design/p-a2caf246.entry.js +68 -0
  166. package/dist/ptcw-design/p-a3b57ede.entry.js +1 -0
  167. package/dist/ptcw-design/{p-999d1c9f.entry.js → p-ae970a60.entry.js} +1 -1
  168. package/dist/ptcw-design/p-b1ebac6f.entry.js +1 -0
  169. package/dist/ptcw-design/p-ba8c58a7.entry.js +1 -0
  170. package/dist/ptcw-design/{p-a3a04f4e.entry.js → p-bb902570.entry.js} +1 -1
  171. package/dist/ptcw-design/p-bcab66bf.js +336 -0
  172. package/dist/ptcw-design/{p-29639cd4.entry.js → p-c37a3bd2.entry.js} +1 -1
  173. package/dist/ptcw-design/{p-2335d57c.entry.js → p-c66b8926.entry.js} +1 -1
  174. package/dist/ptcw-design/{p-4c096997.entry.js → p-c95f423e.entry.js} +1 -1
  175. package/dist/ptcw-design/{p-103ec637.entry.js → p-d10cb999.entry.js} +1 -1
  176. package/dist/ptcw-design/p-d2e26642.entry.js +1 -0
  177. package/dist/ptcw-design/{p-48183365.entry.js → p-d756db27.entry.js} +1 -1
  178. package/dist/ptcw-design/{p-34610052.entry.js → p-d9abe7e8.entry.js} +1 -1
  179. package/dist/ptcw-design/{p-df8526a2.entry.js → p-da82dc93.entry.js} +1 -1
  180. package/dist/ptcw-design/p-de960790.entry.js +1 -0
  181. package/dist/ptcw-design/{p-7e7ebf0a.entry.js → p-e3f8e5d5.entry.js} +1 -1
  182. package/dist/ptcw-design/{p-34b270c1.entry.js → p-e4000363.entry.js} +1 -1
  183. package/dist/ptcw-design/p-e90fbbad.entry.js +1 -0
  184. package/dist/ptcw-design/{p-d3e5b65c.entry.js → p-ea7369e9.entry.js} +1 -1
  185. package/dist/ptcw-design/p-f8512dc9.entry.js +1 -0
  186. package/dist/ptcw-design/ptcw-design.css +2 -2
  187. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  188. package/dist/types/components/organism-bundles/event-jumbotron-example/event-jumbotron-example.d.ts +5 -3
  189. package/dist/types/components/organism-bundles/form/modal-from-example/modal-form-example.d.ts +25 -0
  190. package/dist/types/components/ptc-button/ptc-button.d.ts +1 -0
  191. package/dist/types/components/ptc-card-wrapper/ptc-card-wrapper.d.ts +2 -0
  192. package/dist/types/components/ptc-collapse-list/ptc-collapse-list.d.ts +2 -0
  193. package/dist/types/components/ptc-icon-card/ptc-icon-card.d.ts +6 -0
  194. package/dist/types/components/ptc-link/ptc-link.d.ts +1 -0
  195. package/dist/types/components/ptc-modal/ptc-modal.d.ts +5 -1
  196. package/dist/types/components/ptc-para/ptc-para.d.ts +1 -1
  197. package/dist/types/components/ptc-previous-url/ptc-previous-url.d.ts +2 -0
  198. package/dist/types/components/ptc-scroll-button/ptc-scroll-button.d.ts +12 -0
  199. package/dist/types/components/ptc-social-icons-footer/ptc-social-icons-footer.d.ts +5 -0
  200. package/dist/types/components.d.ts +58 -4
  201. package/dist/types/utils/utils.d.ts +1 -0
  202. package/package.json +1 -1
  203. package/readme.md +5 -1
  204. package/dist/cjs/component-5b5b6a98.js +0 -1819
  205. package/dist/cjs/ptc-multi-select_2.cjs.entry.js +0 -670
  206. package/dist/cjs/validation-messages-33a4f26b.js +0 -126
  207. package/dist/esm/component-341e4eaa.js +0 -1802
  208. package/dist/esm/ptc-multi-select_2.entry.js +0 -665
  209. package/dist/esm/validation-messages-adbb6518.js +0 -124
  210. package/dist/ptcw-design/p-00e21489.entry.js +0 -1
  211. package/dist/ptcw-design/p-1022ad8b.entry.js +0 -1
  212. package/dist/ptcw-design/p-136a91bf.entry.js +0 -1
  213. package/dist/ptcw-design/p-14e53256.entry.js +0 -1
  214. package/dist/ptcw-design/p-18a5a338.js +0 -1
  215. package/dist/ptcw-design/p-18f59395.entry.js +0 -1
  216. package/dist/ptcw-design/p-1b7087e7.entry.js +0 -1
  217. package/dist/ptcw-design/p-1ca8a5bf.entry.js +0 -1
  218. package/dist/ptcw-design/p-3f71553e.entry.js +0 -1
  219. package/dist/ptcw-design/p-4a5f7fd0.entry.js +0 -68
  220. package/dist/ptcw-design/p-4e2bb0e0.entry.js +0 -1
  221. package/dist/ptcw-design/p-583608d9.entry.js +0 -1
  222. package/dist/ptcw-design/p-710de12d.entry.js +0 -1
  223. package/dist/ptcw-design/p-841b807d.js +0 -1
  224. package/dist/ptcw-design/p-8daf00ae.entry.js +0 -1
  225. package/dist/ptcw-design/p-be533f0d.js +0 -134
  226. package/dist/ptcw-design/p-c1513c3f.js +0 -203
  227. package/dist/ptcw-design/p-d734b373.entry.js +0 -1
  228. package/dist/ptcw-design/p-dc488936.entry.js +0 -1
  229. package/dist/ptcw-design/p-dd73c4d1.entry.js +0 -1
  230. package/dist/ptcw-design/p-e7937ac1.entry.js +0 -1
  231. package/dist/ptcw-design/p-e9a7475b.entry.js +0 -1
  232. package/dist/ptcw-design/p-f05fec22.entry.js +0 -1
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -1,6 +1,35 @@
1
1
  import { Host, h } from '@stencil/core';
2
2
  export class PtcScrollButton {
3
3
  constructor() {
4
+ //slider!: HTMLElement;
5
+ this.startX = 0;
6
+ this.scrollLeft = 0;
7
+ this.startDragging = (e) => {
8
+ this.isMouseDown = true;
9
+ this.isDragging = false;
10
+ this.containerCards.forEach((card) => {
11
+ card.disabled = false;
12
+ });
13
+ this.startX = e.pageX;
14
+ this.scrollLeft = this.scrollContainer.scrollLeft;
15
+ };
16
+ this.performDragging = (e) => {
17
+ if (!this.isMouseDown)
18
+ return;
19
+ const x = e.pageX - this.scrollContainer.offsetLeft;
20
+ const walk = x - this.startX;
21
+ this.isDragging = Math.abs(walk) > 5;
22
+ this.scrollContainer.scrollLeft = this.scrollLeft - walk;
23
+ this.containerCards.forEach((card) => {
24
+ card.disabled = true;
25
+ });
26
+ };
27
+ this.stopDragging = () => {
28
+ this.isMouseDown = false;
29
+ this.containerCards.forEach((card) => {
30
+ card.disabled = false;
31
+ });
32
+ };
4
33
  this.handleScroll = () => {
5
34
  this.updateVisibility();
6
35
  };
@@ -29,6 +58,8 @@ export class PtcScrollButton {
29
58
  this.trackerId = undefined;
30
59
  this.styles = undefined;
31
60
  this.isVisible = true;
61
+ this.isDragging = false;
62
+ this.isMouseDown = false;
32
63
  }
33
64
  componentWillLoad() {
34
65
  this.scrollContainer = document.querySelector(`.${this.scrollContainerClass}`);
@@ -41,11 +72,31 @@ export class PtcScrollButton {
41
72
  console.error('scrollContainer ele not found');
42
73
  }
43
74
  }
75
+ componentDidLoad() {
76
+ this.containerCards = document.querySelectorAll(`.${this.scrollContainerClass} ptc-card-wrapper`);
77
+ if (this.scrollContainer) {
78
+ this.enableDragging();
79
+ }
80
+ }
44
81
  disconnectedCallback() {
45
82
  if (this.scrollContainer) {
46
83
  this.scrollContainer.removeEventListener('scroll', this.handleScroll);
84
+ this.disableDragging();
47
85
  }
48
86
  }
87
+ async checkVisibility() {
88
+ this.updateVisibility();
89
+ }
90
+ enableDragging() {
91
+ this.scrollContainer.addEventListener('mousedown', this.startDragging);
92
+ this.scrollContainer.addEventListener('mousemove', this.performDragging);
93
+ ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.addEventListener(event, this.stopDragging));
94
+ }
95
+ disableDragging() {
96
+ this.scrollContainer.removeEventListener('mousedown', this.startDragging);
97
+ this.scrollContainer.removeEventListener('mousemove', this.performDragging);
98
+ ['mouseup', 'mouseleave'].forEach(event => this.scrollContainer.removeEventListener(event, this.stopDragging));
99
+ }
49
100
  updateVisibility() {
50
101
  if (!this.scrollContainer)
51
102
  return;
@@ -55,7 +106,8 @@ export class PtcScrollButton {
55
106
  this.isVisible = scrollLeft > 0;
56
107
  }
57
108
  else if (this.direction === 'right') {
58
- this.isVisible = scrollLeft + clientWidth < scrollWidth;
109
+ this.isVisible = scrollLeft + clientWidth + 1 < scrollWidth; // "+1" adjustments after adding margin-right 40px
110
+ // console.log('scorllLeft: ' + scrollLeft + ", scrollWidth: " + scrollWidth + ", clientWidth: " + clientWidth);
59
111
  }
60
112
  }
61
113
  else if (this.orientation === 'vertical') {
@@ -68,7 +120,7 @@ export class PtcScrollButton {
68
120
  }
69
121
  }
70
122
  render() {
71
- return (h(Host, null, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
123
+ return (h(Host, { "is-dragging": this.isDragging }, this.styles && h("style", null, this.styles), this.isVisible && (h("button", { id: this.trackerId, onClick: this.handleClick, class: `scroll-btn ${this.direction}`, "aria-label": this.direction, tabindex: "0" }, this.direction === 'left' && h("icon-asset", { name: "left-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'right' && h("icon-asset", { name: "right-scroll-arrow", size: "small", color: "white", type: "ptc", "injected-style": "svg:focus{outline:none;}" }), this.direction === 'up' && '▲', this.direction === 'down' && '▼'))));
72
124
  }
73
125
  static get is() { return "ptc-scroll-button"; }
74
126
  static get encapsulation() { return "shadow"; }
@@ -187,12 +239,51 @@ export class PtcScrollButton {
187
239
  },
188
240
  "attribute": "styles",
189
241
  "reflect": false
242
+ },
243
+ "isDragging": {
244
+ "type": "boolean",
245
+ "mutable": true,
246
+ "complexType": {
247
+ "original": "boolean",
248
+ "resolved": "boolean",
249
+ "references": {}
250
+ },
251
+ "required": false,
252
+ "optional": false,
253
+ "docs": {
254
+ "tags": [],
255
+ "text": ""
256
+ },
257
+ "attribute": "is-dragging",
258
+ "reflect": false,
259
+ "defaultValue": "false"
190
260
  }
191
261
  };
192
262
  }
193
263
  static get states() {
194
264
  return {
195
- "isVisible": {}
265
+ "isVisible": {},
266
+ "isMouseDown": {}
267
+ };
268
+ }
269
+ static get methods() {
270
+ return {
271
+ "checkVisibility": {
272
+ "complexType": {
273
+ "signature": "() => Promise<void>",
274
+ "parameters": [],
275
+ "references": {
276
+ "Promise": {
277
+ "location": "global"
278
+ }
279
+ },
280
+ "return": "Promise<void>"
281
+ },
282
+ "docs": {
283
+ "text": "",
284
+ "tags": []
285
+ }
286
+ }
196
287
  };
197
288
  }
198
289
  }
@@ -109,10 +109,20 @@ ptc-link, ptc-square-card,
109
109
  background-color: var(--color-gray-09);
110
110
  transition: none;
111
111
  }
112
+ :host ul li a:focus-visible {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
112
117
  @media only screen and (min-width: 992px) {
113
118
  :host ul li a {
114
119
  padding: 4px;
115
120
  width: 36px;
116
121
  height: 36px;
117
122
  }
123
+ }
124
+ :host ul.dark-bg a:focus-visible {
125
+ border-radius: var(--ptc-border-radius-standard);
126
+ border: 2px solid white;
127
+ outline: 5px solid var(--keyboard-nav-outline);
118
128
  }
@@ -1,4 +1,5 @@
1
1
  import { Host, h } from '@stencil/core';
2
+ import { CheckDarkFocusState } from '../../utils/utils';
2
3
  import instagramSVG from '../../media/svg-imgs/instagram.svg';
3
4
  import facebookSVG from '../../media/svg-imgs/facebook.svg';
4
5
  import linkedinSVG from '../../media/svg-imgs/linkedin.svg';
@@ -35,14 +36,18 @@ export class PtcSocialIconsFooter {
35
36
  this.weiboImageAlt = undefined;
36
37
  this.youkuImageAlt = undefined;
37
38
  this.target = undefined;
39
+ this.darkFocusState = false;
38
40
  }
39
41
  openModal(e) {
40
42
  e.preventDefault();
41
43
  const modal = this.hostElement.shadowRoot.querySelector('#QRModal');
42
44
  modal.show = true;
43
45
  }
46
+ componentWillLoad() {
47
+ CheckDarkFocusState(this, this.hostElement);
48
+ }
44
49
  render() {
45
- return (h(Host, null, h("slot", null), h("ul", null, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
50
+ return (h(Host, null, h("slot", null), h("ul", { class: this.darkFocusState ? `dark-bg` : `standard-bg` }, this.instagramUrl && h("li", { id: "footerInstagramIconID" }, " ", h("a", { href: this.instagramUrl, title: this.instagramImageAlt, innerHTML: this.instagramImageUrl == "" ? instagramSVG : "", target: this.target }, this.instagramImageUrl != "" && h("img", { src: this.instagramImageUrl, alt: this.instagramImageAlt })), " "), this.facebookUrl && h("li", { id: "footerFacebookIconID" }, " ", h("a", { href: this.facebookUrl, title: this.facebookImageAlt, innerHTML: this.facebookImageUrl == "" ? facebookSVG : "", target: this.target }, this.facebookImageUrl != "" && h("img", { src: this.facebookImageUrl, alt: this.facebookImageAlt })), " "), this.linkedinUrl && h("li", { id: "footerLinkedInIconID" }, " ", h("a", { href: this.linkedinUrl, title: this.linkedinImageAlt, innerHTML: this.linkedinImageUrl == "" ? linkedinSVG : "", target: this.target }, this.linkedinImageUrl != "" && h("img", { src: this.linkedinImageUrl, alt: this.linkedinImageAlt })), " "), this.xUrl && h("li", { id: "footerXIconID" }, " ", h("a", { href: this.xUrl, title: this.xImageAlt, innerHTML: this.xImageUrl == "" ? xSVG : "", target: this.target }, this.xImageUrl != "" && h("img", { src: this.xImageUrl, alt: this.xImageAlt, "aria-label": "X, formerly Twitter" })), " "), this.youtubeUrl && h("li", { id: "footerYouTubeIconID" }, " ", h("a", { href: this.youtubeUrl, title: this.youtubeImageAlt, innerHTML: this.youtubeImageUrl == "" ? youtubeSVG : "", target: this.target }, this.youtubeImageUrl != "" && h("img", { src: this.youtubeImageUrl, alt: this.youtubeImageAlt })), " "), this.weiboUrl && h("li", { id: "footerWeiboIconID" }, " ", h("a", { href: this.weiboUrl, title: this.weiboImageAlt, innerHTML: this.weiboImageUrl == "" ? weiboSVG : "", target: this.target }, this.weiboImageUrl != "" && h("img", { src: this.weiboImageUrl, alt: this.weiboImageAlt })), " "), this.youkuUrl && h("li", { id: "footerYouKuIconID" }, " ", h("a", { href: this.youkuUrl, title: this.youkuImageAlt, innerHTML: this.youkuImageUrl == "" ? ykSVG : "", target: this.target }, this.youkuImageUrl != "" && h("img", { src: this.youkuImageUrl, alt: this.youkuImageAlt })), " "), this.wechatQrImageUrl && h("li", { id: "footerWeChatIconID" }, " ", h("a", { href: "#", onClick: (Event) => { this.openModal(Event); }, title: this.wechatImageAlt != "" ? this.wechatImageAlt : "WeChat", innerHTML: this.wechatImageUrl == "" ? wechatSVG : "" }, this.wechatImageUrl != "" && h("img", { src: this.wechatImageUrl, alt: this.wechatImageAlt })), " ")), h("ptc-modal", { id: "QRModal", show: false, size: "sm", "close-on-blur": true, fixed: true, styles: '.wrapper .modal-popup .modal-body { padding-bottom: 40px}' }, h("ptc-picture", { alt: this.wechatQrImageAltText, src: this.wechatQrImageUrl, "max-width": '250', "image-alignment": 'center', styles: 'img{margin:auto}' }))));
46
51
  }
47
52
  static get is() { return "ptc-social-icons-footer"; }
48
53
  static get encapsulation() { return "shadow"; }
@@ -499,6 +504,24 @@ export class PtcSocialIconsFooter {
499
504
  },
500
505
  "attribute": "target",
501
506
  "reflect": false
507
+ },
508
+ "darkFocusState": {
509
+ "type": "boolean",
510
+ "mutable": false,
511
+ "complexType": {
512
+ "original": "boolean",
513
+ "resolved": "boolean",
514
+ "references": {}
515
+ },
516
+ "required": false,
517
+ "optional": false,
518
+ "docs": {
519
+ "tags": [],
520
+ "text": "Add dark-focus-state property where button is present on dark backgrounds"
521
+ },
522
+ "attribute": "dark-focus-state",
523
+ "reflect": false,
524
+ "defaultValue": "false"
502
525
  }
503
526
  };
504
527
  }
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -82,23 +82,38 @@ a:focus-visible {
82
82
  border-radius: var(--ptc-border-radius-standard);
83
83
  }
84
84
 
85
- .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 {
85
+ .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 {
86
86
  color: var(--color-blue-04);
87
+ margin: -2px;
88
+ border: 2px solid transparent;
87
89
  }
88
- .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 {
90
+ .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 {
89
91
  color: var(--color-blue-06);
90
92
  }
91
- .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 {
93
+ .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 {
92
94
  transition: none;
93
95
  color: var(--color-blue-07);
94
96
  }
95
- .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 {
97
+ .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 {
96
98
  color: var(--color-blue-05);
97
99
  }
98
- .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 {
100
+ .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 {
99
101
  color: var(--color-gray-04) !important;
100
102
  cursor: not-allowed;
101
103
  }
104
+ .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 {
105
+ border-radius: var(--ptc-border-radius-standard);
106
+ border: 2px solid white;
107
+ outline: 5px solid var(--keyboard-nav-outline);
108
+ }
109
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
110
+ border: 2px solid transparent;
111
+ }
112
+ .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 {
113
+ border-radius: var(--ptc-border-radius-standard);
114
+ border: 2px solid white;
115
+ outline: 5px solid var(--keyboard-nav-outline);
116
+ }
102
117
 
103
118
  .ptc-link {
104
119
  color: var(--color-gray-10);
@@ -5659,23 +5659,38 @@ a:focus-visible {
5659
5659
  border-radius: var(--ptc-border-radius-standard);
5660
5660
  }
5661
5661
 
5662
- .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 {
5662
+ .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 {
5663
5663
  color: var(--color-blue-04);
5664
+ margin: -2px;
5665
+ border: 2px solid transparent;
5664
5666
  }
5665
- .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 {
5667
+ .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 {
5666
5668
  color: var(--color-blue-06);
5667
5669
  }
5668
- .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 {
5670
+ .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 {
5669
5671
  transition: none;
5670
5672
  color: var(--color-blue-07);
5671
5673
  }
5672
- .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 {
5674
+ .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 {
5673
5675
  color: var(--color-blue-05);
5674
5676
  }
5675
- .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 {
5677
+ .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 {
5676
5678
  color: var(--color-gray-04) !important;
5677
5679
  cursor: not-allowed;
5678
5680
  }
5681
+ .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 {
5682
+ border-radius: var(--ptc-border-radius-standard);
5683
+ border: 2px solid white;
5684
+ outline: 5px solid var(--keyboard-nav-outline);
5685
+ }
5686
+ .light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
5687
+ border: 2px solid transparent;
5688
+ }
5689
+ .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 {
5690
+ border-radius: var(--ptc-border-radius-standard);
5691
+ border: 2px solid white;
5692
+ outline: 5px solid var(--keyboard-nav-outline);
5693
+ }
5679
5694
 
5680
5695
  .ptc-link {
5681
5696
  color: var(--color-gray-10);