@carbon/ibm-products 1.64.0 → 1.65.0

package/css/index-full-carbon.css

@@ -25827,6 +25827,230 @@ th.c4p--datagrid__select-all-toggle-on.button {
   color: #161616 !important;
 }
 
+.c4p--interstitial-screen {
+  position: fixed;
+  z-index: 6001;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+.c4p--interstitial-screen .c4p--carousel {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+}
+.c4p--interstitial-screen .c4p--carousel__elements-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.c4p--interstitial-screen .c4p--carousel__elements {
+  flex: 1;
+}
+.c4p--interstitial-screen .c4p--interstitial-screen--auto-height-container {
+  flex: 1;
+}
+.c4p--interstitial-screen--body {
+  overflow: hidden auto;
+  flex-grow: 1;
+  padding: 0;
+  margin: 0;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--body-grid {
+  height: 100%;
+  padding: 0 !important;
+}
+.c4p--interstitial-screen--body-row {
+  height: 100%;
+}
+.c4p--interstitial-screen--progress {
+  margin: var(--cds-spacing-07, 2rem) var(--cds-spacing-05, 1rem) var(--cds-spacing-04, 0.75rem);
+}
+.c4p--interstitial-screen__carousel {
+  height: 100%;
+}
+.c4p--interstitial-screen__carousel .c4p--carousel__item {
+  flex: 0 0 100% !important;
+}
+.c4p--interstitial-screen--container {
+  min-width: 47rem;
+  max-width: 1312px;
+  margin: calc(var(--cds-spacing-10, 4rem) * 2) auto;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--media-container {
+  overflow: hidden;
+}
+.c4p--interstitial-screen--media {
+  width: 100%;
+  height: 100%;
+  margin-right: calc(var(--cds-spacing-08, 2.5rem) * -1);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--media {
+    margin-right: calc(var(--cds-spacing-07, 2rem) * -1);
+  }
+}
+.c4p--interstitial-screen--stepped-animated-media {
+  overflow: hidden;
+  height: 100%;
+}
+.c4p--interstitial-screen--internal-body {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.c4p--interstitial-screen--internal-header {
+  position: relative;
+  min-height: var(--cds-spacing-09, 3rem);
+  margin-bottom: 0 !important;
+  background-color: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--internal-header:empty {
+  min-height: 0;
+}
+.c4p--interstitial-screen--internal-header h2 {
+  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
+  font-weight: var(--cds-productive-heading-04-font-weight, 400);
+  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
+  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
+  padding: 0 var(--cds-spacing-05, 1rem) var(--cds-spacing-06, 1.5rem);
+}
+.c4p--interstitial-screen--internal-header h2:empty {
+  padding: 0;
+}
+.c4p--interstitial-screen--internal-header--has-title {
+  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+  background: var(--cds-ui-01, #f4f4f4);
+}
+.c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
+  margin-top: 0;
+}
+.c4p--interstitial-screen--internal-header > .c4p--interstitial-screen--close-icon {
+  position: absolute !important;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  width: var(--cds-spacing-09, 3rem);
+}
+.c4p--interstitial-screen--footer {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: flex-end;
+  border-top: 1px solid var(--cds-ui-03, #e0e0e0);
+  background: var(--cds-ui-background, #ffffff);
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--prev-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--next-btn,
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--start-btn {
+  width: 18.75%;
+  min-width: 12.5rem;
+}
+.c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+  max-width: none;
+  flex-grow: 1 !important;
+  padding-left: var(--cds-spacing-07, 2rem) !important;
+}
+.c4p--interstitial-screen--footer-controls {
+  display: flex;
+  flex-direction: row;
+  margin-left: auto;
+}
+.c4p--interstitial-screen--modal .c4p--interstitial-screen--content {
+  margin-top: 0;
+}
+.c4p--interstitial-screen--modal .c4p--interstitial-screen--internal-header:has(> :nth-child(2)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--modal:has(> :nth-child(1)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--container {
+  display: flex;
+  max-width: 100vw;
+  height: 100vh;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+  height: var(--cds-spacing-09, 3rem);
+  padding-left: var(--cds-spacing-05, 1rem);
+  border-bottom: 1px solid var(--cds-ui-03, #e0e0e0);
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  background-color: #161616;
+  /* stylelint-disable-next-line carbon/theme-token-use */
+  color: #f4f4f4;
+  font-weight: normal !important;
+  line-height: var(--cds-spacing-09, 3rem) !important;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header b {
+  font-weight: var(--cds-heading-01-font-weight, 600);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header > h2 {
+  padding: var(--cds-spacing-05, 1rem) var(--cds-spacing-08, 2.5rem) 0;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
+  margin: var(--cds-spacing-10, 4rem) var(--cds-spacing-08, 2.5rem) var(--cds-spacing-04, 0.75rem);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
+    margin-left: var(--cds-spacing-07, 2rem);
+  }
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
+  margin-top: var(--cds-spacing-06, 1.5rem);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header:has(> :nth-child(1)) {
+  min-height: initial;
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+  padding-left: var(--cds-spacing-08, 2.5rem) !important;
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
+    padding-left: var(--cds-spacing-07, 2rem) !important;
+  }
+}
+
+.c4p--interstitial-screen-view {
+  height: 100%;
+}
+
+.c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen-view-module--heading {
+  font-size: var(--cds-expressive-heading-05-font-size, 2rem);
+  font-weight: var(--cds-expressive-heading-05-font-weight, 400);
+  line-height: var(--cds-expressive-heading-05-line-height, 1.25);
+  letter-spacing: var(--cds-expressive-heading-05-letter-spacing, 0);
+  margin-bottom: var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen-view-module--body {
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
+}
+
+.c4p--interstitial-screen--modal .c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-11, 5rem) var(--cds-spacing-07, 2rem);
+}
+.c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
+  margin: var(--cds-spacing-12, 6rem) var(--cds-spacing-08, 2.5rem);
+}
+@media (max-width: 81.98rem) {
+  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
+    margin: var(--cds-spacing-12, 6rem) var(--cds-spacing-07, 2rem);
+  }
+}
+
 /* stylelint-disable declaration-no-important */
 .c4p--checklist__header {
   display: flex;