/******************************* ** COLOR VARIABLES FOR LIGHT & DARK MODE -- START ********************************/ :root { /* ======================= BRAND COLORS (LIGHT) ======================= */ --brand-bg-1: #F5EEF1; /* purple100 */ --brand-bg-2: #EADDE4; /* purple200 */ --brand-border: #C9A6B8; /* purple300 */ --brand-hover: #AD1F74; /* purple600 */ --brand: #7D2855; /* purple700 */ /* ======================= NEUTRAL COLORS (LIGHT) ======================= */ --page-bg: #FBFCFD; /* gray200 */ --neutral-bg-0: #FFFFFF; /* gray100 */ --neutral-bg-1: #F6F6F7; /* gray300 */ --neutral-bg-2: #EDEFF0; /* gray400 */ --neutral-border-table: #EDEFF0; /* gray400 */ --neutral-border-1: #DADCDE; /* gray500 */ --neutral-border-2: #B4BABE; /* gray600 */ --neutral-disabled: #899297; /* gray700 */ --neutral-text-subtle: #697074; /* gray800 */ --neutral-text-invert: #FFFFFF; /* gray100 */ --neutral-text: #1E2022; /* gray1100 */ --neutral-text-white-static: #FFFFFF; /* gray100 */ --neutral-text-gray-static: #1E2022; /* gray1100 */ --neutral-choice: #1E2022; /* gray1100 */ /* ======================= OTHER UI VARIABLES (LIGHT) ======================= */ --background-color: var(--neutral-bg-1); /* Default page background */ --surface-color: #F6F6F7; /* For surfaces/cards */ --text-color: var(--neutral-text); /* Main text */ --secondary-text-color: var(--brand); /* Secondary text/accent */ --border-color: var(--neutral-border-1); --card-bg: var(--neutral-bg-0); --card-shadow: 0 0 7px 0 rgba(0, 0, 0, .1); --site-link-color: var(--brand); --site-link-hover-color: var(--brand-hover); --site-link-visited-color: var(--brand); --highlight-bg: #ddf7ff; --highlight-border: #006a8a; --button-bg: #128A7C; --button-hover-bg: var(--brand); --footer-bg: var(--brand); --footer-text: #fff; --danger: #FF006E; --danger-bg: #FF006E; --danger-hover-bg: var(--brand-hover); --input-bg: var(--neutral-bg-0); --input-border: #FF006E; --input-text: var(--neutral-text); } [data-bs-theme="dark"], html[data-bs-theme="dark"] { /* ======================= BRAND COLORS (DARK) ======================= */ --brand-bg-1: #282B2C; /* gray1000 */ --brand-bg-2: #7D2855; /* purple700 */ --brand-border: #C9A6B8; /* purple300 */ --brand-hover: #AD1F74; /* purple600 */ --brand: #FFAAC8; /* custom for dark */ /* ======================= NEUTRAL COLORS (DARK) ======================= */ --page-bg: #282B2C; /* gray1000 */ --neutral-bg-0: #1E2022; /* gray1100 */ --neutral-bg-1: #282B2C; /* gray1000 */ --neutral-bg-2: #3A3E40; /* gray900 */ --neutral-border-table: #3A3E40; /* gray900 */ --neutral-border-1: #697074; /* gray800 */ --neutral-border-2: #B4BABE; /* gray600 */ --neutral-disabled: #697074; /* gray800 */ --neutral-text-subtle: #899297; /* gray700 */ --neutral-text-invert: #1E2022; /* gray1100 */ --neutral-text: #FBFCFD; /* gray200 */ --neutral-text-white-static: #FFFFFF; /* gray100 */ --neutral-text-gray-static: #1E2022; /* gray1100 */ --neutral-choice: #FBFCFD; /* gray200 */ /* ======================= OTHER UI VARIABLES (DARK) ======================= */ --background-color: var(--neutral-bg-1); --surface-color: #232326; --text-color: var(--neutral-text); --secondary-text-color: var(--brand); --border-color: var(--neutral-border-1); --card-bg: var(--neutral-bg-0); --card-shadow: 0 0 7px 0 rgba(0, 0, 0, .4); --site-link-color: var(--brand); --site-link-hover-color: var(--brand-hover); --site-link-visited-color: var(--brand); --highlight-bg: #232d36; --highlight-border: #4B0F41; --button-bg: #128A7C; --button-hover-bg: var(--brand); --footer-bg: var(--neutral-bg-0); --footer-text: #EADDE4; --danger: #FF006E; --danger-bg: var(--brand-hover); --danger-hover-bg: var(--brand); --input-bg: var(--neutral-bg-0); --input-border: #FF006E; --input-text: var(--neutral-text); } /******************************* ** COLOR VARIABLES FOR LIGHT & DARK MODE -- END ********************************/ site-primary-header-section[_nghost-serverapp-c3898142783] { background: var(--neutral-bg-0) !important; } `` /* Force header nav link color to your brand */ [_nghost-serverApp-c2481267116] .nav-bar-nav[_ngcontent-serverApp-c2481267116] ul[_ngcontent-serverApp-c2481267116] li[_ngcontent-serverApp-c2481267116] a[_ngcontent-serverApp-c2481267116] { color: var(--brand) !important; } /* Ensure visited/hover/focus remain on brand (optional but recommended) */ [_nghost-serverApp-c2481267116] .nav-bar-nav[_ngcontent-serverApp-c2481267116] ul[_ngcontent-serverApp-c2481267116] li[_ngcontent-serverApp-c2481267116] a[_ngcontent-serverApp-c2481267116]:visited { color: var(--brand) !important; } [_nghost-serverApp-c2481267116] .nav-bar-nav[_ngcontent-serverApp-c2481267116] ul[_ngcontent-serverApp-c2481267116] li[_ngcontent-serverApp-c2481267116] a[_ngcontent-serverApp-c2481267116]:hover, [_nghost-serverApp-c2481267116] .nav-bar-nav[_ngcontent-serverApp-c2481267116] ul[_ngcontent-serverApp-c2481267116] li[_ngcontent-serverApp-c2481267116] a[_ngcontent-serverApp-c2481267116]:focus { color: var(--brand) !important; text-decoration: underline; /* optional: keeps accessibility affordance */ } /******************************* ** EXISTING CSS STYLING IN LIVE CLARIO HELP ** STYLES START ********************************/ :root { --custom-text-color: #11181C; } html[data-bs-theme="dark"] { --custom-text-color: var(--body-color); } site-document a { text-underline-offset: .3em; } .landing-category-section .category-title { color: #11181C; font-size: 1.5rem; font-weight: bold; } .landing-category-section .col-block { border-radius: 4px; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .1); flex: 0 0 30% !important; margin: 0 3% 35px 0; max-width: 30%; padding: 20px; position: relative; text-align: center; width: 30% } @media (max-width: 768px) { .landing-category-section .col-block { flex: 0 0 100% !important; max-width: 100%; margin: 0 0 35px 0; } } .landing-category-section .col-block a { flex-direction: column; align-items: center; } .landing-category-section .col-block .category-l { width: 40px; height: 40px; flex-basis: 54px; position: relative; } .landing-category-section .col-block .category-l img { height: auto; max-width: 100%; position: absolute; bottom: 2%; } .landing-category-section .col-block .category-r { width: 100%; line-height: 54px; height: 54px; text-align: center; } .landing-category-section .col-block .category-r h3 { line-height: 1.5; display: inline-block; vertical-align: middle; } .landing-category-section .col-block .more-icon { display: none; } .landing-category-section .col-block:hover { box-shadow: 0 0 20px 0 #eaeaea; text-decoration: none } .clario-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-block-end: 2rem; } @media (min-width: 780px) { .clario-grid { grid-template-columns: repeat(4, 1fr); } } .clario-grid a { text-decoration: none; color: #11181C; } .clario-grid a:hover { opacity: 70%; } .clario-card { display: flex; flex-direction: column; } .clario-card>.clario-card__header { color: var(--custom-text-color); font-size: 1.125rem; font-weight: bold; } .clario-card__header { color: var(--custom-text-color); font-size: 1.5rem; font-weight: bold; } .clario-card__description { color: var(--custom-text-color); line-height: 1.5; } .clario-card__image { max-width: 100%; height: auto; border-radius: 8px; } footer .basic-footer a[href="https://clario.com/contact/customer-support/"] { background: #0e8574; color: #ffffff !important; border-radius: 3px; padding: 2px 10px 3px; text-decoration: none !important; } ul.widget_links li { background: white; border-radius: 3px; border: 1px solid #D7DBDF; padding: 16px !important; margin-bottom: 16px !important; padding-left: 48px !important; } ul.widget_links li:before { padding: 12px !important; margin-bottom: 12px !important; } .widget_block h3 { margin: auto; } /* Two Column Row Styles */ .clario-row-wrapper { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem; margin-block-end: 2rem; } .clario-row-wrapper .clario-text { flex-grow: 1; flex-basis: calc((20rem - 100%) * 999); min-inline-size: 20rem; } .clario-row-wrapper .clario-image { flex-grow: 1; flex-basis: calc((20rem - 100%) * 999); min-inline-size: 30rem; } @media screen and (max-width: 500px) { .clario-row-wrapper .clario-image { min-inline-size: 100%; } } .clario-modalities-list { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: space-between; max-inline-size: 80rem; margin-inline: auto; margin-block: 4rem; } .clario-modality { display: flex; flex-direction: column; align-items: center; gap: .5rem; } .clario-categories-list { container-type: inline-size; container-name: categorieslist; display: grid; gap: 4rem; grid-template-columns: 1fr 1fr; } .clario-category { display: flex; flex-direction: column; } .clario-category a { margin-inline-start: 1rem; } @container categorieslist (max-width: 800px) { .clario-category { grid-column: span 2; } } /* eCOA Help Template */ .clario-section { display: grid; gap: 2rem; grid-template-columns: minmax(50px, 1fr) minmax(50px, 1fr); margin-block: 3rem; align-items: center; justify-content: space-between; } .clario-section__card-list { grid-column: 1/3; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .clario-section__card { position: relative; background-color: white; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } html[data-bs-theme="dark"] .clario-section__card { background-color: var(--header-secondary-bg); } .clario-section__card ul li label { display: inline; } .clario-section__card-color { background-color: #7d2855; color: white; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .clario-section__card h3 { font-size: 1.3rem; margin-block: 1rem; } @media screen and (max-width: 800px) { .clario-section, .clario-section__card-list { grid-template-columns: 1fr; } .clario-section__card-list { grid-column: 1/2 } .clario-section img { display: none; } } /* Home Link Restyling */ #doc_feedback_collect .feedback_txt:after { display: none !important; } .clario-section__card-list-offset { grid-column: 1/3; display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; } .clario-section__card-list-offset-2 { grid-column: 1/4; display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; } .clario-section__card-list-equal-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .clario-section__card-list-equal-3 { grid-column: 1/3; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } /* * Scroll-to-top vs Genesys chat launcher * Document360 now uses .scroll-to-top (legacy .back-to-top kept hidden). * Default bottom/right collides with #genesys-mxg-frame (~72px at bottom:12px / right:20px). * Lift scroll-to-top above the launcher so both stay usable. */ .back-to-top { display: none !important; } .scroll-to-top { bottom: 100px !important; /* 12px + 72px launcher + ~16px gap */ right: 36px !important; /* optically center over 72px launcher at right:20px */ z-index: 100000000 !important; /* below Genesys frame stack if it opens a panel higher */ } /* Customer Care Grid */ .clario-grid-CC { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .clario-grid-CC * { display: grid; justify-content: center; align-items: center; } /* Clario Know How Video Tutorials */ .clario-section__video-card { background-color: white; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); display: grid; grid-template-rows: auto 1fr auto; /* Defines three rows: header, content, and image */ height: 100%; /* Ensures the card takes up the full height of its container */ } .clario-section__video-card h2 { margin: 0; /* Removes default margin to ensure alignment */ } .clario-section__video-card p { margin: 0; /* Removes default margin to ensure alignment */ } .clario-section__video-card img { align-self: end; /* Aligns the image to the bottom of the card */ } .clario-section__card-list-offset-3 { grid-column: 1/5; display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; } .highlight { background-color: #7d2855; } .grid-item { padding: 20px; text-align: left; color: white; } .clario-grid-5 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; column-gap: 1rem; row-gap: .25rem; } /* Bespoke Grids - 3 Columns*/ .clario-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1 fr; gap: 1rem; } /* Bespoke Grids - 2 Columns with 2 Rows in the First Column*/ .clario-grid-2col2row { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1 fr; gap: 1rem; } .column-1-2c-2r { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; } .column-2-2c-2r { display: flex; flex-direction: column; justify-content: space-between; } /* Bespoke Card Variations */ .clario-section__cardz { width: 100%; height: 100%; background-color: white; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); display: flex; justify-content: center; align-items: center; } [data-bs-theme="light"] .custom-background-3 { background-color: #EADDE4; color: black; } /* Clario Know-How Video Tutorials */ .clario-section__card-v { background-color: white; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; justify-content: space-between; height: 100%; /* Ensure the card takes up the full height */ } .text-content { flex-grow: 1; /* Allows the text content to take up available space */ } .video-view { margin-top: auto; /* Pushes the video container to the bottom */ position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; max-width: 100%; background: #000; } .video-view video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; object-fit: contain; /* Ensures the video fits within the container without cropping */ } .other-text { margin-top: 50px; /* Adjust the margin to ensure it doesn't overlap with the card */ } /* View More and View Less Buttons on Home Page */ .clario-view-more-button, .clario-view-less-button { grid-column: 1/5; max-width: fit-content; margin: 0 auto; background: #4B0F41; color: white !important; border-radius: 4px; padding: 1rem; text-decoration: none; text-align: center; font-family: Nunito, sans-serif; font-size: 1rem; font-weight: 400; border: none; display: none; /* Initially hidden */ } .clario-view-more-button:hover, .clario-view-less-button:hover { background-color: #7D2855; text-decoration: underline; text-underline-offset: .3em; } .--hidden { display: none; } .clario-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .clario-grid.centered-1 { grid-template-columns: 1fr 1fr 1fr 1fr; } @media (min-width:768px) { .clario-grid { grid-template-columns: 1fr 1fr 1fr 1fr !important; } } .clario-grid.centered-2 { grid-template-columns: 1fr 1fr 1fr 1fr; } .clario-grid.centered-3 { grid-template-columns: 1fr 1fr 1fr 1fr; } /* Image */ .clario-image { display: flex; justify-content: center; align-items: center; } .clario-image img { border-radius: 10px; outline: 3px solid #ccc; inline-size: 100%; } /* Items below this line added 15JAN2025 */ /* eCOA Help Carousel */ /* Carousel */ .carousel { position: relative; width: 100%; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease; } .carousel-item { min-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .prev { border-top-left-radius: 25px; /* Round top-left corner */ border-bottom-left-radius: 25px; /* Round bottom-left corner */ background-color: #ffffff; /* Button color */ color: 1e2022; /* Text color */ border-color: #1e2022; padding: 10px 0; /* Padding for size */ cursor: pointer; /* Pointer cursor on hover */ width: 50%; /* Each button covers 50% of the width */ text-align: center; /* Center text */ font-size: 24px; /* Adjust font size as needed */ } .next { border-top-right-radius: 25px; /* Round top-right corner */ border-bottom-right-radius: 25px; /* Round bottom-right corner */ background-color: #128A7C; /* Button color */ color: white; /* Text color */ border-color: #1e2022; padding: 10px 0; /* Padding for size */ cursor: pointer; /* Pointer cursor on hover */ width: 50%; /* Each button covers 50% of the width */ text-align: center; /* Center text */ font-size: 24px; /* Adjust font size as needed */ } /* Progress dots */ .carousel-dots { text-align: center; padding-top: 10px; } .carousel-dots .dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background-color: #ccc; border-radius: 50%; cursor: pointer; } .carousel-dots .dot.active { background-color: #7d2855; } /* Specific styles for different carousels */ .carousel-1, .carousel-2, .carousel-3 { width: 100%; height: 500px; overflow: hidden; position: relative; } .carousel-1 .carousel-inner, .carousel-2 .carousel-inner, .carousel-3 .carousel-inner { height: 100%; } .carousel-1 .carousel-item, .carousel-2 .carousel-item, .carousel-3 .carousel-item { height: 100%; } /* Specific styles for different image heights */ .carousel-item.item-95 img { max-width: 95%; max-height: 95%; object-fit: contain; } .carousel-item.item-75 img { max-width: 100%; max-height: 75%; object-fit: contain; } .carousel-item.item-70 img { max-width: 100%; max-height: 70%; object-fit: contain; } .carousel-item.item-65 img { max-width: 100%; max-height: 65%; object-fit: contain; } .carousel-item.item-60 img { max-width: 100%; max-height: 60%; object-fit: contain; } .carousel-item.item-55 img { max-width: 100%; max-height: 55%; object-fit: contain; } .carousel-item.item-50 img { max-width: 100%; max-height: 50%; object-fit: contain; } .carousel-item.item-40 img { max-width: 100%; max-height: 40%; object-fit: contain; } .carousel-item.item-35 img { max-width: 100%; max-height: 35%; object-fit: contain; } .carousel-item.item-32 img { max-width: 100%; max-height: 32%; object-fit: contain; } .carousel-item.item-31 img { max-width: 100%; max-height: 31%; object-fit: contain; } .carousel-item.item-29 img { max-width: 100%; max-height: 29%; object-fit: contain; } .carousel-item.item-20 img { max-width: 100%; max-height: 20%; object-fit: contain; } /* Article Elements */ .article-card { background-color: white; border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); display: flex; justify-content: center; align-items: center; } .article-card img { max-width: 100%; height: auto; border-radius: 10px; outline: 3px solid #ccc; inline-size: 100%; } /* Article Grids */ .article-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; /* Adjust the height based on content */ column-gap: 1rem; /* Reduce the gap between columns */ } .article-grid__main-content { display: flex; flex-direction: column; justify-content: space-between; /* Space the card to align with top and bottom */ grid-column: 1 / 2; grid-row: 1 / 6; /* Span all five rows */ background-color: lightblue; /* For visualization */ } .article-grid__side-content { display: grid; grid-template-rows: repeat(5, auto); /* Adjust the height of rows based on content */ gap: 1rem; /* This adds space between the rows */ grid-column: 2 / 3; } .article-grid__side-content>.clario-section__card, .article-grid__main-content>.clario-section__card { width: 100%; /* Make the card width fill the container */ padding: 1rem; box-sizing: border-box; } .article-grid__main-content>.clario-section__card { height: 100%; /* Ensure the card height fills the full height of the column */ } /* Getting Started Elements */ .modality-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Four equal columns */ gap: 1rem; /* Space between the grid items */ } .modality-box { border-radius: 4px; border: 1px solid var(--brand-9, #4B0F41); background: var(--white, #FFF); box-shadow: 0px 7px 14px -5px rgba(37, 38, 39, 0.10), 0px 3px 5px -2px rgba(37, 38, 39, 0.08); padding: 1rem; /* Add some padding inside the boxes */ box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */ } .modality-card { display: flex; flex-direction: column; } .modality-card>.modality-card__header { color: #11181C; font-size: 1.125rem; font-weight: bold; } .modality-card__header { color: #11181C; font-size: 1.5rem; font-weight: bold; } .modality-card__description { color: #11181C; line-height: 1.5; } .modality-card__image { max-width: 100%; height: auto; border-radius: 8px; } .clario-section .category-title { color: #11181C; font-size: 1.5rem; font-weight: bold; } .clario-section__card blockquote { background: #ddf7ff; border-left: 4px solid #006a8a; padding: 10px; margin: 0; /* Remove default margin */ margin-top: auto; /* Push blockquote to the bottom */ } .clario-section__card .content-wrapper { flex: 1; /* Take up remaining space */ } .custom-background { background-color: #e9e9e9; color: black; /* Replace with your desired color */ } .custom-background-2 { background-color: #ffaac8; color: black; /* Replace with your desired color */ } .grid-gettingstarted-1 { display: grid; grid-template-columns: 1fr 3fr; gap: 2rem; } .grid-gettingstarted-2 { display: grid; grid-template-columns: 3fr 1fr; gap: 2rem; } .grid-tab-gettingstarted-1 { display: grid; grid-template-columns: 1.5fr 2.5fr; gap: 2rem; } .grid-tab-gettingstarted-2 { display: grid; grid-template-columns: 2.5fr 1.5fr; gap: 2rem; } .grid-hh-gettingstarted-1 { display: grid; grid-template-columns: 2.5fr 1.5fr; gap: 2rem; } .grid-hh-gettingstarted-2 { display: grid; grid-template-columns: 1.5fr 2.5fr; gap: 2rem; } .grid-4links { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2rem; } .white-box { background-color: #ffffff; /* White background */ border-radius: 4px; padding: 1rem; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .1); } .bubble { position: absolute; /* Position relative to the card */ bottom: -10px; /* Adjust to position the bubble correctly */ right: 10px; /* Adjust to position the bubble correctly */ background-color: #ff699b; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; padding-top: 12px; justify-content: center; font-size: 24px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Optional: add a shadow for better visibility */ z-index: 10; /* Ensure the bubble is above the card's content */ pointer-events: none; /* Ensure the bubble doesn't interfere with card interactions */ } .no-break { word-break: normal; /* Prevent words from breaking */ overflow-wrap: break-word; /* Ensure long words break correctly */ white-space: normal; /* Allow text to wrap to the next line */ overflow: hidden; /* Hide overflow */ text-overflow: ellipsis; /* Show ellipsis if text overflows */ max-width: 100%; /* Ensure it respects the container's width */ } .image-container { display: flex; justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ height: 100%; /* Ensure the container takes up the full height */ } /* Media Query Ensuring Mobile View */ @media (max-width: 60rem) { .clario-grid { grid-template-columns: 1fr; } .clario-section { grid-template-columns: 1fr; } .clario-section__card-list { grid-template-columns: 1fr; } .clario-section__card-list-offset { grid-template-columns: 1fr; } .clario-section__card-list-offset-2 { grid-template-columns: 1fr; } .clario-section__card-list-offset-3 { grid-template-columns: 1fr; } .clario-section__card-list-equal-3 { grid-template-columns: 1fr; } .grid-gettingstarted-1 { grid-template-columns: 1fr; } .grid-gettingstarted-2 { grid-template-columns: 1fr; } .grid-tab-gettingstarted-1 { grid-template-columns: 1fr; } .grid-tab-gettingstarted-2 { grid-template-columns: 1fr; } .grid-hh-gettingstarted-1 { grid-template-columns: 1fr; } .grid-hh-gettingstarted-2 { grid-template-columns: 1fr; } .grid-4links { grid-template-columns: 1fr; } .modality-grid { grid-template-columns: 1fr; } .article-grid { grid-template-columns: 1fr; } .clario-grid-5 { grid-template-columns: 1fr; } .clario-grid-3col { grid-template-columns: 1fr; } .clario-grid-2col2row { grid-template-columns: 1fr; } .column-1-2c-2r { grid-template-columns: 1fr; } .column-2-2c-2r { grid-template-columns: 1fr; } .clario-grid-CC { grid-template-columns: 1fr; } .clario-categories-list { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mobile-friendly .clario-grid { display: flex; flex-direction: column; } .mobile-friendly .clario-card { margin-bottom: 20px; /* Add some space between the cards */ } } /* Migration Starts Here */ .landing-category-section { display: flex; flex-wrap: wrap; justify-content: center; padding: 40px 0 20px; } .landing-category-section .category-title { color: #11181C; font-size: 1.5rem; font-weight: bold; padding: 0 0 40px; text-align: center; width: 100%; } .image-with-text-section a { background: #4B0F41; color: white !important; border-radius: 4px; padding: 1rem; margin-top: .5rem; margin-bottom: .5rem; text-decoration: none; display: inline-block; width: 14rem; text-align: center; } .image-with-text-section a:hover { background: #7D2855; text-decoration: underline; } .multicolumn-card-content site-action-card-element a { flex-direction: column; align-items: center; } .fluid-layout site-multi-column-card-section .container, .fluid-layout .custom_block .container, .fluid-layout site-image-with-text-section .container { margin: 0 auto; } @media screen and (min-width: 1084px) { .fluid-layout site-multi-column-card-section .container, .fluid-layout .custom_block .container, .fluid-layout site-image-with-text-section .container { max-width: calc(100% - 4vw); width: calc(100% - 4vw); } } @media screen and (min-width: 1795px) { .fluid-layout site-multi-column-card-section .container, .fluid-layout .custom_block .container, .fluid-layout site-image-with-text-section .container { max-width: 1140px; } } /* General Addition */ /*Global CSS*/ .resources-section .toc-accordion { border-left: none !important; } .resources-section .toc-accordion .ng-scroll-content>ul { border-left: 1px solid var(--border-color); } /*Hero Section*/ .hero-section h1 { line-height: 1.3; } .hero-section .text-area { font-size: 1.0625rem; } @media (max-width: 576px) { .hero-section .text-area { font-size: .875rem; } } /*Multicard Section*/ [data-bs-theme="dark"] .multicolumn-card-content .action-card { background: var(--header-secondary-bg); } /*Based on the font selection below css needed*/ .category-index-page .category-index-list .page-content { font-size: .9375rem; line-height: 1.7; padding-bottom: 10px; } .category-index-page .category-index-list .page-info li { font-size: .875rem !important; } .article-info .article-info-top li { font-size: .8125rem !important; } /*Set default font color for call outs*/ #articleContent #callout-container { color: #18181b; } /*Set anger tag colors for all the section like callouts article content*/ #articleContent a { color: var(--site-link-color); } #articleContent a:hover { color: var(--site-link-hover-color); } #articleContent a:visited { color: var(--site-link-visited-color); } @media screen and (max-width: 768px) { .sticky-top .sticky-content .sticky-article-title { margin-top: 0px !important; } } .multicolumn-card-content .card-image { flex: auto !important; } .multicolumn-card-content .card-image .card-icon { height: 40px !important; width: 40px !important; line-height: normal !important; font-size: inherit !important; } .action-card-element h3 { font-size: 1.125rem; text-align: center; line-height: 1.5; margin-bottom: 0px !important; } @media (min-width:1024px) { .multicolumn-card-content site-action-card-element { flex: 0 1 16% !important; } } @media (max-width:768px) { .multicolumn-card-content .card-image { flex: 0 0 55px !important; } } .details-wrapper { display: flex; margin: 12px 0; position: relative; } /******************************* ** WOW SITES TEAM ** STYLES START ********************************/ :root { --color-primary: #4B0F41; --color-primary-light: #7D2855; --color-secondary: #FF006F; --color-border: #D5D5D5; --color-smoke: #E9E9E9; --color-white: #fff; --color-dark: #000; } /*Default*/ .innovate site-home-page h1, .innovate site-home-page h2, .innovate site-home-page h3, .innovate site-home-page h4, .innovate site-home-page h5, .innovate site-home-page h6, .innovate site-home-page p, .innovate site-home-page span, .innovate site-home-page a, .innovate site-home-page input, .innovate site-home-page label, .innovate site-home-page li { font-family: "Arial" !important; font-weight: 400; } .innovate site-home-page a { text-decoration: none; } /*Layout*/ .innovate site-home-page .container, .innovate site-home-page site-primary-header-section .nav-bar.primary-nav-bar { width: 90% !important; max-width: 90% !important; padding: 0; padding-inline: 0 !important; margin: 0 auto !important; } @media screen and (min-width: 1400px) { .innovate site-home-page .container, .innovate site-home-page site-primary-header-section .nav-bar.primary-nav-bar { width: 1280px !important; max-width: 1280px !important; } } @media screen and (max-width: 1366px) { .innovate site-home-page .container, .innovate site-home-page site-primary-header-section .nav-bar.primary-nav-bar { width: 85% !important; max-width: 85% !important; } } .section__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } @media screen and (max-width: 1080px) { .section__row { justify-content: center; } } @media screen and (max-width: 600px) { .section__row { flex-direction: column; } } .col--6 { width: calc(66.66% - 24px); } .col--3 { width: 100%; height: 100%; min-width: 0; } @media screen and (max-width: 1080px) { .column { width: calc(50% - 20px); } } @media screen and (max-width: 600px) { .column { width: 100%; } } /*Typography*/ .innovate site-home-page .heading--section { font-size: 36px; line-height: 44px; color: var(--color-dark); margin: 0 0 32px; } .innovate site-home-page .heading--sub, .innovate .widget-section-content h3 { font-size: 24px; line-height: 34px; color: var(--color-primary); margin: 0 0 24px; } .innovate site-home-page p, .innovate site-home-page a, .innovate site-home-page span { font-size: 16px; line-height: 24px; } .innovate site-home-page p { color: var(--color-primary); margin: 0 0 16px; } .innovate site-home-page p:last-child { margin: 0; } /*Global*/ .innovate site-home-page header+div { min-height: 100vh !important; } .innovate site-home-page figure { margin: 0; } .innovate site-home-page section { padding: 60px 0; } body:has(.innovate) { background: var(--color-white); } /*HEADING ICON*/ .heading__icon { display: flex; align-items: center; margin-bottom: 24px; } .heading__icon img { width: 60px; height: auto; } .heading__icon .heading--sub { padding-left: 16px; margin: 0 !important; } /*BUTTON CTA*/ .button--cta { color: var(--color-white) !important; display: inline-block; padding: 10px 22px; background: transparent; border: 1px solid var(--color-secondary); } /*Header*/ .innovate site-primary-header-section { max-height: initial !important; } .innovate site-primary-header-section { background: var(--color-primary) !important; } site-primary-header-section { background: var(--color-white) !important; } .innovate site-primary-header-section .nav-bar.primary-nav-bar { height: auto !important; padding-top: 16px !important; padding-bottom: 16px !important; } .innovate site-primary-header-section .nav-bar.primary-nav-bar { padding: 16px 0 !important; } .fluid-layout.innovate .router-container:has(> site-document) site-primary-header-section .nav-bar.primary-nav-bar { padding: 16px 24px !important; } body:has(.footer__customer-care) site-home-page site-primary-header-section .nav-bar-brand { position: relative; } body:has(.footer__customer-care) site-home-page site-primary-header-section .nav-bar-brand::before { content: ""; width: 140px; height: 19px; display: block; background: url(https://cdn.document360.io/c5e1f7bc-fe3f-41f4-aec9-2503613a7b20/Images/Documentation/logo_mixed.png?sv=2026-02-06&spr=https&st=2026-10-21T05%3A44%3A25Z&se=2026-10-21T05%3A54%3A25Z&sr=c&sp=r&sig=jYvY65eRGRveo%2FWruib9jyF%2FsCZjqKWQDjB64Z2OOwU%3D) no-repeat center; background-size: cover; } body:has(.footer__customer-care) site-home-page site-primary-header-section .nav-bar-brand img { display: none; } site-primary-header-section .nav-bar-brand img { width: 140px !important; max-width: initial !important; height: auto !important; min-height: initial !important; max-height: initial !important; } .innovate site-primary-header-section .nav-bar-brand img { filter: brightness(0) invert(1); } .innovate .nav-bar.primary-nav-bar::after, .innovate .primary-nav-bar-container::after, .innovate .project-workspace-btn i { display: none !important; } .innovate site-primary-header-section ul a span, .innovate .project-workspace-btn span, .innovate .project-workspace[_ngcontent-serverApp-c2609752046] .project-workspace-btn[_ngcontent-serverApp-c2609752046] i[_ngcontent-serverApp-c2609752046], .innovate .project-language-btn { font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; } @media screen and (min-width: 1200px) { body:has(site-home-page) .innovate site-primary-header-section ul a span, body:has(site-home-page) .innovate .project-workspace-btn span, body:has(site-home-page) .innovate site-primary-header-section .dropdown-toggle::after, body:has(site-home-page) .project-workspace[_ngcontent-serverApp-c2609752046] .project-workspace-btn[_ngcontent-serverApp-c2609752046] i[_ngcontent-serverApp-c2609752046], body:has(site-home-page) .innovate .project-language-btn, body:has(site-home-page) .innovate header .btn-icon i { color: var(--color-white) !important; } } .innovate site-primary-header-section ul li a:hover { text-decoration: none !important; } .innovate header .btn-icon i { font-size: 20px; line-height: 30px; } .innovate header .btn-secondary:hover, .innovate header .btn-secondary.show { background: rgba(255, 255, 255, 0.1) !important; } .innovate header .divider { border-image: 0 !important; border-color: transparent !important; } /*Banner Section*/ .innovate site-home-page site-hero-section .hero-section { height: auto; position: relative; padding: 120px 0 !important; background: var(--color-white); } @media screen and (max-width: 820px) { .innovate site-home-page site-hero-section .hero-section { padding: 60px 0 !important; } } .innovate site-home-page site-hero-section .hero-section .container { position: relative; } .innovate site-home-page site-hero-section .hero-section h1, .innovate site-home-page site-hero-section .hero-section .text-area { color: var(--color-dark) !important; width: 50%; } @media screen and (max-width: 820px) { .innovate site-home-page site-hero-section .hero-section h1, .innovate site-home-page site-hero-section .hero-section .text-area { width: 100%; position: relative; z-index: 8; } } .innovate site-home-page site-hero-section .hero-section h1 { font-size: 56px; line-height: 66px; margin: 0 0 24px !important; } @media screen and (max-width: 1240px) { .innovate site-home-page site-hero-section .hero-section h1 { font-size: 40px; line-height: 50px; } } @media screen and (max-width: 600px) { .innovate site-home-page site-hero-section .hero-section h1 { font-size: 32px; line-height: 42px; } } .innovate site-home-page site-hero-section .hero-section .text-area { font-size: 18px; line-height: 28px; padding: 0 !important; } .innovate site-home-page site-hero-section .hero-section .search-box { width: 50% !important; position: relative; padding: 0 6px 0 12px !important; margin: 32px 0 0 !important; background: var(--color-white) !important; border-color: var(--color-border) !important; border-radius: 0 !important; z-index: 8; } @media screen and (max-width: 820px) { .innovate site-home-page site-hero-section .hero-section .search-box { width: 100% !important; } } .innovate site-home-page site-hero-section figure { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 5; } @media screen and (max-width: 820px) { .innovate site-home-page site-hero-section figure { position: relative; top: 0; right: auto; left: 0; transform: translateY(0); margin-bottom: 24px; } } .innovate site-home-page site-hero-section figure img { width: auto; height: 360px; } @media screen and (max-width: 1080px) { .innovate site-home-page site-hero-section figure img { height: 280px; } } @media screen and (max-width: 900px) { .innovate site-home-page site-hero-section figure img { height: 240px; } } @media screen and (max-width: 600px) { .innovate site-home-page site-hero-section figure img { width: 33.33%; height: auto; } } /*Categories Section*/ section.categories .column { position: relative; padding: 24px 24px 56px; background: var(--color-white); box-shadow: 0 6px 10px rgba(0, 0, 0, .1); } section.categories ul { list-style: none; padding: 0; } section.categories ul li:not(:last-child) { margin-bottom: 12px; } section.categories ul li a { color: var(--color-primary); } section.categories .link--more { color: var(--color-primary); position: absolute; bottom: 24px; left: 24px; } section.categories .link--more::after { content: ""; width: 100%; height: 2px; position: absolute; top: 100%; left: 0; background: linear-gradient(to right, var(--color-secondary), transparent); } @media (hover: hover) { section.categories ul li a:hover, section.categories .link--more:hover { color: var(--color-secondary); } } /*Callout Section*/ section.callout { background: var(--color-smoke); } section.callout .column { padding: 24px; background: var(--color-primary); border: 1px solid var(--color-secondary); } @media (hover: hover) { section.callout .column:hover { background: var(--color-primary-light); } } section.callout .column img { filter: brightness(0) invert(1); } section.callout .heading--sub { font-size: 20px; line-height: 30px; } /*Contact Section*/ section.contact { background: #792b55; } @media screen and (max-width: 600px) { section.contact .text-end { text-align: left !important; } } /*Widget Section*/ @media screen and (min-width: 1200px) { .innovate site-widget-section .widget-section-content { gap: 24px !important; justify-content: space-between !important; } .innovate site-widget-section .widget-section-container site-top-list-widget-element { width: calc(33.33% - 24px); flex: inherit; } } .innovate .widget-section-content h3 { margin-bottom: 24px; } .innovate .widget-section-content li { position: relative; padding: 8px; padding-left: 12px; } .innovate .widget-section-content li:not(:last-child) { margin-bottom: 8px !important; } .innovate .widget-section-content li::before { content: "" !important; width: 2px; height: 100%; position: absolute; top: 0; left: 0; background: var(--color-primary) !important; z-index: 5; } @media (hover:hover) { .innovate .widget-section-content li:hover::before { width: 100%; } } .innovate .widget-section-content li a { font-size: 16px; line-height: 26px; color: var(--color-primary) !important; text-decoration: none !important; transition: none !important; width: 85%; position: relative; padding: 8px 12px !important; z-index: 10; } @media (hover: hover) { .innovate .widget-section-content li:hover a { color: var(--color-white) !important; } } .innovate .widget-section-content li a::before { display: none; } /*Footer*/ .footer__custom { padding: 32px 0; background: var(--color-primary); } .footer__custom .footer--logo img { width: auto; height: 28px; } .footer__custom a, .footer__custom p { font-size: 14px !important; line-height: 24px !important; color: var(--color-white) !important; text-decoration: none !important; } @media (hover: hover) { .footer__custom a:link:hover { text-decoration: underline !important; } .footer__custom .social-media a:link:hover { text-decoration: none !important; } } .footer__custom .social-media img { width: auto; height: 32px; margin-left: 16px; } @media screen and (max-width: 600px) { .footer__custom .social-media img { margin-right: 16px; margin-left: 0; } .footer__custom .text-end { text-align: left !important; } } /******************************* ** WOW SITES TEAM ** STYLES END ********************************/ /******************************* ** 2026 DESIGN ELEMENTS ** STYLES START ********************************/ /******************************* ** 2026 RELEASE NOTES ** STYLES START ********************************/ .v2.release-notes-two-col { display: grid; grid-template-columns: 3fr 1fr; gap: 40px; margin: 0 auto; align-items: start; } .v2 .release-notes-info-card { background: #F6F6F7; border-radius: 20px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.08); padding: 32px 24px; color: #4B0F41; font-family: Inter, sans-serif; font-size: 16px; line-height: 24px; margin-bottom: 24px; } .v2 .release-notes-grid { width: 100%; margin: 0; } .v2 .release-notes-intro-card { background: #F6F6F7; border-radius: 20px 20px 0 0; padding: 24px 24px; color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); margin-bottom: 12px; } .v2 .release-notes-pink-band { width: 100%; background: var(--brand-bg-2, #EADDE4); padding: 24px 0; display: flex; justify-content: center; align-items: stretch; border-radius: 0; margin-bottom: 12px; } .v2 .release-notes-card-grid { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; padding-left: 24px; padding-right: 24px; } .v2 .release-notes-card { background: var(--neutral-bg0, #fff); box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); border-radius: 16px; padding: 28px 20px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 220px; flex: 1 1 250px; transition: box-shadow 0.2s; } .v2 .release-notes-card-label { color: var(--brand, #7D2855); font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 8px; } .v2 .release-notes-card-desc { color: var(--neutral-text, #1E2022); font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .v2 .release-notes-bottom-card { background: #F6F6F7; border-radius: 0 0 20px 20px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; min-height: 0; } .v2 .release-notes-split-content { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 0; height: 100%; min-height: 0; } .v2 .release-notes-section-text { flex: 1 1 33.33%; padding: 0 24px; display: flex; align-items: center; justify-content: flex-start; font-size: 16px; line-height: 24px; background: none; box-shadow: none; color: #4B0F41; min-height: 0; } .v2 .release-notes-section-img-wrapper { flex: 2 1 66.66%; display: flex; align-items: stretch; justify-content: flex-end; overflow: hidden; border-radius: 0 0 20px 0; height: 100%; min-height: 0; } .v2 .release-notes-section-img-wrapper>p { display: flex; align-items: stretch; justify-content: flex-end; height: 100%; width: 100%; margin: 0; padding: 0; } .v2 .release-notes-section-img3 { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 20px 0; display: block; min-height: 0; box-sizing: border-box; } /* --- NEW: HERO SECTION --- */ .v2 .release-notes-hero { background: #fff; border-radius: 20px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); margin-bottom: 32px; padding: 0; display: flex; flex-direction: column; gap: 0; } .v2 .release-notes-hero-intro { padding: 32px 24px 0 24px; color: #4B0F41; font-size: 20px; font-family: Inter, sans-serif; font-weight: 500; line-height: 28px; border-radius: 20px 20px 0 0; background: #fff; } /* --- SECTION HEADINGS --- */ .v2 .release-notes-section-title { color: #4B0F41; font-size: 28px; font-family: Inter, sans-serif; font-weight: 600; line-height: 36px; margin: 32px 0 16px 0; } /* --- WHAT'S NEW BAND --- */ .v2 .release-notes-band-card { background: var(--brand-bg-2, #EADDE4); border-radius: 20px; padding: 24px 0; margin-bottom: 24px; width: 100%; display: flex; justify-content: center; } .v2 .release-notes-band-card-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; width: 100%; max-width: 1100px; padding: 0 24px; box-sizing: border-box; } .v2 .release-notes-feature-card { background: var(--neutral-bg0, #fff); box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); border-radius: 16px; padding: 28px 20px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; min-width: 220px; flex: 1 1 250px; transition: box-shadow 0.2s; } .v2 .release-notes-feature-card-label { color: var(--brand, #7D2855); font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 8px; } .v2 .release-notes-feature-card-desc { color: var(--neutral-text, #1E2022); font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } /* --- WHY IT MATTERS GRID --- */ .v2 .release-notes-card-grid-3col { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; padding: 0 24px; margin-bottom: 32px; } .v2 .release-notes-grid-card-3col__item { background: #F6F6F7; border-radius: 16px; padding: 24px 20px; color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; flex: 1 1 300px; min-width: 220px; box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); } /* --- LOGO IMAGE (OPTIONAL) --- */ .v2 .release-notes-logo-img { display: block; margin: 32px auto 0 auto; width: 188px; height: 27px; vertical-align: bottom; } /* Responsive: stack columns on small screens */ @media (max-width: 900px) { .v2.release-notes-two-col { grid-template-columns: 1fr; gap: 24px; } .clario-section__card, .v2 .release-notes-grid { width: 100%; max-width: 100%; } .v2 .release-notes-band-card-list, .v2 .release-notes-card-grid-3col { flex-direction: column; gap: 16px; padding: 0 8px; } .v2 .release-notes-feature-card, .v2 .release-notes-grid-card-3col__item { min-width: 0; width: 100%; } .v2 .release-notes-section-title { font-size: 22px; line-height: 28px; } } /******************************* ** 2026 RELEASE NOTES ** STYLES END ********************************/ /******************************* ** 2026 HOME PAGE ** STYLES START ********************************/ body { margin: 0; font-family: 'Inter', Arial, sans-serif; background: #fff; color: #4B0F41; } .container { max-width: 1440px; margin: 0 auto; } .header { display: flex; align-items: center; justify-content: space-between; padding: 24px; background: #fff; border-bottom: 1px solid #EDEFF0; } .logo { display: flex; align-items: center; } .logo-shape { width: 20px; height: 20px; background: #FF006E; border-radius: 50%; margin-right: 8px; } .logo-bar { width: 100px; height: 16px; background: #4B0F41; } .main-nav { display: flex; gap: 24px; flex: 1; justify-content: flex-start; } .nav-item { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; } .chevron { color: #FF006E; font-size: 16px; } .header-actions { display: flex; gap: 16px; } .btn { padding: 8px 16px; border-radius: 4px; font-size: 16px; border: none; cursor: pointer; } .btn-tertiary { background: #fff; color: #4B0F41; border: 1px solid #FF006E; } .btn-primary { background: #7D2855; color: #fff; border: 1px solid #FF006E; } .hero { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 24px 0 24px; } .hero-content { max-width: 60%; } .hero-content h1 { font-size: 48px; font-weight: 500; margin: 0 0 8px 0; } .hero-content h2 { font-size: 26px; font-weight: 500; margin: 0 0 24px 0; } .search-bar { display: flex; align-items: center; background: #fff; border: 1px solid #FF006E; border-radius: 4px; padding: 8px 12px; max-width: 400px; } .search-icon { margin-right: 8px; color: #1E2022; } .search-bar input { border: none; outline: none; font-size: 16px; flex: 1; } .hero-image img { border-radius: 20px; max-width: 400px; } .tabs { display: flex; gap: 8px; border-bottom: 1px solid #DADCDE; margin: 32px 24px 0 24px; } .tab { padding: 16px 24px; font-size: 20px; cursor: pointer; color: #697074; background: none; border: none; border-radius: 4px 4px 0 0; } .tab.active { background: #EDEFF0; color: #1E2022; border-bottom: 3px solid #7D2855; } .quick-links { display: flex; gap: 26px; margin: 32px 24px; flex-wrap: wrap; } .quick-link { background: #F6F6F7; border-radius: 20px; box-shadow: 0 4px 8px -5px rgba(0, 0, 0, 0.03); padding: 24px; flex: 1 1 300px; min-width: 300px; max-width: 400px; position: relative; } .quick-link h3 { font-size: 24px; font-weight: 500; margin: 0 0 8px 0; } .quick-link p { font-size: 16px; margin: 0 0 16px 0; } .quick-link .icon { position: absolute; top: 24px; right: 24px; color: #FF006E; font-size: 20px; } /** Contact Customer Care Button on Home Page **/ .CC-Button-HP { background-color: #7D2855; color: #FFFFFF; border: none; /* Optional: removes border */ padding: 10px 20px; /* Optional: adds spacing */ border-radius: 5px; /* Optional: rounds corners */ font-weight: regular; /* Optional: makes text bold */ cursor: pointer; /* Optional: changes cursor on hover */ } /* Optional: hover effect */ button.login-button:hover { background-color: #6A204A; } /* ============================================================ CUSTOM TABS ============================================================ */ .tab[data-selected="true"] { background: var(--neutral-bg-2, #EDEFF0); border-bottom: 3px var(--brand, #7D2855) solid; color: var(--neutral-text, #1E2022); } .tab[data-selected="false"] { background: none; border-bottom: none; color: var(--neutral-text-subtle, #697074); } .tabs { margin-left: 0px; } /* Pill Style for Solution and Region Tabs */ .return-tabs, .return-region-tabs { display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap; } .return-tab, .return-region-tab { background: #F6F6F7; border: none; border-radius: 999px; padding: 10px 28px; color: #4B0F41; font-size: 18px; font-family: Inter, sans-serif; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; box-shadow: none; outline: none; margin: 0; border-bottom: none; position: relative; } .return-tab[aria-selected="true"], .return-region-tab[aria-selected="true"] { background: #7D2855 !important; color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); } .return-tab[aria-selected="false"], .return-region-tab[aria-selected="false"] { background: #F6F6F7; color: #4B0F41; font-weight: 500; } .return-tab:hover, .return-region-tab:hover, .return-tab:focus, .return-region-tab:focus { background: #EADDE4; color: #7D2855; outline: none; } /* ============================================================ KEY TOPICS SECTION ============================================================ */ .key-topics-container { max-width: 1200px; margin: 0 auto; padding: 0 32px 32px 32px; box-sizing: border-box; width: 100%; } .key-topics-header { width: 100%; padding: 20px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .key-topics-header>div { color: #4B0F41; font-size: 32px; font-family: Inter, sans-serif; font-weight: 500; line-height: 32px; } .key-topics-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; padding: 0 0 24px 0; } .key-topics-card { background: #F6F6F7; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); border-radius: 20px; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; min-height: 180px; } .card-title { color: #4B0F41; font-size: 24px; font-family: Inter, sans-serif; font-weight: 500; line-height: 28px; } .card-desc { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .card-icon { position: absolute; top: 16px; right: 24px; width: 40px; height: 40px; color: #FF006E; font-size: 20px; font-family: "Font Awesome 6 Pro", sans-serif; font-weight: 900; display: flex; align-items: center; justify-content: center; } .tab-content[data-content="key-topics"] { display: block; } /* ============================================================ CUSTOMER CARE BAND ============================================================ */ .customer-care-band { width: 100vw; background: #EADDE4; margin: 32px 0; padding: 0; box-sizing: border-box; overflow-x: hidden; } .customer-care-container { width: 100%; max-width: 1800px; margin: 0 auto; padding: 32px 80px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; } .customer-care-header { color: #4B0F41; font-size: 32px; font-family: Inter, sans-serif; font-weight: 600; line-height: 36px; margin-bottom: 0; } .customer-care-intro { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; margin-bottom: 16px; } .customer-care-grid { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; gap: 32px; width: 100%; align-items: start; } .customer-care-column { display: flex; flex-direction: column; gap: 16px; } .customer-care-column .contact-section { width: 100%; box-sizing: border-box; } /* ============================================================ ACCORDIONS & THREE COLUMN LAYOUT ============================================================ */ .intro-text { width: 100%; padding: 0 0 24px 0; color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; box-sizing: border-box; } .three-column-layout { display: flex; gap: 24px; } .column { flex: 1; display: flex; flex-direction: column; gap: 16px; } .contact-column { justify-content: flex-start; align-items: flex-start; gap: 32px; } .accordion { width: 100%; max-width: 440px; } .accordion-item { background: #FFFFFF; border-radius: 20px; margin-bottom: 16px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.10); overflow: hidden; } .accordion-item:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; } .accordion-item:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .accordion-header { width: 100%; background: none; border: none; outline: none; padding: 16px; font-size: 20px; font-family: Inter, sans-serif; font-weight: 600; color: #4B0F41; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s; } .accordion-header:hover { background: #ececec; } .accordion-icon { font-size: 20px; color: #FF006E; margin-left: 16px; } .accordion-body { padding: 0 16px 16px 16px; color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; display: none; } .footer-spacer { height: 48px; } /* ============================================================ CONTACT SECTION ============================================================ */ .contact-section { background: #FFFFFF; border-radius: 16px; padding: 24px 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); } .contact-label { font-size: 18px; color: #4B0F41; font-family: Inter, sans-serif; font-weight: 500; } .contact-btn { background: #7D2855; border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; transition: background 0.2s; outline: none; text-decoration: none; } .contact-btn:hover { background: #4B0F41; } .contact-icon { display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 1em; line-height: 1; } .contact-icon i, .contact-icon svg { font-size: inherit !important; color: #fff !important; fill: #fff !important; line-height: 1; display: flex; align-items: center; justify-content: center; } .contact-icon svg { width: 1em; height: 1em; } /* ============================================================ ELEARNING TAB & COMMON TASKS ============================================================ */ .elearning-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; background: #fff; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); border-radius: 20px; display: flex; flex-direction: column; gap: 24px; position: relative; font-family: Inter, sans-serif; } .elearning-header { display: flex; align-items: center; gap: 8px; } .elearning-title { color: #4B0F41; font-size: 24px; font-weight: 500; line-height: 28px; } .elearning-section-title { color: #4B0F41; font-size: 32px; font-weight: 600; line-height: 36px; margin-bottom: 8px; } .elearning-section { background: #F6F6F7; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); border-radius: 20px; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; } .elearning-section-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .elearning-section-text { color: #4B0F41; font-size: 16px; font-weight: 400; line-height: 24px; flex: 1; } .elearning-section-text strong { font-weight: 600; } .elearning-section-text--full { width: 100%; margin-bottom: 16px; color: #4B0F41; font-size: 16px; font-weight: 400; line-height: 24px; } .elearning-section-wrap { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; } .elearning-section-wrap .elearning-section-text { flex: 1 1 0; color: #4B0F41; font-size: 16px; font-weight: 400; line-height: 24px; margin-bottom: 8px; } .elearning-section-wrap .elearning-section-img { flex-shrink: 0; max-height: 450px; width: auto; height: auto; object-fit: contain; border-radius: 20px; object-fit: cover; margin-left: 24px; align-self: stretch; } .elearning-section-img, .elearning-section-img2, .elearning-section-img3 { max-height: 450px; width: auto; height: auto; object-fit: contain; border-radius: 20px; margin: 16px 0 0 0; object-fit: cover; } .elearning-section-img { align-self: flex-end; } .elearning-section-img2 { align-self: center; } .elearning-section-img3 { align-self: flex-start; } .elearning-section-icon { color: #FF006E; font-size: 40px; display: flex; align-items: center; justify-content: center; margin-left: 16px; } .elearning-close-btn { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: #FF006E; font-size: 40px; cursor: pointer; transition: color 0.2s; } .elearning-close-btn:hover { color: #4B0F41; } /* Common Tasks Section */ .elearning-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; width: 100%; } .elearning-card { background: #F6F6F7; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); border-radius: 20px; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; min-height: 180px; } .elearning-card .card-title { color: #4B0F41; font-size: 24px; font-family: Inter, sans-serif; font-weight: 500; line-height: 28px; } .elearning-card .card-desc { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } /* ============================================================ START LEARNING. START LEADING! (UNIQUE SPLIT CARD) ============================================================ */ .elearning-split-startlearning-content { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 0; } .elearning-split-startlearning-text { width: 33.3333%; min-width: 220px; max-width: 400px; padding: 32px 24px; font-size: 16px; line-height: 24px; display: block; } .elearning-split-startlearning-img-wrapper { width: 66.6666%; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; border-radius: 0 20px 20px 0; padding: 24px 24px 24px 0; } .elearning-split-startlearning-img { width: 100%; max-width: 100%; max-height: 450px; object-fit: contain; border-radius: 0 20px 20px 0; display: block; } /* ============================================================ VIDEO TUTORIALS & SKIP LINKS ============================================================ */ .video-tutorial-card { position: relative; padding-bottom: 56px; } .video-tutorial-icon { position: absolute; right: 24px; bottom: 24px; background: #FF006E; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 24px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: background 0.2s, box-shadow 0.2s; text-decoration: none !important; z-index: 1; border: none; } .video-tutorial-icon i { color: #fff !important; } .video-tutorial-icon:hover, .video-tutorial-icon:focus { background: #7D2855; color: #fff !important; } .video-tutorial-icon:hover i, .video-tutorial-icon:focus i { color: #fff !important; } .skip-to-video-tutorials-wrapper { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 8px; margin-top: -8px; } .skip-to-video-tutorials-link { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-family: Inter, sans-serif; font-weight: 500; color: #FF006E; text-decoration: none; transition: color 0.2s; } .skip-to-video-tutorials-link:hover, .skip-to-video-tutorials-link:focus { color: #7D2855; } .skip-link-text { color: #FF006E; font-weight: 600; } .skip-link-circle { background: #FF006E; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff !important; font-size: 20px; transition: background 0.2s; } .skip-to-video-tutorials-link:hover .skip-link-circle, .skip-to-video-tutorials-link:focus .skip-link-circle { background: #7D2855; } .skip-link-circle i { color: #fff !important; font-size: 22px; } .skip-to-video-tutorials-wrapper+.elearning-section-title { margin-top: 0; } .elearning-header-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 8px; } .elearning-header-row .elearning-section-title { margin-bottom: 0; } @media (max-width: 600px) { .elearning-header-row { flex-direction: column; align-items: stretch; gap: 8px; } .elearning-header-row .elearning-section-title, .elearning-header-row .skip-to-video-tutorials-link { text-align: left; } } /* ============================================================ SUPPLIES SECTION ============================================================ */ .supplies-two-row { display: flex; flex-direction: column; gap: 0; padding: 0; background: none; box-shadow: none; } .supplies-intro-card { background: #F6F6F7; border-radius: 16px 16px 0 0; padding: 32px 24px; color: #1E2022; font-size: 18px; font-family: Inter, sans-serif; font-weight: 500; line-height: 28px; } .supplies-pink-band { width: 100%; background: var(--brand-bg-2, #EADDE4); border-radius: 0 0 16px 16px; padding: 32px 0; display: flex; justify-content: center; align-items: stretch; } .supplies-card-grid { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 0 24px; box-sizing: border-box; } .supplies-card { background: var(--neutral-bg0, #fff); box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); border-radius: 16px; padding: 28px 20px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; min-height: 160px; transition: box-shadow 0.2s; } .supplies-card-label { color: var(--brand, #7D2855); font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 8px; } .supplies-card-desc { color: var(--neutral-text, #1E2022); font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .elearning-section-text.supplies-intro { padding: 16px 24px; } .supplies-intro-row { background: #F6F6F7; border-radius: 16px 16px 0 0; padding: 16px 24px; } /* ============================================================ ELEARNING SPLIT CARDS & RESUPPLY COLUMNS ============================================================ */ .elearning-split-card .elearning-split-content, .elearning-split-startlearning-content { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 0; } .elearning-split-card .elearning-section-text, .elearning-split-startlearning-text { flex: 1 1 33.33%; padding: 32px 24px; display: flex; align-items: center; justify-content: flex-start; font-size: 16px; line-height: 24px; background: none; box-shadow: none; } .elearning-split-card .elearning-section-img-wrapper, .elearning-split-startlearning-img-wrapper { flex: 2 1 66.66%; display: flex; align-items: stretch; justify-content: flex-end; overflow: hidden; border-radius: 0 20px 20px 0; } .elearning-split-card .elearning-section-img3, .elearning-split-startlearning-img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 20px 20px 0; display: block; } .elearning-resupply-columns .resupply-columns-wrapper { display: flex; gap: 32px; width: 100%; align-items: stretch; } .resupply-main-column { flex: 2 1 0; display: flex; flex-direction: column; justify-content: flex-start; } .resupply-link-wrapper { display: flex; justify-content: flex-start; margin-top: 16px; } .resupply-link-wrapper.left-align { justify-content: flex-start; } .resupply-note-column { flex: 1 1 0; display: flex; flex-direction: column; align-items: stretch; } .resupply-note-box { background: var(--brand-bg-2, #EADDE4); color: #4B0F41; border-radius: 16px; padding: 24px 20px; font-size: 18px; font-family: Inter, sans-serif; font-weight: 500; line-height: 24px; box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); margin-top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } /* ============================================================ ORDERING SUPPLIES SECTION: UNIQUE CLASSES ============================================================ */ .os-ordering-supplies-grid { display: flex; flex-direction: column; gap: 12px; width: 100%; } .os-supplies-intro-card { background: #F6F6F7; border-radius: 20px 20px 0 0; padding: 24px 24px; color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); } .os-supplies-pink-band { width: 100%; background: var(--brand-bg-2, #EADDE4); padding: 32px 0; display: flex; justify-content: center; align-items: stretch; border-radius: 0; } .os-supplies-card-grid { width: 100%; max-width: 1100px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 0 24px; box-sizing: border-box; } .os-supplies-card { background: var(--neutral-bg0, #fff); box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); border-radius: 16px; padding: 28px 20px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; min-height: 160px; transition: box-shadow 0.2s; } .os-supplies-card-label { color: var(--brand, #7D2855); font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 8px; } .os-supplies-card-desc { color: var(--neutral-text, #1E2022); font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .os-supplies-bottom-card { background: #F6F6F7; border-radius: 0 0 20px 20px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); padding: 0; overflow: hidden; display: flex; flex-direction: column; } .os-elearning-split-content { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 0; } .os-elearning-section-text { flex: 1 1 33.33%; padding: 32px 24px; display: flex; align-items: center; justify-content: flex-start; font-size: 16px; line-height: 24px; background: none; box-shadow: none; } .os-elearning-section-img-wrapper { flex: 2 1 66.66%; display: flex; align-items: stretch; justify-content: flex-end; overflow: hidden; border-radius: 0 0 20px 0; } .os-elearning-section-img3 { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 20px 0; display: block; } /* ============================================================ ECOA APAC RETURNS SECTION: UNIQUE CLASSES ============================================================ */ .ecoa-apac-returns-accordion.accordion { width: 100%; max-width: 100%; } .ecoa-apac-returns-accordion .accordion-item { width: 100%; max-width: 100%; box-sizing: border-box; } .ecoa-apac-steps-cards { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; } .ecoa-apac-steps-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } @media (max-width: 900px) { .ecoa-apac-steps-cards-grid { grid-template-columns: 1fr; } } .ecoa-apac-exclude { color: #FF006E; text-decoration: underline; } .card-desc ul { margin-top: 12px; /* Adjust as needed */ margin-bottom: 12px; /* Adjust as needed */ padding-left: 24px; /* Optional: keeps bullets indented */ } .card-desc ul:first-child { margin-top: 12; } .card-desc ul:last-child { margin-bottom: 12; } .card-desc ol { margin-top: 12px; /* Adjust as needed */ margin-bottom: 12px; /* Adjust as needed */ padding-left: 24px; /* Optional: keeps bullets indented */ } .card-desc ol:first-child { margin-top: 12; } .card-desc ol:last-child { margin-bottom: 12; } /* ============================================================ BUTTONS & LINKS ============================================================ */ .clario-btn-link { display: inline-block; background: #128A7C; color: #fff !important; font-family: Inter, sans-serif; font-size: 16px; font-weight: 500; height: 32px; /* Match the icon background height */ line-height: 32px; /* Vertically center text */ padding: 0 18px; /* Horizontal padding only */ border-radius: 4px; /* Match the icon background */ text-decoration: none; border: none; transition: background 0.2s, color 0.2s; margin-left: 8px; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); cursor: pointer; vertical-align: middle; /* Align with text and icon */ } .clario-btn-link:hover, .clario-btn-link:focus { background: #4B0F41; color: #fff !important; text-decoration: none; outline: none; } /* ============================================================ RESPONSIVE STYLES ============================================================ */ @media (max-width: 1100px) { .key-topics-cards { grid-template-columns: repeat(2, 1fr); } .three-column-layout { grid-template-columns: 1fr; gap: 24px; } .accordion { max-width: 100%; } .image-card { max-width: 100%; aspect-ratio: 4096 / 2731; } .image-card img { max-width: 100%; max-height: 250px; } .customer-care-container { padding: 24px 16px; max-width: 100%; } .customer-care-grid { grid-template-columns: 1fr; gap: 24px; } .customer-care-header { font-size: 24px; line-height: 28px; } } @media (max-width: 900px) { .key-topics-container { padding: 0 12px 24px 12px; } .elearning-container { padding: 12px; } .elearning-section-title { font-size: 24px; line-height: 28px; } .elearning-section-img, .elearning-section-img2 { max-width: 100%; height: auto; } .elearning-section-wrap { flex-direction: column; gap: 12px; } .elearning-section-wrap .elearning-section-img { width: 100%; max-width: 350px; margin-left: 0; align-self: center; } .elearning-cards-grid { grid-template-columns: 1fr; gap: 16px; } .elearning-card { padding: 16px 12px; } .elearning-split-card .elearning-split-content, .os-elearning-split-content, .elearning-split-startlearning-content { flex-direction: column; } .elearning-split-card .elearning-section-text, .os-elearning-section-text, .elearning-split-startlearning-text, .elearning-split-card .elearning-section-img-wrapper, .os-elearning-section-img-wrapper, .elearning-split-startlearning-img-wrapper { width: 100%; border-radius: 20px; padding: 16px 8px; max-width: 100%; } .elearning-split-card .elearning-section-img3, .os-elearning-section-img3, .elearning-split-startlearning-img { border-radius: 0 0 20px 20px; max-height: 250px; } .elearning-resupply-columns .resupply-columns-wrapper { flex-direction: column; gap: 16px; } .resupply-main-column, .resupply-note-column { flex: 1 1 100%; } .resupply-note-box { height: auto; } } @media (max-width: 700px) { .key-topics-cards { grid-template-columns: 1fr; } .three-column-layout { grid-template-columns: 1fr; gap: 16px; padding: 12px 0; } .column { align-items: stretch; gap: 12px; } .contact-section { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 8px; text-align: center; } .contact-btn { width: 36px; height: 36px; font-size: 18px; margin: 0 auto 8px auto; } .contact-label { font-size: 16px; } .key-topics-header>div { font-size: 22px; line-height: 26px; } .card-title { font-size: 18px; line-height: 22px; } .card-desc { font-size: 14px; line-height: 20px; } .customer-care-container { padding: 12px 4px; } .customer-care-header { font-size: 18px; line-height: 22px; } .customer-care-intro { font-size: 14px; line-height: 20px; } .supplies-card-grid { padding: 0 8px; gap: 12px; } .supplies-pink-band { padding: 16px 0; } .supplies-intro-card { padding: 20px 8px; font-size: 16px; line-height: 24px; } } @media (max-width: 600px) { .elearning-container { padding: 4px; gap: 12px; } .elearning-section { padding: 8px 4px; gap: 8px; } .elearning-section-title, .elearning-title { font-size: 18px; line-height: 22px; } .elearning-section-text, .elearning-section-text--full { font-size: 14px; line-height: 20px; } .elearning-section-icon, .elearning-close-btn { font-size: 28px; } .return-tab, .return-region-tab { font-size: 16px; padding: 8px 16px; } .elearning-header-row { flex-direction: column; align-items: stretch; gap: 8px; } .elearning-header-row .elearning-section-title, .elearning-header-row .skip-to-video-tutorials-link { text-align: left; } } /* === WIP HELP PAGE TEMPLATE CSS === */ /* Hero Section (Scalable, Template-Friendly, Updated) */ .help-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 40px; } .help-hero__intro { flex: 0 1 40%; display: flex; align-items: center; justify-content: flex-start; } .help-hero__text { color: #4B0F41; font-size: 20px; font-family: Inter, sans-serif; font-weight: 600; line-height: 28px; word-wrap: break-word; } .help-hero__image { flex: 0 1 60%; display: flex; align-items: center; justify-content: flex-end; } .help-hero__img { width: 100%; max-width: 350px; /* Smaller image */ border-radius: 0 20px 20px 0; /* Only top-right and bottom-right corners rounded */ box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); object-fit: cover; } /* === HELP PAGE DEVICE INSTRUCTIONS SPLIT LAYOUT === */ .help-device-instructions { width: 100%; margin: 0 auto 32px auto; background: #fff; border-radius: 20px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); padding: 0; display: flex; flex-direction: column; gap: 0; } .help-device-instructions__wrapper { display: flex; flex-direction: row; align-items: stretch; width: 100%; gap: 0; } .help-device-instructions__main { flex: 2 1 0; padding: 8px 24px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; /* For corner outline */ } .help-device-instructions__main .help-device-instructions__text { color: #1E2022; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; margin-bottom: 16px; } .help-device-instructions__main strong { font-weight: 600; } .help-device-instructions__label { color: #7D2855; font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 0; /* Remove bottom margin for tighter spacing */ display: block; } .help-device-instructions__intro { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; margin-bottom: 0; /* Remove bottom margin for tighter spacing */ } /* --- CORNER OUTLINE FOR MAIN TEXT AREA --- */ .help-device-instructions--outlined { border: 2px solid #EADDE4; box-shadow: 0 4px 16px -4px rgba(125, 40, 85, 0.10); } .help-device-instructions__main ol, .help-device-instructions__main ul { margin-top: 12px; margin-bottom: 12px; padding-left: 24px; } .help-device-instructions__main ol li, .help-device-instructions__main ul li { margin-bottom: 4px; } .help-device-instructions__link-wrapper { display: flex; justify-content: flex-start; margin-top: 16px; } .help-device-instructions__side { flex: 1 1 0; display: flex; align-items: stretch; justify-content: center; background: #EADDE4; border-radius: 0 20px 20px 0; min-width: 180px; max-width: 350px; padding: 0; } .help-device-instructions__side-inner { width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; } .help-device-instructions__image { max-width: 100%; max-height: 320px; border-radius: 12px; display: block; object-fit: contain; } /* === DEVICE APP TABS (NESTED PILLS) === */ .help-device-app-tabs { display: flex; gap: 12px; margin-top: 16px; /* Space above the buttons */ margin-bottom: 16px; /* Space below the buttons */ flex-wrap: wrap; } /* Add spacing below the app tabs and above the instructions label */ .help-device-app-content { margin-bottom: 24px; } /* Style the instructions block like the intro text */ .help-device-app-content .help-device-instructions__text { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; background: none; margin-bottom: 0; margin-top: 0; padding: 0; } .help-device-app-content .help-device-instructions__label { margin-bottom: 8px; /* Add margin below the label in the instructions */ } .help-device-app-tab { background: #F6F6F7; border: none; border-radius: 999px; padding: 10px 28px; color: #4B0F41; font-size: 18px; font-family: Inter, sans-serif; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; box-shadow: none; outline: none; margin: 0; border-bottom: none; position: relative; } .help-device-app-tab[aria-selected="true"] { background: #7D2855 !important; color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); } .help-device-app-tab[aria-selected="false"] { background: #F6F6F7; color: #4B0F41; font-weight: 500; } .help-device-app-tab:hover, .help-device-app-tab:focus { background: #EADDE4; color: #7D2855; outline: none; } /* Responsive for Device Instructions Split */ @media (max-width: 900px) { .help-device-instructions__wrapper { flex-direction: column; } .help-device-instructions__main, .help-device-instructions__side { max-width: 100%; border-radius: 0 0 20px 20px; padding: 16px 8px; } .help-device-instructions__side-inner { padding: 12px; } .help-device-instructions__image { max-width: 220px; max-height: 180px; margin: 0 auto; } .help-device-instructions__main-corners:before, .help-device-instructions__main-corners:after { width: 24px; height: 24px; } } /* === HELP PAGE THREE COLUMN CARD GRID === */ .help-card-grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; margin-top: 24px; margin-bottom: 32px; } .help-card-grid-3col__item { background: #F6F6F7; border-radius: 16px; box-shadow: 0px 4px 8px -5px rgba(0, 0, 0, 0.03); padding: 24px 24px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; min-height: 220px; position: relative; transition: box-shadow 0.2s, background 0.2s, border 0.2s; border: 2px solid transparent; cursor: pointer; } .help-card-grid-3col__img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; margin-bottom: 16px; } .help-card-grid-3col__title { color: #4B0F41; font-size: 22px; font-family: Inter, sans-serif; font-weight: 600; line-height: 28px; margin-bottom: 8px; } .help-card-grid-3col__desc { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } /* Hover/Focus/Selected States for Selectable Cards */ .help-card-grid-3col__item:hover, .help-card-grid-3col__item:focus { border: 2px solid #7D2855; outline: none; } .help-card-grid-3col__item[aria-selected="true"], .help-card-grid-3col__item[aria-selected="true"]:hover, .help-card-grid-3col__item[aria-selected="true"]:focus { background: #EADDE4; border: 2px solid #7D2855; box-shadow: 0 4px 16px -4px rgba(125, 40, 85, 0.10); } /* Responsive Design for Hero Section and 3col Grid */ @media (max-width: 1100px) { .help-card-grid-3col { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .help-hero { flex-direction: column; gap: 16px; } .help-hero__intro, .help-hero__image { flex: 1 1 100%; max-width: 100%; justify-content: center; } .help-hero__img { max-width: 100%; height: auto; border-radius: 20px; } .help-card-grid-3col { grid-template-columns: 1fr; gap: 16px; } .help-card-grid-3col__item { padding: 16px 10px 14px 10px; } } /* --- Original Hero Section (for backward compatibility) --- */ .help-section-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 32px; } .help-section-hero__text { flex: 1 1 300px; } .help-section-hero__text h3 { text-align: right; margin: 0 0 8px 0; color: #4B0F41; font-size: 1.25rem; font-weight: 500; } .help-section-hero__image { flex: 1 1 300px; display: flex; justify-content: center; align-items: center; } .help-section-hero__image img { max-width: 100%; border-radius: 12px; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); } /* Section Spacer */ .help-section-spacer { height: 32px; } /* Card Styles */ .help-card { background: #F6F6F7; border-radius: 16px; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); margin-bottom: 32px; padding: 24px; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Pink Band Card (extends slightly beyond normal cards) */ .help-band-card { background: #EADDE4; margin-left: -32px; margin-right: -32px; margin-top: 0; margin-bottom: 32px; padding: 24px 32px; border-radius: 0; box-shadow: none; } /* Grid-based Card Formatting (like supplies section) */ .help-band-card-list, .help-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 16px; } .help-band-card-item, .help-card-grid__item { background: #fff; border-radius: 16px; padding: 24px 20px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; min-height: 120px; box-shadow: 0px 3px 5px -2px rgba(37, 38, 39, 0.08); } .help-band-card h2, .help-card h2 { color: #4B0F41; font-size: 32px; font-weight: 600; line-height: 36px; margin-bottom: 8px; } .help-article h2 { color: #4B0F41; font-size: 32px; font-weight: 600; line-height: 36px; margin-bottom: 8px; } .help-band-card-label, .help-card-grid__label { color: #7D2855; font-size: 18px; font-family: Inter, sans-serif; font-weight: 600; line-height: 24px; margin-bottom: 8px; } .help-band-card-desc, .help-card-grid__desc { color: #1E2022; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .help-card__text { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; margin-bottom: 0; } .help-card__text strong { font-weight: 600; } .help-card__text ul, .help-card__text ol { margin-top: 12px; margin-bottom: 12px; padding-left: 24px; } .help-card__text ul li, .help-card__text ol li { margin-bottom: 4px; } .help-band-card-item p, .help-card-list__item p, .help-band-card-item ul, .help-band-card-item ol, .help-card-list__item ul, .help-card-list__item ol { color: #4B0F41; font-size: 16px; font-family: Inter, sans-serif; font-weight: 400; line-height: 24px; } .help-band-card-item strong, .help-card-list__item strong { font-weight: 600; } /* Split Card */ .help-card--split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; } .help-card__image { flex: 1 1 250px; display: flex; justify-content: center; align-items: center; } .help-card__image img { max-width: 100%; border-radius: 12px; box-shadow: 0 2px 8px rgba(125, 40, 85, 0.08); } .help-card__content { flex: 2 1 350px; } /* Card List Styles */ .help-card-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; } .help-card-list__item { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(125, 40, 85, 0.04); padding: 16px; min-width: 0; } .help-card-list--columns .help-card-list__item { background: #fff; min-width: 220px; } .help-card--highlight .help-card-list__item { background: #F6F6F7; } /* Info Box */ .help-info-box { background: #ddf7ff; border-left: 4px solid #006a8a; padding: 12px 16px; margin: 16px 0 0 0; border-radius: 6px; color: #1E2022; font-size: 1rem; } /* Responsive Design */ @media (max-width: 900px) { .help-section-hero, .help-card--split { flex-direction: column; gap: 16px; } .help-card-list, .help-band-card-list, .help-card-grid { grid-template-columns: 1fr; gap: 16px; } .help-card-list__item, .help-band-card-item, .help-card-grid__item { min-width: 0; } } @media (max-width: 600px) { .help-section-hero, .help-card--split { padding: 8px; } .help-card, .help-band-card { padding: 12px; } .help-card-list__item, .help-band-card-item, .help-card-grid__item { padding: 10px 6px; } .help-section-spacer { height: 16px; } } /******************************* ** 2026 HOME PAGE ** STYLES END ********************************/ /* ============================================ PARTICIPANT HELP SECTION - SCOPED STYLES All styles are prefixed with .participant-help-section to prevent bleeding into other page elements ============================================ */ /* Main Section Container */ .participant-help-section { background-color: #ffffff; padding: 24px 16px 32px; /* slightly more bottom breathing room */ width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; } /* Header Styles */ .participant-help-section .participant-help-header { margin-bottom: 32px; } .participant-help-section .participant-help-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; color: #1e2022; font-size: 24px; line-height: 1.375; margin: 0; padding: 4px; } /* Cards Grid */ .participant-help-section .participant-cards-grid { display: grid; grid-template-columns: 1fr; gap: 20px; /* was 16px: a bit more space between cards */ width: 100%; } /* Individual Card */ .participant-help-section .participant-card { background-color: #ffffff; border-radius: 8px; box-shadow: 0px 2px 3px 0px rgba(37, 38, 39, 0.04); overflow: hidden; display: flex; align-items: stretch; box-sizing: border-box; } /* Card Link Styling */ .participant-card-link { text-decoration: none; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.1s ease; } .participant-card-link:hover { box-shadow: 0px 4px 8px 0px rgba(37, 38, 39, 0.12); transform: translateY(-1px); } .participant-card-link:active { transform: translateY(0); } /* Purple Accent Bar */ .participant-help-section .participant-card-accent { background-color: #7d2855; width: 8px; flex-shrink: 0; } /* Card Content Area */ .participant-help-section .participant-card-content { padding: 16px 18px; /* tiny horizontal boost for comfort */ flex: 1; display: flex; flex-direction: column; gap: 8px; } /* Card Title */ .participant-help-section .participant-card-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; color: #11181c; text-decoration: underline; text-decoration-style: solid; margin: 0 0 4px 0; } /* Card Description */ .participant-help-section .participant-card-description { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 400; font-size: 16px; line-height: 24px; color: #1e2022; margin: 0; } /* ============================================ ARTICLE BODY CONTENT STYLES ============================================ */ /* Article Body Container */ .participant-article-body { max-width: 1400px; margin: 0 auto; padding: 24px 0 32px; display: flex; flex-direction: column; gap: 28px; /* same vertical gap between ALL cards, including the last one */ box-sizing: border-box; } /* Content Card - Base (all main cards, including "Saving and Autofilling") */ .participant-content-card { background-color: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px; padding: 20px 24px 24px; /* same as other content cards */ box-sizing: border-box; } /* Card Heading (Welcome!, Supported Browsers, Saving & Autofilling, etc.) */ .participant-card-heading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; color: #11181c; margin: 0 0 16px 0; /* 16px gap below the heading for all non-numbered cards */ } /* Reset default h2 top margin inside content cards */ .participant-content-card h2 { margin-top: 0; /* prevents any browser default extra top space */ } /* Card Text Content (applies equally to "Saving & Autofilling") */ .participant-card-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 16px; line-height: 24px; color: #1e2022; } .participant-card-text p { margin: 0 0 16px 0; /* consistent paragraph spacing inside all cards */ } .participant-card-text p:last-child { margin-bottom: 0; /* no trailing extra space at bottom */ } .participant-card-text ul, .participant-card-text ol { margin: 0 0 16px 0; padding-left: 24px; } .participant-card-text li { margin-bottom: 8px; line-height: 24px; } .participant-card-text li:last-child { margin-bottom: 0; } .participant-card-text strong { font-weight: 600; } /* Links */ .participant-link { color: #007bd9; text-decoration: underline; text-decoration-skip-ink: none; } .participant-link:hover { color: #005fa3; } /* Numbered Card Header */ .participant-card-header { display: flex; align-items: center; gap: 10px; /* slightly more gap for clarity */ margin: 0 0 12px 0; /* bit more space below badge+heading row */ } /* Number Badge ÃƒÆ’Ã‚Â¢ÃƒÂ¢Ã¢â‚¬Å¡Ã‚Â¬ÃƒÂ¢Ã¢â€šÂ¬Ã…â€œ 30x30 */ .participant-number-badge { background-color: #7d2855; color: #ffffff; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 12px; line-height: 1; text-align: center; width: 30px; height: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; top: 0; transform: none; } /* Card Heading Inline (next to badge) */ .participant-card-heading-inline { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; color: #11181c; margin: 0; flex: 1; min-width: 0; } /* Subsection Title (within cards) */ .participant-subsection-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 18px; line-height: 28px; color: #11181c; margin: 20px 0 8px 0; /* bit more top margin before subsections */ } .participant-card-text .participant-subsection-title:first-child { margin-top: 0; } /* Two Column Grid */ .participant-two-column-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; /* space above and below two-column blocks */ } /* Sub-Cards (Starting from SMS/Email) */ .participant-sub-card { background-color: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px; display: flex; overflow: hidden; box-sizing: border-box; } .participant-sub-card-accent { background-color: #7d2855; width: 8px; flex-shrink: 0; } .participant-sub-card-content { padding: 16px 18px; flex: 1; } .participant-sub-card-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-weight: 600; font-size: 20px; line-height: 28px; color: #11181c; margin: 0 0 8px 0; } .participant-sub-card-content p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 16px; line-height: 24px; color: #1e2022; margin: 0 0 10px 0; /* a touch more room between paragraphs */ } .participant-sub-card-content p:last-child { margin-bottom: 0; } .participant-sub-card-content ol, .participant-sub-card-content ul { margin: 8px 0 0 0; padding-left: 24px; } .participant-sub-card-content li { font-size: 16px; line-height: 24px; color: #1e2022; margin-bottom: 8px; } .participant-sub-card-content li:last-child { margin-bottom: 0; } .participant-sub-card-content strong { font-weight: 600; } /* Highlighted Card (Pink Background) */ .participant-highlighted-card { background-color: #eadde4; padding: 20px 24px 24px; /* ensure its content has same breathing room */ } /* Inner Card (White card inside highlighted card) */ .participant-inner-card { background-color: #ffffff; border: 1px solid #e6e8eb; border-radius: 8px; display: flex; overflow: hidden; box-sizing: border-box; margin-top: 20px; /* space from heading in highlighted card */ } .participant-inner-card-accent { background-color: #7d2855; width: 8px; flex-shrink: 0; } .participant-inner-card-content { padding: 16px 18px; flex: 1; } .participant-inner-card-content p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-size: 16px; line-height: 24px; color: #1e2022; margin: 0 0 16px 0; } .participant-inner-card-content p:last-child { margin-bottom: 0; } .participant-inner-card-content strong { font-weight: 600; } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ /* Tablet: 768px and up */ @media (min-width: 768px) { .participant-help-section { padding: 24px 48px 40px; } .participant-help-section .participant-help-title { font-size: 28px; } .participant-help-section .participant-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; /* a bit more space between cards on wider screens */ } .participant-two-column-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 28px 0; /* slightly more breathing room on tablet+ */ } } /* Desktop: 1024px and up */ @media (min-width: 1024px) { .participant-help-section { padding: 24px 100px 48px; } .participant-help-section .participant-help-title { font-size: 32px; } } /* ============================================ ASTRO CSS BUILD WIP ============================================ */ /* KBP global patch (replaces prior Sandbox block from this marker onward) */ /* Sandbox global CSS patch — reset + CDS tokens + kbp-* articles only (no participant/home/footer) */ /* Source: design/assets/css/archive/document360-live-2026.css */ /* Layer: layers/01-reset.css — generated by scripts/split-d360-css-layers.mjs */ /* HARD RESET: prevent icon fonts from leaking into article body copy */ #articleContent, #articleContent * { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } /* D360 heading copy-link controls use Font Awesome — exempt from Inter reset */ #articleContent .hyperlink-wrapper-container .copy-link-btn, #articleContent .hyperlink-wrapper-container .copy-link-btn i[class*="fa-"] { font-family: revert; } #articleContent .hyperlink-wrapper-container .copy-link-btn i[class*="fa-"] { font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome"; font-style: normal; } /* Source: design/assets/css/archive/document360-live-2026.css */ /* Layer: layers/02-d360-tokens.css — generated by scripts/split-d360-css-layers.mjs */ :root { --custom-text-color: #11181C; --kbp-section-gap: 16px; --kbp-section-gap-tight: 12px; /* Card shell padding — drives card-to-card visual rhythm */ --kbp-card-padding-top: 16px; --kbp-card-padding-bottom: 24px; /* Major flat section break — bottom pad + section gap + border + top pad (57px) */ --kbp-flat-major-section-gap: calc( var(--kbp-card-padding-bottom) + var(--kbp-section-gap) + 1px + var(--kbp-card-padding-top) ); /* Plum gradient dividers — gap before/after mirrors stacked .kbp-card-container shells */ --kbp-section-divider-gap-before: calc(var(--kbp-card-padding-bottom) + var(--kbp-section-gap)); --kbp-section-divider-gap-after: var(--kbp-card-padding-top); /* Plum gradient line — nested walkthrough subsections, Template 1 text articles */ --kbp-section-divider-gradient: linear-gradient( 90deg, transparent 0%, var(--brand-border, #c9a6b8) 18%, var(--brand-border, #c9a6b8) 82%, transparent 100% ); --kbp-card-header-gap: 8px; /* Vertical rhythm inside card/callout stacks (header → body → callout) */ --kbp-card-content-gap: 8px; /* Prose → nested callout / band / grid inside a card (total space, including flex gap) */ --kbp-card-nested-block-gap: 16px; /* Space above in-card subsection headings (h3/h4.kbp-card-intro) after body copy or lists */ --kbp-subsection-heading-gap: 12px; /* Body/list → next heading — flex/content gap + subsection signal (20px total) */ --kbp-body-to-heading-gap: calc(var(--kbp-card-content-gap) + var(--kbp-subsection-heading-gap)); /* Grid gap between inner branded cards, two-col cards */ --kbp-card-grid-gap: 8px; /* Quick links — tighter than legacy 24px; matches card padding rhythm */ --kbp-quick-links-container-padding: 16px; --kbp-quick-links-container-gap: 16px; --kbp-quick-links-item-padding: 16px 12px; --kbp-quick-links-item-gap: 12px; /* Half-leading on 16px / 24px body copy — used to align list tops with block edges */ --kbp-body-half-leading: 4px; /* CDS Foundations — typography (Crystal Figma Components, node 6566-70304) */ --cds-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --cds-type-heading-1: 600 32px/44px var(--cds-font-family); --cds-type-heading-2: 600 24px/36px var(--cds-font-family); --cds-type-heading-3: 400 20px/28px var(--cds-font-family); --cds-type-heading-3-semibold: 600 20px/28px var(--cds-font-family); --cds-type-heading-4-medium: 500 18px/28px var(--cds-font-family); --cds-type-heading-4-semibold: 600 18px/28px var(--cds-font-family); --cds-type-body: 400 16px/24px var(--cds-font-family); --cds-type-body-semibold: 600 16px/24px var(--cds-font-family); --cds-type-body-s: 400 14px/20px var(--cds-font-family); --cds-type-body-s-semibold: 600 14px/20px var(--cds-font-family); --cds-type-body-small: var(--cds-type-body-s); --cds-type-body-small-semibold: var(--cds-type-body-s-semibold); --cds-type-label: 400 12px/16px var(--cds-font-family); --cds-type-label-semibold: 600 12px/16px var(--cds-font-family); --cds-type-label-bold: 700 12px/16px var(--cds-font-family); --cds-type-label-bold-spacing: 0.5px; /* CDS Main Colour Tokens (node 25095-17610) — used by kbp-* with fallbacks in pattern CSS */ --neutral-text: #1e2022; --neutral-text-subtle: #697074; --neutral-bg0: #ffffff; --neutral-border-1: #dadcde; --brand: #7d2855; --brand-bg-1: #f5eef1; --brand-bg-2: #eadde4; --brand-bg-subtle: #faf6f8; --brand-border: #c9a6b8; --primary: #128a7c; --primary-bg-1: #e8f6f4; --primary-border: #9fd4cc; --informative: #007bd9; --informative-bg-1: #e5f4ff; --informative-border: #7ac6ff; --warning: #fd9f00; --warning-bg-1: #fdf9eb; --warning-border: #f7e097; --danger: #c33d41; --danger-bg-1: #fceded; --danger-border: #f1a0a2; --success: #398b48; } html[data-bs-theme="dark"] { --custom-text-color: var(--body-color); /* CDS token remap — kbp-* shells read these via var() fallbacks */ --neutral-text: var(--body-color, #e8eaed); --neutral-text-subtle: #899297; --neutral-bg0: var(--header-secondary-bg, #1e2022); --neutral-border-1: var(--border-color, #3c4043); /* Soft brand washes kept for rare tint uses; coloured shells override to dark fill + solid border in 04 (instruction candy-stripe, branded band). */ --brand-bg-1: rgba(125, 40, 85, 0.22); --brand-bg-2: rgba(125, 40, 85, 0.32); --brand-bg-subtle: rgba(125, 40, 85, 0.14); --brand-border: #c9a6b8; --primary-bg-1: rgba(18, 138, 124, 0.18); --primary-border: rgba(159, 212, 204, 0.45); /* Tinted fills for hub spotlight cards; callouts/pills override solids in 04 */ --informative-bg-1: rgba(0, 123, 217, 0.16); --informative-border: rgba(122, 198, 255, 0.42); --warning-bg-1: rgba(253, 159, 0, 0.14); --warning-border: rgba(247, 224, 151, 0.35); --danger-bg-1: rgba(195, 61, 65, 0.16); --danger-border: rgba(241, 160, 162, 0.42); /* Body/emphasis danger text — light coral; #c33d41 fails on dark page bg */ --danger: #f1a0a2; --success: #5cb86a; /* Match light-mode plum line weight — 0.45 rgba was invisible on #282B2C */ --kbp-section-divider-gradient: linear-gradient( 90deg, transparent 0%, #c9a6b8 18%, #c9a6b8 82%, transparent 100% ); } site-document a { text-underline-offset: .3em; } /* Source: design/assets/css/archive/document360-live-2026.css */ /* Layer: layers/03-kbp-articles.css â€” generated by scripts/split-d360-css-layers.mjs */ /* ============================================ CUSTOM IMAGE ============================================ */ .kbp-image { border-radius: 18px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); } /* ============================================ KNOWLEDGE BASE PATTERNS (kbp-*) ============================================ Prefix: kbp- (Knowledge Base Pattern) */ /* ============================================================================ Article block spacing ============================================================================ Prefer these class margins over inline style="margin-bottom:24px" on each block (legacy pilot HTML still uses inline 24px until migration). ============================================================================ */ .kbp-article-scope-container { margin-bottom: var(--kbp-section-gap-tight); } .kbp-hero-section-container, .kbp-card-container, .kbp-quick-links-container, .kbp-branded-container, .kbp-landing-container, .kbp-instruction-section { margin-bottom: var(--kbp-section-gap); } /* In-card titles â€” shell flex gap handles spacing to content */ .kbp-card-container > .kbp-card-header { margin-bottom: 0; } /* Nested card / branded shells inside a stack â€” not top-level article blocks */ :is(.kbp-card-content, .kbp-branded-card-content) .kbp-card-container, :is(.kbp-card-content, .kbp-branded-card-content) .kbp-branded-container, :is(.kbp-two-col-grid, .kbp-three-col-grid) > .kbp-card-container, .kbp-card-container > .kbp-branded-container { margin-bottom: 0; padding: 16px; } /* Column grid cells â€” nested shells use standard card padding (not section margin) */ :is(.kbp-two-col-grid, .kbp-three-col-grid) > .kbp-card-container { padding: var(--kbp-card-padding-top) 24px var(--kbp-card-padding-bottom); } /* Section label immediately after a block â€” one gap, not block margin + heading margin */ #articleContent .kbp-card-container:has(+ :is(h2, h3).kbp-card-header), #articleContent .kbp-branded-container:has(+ :is(h2, h3).kbp-card-header) { margin-bottom: 0 !important; } /* ============================================================================ Article Scope Pattern ============================================================================ Pill-style tags that summarize article scope. ============================================================================ */ /* Scope band — flush with article edge (no white shell; pills carry their own fill) */ .kbp-article-scope-container { background: transparent; border-radius: 0; padding: 0; display: grid; grid-template-columns: 1fr; row-gap: 12px; } #articleContent .kbp-article-scope-container { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Desktop layout for article scope columns (label + 3 pills) */ @media (min-width: 768px) { .kbp-article-scope-container { grid-template-columns: 2fr 1fr 1fr 1fr; column-gap: 12px; align-items: center; } } /* Label text: "Content in this article relates to:" (Label / Semi Bold 12/16) */ .kbp-article-scope-label { font: var(--cds-type-label-semibold); color: var(--neutral-text, #1e2022); display: flex; align-items: center; justify-content: flex-start; padding: 4px 0; min-height: 24px; } /* D360 wraps scope label in

; inherit CDS label style */ .kbp-article-scope-label p { font: inherit; margin: 0; color: inherit; } /* Individual, non-clickable scope pills (Label / Semi Bold 12/16) */ .kbp-article-scope-pill { background: var(--brand-bg-2, #eadde4); border: 1px solid var(--brand-border, #c9a6b8); border-radius: 4px; padding: 4px 12px; font: var(--cds-type-label-semibold); color: var(--neutral-text, #1e2022); text-align: center; white-space: nowrap; width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } /* Reset inner margins/padding inside pills */ .kbp-article-scope-pill>* { margin: 0; padding: 0; } /* Column placement for first pill on desktop */ @media (min-width: 768px) { .kbp-article-scope-pill-1 { grid-column: 2; } } /* Column placement for second pill on desktop */ @media (min-width: 768px) { .kbp-article-scope-pill-2 { grid-column: 3; } } /* Column placement for third pill on desktop */ @media (min-width: 768px) { .kbp-article-scope-pill-3 { grid-column: 4; } } /* Fewer than three pills â€” occupy the rightmost pill columns (not the first) */ @media (min-width: 768px) { .kbp-article-scope-container:not(:has(.kbp-article-scope-pill-2)) .kbp-article-scope-pill-1 { grid-column: 4; } .kbp-article-scope-container:has(.kbp-article-scope-pill-2):not(:has(.kbp-article-scope-pill-3)) .kbp-article-scope-pill-1 { grid-column: 3; } .kbp-article-scope-container:has(.kbp-article-scope-pill-2):not(:has(.kbp-article-scope-pill-3)) .kbp-article-scope-pill-2 { grid-column: 4; } /* Keep the label and pills on one row if an empty paragraph is still present */ #articleContent .kbp-article-scope-container > .kbp-article-scope-label, #articleContent .kbp-article-scope-container > .kbp-article-scope-pill { grid-row: 1; } } /* Block import inserts an empty

between grid children. That paragraph takes the left cell, so scope pills step down and cards sit in the right column. */ #articleContent :is( .kbp-article-scope-container, .kbp-hero-section-container, .kbp-two-col-grid, .kbp-three-col-grid, .kbp-branded-cards-grid, .kbp-branded-cards-grid--two-col ) > p:not(:has(img)) { display: none !important; } /* Block import inserts a spare element before each card. Keep this free of :is() and :has(); Document360 drops those selectors, so they never apply. */ #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; gap: 16px !important; margin-bottom: 16px !important; } /* Hide D360 import spare nodes only. Keep authored path cards visible (kbp-card-container and kbp-two-col-card). */ #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > div:not(.kbp-card-container):not(.kbp-two-col-card) { display: none !important; } #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-card-container, #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-two-col-card { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; flex: 1 1 calc(50% - 16px) !important; width: calc(50% - 16px) !important; max-width: calc(50% - 16px) !important; min-width: 0 !important; margin-left: 0 !important; box-sizing: border-box !important; height: auto !important; } #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-card-container > .kbp-card-content, #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-two-col-card > .kbp-two-col-card-content, #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-two-col-card > .kbp-card-content { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; gap: 8px !important; min-height: 100% !important; height: 100% !important; } /* * Paired instructional cards: pin foot media (or last block on no-image peers) * so headers stay top-aligned and screenshots share a baseline. * Prefer --foot / kbp-card-foot over :last-child (D360 can inject empty nodes). */ #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) .kbp-card-image--foot, #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) .kbp-card-foot { margin-top: auto !important; } @media (max-width: 767px) { #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-card-container, #articleContent .kbp-two-col-grid:not(.kbp-instruction-media-grid) > .kbp-two-col-card { flex-basis: 100% !important; width: 100% !important; max-width: 100% !important; } } /* ============================================================================ Hero Section Pattern ============================================================================ Image + intro text at the top of an article. ============================================================================ */ /* Hero — flush with article edge (no white shell). Divider after hero separates the band. */ .kbp-hero-section-container { background: transparent; border-radius: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } #articleContent .kbp-hero-section-container { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Stacked mobile: match 12px rhythm used between intro paragraphs */ @media (max-width: 1023px) { .kbp-hero-section-container { gap: 12px; } .kbp-hero-section-container:has(+ .kbp-card-container) { margin-bottom: var(--kbp-section-gap-tight); } } /* Stacked by default: image on top, intro text below */ .kbp-hero-section-image { order: 1; margin: 0; padding: 0; border-radius: 4px; overflow: hidden; width: 100%; max-width: 100%; min-width: 0; } /* * Hero tutorial CTA — reuse hub spotlight / "Help we thought you'd need" card * (tone fill + circular arrow action). Sized for the hero image column. */ .kbp-hero-section-image--tutorial-cta { overflow: visible; display: flex; align-items: stretch; justify-content: flex-start; border-radius: 0; min-height: 0; } .kbp-hero-section-image--tutorial-cta > .kbp-hub-spotlight-card--hero-cta, #articleContent .kbp-hero-section-image--tutorial-cta > .kbp-hub-spotlight-card--hero-cta { flex: none !important; width: 100% !important; max-width: 280px !important; aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; } .kbp-hero-section-image--tutorial-cta .kbp-hub-spotlight-card__content, #articleContent .kbp-hero-section-image--tutorial-cta .kbp-hub-spotlight-card__content { min-height: 0 !important; height: auto !important; padding: 20px 20px 56px !important; } .kbp-hero-section-content { order: 2; padding: 0; display: flex; flex-direction: column; gap: 12px; justify-content: flex-start; align-items: flex-start; text-align: left; width: 100%; min-width: 0; max-width: 100%; } /* Side-by-side only when the viewport is wide enough for two comfortable columns. The image fills its half so a wide monitor does not leave an empty band between a capped picture and the hero text. Text stays top-aligned. */ @media (min-width: 1024px) { .kbp-hero-section-container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; } .kbp-hero-section-image { order: 1; width: 100%; max-width: none; justify-self: stretch; } .kbp-hero-section-image--tutorial-cta { width: auto; max-width: 280px; justify-self: start; } .kbp-hero-section-content { order: 2; max-width: 40rem; } } @media (min-width: 1280px) { .kbp-hero-section-container { column-gap: 40px; } } /* Text-only hero — lead left, scope right on desktop; scope first on mobile (PAT-TEMPLATE-01). Shell is already flush (same as image heroes); this modifier only changes the grid roles. */ .kbp-hero-section-container--text-only .kbp-hero-section-scope { order: 1; margin: 0; padding: 0; min-width: 0; width: 100%; } .kbp-hero-section-container--text-only .kbp-hero-section-content { order: 2; } .kbp-hero-section-container--text-only .kbp-article-scope-container--hero { margin-bottom: 0; grid-template-columns: 1fr; row-gap: 8px; padding: 0; background: transparent; border-radius: 0; } .kbp-hero-section-container--text-only .kbp-article-scope-container--hero .kbp-article-scope-pill-1, .kbp-hero-section-container--text-only .kbp-article-scope-container--hero .kbp-article-scope-pill-2, .kbp-hero-section-container--text-only .kbp-article-scope-container--hero .kbp-article-scope-pill-3 { grid-column: 1; } /* Align scope label cap line with hero lead (18/28) â€” no extra shell padding */ .kbp-hero-section-container--text-only .kbp-article-scope-label { padding: 0; min-height: 28px; align-items: flex-start; } .kbp-hero-section-container--text-only .kbp-article-scope-label p { line-height: 28px; } @media (min-width: 1024px) { .kbp-hero-section-container--text-only { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 20px; align-items: start; } .kbp-hero-section-container--text-only .kbp-hero-section-content { order: 1; grid-column: 1; max-width: 42em; } .kbp-hero-section-container--text-only .kbp-hero-section-scope { order: 2; grid-column: 2; justify-self: stretch; max-width: min(100%, 360px); } } @media (min-width: 1280px) { .kbp-hero-section-container--text-only { column-gap: 24px; } } /* Hero + guide jump band (PAT-GUIDE-JUMP handheld layout) */ .kbp-hero-jump-band { display: flex; flex-direction: column; gap: 16px; background: var(--neutral-bg0, #ffffff); border-radius: 8px; padding: 16px 18px; margin-bottom: var(--kbp-section-gap); } .kbp-hero-jump-band__intro { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-width: 40em; } @media (max-width: 1023px) { .kbp-hero-jump-band { gap: 12px; padding-bottom: 12px; } .kbp-hero-jump-band:has(+ .kbp-card-container) { margin-bottom: var(--kbp-section-gap-tight); } } @media (min-width: 1280px) { .kbp-hero-jump-band { gap: 14px; padding: 14px 18px; } } /* Remove Document360 wrapper spacing around hero image */ .kbp-hero-section-image p { margin: 0 !important; padding: 0 !important; } /* Actual hero element styling */ .kbp-hero-section-image img { display: block; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: contain; } /* PAT-VIDEO-02 â€” narrated walkthrough poster in hero (modal player unchanged) */ .kbp-hero-section-container--video > .kbp-landing-product-media { order: 1; border-radius: 8px; overflow: hidden; min-width: 0; width: 100%; aspect-ratio: 16 / 9; } .kbp-hero-section-container--video > .kbp-landing-product-media p.kbp-video-poster-wrap { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; display: block; } @media (min-width: 1024px) { .kbp-hero-section-container--video { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 32px; align-items: center; } } /* Hero lead â€” CDS Heading 4 / Semibold (Help PAT-02; h4 tag is D360 fluid parity) */ .kbp-hero-section-heading { font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); margin: 0; text-align: left; width: 100%; max-width: 100%; overflow-wrap: break-word; } /* Hero supporting line â€” Body / Regular; strong tags mark UI labels */ .kbp-hero-section-heading.kbp-hero-section-detail, .kbp-hero-section-detail { font: var(--cds-type-body); color: var(--neutral-text, #1e2022); } /* Beat D360 #articleContent h4 sizing/margins on hero lines */ #articleContent h4.kbp-hero-section-heading { font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); margin: 0; } #articleContent h4.kbp-hero-section-heading.kbp-hero-section-detail, #articleContent h4#hero-section-intro-detail.kbp-hero-section-heading { font: var(--cds-type-body); } /* Beat D360 #articleContent h3/h4 sizing/margins on bordered-card subsection labels */ #articleContent :is(h3, h4).kbp-two-col-card-title, #articleContent :is(h3, h4).kbp-two-col-card-title.hyperlink-wrapper-container { font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; text-wrap: wrap; } /* Beat D360 #articleContent h4 sizing/margins on in-card subsection labels */ #articleContent h4.kbp-card-intro, #articleContent h3.kbp-card-intro { font: var(--cds-type-heading-4-semibold) !important; color: var(--neutral-text, #1e2022) !important; margin: 0; padding: 0; text-wrap: wrap; } #articleContent .kbp-branded-card-content > h4:not(.kbp-card-intro):not(.kbp-two-col-card-title) { font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; } /* Optional hero list â€” same rhythm as hero headings (12px stack gap) */ .kbp-hero-section-list { margin: 0; padding-left: 20px; list-style-type: disc; width: 100%; } .kbp-hero-section-list.kbp-hero-section-list-ordered { list-style-type: decimal; } .kbp-hero-section-list li { font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); margin: 0; } .kbp-hero-section-list li p { margin: 0; } /* Legacy hero list export (li > h4) until article HTML is re-pasted */ #articleContent .kbp-hero-section-list li h4 { font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; } .kbp-hero-section-list li + li { margin-top: 4px; } /* ============================================================================ Quick Links Pattern ============================================================================ Clickable icon cards for navigation to key topics. ============================================================================ */ /* Quick links container wrapping all cards */ .kbp-quick-links-container { background: var(--neutral-bg0, #ffffff); border-radius: 8px; padding: var(--kbp-quick-links-container-padding); display: grid; grid-template-columns: 1fr; gap: var(--kbp-quick-links-container-gap); } /* Mobile spacing for quick links container */ @media (max-width: 767px) { .kbp-quick-links-container { padding: 12px; gap: 12px; } } @media (min-width: 480px) and (max-width: 767px) { .kbp-quick-links-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .kbp-quick-links-container { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Two-up row â€” centered (e.g. Customer Care telephone + email) */ .kbp-quick-links-container--cols-2 { grid-template-columns: repeat(2, minmax(0, 200px)); justify-content: center; width: fit-content; max-width: 100%; margin-inline: auto; } } @media (min-width: 1024px) { /* Default 5-up for legacy paste HTML without a count modifier */ .kbp-quick-links-container:not([class*="--cols-"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kbp-quick-links-container--cols-2 { grid-template-columns: repeat(2, minmax(0, 200px)); } .kbp-quick-links-container--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kbp-quick-links-container--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kbp-quick-links-container--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Quick link card â€” D360 editor-safe div tile (legacy: anchor wrapper still supported) */ .kbp-quick-links-item { position: relative; min-width: 0; width: 100%; max-width: 200px; justify-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--kbp-quick-links-item-gap); padding: var(--kbp-quick-links-item-padding); border-radius: 8px; background: var(--neutral-bg0, #ffffff); transition: background-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } /* D360-safe stretched link â€” whole tile clickable without block-level */ .kbp-quick-links-link-row { position: absolute; inset: 0; z-index: 2; } .kbp-quick-links-link, #articleContent a.kbp-quick-links-link, #articleContent a.kbp-quick-links-link:hover, #articleContent a.kbp-quick-links-link:focus-visible { position: absolute; inset: 0; display: block; margin: 0; padding: 0; font-size: 0; line-height: 0; text-decoration: none !important; color: transparent; } .kbp-quick-links-link .kbp-quick-links-link-text { text-decoration: none !important; } /* Legacy published HTML â€” whole anchor was the tile */ a.kbp-quick-links-item, #articleContent a.kbp-quick-links-item, #articleContent a.kbp-quick-links-item:hover, #articleContent a.kbp-quick-links-item:focus-visible { text-decoration: none !important; } .kbp-quick-links-link::after { content: ""; position: absolute; inset: 0; } .kbp-quick-links-icon p, .kbp-quick-links-button p { margin: 0 !important; padding: 0 !important; } .kbp-quick-links-button p { text-align: center; } .kbp-quick-links-link-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .kbp-quick-links-item { max-width: none; justify-self: stretch; padding: 12px 10px; gap: 10px; } } /* Quick link card hover â€” soft branded shadow on the full tile */ .kbp-quick-links-item:hover, .kbp-quick-links-item:focus-within, a.kbp-quick-links-item:hover { background: #f9f9f9; box-shadow: 0 4px 14px rgba(125, 40, 85, 0.12); } /* Icon container at top of quick link card — tile chrome lives here so dark mode can swap plum fill for dark fill + brand border without a second SVG */ .kbp-quick-links-icon { width: 60px; height: 60px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 14px; background: #7d2855; box-sizing: border-box; } /* Full-color RGB icons (Figma Device Log Intro and similar): no plum tile. Use on the container: kbp-quick-links-container--icons-plain Or per icon: kbp-quick-links-icon--plain */ .kbp-quick-links-container--icons-plain .kbp-quick-links-icon, .kbp-quick-links-icon--plain, #articleContent .kbp-quick-links-container--icons-plain .kbp-quick-links-icon, #articleContent .kbp-quick-links-icon--plain { background: transparent !important; border: none !important; border-radius: 0; } /* Icon image/SVG scaling inside quick link icon */ .kbp-quick-links-icon img, .kbp-quick-links-icon svg { width: 100%; height: 100%; object-fit: contain; } /* Legacy label row wrapper (published HTML) â€” whole tile is the hit target in new markup */ .kbp-quick-links-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; margin: 0; min-height: 0; border-radius: 0; background: transparent; border: none; cursor: pointer; white-space: nowrap; } /* Quick link label â€” icon + label cards (underline on hover only; not on stretched ) */ .kbp-quick-links-label, #articleContent .kbp-quick-links-label { font: var(--cds-type-label-semibold); color: #1e2022; text-align: center; text-decoration: none !important; } /* Reinforce hover target â€” match Sandbox tile hover affordance */ .kbp-quick-links-item:hover .kbp-quick-links-label, .kbp-quick-links-item:focus-within .kbp-quick-links-label, a.kbp-quick-links-item:hover .kbp-quick-links-label, #articleContent .kbp-quick-links-item:hover .kbp-quick-links-label, #articleContent .kbp-quick-links-item:focus-within .kbp-quick-links-label { text-decoration: underline !important; text-underline-offset: 2px; } /* Quick links â€” icon + label only (no chevron); hide legacy markup until articles are updated */ .kbp-quick-links-chevron { display: none !important; } /* ============================================================================ Full Width Single Card Pattern ============================================================================ Generic white card: header + body + lists + optional imagery. ============================================================================ */ /* Full-width card outer container */ .kbp-card-container { background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #e6e8eb); border-radius: 8px; padding: var(--kbp-card-padding-top) 24px var(--kbp-card-padding-bottom) 24px; display: flex; flex-direction: column; gap: var(--kbp-card-header-gap); width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } /* Card header/title â€” typography by outline level (Help PAT â†’ CDS crosswalk) */ .kbp-card-header { color: var(--neutral-text, #1e2022); margin: 0; padding: 0; max-width: 100%; overflow-wrap: break-word; text-wrap: balance; } /* Pattern role [H1] â†’ CDS Heading 1 (32/44) â€” landing hub only (PAT-LANDING-05) */ h1.kbp-landing-heading, #articleContent h1.kbp-landing-heading { font: var(--cds-type-heading-1); color: var(--neutral-text, #1e2022); margin: 0 0 12px 0; padding: 0; text-wrap: balance; } #articleContent h1.kbp-landing-heading.hyperlink-wrapper-container { display: block; text-wrap: balance; margin: 0 0 12px 0 !important; padding: 0 !important; } #articleContent h1.kbp-landing-heading.hyperlink-wrapper-container .copy-link-btn { vertical-align: middle; } /* Pattern role [H2] â†’ CDS Heading 2 (24/36) */ h2.kbp-card-header, h2.kbp-section-heading, #articleContent h2.kbp-card-header, #articleContent h2.kbp-section-heading { font: var(--cds-type-heading-2); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; max-width: 100%; overflow-wrap: break-word; text-wrap: balance; } /* Visual section band â€” groups card stacks; not a ToC heading (use

; reset default paragraph margins */ .kbp-callout-stripe p { margin: 0; padding: 0; line-height: 0; font-size: 0; } /* Callout content area (title + body) */ .kbp-callout-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid; border-left: none; border-radius: 0 8px 8px 0; } /* Callout title â€” CDS Heading 3 / Semibold (Help PAT-20) */ .kbp-callout-content .kbp-callout-title { font: var(--cds-type-heading-3-semibold); color: var(--neutral-text, #1e2022); margin: 0; } .kbp-callout-content h4.kbp-callout-title { font: var(--cds-type-heading-4-semibold); } /* PAT subsection labels â€” suppress D360 chevron pseudo-markers on kbp-* titles */ #articleContent :is(h3, h4).kbp-callout-title::before, #articleContent :is(h3, h4).kbp-callout-title::after, #articleContent :is(h3, h4).kbp-two-col-card-title::before, #articleContent :is(h3, h4).kbp-two-col-card-title::after { content: none !important; display: none !important; } /* Callout body text (Body / Regular 16/24) */ .kbp-callout-body { font: var(--cds-type-body); color: var(--neutral-text, #1e2022); margin: 0; } /* D360 / browser default

between stripe and content â€” hide it */ #articleContent .kbp-callout > p { display: none !important; margin: 0 !important; padding: 0 !important; width: 0 !important; min-width: 0 !important; height: 0 !important; overflow: hidden !important; flex: 0 0 0 !important; } #articleContent .kbp-callout > .kbp-callout-content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; float: none !important; width: auto !important; min-width: 0 !important; } #articleContent .kbp-callout .kbp-callout-body { display: block; width: 100%; } #articleContent .kbp-callout .kbp-callout-body > p { margin: 0; } /* Mobile padding for callouts */ @media (max-width: 767px) { .kbp-callout-content { padding: 12px; } } /* ============================================================================ Instruction media grid (60% steps / 40% portrait image) Top-aligned so steps and screenshot share a common start edge ============================================================================ */ .kbp-instruction-media-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } #articleContent .kbp-instruction-media-grid { display: grid !important; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) !important; align-items: start !important; width: 100%; } /* Container on parent — @container cannot restyle the container element itself */ .kbp-card-content:has(.kbp-instruction-media-grid), #articleContent .kbp-card-content:has(.kbp-instruction-media-grid), #articleContent:has(> .kbp-instruction-media-grid) { container-type: inline-size; container-name: kbp-instruction-media; } .kbp-instruction-media-grid__steps { min-width: 0; display: flex; flex-direction: column; gap: var(--kbp-card-content-gap); } #articleContent .kbp-instruction-media-grid__steps { display: flex !important; flex-direction: column !important; gap: var(--kbp-card-content-gap) !important; } /* Match .kbp-card-content stack: zero D360 margins; flex gap = body ↔ list (8px). Callouts set their own top/bottom below so air stays even (16px / 16px). */ #articleContent .kbp-instruction-media-grid__steps > :is(p, .kbp-card-body, ol, ul, .kbp-card-list) { margin: 0 !important; } .kbp-instruction-media-grid__steps > .kbp-card-list:first-child, .kbp-instruction-media-grid__steps > :is(ol, ul):first-child { margin-top: 0; } /* * Callout in media-grid steps — same 16px nested rhythm as card-content * (flex gap 8 + margin 8). Top and bottom must both apply; zeroing only * margin-top left callouts looking tighter to the link below. */ .kbp-instruction-media-grid__steps > .kbp-callout, #articleContent .kbp-instruction-media-grid__steps > .kbp-callout { margin-left: 0 !important; margin-right: 0 !important; } .kbp-instruction-media-grid__steps > .kbp-callout:not(:first-child), #articleContent .kbp-instruction-media-grid__steps > .kbp-callout:not(:first-child) { margin-top: calc(var(--kbp-card-nested-block-gap) - var(--kbp-card-content-gap)) !important; } .kbp-instruction-media-grid__steps > .kbp-callout:not(:last-child), #articleContent .kbp-instruction-media-grid__steps > .kbp-callout:not(:last-child) { margin-bottom: calc(var(--kbp-card-nested-block-gap) - var(--kbp-card-content-gap)) !important; } .kbp-instruction-media-grid__steps > .kbp-callout:first-child, #articleContent .kbp-instruction-media-grid__steps > .kbp-callout:first-child { margin-top: 0 !important; } .kbp-instruction-media-grid__steps > .kbp-callout:last-child, #articleContent .kbp-instruction-media-grid__steps > .kbp-callout:last-child { margin-bottom: 0 !important; } .kbp-instruction-media-grid__image { display: flex; align-items: flex-start; justify-content: center; min-width: 0; align-self: start; } #articleContent .kbp-instruction-media-grid__image { display: flex !important; align-items: flex-start !important; justify-content: center !important; align-self: start !important; } .kbp-instruction-media-grid__image .kbp-card-image { width: 100%; max-width: 100%; } .kbp-instruction-media-grid__image .kbp-card-image img { width: 100% !important; height: auto !important; max-height: 100%; object-fit: contain; } /* Portrait phone screenshots (Participant Resources) — natural width, capped */ .kbp-instruction-media-grid--portrait .kbp-instruction-media-grid__image .kbp-card-image, #articleContent .kbp-instruction-media-grid--portrait .kbp-instruction-media-grid__image .kbp-card-image { width: auto; max-width: min(100%, 300px); margin-inline: auto; } .kbp-instruction-media-grid--portrait .kbp-instruction-media-grid__image .kbp-card-image img, #articleContent .kbp-instruction-media-grid--portrait .kbp-instruction-media-grid__image .kbp-card-image img { width: auto !important; max-width: 100% !important; height: auto !important; max-height: none; object-fit: contain; } /* Stack steps above full-width image when the card column is narrow (both TOCs open) */ @container kbp-instruction-media (max-width: 900px) { .kbp-instruction-media-grid, #articleContent .kbp-instruction-media-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .kbp-instruction-media-grid__image, #articleContent .kbp-instruction-media-grid__image { justify-content: center !important; width: 100% !important; } .kbp-instruction-media-grid__image .kbp-card-image, #articleContent .kbp-instruction-media-grid__image .kbp-card-image { width: 100% !important; max-width: 100% !important; } } @media (max-width: 767px) { .kbp-instruction-media-grid, #articleContent .kbp-instruction-media-grid { grid-template-columns: 1fr !important; } } /* ============================================================================ Guide jump index (PAT-GUIDE-JUMP) â€” bespoke in-page anchors when ToC is off ============================================================================ */ .kbp-guide-jump-index { display: flex; flex-direction: column; gap: var(--kbp-card-header-gap); margin-bottom: 0; min-width: 0; } .kbp-hero-jump-band .kbp-guide-jump-index { margin-bottom: 0; } .kbp-guide-jump-index__label { margin: 0; } .kbp-guide-jump-index__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kbp-card-grid-gap); } @media (min-width: 768px) { .kbp-guide-jump-index__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1280px) { .kbp-guide-jump-index__grid { gap: 12px; } } .kbp-guide-jump-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 100%; padding: 14px; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 8px; background: var(--neutral-bg0, #ffffff); color: inherit; box-shadow: 0 1px 2px rgba(16, 18, 20, 0.04); transition: border-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; } .kbp-guide-jump-card:hover, .kbp-guide-jump-card:has(.kbp-guide-jump-card__link:hover), .kbp-guide-jump-card:has(.kbp-guide-jump-card__link:focus-visible), a.kbp-guide-jump-card:hover, a.kbp-guide-jump-card:focus-visible { border-color: var(--informative, #007bd9); box-shadow: 0 4px 12px rgba(0, 123, 217, 0.12); text-decoration: none; } /* D360-safe stretched link â€” whole tile clickable without block-level */ .kbp-guide-jump-card__link-row { position: absolute; inset: 0; z-index: 2; } .kbp-guide-jump-card__link, #articleContent a.kbp-guide-jump-card__link, #articleContent a.kbp-guide-jump-card__link:hover, #articleContent a.kbp-guide-jump-card__link:focus-visible { position: absolute; inset: 0; display: block; margin: 0; padding: 0; font-size: 0; line-height: 0; text-decoration: none !important; color: transparent; } a.kbp-guide-jump-card, #articleContent a.kbp-guide-jump-card, #articleContent a.kbp-guide-jump-card:hover, #articleContent a.kbp-guide-jump-card:focus-visible { text-decoration: none !important; color: inherit; } .kbp-guide-jump-card__link::after { content: ""; position: absolute; inset: 0; } .kbp-guide-jump-card__link-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Step index â€” own row above title; avoids badge + wrap alignment issues */ .kbp-guide-jump-card__step { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 1.5rem; height: 1.5rem; margin: 0; padding: 0 6px; border-radius: 999px; background: #7d2855; color: #ffffff; font: var(--cds-type-label-semibold); font-size: 11px; line-height: 1; letter-spacing: 0.02em; } .kbp-guide-jump-card__title { margin: 0; font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); text-wrap: pretty; } #articleContent .kbp-guide-jump-card__title { font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; } .kbp-guide-jump-card__intro { margin: 0; font: var(--cds-type-body-small); color: var(--neutral-text-subtle, #697074); } /* D360 Sandbox â€” legacy guide jump custom-block spacing (prefer editor-safe div tiles) */ #articleContent :is(editor360-custom-block, .editor360-custom-block):has(.kbp-guide-jump-index) { display: block !important; margin-bottom: var(--kbp-section-gap) !important; } #articleContent :is(editor360-custom-block, .editor360-custom-block):has(.kbp-guide-jump-index) > .kbp-guide-jump-index { margin-bottom: 0 !important; } #articleContent .kbp-hero-jump-band:has(+ .kbp-card-container) { margin-bottom: var(--kbp-section-gap); } .kbp-hero-jump-band:has(+ .kbp-instruction-section) { margin-bottom: var(--kbp-section-gap); } /* ============================================================================ Instruction section (PAT-INSTRUCTION-WALKTHROUGH) â€” text + player card grid ============================================================================ */ .kbp-instruction-section { margin-bottom: 0; padding: 28px 24px; width: 100%; box-sizing: border-box; } /* Candy-stripe bands â€” Preparing first (odd top-level sections); nested sub-processes excluded */ .kbp-instruction-section:not(.kbp-instruction-section--nested):nth-child( odd of .kbp-instruction-section:not(.kbp-instruction-section--nested) ) { background-color: var(--brand-bg-subtle, #faf6f8); border-radius: 8px; } #articleContent .kbp-instruction-section:not(.kbp-instruction-section--nested):nth-child( odd of .kbp-instruction-section:not(.kbp-instruction-section--nested) ) { background-color: var(--brand-bg-subtle, #faf6f8) !important; } /* Rhythm between walkthrough sections â€” candy stripe provides delineation */ .kbp-card-container + .kbp-instruction-section { margin-top: var(--kbp-section-gap); } .kbp-instruction-section + .kbp-card-container { margin-top: var(--kbp-section-gap); } .kbp-instruction-section:last-child { margin-bottom: var(--kbp-section-gap); } /* Nested walkthroughs inside a parent card (e.g. Creating a Subject) */ .kbp-card-container--instruction-group { margin-top: var(--kbp-section-gap); } /* Creating a Subject â€” intro row (paragraph + numbered step nav) */ .kbp-instruction-group-intro { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; max-width: none; } @media (min-width: 768px) { .kbp-instruction-group-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 32px; } } .kbp-instruction-group-intro__lead { margin: 0; min-width: 0; } .kbp-instruction-group-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; } .kbp-instruction-group-nav__item { margin: 0; padding: 0; } .kbp-instruction-group-nav__text { margin: 0; padding: 0; font: var(--cds-type-body); color: var(--neutral-text, #1e2022); } .kbp-instruction-group-nav__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; margin: 0 8px 0 0; padding: 0 6px; border-radius: 999px; /* Hardcoded plum — do not use var(--brand); dark remaps --brand to #ffaac8 (white-on-pink fail) */ background: #7d2855; color: #ffffff; font: var(--cds-type-label-semibold); font-size: 11px; line-height: 1; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; } .kbp-instruction-group-nav__link, #articleContent a.kbp-instruction-group-nav__link, #articleContent a.kbp-instruction-group-nav__link:visited { font-weight: 600; color: var(--brand, #7d2855) !important; text-decoration: none !important; } .kbp-instruction-group-nav__link:hover, .kbp-instruction-group-nav__link:focus-visible, #articleContent a.kbp-instruction-group-nav__link:hover, #articleContent a.kbp-instruction-group-nav__link:focus-visible { color: var(--brand, #7d2855) !important; text-decoration: underline !important; outline: none; } #articleContent ol.kbp-instruction-group-nav { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } #articleContent .kbp-instruction-group-nav__item { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } #articleContent .kbp-instruction-group-nav__text { margin: 0 !important; padding: 0 !important; font: var(--cds-type-body) !important; color: var(--neutral-text, #1e2022) !important; } /* D360 may isolate the badge in its own
â€” keep one visual line */ #articleContent .kbp-instruction-group-nav__item > p { margin: 0 !important; padding: 0 !important; } #articleContent .kbp-instruction-group-nav__item > p:not(:only-child) { display: inline !important; } #articleContent .kbp-instruction-group-intro__lead { margin: 0 !important; } .kbp-card-container--instruction-group + .kbp-instruction-section { margin-top: var(--kbp-section-gap); } .kbp-instruction-group { margin-top: 24px; max-width: none; } .kbp-instruction-section--nested { padding: 32px 0 0; background: transparent; border-radius: 0; } .kbp-instruction-group > .kbp-instruction-section--nested:not(:last-child) { padding-bottom: 32px; } .kbp-instruction-section--nested + .kbp-instruction-section--nested { border-top: none; margin-top: 0; padding-top: 52px; position: relative; } .kbp-instruction-section--nested + .kbp-instruction-section--nested::before { content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 0; border: none; border-top: 1px solid var(--brand-border, #c9a6b8); border-image-source: var(--kbp-section-divider-gradient); border-image-slice: 1; background: none; } #articleContent .kbp-instruction-section--nested { background-color: transparent !important; } #articleContent .kbp-instruction-section--nested + .kbp-instruction-section--nested::before { background: none !important; border-top-color: var(--brand-border, #c9a6b8) !important; border-image-source: var(--kbp-section-divider-gradient) !important; border-image-slice: 1 !important; } .kbp-instruction-section--nested .kbp-instruction-section__player-card { box-shadow: none; } /* Walkthrough player â€” portrait Handheld vs landscape tablet / computer */ .kbp-instruction-walkthrough[data-device="phone"] .kbp-instruction-section__player-card { --kbp-walkthrough-player-max-width: 280px; } .kbp-instruction-walkthrough[data-device="tablet"] .kbp-instruction-section__player-card, .kbp-instruction-walkthrough[data-device="browser"] .kbp-instruction-section__player-card { --kbp-walkthrough-player-max-width: 440px; } .kbp-instruction-walkthrough { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "content player"; gap: var(--kbp-card-grid-gap); align-items: start; width: 100%; } .kbp-instruction-section--media-start .kbp-instruction-walkthrough { grid-template-areas: "player content"; } #articleContent .kbp-instruction-walkthrough { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-template-areas: "content player" !important; align-items: start !important; width: 100%; } #articleContent .kbp-instruction-section--media-start .kbp-instruction-walkthrough { grid-template-areas: "player content" !important; } /* Plain-text column â€” not inside a card; KBP typography + D360 resets */ .kbp-instruction-section__content { grid-area: content; display: flex; flex-direction: column; gap: var(--kbp-card-content-gap); min-width: 0; } #articleContent .kbp-instruction-section__content { display: flex !important; flex-direction: column !important; gap: var(--kbp-card-content-gap) !important; font: var(--cds-type-body) !important; color: var(--neutral-text, #1e2022) !important; } #articleContent .kbp-instruction-section__content > :is(h2, h3).kbp-card-header { margin: 0 !important; padding: 0 !important; } #articleContent .kbp-instruction-section__content > p.kbp-card-body { margin: 0 !important; font: var(--cds-type-body) !important; color: var(--neutral-text, #1e2022) !important; } #articleContent .kbp-instruction-section__content > .kbp-callout { margin: 0 !important; } /* Self-contained player card in the media column */ .kbp-instruction-section__player-card { grid-area: player; --kbp-walkthrough-player-max-width: 280px; margin-bottom: 0; padding: 12px; align-self: start; position: sticky; top: 16px; width: 100%; max-width: var(--kbp-walkthrough-player-max-width); justify-self: center; } .kbp-instruction-section__player-card > .kbp-card-content { gap: 0; } .kbp-instruction-static-image { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; } .kbp-instruction-walkthrough__player { min-width: 0; width: 100%; } .kbp-step-player { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 8px; background: #101214; overflow: hidden; } .kbp-step-player__viewport { position: relative; aspect-ratio: 9 / 16; max-height: min(72vh, 640px); background: #000; } /* Portrait â€” Handheld walkthroughs */ .kbp-instruction-walkthrough[data-device="phone"] .kbp-step-player__viewport { aspect-ratio: 9 / 16; } /* Landscape â€” tablet / computer walkthroughs (matches 1280Ã—800 placeholders) */ .kbp-instruction-walkthrough[data-device="tablet"] .kbp-step-player__viewport, .kbp-instruction-walkthrough[data-device="browser"] .kbp-step-player__viewport { aspect-ratio: 16 / 10; max-height: min(44vh, 320px); } .kbp-instruction-section .kbp-step-player__viewport { max-height: min(52vh, 420px); } .kbp-instruction-section .kbp-instruction-walkthrough[data-device="tablet"] .kbp-step-player__viewport, .kbp-instruction-section .kbp-instruction-walkthrough[data-device="browser"] .kbp-step-player__viewport { max-height: min(40vh, 280px); } /* D360 editor wraps stacked frames in
with nbsp â€” collapse wrapper height */ .kbp-step-player__viewport > :is(p, div):only-child { margin: 0; padding: 0; height: 100%; font-size: 0; line-height: 0; } #articleContent .kbp-step-player__viewport > :is(p, div):only-child { margin: 0 !important; padding: 0 !important; height: 100%; font-size: 0; line-height: 0; } /* D360 wraps progress text in
inside flex controls */ .kbp-step-player__controls > p { display: contents; } #articleContent .kbp-step-player__controls > p { display: contents !important; } #articleContent .kbp-step-player__controls > p .kbp-step-player__progress { margin-left: auto; } .kbp-step-player__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .kbp-step-player__frame--active, .kbp-step-player__video { opacity: 1; pointer-events: auto; } .kbp-step-player__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; } .kbp-step-player__controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(16, 18, 20, 0.96); } .kbp-step-player__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #ffffff; font-size: 14px; line-height: 1; cursor: pointer; } .kbp-step-player__btn:hover, .kbp-step-player__btn:focus-visible { background: rgba(255, 255, 255, 0.18); outline: 2px solid #ffffff; outline-offset: 2px; } .kbp-step-player__progress { margin-left: auto; color: rgba(255, 255, 255, 0.88); font: var(--cds-type-body-small); } .kbp-instruction-walkthrough__steps { min-width: 0; } /* PAT-INSTRUCTION-WALKTHROUGH â€” hero layout (player + intro in hero; steps below, no card) */ .kbp-instruction-walkthrough--hero-layout { display: flex; flex-direction: column; gap: var(--kbp-section-gap, 16px); width: 100%; } #articleContent .kbp-instruction-walkthrough--hero-layout { display: flex !important; flex-direction: column !important; grid-template-columns: unset !important; grid-template-areas: unset !important; gap: var(--kbp-section-gap, 16px) !important; } .kbp-hero-section-container--walkthrough { margin-bottom: 0; width: 100%; } /* Mobile â€” intro first, then player (keeps player adjacent to instructions) */ @media (max-width: 1023px) { .kbp-hero-section-container--walkthrough { display: flex; flex-direction: column; gap: 12px; } .kbp-hero-section-container--walkthrough .kbp-hero-section-content { order: 1; } .kbp-hero-section-container--walkthrough .kbp-hero-section-image { order: 2; max-width: 100%; } } @media (min-width: 1024px) { .kbp-hero-section-container--walkthrough { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); column-gap: 32px; align-items: center; } .kbp-hero-section-container--walkthrough .kbp-hero-section-image { max-width: 100%; justify-self: stretch; } .kbp-hero-section-container--walkthrough .kbp-hero-section-content { max-width: none; align-self: center; } } .kbp-hero-section-container--walkthrough .kbp-instruction-walkthrough__player { width: 100%; max-width: 100%; } .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section { display: flex; flex-direction: column; gap: var(--kbp-card-content-gap, 8px); min-width: 0; width: 100%; position: relative; margin-top: 8px; padding-top: 52px; } /* Plum gradient divider — matches Creating a Subject nested walkthroughs */ .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section::before { content: ""; position: absolute; top: 24px; left: 0; right: 0; height: 0; border: none; border-top: 1px solid var(--brand-border, #c9a6b8); border-image-source: var(--kbp-section-divider-gradient); border-image-slice: 1; background: none; } #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section::before { background: none !important; border-top-color: var(--brand-border, #c9a6b8) !important; border-image-source: var(--kbp-section-divider-gradient) !important; border-image-slice: 1 !important; } .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section > .kbp-card-header { margin: 0; } .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section > .kbp-callout { margin-block: 0; } /* * Uncarded steps stack (H2 + steps + callout) â†’ carded section: 16px section rhythm. * Inside __steps-section the flex gap is 8px â€” add 8px margin (total 16px). * Sibling of __steps-section uses the walkthrough column gap (16px); margin stays 0. */ .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section > .kbp-card-container { margin-top: calc(var(--kbp-section-gap) - var(--kbp-card-content-gap)); } .kbp-instruction-walkthrough--hero-layout > .kbp-card-container { margin-top: 0; width: 100%; } #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section > .kbp-card-container { margin-top: calc(var(--kbp-section-gap) - var(--kbp-card-content-gap)) !important; } /* * Uncarded steps stack before a carded section â€” inset to match kbp-card-container padding * (header, steps, callout align with card header / body; divider stays full width). */ .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > :not(.kbp-card-container), .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > :not(.kbp-card-container) { margin-inline: 24px; } @media (max-width: 767px) { .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > :not(.kbp-card-container), .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > :not(.kbp-card-container) { margin-inline: 16px; } } #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > :not(.kbp-card-container), #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > :not(.kbp-card-container) { margin-inline: 24px !important; } /* width:100% on callouts ignores margin-inline â€” shrink to padded content column */ .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > .kbp-callout, .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > .kbp-callout { width: auto; box-sizing: border-box; } #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > .kbp-callout, #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > .kbp-callout { width: auto !important; box-sizing: border-box !important; } @media (max-width: 767px) { #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(+ .kbp-card-container) > :not(.kbp-card-container), #articleContent .kbp-instruction-walkthrough--hero-layout .kbp-instruction-walkthrough__steps-section:has(> .kbp-card-container) > :not(.kbp-card-container) { margin-inline: 16px !important; } } .kbp-instruction-walkthrough--hero-layout[data-device="browser"] .kbp-step-player__viewport { max-height: min(50vh, 420px); } @media (min-width: 1024px) { .kbp-instruction-walkthrough--hero-layout[data-device="browser"] .kbp-step-player__viewport { max-height: min(56vh, 520px); } } .kbp-instruction-step-list { margin: 0; } .kbp-instruction-step { border-left: 3px solid transparent; border-radius: 6px; padding: 8px 10px 8px 12px; margin: 0 0 8px; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .kbp-instruction-step:last-child { margin-bottom: 0; } /* White chip + plum accent â€” readable on white and candy-stripe section bands */ .kbp-instruction-step--active { background: var(--neutral-bg0, #ffffff); border-left-color: var(--brand, #7d2855); box-shadow: 0 1px 3px rgba(37, 38, 39, 0.08), 0 0 0 1px var(--brand-border, #c9a6b8); } #articleContent .kbp-instruction-step--active { background: var(--neutral-bg0, #ffffff) !important; border-left-color: var(--brand, #7d2855) !important; box-shadow: 0 1px 3px rgba(37, 38, 39, 0.08), 0 0 0 1px var(--brand-border, #c9a6b8) !important; } .kbp-instruction-step:hover:not(.kbp-instruction-step--active) { background: rgba(255, 255, 255, 0.72); } #articleContent .kbp-instruction-step:hover:not(.kbp-instruction-step--active) { background: rgba(255, 255, 255, 0.72) !important; } .kbp-instruction-step > p, .kbp-instruction-step .kbp-card-body { margin: 0; } @media (max-width: 767px) { .kbp-instruction-section { padding: 20px 16px; } .kbp-instruction-walkthrough, #articleContent .kbp-instruction-walkthrough { grid-template-columns: 1fr !important; grid-template-areas: "content" "player" !important; } .kbp-instruction-section--media-start .kbp-instruction-walkthrough, #articleContent .kbp-instruction-section--media-start .kbp-instruction-walkthrough { grid-template-areas: "content" "player" !important; } .kbp-instruction-section__player-card { position: static; max-width: min(100%, var(--kbp-walkthrough-player-max-width, 280px)); margin-inline: auto; } .kbp-instruction-section .kbp-step-player__viewport { max-height: min(60vh, 480px); } .kbp-instruction-section .kbp-instruction-walkthrough[data-device="tablet"] .kbp-step-player__viewport, .kbp-instruction-section .kbp-instruction-walkthrough[data-device="browser"] .kbp-step-player__viewport { max-height: min(50vh, 300px); } } /* ============================================================================ Branded Container Pattern (Purple/Pink Band with White Cards) ============================================================================ Colored band with one or more inner white cards and optional badge headings. ============================================================================ */ /* Outer branded container - purple/pink background band */ .kbp-branded-container { background-color: var(--brand-bg-2, #eadde4); border: 1px solid var(--neutral-border-1, #e6e8eb); border-radius: 8px; padding: var(--kbp-card-padding-top) 24px var(--kbp-card-padding-bottom) 24px; display: flex; flex-direction: column; gap: var(--kbp-card-header-gap); } @media (max-width: 768px) { .kbp-branded-container { padding: 12px 16px 20px 16px; } } @media (max-width: 480px) { .kbp-branded-container { padding: 12px 16px 20px 16px; } } /* Single-column grid of white cards inside branded container (default) */ .kbp-branded-cards-grid { display: grid; grid-template-columns: 1fr; gap: var(--kbp-card-grid-gap); } @media (max-width: 768px) { .kbp-branded-cards-grid { gap: var(--kbp-card-grid-gap); } } @media (max-width: 480px) { .kbp-branded-cards-grid { gap: var(--kbp-card-grid-gap); } } /* Two-column grid variant inside branded container (desktop/tablet) */ .kbp-branded-cards-grid--two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kbp-card-grid-gap); margin-top: 0; } @media (max-width: 768px) { .kbp-branded-cards-grid--two-col { grid-template-columns: 1fr; gap: var(--kbp-card-grid-gap); } } @media (max-width: 480px) { .kbp-branded-cards-grid--two-col { gap: var(--kbp-card-grid-gap); } } /* Individual white card inside branded container */ .kbp-branded-card { background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #e6e8eb); border-radius: 8px; overflow: hidden; } /* Branded-band highlight card â€” white fill, full brand border (summary call-to-action) */ .kbp-branded-container .kbp-branded-card.kbp-branded-card--outline { background: var(--neutral-bg0, #ffffff); border: 2px solid var(--brand, #7d2855); box-shadow: 0px 2px 3px 0px rgba(37, 38, 39, 0.04); } /* Branded card content wrapper */ .kbp-branded-card-content { padding: 16px 24px 24px; display: flex; flex-direction: column; gap: var(--kbp-card-content-gap); } @media (max-width: 768px) { .kbp-branded-card-content { padding: 12px 16px 16px; } } /* Title-only branded chips (e.g. Reports you may see): equal vertical inset, fill stretched grid peers, and center the label so row height stays even without looking bottom-heavy. Default branded padding is 16/24 for header+body. */ .kbp-branded-card:has(> .kbp-branded-card-content > :is(h3, h4):only-child) { height: 100%; display: flex; flex-direction: column; } .kbp-branded-card-content:has(> :is(h3, h4):only-child) { padding-top: 16px; padding-bottom: 16px; flex: 1 1 auto; height: 100%; box-sizing: border-box; justify-content: center; } @media (max-width: 768px) { .kbp-branded-card-content:has(> :is(h3, h4):only-child) { padding-top: 12px; padding-bottom: 12px; } } /* MDM app switcher (Updating Your Software â€” PAT-MDM-APP-SWITCHER) Blends segmented pill slider (light track + brand sliding indicator) with Crystal TabBar tokens. */ .kbp-mdm-app-switcher { display: flex; flex-direction: column; gap: 0; margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--neutral-border-1, #dadcde); } .kbp-mdm-app-switcher__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kbp-mdm-app-switcher__track { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 0; width: min(100%, 20.5rem); max-width: 100%; padding: 3px; background: var(--neutral-bg-2, #edeff0); border-radius: 999px; border: none; overflow: hidden; isolation: isolate; } /* Sliding pill indicator â€” brand fill (Crystal selected-tab accent) */ .kbp-mdm-app-switcher__track::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--brand, #7d2855); box-shadow: none; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; pointer-events: none; } .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked) .kbp-mdm-app-switcher__track::before { transform: translateX(100%); } .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) .kbp-mdm-app-switcher__track::before { transform: translateX(200%); } .kbp-mdm-app-switcher__tab { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0; padding: 6px 10px; border: none; border-radius: 999px; background: transparent; text-align: center; font: var(--cds-type-label); color: var(--neutral-text-subtle, #697074); cursor: pointer; transition: color 0.2s ease; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent; } .kbp-mdm-app-switcher__tab:hover { color: var(--neutral-text, #1e2022); } .kbp-mdm-app-switcher:not(:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked)):not( :has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) ) .kbp-mdm-app-switcher__tab:nth-child(1), .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(1):checked) .kbp-mdm-app-switcher__tab:nth-child(1), .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked) .kbp-mdm-app-switcher__tab:nth-child(2), .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) .kbp-mdm-app-switcher__tab:nth-child(3) { color: #ffffff; font: var(--cds-type-label-semibold); } .kbp-mdm-app-switcher:not(:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked)):not( :has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) ) .kbp-mdm-app-switcher__tab:nth-child(1):hover, .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(1):checked) .kbp-mdm-app-switcher__tab:nth-child(1):hover, .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked) .kbp-mdm-app-switcher__tab:nth-child(2):hover, .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) .kbp-mdm-app-switcher__tab:nth-child(3):hover { color: #ffffff; } .kbp-mdm-app-switcher > .kbp-mdm-app-panel { display: none; flex-direction: column; gap: var(--kbp-card-content-gap); margin-top: 20px; padding-top: 4px; } /* Default: Airwatch (first panel) visible â€” survives D360 stripping `checked` */ .kbp-mdm-app-switcher > .kbp-mdm-app-panel:nth-child(5) { display: flex; } .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(2):checked ~ .kbp-mdm-app-panel:nth-child(5), .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(3):checked ~ .kbp-mdm-app-panel:nth-child(5) { display: none; } .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(1):checked ~ .kbp-mdm-app-panel:nth-child(6), .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(1):checked ~ .kbp-mdm-app-panel:nth-child(7), .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(2):checked ~ .kbp-mdm-app-panel:nth-child(7) { display: none; } .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(2):checked ~ .kbp-mdm-app-panel:nth-child(6), .kbp-mdm-app-switcher > .kbp-mdm-app-switcher__input:nth-of-type(3):checked ~ .kbp-mdm-app-panel:nth-child(7) { display: flex; } .kbp-mdm-app-panel .kbp-callout { margin-top: 4px; } @media (max-width: 480px) { .kbp-mdm-app-switcher__track { width: min(100%, 17.5rem); padding: 2px; } .kbp-mdm-app-switcher__track::before { top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); } .kbp-mdm-app-switcher__tab { padding: 5px 6px; font-size: 11px; line-height: 14px; letter-spacing: 0.01em; } } #articleContent .kbp-mdm-app-switcher__tab { margin-bottom: 0 !important; font: var(--cds-type-label) !important; color: var(--neutral-text-subtle, #697074) !important; background: transparent !important; } #articleContent .kbp-mdm-app-switcher__track { background: var(--neutral-bg-2, #edeff0) !important; border: none !important; width: min(100%, 20.5rem) !important; max-width: 100% !important; } #articleContent .kbp-mdm-app-switcher__track::before { background: var(--brand, #7d2855) !important; box-shadow: none !important; } #articleContent .kbp-mdm-app-switcher:not(:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked)):not( :has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) ) .kbp-mdm-app-switcher__tab:nth-child(1), #articleContent .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(1):checked) .kbp-mdm-app-switcher__tab:nth-child(1), #articleContent .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(2):checked) .kbp-mdm-app-switcher__tab:nth-child(2), #articleContent .kbp-mdm-app-switcher:has(> .kbp-mdm-app-switcher__input:nth-of-type(3):checked) .kbp-mdm-app-switcher__tab:nth-child(3) { color: #ffffff !important; font: var(--cds-type-label-semibold) !important; } @media (max-width: 480px) { #articleContent .kbp-mdm-app-switcher__track { width: min(100%, 17.5rem) !important; } #articleContent .kbp-mdm-app-switcher__tab { font-size: 11px !important; line-height: 14px !important; padding: 5px 6px !important; } } @media (max-width: 480px) { .kbp-branded-card-content { padding: 12px; } } /* Branded card header row (badge + heading) */ .kbp-branded-card-header { display: flex; align-items: center; gap: 10px; } @media (max-width: 480px) { .kbp-branded-card-header { gap: 8px; margin: 0 0 12px 0; } } /* Branded card badge - circular number/step marker (Label / Semi Bold 12/16) */ .kbp-branded-card-badge { background-color: #7d2855; color: #ffffff; font-weight: 600; font-size: 12px; line-height: 16px; text-align: center; width: 30px; height: 30px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; top: 0; transform: none; margin: 0 !important; } @media (max-width: 480px) { .kbp-branded-card-badge { width: 26px; height: 26px; border-radius: 13px; font-size: 11px; line-height: 16px; } } /* Branded card heading text inline with badge â€” CDS Heading 3 / Semibold (Help PAT-19) */ .kbp-branded-card-header .kbp-branded-card-heading, .kbp-branded-card-header h3 { font: var(--cds-type-heading-3-semibold); color: var(--neutral-text, #1e2022); margin: 0 !important; padding: 0 !important; flex: 1; min-width: 0; } /* Titles inside branded cards â€” rely on flex gap, no extra bottom margin */ .kbp-branded-card-content > .kbp-card-header, .kbp-branded-card-content > h3.kbp-card-header, .kbp-branded-card-content > .kbp-branded-card-heading, .kbp-branded-card-content > h3:not(.kbp-branded-card-heading), .kbp-branded-card-content > .kbp-branded-card-header { margin: 0; } @media (max-width: 480px) { .kbp-branded-card-content > h3:not(.kbp-branded-card-heading) { margin: 0; } } /* Legacy H4 inside branded cards without .kbp-card-intro â€” prefer the class + #articleContent beat above */ .kbp-branded-card-content > h4:not(.kbp-card-intro):not(.kbp-two-col-card-title) { font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); margin: 0; } .kbp-branded-card-content > h4:first-child { margin-top: 0; } @media (max-width: 480px) { .kbp-branded-card-content > h4:not(.kbp-card-intro):not(.kbp-two-col-card-title) { margin: 0; } } /* Paragraph text inside branded cards (Body / Regular 16/24) */ .kbp-branded-card-content p { font-size: 16px; line-height: 24px; color: #1e2022; margin: 0; } @media (max-width: 480px) { .kbp-branded-card-content p { font-size: 14px; line-height: 22px; margin: 0; } } /* Remove bottom margin from last paragraph (kept for safety, margin is 0 anyway) */ .kbp-branded-card-content p:last-child { margin-bottom: 0; } /* List wrappers inside branded cards (ul/ol) */ .kbp-branded-card-content ul, .kbp-branded-card-content ol { margin: 0; padding-left: 24px; } @media (max-width: 480px) { .kbp-branded-card-content ul, .kbp-branded-card-content ol { margin: 0; padding-left: 20px; } } /* Remove bottom margin if list is last child (margin already 0) */ .kbp-branded-card-content ul:last-child, .kbp-branded-card-content ol:last-child { margin-bottom: 0; } /* Individual list items inside branded cards (Body / Regular 16/24) */ .kbp-branded-card-content li { font-size: 16px; line-height: 24px; color: #1e2022; margin-bottom: 8px; } @media (max-width: 480px) { .kbp-branded-card-content li { font-size: 14px; line-height: 22px; margin-bottom: 6px; } } /* Remove bottom margin from last list item */ .kbp-branded-card-content li:last-child { margin-bottom: 0; } /* Links inside branded cards */ .kbp-branded-card-content a { color: #007bd9; text-decoration: underline; word-break: break-word; } /* Hover color for links inside branded cards */ .kbp-branded-card-content a:hover { color: #0056a3; } /* Strong text inside branded cards */ .kbp-branded-card-content strong { font-weight: 600; } /* Emphasized text inside branded cards */ .kbp-branded-card-content em { font-style: italic; } /* Remove margins from
wrappers that are only used for the badge */ .kbp-branded-card-header p:has(.kbp-branded-card-badge), .kbp-branded-card-content p:has(.kbp-branded-card-badge), .kbp-badge-heading-row p:has(.kbp-branded-card-badge) { margin: 0 !important; padding: 0 !important; } /* ============================================================================ Badge + Heading Row Pattern (H2 or H3 with Badge) ============================================================================ Reusable row for numbered/lettered steps inside cards. ============================================================================ */ /* Badge + H2 heading row â€“ layout only, let H2 control size */ .kbp-badge-heading-row { display: flex; align-items: center; gap: 10px; margin: 0; } @media (max-width: 480px) { .kbp-badge-heading-row { gap: 8px; margin: 0 0 12px 0; } } /* Badge reused from branded cards */ .kbp-badge-heading-row .kbp-branded-card-badge { /* reuse existing badge styles; no change needed */ } /* H2 heading paired with badge â€” CDS Heading 2 (procedural card steps) */ .kbp-badge-heading-row .kbp-badge-heading-h2 { font: var(--cds-type-heading-2); color: var(--neutral-text, #1e2022); margin: 0; padding: 0; flex: 1; min-width: 0; } /* ============================================================================ PRODUCT LANDING HUB (PAT-LANDING-05) ============================================================================ Unified product picker cards â€” Chrome grid + Apple lineup discipline ============================================================================ */ .kbp-landing-header { margin-bottom: 32px; text-align: center; } .kbp-landing-heading { font: var(--cds-type-heading-1); color: var(--neutral-text, #1e2022); margin: 0 0 12px 0; text-wrap: balance; } /* Beat D360 platform H1 sizing/weight/margins in Sandbox */ #articleContent .kbp-landing-header > h1.kbp-landing-heading { font: var(--cds-type-heading-1) !important; font-size: 32px !important; line-height: 44px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: var(--neutral-text, #1e2022) !important; margin: 0 0 12px 0 !important; padding: 0 !important; text-align: center; } .kbp-landing-subtitle { margin: 0 auto; font: var(--cds-type-body); color: var(--neutral-text-subtle, #697074); max-width: 36rem; text-wrap: balance; } .kbp-landing-container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; } @media (max-width: 768px) { .kbp-landing-container { padding: 32px 16px; } } .kbp-landing-product-grid.kbp-two-col-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; } .kbp-landing-product-grid.kbp-three-col-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; } /* D360 Sandbox â€” self-contained grid (do not rely on global .kbp-two-col-grid alone) */ /* Two-up beat is consolidated at the end of this file (PAT-LANDING-05 block). */ #articleContent .kbp-landing-container > .kbp-landing-product-grid.kbp-two-col-grid > .kbp-landing-product-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } #articleContent .kbp-landing-container > .kbp-landing-product-grid.kbp-three-col-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } @media (max-width: 767px) { .kbp-landing-header { margin-bottom: 24px; } .kbp-landing-product-grid.kbp-two-col-grid, .kbp-landing-product-grid.kbp-three-col-grid { grid-template-columns: 1fr; column-gap: 16px; row-gap: 16px; } #articleContent .kbp-landing-container > .kbp-landing-product-grid.kbp-three-col-grid { grid-template-columns: 1fr !important; } } /* Whole-card surface â€” div shell + stretched text link (D360 editor-safe) */ .kbp-landing-product-card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 8px; overflow: hidden; background: var(--neutral-bg0, #ffffff); color: inherit; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } /* Invisible hit target â€” ::before leaves ::after free for icon fallback when D360 drops the icon span */ .kbp-landing-product-card .kbp-ecoa-platform-link-row :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text))::before, .kbp-landing-product-card a.kbp-ecoa-platform-link::before, .kbp-video-topic-card .kbp-ecoa-platform-link-row :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text))::before { content: ""; position: absolute; inset: 0; z-index: 1; } .kbp-landing-product-card .kbp-ecoa-platform-link-row { position: relative; z-index: 2; text-align: left; } .kbp-landing-product-card:hover, .kbp-landing-product-card:focus-within { transform: translateY(-1px); border-color: var(--informative-border, #7ac6ff); box-shadow: 0 4px 16px rgba(0, 123, 217, 0.08); } /* Screenshot well (Chrome-style tinted media block) */ .kbp-landing-product-media { position: relative; width: 100%; aspect-ratio: 640 / 361; overflow: hidden; } .kbp-landing-product-media--informative { background: var(--informative-bg-1, #e5f4ff); } .kbp-landing-product-media--brand { background: var(--brand-bg-2, #eadde4); } .kbp-landing-product-media--neutral { background: var(--neutral-bg-1, #f6f6f7); } /* Icon-led product cards (e.g. Customer Care contact methods) */ .kbp-landing-product-media--icon { aspect-ratio: auto; height: 72px; max-height: 72px; } .kbp-landing-product-media--icon img { object-fit: contain !important; object-position: center; width: auto !important; height: auto !important; max-width: 44px; max-height: 44px; margin: 0 auto; padding: 14px 20px; box-sizing: content-box; } #articleContent .kbp-contact-method-grid.kbp-landing-product-grid.kbp-two-col-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 32px; row-gap: 24px; margin-bottom: 24px; } #articleContent .kbp-contact-method-grid .kbp-landing-product-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } @media (max-width: 767px) { #articleContent .kbp-contact-method-grid.kbp-landing-product-grid.kbp-two-col-grid { grid-template-columns: 1fr !important; column-gap: 16px; row-gap: 16px; } } .kbp-landing-product-media--urgent { background: linear-gradient(180deg, #fde8e8 0%, #fff0f0 100%); } .kbp-landing-product-media--text-panel { display: block; } .kbp-landing-product-media p { margin: 0 !important; padding: 0 !important; height: 100%; float: none !important; display: block !important; } .kbp-landing-product-media img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; float: none !important; max-width: 100% !important; } .kbp-landing-product-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px; text-align: left; align-items: stretch; } .kbp-landing-product-body .kbp-ecoa-platform-link-row { margin-top: auto; margin-left: 0; margin-right: 0; margin-bottom: 0; padding: 0; width: max-content; max-width: 100%; text-align: left; display: block; align-self: flex-start; } /* D360 Sandbox â€” beat full-width / space-between link layout + paragraph margins */ #articleContent .kbp-landing-product-body > :is(p, div, h2, h3) { margin-top: 0 !important; margin-bottom: 0 !important; } #articleContent .kbp-landing-product-card .kbp-ecoa-platform-link-row { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; width: max-content !important; max-width: 100%; } #articleContent .kbp-landing-product-card .kbp-ecoa-platform-link-row > p { margin: 0 !important; padding: 0 !important; } /* Hub card CTA â€” underline on .kbp-ecoa-platform-link-text only (see end-of-file Sandbox beat) */ .kbp-landing-product-body > .kbp-card-header { margin: 0; color: var(--neutral-text, #1e2022); } .kbp-landing-product-tagline { margin: 0; flex: 1; font: var(--cds-type-body); color: var(--neutral-text-subtle, #697074); text-wrap: pretty; } /* Multi-path landing card (e.g. eCOA roles) â€” secondary list, not stretched CTA */ .kbp-landing-product-body > .kbp-card-intro { margin: 16px 0 8px; color: var(--neutral-text, #1e2022); } .kbp-landing-product-body > .kbp-hub-secondary-list { margin: 0; padding: 0; } #articleContent .kbp-landing-product-card .kbp-hub-secondary-link { color: #007bd9 !important; font-weight: 600 !important; text-decoration: none !important; } #articleContent .kbp-landing-product-card .kbp-hub-secondary-link:visited { color: var(--site-link-visited-color, #5928ed) !important; font-weight: 600 !important; text-decoration: none !important; } #articleContent .kbp-landing-product-card .kbp-hub-secondary-link:is(:hover, :focus-visible) { text-decoration: underline !important; } /* Platform CTA appearance â€” unified block at end of file (PAT-LANDING-05 / PAT-VIDEO-HUB) */ /* ============================================================================ PRODUCT LANDING â€” decision helper (PAT-LANDING-06, D360 editor-safe) ============================================================================ */ .kbp-landing-decision-section { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .kbp-landing-decision-intro { padding: 20px 24px; border: 1px solid var(--warning-border, #f7e097); border-radius: 8px; background: var(--warning-bg-1, #fdf9eb); } .kbp-landing-decision-intro > .kbp-card-header { margin: 0 0 8px 0; } .kbp-landing-decision-intro > .kbp-card-body { margin: 0; } .kbp-landing-decision-step > .kbp-card-header { margin: 0 0 12px 0; } .kbp-landing-decision-options.kbp-two-col-grid { column-gap: 16px; row-gap: 16px; } .kbp-landing-decision-option { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 8px; background: var(--neutral-bg0, #ffffff); } .kbp-landing-decision-option--nxt { background: var(--informative-bg-1, #e5f4ff); } .kbp-landing-decision-option--studyworks { background: var(--brand-bg-2, #eadde4); } .kbp-landing-decision-option:has(.kbp-ecoa-platform-link:hover), .kbp-landing-decision-option:has(.kbp-ecoa-platform-link:focus-visible) { border-color: var(--informative-border, #7ac6ff); box-shadow: 0 2px 8px rgba(0, 123, 217, 0.08); } .kbp-landing-decision-option-label { margin: 0; font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); } .kbp-landing-decision-option-desc { margin: 0; flex: 1; font: var(--cds-type-body); color: var(--neutral-text-subtle, #697074); } .kbp-landing-decision-option > .kbp-ecoa-platform-link-row { margin-top: auto; } @media (max-width: 767px) { .kbp-landing-decision-section { margin-top: 24px; } } /* ============================================================================ eCOA LANDING PAGE â€” legacy PAT-LANDING-01 (deprecated) ============================================================================ Platform selectors for NxT and StudyWorks â€” column + separate link row ============================================================================ */ /* ============================================ Hero Heading & Subtitle ============================================ */ /* Hero H1 â€“ prominent, full-width, centered */ .kbp-ecoa-landing-hero h1.kbp-ecoa-landing-heading { font-weight: 600 !important; /* semi-bold */ font-size: 44px !important; /* hero scale */ line-height: 56px !important; letter-spacing: 0 !important; margin: 0 0 12px 0 !important; color: #1e2022 !important; text-align: center !important; } /* Subtitle â€“ smaller, visually narrower than the H1 */ .kbp-ecoa-landing-subtitle { margin: 0 auto 16px auto; /* center horizontally */ font-size: 16px; line-height: 24px; color: #4b4f56; text-align: center; max-width: 600px; /* shorter line length than the H1 */ } /* ============================================ Platform columns & images ============================================ */ /* Each platform column inside the two-col grid */ .kbp-ecoa-platform-col { display: flex; flex-direction: column; gap: 8px; /* spacing between image, title, paragraph (and link when present) */ } /* Rectangular image card with 24px radius and ~640:361 ratio */ .kbp-ecoa-platform-image-card { position: relative; width: 100%; aspect-ratio: 640 / 361; border-radius: 24px; overflow: hidden; background: #f5f6f8; } /* Reset any margins/padding on the D360
wrapper */ .kbp-ecoa-platform-image-card p { margin: 0 !important; padding: 0 !important; } /* Image fills the card width, same behavior as before (no vertical re-centering) */ .kbp-ecoa-platform-image-card img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 24px; } /* Slight extra separation under the image card */ .kbp-ecoa-platform-col .kbp-ecoa-platform-image-card { margin-bottom: 8px; } /* ============================================ Platform links (second 2-col grid) ============================================ */ /* Link row under the descriptive paragraph */ .kbp-ecoa-platform-link-row { margin: 4px 0 0 0; /* small offset from paragraph */ } /* ============================================ Column spacing for the two-col grids ============================================ */ /* More breathing room between NxT / StudyWorks columns on the eCOA landing */ .kbp-landing-container>.kbp-two-col-grid { column-gap: 40px; /* increase horizontal gap between columns */ row-gap: 24px; /* vertical spacing between rows (if any) */ } /* Platform titles on landing hub */ .kbp-ecoa-platform-col > .kbp-card-header { margin: 0; } .kbp-ecoa-platform-col > .kbp-card-body { margin: 0; flex: 1; } /* CTA row sits at bottom of column when descriptions differ in length */ .kbp-ecoa-platform-col > .kbp-ecoa-platform-link-row { margin-top: auto; } /* Three-column landing hubs */ .kbp-landing-container > .kbp-three-col-grid { column-gap: 32px; row-gap: 24px; } @media (max-width: 767px) { .kbp-landing-container > .kbp-three-col-grid { column-gap: 16px; row-gap: 16px; } .kbp-landing-container > .kbp-two-col-grid { column-gap: 16px; row-gap: 16px; } } /* PAT-LANDING-01 hero scale â€” mobile */ @media (max-width: 767px) { .kbp-ecoa-landing-hero h1.kbp-ecoa-landing-heading { font-size: 32px !important; line-height: 40px !important; } } /* ============================================================================ VIDEO TUTORIAL HUB (PAT-VIDEO-HUB) ============================================================================ Topic picker landing at the top of long video index pages ============================================================================ */ .kbp-video-hub-landing { margin-bottom: 0; } .kbp-video-hub-landing .kbp-landing-header { margin-bottom: 32px; } .kbp-video-topic-card .kbp-landing-product-body { flex: 1; min-height: 8.5rem; } #articleContent h2.kbp-section-heading[id] { scroll-margin-top: 80px; } .kbp-video-category-back { margin: 0 0 var(--kbp-card-nested-block-gap); font: var(--cds-type-body); } .kbp-video-category-back a { color: var(--informative-text, #007bd9); text-decoration: none; font-weight: 600; } .kbp-video-category-back a:hover, .kbp-video-category-back a:focus-visible { text-decoration: underline; } @media (max-width: 1023px) { .kbp-video-hub-landing .kbp-landing-product-grid.kbp-three-col-grid, .kbp-video-hub-landing .kbp-landing-product-grid.kbp-two-col-grid { grid-template-columns: 1fr; } } /* ============================================================================ VIDEO TUTORIAL LIBRARY (PAT-VIDEO) ============================================================================ Section H2 + intro â†’ landing-style product cards with video media well ============================================================================ */ #articleContent h2.kbp-section-heading:not(.kbp-video-subsection-heading) { margin-top: var(--kbp-section-gap); margin-bottom: 0; color: var(--neutral-text, #1e2022) !important; } #articleContent h2.kbp-section-heading:not(.kbp-video-subsection-heading):first-child { margin-top: 0; } #articleContent h2.kbp-section-heading + :is(p, ul, ol), #articleContent h2.kbp-section-heading + p + :is(ul, ol), #articleContent .kbp-video-section-intro { margin-top: var(--kbp-card-content-gap) !important; margin-bottom: 0 !important; font: var(--cds-type-body) !important; color: #1e2022 !important; } /* Open category prose after section H2 â€” beat D360 branded body/list colors */ #articleContent h2.kbp-section-heading ~ :is(p, ul, ol):not([class*="kbp-"]) { margin-bottom: 0 !important; font: var(--cds-type-body) !important; color: #1e2022 !important; } #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) { margin-top: 0 !important; padding-left: 24px !important; list-style-position: outside; } #articleContent h2.kbp-section-heading + p + :is(ul, ol):not([class*="kbp-"]) { margin-top: var(--kbp-card-content-gap) !important; } #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li, #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li > p { color: #1e2022 !important; } #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li { margin-bottom: 4px; } #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li:last-child { margin-bottom: 0 !important; } #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li > p { margin: 0 !important; } #articleContent .kbp-video-section { margin-top: 24px; margin-bottom: var(--kbp-card-nested-block-gap); } #articleContent .kbp-video-section .kbp-landing-product-grid { margin-top: 0; } /* Stack video cards before the global two-col breakpoint â€” media + copy need more width */ @media (max-width: 1023px) { #articleContent .kbp-video-section .kbp-landing-product-grid.kbp-two-col-grid { grid-template-columns: 1fr; column-gap: 16px; row-gap: 16px; } } /* Reuse PAT-LANDING-05 card shell â€” video cards are not navigational */ .kbp-video-product-card { cursor: default; } .kbp-video-product-card:hover, .kbp-video-product-card:focus-within { border-color: var(--neutral-border-1, #dadcde); box-shadow: none; } /* PAT-VIDEO-02 â€” uniform 16:9 poster wells in the card grid */ .kbp-video-product-card .kbp-landing-product-media { aspect-ratio: 16 / 9; position: relative; display: block; overflow: hidden; } .kbp-video-play-trigger { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: #101214; cursor: pointer; text-align: left; isolation: isolate; } /* Play overlay â€” on trigger so it survives D360 empty-element stripping */ .kbp-video-play-trigger::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.32); pointer-events: none; } /* Play button drawn on ::after â€” suppress legacy hosted overlay img in article HTML */ .kbp-video-play-trigger .kbp-video-play-overlay, .kbp-video-play-trigger .kbp-video-play-icon-img { display: none !important; } .kbp-video-play-trigger::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 4; width: 72px; height: 72px; transform: translate(-50%, -50%); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='rgba(255%2C255%2C255%2C0.92)'/%3E%3Cpath d='M30 23.5v25l20-12.5-20-12.5z' fill='%237d2855'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease; } .kbp-video-play-trigger:hover::after, .kbp-video-play-trigger:focus-visible::after { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48)); } .kbp-video-play-trigger:focus-visible { outline: 2px solid var(--brand-primary, #7d2855); outline-offset: 2px; } .kbp-video-poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; background: #101214; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* Block Document360 image magnify / lightbox affordances on video poster thumbnails */ #articleContent .kbp-video-product-card .img-enlarge, #articleContent .kbp-video-product-card .image-enlarge, #articleContent .kbp-video-product-card .enlarge-icon, #articleContent .kbp-video-product-card [class*="image-expand"], #articleContent .kbp-video-product-card [class*="img-zoom"], #articleContent .kbp-video-product-card [class*="magnify"], #articleContent .kbp-video-product-card [class*="lightbox"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #articleContent .kbp-video-play-trigger { pointer-events: auto; cursor: pointer; } .kbp-video-poster--empty { background: url("/preview/placeholder-video-poster-landscape.svg") center center / cover no-repeat, linear-gradient(180deg, #efe6ec 0%, #eadde4 100%); } .kbp-video-play-icon { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.32); pointer-events: none; } /* D360 editor-safe play overlay (p + img) â€” dimming comes from ::before on trigger */ .kbp-video-product-card .kbp-landing-product-media p.kbp-video-play-overlay { position: absolute; inset: 0; z-index: 3; display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; background: transparent; pointer-events: none; } #articleContent .kbp-video-play-icon-img, .kbp-video-play-icon-img { display: block !important; width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; object-fit: contain !important; object-position: center center !important; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease; } .kbp-video-play-trigger:hover .kbp-video-play-icon-img, .kbp-video-play-trigger:focus-visible .kbp-video-play-icon-img { transform: scale(1.12); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48)); } .kbp-video-play-icon::before { content: ""; display: block; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease; } .kbp-video-play-trigger:hover .kbp-video-play-icon::before, .kbp-video-play-trigger:focus-visible .kbp-video-play-icon::before { transform: scale(1.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.48); } .kbp-video-play-icon::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-42%, -50%); width: 0; height: 0; border-top: 12.5px solid transparent; border-bottom: 12.5px solid transparent; border-left: 20px solid #7d2855; } /* Legacy inline SVG play icon (until re-paste) */ .kbp-video-play-icon-svg { display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease; } .kbp-video-play-trigger:hover .kbp-video-play-icon-svg, .kbp-video-play-trigger:focus-visible .kbp-video-play-icon-svg { transform: scale(1.12); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48)); } .kbp-video-product-card .kbp-landing-product-media p.kbp-video-poster-wrap, .kbp-video-product-card .kbp-landing-product-media p:not(.kbp-video-play-overlay) { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; display: block; } /* Legacy PAT-VIDEO inline video (until re-paste) */ .kbp-video-product-card .kbp-landing-product-media video { display: block; width: 100% !important; height: 100% !important; max-width: 100%; object-fit: cover; object-position: center center; background: #000; } #articleContent .kbp-video-product-card .kbp-landing-product-media video { width: 100% !important; height: 100% !important; max-width: 100%; } /* PAT-VIDEO category â€” merged section blocks (open layout: intro label + content stack) */ #articleContent .kbp-video-subsection { display: flex; flex-direction: column; gap: var(--kbp-card-header-gap); } #articleContent h2.kbp-section-heading + .kbp-video-subsection { margin-top: var(--kbp-section-gap); } #articleContent .kbp-video-category-back + .kbp-video-subsection { margin-top: 0; } #articleContent .kbp-video-subsection + .kbp-video-subsection { margin-top: var(--kbp-card-nested-block-gap); padding-top: var(--kbp-card-nested-block-gap); border-top: 1px solid var(--neutral-border-1, #dadcde); } #articleContent .kbp-video-subsection > h2.kbp-section-heading.kbp-video-subsection-heading, #articleContent .kbp-video-subsection > h3.kbp-card-intro.kbp-video-subsection-heading { margin-top: 0 !important; margin-bottom: 0 !important; } #articleContent .kbp-video-subsection > h3.kbp-card-intro.kbp-video-subsection-heading { font: var(--cds-type-body-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-video-subsection .kbp-card-content > .kbp-landing-product-grid.kbp-two-col-grid { column-gap: var(--kbp-card-grid-gap); row-gap: var(--kbp-card-grid-gap); margin-bottom: 0; } #articleContent .kbp-video-subsection .kbp-card-content > .kbp-landing-product-grid .kbp-video-product-card { margin-bottom: 0; } /* Legacy open layout â€” video grid outside .kbp-card-content */ #articleContent .kbp-video-subsection .kbp-video-section { margin-top: 0; } #articleContent .kbp-video-subsection .kbp-video-section .kbp-landing-product-grid.kbp-two-col-grid { column-gap: var(--kbp-card-grid-gap); row-gap: var(--kbp-card-grid-gap); } /* PAT-VIDEO category â€” subsection card shell pilot (Activation: prose + inner video tiles) */ #articleContent h2.kbp-section-heading + .kbp-video-subsection-card.kbp-card-container { margin-top: 0; } /* Inner video grid â€” card-grid rhythm (not hub landing 32/24 gaps) */ #articleContent .kbp-video-subsection-card .kbp-card-content > .kbp-landing-product-grid.kbp-two-col-grid { column-gap: var(--kbp-card-grid-gap); row-gap: var(--kbp-card-grid-gap); margin-bottom: 0; } #articleContent .kbp-video-subsection-card .kbp-card-content > .kbp-landing-product-grid .kbp-video-product-card { margin-bottom: 0; } #articleContent .kbp-video-subsection-card .kbp-landing-product-body { padding: 16px; } /* PAT-VIDEO-02 modal player */ .kbp-video-modal { width: min(960px, 92vw); max-width: 92vw; padding: 0; border: none; background: transparent; color: #fff; } .kbp-video-modal::backdrop { background: rgba(16, 18, 20, 0.78); } .kbp-video-modal-panel { position: relative; background: #101214; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } .kbp-video-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; } .kbp-video-modal-close:hover, .kbp-video-modal-close:focus-visible { background: rgba(255, 255, 255, 0.24); } .kbp-video-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .kbp-video-modal-title { margin: 0; padding: 16px 56px 0 20px; font: var(--cds-type-heading-4); color: #fff; } .kbp-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .kbp-video-modal-player { padding: 12px 20px 20px; } .kbp-video-modal-player video { display: block; width: 100%; max-height: min(72vh, 720px); height: auto; background: #000; } #articleContent .kbp-landing-product-body > :is(h2, h3).kbp-card-header { margin: 0 !important; } /* ============================================================================ FLAT PROSE STACK (PAT-FLAT-PROSE) ============================================================================ Template 1 / text-only articles without .kbp-card-container. D360 Sandbox/Live DOM: #articleContent d360-article article > blocks (not #articleContent > direct children). Astro preview uses #articleContent >. All rules duplicate both stack roots (+ d360-article where needed for specificity). Asymmetric rhythm: - Heading â†’ correlated body/list: tight (8px) - Body/list â†’ next heading: looser (20px) - Body â†’ major H2: divider or --kbp-flat-major-section-gap (57px) ============================================================================ */ /* --- Stack roots: reset platform margin: 16px 0 on p / h / lists --- */ #articleContent > :is(h2, h3, h4).kbp-card-header, #articleContent > h4.kbp-card-intro, #articleContent article > :is(h2, h3, h4).kbp-card-header, #articleContent article > h4.kbp-card-intro { margin-top: 0; margin-bottom: 0; } #articleContent > p.kbp-card-body, #articleContent article > p.kbp-card-body, #articleContent d360-article article > p.kbp-card-body { margin: 0 !important; font: var(--cds-type-body) !important; color: var(--neutral-text, #1e2022) !important; } #articleContent > :is(ul, ol).kbp-card-list, #articleContent article > :is(ul, ol).kbp-card-list, #articleContent d360-article article > :is(ul, ol).kbp-card-list { margin: 0 !important; padding-left: 1.25em !important; list-style-position: outside; font-size: 16px !important; line-height: 28px !important; color: var(--neutral-text, #1e2022) !important; } #articleContent > ol.kbp-card-list, #articleContent article > ol.kbp-card-list { list-style-type: decimal; } #articleContent > ul.kbp-card-list, #articleContent article > ul.kbp-card-list { list-style-type: disc; } #articleContent > .kbp-card-list > li, #articleContent article > .kbp-card-list > li { margin-bottom: 4px !important; } #articleContent > .kbp-card-list > li:last-child, #articleContent article > .kbp-card-list > li:last-child { margin-bottom: 0 !important; } #articleContent > .kbp-card-list > li > p, #articleContent article > .kbp-card-list > li > p { margin: 0 !important; font: var(--cds-type-body) !important; line-height: 28px !important; color: var(--neutral-text, #1e2022) !important; } /* Heading â†’ correlated content (tight â€” 8px) */ #articleContent > h2.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout, .kbp-two-col-grid), #articleContent > h2.kbp-card-header + h3.kbp-card-header, #articleContent article > h2.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout, .kbp-two-col-grid), #articleContent article > h2.kbp-card-header + h3.kbp-card-header, #articleContent d360-article article > h2.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout, .kbp-two-col-grid), #articleContent d360-article article > h2.kbp-card-header + h3.kbp-card-header { margin-top: var(--kbp-card-header-gap) !important; } #articleContent > h3.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent > h4.kbp-card-intro + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent article > h3.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent article > h4.kbp-card-intro + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent d360-article article > h3.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent d360-article article > h4.kbp-card-intro + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) { margin-top: var(--kbp-card-content-gap) !important; } /* Body â†” body, body â†” list (8px) */ #articleContent > p.kbp-card-body + p.kbp-card-body, #articleContent > p.kbp-card-body + :is(ul, ol).kbp-card-list, #articleContent > :is(ul, ol).kbp-card-list + p.kbp-card-body, #articleContent article > p.kbp-card-body + p.kbp-card-body, #articleContent article > p.kbp-card-body + :is(ul, ol).kbp-card-list, #articleContent article > :is(ul, ol).kbp-card-list + p.kbp-card-body { margin-top: var(--kbp-card-content-gap) !important; } /* Topic heading â†’ subsection label (H3 â†’ H4, 20px) */ #articleContent > h3.kbp-card-header + h4.kbp-card-intro, #articleContent article > h3.kbp-card-header + h4.kbp-card-intro { margin-top: var(--kbp-body-to-heading-gap) !important; } /* Body/list/callout â†’ next topic or subsection heading (20px â€” section break) */ #articleContent > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout) + :is(h3.kbp-card-header, h4.kbp-card-intro), #articleContent article > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout) + :is(h3.kbp-card-header, h4.kbp-card-intro), #articleContent d360-article article > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list, .kbp-callout) + :is(h3.kbp-card-header, h4.kbp-card-intro) { margin-top: var(--kbp-body-to-heading-gap) !important; } /* Body/list → major H2 (fallback when no divider) — 57px */ #articleContent > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) + h2.kbp-card-header, #articleContent article > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) + h2.kbp-card-header, #articleContent d360-article article > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) + h2.kbp-card-header { margin-top: var(--kbp-flat-major-section-gap) !important; } /* Callout → major H2 (tip before task band) — 20px, same as callout → H3/H4 */ #articleContent > .kbp-callout + h2.kbp-card-header, #articleContent article > .kbp-callout + h2.kbp-card-header, #articleContent d360-article article > .kbp-callout + h2.kbp-card-header { margin-top: var(--kbp-body-to-heading-gap) !important; } /* D360 platform margin-bottom on headings â€” breaks headingâ†’body grouping */ #articleContent > :is(h2, h3).kbp-card-header, #articleContent > h4.kbp-card-intro, #articleContent > :is(h2, h3).kbp-card-header.hyperlink-wrapper-container, #articleContent article > :is(h2, h3).kbp-card-header, #articleContent article > h4.kbp-card-intro, #articleContent article > :is(h2, h3).kbp-card-header.hyperlink-wrapper-container { margin-bottom: 0 !important; } /* Major-section divider — hero (image or text-only) hands spacing to the divider */ #articleContent .kbp-hero-section-container:has(+ hr.kbp-section-divider) { margin-bottom: 0; } /* * Plum gradient subsection divider — flat articles (Template 1) and manual paste. * * Paint-stable hairline: a 1px-tall background fill can vanish when the element's * layout Y lands on a fractional device pixel (common at mid window widths / DPR). * Opening DevTools forces a reflow and the line reappears. Prefer border-image * (device-pixel snapped) over a 1px background box; solid border-top is the fallback. */ #articleContent hr.kbp-section-divider { display: block; width: 100%; max-width: 100%; margin: var(--kbp-section-divider-gap-before) 0 0; height: 0; padding: 0; border: none; border-top: 1px solid var(--brand-border, #c9a6b8); border-image-source: var(--kbp-section-divider-gradient); border-image-slice: 1; background: none; clear: both; } #articleContent hr.kbp-section-divider + h2.kbp-card-header, #articleContent article > hr.kbp-section-divider + h2.kbp-card-header { margin-top: var(--kbp-section-divider-gap-after) !important; } /* FAQ band: plum rule with even air; total matches --kbp-flat-major-section-gap (57px). */ #articleContent hr.kbp-section-divider.kbp-section-divider--before-faq { margin-top: calc((var(--kbp-flat-major-section-gap) - 1px) / 2) !important; } #articleContent hr.kbp-section-divider.kbp-section-divider--before-faq + h2.kbp-card-header, #articleContent article > hr.kbp-section-divider.kbp-section-divider--before-faq + h2.kbp-card-header { margin-top: calc((var(--kbp-flat-major-section-gap) - 1px) / 2) !important; } /* * PAT-ARTICLE-FOOTER-CC â€” Need more help? * Nested under .kbp-article-footer-cc (not #articleContent > children). * - H2 â†’ body: 4px margin-bottom on the H2 (match theme-section header â†’ intro) * - Platform link â†’ watermark logo: 32px (pattern-locked) */ #articleContent .kbp-article-footer-cc > :is(h2, h3).kbp-card-header { margin-top: 0 !important; margin-bottom: 4px !important; } #articleContent .kbp-article-footer-cc > :is(h2, h3).kbp-card-header + p.kbp-card-body { margin-top: 0 !important; margin-bottom: 0 !important; } #articleContent .kbp-article-footer-cc > .kbp-ecoa-platform-link-row + p.kbp-card-body, #articleContent .kbp-article-footer-cc > p.kbp-card-body:has(img) { margin-top: 32px !important; margin-bottom: 0 !important; } /* * PAT-ARTICLE-FOOTER-CC entrance â€” last content â†’ plum divider. * Theme sections already include --kbp-section-gap (16px) padding-bottom before the * same divider (Related guides on hubs). Flat content (cards, callouts, lists) does * not, so the footer divider uses an elevated gap so the visual match is consistent. * Theme-section override keeps standard gap-before so total stays ~56px (no double count). */ #articleContent hr.kbp-section-divider:has(+ .kbp-article-footer-cc) { margin-top: calc(var(--kbp-section-divider-gap-before) + var(--kbp-section-gap)) !important; } #articleContent .kbp-theme-section + hr.kbp-section-divider:has(+ .kbp-article-footer-cc) { margin-top: var(--kbp-section-divider-gap-before) !important; } #articleContent .kbp-hero-section-container + hr.kbp-section-divider, #articleContent article > .kbp-hero-section-container + hr.kbp-section-divider { margin-top: var(--kbp-section-divider-gap-before); } /* Flat-article callouts (Template 1 â€” outside card shells) */ #articleContent > .kbp-callout + .kbp-callout, #articleContent article > .kbp-callout + .kbp-callout { margin-top: var(--kbp-card-content-gap) !important; } #articleContent > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) + .kbp-callout, #articleContent article > :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) + .kbp-callout { margin-top: var(--kbp-card-nested-block-gap) !important; } #articleContent > .kbp-callout + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent article > .kbp-callout + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) { margin-top: var(--kbp-card-nested-block-gap) !important; } /* Flat two-/three-col grids (e.g. column glossary) — 16px before and after, match callout air */ #articleContent > p.kbp-card-body + :is(.kbp-two-col-grid, .kbp-three-col-grid), #articleContent article > p.kbp-card-body + :is(.kbp-two-col-grid, .kbp-three-col-grid), #articleContent d360-article article > p.kbp-card-body + :is(.kbp-two-col-grid, .kbp-three-col-grid) { margin-top: var(--kbp-card-nested-block-gap) !important; } #articleContent > :is(.kbp-two-col-grid, .kbp-three-col-grid) + p.kbp-card-body, #articleContent article > :is(.kbp-two-col-grid, .kbp-three-col-grid) + p.kbp-card-body, #articleContent d360-article article > :is(.kbp-two-col-grid, .kbp-three-col-grid) + p.kbp-card-body { margin-top: var(--kbp-card-nested-block-gap) !important; } /* Paired priority callouts in a two-col grid (equal height; 16px before following list) */ #articleContent .kbp-two-col-grid > .kbp-callout, #articleContent article .kbp-two-col-grid > .kbp-callout { margin-top: 0 !important; height: 100%; align-self: stretch; min-width: 0; } /* Gap on the grid — flat lists use margin: 0 !important, so list margin-top alone can lose */ #articleContent .kbp-two-col-grid:has(> .kbp-callout), #articleContent article .kbp-two-col-grid:has(> .kbp-callout) { margin-bottom: var(--kbp-card-nested-block-gap, 16px) !important; } /* Section dividers on long video index pages â€” neutral border, not plum gradient */ #articleContent hr.hr-divider1 { margin: var(--kbp-section-gap) 0; border: none; border-top: 1px solid var(--neutral-border-1, #dadcde); } /* ============================================================================ CONTENT THEME HUB (PAT-CONTENT-THEME-HUB) ============================================================================ hubVersion 3: intro + jump pills | hero media | product hub link | topic cards Shell: .kbp-landing-container (max-width 1200px, centered) Config: data/content-hubs/{slug}.json ============================================================================ */ /* Use landing-container centering â€” do not stretch to full article column width */ .kbp-content-theme-hub.kbp-landing-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 48px 24px 40px; box-sizing: border-box; container-type: inline-size; container-name: kbp-hub; } @media (max-width: 768px) { .kbp-content-theme-hub.kbp-landing-container { padding: 32px 16px; } } /* --- v3: intro row (copy left, scope-style jump pills right) --- */ .kbp-hub-intro-row { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; margin-bottom: var(--kbp-section-gap); } @media (min-width: 768px) { .kbp-hub-intro-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%); column-gap: clamp(64px, 8vw, 160px); align-items: start; } .kbp-hub-intro-row__copy { grid-column: 1; } .kbp-hub-jump-pills { grid-column: 2; } } .kbp-hub-intro-row__copy { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .kbp-hub-intro-row__marketing { margin: 0; font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); } .kbp-hub-intro-row__educational { margin: 0; font: var(--cds-type-body); color: var(--neutral-text-subtle, #697074); } .kbp-hub-jump-pills { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .kbp-hub-jump-pills__label { margin: 0 0 10px; } .kbp-hub-jump-pills__list { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 0; padding: 0; } /* D360 wraps each pill (or all pills) in
â€” unwrap so links sit on the list grid */ .kbp-hub-jump-pills__list > p { margin: 0; padding: 0; display: contents; } @media (min-width: 1024px) { .kbp-hub-jump-pills__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kbp-hub-jump-pill { display: flex; align-items: center; justify-content: center; width: 100%; padding: 6px 12px; background: transparent; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 4px; font: var(--cds-type-label-semibold); color: var(--neutral-text, #1e2022); text-align: center; text-decoration: none; box-sizing: border-box; min-height: 32px; } .kbp-hub-jump-pill:hover, .kbp-hub-jump-pill:focus-visible { background: var(--neutral-bg-1, #f6f6f7); border-color: var(--neutral-border-1, #dadcde); text-decoration: none; color: var(--neutral-text, #1e2022); } /* --- FAQ jump index (PAT-FAQ-JUMP) --- */ .kbp-branded-container.kbp-faq-jump-index { margin-top: var(--kbp-section-gap); margin-bottom: var(--kbp-section-gap); } /* D360 Sandbox â€” band may be wrapped in editor360-custom-block (breaks + sibling rules) */ #articleContent .kbp-branded-container.kbp-faq-jump-index { margin-top: var(--kbp-section-gap) !important; margin-bottom: var(--kbp-section-gap) !important; } #articleContent :is(editor360-custom-block, .editor360-custom-block):has(.kbp-faq-jump-index) { display: block !important; margin-top: var(--kbp-section-gap) !important; margin-bottom: var(--kbp-section-gap) !important; } #articleContent :is(editor360-custom-block, .editor360-custom-block):has(.kbp-faq-jump-index) > .kbp-branded-container.kbp-faq-jump-index { margin-top: 0 !important; } #articleContent .kbp-card-container:has(+ .kbp-branded-container.kbp-faq-jump-index), #articleContent .kbp-card-container:has(+ :is(editor360-custom-block, .editor360-custom-block):has(.kbp-faq-jump-index)) { margin-bottom: var(--kbp-section-gap) !important; } /* h3.kbp-faq-jump-index__heading is typed by the H3 group near the top of this file, which also supplies padding: 0. The bare class below still matches it at lower specificity, so this rule covers only the non-h3 and card-header shapes. */ .kbp-faq-jump-index__heading, h3.kbp-card-header.kbp-faq-jump-index__heading { margin: 0; font: var(--cds-type-heading-3-semibold); color: var(--neutral-text, #1e2022); } .kbp-faq-jump-index__nav { margin: 0; } .kbp-faq-jump-index__groups { display: flex; flex-direction: column; gap: 16px; } .kbp-branded-container.kbp-faq-jump-index .kbp-faq-jump-index__group-label { margin: 0 0 8px; font: var(--cds-type-body-semibold); color: var(--neutral-text, #1e2022); } .kbp-faq-jump-index__list { display: grid; gap: 8px; grid-template-columns: 1fr; margin: 0; padding: 0; } .kbp-faq-jump-index__list > p { margin: 0; } @media (min-width: 768px) { .kbp-faq-jump-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .kbp-faq-jump-index__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .kbp-faq-jump-index__link, #articleContent a.kbp-faq-jump-index__link, #articleContent a.kbp-faq-jump-index__link:visited { display: flex; align-items: center; justify-content: center; width: 100%; padding: 6px 12px; background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 4px; font: var(--cds-type-label-semibold); color: var(--neutral-text, #1e2022); text-align: center; text-decoration: none; box-sizing: border-box; min-height: 32px; } .kbp-faq-jump-index__link:hover, .kbp-faq-jump-index__link:focus-visible, #articleContent a.kbp-faq-jump-index__link:hover, #articleContent a.kbp-faq-jump-index__link:focus-visible { background: var(--neutral-bg-1, #f6f6f7); border-color: var(--neutral-border-1, #dadcde); text-decoration: none; color: var(--neutral-text, #1e2022); } .kbp-faq-section-label { display: inline-block; margin: 0; padding: 2px 8px; background: var(--brand-bg-2, #eadde4); border: 1px solid var(--brand-border, #c9a6b8); border-radius: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--neutral-text, #1e2022); white-space: nowrap; } .kbp-faq-section-label > * { margin: 0; padding: 0; font: inherit; color: inherit; } .kbp-faq-card-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .kbp-faq-card-header-row > .kbp-card-header { flex: 1; min-width: 0; } .kbp-faq-card-header-row > .kbp-faq-section-label { flex-shrink: 0; margin-top: 4px; } .kbp-faq-card-grid { margin-bottom: var(--kbp-section-gap); } #articleContent .kbp-faq-card-grid + .kbp-card-container, #articleContent .kbp-card-container + .kbp-faq-card-grid, #articleContent .kbp-faq-card-grid + .kbp-faq-card-grid { margin-top: var(--kbp-section-gap); } .kbp-faq-card-grid .kbp-faq-card-header-row { flex-wrap: wrap; } .kbp-faq-card-grid .kbp-faq-card-header-row > .kbp-faq-section-label { margin-left: auto; } #articleContent .kbp-faq-card-header-row .kbp-card-header[id], #articleContent .kbp-card-container > h3.kbp-card-header[id] { scroll-margin-top: 80px; } /* --- full-width hub hero media --- */ .kbp-hub-hero-media { width: 100%; margin-bottom: 12px; border-radius: 8px; overflow: hidden; } .kbp-hub-hero-media.kbp-landing-product-media { aspect-ratio: 1200 / 280; max-height: none; } .kbp-hub-hero-media p { margin: 0 !important; padding: 0 !important; height: 100%; } .kbp-hub-hero-media img { display: block; width: 100% !important; height: auto !important; max-height: none; object-fit: contain; } .kbp-hub-hero-media__video-slot { aspect-ratio: 16 / 9; background: var(--neutral-bg2, #f1f3f5); width: 100%; } /* --- spotlight task cards below hub divider (PAT-HUB-SPOTLIGHT-TASKS) --- */ .kbp-hub-spotlight-section { margin-top: 0; padding-top: 28px; border-top: 1px solid var(--neutral-border-1, #dadcde); margin-bottom: var(--kbp-section-gap); } .kbp-hub-spotlight-section__label { margin: 0 0 14px; } .kbp-hub-spotlight-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0; min-width: 0; align-items: flex-start; } /* Article path grids: --two-col turns the hub carousel into a 2-column grid. Stretch cards within each row so uneven copy/links do not leave a ragged hole. */ .kbp-hub-spotlight-cards--two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; align-items: stretch; padding: 0; } .kbp-hub-spotlight-cards--two-col > .kbp-hub-spotlight-card { flex: none; width: 100%; max-width: none; min-width: 0; height: 100%; scroll-snap-align: unset; } .kbp-hub-spotlight-section > .kbp-hub-spotlight-cards + .kbp-hub-spotlight-cards { margin-top: 14px; } @media (max-width: 699px) { .kbp-hub-spotlight-cards--two-col { grid-template-columns: 1fr; } } .kbp-hub-spotlight-card { position: relative; flex: 0 0 min(72cqw, 280px); scroll-snap-align: start; aspect-ratio: 3 / 4; min-height: 320px; border-radius: 18px; overflow: hidden; background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #dadcde); box-shadow: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .kbp-hub-spotlight-card--has-scenarios { aspect-ratio: auto; height: auto; min-height: 360px; overflow: visible; align-self: flex-start; cursor: default; } .kbp-hub-spotlight-card--has-scenarios:hover, .kbp-hub-spotlight-card--has-scenarios:focus-within { transform: none; box-shadow: none; border-color: var(--neutral-border-1, #dadcde); } /* Release Notes hub — non-card “browse all” tile in the spotlight row */ .kbp-hub-spotlight-more { flex: 0 0 min(72cqw, 240px); scroll-snap-align: start; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 280px; padding: 24px 20px; box-sizing: border-box; border-radius: 18px; border: 1px dashed var(--brand-border, #c9a6b8); background: var(--brand-bg-subtle, #faf6f8); } .kbp-hub-spotlight-more__eyebrow { margin: 0; font: var(--cds-type-body-xs, 12px / 16px Inter, system-ui, sans-serif); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand, #7d2855); } .kbp-hub-spotlight-more__title { margin: 0; font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); } .kbp-hub-spotlight-more__body { margin: 0; font: var(--cds-type-body-s, 14px / 20px Inter, system-ui, sans-serif); color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-more__action { margin: 12px 0 0; } .kbp-hub-spotlight-more__link { color: var(--informative-text, #007bd9); font-weight: 600; text-decoration: none; } .kbp-hub-spotlight-more__link:hover, .kbp-hub-spotlight-more__link:focus-visible { text-decoration: underline; } .kbp-hub-spotlight-more__link-icon { display: inline-block; margin-left: 6px; text-decoration: none; } html[data-bs-theme="dark"] .kbp-hub-spotlight-more, [data-bs-theme="dark"] .kbp-hub-spotlight-more { background: rgba(255, 170, 200, 0.08); border-color: var(--brand-border, #c9a6b8); } .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__content { min-height: 0; height: auto; padding: 20px 20px 24px; z-index: 5; } /* Spotlight intro body → cards: 24px (not the flat 8px body↔body gap). */ #articleContent .kbp-hub-spotlight-section > p.kbp-card-body + .kbp-hub-spotlight-cards, #articleContent p.kbp-card-body + .kbp-hub-spotlight-cards { margin-top: 24px !important; } #articleContent .kbp-hub-spotlight-section > h2.kbp-card-header + p.kbp-card-body, #articleContent .kbp-hub-spotlight-section > h2.kbp-card-header.hyperlink-wrapper-container + p.kbp-card-body { margin-top: var(--kbp-card-header-gap, 8px) !important; margin-bottom: 0 !important; } /* Article pages use .kbp-hub-spotlight-cards (often --two-col), not .kbp-two-col-grid — lock has-scenarios to content height so portrait 3/4 + overflow:hidden cannot crop links. */ #articleContent .kbp-hub-spotlight-cards { align-items: flex-start; } #articleContent .kbp-hub-spotlight-cards--two-col { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; overflow-x: visible !important; overflow-y: visible !important; scroll-snap-type: none !important; align-items: stretch !important; padding: 0 !important; } #articleContent .kbp-hub-spotlight-cards--two-col > .kbp-hub-spotlight-card { flex: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 100% !important; scroll-snap-align: unset !important; } #articleContent .kbp-hub-spotlight-section > .kbp-hub-spotlight-cards + .kbp-hub-spotlight-cards { margin-top: 14px !important; } @media (max-width: 699px) { #articleContent .kbp-hub-spotlight-cards--two-col { grid-template-columns: 1fr !important; } } #articleContent .kbp-hub-spotlight-cards .kbp-hub-spotlight-card--has-scenarios { aspect-ratio: auto !important; height: auto !important; min-height: 360px !important; overflow: visible !important; align-self: flex-start; } /* In --two-col grids, stretch peer cards to the tallest in the row */ #articleContent .kbp-hub-spotlight-cards--two-col > .kbp-hub-spotlight-card.kbp-hub-spotlight-card--has-scenarios { align-self: stretch !important; height: 100% !important; } #articleContent .kbp-hub-spotlight-cards .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__content { min-height: 0 !important; height: auto !important; padding: 20px 20px 24px !important; } /* Must follow the height:auto content rule above so row peers can stretch */ #articleContent .kbp-hub-spotlight-cards--two-col > .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__content { height: 100% !important; min-height: 100% !important; box-sizing: border-box !important; } .kbp-hub-spotlight-card:hover, .kbp-hub-spotlight-card:focus-within { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 32, 34, 0.08); } /* Pale CDS tone fills â€” brand-bg, informative-bg-1, primary-bg-1 */ .kbp-hub-spotlight-card--tone-brand { background: linear-gradient( 180deg, var(--brand-bg-subtle, #faf6f8) 0%, var(--brand-bg-1, #f5eef1) 55%, var(--brand-bg-2, #eadde4) 100% ); border-color: var(--brand-border, #c9a6b8); } .kbp-hub-spotlight-card--tone-brand:hover, .kbp-hub-spotlight-card--tone-brand:focus-within { border-color: var(--brand, #7d2855); box-shadow: 0 4px 14px rgba(125, 40, 85, 0.1); } .kbp-hub-spotlight-card--tone-informative { background: linear-gradient( 180deg, var(--neutral-bg0, #ffffff) 0%, var(--informative-bg-1, #e5f4ff) 100% ); border-color: var(--informative-border, #7ac6ff); } .kbp-hub-spotlight-card--tone-informative:hover, .kbp-hub-spotlight-card--tone-informative:focus-within { border-color: var(--informative, #007bd9); box-shadow: 0 4px 14px rgba(0, 123, 217, 0.1); } .kbp-hub-spotlight-card--tone-primary { background: linear-gradient( 180deg, var(--neutral-bg0, #ffffff) 0%, var(--primary-bg-1, #e8f6f4) 100% ); border-color: var(--primary-border, #9fd4cc); } .kbp-hub-spotlight-card--tone-primary:hover, .kbp-hub-spotlight-card--tone-primary:focus-within { border-color: var(--primary, #128a7c); box-shadow: 0 4px 14px rgba(18, 138, 124, 0.1); } .kbp-hub-spotlight-card--tone-neutral { background: linear-gradient( 180deg, var(--neutral-bg0, #ffffff) 0%, var(--neutral-bg-1, #f6f6f7) 100% ); border-color: var(--neutral-border-1, #dadcde); } .kbp-hub-spotlight-card--tone-neutral:hover, .kbp-hub-spotlight-card--tone-neutral:focus-within { border-color: var(--neutral-text-subtle, #697074); box-shadow: 0 4px 14px rgba(30, 32, 34, 0.08); } .kbp-hub-spotlight-card--tone-danger { background: linear-gradient( 180deg, var(--neutral-bg0, #ffffff) 0%, var(--danger-bg-1, #fceded) 100% ); border-color: var(--danger-border, #f1a0a2); } .kbp-hub-spotlight-card--tone-danger:hover, .kbp-hub-spotlight-card--tone-danger:focus-within { border-color: var(--danger, #c33d41); box-shadow: 0 4px 14px rgba(195, 61, 65, 0.12); } .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__title { color: var(--danger, #c33d41); } .kbp-hub-spotlight-card--tone-plain { background: var(--neutral-bg0, #ffffff); border-color: var(--neutral-border-1, #dadcde); } .kbp-hub-spotlight-card--tone-plain:hover, .kbp-hub-spotlight-card--tone-plain:focus-within { border-color: var(--neutral-border-2, #c4c7ca); box-shadow: 0 4px 14px rgba(30, 32, 34, 0.06); } /* --- guidance scroll cards in theme sections (PAT-HUB-GUIDANCE-SCROLL) --- */ .kbp-hub-guidance-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0; min-width: 0; } .kbp-hub-guidance-card.kbp-hub-spotlight-card { flex: 0 0 min(72cqw, 260px); scroll-snap-align: start; aspect-ratio: auto; min-height: 0; } .kbp-hub-guidance-card .kbp-hub-spotlight-card__content { min-height: 0; padding: 20px; } .kbp-hub-guidance-card .kbp-hub-spotlight-card__title { max-width: none; } .kbp-hub-guidance-card .kbp-hub-spotlight-card__copy-line { font: var(--cds-type-body-small); line-height: 1.45; color: var(--neutral-text-subtle, #697074); } .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain .kbp-hub-spotlight-card__action { background: var(--informative, #007bd9); border-color: var(--informative, #007bd9); color: var(--neutral-bg0, #ffffff); } .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain:hover .kbp-hub-spotlight-card__action, .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain:focus-within .kbp-hub-spotlight-card__action { border-color: var(--informative, #007bd9); } .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain .kbp-hub-spotlight-card__action-icon { color: var(--neutral-bg0, #ffffff); } .kbp-hub-guidance-cards--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; overflow-x: visible; align-items: stretch; } .kbp-hub-guidance-cards--pair > .kbp-hub-guidance-card.kbp-hub-spotlight-card { width: 100%; height: 100%; min-height: 0; max-width: none; aspect-ratio: auto; flex: unset; display: flex; flex-direction: column; } .kbp-hub-guidance-cards--pair .kbp-hub-guidance-card .kbp-hub-spotlight-card__content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; min-height: 0; height: 100%; box-sizing: border-box; padding: 20px; } .kbp-hub-guidance-cards--pair .kbp-hub-guidance-card .kbp-hub-spotlight-card__body { flex: 1 1 auto; } .kbp-hub-guidance-card__bullets { margin: 0 !important; padding: 0 !important; list-style: none; } .kbp-hub-guidance-card__bullets > li { margin: 0 0 4px !important; padding: 0 0 0 1em !important; position: relative; color: var(--neutral-text-subtle, #697074); } .kbp-hub-guidance-card__bullets > li::before { content: "\2022"; position: absolute; left: 0; color: var(--neutral-text-subtle, #697074); font: var(--cds-type-body-small); font-weight: 400; } .kbp-hub-guidance-card__bullets > li::marker { content: none; } .kbp-hub-explain-card__topic-bullets { margin: 0; padding: 0; list-style: none; } .kbp-hub-explain-card__topic-bullets > li { position: relative; padding-left: 1em; color: var(--neutral-text-subtle, #697074); } .kbp-hub-explain-card__topic-bullets > li::before { content: "\2022"; position: absolute; left: 0; color: var(--neutral-text-subtle, #697074); font: var(--cds-type-body-small); font-weight: 400; } .kbp-hub-explain-card__topic-bullets > li::marker { content: none; } .kbp-hub-guidance-card__bullets > li:last-child { margin-bottom: 0 !important; } .kbp-hub-guidance-card__bullets > li > p { margin: 0 !important; font: var(--cds-type-body-small); line-height: 1.45; color: var(--neutral-text-subtle, #697074); } .kbp-hub-guidance-card__platform-link { position: relative; z-index: 5; margin-top: auto; padding-top: 12px; } .kbp-hub-guidance-card--static:hover, .kbp-hub-guidance-card--static:focus-within { transform: none; box-shadow: none; border-color: var(--neutral-border-1, #dadcde); } @media (max-width: 900px) { .kbp-hub-guidance-cards--pair { grid-template-columns: 1fr; } } .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__copy-line { color: var(--neutral-text, #1e2022); } .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__title { color: var(--informative, #007bd9); } .kbp-hub-spotlight-card__media { position: absolute; inset: 0; z-index: 0; } .kbp-hub-spotlight-card__media p { margin: 0 !important; padding: 0 !important; height: 100%; } .kbp-hub-spotlight-card__media img { display: block; width: 100% !important; height: 100% !important; max-height: none; object-fit: cover; } .kbp-hub-spotlight-card__overlay { display: none; pointer-events: none; } .kbp-hub-spotlight-card--has-image .kbp-hub-spotlight-card__overlay { display: block; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.55) 52%, rgba(255, 255, 255, 0.94) 100% ); } .kbp-hub-spotlight-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; padding: 20px 20px 56px; min-height: 100%; box-sizing: border-box; } /* Pair guidance cards: equal-height grid (after generic spotlight sizing) */ .kbp-hub-guidance-cards--pair > .kbp-hub-spotlight-card.kbp-hub-guidance-card { aspect-ratio: auto; min-height: 0; height: 100%; } /* * Path cards in a 2-col / landing grid (Virgil/Pathway hub, etc.). * Default spotlight tiles are portrait (3:4, min-height 320) for horizontal scroll * carousels â€” full-width grid columns were blowing those up to ~500px tall. * Size to copy, keep equal row height via grid stretch. */ #articleContent .kbp-two-col-grid > .kbp-hub-spotlight-card, #articleContent .kbp-landing-product-grid > .kbp-hub-spotlight-card { aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; flex: none !important; width: 100% !important; max-width: none !important; } #articleContent .kbp-two-col-grid > .kbp-hub-spotlight-card .kbp-hub-spotlight-card__content, #articleContent .kbp-landing-product-grid > .kbp-hub-spotlight-card .kbp-hub-spotlight-card__content { min-height: 0 !important; height: auto !important; /* Drop carousel bottom inset (56px for floating action) â€” size to copy */ padding: 20px !important; } .kbp-hub-spotlight-card__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__body { gap: 4px; } .kbp-hub-spotlight-card__intro { display: flex; flex-direction: column; gap: 8px; } .kbp-hub-spotlight-card__content p { margin: 0 !important; padding: 0 !important; } .kbp-hub-spotlight-card__eyebrow { font: var(--cds-type-body-small); font-weight: 600; color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow { color: var(--brand, #7d2855); } .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow { color: var(--informative, #007bd9); } .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow { color: var(--primary, #128a7c); } .kbp-hub-spotlight-card__title { font: var(--cds-type-heading-3-semibold); color: var(--neutral-text, #1e2022); max-width: 18ch; white-space: normal; overflow-wrap: break-word; word-break: normal; } /* Article path cards + --has-scenarios: never clip mid-word in ~280px tiles. Keep 18ch on hub carousel single-destination cards for scannability. */ #articleContent .kbp-hub-spotlight-cards .kbp-hub-spotlight-card__title, .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__title { max-width: 100% !important; } .kbp-hub-spotlight-card__steps { margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: kbp-hub-step; } .kbp-hub-spotlight-card__steps > li { margin: 0 0 6px !important; padding: 0 0 0 1.35em !important; position: relative; counter-increment: kbp-hub-step; color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-card__steps > li::before { content: counter(kbp-hub-step) "."; position: absolute; left: 0; color: var(--neutral-text-subtle, #697074); font: var(--cds-type-body-small); font-weight: 400; font-variant-numeric: tabular-nums; } .kbp-hub-spotlight-card__steps > li::marker { content: none; } .kbp-hub-spotlight-card__steps > li:last-child { margin-bottom: 0 !important; } .kbp-hub-spotlight-card__steps > li > p { font: var(--cds-type-body-small); line-height: 1.45; color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-card__steps strong { font-weight: 600; color: var(--neutral-text, #1e2022); } .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__steps strong { color: var(--brand, #7d2855); } .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__steps strong { color: var(--informative, #007bd9); } .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__steps strong { color: var(--primary, #128a7c); } .kbp-hub-spotlight-card--tone-neutral .kbp-hub-spotlight-card__eyebrow { color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-card__copy { display: flex; flex-direction: column; gap: 8px; } .kbp-hub-spotlight-card__copy-line { font: var(--cds-type-body-small); line-height: 1.45; color: var(--neutral-text-subtle, #697074); } .kbp-hub-spotlight-card__copy-line strong { font-weight: 600; color: var(--neutral-text, #1e2022); } .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__copy-line strong { color: var(--brand, #7d2855); } .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__copy-line strong { color: var(--informative, #007bd9); } .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__copy-line strong { color: var(--primary, #128a7c); } .kbp-hub-spotlight-card__scenario-links { margin: 0; padding: 0; list-style: none; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 6px; } .kbp-hub-spotlight-card__scenario-links > li { margin: 0; padding: 0; } .kbp-hub-spotlight-card__scenario-link, #articleContent a.kbp-hub-spotlight-card__scenario-link { display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 5; font: var(--cds-type-body-small); font-weight: 600; line-height: 1.35; color: var(--informative-text, #007bd9); text-decoration: none; } #articleContent a.kbp-hub-spotlight-card__scenario-link:visited { display: inline-flex; align-items: center; gap: 4px; position: relative; z-index: 5; font: var(--cds-type-body-small); font-weight: 600; line-height: 1.35; color: var(--site-link-visited-color, #5928ed); text-decoration: none; } .kbp-hub-spotlight-card__scenario-link-text { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 2px; } .kbp-hub-spotlight-card__scenario-link-icon { font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; } .kbp-hub-spotlight-card__scenario-link:hover, .kbp-hub-spotlight-card__scenario-link:focus-visible, #articleContent a.kbp-hub-spotlight-card__scenario-link:hover, #articleContent a.kbp-hub-spotlight-card__scenario-link:focus-visible { color: var(--informative-text, #007bd9); } .kbp-hub-spotlight-card__action { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #dadcde); color: var(--informative, #007bd9); box-shadow: none; transition: transform 0.15s ease, border-color 0.15s ease; pointer-events: none; } .kbp-hub-spotlight-card:hover .kbp-hub-spotlight-card__action, .kbp-hub-spotlight-card:focus-within .kbp-hub-spotlight-card__action { transform: scale(1.04); border-color: var(--informative-border, #7ac6ff); } .kbp-hub-spotlight-card__action-icon { font-size: 15px; font-weight: 600; line-height: 1; } .kbp-hub-spotlight-card__link-row { position: static; } .kbp-hub-spotlight-card__link, #articleContent a.kbp-hub-spotlight-card__link, #articleContent a.kbp-hub-spotlight-card__link:hover, #articleContent a.kbp-hub-spotlight-card__link:focus-visible { position: absolute; inset: 0; z-index: 4; display: block; text-decoration: none !important; border-radius: 18px; } .kbp-hub-spotlight-card__link-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- product hub cross-link under hero --- */ .kbp-hub-product-link { margin-bottom: var(--kbp-section-gap); text-align: right; } .kbp-hub-product-link .kbp-ecoa-platform-link-row { justify-content: flex-end; } .kbp-hub-product-link--intro { margin-top: 4px; margin-bottom: 0; text-align: left; } .kbp-hub-product-link--intro .kbp-ecoa-platform-link-row { justify-content: flex-start; } @media (max-width: 768px) { .kbp-hub-product-link { text-align: left; } .kbp-hub-product-link .kbp-ecoa-platform-link-row { justify-content: flex-start; } } .kbp-content-theme-hub > .kbp-callout { margin-bottom: var(--kbp-section-gap); } /* --- theme sections: layout variants (no horizontal scroll) --- */ .kbp-content-theme-hub > .kbp-theme-section { margin-top: 0; padding-top: 28px; padding-bottom: var(--kbp-section-gap); border-top: 1px solid var(--neutral-border-1, #dadcde); scroll-margin-top: 24px; } .kbp-theme-section__header { margin-bottom: 12px; } .kbp-content-theme-hub .kbp-theme-section > .kbp-section-heading, .kbp-theme-section__header .kbp-section-heading { margin: 0 0 8px; } .kbp-hub-section-heading__link { display: inline; color: inherit; text-decoration: none; } .kbp-hub-section-heading__text { border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } .kbp-hub-section-heading__link:hover .kbp-hub-section-heading__text, .kbp-hub-section-heading__link:focus-visible .kbp-hub-section-heading__text { color: var(--informative-text, #007bd9); border-bottom-color: currentColor; } .kbp-hub-section-heading__icon { display: inline; margin-left: 6px; font-size: 0.85em; line-height: 1; white-space: nowrap; color: inherit; border-bottom: none; text-decoration: none; transition: color 0.15s ease, transform 0.15s ease; } .kbp-hub-section-heading__link:hover .kbp-hub-section-heading__icon, .kbp-hub-section-heading__link:focus-visible .kbp-hub-section-heading__icon { color: var(--informative-text, #007bd9); transform: translate(1px, -1px); } .kbp-theme-section__intro { margin: 0; font: var(--cds-type-body); color: var(--neutral-text-subtle, #697074); max-width: 52ch; } /* --- topic cards in theme hub (reuse PAT-LANDING filled card) --- */ .kbp-content-theme-hub .kbp-topic-card--filled { box-shadow: none; height: 100%; } .kbp-content-theme-hub .kbp-topic-card--filled .kbp-topic-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 148px; } .kbp-content-theme-hub .kbp-topic-card__body > .kbp-card-header { margin: 0; } .kbp-content-theme-hub .kbp-topic-card__body > .kbp-landing-product-tagline { margin: 0; flex: 1; } .kbp-content-theme-hub .kbp-topic-card__body > .kbp-ecoa-platform-link-row { margin-top: auto; padding-top: 4px; } /* --- secondary link band (subtle brand chrome) --- */ .kbp-hub-section__secondary-label { margin: 0 0 8px; } .kbp-hub-secondary-list { margin: 0; padding: 0; } .kbp-hub-secondary-item { margin: 0 0 6px; padding: 0; font: var(--cds-type-body-s); line-height: 1.45; } .kbp-hub-secondary-item:last-child { margin-bottom: 0; } .kbp-hub-secondary-link { color: var(--informative-text, #007bd9); text-decoration: none; font-weight: 600; } .kbp-hub-secondary-link:hover, .kbp-hub-secondary-link:focus-visible { text-decoration: underline; } .kbp-hub-secondary-link__desc { color: var(--neutral-text-subtle, #697074); font-weight: 400; } /* Release Notes hub — Impact / BU glance tags (PAT-RELEASE-01) */ .kbp-rn-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; vertical-align: middle; } .kbp-rn-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--brand-border, #c9a6b8); border-radius: 999px; background: var(--neutral-bg0, #ffffff); color: var(--brand, #7d2855); font: var(--cds-type-body-xs, 12px / 16px Inter, system-ui, sans-serif); font-weight: 600; white-space: nowrap; } html[data-bs-theme="dark"] .kbp-rn-tag, [data-bs-theme="dark"] .kbp-rn-tag { background: rgba(255, 170, 200, 0.12); border-color: var(--brand-border, #c9a6b8); color: var(--brand, #ffaac8); } /* Release Notes hub — month stack + secondary item rhythm (PAT-FLAT) */ .kbp-content-theme-hub .kbp-rn-month { margin-top: 32px; padding: 24px 20px; border-radius: 8px; background: transparent; box-sizing: border-box; } .kbp-content-theme-hub .kbp-theme-section__header + .kbp-rn-month { margin-top: 24px; } /* Scroll landmarks: soft brand tint on alternating months (2nd, 4th… after year header). Year header is child 1; Dec = child 2 (white); Sep = child 3 (tint). */ .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd) { background: var(--brand-bg-subtle, #faf6f8); } html[data-bs-theme="dark"] .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd), [data-bs-theme="dark"] .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd) { background: rgba(255, 170, 200, 0.08); } .kbp-content-theme-hub .kbp-rn-month > h3.kbp-card-header { margin: 0; } .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body { margin: 0; } .kbp-content-theme-hub .kbp-rn-month > h3.kbp-card-header + p.kbp-card-body { margin-top: 8px; } .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body + .kbp-hub-secondary-list { margin-top: 16px; } .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body + h4.kbp-card-intro { margin-top: 20px; } .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro { margin: 0 0 8px; font: var(--cds-type-heading-4-semibold); color: var(--neutral-text, #1e2022); } .kbp-content-theme-hub .kbp-rn-month > .kbp-hub-secondary-list + h4.kbp-card-intro { margin-top: 24px; } .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro + .kbp-hub-secondary-list { margin-top: 0; } .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-list { margin: 0; display: flex; flex-direction: column; gap: 0; } /* Stacked note row: title → tags → desc (block children, not span soup) */ .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 28px; padding: 0 0 20px; border-bottom: 1px solid var(--neutral-border-1, #dadcde); max-width: 62ch; } .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item > p { margin: 0; } .kbp-content-theme-hub .kbp-hub-secondary-item__title { margin: 0; font: var(--cds-type-body); line-height: 1.4; } .kbp-content-theme-hub .kbp-rn-month .kbp-rn-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; } .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-link__desc { display: block; margin: 0; max-width: 62ch; font: var(--cds-type-body-s, 14px / 20px Inter, system-ui, sans-serif); color: var(--neutral-text-subtle, #697074); font-weight: 400; } .kbp-hub-secondary-list--inline { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; } .kbp-hub-secondary-list--inline .kbp-hub-secondary-item { margin: 0; } /* --- section footer (service hub CTA) â€” deprecated; use linked H2 --- */ /* --- secondary link band (subtle brand chrome) --- */ .kbp-hub-section__secondary, .kbp-hub-section__secondary--band { margin-top: 16px; padding: 14px 16px; border-radius: 8px; background: var(--brand-bg-subtle, #faf6f8); border: 1px solid var(--brand-border, #c9a6b8); } .kbp-hub-section--stack-pair .kbp-hub-section__secondary--band { margin-top: 14px; padding: 12px 16px; } /* --- layout: featured-grid (2â€“4 primary + secondary list) --- */ .kbp-hub-section--featured-grid .kbp-hub-section__primary { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .kbp-hub-section--featured-grid-2 .kbp-hub-section__primary { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4 cards → one row of four (matches card count; collapses under existing ≤899px rules) */ .kbp-hub-section--featured-grid-4 .kbp-hub-section__primary { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .kbp-hub-section--featured-grid .kbp-hub-section__primary { grid-template-columns: 1fr; } } /* --- layout: explain-grid (tiered explanatory cards â€” PAT-HUB-EXPLAIN-CARDS) --- */ .kbp-hub-explain-tiered { display: flex; flex-direction: column; gap: 16px; } .kbp-hub-section--explain-grid .kbp-hub-explain-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .kbp-hub-explain-cards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kbp-hub-explain-tiered__tertiary-label { margin: 4px 0 10px; color: var(--neutral-text-2, #5f656b); } .kbp-hub-explain-card--tier-urgent { min-height: 0; border-color: var(--primary-border, #9fd4cc); background: linear-gradient( 180deg, var(--primary-bg1, #e8f7f4) 0%, var(--neutral-bg0, #ffffff) 55% ); } .kbp-hub-explain-card--tier-urgent .kbp-hub-explain-card__title { max-width: none; font: var(--cds-type-heading-2-semibold); } .kbp-hub-explain-card--tier-urgent .kbp-hub-explain-card__lede { max-width: 52ch; margin: 0 0 8px; font: var(--cds-type-body); color: var(--neutral-text-1, #1a1d21); } .kbp-hub-explain-card--tier-highlight { min-height: 320px; } .kbp-hub-explain-card--tier-tertiary { min-height: 0; border-style: dashed; background: var(--neutral-bg1, #f5f6f7); box-shadow: none; } .kbp-hub-explain-card--tier-tertiary:hover, .kbp-hub-explain-card--tier-tertiary:focus-within { transform: none; box-shadow: none; border-color: var(--neutral-border-2, #c4c7ca); } .kbp-hub-explain-card--tier-tertiary .kbp-hub-explain-card__title { font: var(--cds-type-heading-4-semibold); max-width: none; } .kbp-hub-explain-card--tier-tertiary .kbp-hub-explain-card__topics { display: grid; gap: 12px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .kbp-hub-explain-card--tone-primary .kbp-hub-explain-card__eyebrow, .kbp-hub-explain-card--tone-primary .kbp-hub-explain-card__cta-row { color: var(--primary-text, #006a5c); } .kbp-hub-explain-card { position: relative; display: flex; flex-direction: column; min-height: 420px; border-radius: 20px; overflow: hidden; background: var(--neutral-bg0, #ffffff); border: 1px solid var(--neutral-border-1, #dadcde); box-shadow: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .kbp-hub-explain-card:hover, .kbp-hub-explain-card:focus-within { transform: translateY(-2px); border-color: var(--neutral-border-2, #c4c7ca); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08); } .kbp-hub-explain-card--tone-informative { background: linear-gradient( 180deg, var(--informative-bg1, #e8f4fd) 0%, var(--neutral-bg0, #ffffff) 42% ); } .kbp-hub-explain-card--tone-brand { background: linear-gradient( 180deg, var(--brand-bg1, #e8f0fa) 0%, var(--neutral-bg0, #ffffff) 42% ); } .kbp-hub-explain-card__content { position: relative; z-index: 2; display: flex; flex: 1; flex-direction: column; align-items: center; padding: 28px 24px 24px; text-align: center; } .kbp-hub-explain-card__eyebrow { margin: 0 0 8px; font: var(--cds-type-label-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--neutral-text-2, #5f656b); } .kbp-hub-explain-card--tone-informative .kbp-hub-explain-card__eyebrow { color: var(--informative-text, #007bd9); } .kbp-hub-explain-card--tone-brand .kbp-hub-explain-card__eyebrow { color: var(--brand-text, #003366); } .kbp-hub-explain-card__title { margin: 0 0 16px; font: var(--cds-type-heading-3-semibold); color: var(--neutral-text-1, #1a1d21); max-width: 22ch; } .kbp-hub-explain-card__lede { margin: -8px 0 16px; font: var(--cds-type-body-small); color: var(--neutral-text-2, #5f656b); max-width: 36ch; } .kbp-hub-explain-card__summary, .kbp-hub-explain-card__topics { width: 100%; text-align: left; } .kbp-hub-explain-card__summary { margin: 0 0 16px; } .kbp-hub-explain-card__summary > p { margin: 0 0 12px; font: var(--cds-type-body-small); line-height: 1.5; color: var(--neutral-text-1, #1a1d21); } .kbp-hub-explain-card__summary > p:last-child { margin-bottom: 0; } .kbp-hub-explain-card__topics { margin: 0 0 16px; padding: 0; list-style: none; } .kbp-hub-explain-card__topic { margin: 0 0 14px; padding: 0; } .kbp-hub-explain-card__topic:last-child { margin-bottom: 0; } .kbp-hub-explain-card__topic-title { margin: 0 0 6px; font: var(--cds-type-body-small-semibold); color: var(--neutral-text-1, #1a1d21); } .kbp-hub-explain-card__topic-bullets > li { margin: 0 0 4px; } .kbp-hub-explain-card__topic-bullets > li > p { margin: 0; font: var(--cds-type-body-small); line-height: 1.45; color: var(--neutral-text-2, #5f656b); } .kbp-hub-explain-card__topic-bullets strong { font-weight: 600; color: var(--neutral-text-1, #1a1d21); } .kbp-hub-explain-card__action-links { width: 100%; margin: 0 0 16px; padding: 12px 14px; list-style: none; text-align: left; border-radius: 12px; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--neutral-border-1, #dadcde); } .kbp-hub-explain-card__action-links > li { margin: 0; padding: 0; } .kbp-hub-explain-card__action-links > li + li { margin-top: 8px; } .kbp-hub-explain-card__action-link, #articleContent a.kbp-hub-explain-card__action-link, #articleContent a.kbp-hub-explain-card__action-link:visited { display: inline-flex; align-items: center; gap: 6px; position: relative; z-index: 5; font: var(--cds-type-body-small-semibold); line-height: 1.35; color: var(--informative-text, #007bd9); text-decoration: none; } .kbp-hub-explain-card__action-link-icon { font-size: 12px; font-weight: 600; line-height: 1; } .kbp-hub-explain-card__action-link:hover, .kbp-hub-explain-card__action-link:focus-visible, #articleContent a.kbp-hub-explain-card__action-link:hover, #articleContent a.kbp-hub-explain-card__action-link:focus-visible { text-decoration: underline; color: var(--informative-text, #007bd9); } .kbp-hub-explain-card__cta-row { margin: auto 0 0; padding-top: 12px; display: inline-flex; align-items: center; gap: 4px; font: var(--cds-type-body-small-semibold); color: var(--informative-text, #007bd9); } .kbp-hub-explain-card__cta-icon { font-size: 18px; line-height: 1; font-weight: 400; } .kbp-hub-explain-card__link, #articleContent a.kbp-hub-explain-card__link, #articleContent a.kbp-hub-explain-card__link:hover, #articleContent a.kbp-hub-explain-card__link:focus-visible { position: absolute; inset: 0; z-index: 4; display: block; text-decoration: none !important; border-radius: 20px; } @media (max-width: 900px) { .kbp-hub-explain-cards--pair, .kbp-hub-explain-card--tier-tertiary .kbp-hub-explain-card__topics { grid-template-columns: 1fr; } .kbp-hub-explain-card { min-height: 0; } } /* --- layout: lead-feature (1 lead + supporting + inline secondary) --- */ .kbp-hub-section--lead-feature { display: grid; gap: 14px; } .kbp-hub-section--lead-feature .kbp-hub-section__supporting { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 768px) { .kbp-hub-section--lead-feature .kbp-hub-section__supporting { grid-template-columns: 1fr; } } /* --- layout: stack-pair (2 medium + secondary band) --- */ .kbp-hub-section--stack-pair .kbp-hub-section__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 768px) { .kbp-hub-section--stack-pair .kbp-hub-section__pair { grid-template-columns: 1fr; } } /* --- layout: compact-row (3 equal medium cards) --- */ .kbp-hub-section--compact-row .kbp-hub-section__compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .kbp-hub-section--compact-row .kbp-hub-section__compact { grid-template-columns: 1fr; } } /* --- layout: product-showcase (modality cards â€” PAT-HUB-PRODUCT-SHOWCASE) --- */ .kbp-hub-section--product-showcase .kbp-hub-section__showcase { display: flex; align-items: stretch; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 0; min-width: 0; } .kbp-hub-section--product-showcase .kbp-hub-product-card { flex: 0 0 min(68cqw, 220px); align-self: stretch; height: auto; scroll-snap-align: start; border-radius: 12px; } .kbp-hub-section--product-showcase .kbp-landing-product-media { aspect-ratio: 1 / 1; flex: 0 0 auto; width: 100%; overflow: hidden; } .kbp-hub-section--product-showcase .kbp-landing-product-media > p { position: absolute; inset: 0; height: auto !important; } .kbp-hub-section--product-showcase .kbp-landing-product-media img { object-fit: contain !important; object-position: center; padding: 12px; box-sizing: border-box; } .kbp-hub-section--product-showcase .kbp-landing-product-media--inset-tight img { padding: 4px; } .kbp-hub-section--product-showcase .kbp-landing-product-body { flex: 1 1 auto; text-align: center; align-items: center; gap: 6px; padding: 16px 16px 56px; } .kbp-hub-section--product-showcase .kbp-landing-product-body > .kbp-card-header { font: var(--cds-type-heading-4-semibold); } .kbp-hub-section--product-showcase .kbp-landing-product-tagline { font: var(--cds-type-body-small); } .kbp-hub-section--product-showcase .kbp-hub-product-card .kbp-ecoa-platform-link-row { position: absolute; right: 16px; bottom: 16px; margin: 0; align-self: auto; z-index: 2; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--informative, #007bd9); text-decoration: none; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle .kbp-ecoa-platform-link-icon { font-size: 15px; font-weight: 600; line-height: 1; color: var(--neutral-bg0, #ffffff); border-bottom: none; padding-bottom: 0; margin: 0; transform: none; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle { transition: transform 0.15s ease, box-shadow 0.15s ease; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle:is(:hover, :focus-visible, :visited) { background: var(--informative, #007bd9); transform: none; } .kbp-hub-section--product-showcase .kbp-hub-product-card:hover .kbp-ecoa-platform-link--circle, .kbp-hub-section--product-showcase .kbp-hub-product-card:focus-within .kbp-ecoa-platform-link--circle { transform: scale(1.04); box-shadow: 0 2px 8px rgba(0, 123, 217, 0.18); } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle:is(:hover, :focus-visible, :visited) .kbp-ecoa-platform-link-icon { color: var(--neutral-bg0, #ffffff); transform: none; } .kbp-hub-product-card--urgent { border: 1px solid #e8a0a0; background: linear-gradient(180deg, #fff8f8 0%, #ffffff 48%); } .kbp-hub-product-card--urgent .kbp-landing-product-body > .kbp-card-header { color: #9b1c1c; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle-urgent { background: #db3035; } .kbp-hub-section--product-showcase .kbp-ecoa-platform-link--circle-urgent:is(:hover, :focus-visible, :visited) { background: #c4282d; } @container kbp-hub (min-width: 1024px) { .kbp-hub-section--product-showcase .kbp-hub-section__showcase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; overflow: visible; gap: 14px; padding: 4px 0; } .kbp-hub-section--product-showcase .kbp-hub-product-card { flex: unset; min-width: 0; height: 100%; } .kbp-hub-section--product-showcase.kbp-hub-section--showcase-6 .kbp-hub-section__showcase { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* Hub layouts follow column width (Astro preview + D360 article column), not viewport alone */ @container kbp-hub (min-width: 768px) { .kbp-hub-intro-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%); column-gap: clamp(64px, 8vw, 160px); align-items: start; } .kbp-hub-intro-row__copy { grid-column: 1; } .kbp-hub-jump-pills { grid-column: 2; } } @container kbp-hub (min-width: 1024px) { .kbp-hub-jump-pills__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container kbp-hub (max-width: 899px) { .kbp-hub-section--featured-grid .kbp-hub-section__primary, .kbp-hub-section--featured-grid-2 .kbp-hub-section__primary, .kbp-hub-section--featured-grid-3 .kbp-hub-section__primary, .kbp-hub-section--featured-grid-4 .kbp-hub-section__primary { grid-template-columns: 1fr; } .kbp-hub-section--compact-row .kbp-hub-section__compact { grid-template-columns: 1fr; } .kbp-hub-section--lead-feature .kbp-hub-section__supporting { grid-template-columns: 1fr; } .kbp-hub-section--stack-pair .kbp-hub-section__pair { grid-template-columns: 1fr; } } @container kbp-hub (max-width: 767px) { .kbp-content-theme-hub.kbp-landing-container { padding: 32px 16px; } .kbp-hub-product-link { text-align: left; } .kbp-hub-product-link .kbp-ecoa-platform-link-row { justify-content: flex-start; } } /* --- legacy grid topic cards (hubVersion 1) --- */ .kbp-topic-card--filled .kbp-topic-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 18px 16px; min-height: 168px; } .kbp-topic-card__body > .kbp-card-header { margin: 0; font: var(--cds-type-body-semibold); line-height: 1.35; } .kbp-topic-card__body > .kbp-landing-product-tagline { margin: 0; flex: 1; font: var(--cds-type-body-s); color: var(--neutral-text-subtle, #697074); line-height: 1.45; } .kbp-topic-card__body > .kbp-ecoa-platform-link-row { margin-top: auto; padding-top: 4px; } /* legacy grid cards (hubVersion 1) */ .kbp-topic-card-grid { margin-top: var(--kbp-card-content-gap); } .kbp-topic-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--neutral-border-1, #dadcde); border-radius: 8px; background: var(--neutral-bg0, #ffffff); } .kbp-topic-card--filled:not(.kbp-topic-card--rail) .kbp-topic-card__body { padding: 16px; } #articleContent .kbp-content-theme-hub.kbp-landing-container { width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; padding: 48px 24px 40px !important; box-sizing: border-box !important; container-type: inline-size !important; container-name: kbp-hub !important; } @media (max-width: 768px) { #articleContent .kbp-content-theme-hub.kbp-landing-container { padding: 32px 16px !important; } } #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-section-heading, #articleContent .kbp-content-theme-hub .kbp-theme-section__header .kbp-section-heading { margin-top: 0 !important; margin-bottom: 8px !important; font: var(--cds-type-heading-2) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub > .kbp-theme-section { padding-bottom: 40px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link, #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:visited { display: inline !important; color: inherit !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:visited .kbp-hub-section-heading__text { color: #1e2022 !important; border-bottom-color: transparent !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:hover .kbp-hub-section-heading__text, #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:focus-visible .kbp-hub-section-heading__text { color: #007bd9 !important; border-bottom-color: #007bd9 !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__icon { display: inline !important; margin-left: 6px !important; white-space: nowrap !important; border-bottom: none !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-topic-card__body > h3.kbp-card-header { font: var(--cds-type-heading-3-semibold) !important; color: #1e2022 !important; margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:hover .kbp-hub-section-heading__icon, #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:focus-visible .kbp-hub-section-heading__icon { color: #007bd9 !important; border-bottom: none !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-intro-row { display: grid !important; grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 20px !important; align-items: start !important; } #articleContent .kbp-content-theme-hub .kbp-hub-intro-row__copy { grid-column: 1 !important; min-width: 0; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills { grid-column: 1 !important; min-width: 0; } @container kbp-hub (min-width: 768px) { #articleContent .kbp-content-theme-hub .kbp-hub-intro-row { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%) !important; column-gap: clamp(64px, 8vw, 160px) !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills { grid-column: 2 !important; } } @container kbp-hub (min-width: 1024px) { #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @container kbp-hub (max-width: 767px) { #articleContent .kbp-content-theme-hub .kbp-hub-intro-row__copy, #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills { grid-column: 1 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__list { grid-template-columns: 1fr !important; } } /* D360 editor may hoist jump pills out of intro-row when pasted HTML has block breaks */ #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) { display: grid !important; grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 20px !important; align-items: start !important; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-intro-row { display: contents !important; margin-bottom: 0 !important; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-intro-row > .kbp-hub-intro-row__copy, #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-intro-row__copy { grid-column: 1 !important; min-width: 0; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-jump-pills { grid-column: 1 !important; min-width: 0; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-spotlight-section, #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-theme-section { grid-column: 1 / -1 !important; } @container kbp-hub (min-width: 768px) { #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) { grid-template-columns: minmax(0, 1fr) minmax(280px, 38%) !important; column-gap: clamp(64px, 8vw, 160px) !important; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-intro-row > .kbp-hub-intro-row__copy, #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-intro-row__copy { grid-column: 1 !important; } #articleContent .kbp-content-theme-hub.kbp-landing-container:has(> .kbp-hub-intro-row + .kbp-hub-jump-pills) > .kbp-hub-jump-pills { grid-column: 2 !important; grid-row: 1 !important; } } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__list { display: grid !important; gap: 8px !important; grid-template-columns: 1fr !important; margin: 0 !important; padding: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__list > p { margin: 0 !important; padding: 0 !important; display: contents !important; } /* * Joining / blended landing hubs â€” Template 1 flat rhythm applies inside * .kbp-landing-container (nested shell), not only as #articleContent > â€¦ children. */ #articleContent .kbp-landing-container > h2.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list), #articleContent .kbp-content-theme-hub > h2.kbp-card-header + :is(p.kbp-card-body, ul.kbp-card-list, ol.kbp-card-list) { margin-top: var(--kbp-card-header-gap, 8px) !important; } #articleContent .kbp-landing-container > p.kbp-card-body + p.kbp-card-body, #articleContent .kbp-landing-container > p.kbp-card-body + :is(ul, ol).kbp-card-list, #articleContent .kbp-landing-container > :is(ul, ol).kbp-card-list + p.kbp-card-body, #articleContent .kbp-content-theme-hub > p.kbp-card-body + p.kbp-card-body, #articleContent .kbp-content-theme-hub > p.kbp-card-body + :is(ul, ol).kbp-card-list, #articleContent .kbp-content-theme-hub > :is(ul, ol).kbp-card-list + p.kbp-card-body { margin-top: var(--kbp-card-content-gap, 8px) !important; } #articleContent .kbp-landing-container > p.kbp-card-body + .kbp-landing-product-grid, #articleContent .kbp-content-theme-hub > p.kbp-card-body + .kbp-landing-product-grid { margin-top: var(--kbp-card-nested-block-gap, 16px) !important; } #articleContent .kbp-landing-container > :is(ul, ol).kbp-card-list, #articleContent .kbp-content-theme-hub > :is(ul, ol).kbp-card-list { margin: 0 !important; padding-left: 1.25em !important; } #articleContent .kbp-landing-container > .kbp-card-list > li > p, #articleContent .kbp-content-theme-hub > .kbp-card-list > li > p { margin: 0 !important; } #articleContent .kbp-landing-container > .kbp-hero-section-container + hr.kbp-section-divider, #articleContent .kbp-landing-container > :is(ul, ol).kbp-card-list + hr.kbp-section-divider, #articleContent .kbp-landing-container > .kbp-landing-product-grid + hr.kbp-section-divider, #articleContent .kbp-landing-container > .kbp-hub-spotlight-section + hr.kbp-section-divider, #articleContent .kbp-content-theme-hub > .kbp-hero-section-container + hr.kbp-section-divider, #articleContent .kbp-content-theme-hub > :is(ul, ol).kbp-card-list + hr.kbp-section-divider, #articleContent .kbp-content-theme-hub > .kbp-landing-product-grid + hr.kbp-section-divider, #articleContent .kbp-content-theme-hub > .kbp-hub-spotlight-section + hr.kbp-section-divider { margin-top: var(--kbp-section-divider-gap-before) !important; height: 0 !important; border: none !important; border-top: 1px solid var(--brand-border, #c9a6b8) !important; border-image-source: var(--kbp-section-divider-gradient) !important; border-image-slice: 1 !important; background: none !important; } #articleContent .kbp-landing-container > hr.kbp-section-divider + h2.kbp-card-header, #articleContent .kbp-content-theme-hub > hr.kbp-section-divider + h2.kbp-card-header { margin-top: var(--kbp-section-divider-gap-after) !important; } /* Hero jump pills â€” fill the full content column (no 42em prose cap) */ #articleContent .kbp-hero-section-container:has(.kbp-hub-jump-pills) .kbp-hero-section-content { max-width: none !important; width: 100% !important; align-items: stretch !important; } #articleContent .kbp-content-theme-hub .kbp-hero-section-content .kbp-hub-jump-pills, #articleContent .kbp-hero-section-content .kbp-hub-jump-pills { width: 100% !important; min-width: 0 !important; align-self: stretch !important; } #articleContent .kbp-content-theme-hub .kbp-hero-section-content .kbp-hub-jump-pills__list, #articleContent .kbp-hero-section-content .kbp-hub-jump-pills__list { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } #articleContent .kbp-content-theme-hub .kbp-hero-section-content .kbp-hub-jump-pill, #articleContent .kbp-hero-section-content .kbp-hub-jump-pill { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } @container kbp-hub (min-width: 1024px) { #articleContent .kbp-content-theme-hub .kbp-hero-section-content .kbp-hub-jump-pills__list { grid-template-columns: 1fr !important; } } @media (min-width: 1024px) { #articleContent .kbp-content-theme-hub .kbp-hero-section-content .kbp-hub-jump-pills__list, #articleContent .kbp-hero-section-content .kbp-hub-jump-pills__list { grid-template-columns: 1fr !important; } } /* Plum dividers only â€” suppress gray hub spotlight border when preceded by section divider */ #articleContent .kbp-content-theme-hub hr.kbp-section-divider + .kbp-hub-spotlight-section, #articleContent .kbp-landing-container hr.kbp-section-divider + .kbp-hub-spotlight-section { border-top: none !important; padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 16px !important; } #articleContent .kbp-hub-spotlight-section > h2.kbp-card-header { margin-top: var(--kbp-section-divider-gap-after) !important; margin-bottom: 14px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-hub-section__showcase { display: flex !important; align-items: stretch !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding: 4px 0 !important; min-width: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-hub-product-card { flex: 0 0 min(68cqw, 220px) !important; align-self: stretch !important; height: auto !important; scroll-snap-align: start !important; border-radius: 12px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-landing-product-media { aspect-ratio: 1 / 1 !important; flex: 0 0 auto !important; width: 100% !important; overflow: hidden !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-landing-product-media > p { position: absolute !important; inset: 0 !important; height: auto !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-landing-product-media img { object-fit: contain !important; padding: 12px !important; box-sizing: border-box !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-landing-product-media--inset-tight img { padding: 4px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-landing-product-body { flex: 1 1 auto !important; text-align: center !important; align-items: center !important; padding: 16px 16px 56px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-hub-product-card .kbp-ecoa-platform-link-row { position: absolute !important; right: 16px !important; bottom: 16px !important; margin: 0 !important; align-self: auto !important; width: max-content !important; z-index: 2 !important; } /* D360 editor wraps circle CTAs in
â€” unwrap so 36Ã—36 circle sizing holds */ #articleContent :is(.kbp-content-theme-hub, .kbp-landing-container) .kbp-hub-section--product-showcase .kbp-ecoa-platform-link-row > p { margin: 0 !important; padding: 0 !important; display: contents !important; } #articleContent :is(.kbp-content-theme-hub, .kbp-landing-container) .kbp-hub-section--product-showcase a.kbp-ecoa-platform-link--circle { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; min-width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; background: #007bd9 !important; text-decoration: none !important; transform: none !important; font-size: 15px !important; line-height: 1 !important; } #articleContent :is(.kbp-content-theme-hub, .kbp-landing-container) .kbp-hub-section--product-showcase a.kbp-ecoa-platform-link--circle .kbp-ecoa-platform-link-icon { display: inline-flex !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1 !important; color: #ffffff !important; border-bottom: none !important; transform: none !important; } #articleContent :is(.kbp-content-theme-hub, .kbp-landing-container) .kbp-hub-section--product-showcase a.kbp-ecoa-platform-link--circle:is(:hover, :focus-visible, :visited) { background: #007bd9 !important; transform: none !important; } #articleContent :is(.kbp-content-theme-hub, .kbp-landing-container) .kbp-hub-section--product-showcase a.kbp-ecoa-platform-link--circle:is(:hover, :focus-visible, :visited) .kbp-ecoa-platform-link-icon { color: #ffffff !important; transform: none !important; } @container kbp-hub (min-width: 1024px) { #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-hub-section__showcase { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; align-items: stretch !important; overflow: visible !important; gap: 14px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--product-showcase .kbp-hub-product-card { flex: unset !important; min-width: 0 !important; height: 100% !important; } } #articleContent .kbp-content-theme-hub .kbp-hub-section--explain-grid .kbp-hub-explain-cards { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-tiered { display: flex !important; flex-direction: column !important; gap: 16px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card--tier-urgent { min-height: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card--tier-tertiary { min-height: 0 !important; background: #f5f6f7 !important; border-style: dashed !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card { position: relative !important; min-height: 420px !important; border-radius: 20px !important; border: 1px solid #dadcde !important; background: var(--neutral-bg0, #ffffff) !important; overflow: hidden !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__content { display: flex !important; flex-direction: column !important; align-items: center !important; padding: 28px 24px 24px !important; text-align: center !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__title { margin: 0 0 16px !important; font: var(--cds-type-heading-3-semibold) !important; color: #1a1d21 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__summary, #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topics { width: 100% !important; text-align: left !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-explain-card__action-link { color: #007bd9 !important; text-decoration: none !important; position: relative !important; z-index: 5 !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-explain-card__action-link:visited { color: var(--site-link-visited-color, #5928ed) !important; text-decoration: none !important; position: relative !important; z-index: 5 !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-explain-card__link, #articleContent .kbp-content-theme-hub a.kbp-hub-explain-card__link:visited { position: absolute !important; inset: 0 !important; z-index: 4 !important; text-decoration: none !important; border-radius: 20px !important; } @container kbp-hub (max-width: 899px) { #articleContent .kbp-content-theme-hub .kbp-hub-section--featured-grid .kbp-hub-section__primary, #articleContent .kbp-content-theme-hub .kbp-hub-section--featured-grid-2 .kbp-hub-section__primary, #articleContent .kbp-content-theme-hub .kbp-hub-section--featured-grid-3 .kbp-hub-section__primary, #articleContent .kbp-content-theme-hub .kbp-hub-section--featured-grid-4 .kbp-hub-section__primary { grid-template-columns: 1fr !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--compact-row .kbp-hub-section__compact { grid-template-columns: 1fr !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section--explain-grid .kbp-hub-explain-cards { grid-template-columns: 1fr !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card { min-height: 0 !important; } } @container kbp-hub (max-width: 767px) { #articleContent .kbp-content-theme-hub.kbp-landing-container { padding: 32px 16px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-product-link { text-align: left !important; } #articleContent .kbp-content-theme-hub .kbp-hub-product-link .kbp-ecoa-platform-link-row { justify-content: flex-start !important; } } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__label { margin: 0 0 10px !important; font: var(--cds-type-body-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pills__list .kbp-hub-jump-pill { display: flex !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill, #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:visited { background: transparent !important; border: 1px solid #dadcde !important; color: #1e2022 !important; text-decoration: none !important; margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:hover, #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:focus-visible { background: #f6f6f7 !important; border-color: #dadcde !important; color: #1e2022 !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-list { margin: 0 !important; padding: 0 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-item { margin: 0 0 6px !important; padding: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-item:last-child { margin-bottom: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-theme-section__header { margin-bottom: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-theme-section__intro { margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month { margin-top: 32px !important; padding: 24px 20px !important; border-radius: 8px !important; background: transparent !important; box-sizing: border-box !important; } #articleContent .kbp-content-theme-hub .kbp-theme-section__header + .kbp-rn-month { margin-top: 24px !important; } /* The header's bottom margin is zeroed above, so every block that can follow it owns its own top gap. Card sections match the 24px intro-to-cards rhythm used by p.kbp-card-body + .kbp-hub-spotlight-cards on article pages. */ #articleContent .kbp-content-theme-hub .kbp-theme-section__header + .kbp-hub-section { margin-top: 24px !important; } #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd) { background: var(--brand-bg-subtle, #faf6f8) !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-rn-month:nth-child(odd) { background: rgba(255, 170, 200, 0.08) !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > h3.kbp-card-header { margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body { margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > h3.kbp-card-header + p.kbp-card-body { margin-top: 8px !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body + .kbp-hub-secondary-list { margin-top: 16px !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > p.kbp-card-body + h4.kbp-card-intro { margin-top: 20px !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro { margin: 0 0 8px !important; font: var(--cds-type-heading-4-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > .kbp-hub-secondary-list + h4.kbp-card-intro { margin-top: 24px !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro + .kbp-hub-secondary-list { margin-top: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-list { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin: 0 0 28px !important; padding: 0 0 20px !important; border-bottom: 1px solid #dadcde !important; max-width: 62ch !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-item > p { margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-item__title { margin: 0 !important; font: var(--cds-type-body) !important; line-height: 1.4 !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-rn-tags { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; margin: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-rn-month .kbp-hub-secondary-link__desc { display: block !important; margin: 0 !important; max-width: 62ch !important; font: var(--cds-type-body-s, 14px / 20px Inter, system-ui, sans-serif) !important; color: #697074 !important; font-weight: 400 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link { color: #007bd9 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link:visited { color: var(--site-link-visited-color, #5928ed) !important; } #articleContent .kbp-content-theme-hub .kbp-hub-section__secondary-label { font: var(--cds-type-body-semibold) !important; color: #1e2022 !important; margin: 0 0 8px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-intro-row__marketing { font: var(--cds-type-heading-4-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-product-link .kbp-ecoa-platform-link-row { justify-content: flex-end; } #articleContent .kbp-content-theme-hub .kbp-hub-product-link--intro { margin-top: 4px !important; margin-bottom: 0 !important; text-align: left !important; } #articleContent .kbp-content-theme-hub .kbp-hub-product-link--intro .kbp-ecoa-platform-link-row { justify-content: flex-start !important; } #articleContent .kbp-content-theme-hub .kbp-hub-hero-media.kbp-landing-product-media { aspect-ratio: 1200 / 280 !important; max-height: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-hero-media p { height: 100% !important; max-height: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-hero-media img { height: auto !important; max-height: none !important; object-fit: contain !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-section { padding-top: 28px !important; border-top: 1px solid #dadcde !important; margin-bottom: 16px !important; } /* Release Notes hub: more air between Latest highlights and the year index */ #articleContent .kbp-content-theme-hub:has(.kbp-rn-month) .kbp-hub-spotlight-section { margin-bottom: 32px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-section__label { margin: 0 0 14px !important; font: var(--cds-type-heading-4-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-cards { display: flex !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; min-width: 0 !important; margin: 0 !important; padding: 4px 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; overflow-x: visible !important; align-items: stretch !important; scroll-snap-type: none !important; padding: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair > .kbp-hub-guidance-card.kbp-hub-spotlight-card { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none !important; aspect-ratio: auto !important; flex: unset !important; display: flex !important; flex-direction: column !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair .kbp-hub-guidance-card .kbp-hub-spotlight-card__content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; height: 100% !important; box-sizing: border-box !important; padding: 20px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair .kbp-hub-guidance-card .kbp-hub-spotlight-card__body { flex: 1 1 auto !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card .kbp-hub-spotlight-card__content { min-height: 0 !important; padding: 20px !important; } @container kbp-hub (max-width: 899px) { #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair { grid-template-columns: 1fr !important; } } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards:not(.kbp-hub-guidance-cards--pair) { display: flex !important; gap: 12px !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; min-width: 0 !important; margin: 0 !important; padding: 4px 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card.kbp-hub-spotlight-card { aspect-ratio: auto !important; min-height: 0 !important; flex: 0 0 min(72cqw, 260px) !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger { border-color: #f1a0a2 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__title { color: #c33d41 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-plain { background: var(--neutral-bg0, #ffffff) !important; border-color: #dadcde !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain .kbp-hub-spotlight-card__action { background: #007bd9 !important; border-color: #007bd9 !important; color: #ffffff !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card.kbp-hub-spotlight-card--tone-plain .kbp-hub-spotlight-card__action-icon { color: #ffffff !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card { position: relative !important; aspect-ratio: 3 / 4 !important; flex: 0 0 min(72cqw, 280px) !important; scroll-snap-align: start !important; min-height: 320px !important; border-radius: 18px !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid #dadcde !important; box-shadow: none !important; cursor: pointer !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more { flex: 0 0 min(72cqw, 240px) !important; scroll-snap-align: start !important; align-self: stretch !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 8px !important; min-height: 280px !important; padding: 24px 20px !important; box-sizing: border-box !important; border-radius: 18px !important; border: 1px dashed var(--brand-border, #c9a6b8) !important; background: var(--brand-bg-subtle, #faf6f8) !important; box-shadow: none !important; cursor: default !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__eyebrow { margin: 0 !important; font: 600 12px / 16px Inter, system-ui, sans-serif !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; color: var(--brand, #7d2855) !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__title { margin: 0 !important; font: var(--cds-type-heading-4-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__body { margin: 0 !important; font: var(--cds-type-body-s, 14px / 20px Inter, system-ui, sans-serif) !important; color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__action { margin: 12px 0 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__link { color: #007bd9 !important; font-weight: 600 !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__link:visited { color: var(--site-link-visited-color, #5928ed) !important; font-weight: 600 !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__link:hover, #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__link:focus-visible { text-decoration: underline !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__link-icon { display: inline-block !important; margin-left: 6px !important; text-decoration: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more { background: rgba(255, 170, 200, 0.08) !important; border-color: var(--brand-border, #c9a6b8) !important; } /* 2-col path grid â€” content height, not portrait carousel tiles */ #articleContent .kbp-content-theme-hub .kbp-two-col-grid > .kbp-hub-spotlight-card, #articleContent .kbp-content-theme-hub .kbp-landing-product-grid > .kbp-hub-spotlight-card { aspect-ratio: auto !important; min-height: 0 !important; height: auto !important; flex: none !important; width: 100% !important; max-width: none !important; } #articleContent .kbp-content-theme-hub .kbp-two-col-grid > .kbp-hub-spotlight-card .kbp-hub-spotlight-card__content, #articleContent .kbp-content-theme-hub .kbp-landing-product-grid > .kbp-hub-spotlight-card .kbp-hub-spotlight-card__content { min-height: 0 !important; height: auto !important; padding: 20px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--has-scenarios { aspect-ratio: auto !important; height: auto !important; min-height: 360px !important; overflow: visible !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__content { min-height: 0 !important; height: auto !important; padding: 20px 20px 24px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand { border-color: #c9a6b8 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative { border-color: #7ac6ff !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary { border-color: #9fd4cc !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__content { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important; gap: 12px !important; padding: 20px 20px 56px !important; min-height: 100% !important; box-sizing: border-box !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__body { display: flex !important; flex-direction: column !important; gap: 12px !important; min-width: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--has-scenarios .kbp-hub-spotlight-card__body { gap: 4px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__content p { margin: 0 !important; padding: 0 !important; } /* Pair guidance cards: equal-height grid (after generic spotlight sizing) */ #articleContent .kbp-content-theme-hub .kbp-hub-guidance-cards--pair > .kbp-hub-spotlight-card.kbp-hub-guidance-card { aspect-ratio: auto !important; min-height: 0 !important; height: 100% !important; flex: unset !important; width: 100% !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__eyebrow { font: var(--cds-type-body-small) !important; font-weight: 600 !important; color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow { color: #7d2855 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow { color: #007bd9 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow { color: #128a7c !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__title { font: var(--cds-type-heading-3-semibold) !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps { margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: kbp-hub-step !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li { margin: 0 0 6px !important; padding: 0 0 0 1.35em !important; position: relative !important; counter-increment: kbp-hub-step !important; color: #697074 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li::before { content: counter(kbp-hub-step) "." !important; position: absolute !important; left: 0 !important; color: #697074 !important; font: var(--cds-type-body-small) !important; font-weight: 400 !important; font-variant-numeric: tabular-nums !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets { margin: 0 !important; padding: 0 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li { margin: 0 0 4px !important; padding: 0 0 0 1em !important; position: relative !important; color: #697074 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li::before { content: "\2022" !important; position: absolute !important; left: 0 !important; color: #697074 !important; font: var(--cds-type-body-small) !important; font-weight: 400 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topic-bullets { margin: 0 !important; padding: 0 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topic-bullets > li { position: relative !important; padding-left: 1em !important; color: #697074 !important; list-style: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topic-bullets > li::before { content: "\2022" !important; position: absolute !important; left: 0 !important; color: #697074 !important; font: var(--cds-type-body-small) !important; font-weight: 400 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li:last-child { margin-bottom: 0 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li > p { margin: 0 !important; font: var(--cds-type-body-small) !important; line-height: 1.45 !important; color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li > p { font: var(--cds-type-body-small) !important; line-height: 1.45 !important; color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps strong { font-weight: 600 !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__steps strong { color: #7d2855 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__steps strong { color: #007bd9 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__steps strong { color: #128a7c !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-neutral .kbp-hub-spotlight-card__eyebrow { color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__copy { display: flex !important; flex-direction: column !important; gap: 8px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__copy-line { font: var(--cds-type-body-small) !important; line-height: 1.45 !important; color: #697074 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__copy-line strong { font-weight: 600 !important; color: #1e2022 !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__scenario-links { margin: 0 !important; padding: 0 !important; list-style: none !important; position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__scenario-links > li { margin: 0 !important; padding: 0 !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__scenario-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; position: relative !important; z-index: 5 !important; font: var(--cds-type-body-small) !important; font-weight: 600 !important; line-height: 1.35 !important; color: #007bd9 !important; text-decoration: none !important; border-bottom: none !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__scenario-link:visited { display: inline-flex !important; align-items: center !important; gap: 4px !important; position: relative !important; z-index: 5 !important; font: var(--cds-type-body-small) !important; font-weight: 600 !important; line-height: 1.35 !important; color: var(--site-link-visited-color, #5928ed) !important; text-decoration: none !important; border-bottom: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__scenario-link-text { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: currentColor !important; text-underline-offset: 2px !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__scenario-link-icon { font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; text-decoration: none !important; border-bottom: none !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__scenario-link:hover, #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__scenario-link:focus-visible { color: #007bd9 !important; border-bottom: none !important; } #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__action { position: absolute !important; right: 16px !important; bottom: 16px !important; z-index: 3 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; background: var(--neutral-bg0, #ffffff) !important; border: 1px solid #dadcde !important; color: #007bd9 !important; box-shadow: none !important; border-bottom: none !important; text-decoration: none !important; } #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__link, #articleContent .kbp-content-theme-hub a.kbp-hub-spotlight-card__link:visited { position: absolute !important; inset: 0 !important; z-index: 4 !important; display: block !important; text-decoration: none !important; border-radius: 18px !important; color: transparent !important; } /* ============================================================================ PLATFORM CTA â€” unified (PAT-LANDING-05 / PAT-VIDEO-HUB) ============================================================================ One treatment for eCOA Help, BP Video hub, eCOA Video hub, and legacy cols. Anchor match: a.kbp-ecoa-platform-link OR a:has(> .kbp-ecoa-platform-link-text) when D360 strips the class from but keeps the label/icon spans. Survives D360â€™s
wrapper and missing ancestor classes. Color on label + icon only. ============================================================================ */ /* D360 editor â€” neutralize wrapper paragraph inside link row */ #articleContent .kbp-ecoa-platform-link-row > p, #articleContent p.kbp-ecoa-platform-link-row { margin: 0 !important; padding: 0 !important; } /* Layout â€” inline flow (not flex) so â†— stays after the last word when the label wraps */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) { position: static !important; display: inline !important; margin: 0 !important; padding: 0 !important; text-align: left; float: none !important; max-width: 100%; font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; text-decoration-line: none !important; cursor: pointer; } /* Label â€” 16/24 semibold; underline per line (not border-bottom box edge) */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) .kbp-ecoa-platform-link-text { display: inline !important; position: relative; z-index: 2; font-size: 16px !important; font-weight: 600 !important; line-height: 24px !important; color: #007bd9 !important; border-bottom: none !important; padding-bottom: 0 !important; text-decoration: underline !important; text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-decoration-color: currentColor !important; text-underline-offset: 2px !important; text-underline-position: from-font; overflow-wrap: anywhere; } /* Icon â€” â†— 14px, 6px after label; inline so it follows the last wrapped word */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) .kbp-ecoa-platform-link-icon { display: inline !important; position: relative; z-index: 2; margin: 0 0 0 6px !important; padding: 0 !important; font-size: 14px !important; line-height: 24px !important; font-weight: 600 !important; vertical-align: baseline; color: #007bd9 !important; border-bottom: none !important; text-decoration: none !important; text-decoration-line: none !important; transition: transform 0.15s ease, color 0.15s ease; } .kbp-ecoa-platform-link-icon i { color: inherit; } /* Visited â€” color on label + icon only */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):visited .kbp-ecoa-platform-link-text { color: var(--site-link-visited-color, #5928ed) !important; text-decoration-color: currentColor !important; } #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):visited .kbp-ecoa-platform-link-icon { color: var(--site-link-visited-color, #5928ed) !important; } /* Hover / focus â€” label + icon together; underline stays 1px */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):is(:hover, :focus-visible) .kbp-ecoa-platform-link-text { color: #0056a3 !important; text-decoration-color: #0056a3 !important; text-decoration-thickness: 1px !important; } #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):is(:hover, :focus-visible) .kbp-ecoa-platform-link-icon { color: #0056a3 !important; transform: translateX(1px); } /* D360 may drop the icon span â€” â†— on the anchor (not the label) */ #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):not(:has(.kbp-ecoa-platform-link-icon))::after { content: "\2197"; display: inline; position: relative; z-index: 2; margin-left: 6px; font-size: 14px; line-height: 24px; font-weight: 600; vertical-align: baseline; color: #007bd9; border-bottom: none !important; text-decoration: none !important; transition: transform 0.15s ease, color 0.15s ease; } #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):not(:has(.kbp-ecoa-platform-link-icon)):visited::after { color: var(--site-link-visited-color, #5928ed); } #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):not(:has(.kbp-ecoa-platform-link-icon)):is(:hover, :focus-visible)::after { color: #0056a3; transform: translateX(1px); } @media (max-width: 480px) { #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) .kbp-ecoa-platform-link-text { font-size: 15px !important; line-height: 22px !important; } } /* ============================================================================= STANDALONE LINK â€” arrow-out icon (PAT-STANDALONE-LINK) Prefer an explicit .kbp-standalone-link-icon span in HTML (D360-safe, like platform links). Fall back to ::after when the span is missing. Use on tags that sit alone as their own paragraph/line (e.g., "Read more about the Sites dashboard"). Do NOT use on inline links within running text. ============================================================================= */ #articleContent a.kbp-standalone-link { font-weight: 600 !important; color: #007bd9 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px !important; text-decoration-color: currentColor !important; cursor: pointer; } #articleContent a.kbp-standalone-link .kbp-standalone-link-icon { display: inline-block; margin-left: 6px; font-size: 0.875em; font-weight: 600; vertical-align: baseline; color: inherit; text-decoration: none !important; transition: transform 0.15s ease, color 0.15s ease; } /* D360 may drop the icon span â€” â†— on the anchor when the span is missing */ #articleContent a.kbp-standalone-link:not(:has(.kbp-standalone-link-icon))::after { content: "\2197"; display: inline-block; margin-left: 6px; font-size: 0.875em; font-weight: 600; vertical-align: baseline; color: inherit; text-decoration: none !important; transition: transform 0.15s ease, color 0.15s ease; } #articleContent a.kbp-standalone-link:visited { color: var(--site-link-visited-color, #5928ed) !important; text-decoration-color: var(--site-link-visited-color, #5928ed) !important; } #articleContent a.kbp-standalone-link:is(:hover, :focus-visible) { color: #0056a3 !important; text-decoration-color: #0056a3 !important; } #articleContent a.kbp-standalone-link:is(:hover, :focus-visible) .kbp-standalone-link-icon, #articleContent a.kbp-standalone-link:not(:has(.kbp-standalone-link-icon)):is(:hover, :focus-visible)::after { color: #0056a3; transform: translateX(1px); } /* ============================================================================= D360 Sandbox â€” eCOA product landing two-up (PAT-LANDING-05) Grid on container; cards width:100% to fill tracks. flex:1 1 0 backs up if editor leaves display:flex inline on the grid (never use inline flex here). ============================================================================= */ #articleContent .kbp-landing-container > .kbp-landing-product-grid.kbp-two-col-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; float: none !important; clear: both !important; } #articleContent .kbp-landing-container > .kbp-landing-product-grid > .kbp-landing-product-card, #articleContent .kbp-landing-product-grid.kbp-two-col-grid .kbp-landing-product-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: 1 1 0 !important; box-sizing: border-box !important; float: none !important; clear: none !important; } #articleContent .kbp-landing-product-media, #articleContent .kbp-landing-product-media p, #articleContent .kbp-landing-product-media img.adv-wysiwyg-img { float: none !important; clear: none !important; } @media (max-width: 767px) { #articleContent .kbp-landing-container > .kbp-landing-product-grid.kbp-two-col-grid { grid-template-columns: 1fr !important; } #articleContent .kbp-landing-container > .kbp-landing-product-grid > .kbp-landing-product-card, #articleContent .kbp-landing-product-grid.kbp-two-col-grid .kbp-landing-product-card { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* ============================================================================= D360 Sandbox â€” FAQ jump index heading (PAT-FAQ-JUMP) Platform h3 rules override font shorthand; use explicit properties. ============================================================================= */ #articleContent .kbp-faq-jump-index__heading, #articleContent h3.kbp-faq-jump-index__heading, #articleContent h3.kbp-card-header.kbp-faq-jump-index__heading, #articleContent .kbp-branded-container.kbp-faq-jump-index > h3.kbp-faq-jump-index__heading, #articleContent .kbp-branded-container.kbp-faq-jump-index > h3.kbp-card-header.kbp-faq-jump-index__heading, #articleContent .kbp-branded-container.kbp-faq-jump-index > h3.kbp-faq-jump-index__heading.hyperlink-wrapper-container, #articleContent .kbp-branded-container.kbp-faq-jump-index > h3.kbp-card-header.kbp-faq-jump-index__heading.hyperlink-wrapper-container, #articleContent :is(editor360-custom-block, .editor360-custom-block) h3.kbp-faq-jump-index__heading, #articleContent :is(editor360-custom-block, .editor360-custom-block) h3.kbp-card-header.kbp-faq-jump-index__heading { display: block !important; margin: 0 !important; padding: 0 !important; font-family: var(--cds-font-family) !important; font-size: 20px !important; font-weight: 600 !important; line-height: 28px !important; color: #1e2022 !important; text-wrap: wrap !important; } /* ============================================================================= PAT-HERO-WALKTHROUGH-TASK â€” hero poster to modal animated tutorial ============================================================================= Template 03 (Cardiac Solutions and any hero-walkthrough task page). The JS half of this component already shipped in kbp-sandbox-custom-javascript-paste.js; these are its matching styles. Authored on-page DOM: .kbp-hero-section-image--walkthrough-poster > .kbp-hero-walkthrough-poster > .kbp-walkthrough-play-trigger[data-walkthrough-frames] > p.kbp-video-poster-wrap > img.kbp-video-poster .kbp-walkthrough-frame-assets (hidden frame source; JS clones from it) Modal DOM built by JS and appended to , i.e. OUTSIDE #articleContent, so these rules must also stand on their own without the #articleContent scope: dialog.kbp-walkthrough-modal > .kbp-walkthrough-modal-panel > .kbp-walkthrough-modal-close / .kbp-walkthrough-modal-title > .kbp-walkthrough-modal-body > .kbp-instruction-walkthrough--stacked --live-caption > .kbp-instruction-walkthrough__stage > .kbp-card-container > .kbp-card-content > .kbp-instruction-walkthrough__player > .kbp-step-player > .kbp-instruction-walkthrough__live-caption ============================================================================= */ /* --- Hero poster column ---------------------------------------------------- */ .kbp-hero-section-image--walkthrough-poster, #articleContent .kbp-hero-section-image--walkthrough-poster { max-width: 100%; border-radius: 8px; overflow: hidden; } @media (min-width: 1024px) { .kbp-hero-section-container:has(> .kbp-hero-section-image--walkthrough-poster) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 32px; align-items: center; } } .kbp-hero-walkthrough-poster, #articleContent .kbp-hero-walkthrough-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0; border-radius: 8px; overflow: hidden; background: #101214; isolation: isolate; } /* --- Play trigger (div + role="button"; keep the video-trigger visual) ------ */ .kbp-walkthrough-play-trigger { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: #101214; cursor: pointer; text-align: left; isolation: isolate; } #articleContent .kbp-walkthrough-play-trigger { pointer-events: auto; cursor: pointer; } .kbp-walkthrough-play-trigger::before { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, 0.32); pointer-events: none; } .kbp-walkthrough-play-trigger::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 4; width: 72px; height: 72px; transform: translate(-50%, -50%); pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Ccircle cx='36' cy='36' r='36' fill='rgba(255%2C255%2C255%2C0.92)'/%3E%3Cpath d='M30 23.5v25l20-12.5-20-12.5z' fill='%237d2855'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), filter 0.22s ease; } .kbp-walkthrough-play-trigger:hover::after, .kbp-walkthrough-play-trigger:focus-visible::after { transform: translate(-50%, -50%) scale(1.12); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.48)); } .kbp-walkthrough-play-trigger:focus-visible { outline: 2px solid var(--brand-primary, #7d2855); outline-offset: 2px; } /* D360 wraps the poster img in
â€” fill the well instead of flowing inline */ .kbp-walkthrough-play-trigger > p.kbp-video-poster-wrap, #articleContent .kbp-walkthrough-play-trigger > p.kbp-video-poster-wrap { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0 !important; padding: 0 !important; line-height: 0; } /* Beat `.kbp-hero-section-image img { height: auto !important }` and keep the full Scribe frame readable (contain, not cover). */ .kbp-hero-walkthrough-poster img.kbp-video-poster, #articleContent .kbp-hero-walkthrough-poster img.kbp-video-poster { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: contain; object-position: center center; background: #101214; pointer-events: none; -webkit-user-drag: none; user-select: none; } /* Block the D360 image magnify / lightbox affordance on the poster */ #articleContent .kbp-hero-walkthrough-poster .img-enlarge, #articleContent .kbp-hero-walkthrough-poster .image-enlarge, #articleContent .kbp-hero-walkthrough-poster .enlarge-icon, #articleContent .kbp-hero-walkthrough-poster [class*="image-expand"], #articleContent .kbp-hero-walkthrough-poster [class*="img-zoom"], #articleContent .kbp-hero-walkthrough-poster [class*="magnify"], #articleContent .kbp-hero-walkthrough-poster [class*="lightbox"] { display: none !important; visibility: hidden !important; pointer-events: none !important; } .kbp-hero-walkthrough-label, #articleContent .kbp-hero-walkthrough-label { margin: 0 !important; padding: 0 !important; font: var(--cds-type-body-small); color: var(--brand, #7d2855) !important; } /* --- Hidden frame source --------------------------------------------------- Never visible to customers. The `hidden` attribute alone is not enough: D360 can drop it on paste, which would dump every frame down the page. */ .kbp-walkthrough-frame-assets, .kbp-walkthrough-frame-assets[hidden], #articleContent .kbp-walkthrough-frame-assets, #articleContent .kbp-walkthrough-frame-assets[hidden] { display: none !important; } /* --- Modal shell ------------------------------------------------------------ */ dialog.kbp-walkthrough-modal { width: min(1040px, 94vw); max-width: 94vw; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; } dialog.kbp-walkthrough-modal::backdrop { background: rgba(16, 18, 20, 0.78); } /* D360 ships `dialog { display: none }` style resets â€” force ours open. Kept as separate rules so a browser without :modal cannot invalidate [open]. */ dialog.kbp-walkthrough-modal[open] { display: block !important; } dialog.kbp-walkthrough-modal:modal { display: block !important; } dialog.kbp-walkthrough-modal:not([open]) { display: none !important; } /* Same lock for the PAT-VIDEO-02 modal */ dialog.kbp-video-modal[open] { display: block !important; } dialog.kbp-video-modal:modal { display: block !important; } .kbp-walkthrough-modal-panel { position: relative; background: #101214; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); } .kbp-walkthrough-modal-close { position: absolute; top: 12px; right: 12px; z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; } .kbp-walkthrough-modal-close:hover, .kbp-walkthrough-modal-close:focus-visible { background: rgba(255, 255, 255, 0.24); } .kbp-walkthrough-modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .kbp-walkthrough-modal-title { margin: 0; padding: 16px 56px 0 20px; font: var(--cds-type-heading-4); color: #fff; } .kbp-walkthrough-modal-body { padding: 12px 20px 20px; } /* The cloned player reuses article card classes â€” strip the white card shell so it reads as player chrome on the dark modal panel. */ .kbp-walkthrough-modal-body .kbp-card-container { margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .kbp-walkthrough-modal-body .kbp-card-content { display: flex; flex-direction: column; gap: 12px; padding: 0; } /* --- Stacked walkthrough (modal player) ------------------------------------ `.kbp-instruction-walkthrough` defaults to the two-column "content / player" grid. The stacked variant is a single column. */ .kbp-instruction-walkthrough--stacked { display: block; grid-template-columns: none; grid-template-areas: none; gap: 0; width: 100%; } #articleContent .kbp-instruction-walkthrough--stacked { display: block !important; grid-template-columns: none !important; grid-template-areas: none !important; } .kbp-instruction-walkthrough__stage { width: 100%; min-width: 0; } .kbp-walkthrough-modal-body .kbp-step-player { border-color: rgba(255, 255, 255, 0.16); } /* 16:9 Scribe browser frames, sized for the modal */ .kbp-walkthrough-modal-body .kbp-instruction-walkthrough .kbp-step-player__viewport, .kbp-instruction-walkthrough--stacked[data-device="browser"] .kbp-step-player__viewport, .kbp-instruction-walkthrough--stacked[data-device="tablet"] .kbp-step-player__viewport { aspect-ratio: 16 / 9; max-height: min(68vh, 620px); } /* --- Live captions â€” show the active step only ----------------------------- */ .kbp-instruction-walkthrough__live-caption { margin: 0; min-height: 3.5em; } .kbp-instruction-live-step { display: none; } .kbp-instruction-live-step--active { display: block; } .kbp-instruction-live-step > p.kbp-card-body { margin: 0 !important; padding: 0 !important; } .kbp-walkthrough-modal-body .kbp-instruction-live-step > p.kbp-card-body { color: rgba(255, 255, 255, 0.92) !important; } @media (max-width: 767px) { dialog.kbp-walkthrough-modal { width: 96vw; } .kbp-walkthrough-modal-title { padding: 12px 48px 0 12px; } .kbp-walkthrough-modal-body { padding: 8px 12px 16px; } .kbp-walkthrough-modal-body .kbp-instruction-walkthrough .kbp-step-player__viewport { max-height: 46vh; } } /* Layer: 04-kbp-dark-mode.css — html[data-bs-theme="dark"] overrides for kbp-* */ /* ============================================================================ Surface shells — canonical + common D360 beat targets ============================================================================ */ html[data-bs-theme="dark"] :is( .kbp-card-container, .kbp-callout, .kbp-two-col-card, .kbp-quick-links-container, .kbp-quick-links-item, .kbp-hero-jump-band, .kbp-branded-card, .kbp-branded-container .kbp-branded-card.kbp-branded-card--outline, .kbp-faq-jump-index__link, .kbp-rn-tag, .kbp-hub-spotlight-card--tone-plain ), [data-bs-theme="dark"] :is( .kbp-card-container, .kbp-callout, .kbp-two-col-card, .kbp-quick-links-container, .kbp-quick-links-item, .kbp-hero-jump-band, .kbp-branded-card, .kbp-branded-container .kbp-branded-card.kbp-branded-card--outline, .kbp-faq-jump-index__link, .kbp-rn-tag, .kbp-hub-spotlight-card--tone-plain ) { background: var(--neutral-bg0); border-color: var(--neutral-border-1); color: var(--neutral-text); } html[data-bs-theme="dark"] .kbp-branded-container, [data-bs-theme="dark"] .kbp-branded-container { background-color: var(--neutral-bg0, #1e2022); border-color: #c9a6b8; } html[data-bs-theme="dark"] .kbp-callout-content, [data-bs-theme="dark"] .kbp-callout-content { border-color: var(--neutral-border-1); } /* ============================================================================ #articleContent beats — D360 may force light fills / dark text ============================================================================ */ html[data-bs-theme="dark"] #articleContent :is( .kbp-card-container, .kbp-callout, .kbp-two-col-card, .kbp-quick-links-container, .kbp-quick-links-item, .kbp-hero-jump-band, .kbp-branded-card, .kbp-faq-jump-index__link, .kbp-hub-spotlight-card--tone-plain ), [data-bs-theme="dark"] #articleContent :is( .kbp-card-container, .kbp-callout, .kbp-two-col-card, .kbp-quick-links-container, .kbp-quick-links-item, .kbp-hero-jump-band, .kbp-branded-card, .kbp-faq-jump-index__link, .kbp-hub-spotlight-card--tone-plain ) { background: var(--neutral-bg0) !important; border-color: var(--neutral-border-1) !important; } /* Active walkthrough step — light #ffffff chip + white dark-mode text = unreadable. Hardcode raised dark fill (do not use --neutral-bg0; D360 may leave it light). */ html[data-bs-theme="dark"] .kbp-instruction-step--active, html[data-bs-theme="dark"] #articleContent .kbp-instruction-step--active, [data-bs-theme="dark"] .kbp-instruction-step--active, [data-bs-theme="dark"] #articleContent .kbp-instruction-step--active { background: #1e2022 !important; background-color: #1e2022 !important; background-image: none !important; border-left-color: #7d2855 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 1px #c9a6b8 !important; color: #fbfcfd !important; } html[data-bs-theme="dark"] .kbp-instruction-step--active :is(p, .kbp-card-body, strong, b, span), html[data-bs-theme="dark"] #articleContent .kbp-instruction-step--active :is(p, .kbp-card-body, strong, b, span), [data-bs-theme="dark"] .kbp-instruction-step--active :is(p, .kbp-card-body, strong, b, span), [data-bs-theme="dark"] #articleContent .kbp-instruction-step--active :is(p, .kbp-card-body, strong, b, span) { color: #fbfcfd !important; } /* Inactive hover — light rgba white wash reads as a pale slab in dark */ html[data-bs-theme="dark"] .kbp-instruction-step:hover:not(.kbp-instruction-step--active), html[data-bs-theme="dark"] #articleContent .kbp-instruction-step:hover:not(.kbp-instruction-step--active), [data-bs-theme="dark"] .kbp-instruction-step:hover:not(.kbp-instruction-step--active), [data-bs-theme="dark"] #articleContent .kbp-instruction-step:hover:not(.kbp-instruction-step--active) { background: rgba(255, 255, 255, 0.08) !important; } html[data-bs-theme="dark"] #articleContent :is( .kbp-faq-jump-index__heading, h3.kbp-faq-jump-index__heading, h3.kbp-card-header.kbp-faq-jump-index__heading, .kbp-content-theme-hub .kbp-hub-spotlight-card__title, .kbp-hub-spotlight-card__title, .kbp-card-header, .kbp-card-body, .kbp-callout-title, .kbp-callout-body ), [data-bs-theme="dark"] #articleContent :is( .kbp-faq-jump-index__heading, h3.kbp-faq-jump-index__heading, h3.kbp-card-header.kbp-faq-jump-index__heading, .kbp-content-theme-hub .kbp-hub-spotlight-card__title, .kbp-hub-spotlight-card__title, .kbp-card-header, .kbp-card-body, .kbp-callout-title, .kbp-callout-body ) { color: var(--neutral-text) !important; } /* ============================================================================ Product hub dark mode — section chrome, spotlight, guidance, more band Pattern: dark surface + tone border; titles white; accents on eyebrow/strong only (Material/Apple dark UI: avoid saturated pastel fills on dark backgrounds) ============================================================================ */ /* Theme section H2 + intro (beat hardcoded #1e2022) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-section-heading, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section__header .kbp-section-heading, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__text, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:visited .kbp-hub-section-heading__text, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section > .kbp-section-heading, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section__header .kbp-section-heading, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__text, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section-heading__link:visited .kbp-hub-section-heading__text { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section__intro, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-theme-section__intro { color: #fbfcfd !important; } /* Spotlight / guidance titles — white; danger keeps soft red for urgency */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__title, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__title { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__title, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__title { color: #f1a0a2 !important; } /* Hub body copy — white (beat hardcoded #697074 / #1e2022) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-spotlight-card__copy-line, .kbp-hub-spotlight-card__steps, .kbp-hub-spotlight-card__steps > li, .kbp-hub-spotlight-card__steps > li > p, .kbp-hub-guidance-card__bullets > li, .kbp-hub-guidance-card__bullets > li > p, .kbp-hub-explain-card__topic-bullets > li, .kbp-hub-explain-card__topic-bullets > li > p, .kbp-hub-secondary-item, .kbp-hub-secondary-link__desc, .kbp-topic-card__body > .kbp-landing-product-tagline ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-spotlight-card__copy-line, .kbp-hub-spotlight-card__steps, .kbp-hub-spotlight-card__steps > li, .kbp-hub-spotlight-card__steps > li > p, .kbp-hub-guidance-card__bullets > li, .kbp-hub-guidance-card__bullets > li > p, .kbp-hub-explain-card__topic-bullets > li, .kbp-hub-explain-card__topic-bullets > li > p, .kbp-hub-secondary-item, .kbp-hub-secondary-link__desc, .kbp-topic-card__body > .kbp-landing-product-tagline ) { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li::before, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li::before, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topic-bullets > li::before, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li::before, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-guidance-card__bullets > li::before, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-explain-card__topic-bullets > li::before { color: #fbfcfd !important; content: "\2022" !important; } /* Numbered step markers stay decimal counters, not bullets */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li::before, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps > li::before { content: counter(kbp-hub-step) "." !important; } /* UI-label strong — tone accents (hex, avoid wrong --primary/--brand remaps) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps strong, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__copy-line strong, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-topic-card .kbp-hub-spotlight-card__steps strong, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__steps strong, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__copy-line strong, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-topic-card .kbp-hub-spotlight-card__steps strong { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #ffaac8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #9fd4cc !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #f1a0a2 !important; } /* Eyebrows — tone only */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__eyebrow { color: #899297 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow { color: #ffaac8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow { color: #9fd4cc !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__eyebrow { color: #f1a0a2 !important; } /* Hub intro + On this page jump pills */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-intro-row__marketing, .kbp-hub-intro-row__educational, .kbp-hub-jump-pills__label, .kbp-hub-spotlight-section__label, .kbp-hub-section__secondary-label, .kbp-topic-card__body > .kbp-card-header ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-intro-row__marketing, .kbp-hub-intro-row__educational, .kbp-hub-jump-pills__label, .kbp-hub-spotlight-section__label, .kbp-hub-section__secondary-label, .kbp-topic-card__body > .kbp-card-header ) { color: #fbfcfd !important; } /* Release Notes cohort headings. The generic dark h4.kbp-card-intro rule cannot reach these: the light layer scopes them through .kbp-rn-month, which carries one more class and therefore outranks it. Must be matched at hub + month depth. */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-rn-month > h4.kbp-card-intro { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:visited, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:visited { background: transparent !important; border-color: #697074 !important; color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:hover, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:focus-visible, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:hover, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-jump-pill:focus-visible { background: #3a3e40 !important; border-color: #697074 !important; color: #fbfcfd !important; } /* Spotlight + guidance cards — dark surface + tone border (no pastel washes) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card { background: #1e2022 !important; border-color: #697074 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-brand { border-color: #c9a6b8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-informative { border-color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-primary { border-color: #9fd4cc !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-danger { border-color: #f1a0a2 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-neutral, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-plain, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-neutral, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card--tone-plain { border-color: #697074 !important; } /* Spotlight action badge — full blue circle + white arrow (all hub spotlight cards) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__action, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__action { background: #007bd9 !important; border-color: #007bd9 !important; color: #ffffff !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__action-icon, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-card__action-icon { color: #ffffff !important; } /* Topic cards (filled) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-topic-card, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-topic-card { background: #1e2022 !important; border-color: #697074 !important; } /* Product showcase / landing media wells — dark surface (SVGs use transparent canvas) */ html[data-bs-theme="dark"] #articleContent :is( .kbp-landing-product-media--neutral, .kbp-landing-product-media--informative, .kbp-landing-product-media--brand ), [data-bs-theme="dark"] #articleContent :is( .kbp-landing-product-media--neutral, .kbp-landing-product-media--informative, .kbp-landing-product-media--brand ) { background: #1e2022 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-section--product-showcase .kbp-hub-product-card, [data-bs-theme="dark"] #articleContent .kbp-hub-section--product-showcase .kbp-hub-product-card, html[data-bs-theme="dark"] #articleContent .kbp-landing-product-card.kbp-hub-product-card, [data-bs-theme="dark"] #articleContent .kbp-landing-product-card.kbp-hub-product-card { background: #1e2022 !important; border-color: #697074 !important; } /* More in this area — neutral dark band + soft brand outline (mirrors light secondary chrome) */ html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-section__secondary, .kbp-hub-section__secondary--band ), [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub :is( .kbp-hub-section__secondary, .kbp-hub-section__secondary--band ) { background: #1e2022 !important; border-color: #c9a6b8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link:visited, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-link:visited { color: #9ad4ff !important; } /* Walkthrough accordion — raised chip on dark section bands */ html[data-bs-theme="dark"] .kbp-walkthrough-accordion .accordion-item, html[data-bs-theme="dark"] [data-color-scheme="dark"] .kbp-walkthrough-accordion .accordion-item, [data-bs-theme="dark"] .kbp-walkthrough-accordion .accordion-item { background: #1e2022 !important; border: 1px solid #697074 !important; border-radius: 8px; } html[data-bs-theme="dark"] .kbp-walkthrough-accordion .accordion-header, [data-bs-theme="dark"] .kbp-walkthrough-accordion .accordion-header { background: transparent !important; color: #fbfcfd !important; } html[data-bs-theme="dark"] .kbp-instruction-walkthrough--live-caption .kbp-instruction-walkthrough__live-caption, [data-bs-theme="dark"] .kbp-instruction-walkthrough--live-caption .kbp-instruction-walkthrough__live-caption { color: var(--neutral-text); } /* Release notes — link rows readable on dark bands */ html[data-bs-theme="dark"] .kbp-hub-secondary-link, [data-bs-theme="dark"] .kbp-hub-secondary-link { color: var(--brand, #ffaac8); } /* ============================================================================ D360 page chrome — article column + sidebars (outside #articleContent) Full dark mode uses page-bg, not a white article gutter. ============================================================================ */ html[data-bs-theme="dark"] :is( body, site-document, .router-container, .article-section, .article-content-wrapper, .article-right-section, #articleContent ), [data-bs-theme="dark"] :is( body, site-document, .router-container, .article-section, .article-content-wrapper, .article-right-section, #articleContent ) { background-color: var(--page-bg, #282b2c); color: var(--neutral-text, #fbfcfd); } html[data-bs-theme="dark"] :is( .resources-section, .article-info, .sticky-content, .sticky-top .sticky-content ), [data-bs-theme="dark"] :is( .resources-section, .article-info, .sticky-content, .sticky-top .sticky-content ) { background-color: var(--page-bg, #282b2c); color: var(--neutral-text, #fbfcfd); } html[data-bs-theme="dark"] :is( .resources-section, .article-info ) :is(a, span, li, p, label, .toc-accordion, .ng-scroll-content), [data-bs-theme="dark"] :is( .resources-section, .article-info ) :is(a, span, li, p, label, .toc-accordion, .ng-scroll-content) { color: var(--neutral-text, #fbfcfd); } html[data-bs-theme="dark"] :is(.resources-section, .article-info) a:hover, [data-bs-theme="dark"] :is(.resources-section, .article-info) a:hover { color: var(--brand, #ffaac8); } html[data-bs-theme="dark"] :is(.resources-section, .article-info) :is(.active, .selected) a, html[data-bs-theme="dark"] :is(.resources-section, .article-info) a.active, [data-bs-theme="dark"] :is(.resources-section, .article-info) :is(.active, .selected) a, [data-bs-theme="dark"] :is(.resources-section, .article-info) a.active { color: var(--brand, #ffaac8); } html[data-bs-theme="dark"] #articleContent #callout-container, [data-bs-theme="dark"] #articleContent #callout-container { color: var(--neutral-text, #fbfcfd) !important; } /* ============================================================================ Primary header / top nav — historic CSS forces white shell (`site-primary-header-section { background: var(--color-white) !important }`). Dark mode: dark bar + white chrome (minimize brand pink in the header). ============================================================================ */ html[data-bs-theme="dark"] site-primary-header-section, html[data-bs-theme="dark"] .innovate site-primary-header-section, [data-bs-theme="dark"] site-primary-header-section, [data-bs-theme="dark"] .innovate site-primary-header-section { background: #1e2022 !important; } html[data-bs-theme="dark"] site-primary-header-section :is( .nav-bar.primary-nav-bar, .primary-nav-bar-container, .nav-bar ), [data-bs-theme="dark"] site-primary-header-section :is( .nav-bar.primary-nav-bar, .primary-nav-bar-container, .nav-bar ) { background: #1e2022 !important; } html[data-bs-theme="dark"] site-primary-header-section :is( a, a:visited, a span, button, button span, .btn, .btn span, .btn-secondary, .btn-secondary span, .project-workspace-btn span, .project-language-btn, .dropdown-toggle, .dropdown-toggle::after ), [data-bs-theme="dark"] site-primary-header-section :is( a, a:visited, a span, button, button span, .btn, .btn span, .btn-secondary, .btn-secondary span, .project-workspace-btn span, .project-language-btn, .dropdown-toggle, .dropdown-toggle::after ) { color: #fbfcfd !important; } html[data-bs-theme="dark"] site-primary-header-section :is( .btn-icon i, .project-workspace-btn i, header .btn-icon i ), html[data-bs-theme="dark"] .innovate header .btn-icon i, [data-bs-theme="dark"] site-primary-header-section :is( .btn-icon i, .project-workspace-btn i, header .btn-icon i ), [data-bs-theme="dark"] .innovate header .btn-icon i { color: #fbfcfd !important; } html[data-bs-theme="dark"] site-primary-header-section .nav-bar-brand img, html[data-bs-theme="dark"] .innovate site-primary-header-section .nav-bar-brand img, [data-bs-theme="dark"] site-primary-header-section .nav-bar-brand img, [data-bs-theme="dark"] .innovate site-primary-header-section .nav-bar-brand img { filter: brightness(0) invert(1); } html[data-bs-theme="dark"] site-primary-header-section .divider, [data-bs-theme="dark"] site-primary-header-section .divider { border-color: rgba(255, 255, 255, 0.15) !important; } /* Language caret — space after “English”; do not flex-reorder header controls */ site-primary-header-section :is(.project-language-btn, .dropdown-toggle.project-language-btn), .innovate site-primary-header-section :is(.project-language-btn, .dropdown-toggle.project-language-btn), .innovate .project-language-btn.dropdown-toggle { display: inline-block !important; padding-right: 1.1em !important; } site-primary-header-section :is(.project-language-btn, .dropdown-toggle)::after, .innovate site-primary-header-section :is(.project-language-btn, .dropdown-toggle)::after, .innovate .project-language-btn.dropdown-toggle::after, html[data-bs-theme="dark"] site-primary-header-section :is(.project-language-btn, .dropdown-toggle)::after, [data-bs-theme="dark"] site-primary-header-section :is(.project-language-btn, .dropdown-toggle)::after { margin-left: 0.55em !important; margin-right: 0 !important; vertical-align: 0.15em !important; border-top-color: currentColor !important; float: none !important; position: static !important; } /* ============================================================================ D360 initials avatars (header profile + article contributor) Structure: app-profile-image > div > div > span Paint ONE circular surface only — dual fill + border made a square double-frame. ============================================================================ */ html[data-bs-theme="dark"] app-profile-image, [data-bs-theme="dark"] app-profile-image { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* Outer shell = the only painted circle */ html[data-bs-theme="dark"] app-profile-image > div, [data-bs-theme="dark"] app-profile-image > div { background-color: #7d2855 !important; background-image: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 50% !important; overflow: hidden !important; color: #ffffff !important; } /* Inner wrapper — clear native pale pink; do not re-paint or re-border */ html[data-bs-theme="dark"] app-profile-image > div > div, [data-bs-theme="dark"] app-profile-image > div > div { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 50% !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Initials glyph only */ html[data-bs-theme="dark"] app-profile-image span, [data-bs-theme="dark"] app-profile-image span { background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; } /* ============================================================================ Hero + article scope — beat hardcoded #1e2022 and light pill fills ============================================================================ */ html[data-bs-theme="dark"] #articleContent :is( h4.kbp-hero-section-heading, .kbp-hero-section-heading, .kbp-hero-section-detail, .kbp-hero-section-list, .kbp-hero-section-list li, .kbp-hero-section-list li h4 ), [data-bs-theme="dark"] #articleContent :is( h4.kbp-hero-section-heading, .kbp-hero-section-heading, .kbp-hero-section-detail, .kbp-hero-section-list, .kbp-hero-section-list li, .kbp-hero-section-list li h4 ) { color: var(--neutral-text, #fbfcfd) !important; } /* Scope label — white in dark mode (same as other supporting copy) */ html[data-bs-theme="dark"] #articleContent .kbp-article-scope-label, html[data-bs-theme="dark"] #articleContent .kbp-article-scope-label p, [data-bs-theme="dark"] #articleContent .kbp-article-scope-label, [data-bs-theme="dark"] #articleContent .kbp-article-scope-label p { color: #fbfcfd !important; } /* Scope pills — dark surface + soft brand outline + white text (light mode keeps lavender fill; dark mode avoids solid plum flood) */ html[data-bs-theme="dark"] #articleContent .kbp-article-scope-pill, [data-bs-theme="dark"] #articleContent .kbp-article-scope-pill { background: #1e2022 !important; border-color: #c9a6b8 !important; color: #ffffff !important; } html[data-bs-theme="dark"] #articleContent .kbp-article-scope-pill :is(p, span), [data-bs-theme="dark"] #articleContent .kbp-article-scope-pill :is(p, span) { color: inherit !important; } /* Quick-link icon tiles — match scope pills / coloured-shell pattern */ html[data-bs-theme="dark"] #articleContent .kbp-quick-links-icon, [data-bs-theme="dark"] #articleContent .kbp-quick-links-icon { background: #1e2022 !important; border: 1px solid #c9a6b8; } /* Full-color RGB quick-link icons stay clear in dark mode too */ html[data-bs-theme="dark"] #articleContent .kbp-quick-links-container--icons-plain .kbp-quick-links-icon, html[data-bs-theme="dark"] #articleContent .kbp-quick-links-icon--plain, [data-bs-theme="dark"] #articleContent .kbp-quick-links-container--icons-plain .kbp-quick-links-icon, [data-bs-theme="dark"] #articleContent .kbp-quick-links-icon--plain { background: transparent !important; border: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-quick-links-item:hover, html[data-bs-theme="dark"] #articleContent .kbp-quick-links-item:focus-within, [data-bs-theme="dark"] #articleContent .kbp-quick-links-item:hover, [data-bs-theme="dark"] #articleContent .kbp-quick-links-item:focus-within { background: #1e2022 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); } /* ============================================================================ Coloured light-mode shells → dark fill + brand outline (same pattern as scope pills / More band / spotlight cards) ============================================================================ */ /* Instruction candy-stripe (odd top-level walkthrough bands) */ html[data-bs-theme="dark"] #articleContent .kbp-instruction-section:not(.kbp-instruction-section--nested):nth-child( odd of .kbp-instruction-section:not(.kbp-instruction-section--nested) ), [data-bs-theme="dark"] #articleContent .kbp-instruction-section:not(.kbp-instruction-section--nested):nth-child( odd of .kbp-instruction-section:not(.kbp-instruction-section--nested) ) { background-color: var(--neutral-bg0, #1e2022) !important; border: 1px solid #c9a6b8; } /* Stacked walkthrough inside that band (Resupply Portal, etc.): Outer band already frames the block — drop nested card + accordion borders so dark mode doesn't stack three identical outlines. */ html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-instruction-walkthrough--stacked .kbp-card-container, html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-instruction-walkthrough--live-caption .kbp-card-container, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-instruction-walkthrough--stacked .kbp-card-container, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-instruction-walkthrough--live-caption .kbp-card-container { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* Accordion stays a visible control chip (match sibling card borders) — player card above stays borderless so we don't stack three frames. */ html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-item, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-item { background: #1e2022 !important; background-color: #1e2022 !important; border: 1px solid #697074 !important; border-radius: 8px !important; box-shadow: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header { background: transparent !important; background-color: transparent !important; border: none !important; color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header:hover, html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header:focus-visible, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header:hover, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .accordion-header:focus-visible { background: rgba(255, 255, 255, 0.06) !important; } html[data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .kbp-walkthrough-accordion__title, [data-bs-theme="dark"] #articleContent .kbp-instruction-section .kbp-walkthrough-accordion .kbp-walkthrough-accordion__title { color: #fbfcfd !important; } /* Branded summary band — standalone (not nested in a card) */ html[data-bs-theme="dark"] #articleContent .kbp-branded-container, [data-bs-theme="dark"] #articleContent .kbp-branded-container { background-color: var(--neutral-bg0, #1e2022) !important; border-color: #c9a6b8 !important; } /* Nested branded band inside a card (e.g. Share this information): Recess middle to page-bg; drop the middle border so we don't stack three identical frames. Inner branded cards stay raised on the well. */ html[data-bs-theme="dark"] #articleContent .kbp-card-container > .kbp-branded-container, html[data-bs-theme="dark"] #articleContent .kbp-card-content > .kbp-branded-container, [data-bs-theme="dark"] #articleContent .kbp-card-container > .kbp-branded-container, [data-bs-theme="dark"] #articleContent .kbp-card-content > .kbp-branded-container { background-color: #282B2C !important; border-color: transparent !important; box-shadow: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-branded-card, html[data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-branded-card, [data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-branded-card, [data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-branded-card { background: #1e2022 !important; border-color: #3c4043 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } /* Two-col step cards nested in a section card — same raise-on-recess idea */ html[data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-two-col-card, html[data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-two-col-card, [data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-two-col-card, [data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-two-col-card { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-two-col-card-content, html[data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-two-col-card-content, [data-bs-theme="dark"] #articleContent .kbp-card-container .kbp-two-col-card-content, [data-bs-theme="dark"] #articleContent .kbp-card-content .kbp-two-col-card-content { background: #1e2022 !important; border-color: #3c4043 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } html[data-bs-theme="dark"] #articleContent .kbp-branded-container > :is( .kbp-card-header, .kbp-section-heading, h2.kbp-card-header, h3.kbp-card-header ), [data-bs-theme="dark"] #articleContent .kbp-branded-container > :is( .kbp-card-header, .kbp-section-heading, h2.kbp-card-header, h3.kbp-card-header ) { color: var(--neutral-text-white-static, #ffffff) !important; } /* ============================================================================ Semantic callouts — dark fill, light copy; stripe carries tone ============================================================================ */ html[data-bs-theme="dark"] #articleContent .kbp-callout, [data-bs-theme="dark"] #articleContent .kbp-callout { background: transparent !important; } html[data-bs-theme="dark"] #articleContent .kbp-callout-info .kbp-callout-content, [data-bs-theme="dark"] #articleContent .kbp-callout-info .kbp-callout-content { background: #1e2022 !important; border-color: var(--informative-border) !important; } html[data-bs-theme="dark"] #articleContent .kbp-callout-warning .kbp-callout-content, [data-bs-theme="dark"] #articleContent .kbp-callout-warning .kbp-callout-content { background: #1e2022 !important; border-color: var(--warning-border) !important; } html[data-bs-theme="dark"] #articleContent .kbp-callout-danger .kbp-callout-content, [data-bs-theme="dark"] #articleContent .kbp-callout-danger .kbp-callout-content { background: #1e2022 !important; border-color: var(--danger-border) !important; } html[data-bs-theme="dark"] #articleContent .kbp-callout-content :is( .kbp-callout-title, .kbp-callout-body, p, li ), [data-bs-theme="dark"] #articleContent .kbp-callout-content :is( .kbp-callout-title, .kbp-callout-body, p, li ) { color: var(--neutral-text, #fbfcfd) !important; } html[data-bs-theme="dark"] #articleContent .kbp-two-col-card-content, [data-bs-theme="dark"] #articleContent .kbp-two-col-card-content { background: var(--neutral-bg0, #1e2022); border-color: var(--neutral-border-1) !important; } html[data-bs-theme="dark"] #articleContent .kbp-two-col-card-content :is( .kbp-two-col-card-title, .kbp-two-col-card-body, p, li ), [data-bs-theme="dark"] #articleContent .kbp-two-col-card-content :is( .kbp-two-col-card-title, .kbp-two-col-card-body, p, li ) { color: var(--neutral-text, #fbfcfd) !important; } /* ============================================================================ #articleContent — beat remaining hardcoded #1e2022 !important rules Light layer locks card stack
/ list
/ li > p to #1e2022 !important; dark must match that specificity or body copy goes black-on-black. ============================================================================ */ html[data-bs-theme="dark"] #articleContent :is( .kbp-card-content, .kbp-branded-card-content, .kbp-card-body, .kbp-card-list, .kbp-card-list li, .kbp-card-intro, h3.kbp-card-intro, h4.kbp-card-intro, .kbp-two-col-card-title, .kbp-section-heading, h2.kbp-section-heading, .kbp-quick-links-label, .kbp-badge-heading-h2, .kbp-card-list-ordered, .kbp-card-list-unordered, .kbp-branded-card-content p, .kbp-branded-card-heading ), [data-bs-theme="dark"] #articleContent :is( .kbp-card-content, .kbp-branded-card-content, .kbp-card-body, .kbp-card-list, .kbp-card-list li, .kbp-card-intro, h3.kbp-card-intro, h4.kbp-card-intro, .kbp-two-col-card-title, .kbp-section-heading, h2.kbp-section-heading, .kbp-quick-links-label, .kbp-badge-heading-h2, .kbp-card-list-ordered, .kbp-card-list-unordered, .kbp-branded-card-content p, .kbp-branded-card-heading ) { color: var(--neutral-text, #fbfcfd) !important; } /* Match light-layer stack selectors (card / branded / branded-container children) */ html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > p, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-body, html[data-bs-theme="dark"] #articleContent .kbp-branded-container > p, html[data-bs-theme="dark"] #articleContent .kbp-branded-container > .kbp-card-body, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul), html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul) > li, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list > li, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul) > li > p, html[data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list > li > p, html[data-bs-theme="dark"] #articleContent > .kbp-card-list > li > p, html[data-bs-theme="dark"] #articleContent article > .kbp-card-list > li > p, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > p, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-body, [data-bs-theme="dark"] #articleContent .kbp-branded-container > p, [data-bs-theme="dark"] #articleContent .kbp-branded-container > .kbp-card-body, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul), [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul) > li, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list > li, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > :is(ol, ul) > li > p, [data-bs-theme="dark"] #articleContent :is(.kbp-card-content, .kbp-branded-card-content) > .kbp-card-list > li > p, [data-bs-theme="dark"] #articleContent > .kbp-card-list > li > p, [data-bs-theme="dark"] #articleContent article > .kbp-card-list > li > p { color: var(--neutral-text, #fbfcfd) !important; } /* Keep step asides muted in dark (do not inherit full-strength list body color) */ html[data-bs-theme="dark"] #articleContent .kbp-card-list > li > p.kbp-step-aside, html[data-bs-theme="dark"] #articleContent article .kbp-card-list > li > p.kbp-step-aside, [data-bs-theme="dark"] #articleContent .kbp-card-list > li > p.kbp-step-aside, [data-bs-theme="dark"] #articleContent article .kbp-card-list > li > p.kbp-step-aside { color: var(--neutral-text-subtle, #899297) !important; } /* ============================================================================ Landing / video card supporting copy — white in dark mode Light mode taglines use neutral gray; dark mode uses body text white (video hubs, eCOA Help, Neuroscience, and other product landings). ============================================================================ */ html[data-bs-theme="dark"] #articleContent .kbp-landing-product-tagline, html[data-bs-theme="dark"] #articleContent .kbp-landing-subtitle, [data-bs-theme="dark"] #articleContent .kbp-landing-product-tagline, [data-bs-theme="dark"] #articleContent .kbp-landing-subtitle { color: var(--neutral-text, #fbfcfd) !important; } /* ============================================================================ Static audit — beat remaining light #1e2022 !important (pre-review) Video library section prose, landing hero, More card title, hub labels ============================================================================ */ html[data-bs-theme="dark"] #articleContent h2.kbp-section-heading + :is(p, ul, ol), html[data-bs-theme="dark"] #articleContent h2.kbp-section-heading + p + :is(ul, ol), html[data-bs-theme="dark"] #articleContent .kbp-video-section-intro, html[data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(p, ul, ol):not([class*="kbp-"]), html[data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li, html[data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li > p, [data-bs-theme="dark"] #articleContent h2.kbp-section-heading + :is(p, ul, ol), [data-bs-theme="dark"] #articleContent h2.kbp-section-heading + p + :is(ul, ol), [data-bs-theme="dark"] #articleContent .kbp-video-section-intro, [data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(p, ul, ol):not([class*="kbp-"]), [data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li, [data-bs-theme="dark"] #articleContent h2.kbp-section-heading ~ :is(ul, ol):not([class*="kbp-"]) > li > p { color: var(--neutral-text, #fbfcfd) !important; } html[data-bs-theme="dark"] #articleContent .kbp-video-subsection > h3.kbp-card-intro.kbp-video-subsection-heading, [data-bs-theme="dark"] #articleContent .kbp-video-subsection > h3.kbp-card-intro.kbp-video-subsection-heading { color: var(--neutral-text, #fbfcfd) !important; } html[data-bs-theme="dark"] #articleContent .kbp-ecoa-landing-hero h1.kbp-ecoa-landing-heading, html[data-bs-theme="dark"] #articleContent .kbp-ecoa-landing-subtitle, [data-bs-theme="dark"] #articleContent .kbp-ecoa-landing-hero h1.kbp-ecoa-landing-heading, [data-bs-theme="dark"] #articleContent .kbp-ecoa-landing-subtitle { color: var(--neutral-text, #fbfcfd) !important; } html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__title, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__body, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-item__title, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section__secondary-label, html[data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-intro-row__marketing, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__title, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-spotlight-more__body, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-secondary-item__title, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-section__secondary-label, [data-bs-theme="dark"] #articleContent .kbp-content-theme-hub .kbp-hub-intro-row__marketing { color: var(--neutral-text, #fbfcfd) !important; } /* ============================================================================ Platform / standalone CTAs — light layer locks #007bd9 !important (too dark on #1e2022 cards). Use informative light blue on dark. ============================================================================ */ html[data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon), [data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)) :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon) { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):visited :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon), [data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):visited :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon) { color: #9ad4ff !important; } html[data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):is(:hover, :focus-visible) :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon), [data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):is(:hover, :focus-visible) :is(.kbp-ecoa-platform-link-text, .kbp-ecoa-platform-link-icon) { color: #a8dbff !important; } html[data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):not(:has(.kbp-ecoa-platform-link-icon))::after, [data-bs-theme="dark"] #articleContent :is(.kbp-ecoa-platform-link-row, p.kbp-ecoa-platform-link-row) :is(a.kbp-ecoa-platform-link, a:has(> .kbp-ecoa-platform-link-text)):not(:has(.kbp-ecoa-platform-link-icon))::after { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link, html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link .kbp-standalone-link-icon, [data-bs-theme="dark"] #articleContent a.kbp-standalone-link, [data-bs-theme="dark"] #articleContent a.kbp-standalone-link .kbp-standalone-link-icon { color: #7ac6ff !important; text-decoration-color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link:visited, html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link:visited .kbp-standalone-link-icon, [data-bs-theme="dark"] #articleContent a.kbp-standalone-link:visited, [data-bs-theme="dark"] #articleContent a.kbp-standalone-link:visited .kbp-standalone-link-icon { color: #9ad4ff !important; text-decoration-color: #9ad4ff !important; } html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link:is(:hover, :focus-visible), html[data-bs-theme="dark"] #articleContent a.kbp-standalone-link:is(:hover, :focus-visible) .kbp-standalone-link-icon, [data-bs-theme="dark"] #articleContent a.kbp-standalone-link:is(:hover, :focus-visible), [data-bs-theme="dark"] #articleContent a.kbp-standalone-link:is(:hover, :focus-visible) .kbp-standalone-link-icon { color: #b8e2ff !important; text-decoration-color: #b8e2ff !important; } /* ============================================================================ Inline prose links — match CTA / standalone light blue on dark bg. Light layer locks #007bd9; too dark on #1e2022 / #282B2C surfaces. ============================================================================ */ html[data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a, html[data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a, [data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a, [data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a { color: #7ac6ff !important; text-decoration-color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:visited, html[data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:visited, [data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:visited, [data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:visited { color: #9ad4ff !important; text-decoration-color: #9ad4ff !important; } html[data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:is(:hover, :focus-visible), html[data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:is(:hover, :focus-visible), [data-bs-theme="dark"] #articleContent :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:is(:hover, :focus-visible), [data-bs-theme="dark"] #articleContent article :is(p.kbp-card-body, .kbp-callout-body, .kbp-card-list li, .kbp-hub-spotlight-card__copy-line) a:is(:hover, :focus-visible) { color: #b8e2ff !important; text-decoration-color: #b8e2ff !important; } /* ============================================================================ PAT-HERO-WALKTHROUGH-TASK (Template 03) Poster well and modal panel are dark chrome in both themes; only the on-page caption under the hero needs a dark-theme colour. The modal is appended to , so its rules stay outside #articleContent. ============================================================================ */ html[data-bs-theme="dark"] #articleContent .kbp-hero-walkthrough-label, [data-bs-theme="dark"] #articleContent .kbp-hero-walkthrough-label { color: var(--brand, #ffaac8) !important; } /* Frame source stays hidden in every theme */ html[data-bs-theme="dark"] .kbp-walkthrough-frame-assets, [data-bs-theme="dark"] .kbp-walkthrough-frame-assets { display: none !important; } /* Cloned player keeps its dark chrome even when the dark card rules apply */ html[data-bs-theme="dark"] .kbp-walkthrough-modal-body .kbp-card-container, [data-bs-theme="dark"] .kbp-walkthrough-modal-body .kbp-card-container { background: transparent !important; border: 0 !important; box-shadow: none !important; } html[data-bs-theme="dark"] .kbp-walkthrough-modal-body .kbp-instruction-live-step > p.kbp-card-body, [data-bs-theme="dark"] .kbp-walkthrough-modal-body .kbp-instruction-live-step > p.kbp-card-body { color: rgba(255, 255, 255, 0.92) !important; } /* ============================================================================ Numbered badges (group-nav + branded card) Dark --brand remaps to #ffaac8; white glyphs on pale pink fail contrast. Match avatars: solid plum fill + white number. ============================================================================ */ html[data-bs-theme="dark"] :is( .kbp-instruction-group-nav__badge, .kbp-branded-card-badge, #articleContent .kbp-instruction-group-nav__badge, #articleContent .kbp-branded-card-badge ), [data-bs-theme="dark"] :is( .kbp-instruction-group-nav__badge, .kbp-branded-card-badge, #articleContent .kbp-instruction-group-nav__badge, #articleContent .kbp-branded-card-badge ) { background: #7d2855 !important; background-color: #7d2855 !important; background-image: none !important; color: #ffffff !important; border: none !important; box-shadow: none !important; } /* ============================================================================ Danger emphasis text (incl. D360 inline rgb(219, 48, 53) spanMarks) Light-mode cherry red is illegible on dark page / card fills. ============================================================================ */ html[data-bs-theme="dark"] #articleContent .kbp-text-emphasis--danger, [data-bs-theme="dark"] #articleContent .kbp-text-emphasis--danger, html[data-bs-theme="dark"] .kbp-text-emphasis--danger, [data-bs-theme="dark"] .kbp-text-emphasis--danger { color: #f1a0a2 !important; } /* Inline Help reds pasted as style= on spanMark (e.g. *Not available…) */ html[data-bs-theme="dark"] #articleContent :is( [style*="color:rgb(219, 48, 53)"], [style*="color: rgb(219, 48, 53)"], [style*="color:rgb(219,48,53)"], [style*="color:#db3035"], [style*="color: #db3035"], [style*="color:#c33d41"], [style*="color: #c33d41"], [style*="color:rgb(195, 61, 65)"], [style*="color: rgb(195, 61, 65)"] ), [data-bs-theme="dark"] #articleContent :is( [style*="color:rgb(219, 48, 53)"], [style*="color: rgb(219, 48, 53)"], [style*="color:rgb(219,48,53)"], [style*="color:#db3035"], [style*="color: #db3035"], [style*="color:#c33d41"], [style*="color: #c33d41"], [style*="color:rgb(195, 61, 65)"], [style*="color: rgb(195, 61, 65)"] ) { color: #f1a0a2 !important; } /* ============================================================================ FAQ section labels (e.g. “Before you create”) brand-bg-2 wash → muddy maroon chip in dark. Match scope/RN chips: #1e2022 fill + #c9a6b8 border + light text. ============================================================================ */ html[data-bs-theme="dark"] .kbp-faq-section-label, html[data-bs-theme="dark"] #articleContent .kbp-faq-section-label, [data-bs-theme="dark"] .kbp-faq-section-label, [data-bs-theme="dark"] #articleContent .kbp-faq-section-label { background: #1e2022 !important; background-color: #1e2022 !important; background-image: none !important; border: 1px solid #c9a6b8 !important; color: #fbfcfd !important; box-shadow: none !important; } html[data-bs-theme="dark"] .kbp-faq-section-label > *, html[data-bs-theme="dark"] #articleContent .kbp-faq-section-label > *, [data-bs-theme="dark"] .kbp-faq-section-label > *, [data-bs-theme="dark"] #articleContent .kbp-faq-section-label > * { color: #fbfcfd !important; } /* ============================================================================ Article-page hub spotlight cards (e.g. Ordering new supplies) Dark surface rules lived only under .kbp-content-theme-hub — article pages kept tone gradients (muddy purple/navy/teal washes). Mirror hub locks under #articleContent .kbp-hub-spotlight-card. ============================================================================ */ html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card { background: #1e2022 !important; background-color: #1e2022 !important; background-image: none !important; border-color: #697074 !important; box-shadow: none !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand { border-color: #c9a6b8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative { border-color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging, html[data-bs-theme="dark"] #articleContent #medical-imaging.kbp-hub-spotlight-card, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging, [data-bs-theme="dark"] #articleContent #medical-imaging.kbp-hub-spotlight-card { border-color: #9fd4cc !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-danger, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-danger { border-color: #f1a0a2 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-neutral, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-plain, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-neutral, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-plain { border-color: #697074 !important; } /* Titles + body — readable on #1e2022 */ html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__title, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__title { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card :is( .kbp-hub-spotlight-card__copy-line, .kbp-hub-spotlight-card__steps, .kbp-hub-spotlight-card__steps > li, .kbp-hub-spotlight-card__steps > li > p ), [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card :is( .kbp-hub-spotlight-card__copy-line, .kbp-hub-spotlight-card__steps, .kbp-hub-spotlight-card__steps > li, .kbp-hub-spotlight-card__steps > li > p ) { color: #fbfcfd !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__steps > li::before, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__steps > li::before { color: #fbfcfd !important; content: counter(kbp-hub-step) "." !important; } /* Eyebrows + strong — tone accents */ html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__eyebrow { color: #899297 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand .kbp-hub-spotlight-card__eyebrow { color: #ffaac8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative .kbp-hub-spotlight-card__eyebrow { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging .kbp-hub-spotlight-card__eyebrow, html[data-bs-theme="dark"] #articleContent #medical-imaging .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent #medical-imaging .kbp-hub-spotlight-card__eyebrow { color: #9fd4cc !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__eyebrow, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-danger .kbp-hub-spotlight-card__eyebrow { color: #f1a0a2 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #ffaac8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), html[data-bs-theme="dark"] #articleContent #medical-imaging :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ), [data-bs-theme="dark"] #articleContent #medical-imaging :is( .kbp-hub-spotlight-card__steps strong, .kbp-hub-spotlight-card__copy-line strong ) { color: #9fd4cc !important; } /* Scenario / CTA links on article spotlight cards */ html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__scenario-links a, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card a.kbp-hub-spotlight-card__link, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__scenario-links a, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card a.kbp-hub-spotlight-card__link { color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__action, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card__action { background: #007bd9 !important; border-color: #007bd9 !important; color: #ffffff !important; } /* Tone hover border (single-destination cards) */ html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand:not(.kbp-hub-spotlight-card--has-scenarios):hover, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand:not(.kbp-hub-spotlight-card--has-scenarios):focus-within, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand:not(.kbp-hub-spotlight-card--has-scenarios):hover, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-brand:not(.kbp-hub-spotlight-card--has-scenarios):focus-within { border-color: #ffaac8 !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative:not(.kbp-hub-spotlight-card--has-scenarios):hover, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative:not(.kbp-hub-spotlight-card--has-scenarios):focus-within, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative:not(.kbp-hub-spotlight-card--has-scenarios):hover, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-informative:not(.kbp-hub-spotlight-card--has-scenarios):focus-within { border-color: #7ac6ff !important; } html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary:not(.kbp-hub-spotlight-card--has-scenarios):hover, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary:not(.kbp-hub-spotlight-card--has-scenarios):focus-within, html[data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging:not(.kbp-hub-spotlight-card--has-scenarios):hover, html[data-bs-theme="dark"] #articleContent #medical-imaging:not(.kbp-hub-spotlight-card--has-scenarios):hover, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary:not(.kbp-hub-spotlight-card--has-scenarios):hover, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--tone-primary:not(.kbp-hub-spotlight-card--has-scenarios):focus-within, [data-bs-theme="dark"] #articleContent .kbp-hub-spotlight-card--solution-imaging:not(.kbp-hub-spotlight-card--has-scenarios):hover, [data-bs-theme="dark"] #articleContent #medical-imaging:not(.kbp-hub-spotlight-card--has-scenarios):hover { border-color: #9fd4cc !important; }

Logging in to Virgil or Pathway with a Clario Global Account