@ptcwebops/ptcw-design 6.4.10-beta → 6.4.11-beta

package/dist/collection/components/organism-bundles/bundle-featured-list/featured-list.css

@@ -1,263 +1,407 @@
-a {
-	font-family: var(--ptc-font-latin);
-	font-style: var(--ptc-font-style-normal);
-	text-decoration-line: underline;
-	color: var(--color-hyperlink);
-	transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
-	font-weight: var(--ptc-font-weight-bold);
-
-	&:visited {
-		color: var(--color-blue-10);
-	}
-
-	&:active,
-	&:visited:active {
-		transition: none;
-		// pressed
-		color: var(--color-blue-09);
-	}
-
-	&:hover,
-	&:visited:hover {
-		color: var(--color-blue-08);
-	}
-
-	&.disabled {
-		color: var(--color-gray-04) !important;
-		cursor: not-allowed;
-	}
-	&:focus-visible {
-		outline: 5px solid #003dd6 !important;
-		outline-offset: 0px !important;
-		border-radius: var(--ptc-border-radius-standard);
-	}
-}
-
-.light-links,
-.background-grey-10,
-.background-plm-grey {
-	a:not(
-			.hero-footer-form-wrapper a,
-			ptc-modal inline-form a,
-			.podcast-cta-section a,
-			.vjs-social-share-links a
-		),
-	a.light-link {
-		color: var(--color-blue-04);
-		margin: -2px;
-		border: 2px solid transparent;
-
-		&:visited {
-			color: var(--color-blue-06);
-		}
-
-		&:active,
-		&:visited:active {
-			transition: none;
-			// pressed
-			color: var(--color-blue-07);
-		}
-
-		&:hover,
-		&:visited:hover {
-			color: var(--color-blue-05);
-		}
-
-		&.disabled {
-			color: var(--color-gray-04) !important;
-			cursor: not-allowed;
-		}
-
-		&:focus-visible {
-			border-radius: var(--ptc-border-radius-standard);
-			border: 2px solid rgb(255, 255, 255);
-			outline: 5px solid var(--keyboard-nav-outline);
-		}
-	}
-
-	.podcast-cta-section a {
-		border: 2px solid transparent;
-
-		&:focus-visible {
-			border-radius: var(--ptc-border-radius-standard);
-			border: 2px solid rgb(255, 255, 255);
-			outline: 5px solid var(--keyboard-nav-outline);
-		}
-	}
-}
-
-.ptc-link {
-	color: var(--color-gray-10);
-	text-decoration: underline;
-	text-decoration-thickness: 2px;
-	text-decoration-color: var(--color-green-06);
-	text-underline-offset: 5px;
-	transition: text-decoration-color var(--ptc-transition-medium)
-		var(--ptc-ease-inout);
-
-	&:hover {
-		color: var(--color-green-06);
-	}
-
-	&:visited {
-		color: var(--color-gray-10);
-	}
-
-	&:active,
-	&:visited:active {
-		transition: none;
-		// pressed
-		color: var(--color-green-06);
-	}
-
-	&:hover,
-	&:visited:hover {
-		color: var(--color-green-06);
-	}
-}
-
-.ptc-link-dark {
-	color: var(--color-white);
-	text-decoration: underline;
-	text-decoration-thickness: 2px;
-	text-decoration-color: var(--color-green-06);
-	text-underline-offset: 5px;
-	transition: text-decoration-color var(--ptc-transition-medium)
-		var(--ptc-ease-inout);
-
-	&:hover {
-		color: var(--color-green-06);
-	}
-
-	&:visited {
-		color: var(--color-white);
-	}
-
-	&:active,
-	&:visited:active {
-		transition: none;
-		// pressed
-		color: var(--color-green-06);
-	}
-
-	&:hover,
-	&:visited:hover {
-		color: var(--color-green-06);
-	}
-}
-.vjs-social-share-links {
-	a {
-		color: var(--color-white);
-		&:hover {
-			color: var(--color-white);
-		}
-	}
-}
-
- :host {
-	 display: block;
-	 box-sizing: border-box;
-}
- :host ptc-background-video {
-	 height: 240px;
-}
- @media (min-width: 480px) {
-	 :host ptc-background-video {
-		 height: 320px;
-	}
-}
- @media (min-width: 768px) {
-	 :host ptc-background-video {
-		 height: 450px;
-	}
-}
- @media (min-width: 992px) {
-	 :host ptc-background-video {
-		 height: 500px;
-	}
-}
- :host .fl-header {
-	 cursor: pointer;
-}
- :host .non-mobile-wrapper {
-	 box-sizing: border-box;
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper {
-		 max-width: 1078px;
-		 margin: -75px auto 0 auto;
-		 display: flex;
-		 align-items: center;
-		 width: 100%;
-		 background: var(--color-white);
-		 box-shadow: var(--ptc-shadow-small);
-		 padding: 24px 32px;
-		 z-index: 1;
-		 position: relative;
-		 min-height: 350px;
-	}
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper .header-list-wrap {
-		 padding-right: 16px;
-		 margin-right: 64px;
-		 min-width: 270px;
-		 max-width: 270px;
-		 box-sizing: border-box;
-		 display: flex;
-		 flex-direction: column;
-		 align-items: baseline;
-	}
-	 :host .non-mobile-wrapper .header-list-wrap::after {
-		 content: "";
-		 width: 1px;
-		 height: calc(100% - 48px);
-		 background-color: var(--color-gray-05);
-		 position: absolute;
-		 left: 297px;
-		 top: 24px;
-		 bottom: 24px;
-	}
-}
- @media (min-width: 992px) {
-	 :host .non-mobile-wrapper .content-wrap {
-		 padding-right: 72px;
-	}
-}
- :host .non-mobile-wrapper .fl-header {
-	 border-radius: 4px;
-	 margin: 12px 0;
-	 padding: 4px 8px;
-}
- :host .non-mobile-wrapper .fl-header:hover {
-	 background-color: var(--color-gray-02);
-}
- :host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {
-	 background-color: var(--color-gray-03);
-}
- :host .mobile-wrapper .acc-item {
-	 border-bottom: 1px solid var(--color-gray-03);
-	 padding: 14px 30px;
-}
- :host .mobile-wrapper .acc-item fl-tab-header {
-	 padding-left: 34px;
-	 position: relative;
-}
- :host .mobile-wrapper .acc-item fl-tab-header::before {
-	 content: '';
-	 display: inline-block;
-	 width: 16px;
-	 height: 16px;
-	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_91_790)"><path d="M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z" fill="%23006E09"/></g><defs><clipPath id="clip0_91_790"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
-	 vertical-align: middle;
-	 position: absolute;
-	 left: 0;
-	 top: 4.5px;
-}
- :host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {
-	 background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_113_741)"><path d="M0 7.05566V10.8637H13.913V7.05566H0Z" fill="%23323B42"/></g><defs><clipPath id="clip0_113_741"><rect width="13.913" height="17.92" fill="white"/></clipPath></defs></svg>');
-}
- :host .mobile-wrapper .acc-item fl-tab-content {
-	 padding-left: 34px;
-	 padding-bottom: 18px;
-}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link,
+ptc-square-card,
+.hyphenate-text,
+ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+a {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  text-decoration-line: underline;
+  color: var(--color-hyperlink);
+  transition: color var(--ptc-transition-medium) var(--ptc-ease-out);
+  font-weight: var(--ptc-font-weight-bold);
+}
+a:visited {
+  color: var(--color-blue-10);
+}
+a:active, a:visited:active {
+  transition: none;
+  color: var(--color-blue-09);
+}
+a:hover, a:visited:hover {
+  color: var(--color-blue-08);
+}
+a.disabled {
+  color: var(--color-gray-04) !important;
+  cursor: not-allowed;
+}
+a:focus-visible {
+  outline: 5px solid #003dd6 !important;
+  outline-offset: 0px !important;
+  border-radius: var(--ptc-border-radius-standard);
+}
+
+.light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.podcast-cta-section a,
+.vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links a):active,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links a):active,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.podcast-cta-section a,
+.vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links a):hover,
+.background-grey-10 a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links a):hover,
+.background-plm-grey a:not(.hero-footer-form-wrapper a,
+ptc-modal inline-form a,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.podcast-cta-section a,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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,
+.vjs-social-share-links 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);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--color-green-06);
+  text-underline-offset: 5px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+.ptc-link:hover {
+  color: var(--color-green-06);
+}
+.ptc-link:visited {
+  color: var(--color-gray-10);
+}
+.ptc-link:active, .ptc-link:visited:active {
+  transition: none;
+  color: var(--color-green-06);
+}
+.ptc-link:hover, .ptc-link:visited:hover {
+  color: var(--color-green-06);
+}
+
+.ptc-link-dark {
+  color: var(--color-white);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--color-green-06);
+  text-underline-offset: 5px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+.ptc-link-dark:hover {
+  color: var(--color-green-06);
+}
+.ptc-link-dark:visited {
+  color: var(--color-white);
+}
+.ptc-link-dark:active, .ptc-link-dark:visited:active {
+  transition: none;
+  color: var(--color-green-06);
+}
+.ptc-link-dark:hover, .ptc-link-dark:visited:hover {
+  color: var(--color-green-06);
+}
+
+.vjs-social-share-links a {
+  color: var(--color-white);
+}
+.vjs-social-share-links a:hover {
+  color: var(--color-white);
+}
+
+:host {
+  display: block;
+  box-sizing: border-box;
+}
+
+:host ptc-background-video {
+  height: 240px;
+}
+
+@media (min-width: 480px) {
+  :host ptc-background-video {
+    height: 320px;
+  }
+}
+@media (min-width: 768px) {
+  :host ptc-background-video {
+    height: 450px;
+  }
+}
+@media (min-width: 992px) {
+  :host ptc-background-video {
+    height: 500px;
+  }
+}
+:host .fl-header {
+  cursor: pointer;
+}
+
+:host .non-mobile-wrapper {
+  box-sizing: border-box;
+}
+
+@media (min-width: 992px) {
+  :host .non-mobile-wrapper {
+    max-width: 1078px;
+    margin: -75px auto 0 auto;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--color-white);
+    box-shadow: var(--ptc-shadow-small);
+    padding: 24px 32px;
+    z-index: 1;
+    position: relative;
+    min-height: 350px;
+  }
+}
+@media (min-width: 992px) {
+  :host .non-mobile-wrapper .header-list-wrap {
+    padding-right: 16px;
+    margin-right: 64px;
+    min-width: 270px;
+    max-width: 270px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+  }
+
+  :host .non-mobile-wrapper .header-list-wrap::after {
+    content: "";
+    width: 1px;
+    height: calc(100% - 48px);
+    background-color: var(--color-gray-05);
+    position: absolute;
+    left: 297px;
+    top: 24px;
+    bottom: 24px;
+  }
+}
+@media (min-width: 992px) {
+  :host .non-mobile-wrapper .content-wrap {
+    padding-right: 72px;
+  }
+}
+:host .non-mobile-wrapper .fl-header {
+  border-radius: 4px;
+  margin: 12px 0;
+  padding: 4px 8px;
+}
+
+:host .non-mobile-wrapper .fl-header:hover {
+  background-color: var(--color-gray-02);
+}
+
+:host .non-mobile-wrapper .fl-header.selected, :host .non-mobile-wrapper .fl-header.init-active {
+  background-color: var(--color-gray-03);
+}
+
+:host .mobile-wrapper .acc-item {
+  border-bottom: 1px solid var(--color-gray-03);
+  padding: 14px 30px;
+}
+
+:host .mobile-wrapper .acc-item fl-tab-header {
+  padding-left: 34px;
+  position: relative;
+}
+
+:host .mobile-wrapper .acc-item fl-tab-header::before {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_91_790)"><path d="M15.9001 6.29998H9.7001V0.0999756H6.3001V6.29998H0.100098V9.69998H6.3001V15.9H9.7001V9.69998H15.9001V6.29998Z" fill="%23006E09"/></g><defs><clipPath id="clip0_91_790"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
+  vertical-align: middle;
+  position: absolute;
+  left: 0;
+  top: 4.5px;
+}
+
+:host .mobile-wrapper .acc-item fl-tab-header.selected::before, :host .mobile-wrapper .acc-item fl-tab-header.init-active::before {
+  background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_113_741)"><path d="M0 7.05566V10.8637H13.913V7.05566H0Z" fill="%23323B42"/></g><defs><clipPath id="clip0_113_741"><rect width="13.913" height="17.92" fill="white"/></clipPath></defs></svg>');
+}
+
+:host .mobile-wrapper .acc-item fl-tab-content {
+  padding-left: 34px;
+  padding-bottom: 18px;
+}