/* Portal layout: tree | article | "On this page". Content typography lives in portal-content.css (shared with the editor). */ /* The wrapper deliberately is NOT .main-content: the theme script rewrites every `.main-content table` (wraps it, strips styles, moves the first row into ) and the theme CSS turns rows into flex blocks below 992px. Portal tables are block-editor tables and must render as authored. */ /* The theme styles the light header, logo, footer logo and page background only for a fixed list of body classes (.page-template-knowledge-base, .single-knowledge-base, …) inside styles.min.css (not editable: critical-CSS hash). Portal pages carry body.sdk-portal-page, so the same declarations are repeated here. */ body.sdk-portal-page { background: #fff; } .sdk-portal-page::-webkit-scrollbar-track { background: #fff; } .sdk-portal-page::-webkit-scrollbar-thumb { background-color: #3d3d4a; border-radius: 20px; border: 3px solid #fff; } .sdk-portal-page .sdk-header-light { background: #f9fafc; border: none; } .sdk-portal-page .sdk-header-light .sdk-container { max-width: 100%; } .sdk-portal-page .sdk-logo svg, .sdk-portal-page .sdk-footer-logo svg { display: block; fill: #1b55e9; max-width: 96px; } .sdk-portal-page .sdk-logo svg path, .sdk-portal-page .sdk-footer-logo svg path { fill: #1b55e9; } /* The header is position: fixed (62px): same top padding as the theme's .main-content on documentation pages. */ /* The site header is fixed (62px, always visible): sticky blocks and anchor jumps stop 24px below it, not under it (owner 06.11). */ .sdk-portal { --sdk-portal-offset: 86px; padding: 20px 0 40px; transition: 0s; } .sdk-portal .container { max-width: 1258px; margin: 0 auto; width: 100%; } .sdk-portal .container-breadcrumbs .container-flex { align-items: center; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; width: 100%; } .sdk-portal .breadcrumbs { padding: 16px 0; margin: 0; flex: 1 1 auto; width: auto; } .sdk-portal .container-breadcrumbs .search-container { margin: 0; padding: 0 0 16px; } .sdk-portal .container, .sdk-portal .container-breadcrumbs { padding-left: 16px; padding-right: 16px; } .sdk-portal-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; padding-bottom: 80px; } /* Search pages: the theme's .search-results .container {flex-wrap: wrap; padding: 0 25px} (2 classes) must not win. */ .sdk-portal .container.sdk-portal-layout { padding-bottom: 80px; } .sdk-portal-main { flex: 1 1 auto; min-width: 0; width: 100%; } /* Header of the article */ .sdk-portal-header { margin: 0 0 24px; } .sdk-portal-title { font: 600 32px/40px Montserrat, sans-serif; color: #10233a; margin: 0 0 8px; letter-spacing: -0.2px; } .sdk-portal--search .sdk-portal-header .search-container { margin-top: 16px; max-width: 520px; } /* Sidebar tree */ .sdk-portal-sidebar-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; background: #1b55e9; color: #fff; border: 0; border-radius: 8px; cursor: pointer; font: 600 14px/20px Montserrat, sans-serif; letter-spacing: 0.4px; padding: 11px 18px; width: 100%; justify-content: center; } .sdk-portal-sidebar-toggle::after { content: ''; width: 8px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; } .sdk-portal-sidebar-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; } .sdk-portal-sidebar { display: none; width: 100%; background: #fff; border: 1px solid #e6e8ef; border-radius: 12px; padding: 12px; margin: 0 0 24px; } .sdk-portal-sidebar.is-open { display: block; } /* Tree after the reference (help.crassula.io): chevron button or a dot in a 20px slot, the title next to it, the whole row is the link, 4px between rows, 20px indent per level, grey rounded "pill" on the current row, no bold ancestors. */ .sdk-portal-tree__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sdk-portal-tree__list .sdk-portal-tree__list { padding-left: 20px; margin-top: 4px; } .sdk-portal-tree__item { margin: 0; padding: 0; } .sdk-portal-tree__item::before { content: none; } .sdk-portal-tree__item:not(.is-open) > .sdk-portal-tree__list { display: none; } .sdk-portal-tree__row { position: relative; display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px; border-radius: 6px; transition: background-color .15s; } .sdk-portal-tree__row:hover { background: #f3f4f8; } .sdk-portal-tree__link { flex: 1 1 auto; min-width: 0; font: 500 15px/22px Montserrat, sans-serif; color: #10233a; text-decoration: none; } .sdk-portal-tree__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* the whole row opens the article */ .sdk-portal-tree__link:hover { color: #10233a; } .sdk-portal-tree__item.is-current > .sdk-portal-tree__row { background: #eff0f4; } .sdk-portal-tree__item.is-current > .sdk-portal-tree__row > .sdk-portal-tree__link { color: #0a2656; font-weight: 600; } .sdk-portal-tree__bullet, .sdk-portal-tree__toggle { flex: 0 0 20px; width: 20px; height: 20px; position: relative; z-index: 1; margin-top: 1px; } /* centred on the 22px first line */ .sdk-portal-tree__bullet::before { content: ''; position: absolute; left: 8.5px; top: 8.5px; width: 3px; height: 3px; border-radius: 50%; background: #10233a; } .sdk-portal-tree__toggle { margin: 1px 0 0; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: background-color .15s; } .sdk-portal-tree__toggle::before { content: ''; position: absolute; inset: -6px; } /* 32px touch target */ .sdk-portal-tree__toggle::after { content: ''; position: absolute; inset: 0; background: currentColor; color: #10233a; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; transition: transform .15s; } .sdk-portal-tree__toggle[aria-expanded="true"]::after { transform: rotate(90deg); } .sdk-portal-tree__toggle:hover, .sdk-portal-tree__toggle:focus-visible { background: #e4e6ee; } .sdk-portal-tree__toggle:focus-visible { outline: 2px solid #1b55e9; outline-offset: 1px; } /* On this page */ /* * "On this page" - between the reference (help.crassula.io: card, full-width rows, the current row on a light fill with a * marker at the left edge) and the blog's "Navigate through article" (light-blue card #f0f7fd, dark 16px items, the current * one blue) - owner 06.11. Items change colour/fill only, never weight, so the text does not reflow while scrolling. */ .sdk-portal-toc__inner { background: #f0f7fd; border-radius: 12px; padding: 16px 0 10px; } .sdk-portal-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: none; } .sdk-portal-toc__item { margin: 0; padding: 0; } .sdk-portal-toc__item::before { content: none; } .sdk-portal-toc__item a { position: relative; display: block; font: 500 14px/20px Montserrat, sans-serif; color: #10233a; text-decoration: none; padding: 7px 16px; transition: color .15s, background-color .15s; } .sdk-portal-toc__item a::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background-color .15s; } .sdk-portal-toc__item.is-level-3 a { padding-left: 30px; font-size: 13px; line-height: 18px; font-weight: 400; color: #44546a; } .sdk-portal-toc__item a:hover { color: #1b55e9; background: rgba(255, 255, 255, .55); } .sdk-portal-toc__item.is-active > a { color: #1b55e9; background: #fff; } .sdk-portal-toc__item.is-active > a::before { background: #1b55e9; } .sdk-portal-toc--aside { display: none; } /* Narrow screens: the same card, collapsible, above the text */ .sdk-portal-toc--inline { background: #f0f7fd; border: 0; border-radius: 12px; padding: 0; margin: 0 0 28px; } .sdk-portal-toc--inline summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; padding: 14px 16px; font: 600 16px/24px Montserrat, sans-serif; color: #10233a; cursor: pointer; } .sdk-portal-toc--inline summary::-webkit-details-marker { display: none; } .sdk-portal-toc--inline summary::after { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border: solid #10233a; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; } .sdk-portal-toc--inline[open] summary::after { transform: rotate(-135deg); margin-top: 4px; } .sdk-portal-toc--inline .sdk-portal-toc__list { margin: -4px 0 0; padding-bottom: 10px; } /* Previous / next */ .sdk-portal-pager { display: flex; flex-wrap: wrap; gap: 16px; margin: 48px 0 0; } .sdk-portal-pager__link { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #d3e1ec; border-radius: 8px; padding: 14px 18px; text-decoration: none; color: #10233a; min-width: 0; } .sdk-portal-pager__link:hover { border-color: #1b55e9; } .sdk-portal-pager__link--next { text-align: right; margin-left: auto; } .sdk-portal-pager__label { font: 400 12px/16px Montserrat, sans-serif; color: #5b6b80; text-transform: uppercase; letter-spacing: 0.6px; } .sdk-portal-pager__title { font: 600 14px/20px Montserrat, sans-serif; color: #1b55e9; } /* Search results */ .sdk-portal-results__count { font: 400 14px/20px Montserrat, sans-serif; color: #5b6b80; margin: 0 0 24px; } .sdk-portal-result { padding: 0 0 20px; } .sdk-portal-result__title { font: 600 16px/24px Montserrat, sans-serif; color: #10233a; } .sdk-portal-result__title:hover { color: #1b55e9; } .sdk-portal-result__path { display: block; font: 400 13px/18px Montserrat, sans-serif; color: #5b6b80; margin-top: 2px; } @media (min-width: 768px) { .sdk-portal { padding-top: 60px; } .sdk-portal-title { font-size: 40px; line-height: 48px; } .sdk-portal .breadcrumbs { padding: 30px 0 24px; } .sdk-portal .container-breadcrumbs .search-container { padding: 22px 0 16px; } .sdk-portal .container, .sdk-portal .container-breadcrumbs { padding-left: 25px; padding-right: 25px; } } @media (min-width: 992px) { .sdk-portal-page .sdk-header-light { background: #fff; border-bottom: 1px solid #e4e5ff; } .sdk-portal-layout, .sdk-portal .container.sdk-portal-layout { flex-wrap: nowrap; } .sdk-portal-sidebar-toggle { display: none; } .sdk-portal-sidebar { display: block; flex: 0 0 256px; width: 256px; margin: 0; align-self: stretch; /* Full height, no own scrollbar (owner 06.11): the tree scrolls with the page; stretch keeps the divider down to the footer. */ border: 0; border-right: 1px solid #e6e8ef; border-radius: 0; padding: 0 16px 24px 0; } } @media (min-width: 1200px) { .sdk-portal-layout { gap: 32px; } .sdk-portal-sidebar { flex-basis: 272px; width: 272px; } .sdk-portal-toc--inline { display: none; } .sdk-portal-toc--aside { display: block; flex: 0 0 224px; width: 224px; position: sticky; top: var(--sdk-portal-offset); max-height: calc(100vh - var(--sdk-portal-offset) - 24px); overflow-y: auto; } .sdk-portal-toc__title { font: 600 16px/24px Montserrat, sans-serif; color: #10233a; margin: 0 0 8px; padding: 0 16px; } /* Article column is always the editor width (648px), also when there is no "On this page" (fewer than 2 headings). */ .sdk-portal-main { max-width: 648px; } .sdk-portal--search .sdk-portal-main { max-width: 760px; } } @media print { .sdk-portal-sidebar, .sdk-portal-sidebar-toggle, .sdk-portal-toc, .sdk-portal-pager, .sdk-portal .search-container { display: none !important; } /* The fixed 62px site header repeated on every printed page and covered the first lines; the footer added pages. */ .sdk-portal-page .sdk-header, .sdk-portal-page .sdk-mobile-nav, .sdk-portal-page .sdk-footer { display: none !important; } .sdk-portal { padding-top: 0 !important; } } /* * Lightbox on portal pages (owner 06.11). The theme blurs .page-wrapper while Fancybox is open * (body.fancybox-active .page-wrapper {filter: blur(15px)}). A filter on an ancestor turns it into the containing block of * fixed elements, so the fixed site header (inside .page-wrapper) jumped off the screen on open and back on close; the * class also stays until the closing animation ends, so the blur snapped off. Here the parts are blurred one by one (a filter * on the header itself does not move it) and fade in and out with the backdrop. */ body.sdk-portal-page.fancybox-active .page-wrapper { filter: none; } body.sdk-portal-page .page-wrapper > :is(.sdk-header, .sdk-portal, .sdk-footer) { transition: filter .366s ease; } body.sdk-portal-page.fancybox-active .page-wrapper > :is(.sdk-header, .sdk-portal, .sdk-footer) { filter: blur(15px); } body.sdk-portal-page:has(.fancybox-is-closing) .page-wrapper > :is(.sdk-header, .sdk-portal, .sdk-footer) { filter: none; } /* header-sdk.php sets `.fancybox-container * {transition: 0s}` site-wide, so the dark backdrop vanished at once: fade it here. */ body.sdk-portal-page .fancybox-container .fancybox-bg { transition: opacity .366s ease; } /* * Fancybox hides the scrollbar: the fixed header got 12-17px wider and its right part moved. The gutter stays reserved * instead, so nothing changes width; Fancybox's own body margin compensation is then not needed. */ html:has(> body.sdk-portal-page) { scrollbar-gutter: stable; } body.sdk-portal-page.compensate-for-scrollbar { margin-right: 0 !important; }