/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Common */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ :root { --ifm-color-scheme: light; /* Colors. */ --ifm-dark-value: 10%; --ifm-darker-value: 15%; --ifm-darkest-value: 30%; --ifm-light-value: 15%; --ifm-lighter-value: 30%; --ifm-lightest-value: 50%; /* This seems like a lot, but we want to ensure enough contrast. Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts) See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075 */ --ifm-contrast-background-value: 90%; --ifm-contrast-foreground-value: 70%; /* Using slightly different values for dark mode */ --ifm-contrast-background-dark-value: 70%; --ifm-contrast-foreground-dark-value: 90%; --ifm-color-primary: #3578e5; --ifm-color-secondary: #ebedf0; --ifm-color-success: #00a400; --ifm-color-info: #54c7ec; --ifm-color-warning: #ffba00; --ifm-color-danger: #fa383e; --ifm-color-primary-dark: rgb(48, 108, 206); --ifm-color-primary-darker: rgb(45, 102, 195); --ifm-color-primary-darkest: rgb(37, 84, 160); --ifm-color-primary-light: rgb(83, 140, 233); --ifm-color-primary-lighter: rgb(114, 161, 237); --ifm-color-primary-lightest: rgb(154, 188, 242); --ifm-color-primary-contrast-background: rgb(235, 242, 252); --ifm-color-primary-contrast-foreground: rgb(16, 36, 69); --ifm-color-secondary-dark: rgb(212, 213, 216); --ifm-color-secondary-darker: rgb(200, 201, 204); --ifm-color-secondary-darkest: rgb(164, 166, 168); --ifm-color-secondary-light: rgb(238, 240, 242); --ifm-color-secondary-lighter: rgb(241, 242, 245); --ifm-color-secondary-lightest: rgb(245, 246, 248); --ifm-color-secondary-contrast-background: rgb(253, 253, 254); --ifm-color-secondary-contrast-foreground: rgb(71, 71, 72); --ifm-color-success-dark: rgb(0, 148, 0); --ifm-color-success-darker: rgb(0, 139, 0); --ifm-color-success-darkest: rgb(0, 115, 0); --ifm-color-success-light: rgb(38, 178, 38); --ifm-color-success-lighter: rgb(77, 191, 77); --ifm-color-success-lightest: rgb(128, 210, 128); --ifm-color-success-contrast-background: rgb(230, 246, 230); --ifm-color-success-contrast-foreground: rgb(0, 49, 0); --ifm-color-info-dark: rgb(76, 179, 212); --ifm-color-info-darker: rgb(71, 169, 201); --ifm-color-info-darkest: rgb(59, 139, 165); --ifm-color-info-light: rgb(110, 207, 239); --ifm-color-info-lighter: rgb(135, 216, 242); --ifm-color-info-lightest: rgb(170, 227, 246); --ifm-color-info-contrast-background: rgb(238, 249, 253); --ifm-color-info-contrast-foreground: rgb(25, 60, 71); --ifm-color-warning-dark: rgb(230, 167, 0); --ifm-color-warning-darker: rgb(217, 158, 0); --ifm-color-warning-darkest: rgb(179, 130, 0); --ifm-color-warning-light: rgb(255, 196, 38); --ifm-color-warning-lighter: rgb(255, 207, 77); --ifm-color-warning-lightest: rgb(255, 221, 128); --ifm-color-warning-contrast-background: rgb(255, 248, 230); --ifm-color-warning-contrast-foreground: rgb(77, 56, 0); --ifm-color-danger-dark: rgb(225, 50, 56); --ifm-color-danger-darker: rgb(213, 48, 53); --ifm-color-danger-darkest: rgb(175, 39, 43); --ifm-color-danger-light: rgb(251, 86, 91); --ifm-color-danger-lighter: rgb(251, 116, 120); --ifm-color-danger-lightest: rgb(253, 156, 159); --ifm-color-danger-contrast-background: rgb(255, 235, 236); --ifm-color-danger-contrast-foreground: rgb(75, 17, 19); --ifm-color-white: #fff; --ifm-color-black: #000; --ifm-color-gray-0: var(--ifm-color-white); --ifm-color-gray-100: #f5f6f7; --ifm-color-gray-200: #ebedf0; --ifm-color-gray-300: #dadde1; --ifm-color-gray-400: #ccd0d5; --ifm-color-gray-500: #bec3c9; --ifm-color-gray-600: #8d949e; --ifm-color-gray-700: #606770; --ifm-color-gray-800: #444950; --ifm-color-gray-900: #1c1e21; --ifm-color-gray-1000: var(--ifm-color-black); --ifm-color-emphasis-0: var(--ifm-color-gray-0); --ifm-color-emphasis-100: var(--ifm-color-gray-100); --ifm-color-emphasis-200: var(--ifm-color-gray-200); --ifm-color-emphasis-300: var(--ifm-color-gray-300); --ifm-color-emphasis-400: var(--ifm-color-gray-400); --ifm-color-emphasis-500: var(--ifm-color-gray-500); --ifm-color-emphasis-600: var(--ifm-color-gray-600); --ifm-color-emphasis-700: var(--ifm-color-gray-700); --ifm-color-emphasis-800: var(--ifm-color-gray-800); --ifm-color-emphasis-900: var(--ifm-color-gray-900); --ifm-color-emphasis-1000: var(--ifm-color-gray-1000); /* Base. */ --ifm-color-content: var(--ifm-color-emphasis-900); --ifm-color-content-inverse: var(--ifm-color-emphasis-0); --ifm-color-content-secondary: #525860; --ifm-background-color: transparent; /* Body's background. */ --ifm-background-surface-color: var(--ifm-color-content-inverse); --ifm-global-border-width: 1px; --ifm-global-radius: 0.4rem; --ifm-hover-overlay: rgba(0, 0, 0, 0.05); /* Typography. */ --ifm-font-color-base: var(--ifm-color-content); --ifm-font-color-base-inverse: var(--ifm-color-content-inverse); --ifm-font-color-secondary: var(--ifm-color-content-secondary); --ifm-font-family-base: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --ifm-font-size-base: 100%; --ifm-font-weight-light: 300; --ifm-font-weight-normal: 400; --ifm-font-weight-semibold: 500; --ifm-font-weight-bold: 700; --ifm-font-weight-base: var(--ifm-font-weight-normal); --ifm-line-height-base: 1.65; /* Spacing. */ --ifm-global-spacing: 1rem; --ifm-spacing-vertical: var(--ifm-global-spacing); --ifm-spacing-horizontal: var(--ifm-global-spacing); /* Transitions. */ --ifm-transition-fast: 200ms; --ifm-transition-slow: 400ms; --ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1); /* Shadows. */ --ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1); --ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2); --ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1); /* Z-index. */ --ifm-z-index-dropdown: 100; --ifm-z-index-fixed: 200; --ifm-z-index-overlay: 400; --ifm-container-width: 1140px; --ifm-container-width-xl: 1320px; --ifm-code-background: rgb(246, 247, 248); --ifm-code-border-radius: var(--ifm-global-radius); --ifm-code-font-size: 90%; --ifm-code-padding-horizontal: 0.1rem; --ifm-code-padding-vertical: 0.1rem; --ifm-pre-background: var(--ifm-code-background); --ifm-pre-border-radius: var(--ifm-code-border-radius); --ifm-pre-color: inherit; --ifm-pre-line-height: 1.45; --ifm-pre-padding: 1rem; --ifm-heading-color: inherit; --ifm-heading-margin-top: 0; --ifm-heading-margin-bottom: var(--ifm-spacing-vertical); --ifm-heading-font-family: var(--ifm-font-family-base); --ifm-heading-font-weight: var(--ifm-font-weight-bold); --ifm-heading-line-height: 1.25; --ifm-h1-font-size: 2rem; --ifm-h2-font-size: 1.5rem; --ifm-h3-font-size: 1.25rem; --ifm-h4-font-size: 1rem; --ifm-h5-font-size: 0.875rem; --ifm-h6-font-size: 0.85rem; --ifm-image-alignment-padding: 1.25rem; /* Leading is the distance between two baselines */ /* TODO: add appropriate mobile leading */ --ifm-leading-desktop: 1.25; --ifm-leading: calc(var(--ifm-leading-desktop) * 1rem); --ifm-list-left-padding: 2rem; --ifm-list-margin: 1rem; --ifm-list-item-margin: 0.25rem; --ifm-list-paragraph-margin: 1rem; --ifm-table-cell-padding: 0.75rem; --ifm-table-background: transparent; --ifm-table-stripe-background: rgba(0, 0, 0, 0.03); --ifm-table-border-width: 1px; --ifm-table-border-color: var(--ifm-color-emphasis-300); --ifm-table-head-background: inherit; --ifm-table-head-color: inherit; --ifm-table-head-font-weight: var(--ifm-font-weight-bold); --ifm-table-cell-color: inherit; /* Links. */ --ifm-link-color: var(--ifm-color-primary); --ifm-link-decoration: none; --ifm-link-hover-color: var(--ifm-link-color); --ifm-link-hover-decoration: underline; /* Paragraphs. */ --ifm-paragraph-margin-bottom: var(--ifm-leading); /* Blockquotes. */ --ifm-blockquote-font-size: var(--ifm-font-size-base); --ifm-blockquote-border-left-width: 2px; --ifm-blockquote-padding-horizontal: var(--ifm-spacing-horizontal); --ifm-blockquote-padding-vertical: 0; --ifm-blockquote-shadow: none; --ifm-blockquote-color: var(--ifm-color-emphasis-800); --ifm-blockquote-border-color: var(--ifm-color-emphasis-300); /* Horizontal Rules. */ --ifm-hr-background-color: var(--ifm-color-emphasis-500); --ifm-hr-height: 1px; --ifm-hr-margin-vertical: 1.5rem; --ifm-scrollbar-size: 7px; --ifm-scrollbar-track-background-color: #f1f1f1; --ifm-scrollbar-thumb-background-color: #c0c0c0; --ifm-scrollbar-thumb-hover-background-color: #a7a7a7; --ifm-alert-background-color: inherit; /* Set a default which will be overridden later. */ --ifm-alert-border-color: inherit; /* Set a default which will be overridden later. */ --ifm-alert-border-radius: var(--ifm-global-radius); --ifm-alert-border-width: 0px; /* For users that want to easily add a border */ --ifm-alert-border-left-width: 5px; --ifm-alert-color: var(--ifm-font-color-base); --ifm-alert-padding-horizontal: var(--ifm-spacing-horizontal); --ifm-alert-padding-vertical: var(--ifm-spacing-vertical); --ifm-alert-shadow: var(--ifm-global-shadow-lw); --ifm-avatar-intro-margin: 1rem; --ifm-avatar-intro-alignment: inherit; --ifm-avatar-photo-size: 3rem; --ifm-badge-background-color: inherit; /* Set a default which will be overridden later. */ --ifm-badge-border-color: inherit; /* Set a default which will be overridden later. */ --ifm-badge-border-radius: var(--ifm-global-radius); --ifm-badge-border-width: var(--ifm-global-border-width); --ifm-badge-color: var(--ifm-color-white); --ifm-badge-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 0.5); --ifm-badge-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25); --ifm-breadcrumb-border-radius: 1.5rem; --ifm-breadcrumb-spacing: 0.5rem; --ifm-breadcrumb-color-active: var(--ifm-color-primary); --ifm-breadcrumb-item-background-active: var(--ifm-hover-overlay); --ifm-breadcrumb-padding-horizontal: 0.8rem; --ifm-breadcrumb-padding-vertical: 0.4rem; --ifm-breadcrumb-size-multiplier: 1; --ifm-breadcrumb-separator: url('data:image/svg+xml;utf8,'); --ifm-breadcrumb-separator-filter: none; --ifm-breadcrumb-separator-size: 0.5rem; --ifm-breadcrumb-separator-size-multiplier: 1.25; --ifm-button-background-color: inherit; --ifm-button-border-color: var(--ifm-button-background-color); --ifm-button-border-width: var(--ifm-global-border-width); --ifm-button-color: var(--ifm-font-color-base-inverse); --ifm-button-font-weight: var(--ifm-font-weight-bold); --ifm-button-padding-horizontal: 1.5rem; --ifm-button-padding-vertical: 0.375rem; --ifm-button-size-multiplier: 1; --ifm-button-transition-duration: var(--ifm-transition-fast); --ifm-button-border-radius: calc( var(--ifm-global-radius) * var(--ifm-button-size-multiplier) ); --ifm-button-group-spacing: 2px; --ifm-card-background-color: var(--ifm-background-surface-color); --ifm-card-border-radius: calc(var(--ifm-global-radius) * 2); --ifm-card-horizontal-spacing: var(--ifm-global-spacing); --ifm-card-vertical-spacing: var(--ifm-global-spacing); --ifm-toc-border-color: var(--ifm-color-emphasis-300); --ifm-toc-link-color: var(--ifm-color-content-secondary); --ifm-toc-padding-vertical: 0.5rem; --ifm-toc-padding-horizontal: 0.5rem; --ifm-dropdown-background-color: var(--ifm-background-surface-color); --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold); --ifm-dropdown-link-color: var(--ifm-font-color-base); --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay); --ifm-footer-background-color: var(--ifm-color-emphasis-100); --ifm-footer-color: inherit; --ifm-footer-link-color: var(--ifm-color-emphasis-700); --ifm-footer-link-hover-color: var(--ifm-color-primary); --ifm-footer-link-horizontal-spacing: 0.5rem; --ifm-footer-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 2); --ifm-footer-padding-vertical: calc(var(--ifm-spacing-vertical) * 2); --ifm-footer-title-color: inherit; --ifm-footer-logo-max-width: min(30rem, 90vw); --ifm-hero-background-color: var(--ifm-background-surface-color); --ifm-hero-text-color: var(--ifm-color-emphasis-800); --ifm-menu-color: var(--ifm-color-emphasis-700); --ifm-menu-color-active: var(--ifm-color-primary); --ifm-menu-color-background-active: var(--ifm-hover-overlay); --ifm-menu-color-background-hover: var(--ifm-hover-overlay); --ifm-menu-link-padding-horizontal: 0.75rem; --ifm-menu-link-padding-vertical: 0.375rem; --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); --ifm-menu-link-sublist-icon-filter: none; --ifm-navbar-background-color: var(--ifm-background-surface-color); --ifm-navbar-height: 3.75rem; --ifm-navbar-item-padding-horizontal: 0.75rem; --ifm-navbar-item-padding-vertical: 0.25rem; --ifm-navbar-link-color: var(--ifm-font-color-base); --ifm-navbar-link-hover-color: var(--ifm-color-primary); --ifm-navbar-link-active-color: var(--ifm-link-color); --ifm-navbar-padding-horizontal: var(--ifm-spacing-horizontal); --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5); --ifm-navbar-shadow: var(--ifm-global-shadow-lw); --ifm-navbar-search-input-background-color: var(--ifm-color-emphasis-200); --ifm-navbar-search-input-color: var(--ifm-color-emphasis-800); --ifm-navbar-search-input-placeholder-color: var(--ifm-color-emphasis-500); --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,'); --ifm-navbar-sidebar-width: 83vw; --ifm-pagination-border-radius: var(--ifm-global-radius); --ifm-pagination-color-active: var(--ifm-color-primary); --ifm-pagination-font-size: 1rem; --ifm-pagination-item-active-background: var(--ifm-hover-overlay); --ifm-pagination-page-spacing: 0.2em; --ifm-pagination-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1); --ifm-pagination-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.25); --ifm-pagination-nav-border-radius: var(--ifm-global-radius); --ifm-pagination-nav-color-hover: var(--ifm-color-primary); --ifm-pills-color-active: var(--ifm-color-primary); --ifm-pills-color-background-active: var(--ifm-hover-overlay); --ifm-pills-spacing: 0.125rem; --ifm-tabs-color: var(--ifm-font-color-secondary); --ifm-tabs-color-active: var(--ifm-color-primary); --ifm-tabs-color-active-border: var(--ifm-tabs-color-active); --ifm-tabs-padding-horizontal: 1rem; --ifm-tabs-padding-vertical: 1rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ * { box-sizing: border-box; } html { background-color: var(--ifm-background-color); color: var(--ifm-font-color-base); color-scheme: var(--ifm-color-scheme); font: var(--ifm-font-size-base) / var(--ifm-line-height-base) var(--ifm-font-family-base); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-rendering: optimizelegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; word-wrap: break-word; } iframe { border: 0; color-scheme: auto; } /* Layout */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .container { margin: 0 auto; max-width: var(--ifm-container-width); padding: 0 var(--ifm-spacing-horizontal); width: 100%; } .container--fluid { max-width: inherit; } .row { display: flex; flex-wrap: wrap; margin: 0 calc(var(--ifm-spacing-horizontal) * -1); } .row--no-gutters { margin-left: 0; margin-right: 0; } .row--no-gutters > .col { padding-left: 0; padding-right: 0; } .row--align-top { align-items: flex-start; } .row--align-bottom { align-items: flex-end; } .row--align-center { align-items: center; } .row--align-stretch { align-items: stretch; } .row--align-baseline { align-items: baseline; } .col { --ifm-col-width: 100%; flex: 1 0; margin-left: 0; max-width: var(--ifm-col-width); padding: 0 var(--ifm-spacing-horizontal); width: 100%; } .col[class*='col--'] { flex: 0 0 var(--ifm-col-width); } .col--1 { --ifm-col-width: calc(1 / 12 * 100%); } .col--offset-1 { margin-left: calc(1 / 12 * 100%); } .col--2 { --ifm-col-width: calc(2 / 12 * 100%); } .col--offset-2 { margin-left: calc(2 / 12 * 100%); } .col--3 { --ifm-col-width: calc(3 / 12 * 100%); } .col--offset-3 { margin-left: calc(3 / 12 * 100%); } .col--4 { --ifm-col-width: calc(4 / 12 * 100%); } .col--offset-4 { margin-left: calc(4 / 12 * 100%); } .col--5 { --ifm-col-width: calc(5 / 12 * 100%); } .col--offset-5 { margin-left: calc(5 / 12 * 100%); } .col--6 { --ifm-col-width: calc(6 / 12 * 100%); } .col--offset-6 { margin-left: calc(6 / 12 * 100%); } .col--7 { --ifm-col-width: calc(7 / 12 * 100%); } .col--offset-7 { margin-left: calc(7 / 12 * 100%); } .col--8 { --ifm-col-width: calc(8 / 12 * 100%); } .col--offset-8 { margin-left: calc(8 / 12 * 100%); } .col--9 { --ifm-col-width: calc(9 / 12 * 100%); } .col--offset-9 { margin-left: calc(9 / 12 * 100%); } .col--10 { --ifm-col-width: calc(10 / 12 * 100%); } .col--offset-10 { margin-left: calc(10 / 12 * 100%); } .col--11 { --ifm-col-width: calc(11 / 12 * 100%); } .col--offset-11 { margin-left: calc(11 / 12 * 100%); } .col--12 { --ifm-col-width: calc(12 / 12 * 100%); } .col--offset-12 { margin-left: calc(12 / 12 * 100%); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .margin--none { margin: 0 !important; } .margin-top--none { margin-top: 0 !important; } .margin-left--none { margin-left: 0 !important; } .margin-bottom--none { margin-bottom: 0 !important; } .margin-right--none { margin-right: 0 !important; } .margin-vert--none { margin-bottom: 0 !important; margin-top: 0 !important; } .margin-horiz--none { margin-left: 0 !important; margin-right: 0 !important; } .margin--xs { margin: 0.25rem !important; } .margin-top--xs { margin-top: 0.25rem !important; } .margin-left--xs { margin-left: 0.25rem !important; } .margin-bottom--xs { margin-bottom: 0.25rem !important; } .margin-right--xs { margin-right: 0.25rem !important; } .margin-vert--xs { margin-bottom: 0.25rem !important; margin-top: 0.25rem !important; } .margin-horiz--xs { margin-left: 0.25rem !important; margin-right: 0.25rem !important; } .margin--sm { margin: 0.5rem !important; } .margin-top--sm { margin-top: 0.5rem !important; } .margin-left--sm { margin-left: 0.5rem !important; } .margin-bottom--sm { margin-bottom: 0.5rem !important; } .margin-right--sm { margin-right: 0.5rem !important; } .margin-vert--sm { margin-bottom: 0.5rem !important; margin-top: 0.5rem !important; } .margin-horiz--sm { margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .margin--md { margin: 1rem !important; } .margin-top--md { margin-top: 1rem !important; } .margin-left--md { margin-left: 1rem !important; } .margin-bottom--md { margin-bottom: 1rem !important; } .margin-right--md { margin-right: 1rem !important; } .margin-vert--md { margin-bottom: 1rem !important; margin-top: 1rem !important; } .margin-horiz--md { margin-left: 1rem !important; margin-right: 1rem !important; } .margin--lg { margin: 2rem !important; } .margin-top--lg { margin-top: 2rem !important; } .margin-left--lg { margin-left: 2rem !important; } .margin-bottom--lg { margin-bottom: 2rem !important; } .margin-right--lg { margin-right: 2rem !important; } .margin-vert--lg { margin-bottom: 2rem !important; margin-top: 2rem !important; } .margin-horiz--lg { margin-left: 2rem !important; margin-right: 2rem !important; } .margin--xl { margin: 5rem !important; } .margin-top--xl { margin-top: 5rem !important; } .margin-left--xl { margin-left: 5rem !important; } .margin-bottom--xl { margin-bottom: 5rem !important; } .margin-right--xl { margin-right: 5rem !important; } .margin-vert--xl { margin-bottom: 5rem !important; margin-top: 5rem !important; } .margin-horiz--xl { margin-left: 5rem !important; margin-right: 5rem !important; } .padding--none { padding: 0 !important; } .padding-top--none { padding-top: 0 !important; } .padding-left--none { padding-left: 0 !important; } .padding-bottom--none { padding-bottom: 0 !important; } .padding-right--none { padding-right: 0 !important; } .padding-vert--none { padding-bottom: 0 !important; padding-top: 0 !important; } .padding-horiz--none { padding-left: 0 !important; padding-right: 0 !important; } .padding--xs { padding: 0.25rem !important; } .padding-top--xs { padding-top: 0.25rem !important; } .padding-left--xs { padding-left: 0.25rem !important; } .padding-bottom--xs { padding-bottom: 0.25rem !important; } .padding-right--xs { padding-right: 0.25rem !important; } .padding-vert--xs { padding-bottom: 0.25rem !important; padding-top: 0.25rem !important; } .padding-horiz--xs { padding-left: 0.25rem !important; padding-right: 0.25rem !important; } .padding--sm { padding: 0.5rem !important; } .padding-top--sm { padding-top: 0.5rem !important; } .padding-left--sm { padding-left: 0.5rem !important; } .padding-bottom--sm { padding-bottom: 0.5rem !important; } .padding-right--sm { padding-right: 0.5rem !important; } .padding-vert--sm { padding-bottom: 0.5rem !important; padding-top: 0.5rem !important; } .padding-horiz--sm { padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .padding--md { padding: 1rem !important; } .padding-top--md { padding-top: 1rem !important; } .padding-left--md { padding-left: 1rem !important; } .padding-bottom--md { padding-bottom: 1rem !important; } .padding-right--md { padding-right: 1rem !important; } .padding-vert--md { padding-bottom: 1rem !important; padding-top: 1rem !important; } .padding-horiz--md { padding-left: 1rem !important; padding-right: 1rem !important; } .padding--lg { padding: 2rem !important; } .padding-top--lg { padding-top: 2rem !important; } .padding-left--lg { padding-left: 2rem !important; } .padding-bottom--lg { padding-bottom: 2rem !important; } .padding-right--lg { padding-right: 2rem !important; } .padding-vert--lg { padding-bottom: 2rem !important; padding-top: 2rem !important; } .padding-horiz--lg { padding-left: 2rem !important; padding-right: 2rem !important; } .padding--xl { padding: 5rem !important; } .padding-top--xl { padding-top: 5rem !important; } .padding-left--xl { padding-left: 5rem !important; } .padding-bottom--xl { padding-bottom: 5rem !important; } .padding-right--xl { padding-right: 5rem !important; } .padding-vert--xl { padding-bottom: 5rem !important; padding-top: 5rem !important; } .padding-horiz--xl { padding-left: 5rem !important; padding-right: 5rem !important; } /* Content */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ code { background-color: var(--ifm-code-background); border: 0.1rem solid rgba(0, 0, 0, 0.1); border-radius: var(--ifm-code-border-radius); font-family: var(--ifm-font-family-monospace); font-size: var(--ifm-code-font-size); padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal); vertical-align: middle; } a code { color: inherit; } pre { background-color: var(--ifm-pre-background); border-radius: var(--ifm-pre-border-radius); color: var(--ifm-pre-color); font: var(--ifm-code-font-size) / var(--ifm-pre-line-height) var(--ifm-font-family-monospace); margin: 0 0 var(--ifm-spacing-vertical); overflow: auto; padding: var(--ifm-pre-padding); } pre code { background-color: transparent; border: none; font-size: 100%; line-height: inherit; padding: 0; } kbd { background-color: var(--ifm-color-emphasis-0); border: 1px solid var(--ifm-color-emphasis-400); border-radius: 0.2rem; box-shadow: inset 0 -1px 0 var(--ifm-color-emphasis-400); color: var(--ifm-color-emphasis-800); font: 80% var(--ifm-font-family-monospace); padding: 0.15rem 0.3rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ h1, h2, h3, h4, h5, h6 { color: var(--ifm-heading-color); font-family: var(--ifm-heading-font-family); font-weight: var(--ifm-heading-font-weight); line-height: var(--ifm-heading-line-height); margin: var(--ifm-heading-margin-top) 0 var(--ifm-heading-margin-bottom) 0; } h1 { font-size: var(--ifm-h1-font-size); } h2 { font-size: var(--ifm-h2-font-size); } h3 { font-size: var(--ifm-h3-font-size); } h4 { font-size: var(--ifm-h4-font-size); } h5 { font-size: var(--ifm-h5-font-size); } h6 { font-size: var(--ifm-h6-font-size); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ img { max-width: 100%; } img[align='right'] { padding-left: var(--image-alignment-padding); } img[align='left'] { padding-right: var(--image-alignment-padding); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .markdown { --ifm-h1-vertical-rhythm-top: 3; --ifm-h2-vertical-rhythm-top: 2; --ifm-h3-vertical-rhythm-top: 1.5; --ifm-heading-vertical-rhythm-top: 1.25; --ifm-h1-vertical-rhythm-bottom: 1.25; --ifm-heading-vertical-rhythm-bottom: 1; } .markdown:before { content: ''; display: table; } .markdown:after { clear: both; content: ''; display: table; } .markdown > *:last-child { margin-bottom: 0 !important; } .markdown h1:first-child { --ifm-h1-font-size: 3rem; margin-bottom: calc( var(--ifm-h1-vertical-rhythm-bottom) * var(--ifm-leading) ); } .markdown > h2 { --ifm-h2-font-size: 2rem; margin-bottom: calc( var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading) ); margin-top: calc(var(--ifm-h2-vertical-rhythm-top) * var(--ifm-leading)); } .markdown > h3 { --ifm-h3-font-size: 1.5rem; margin-bottom: calc( var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading) ); margin-top: calc(var(--ifm-h3-vertical-rhythm-top) * var(--ifm-leading)); } .markdown > h4, .markdown > h5, .markdown > h6 { margin-bottom: calc( var(--ifm-heading-vertical-rhythm-bottom) * var(--ifm-leading) ); margin-top: calc( var(--ifm-heading-vertical-rhythm-top) * var(--ifm-leading) ); } /* Consistent spacing between content paragraphs. */ .markdown > pre, .markdown > ul, .markdown > p { margin-bottom: var(--ifm-leading); } .markdown li { word-wrap: break-word; } .markdown li > p { margin-top: var(--ifm-list-paragraph-margin); } .markdown li + li { margin-top: var(--ifm-list-item-margin); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Lists */ ul, ol { margin: 0 0 var(--ifm-list-margin); padding-left: var(--ifm-list-left-padding); } ol ol, ul ol { list-style-type: lower-roman; } ul ul, ul ol, ol ol, ol ul { margin: 0; } ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ table { border-collapse: collapse; display: block; margin-bottom: var(--ifm-spacing-vertical); overflow: auto; } table thead tr { border-bottom: 2px solid var(--ifm-table-border-color); } table thead { background-color: var(--ifm-table-stripe-background); } table tr { background-color: var(--ifm-table-background); border-top: var(--ifm-table-border-width) solid var(--ifm-table-border-color); } table tr:nth-child(2n) { background-color: var(--ifm-table-stripe-background); } table th, table td { border: var(--ifm-table-border-width) solid var(--ifm-table-border-color); padding: var(--ifm-table-cell-padding); } table th { background-color: var(--ifm-table-head-background); color: var(--ifm-table-head-color); font-weight: var(--ifm-table-head-font-weight); } table td { color: var(--ifm-table-cell-color); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ strong { font-weight: var(--ifm-font-weight-bold); } /* Links */ a { color: var(--ifm-link-color); /* autoprefixer: ignore next */ text-decoration: var(--ifm-link-decoration); transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default); } a:hover { color: var(--ifm-link-hover-color); /* autoprefixer: ignore next */ text-decoration: var(--ifm-link-hover-decoration); } a:not([href]) { text-decoration: none; } /* Paragraphs */ p { margin: 0 0 var(--ifm-paragraph-margin-bottom); } /* Blockquotes */ blockquote { border-left: var(--ifm-blockquote-border-left-width) solid var(--ifm-blockquote-border-color); box-shadow: var(--ifm-blockquote-shadow); color: var(--ifm-blockquote-color); font-size: var(--ifm-blockquote-font-size); margin: 0 0 var(--ifm-spacing-vertical); padding: var(--ifm-blockquote-padding-vertical) var(--ifm-blockquote-padding-horizontal); } blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } /* Horizontal Rules */ hr { background-color: var(--ifm-hr-background-color); border: 0; height: var(--ifm-hr-height); margin: var(--ifm-hr-margin-vertical) 0; } /* Utilities */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .shadow--lw { box-shadow: var(--ifm-global-shadow-lw) !important; } .shadow--md { box-shadow: var(--ifm-global-shadow-md) !important; } .shadow--tl { box-shadow: var(--ifm-global-shadow-tl) !important; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .text--primary { color: var(--ifm-color-primary); } .text--secondary { color: var(--ifm-color-secondary); } .text--success { color: var(--ifm-color-success); } .text--info { color: var(--ifm-color-info); } .text--warning { color: var(--ifm-color-warning); } .text--danger { color: var(--ifm-color-danger); } .text--center { text-align: center; } .text--left { text-align: left; } .text--justify { text-align: justify; } .text--right { text-align: right; } .text--capitalize { text-transform: capitalize; } .text--lowercase { text-transform: lowercase; } .text--uppercase { text-transform: uppercase; } .text--light { font-weight: var(--ifm-font-weight-light); } .text--normal { font-weight: var(--ifm-font-weight-normal); } .text--semibold { font-weight: var(--ifm-font-weight-semibold); } .text--bold { font-weight: var(--ifm-font-weight-bold); } .text--italic { font-style: italic; } .text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text--break { word-wrap: break-word !important; word-break: break-word !important; } .text--no-decoration, .text--no-decoration:hover { text-decoration: none; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .clean-btn { background: none; border: none; color: inherit; cursor: pointer; font-family: inherit; padding: 0; } .clean-list { list-style: none; padding-left: 0; } /* Components */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .alert--primary { --ifm-alert-background-color: var( --ifm-color-primary-contrast-background ); --ifm-alert-background-color-highlight: rgba(53, 120, 229, 0.15); --ifm-alert-foreground-color: var( --ifm-color-primary-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-primary-dark); } .alert--secondary { --ifm-alert-background-color: var( --ifm-color-secondary-contrast-background ); --ifm-alert-background-color-highlight: rgba(235, 237, 240, 0.15); --ifm-alert-foreground-color: var( --ifm-color-secondary-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-secondary-dark); } .alert--success { --ifm-alert-background-color: var( --ifm-color-success-contrast-background ); --ifm-alert-background-color-highlight: rgba(0, 164, 0, 0.15); --ifm-alert-foreground-color: var( --ifm-color-success-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-success-dark); } .alert--info { --ifm-alert-background-color: var( --ifm-color-info-contrast-background ); --ifm-alert-background-color-highlight: rgba(84, 199, 236, 0.15); --ifm-alert-foreground-color: var( --ifm-color-info-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-info-dark); } .alert--warning { --ifm-alert-background-color: var( --ifm-color-warning-contrast-background ); --ifm-alert-background-color-highlight: rgba(255, 186, 0, 0.15); --ifm-alert-foreground-color: var( --ifm-color-warning-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-warning-dark); } .alert--danger { --ifm-alert-background-color: var( --ifm-color-danger-contrast-background ); --ifm-alert-background-color-highlight: rgba(250, 56, 62, 0.15); --ifm-alert-foreground-color: var( --ifm-color-danger-contrast-foreground ); --ifm-alert-border-color: var(--ifm-color-danger-dark); } .alert { --ifm-code-background: var(--ifm-alert-background-color-highlight); --ifm-link-color: var(--ifm-alert-foreground-color); --ifm-link-hover-color: var(--ifm-alert-foreground-color); --ifm-link-decoration: underline; --ifm-tabs-color: var(--ifm-alert-foreground-color); --ifm-tabs-color-active: var(--ifm-alert-foreground-color); --ifm-tabs-color-active-border: var(--ifm-alert-border-color); background-color: var(--ifm-alert-background-color); border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color); border-left-width: var(--ifm-alert-border-left-width); border-radius: var(--ifm-alert-border-radius); box-shadow: var(--ifm-alert-shadow); color: var(--ifm-alert-foreground-color); padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal); } .alert__heading { align-items: center; display: flex; font: bold var(--ifm-h5-font-size) / var(--ifm-heading-line-height) var(--ifm-heading-font-family); margin-bottom: 0.5rem; text-transform: uppercase; } .alert__icon { display: inline-flex; margin-right: 0.4em; } .alert__icon svg { fill: var(--ifm-alert-foreground-color); stroke: var(--ifm-alert-foreground-color); stroke-width: 0; } .alert .close { color: var(--ifm-alert-foreground-color); margin: calc(var(--ifm-alert-padding-vertical) * -1) calc(var(--ifm-alert-padding-horizontal) * -1) 0 0; opacity: 0.75; } .alert .close:hover, .alert .close:focus { opacity: 1; } .alert a { text-decoration-color: var(--ifm-alert-border-color); } .alert a:hover { text-decoration-thickness: 2px; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .avatar { column-gap: var(--ifm-avatar-intro-margin); display: flex; } .avatar__photo { border-radius: 50%; display: block; height: var(--ifm-avatar-photo-size); overflow: hidden; width: var(--ifm-avatar-photo-size); } .avatar__photo--sm { --ifm-avatar-photo-size: 2rem; } .avatar__photo--lg { --ifm-avatar-photo-size: 4rem; } .avatar__photo--xl { --ifm-avatar-photo-size: 6rem; } .avatar__intro { display: flex; flex: 1 1; flex-direction: column; justify-content: center; text-align: var(--ifm-avatar-intro-alignment); } .avatar__name { font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height) var(--ifm-font-family-base); } .avatar__subtitle { margin-top: 0.25rem; } .avatar--vertical { --ifm-avatar-intro-alignment: center; --ifm-avatar-intro-margin: 0.5rem; align-items: center; flex-direction: column; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .badge { background-color: var(--ifm-badge-background-color); border: var(--ifm-badge-border-width) solid var(--ifm-badge-border-color); border-radius: var(--ifm-badge-border-radius); color: var(--ifm-badge-color); display: inline-block; font-size: 75%; font-weight: var(--ifm-font-weight-bold); line-height: 1; padding: var(--ifm-badge-padding-vertical) var(--ifm-badge-padding-horizontal); } .badge--primary { --ifm-badge-background-color: var(--ifm-color-primary); --ifm-badge-border-color: var(--ifm-badge-background-color); } .badge--secondary { --ifm-badge-background-color: var(--ifm-color-secondary); --ifm-badge-border-color: var(--ifm-badge-background-color); color: var(--ifm-color-black); } .badge--success { --ifm-badge-background-color: var(--ifm-color-success); --ifm-badge-border-color: var(--ifm-badge-background-color); } .badge--info { --ifm-badge-background-color: var(--ifm-color-info); --ifm-badge-border-color: var(--ifm-badge-background-color); } .badge--warning { --ifm-badge-background-color: var(--ifm-color-warning); --ifm-badge-border-color: var(--ifm-badge-background-color); } .badge--danger { --ifm-badge-background-color: var(--ifm-color-danger); --ifm-badge-border-color: var(--ifm-badge-background-color); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .breadcrumbs { margin-bottom: 0; padding-left: 0; } .breadcrumbs__item { display: inline-block; } .breadcrumbs__item:not(:last-child):after { background: var(--ifm-breadcrumb-separator) center; content: ' '; display: inline-block; filter: var(--ifm-breadcrumb-separator-filter); height: calc( var(--ifm-breadcrumb-separator-size) * var(--ifm-breadcrumb-size-multiplier) * var(--ifm-breadcrumb-separator-size-multiplier) ); margin: 0 var(--ifm-breadcrumb-spacing); opacity: 0.5; width: calc( var(--ifm-breadcrumb-separator-size) * var(--ifm-breadcrumb-size-multiplier) * var(--ifm-breadcrumb-separator-size-multiplier) ); /*rtl:raw: transform: rotate(180deg); */ } .breadcrumbs__item--active .breadcrumbs__link { background: var(--ifm-breadcrumb-item-background-active); color: var(--ifm-breadcrumb-color-active); } .breadcrumbs__link { border-radius: var(--ifm-breadcrumb-border-radius); color: var(--ifm-font-color-base); display: inline-block; font-size: calc(1rem * var(--ifm-breadcrumb-size-multiplier)); padding: calc( var(--ifm-breadcrumb-padding-vertical) * var(--ifm-breadcrumb-size-multiplier) ) calc( var(--ifm-breadcrumb-padding-horizontal) * var(--ifm-breadcrumb-size-multiplier) ); transition-property: background, color; transition-duration: var(--ifm-transition-fast); transition-timing-function: var(--ifm-transition-timing-default); } .breadcrumbs__link:link:hover, .breadcrumbs__link:visited:hover, area[href].breadcrumbs__link:hover { background: var(--ifm-breadcrumb-item-background-active); text-decoration: none; } .breadcrumbs__link:any-link:hover { background: var(--ifm-breadcrumb-item-background-active); text-decoration: none; } .breadcrumbs--sm { --ifm-breadcrumb-size-multiplier: 0.8; } .breadcrumbs--lg { --ifm-breadcrumb-size-multiplier: 1.2; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .button { background-color: var(--ifm-button-background-color); border: var(--ifm-button-border-width) solid var(--ifm-button-border-color); border-radius: var(--ifm-button-border-radius); color: var(--ifm-button-color); cursor: pointer; display: inline-block; font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); font-weight: var(--ifm-button-font-weight); line-height: 1.5; padding: calc( var(--ifm-button-padding-vertical) * var(--ifm-button-size-multiplier) ) calc( var(--ifm-button-padding-horizontal) * var(--ifm-button-size-multiplier) ); text-align: center; -webkit-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; transition-property: color, background, border-color; transition-duration: var(--ifm-button-transition-duration); transition-timing-function: var(--ifm-transition-timing-default); } .button:hover { color: var(--ifm-button-color); /* Override for button links. */ text-decoration: none; } .button--outline { --ifm-button-background-color: transparent; --ifm-button-color: var(--ifm-button-border-color); } .button--outline:hover { --ifm-button-background-color: var(--ifm-button-border-color); } .button--outline:hover, .button--outline:active, .button--outline.button--active { --ifm-button-color: var(--ifm-font-color-base-inverse); } .button--link { --ifm-button-background-color: transparent; --ifm-button-border-color: transparent; color: var(--ifm-link-color); /* autoprefixer: ignore next */ text-decoration: var(--ifm-link-decoration); } .button--link:hover, .button--link:active, .button--link.button--active { color: var(--ifm-link-hover-color); /* autoprefixer: ignore next */ text-decoration: var(--ifm-link-hover-decoration); } .button.disabled, .button:disabled, .button[disabled] { opacity: 0.65; pointer-events: none; } .button--sm { --ifm-button-size-multiplier: 0.8; } .button--lg { --ifm-button-size-multiplier: 1.35; } .button--block { display: block; width: 100%; } .button.button--secondary { color: var(--ifm-color-gray-900); } .button.button--secondary.button--outline:not(.button--active):not(:hover) { color: var(--ifm-font-color-base); } :where(.button--primary) { --ifm-button-background-color: var(--ifm-color-primary); --ifm-button-border-color: var(--ifm-color-primary); } :where(.button--primary):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-primary-dark); --ifm-button-border-color: var(--ifm-color-primary-dark); } .button--primary:active, .button--primary.button--active { --ifm-button-background-color: var(--ifm-color-primary-darker); --ifm-button-border-color: var(--ifm-color-primary-darker); } :where(.button--secondary) { --ifm-button-background-color: var(--ifm-color-secondary); --ifm-button-border-color: var(--ifm-color-secondary); } :where(.button--secondary):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-secondary-dark); --ifm-button-border-color: var(--ifm-color-secondary-dark); } .button--secondary:active, .button--secondary.button--active { --ifm-button-background-color: var(--ifm-color-secondary-darker); --ifm-button-border-color: var(--ifm-color-secondary-darker); } :where(.button--success) { --ifm-button-background-color: var(--ifm-color-success); --ifm-button-border-color: var(--ifm-color-success); } :where(.button--success):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-success-dark); --ifm-button-border-color: var(--ifm-color-success-dark); } .button--success:active, .button--success.button--active { --ifm-button-background-color: var(--ifm-color-success-darker); --ifm-button-border-color: var(--ifm-color-success-darker); } :where(.button--info) { --ifm-button-background-color: var(--ifm-color-info); --ifm-button-border-color: var(--ifm-color-info); } :where(.button--info):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-info-dark); --ifm-button-border-color: var(--ifm-color-info-dark); } .button--info:active, .button--info.button--active { --ifm-button-background-color: var(--ifm-color-info-darker); --ifm-button-border-color: var(--ifm-color-info-darker); } :where(.button--warning) { --ifm-button-background-color: var(--ifm-color-warning); --ifm-button-border-color: var(--ifm-color-warning); } :where(.button--warning):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-warning-dark); --ifm-button-border-color: var(--ifm-color-warning-dark); } .button--warning:active, .button--warning.button--active { --ifm-button-background-color: var(--ifm-color-warning-darker); --ifm-button-border-color: var(--ifm-color-warning-darker); } :where(.button--danger) { --ifm-button-background-color: var(--ifm-color-danger); --ifm-button-border-color: var(--ifm-color-danger); } :where(.button--danger):not(.button--outline):hover { --ifm-button-background-color: var(--ifm-color-danger-dark); --ifm-button-border-color: var(--ifm-color-danger-dark); } .button--danger:active, .button--danger.button--active { --ifm-button-background-color: var(--ifm-color-danger-darker); --ifm-button-border-color: var(--ifm-color-danger-darker); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .button-group { display: inline-flex; gap: var(--ifm-button-group-spacing); } .button-group > .button:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; } .button-group > .button:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .button-group--block { display: flex; justify-content: stretch; } .button-group--block > .button { flex-grow: 1; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .card { background-color: var(--ifm-card-background-color); border-radius: var(--ifm-card-border-radius); box-shadow: var(--ifm-global-shadow-lw); display: flex; flex-direction: column; overflow: hidden; } /* Because of border-radius. */ .card--full-height { height: 100%; } .card__image { padding-top: var(--ifm-card-vertical-spacing); } .card__image:first-child { padding-top: 0; } .card__header, .card__body, .card__footer { padding: var(--ifm-card-vertical-spacing) var(--ifm-card-horizontal-spacing); } .card__header:not(:last-child), .card__body:not(:last-child), .card__footer:not(:last-child) { padding-bottom: 0; } .card__header > :last-child, .card__body > :last-child, .card__footer > :last-child { margin-bottom: 0; } .card__footer { margin-top: auto; /* Pushes the footer to the bottom of the card. */ } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .table-of-contents { font-size: 0.8rem; margin-bottom: 0; padding: var(--ifm-toc-padding-vertical) 0; } .table-of-contents, .table-of-contents ul { list-style: none; padding-left: var(--ifm-toc-padding-horizontal); } .table-of-contents li { margin: var(--ifm-toc-padding-vertical) var(--ifm-toc-padding-horizontal); } .table-of-contents__left-border { border-left: 1px solid var(--ifm-toc-border-color); } .table-of-contents__link { color: var(--ifm-toc-link-color); display: block; } .table-of-contents__link:hover, .table-of-contents__link:hover code, .table-of-contents__link--active, .table-of-contents__link--active code { color: var(--ifm-color-primary); text-decoration: none; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .close { color: var(--ifm-color-black); float: right; font-size: 1.5rem; font-weight: var(--ifm-font-weight-bold); line-height: 1; opacity: 0.5; padding: 1rem; transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .close:hover { opacity: 0.7; } .close:focus { opacity: 0.8; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .dropdown { display: inline-flex; font-weight: var(--ifm-dropdown-font-weight); position: relative; vertical-align: top; } .dropdown--hoverable:hover .dropdown__menu, .dropdown--show .dropdown__menu { opacity: 1; pointer-events: all; transform: translateY(-1px); visibility: visible; } .dropdown--right .dropdown__menu { left: inherit; right: 0; } .dropdown--nocaret .navbar__link:after { content: none !important; } .dropdown__menu { background-color: var(--ifm-dropdown-background-color); border-radius: var(--ifm-global-radius); box-shadow: var(--ifm-global-shadow-md); left: 0; list-style: none; max-height: 80vh; min-width: 10rem; opacity: 0; overflow-y: auto; padding: 0.5rem; pointer-events: none; position: absolute; top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.3rem); transform: translateY(-0.625rem); visibility: hidden; z-index: var(--ifm-z-index-dropdown); transition-property: opacity, transform, visibility; transition-duration: var(--ifm-transition-fast); transition-timing-function: var(--ifm-transition-timing-default); } .dropdown__link { border-radius: 0.25rem; color: var(--ifm-dropdown-link-color); display: block; font-size: 0.875rem; margin-top: 0.2rem; padding: 0.25rem 0.5rem; white-space: nowrap; } .dropdown__link:hover, .dropdown__link--active { background-color: var(--ifm-dropdown-hover-background-color); color: var(--ifm-dropdown-link-color); text-decoration: none; } .dropdown__link--active, .dropdown__link--active:hover { --ifm-dropdown-link-color: var(--ifm-link-color); } .dropdown > .navbar__link:after { border-color: currentColor transparent; border-style: solid; border-width: 0.4em 0.4em 0; content: ''; display: inline-block; margin-left: 0.3em; position: relative; top: 2px; transform: translateY(-50%); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .footer { background-color: var(--ifm-footer-background-color); color: var(--ifm-footer-color); padding: var(--ifm-footer-padding-vertical) var(--ifm-footer-padding-horizontal); } .footer--dark { --ifm-footer-background-color: #303846; --ifm-footer-color: var(--ifm-footer-link-color); --ifm-footer-link-color: var(--ifm-color-secondary); --ifm-footer-title-color: var(--ifm-color-white); } .footer__links { margin-bottom: 1rem; } .footer__link-item { color: var(--ifm-footer-link-color); line-height: 2; } .footer__link-item:hover { color: var(--ifm-footer-link-hover-color); } .footer__link-separator { margin: 0 var(--ifm-footer-link-horizontal-spacing); } .footer__logo { margin-top: 1rem; max-width: var(--ifm-footer-logo-max-width); } .footer__title { color: var(--ifm-footer-title-color); font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height) var(--ifm-font-family-base); margin-bottom: var(--ifm-heading-margin-bottom); } .footer__item { margin-top: 0; } .footer__items { margin-bottom: 0; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ [type='checkbox'] { padding: 0; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .hero { align-items: center; background-color: var(--ifm-hero-background-color); color: var(--ifm-hero-text-color); display: flex; padding: 4rem 2rem; } .hero--primary { --ifm-hero-background-color: var(--ifm-color-primary); --ifm-hero-text-color: var(--ifm-font-color-base-inverse); } .hero--dark { --ifm-hero-background-color: #303846; --ifm-hero-text-color: var(--ifm-color-white); } .hero__title { font-size: 3rem; } .hero__subtitle { font-size: 1.5rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .menu { font-weight: var(--ifm-font-weight-semibold); overflow-x: hidden; } .menu__list { list-style: none; margin: 0; padding-left: 0; } /* Non-top level menus */ .menu__list .menu__list { flex: 0 0 100%; margin-top: 0.25rem; padding-left: var(--ifm-menu-link-padding-horizontal); } .menu__list-item:not(:first-child) { margin-top: 0.25rem; } .menu__list-item--collapsed .menu__list { height: 0; overflow: hidden; } .menu__list-item--collapsed .menu__link--sublist:after, .menu__list-item--collapsed .menu__caret:before { transform: rotateZ(90deg); } .menu__list-item-collapsible { flex-wrap: wrap; position: relative; border-radius: 0.25rem; display: flex; transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .menu__list-item-collapsible:hover { background: var(--ifm-menu-color-background-hover); } .menu__list-item-collapsible--active { background: var(--ifm-menu-color-background-hover); } .menu__list-item-collapsible .menu__link:hover, .menu__list-item-collapsible .menu__link--active { background: none !important; } .menu__link, .menu__caret { align-items: center; border-radius: 0.25rem; display: flex; transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .menu__link:hover, .menu__caret:hover { background: var(--ifm-menu-color-background-hover); } .menu__link { color: var(--ifm-menu-color); flex: 1; line-height: 1.25; padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); } .menu__link:hover { text-decoration: none; color: var(--ifm-menu-color); transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .menu__link--sublist-caret:after { content: ''; margin-left: auto; min-width: 1.25rem; background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem; filter: var(--ifm-menu-link-sublist-icon-filter); height: 1.25rem; transform: rotate(180deg); width: 1.25rem; transition: transform var(--ifm-transition-fast) linear; } .menu__link--active { color: var(--ifm-menu-color-active); } .menu__link--active:hover { color: var(--ifm-menu-color-active); } .menu__link--active:not(.menu__link--sublist) { background-color: var(--ifm-menu-color-background-active); } .menu__caret { padding: var(--ifm-menu-link-padding-vertical) var(--ifm-menu-link-padding-horizontal); } .menu__caret:before { content: ''; background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem; filter: var(--ifm-menu-link-sublist-icon-filter); height: 1.25rem; transform: rotate(180deg); width: 1.25rem; transition: transform var(--ifm-transition-fast) linear; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ html[data-theme='dark'], .navbar--dark { --ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%); } .navbar { background-color: var(--ifm-navbar-background-color); box-shadow: var(--ifm-navbar-shadow); display: flex; height: var(--ifm-navbar-height); padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal); } .navbar > .container, .navbar > .container-fluid { display: flex; } .navbar--fixed-top { position: sticky; top: 0; z-index: var(--ifm-z-index-fixed); } .navbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .navbar__brand { align-items: center; color: var(--ifm-navbar-link-color); display: flex; margin-right: 1rem; min-width: 0; } .navbar__brand:hover { color: var(--ifm-navbar-link-hover-color); text-decoration: none; } .navbar__title { flex: 1 1 auto; } .navbar__toggle { display: none; margin-right: 0.5rem; } .navbar__logo { flex: 0 0 auto; height: 2rem; margin-right: 0.5rem; } .navbar__logo img { height: 100%; } .navbar__items { align-items: center; display: flex; flex: 1; min-width: 0; } .navbar__items--center { flex: 0 0 auto; } .navbar__items--center .navbar__brand { margin: 0; } .navbar__items--center + .navbar__items--right { flex: 1; } .navbar__items--right { flex: 0 0 auto; justify-content: flex-end; } .navbar__items--right > :last-child { padding-right: 0; } .navbar__item { display: inline-block; padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal); } .navbar__item.dropdown .navbar__link:not([href]) { pointer-events: none; } .navbar__link { color: var(--ifm-navbar-link-color); font-weight: var(--ifm-font-weight-semibold); } .navbar__link:hover, .navbar__link--active { color: var(--ifm-navbar-link-hover-color); text-decoration: none; } .navbar--dark, .navbar--primary { --ifm-menu-color: var(--ifm-color-gray-300); --ifm-navbar-link-color: var(--ifm-color-gray-100); --ifm-navbar-search-input-background-color: rgba(255, 255, 255, 0.1); --ifm-navbar-search-input-placeholder-color: rgba(255, 255, 255, 0.5); color: var(--ifm-color-white); } .navbar--dark { --ifm-navbar-background-color: #242526; --ifm-navbar-link-hover-color: var(--ifm-color-primary); --ifm-menu-color-background-active: rgba(255, 255, 255, 0.05); --ifm-navbar-search-input-color: var(--ifm-color-white); } .navbar--primary { --ifm-navbar-background-color: var(--ifm-color-primary); --ifm-navbar-link-hover-color: var(--ifm-color-white); --ifm-menu-color-active: var(--ifm-color-white); --ifm-navbar-search-input-color: var(--ifm-color-emphasis-500); } .navbar__search-input { appearance: none; /* Algolia will add type="search" to the input in Safari and Safari's styling will override the styling here. */ background: var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem; border: none; border-radius: 2rem; color: var(--ifm-navbar-search-input-color); cursor: text; display: inline-block; font-size: 1rem; height: 2rem; padding: 0 0.5rem 0 2.25rem; width: 12.5rem; } .navbar__search-input::placeholder { color: var(--ifm-navbar-search-input-placeholder-color); } .navbar-sidebar { background-color: var(--ifm-navbar-background-color); bottom: 0; box-shadow: var(--ifm-global-shadow-md); left: 0; opacity: 0; overflow-x: hidden; position: fixed; top: 0; transform: translate3d(-100%, 0, 0); visibility: hidden; width: var(--ifm-navbar-sidebar-width); transition-property: opacity, visibility, transform; transition-duration: var(--ifm-transition-fast); transition-timing-function: ease-in-out; } .navbar-sidebar--show .navbar-sidebar, .navbar-sidebar--show .navbar-sidebar__backdrop { opacity: 1; visibility: visible; } .navbar-sidebar--show .navbar-sidebar { transform: translate3d(0, 0, 0); } .navbar-sidebar__backdrop { background-color: rgba(0, 0, 0, 0.6); bottom: 0; left: 0; opacity: 0; position: fixed; right: 0; top: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: var(--ifm-transition-fast); transition-timing-function: ease-in-out; } .navbar-sidebar__brand { align-items: center; box-shadow: var(--ifm-navbar-shadow); display: flex; flex: 1; height: var(--ifm-navbar-height); padding: var(--ifm-navbar-padding-vertical) var(--ifm-navbar-padding-horizontal); } .navbar-sidebar__items { display: flex; height: calc(100% - var(--ifm-navbar-height)); transform: translateZ(0); transition: transform var(--ifm-transition-fast) ease-in-out; } .navbar-sidebar__items--show-secondary { transform: translate3d( calc((var(--ifm-navbar-sidebar-width)) * -1), 0, 0 ); } .navbar-sidebar__item { flex-shrink: 0; padding: 0.5rem; width: calc(var(--ifm-navbar-sidebar-width)); } .navbar-sidebar__back { background: var(--ifm-menu-color-background-active); font-size: 15px; font-weight: var(--ifm-button-font-weight); margin: 0 0 0.2rem -0.5rem; padding: 0.6rem 1.5rem; position: relative; text-align: left; top: -0.5rem; width: calc(100% + 1rem); } .navbar-sidebar__close { display: flex; margin-left: auto; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .pagination { column-gap: var(--ifm-pagination-page-spacing); display: flex; font-size: var(--ifm-pagination-font-size); padding-left: 0; } .pagination--sm { --ifm-pagination-font-size: 0.8rem; --ifm-pagination-padding-horizontal: 0.8rem; --ifm-pagination-padding-vertical: 0.2rem; } .pagination--lg { --ifm-pagination-font-size: 1.2rem; --ifm-pagination-padding-horizontal: 1.2rem; --ifm-pagination-padding-vertical: 0.3rem; } .pagination__item { display: inline-flex; } .pagination__item > span { padding: var(--ifm-pagination-padding-vertical); } .pagination__item--active .pagination__link { background: var(--ifm-pagination-item-active-background); color: var(--ifm-pagination-color-active); } .pagination__item:not(.pagination__item--active):hover .pagination__link { background: var(--ifm-pagination-item-active-background); } .pagination__item--disabled, .pagination__item[disabled] { opacity: 0.25; pointer-events: none; } .pagination__link { border-radius: var(--ifm-pagination-border-radius); color: var(--ifm-font-color-base); display: inline-block; padding: var(--ifm-pagination-padding-vertical) var(--ifm-pagination-padding-horizontal); transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .pagination__link:hover { text-decoration: none; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .pagination-nav { display: grid; grid-gap: var(--ifm-spacing-horizontal); gap: var(--ifm-spacing-horizontal); grid-template-columns: repeat(2, 1fr); } .pagination-nav__link { border: 1px solid var(--ifm-color-emphasis-300); border-radius: var(--ifm-pagination-nav-border-radius); display: block; height: 100%; line-height: var(--ifm-heading-line-height); padding: var(--ifm-global-spacing); transition: border-color var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .pagination-nav__link:hover { border-color: var(--ifm-pagination-nav-color-hover); text-decoration: none; } .pagination-nav__link--next { grid-column: 2/3; text-align: right; } .pagination-nav__label { font-size: var(--ifm-h4-font-size); font-weight: var(--ifm-heading-font-weight); word-break: break-word; } .pagination-nav__link--prev .pagination-nav__label::before { content: '« '; } .pagination-nav__link--next .pagination-nav__label::after { content: ' »'; } .pagination-nav__sublabel { color: var(--ifm-color-content-secondary); font-size: var(--ifm-h5-font-size); font-weight: var(--ifm-font-weight-semibold); margin-bottom: 0.25rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .pills { display: flex; gap: var(--ifm-pills-spacing); padding-left: 0; } .pills__item { border-radius: 0.5rem; cursor: pointer; display: inline-block; font-weight: var(--ifm-font-weight-bold); padding: 0.25rem 1rem; transition: background var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .pills__item--active { background: var(--ifm-pills-color-background-active); color: var(--ifm-pills-color-active); } .pills__item:not(.pills__item--active):hover { background: var(--ifm-pills-color-background-active); } .pills--block { justify-content: stretch; } .pills--block .pills__item { flex-grow: 1; text-align: center; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .tabs { color: var(--ifm-tabs-color); display: flex; font-weight: var(--ifm-font-weight-bold); margin-bottom: 0; overflow-x: auto; padding-left: 0; } .tabs__item { border-bottom: 3px solid transparent; border-radius: var(--ifm-global-radius); cursor: pointer; display: inline-flex; padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal); transition: background-color var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .tabs__item--active { border-bottom-color: var(--ifm-tabs-color-active-border); border-bottom-left-radius: 0; border-bottom-right-radius: 0; color: var(--ifm-tabs-color-active); } .tabs__item:hover { background-color: var(--ifm-hover-overlay); } .tabs--block { justify-content: stretch; } .tabs--block .tabs__item { flex-grow: 1; justify-content: center; } /* Mode */ /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ html[data-theme='dark'] { --ifm-color-scheme: dark; --ifm-color-emphasis-0: var(--ifm-color-gray-1000); --ifm-color-emphasis-100: var(--ifm-color-gray-900); --ifm-color-emphasis-200: var(--ifm-color-gray-800); --ifm-color-emphasis-300: var(--ifm-color-gray-700); --ifm-color-emphasis-400: var(--ifm-color-gray-600); --ifm-color-emphasis-500: var(--ifm-color-gray-500); --ifm-color-emphasis-600: var(--ifm-color-gray-400); --ifm-color-emphasis-700: var(--ifm-color-gray-300); --ifm-color-emphasis-800: var(--ifm-color-gray-200); --ifm-color-emphasis-900: var(--ifm-color-gray-100); --ifm-color-emphasis-1000: var(--ifm-color-gray-0); --ifm-background-color: #1b1b1d; --ifm-background-surface-color: #242526; --ifm-hover-overlay: rgba(255, 255, 255, 0.05); --ifm-color-content: #e3e3e3; --ifm-color-content-secondary: rgba(255, 255, 255, 1); --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%); --ifm-code-background: rgba(255, 255, 255, 0.1); --ifm-scrollbar-track-background-color: #444444; --ifm-scrollbar-thumb-background-color: #686868; --ifm-scrollbar-thumb-hover-background-color: #7a7a7a; --ifm-table-stripe-background: rgba(255, 255, 255, 0.07); --ifm-toc-border-color: var(--ifm-color-emphasis-200); --ifm-color-primary-contrast-background: rgb(16, 36, 69); --ifm-color-primary-contrast-foreground: rgb(235, 242, 252); --ifm-color-secondary-contrast-background: rgb(71, 71, 72); --ifm-color-secondary-contrast-foreground: rgb(253, 253, 254); --ifm-color-success-contrast-background: rgb(0, 49, 0); --ifm-color-success-contrast-foreground: rgb(230, 246, 230); --ifm-color-info-contrast-background: rgb(25, 60, 71); --ifm-color-info-contrast-foreground: rgb(238, 249, 253); --ifm-color-warning-contrast-background: rgb(77, 56, 0); --ifm-color-warning-contrast-foreground: rgb(255, 248, 230); --ifm-color-danger-contrast-background: rgb(75, 17, 19); --ifm-color-danger-contrast-foreground: rgb(255, 235, 236) } @media (min-width: 1440px) { .container { max-width: var(--ifm-container-width-xl); } } @media (max-width: 996px) { .col { --ifm-col-width: 100%; flex-basis: var(--ifm-col-width); margin-left: 0; } .footer { --ifm-footer-padding-horizontal: 0 } .footer__link-separator { display: none; } .footer__col { margin-bottom: calc(var(--ifm-spacing-vertical) * 3); } .footer__link-item { display: block; width: max-content; } .hero { padding-left: 0; padding-right: 0 } .navbar > .container, .navbar > .container-fluid { padding: 0 } .navbar__toggle { display: inherit } .navbar__item { display: none } .navbar__search-input { width: 9rem } .pills--block { flex-direction: column } .tabs--block { flex-direction: column } } @media (max-width: 576px) { .markdown h1:first-child { --ifm-h1-font-size: 2rem; } .markdown > h2 { --ifm-h2-font-size: 1.5rem; } .markdown > h3 { --ifm-h3-font-size: 1.25rem; } } @media (pointer: fine) { .thin-scrollbar { scrollbar-width: thin; } .thin-scrollbar::-webkit-scrollbar { height: var(--ifm-scrollbar-size); width: var(--ifm-scrollbar-size); } .thin-scrollbar::-webkit-scrollbar-track { background: var(--ifm-scrollbar-track-background-color); border-radius: 10px; } .thin-scrollbar::-webkit-scrollbar-thumb { background: var(--ifm-scrollbar-thumb-background-color); border-radius: 10px; } .thin-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--ifm-scrollbar-thumb-hover-background-color); } } @media (prefers-reduced-motion: reduce) { :root { --ifm-transition-fast: 0ms; --ifm-transition-slow: 0ms; } } @media print { .table-of-contents { display: none } .footer { display: none } .menu { display: none } .navbar { display: none } .pagination-nav { display: none } .tabs { page-break-inside: avoid } } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /** * Styles for NProgress * Copied over to remove unused styles for the spinner. * https://github.com/rstacruz/nprogress/blob/master/nprogress.css */ :root { --docusaurus-progress-bar-color: var(--ifm-color-primary); } #nprogress { pointer-events: none; } #nprogress .bar { background: var(--docusaurus-progress-bar-color); position: fixed; z-index: 1031; top: 0; left: 0; width: 100%; height: 2px; } #nprogress .peg { position: absolute; right: 0; width: 100px; height: 100%; box-shadow: 0 0 10px var(--docusaurus-progress-bar-color), 0 0 5px var(--docusaurus-progress-bar-color); opacity: 1; transform: rotate(3deg) translate(0, -4px); } /** * Any CSS included here will be global. The classic template * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. * * Details: https://docusaurus.io/docs/styling-layout */ /* You can override the default Infima variables here. */ :root { --ifm-color-primary: #0538af; --ifm-color-primary-dark: #325cbd; --ifm-color-primary-darker: #325cbd; --ifm-color-primary-darkest: #325cbd; --ifm-color-primary-light: #325cbd; --ifm-color-primary-lighter: #325cbd; --ifm-color-primary-lightest: #325cbd; --ifm-code-font-size: 95%; --ifm-footer-link-hover-color: #6684ce; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); --ifm-navbar-link-color: #0538af; /* navbar in light mode */ } /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme="dark"] { --ifm-color-primary: #6684ce; --ifm-color-primary-dark: #6684ce; --ifm-color-primary-darker: #6684ce; --ifm-color-primary-darkest: #6684ce; --ifm-color-primary-light: #6684ce; --ifm-color-primary-lighter: #6684ce; --ifm-color-primary-lightest: #6684ce; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); --ifm-navbar-link-color: var(--ifm-font-color-base); /* navbar in dark mode */ } /* GitHub icon */ .header-github-link:before { content: ""; width: 24px; height: 24px; display: flex; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } html[data-theme="dark"] .header-github-link:before { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } .header-github-link:hover { opacity: 0.6; } html { scroll-behavior: smooth; } /* buttons */ .button { border-radius: 30px; font-weight: 400; } /* The navbar needs a little space so that the Cardano logo can breathe */ .navbar { height: 80px; } .navbar__logo { height: 35px; padding-left: 10px; } .navbar__item { padding-top: 15px; padding-bottom: 15px; } /* Chivo Variable Font */ @font-face { font-family: 'Chivo'; font-style: normal; font-weight: 100 900; /* This range covers Thin to Black weights */ font-display: swap; src: url(/assets/fonts/Chivo-VariableFont_wght-9d619c1c485f7d2836137c6c9544a837.ttf) format('truetype-variations'); } @font-face { font-family: 'Chivo'; font-style: italic; font-weight: 100 900; /* This range covers Thin to Black weights */ font-display: swap; src: url(/assets/fonts/Chivo-Italic-VariableFont_wght-b08b2bba23b9a72c232d1186cc28e552.ttf) format('truetype-variations'); } /* Cardano Brand */ body { font-family: Chivo, sans-serif; /* Replace with your font name */ } h1 { font-family: Chivo, sans-serif; /*font-size: 6.8rem;*/ font-weight: 700; line-height: 1.1; -webkit-letter-spacing: 0; -moz-letter-spacing: 0; -ms-letter-spacing: 0; letter-spacing: 0; text-transform: capitalize; font-size: 3.4; margin: 2.75rem 0 1.05rem; } /*!sc*/ h2 { font-family: Chivo, sans-serif; /*font-size: 3.6rem;*/ font-weight: 700; line-height: 1.2; -webkit-letter-spacing: 0.05rem; -moz-letter-spacing: 0.05rem; -ms-letter-spacing: 0.05rem; letter-spacing: 0.05rem; text-transform: capitalize; font-size: 2.8; margin: 2.75rem 0 1.05rem; } /*!sc*/ h3 { font-family: Chivo, sans-serif; /*font-size: 2.88rem;*/ font-weight: 700; line-height: 1.2; -webkit-letter-spacing: 0.05rem; -moz-letter-spacing: 0.05rem; -ms-letter-spacing: 0.05rem; letter-spacing: 0.05rem; text-transform: capitalize; font-size: 1.44; margin: 2.75rem 0 1.05rem; } /*!sc*/ h4 { font-family: Chivo, sans-serif; /*font-size: 2.2rem;*/ font-weight: 700; line-height: 1.2; text-transform: capitalize; } /*!sc*/ h5 { font-family: Chivo, sans-serif; /*font-size: 1.4rem;*/ font-weight: 700; line-height: 1.4; -webkit-letter-spacing: 0.15rem; -moz-letter-spacing: 0.15rem; -ms-letter-spacing: 0.15rem; letter-spacing: 0.15rem; text-transform: uppercase; font-size: 0.7; margin: 2.75rem 0 1.05rem; } /*!sc*/ h6 { font-family: Chivo, sans-serif; font-size: 0.7rem; font-weight: 700; line-height: 1.4; -webkit-letter-spacing: 0.1rem; -moz-letter-spacing: 0.1rem; -ms-letter-spacing: 0.1rem; letter-spacing: 0.1rem; text-transform: uppercase; margin: 2.75rem 0 1.05rem; } /*!sc*/ a { outline-width: 0.5rem; color: var(--ifm-color-primary); transition: color 0.1s ease-in-out; -webkit-text-decoration: none; text-decoration: none; } /*!sc*/ a:hover { color: #3b5fb7; } /*!sc*/ img { max-width: 100%; height: auto; } /*!sc*/ .red-text { color: rgb(255, 118, 118); } .blue-text { color: var(--ifm-color-primary); } .green-text { color: rgb(59, 121, 130); } .black-text { /*color: rgb(29, 30, 33);*/ /* bad example if you want to have dark mode */ color: var(--ifm-font-color-base); /* good example */ } .slight-text { color: rgb(187, 187, 187); } .headingDot { position: relative; } .headingDot::before { content: ""; position: absolute; top: -1.5rem; left: 0; width: 0.7rem; height: 0.7rem; border-top-left-radius: 100%; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-bottom-left-radius: 100%; background-color: rgb(255, 118, 118); } /* FIXME: no longer used */ .box { width: 100%; padding-left: 4rem; padding-right: 1rem; display: flex; justify-content: center; flex-wrap: wrap; } .hero { background-color: transparent; } /** Collapsible FAQ **/ .Collapsible { border: none; } .Collapsible__trigger { background: transparent; color: var(--ifm-base-color); /* Set the text color */ font-size: 1rem; /* Set the text size */ font-weight: bold; /* Bold text */ text-align: left; /* Align text to the left */ padding: 1rem; /* Add padding */ display: flex; /* Use flexbox for positioning text and icon */ align-items: center; /* Align items vertically */ justify-content: space-between; /* Space between text and icon */ cursor: pointer; /* Cursor pointer to indicate it's clickable */ } .Collapsible__trigger:after { display: block; content: ""; width: 1em; /* Adjust size as needed */ height: 1em; /* Adjust size as needed */ transition: transform 0.3s ease; background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' viewBox='0 0 448 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; background-position: center; } .Collapsible__trigger.is-open:after { transform: rotate(180deg); } .Collapsible__contentOuter { overflow: hidden; transition: height 0.3s ease; } .Collapsible__contentInner { padding: 1rem; } /* alternating background styles */ .Collapsible.odd { background-color: #f6f7f9; /* odd rows */ } .Collapsible.even { background-color: #fdfdfb; /* even rows */ } [data-theme="dark"] .Collapsible.odd { background-color: #f6f7f9; /* odd rows */ } [data-theme="dark"] .Collapsible.even { background-color: #fdfdfb; /* even rows */ } [data-theme="dark"] .Collapsible.odd { background-color: #2d2d2d; /* dark gray for odd rows in dark mode */ } [data-theme="dark"] .Collapsible.even { background-color: #252525; /* slightly darker gray for even rows in dark mode */ } .Collapsible ul { list-style-type: disc; /* This makes standard bullets */ margin-left: 20px; /* Adjust indentation of the list */ padding-left: 0; } /* tabs (like partners, benefits) */ .tabIcon { margin-right: 8px; /* Add some space between the icon and the text */ color: var(--ifm-color-primary); } .tabCategory { color: gray; } [data-theme="dark"] .tabCategory { color: #e0e0e0; } /* transition (tabs) */ @keyframes swipeIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes swipeOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } .swipeIn { animation: swipeIn 0.5s forwards; } .swipeOut { animation: swipeOut 0.5s forwards; } /* section caret */ :root { --section-caret-fill-color: #ffffff; /* white caret fill for light mode */ } /* Override the fill color for dark mode */ [data-theme="dark"] { --section-caret-fill-color: #1b1b1d; /* black for dark mode */ } /* Apply the variable to the polygon fill */ .sectionCaret polygon { fill: var(--section-caret-fill-color); } .sectionCaret { height: 30px; width: 2048px; position: absolute; bottom: 0; display: inline-block; left: 50%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: -1000px; } /* screen size changes */ @media screen and (max-width: 576px) { .hero h1 { font-size: 32px; } .hero p { font-size: 18px; } .hero__title { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .hero__subtitle { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 1950px) { .hero h1 { font-size: 48px; } .hero p { font-size: 24px; } .sectionCaret { height: 45px; width: 3000px; margin-left: -1500px; } } /* Primary buttons sitting on light panels/imagery need a deeper blue in dark mode: the dark-theme --ifm-color-primary (#6684ce) is washed out there. Opt-in class rather than a blanket .button--primary override, so links and other primary buttons keep the lighter blue they need for contrast against the dark page background. */ [data-theme="dark"] .button--primary.button-dark-tint { background-color: #2f4a94; border-color: #2f4a94; color: #ffffff; } [data-theme="dark"] .button--primary.button-dark-tint:hover, [data-theme="dark"] .button--primary.button-dark-tint:focus { background-color: #263d7c; border-color: #263d7c; color: #ffffff; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .skipToContent_fXgn { position: fixed; top: 1rem; left: 100%; z-index: calc(var(--ifm-z-index-fixed) + 1); padding: calc(var(--ifm-global-spacing) / 2) var(--ifm-global-spacing); color: var(--ifm-color-emphasis-900); background-color: var(--ifm-background-surface-color); } .skipToContent_fXgn:focus { left: 1rem; box-shadow: var(--ifm-global-shadow-md); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .closeButton_CVFx { padding: 0; line-height: 0; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .content_knG7 { font-size: 85%; text-align: center; padding: 5px 0; } .content_knG7 a { color: inherit; text-decoration: underline; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ :root { --docusaurus-announcement-bar-height: auto; } .announcementBar_mb4j { display: flex; align-items: center; height: var(--docusaurus-announcement-bar-height); background-color: var(--ifm-color-white); color: var(--ifm-color-black); /* Unfortunately we can't make announcement bar render above the navbar IE need to use border-bottom instead of shadow See https://github.com/facebookincubator/infima/issues/275 box-shadow: var(--ifm-global-shadow-lw); z-index: calc(var(--ifm-z-index-fixed) + 1); */ border-bottom: 1px solid var(--ifm-color-emphasis-100); } html[data-announcement-bar-initially-dismissed='true'] .announcementBar_mb4j { display: none; } .announcementBarPlaceholder_vyr4 { flex: 0 0 10px; } .announcementBarClose_gvF7 { flex: 0 0 30px; align-self: stretch; } .announcementBarContent_xLdY { flex: 1 1 auto; } @media print { .announcementBar_mb4j { display: none; } } @media (min-width: 997px) { :root { --docusaurus-announcement-bar-height: 30px; } .announcementBarPlaceholder_vyr4, .announcementBarClose_gvF7 { flex-basis: 50px; } } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .toggle_vylO { width: 2rem; height: 2rem; } .toggleButton_gllP { -webkit-tap-highlight-color: transparent; align-items: center; display: flex; justify-content: center; width: 100%; height: 100%; border-radius: 50%; transition: background var(--ifm-transition-fast); } .toggleButton_gllP:hover { background: var(--ifm-color-emphasis-200); } [data-theme='light'] .darkToggleIcon_wfgR, [data-theme='dark'] .lightToggleIcon_pyhR { display: none; } .toggleButtonDisabled_aARS { cursor: not-allowed; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .darkNavbarColorModeToggle_X3D1:hover { background: var(--ifm-color-gray-800); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .themedComponent_mlkZ { display: none; } [data-theme='light'] .themedComponent--light_NVdE { display: initial; } [data-theme='dark'] .themedComponent--dark_xIcU { display: initial; } /* JS disabled??? Show light version by default => better than showing nothing TODO bad, but we currently always show light mode when there's no data-theme */ html:not([data-theme]) .themedComponent--light_NVdE { display: initial; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .iconExternalLink_nPIU { margin-left: 0.3rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .dropdownNavbarItemMobile_S0Fm { cursor: pointer; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .iconLanguage_nlXk { vertical-align: text-bottom; margin-right: 5px; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Workaround to avoid rendering empty search container See https://github.com/facebook/docusaurus/pull/9385 */ .navbarSearchContainer_Bca1:empty { display: none; } @media (max-width: 996px) { .navbarSearchContainer_Bca1 { position: absolute; right: var(--ifm-navbar-padding-horizontal); } } @media (min-width: 997px) { .navbarSearchContainer_Bca1 { padding: var(--ifm-navbar-item-padding-vertical) var(--ifm-navbar-item-padding-horizontal); } } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .navbarHideable_m1mJ { transition: transform var(--ifm-transition-fast) ease; } .navbarHidden_jGov { transform: translate3d(0, calc(-100% - 2px), 0); } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* Hide color mode toggle in small viewports */ @media (max-width: 996px) { .colorModeToggle_DEke { display: none; } } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .errorBoundaryError_a6uf { white-space: pre-wrap; color: red; } .errorBoundaryFallback_VBag { color: red; padding: 0.55rem; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ .footerLogoLink_BH7S { opacity: 0.5; transition: opacity var(--ifm-transition-fast) var(--ifm-transition-timing-default); } .footerLogoLink_BH7S:hover { opacity: 1; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ body:not(.navigation-with-keyboard) *:not(input):focus { outline: none; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ #__docusaurus-base-url-issue-banner-container { display: none; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ /* When the navbar is sticky, ensure that on anchor click, the browser does not scroll that anchor behind the navbar See https://x.com/JoshWComeau/status/1332015868725891076 */ .anchorWithStickyNavbar_LWe7 { scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem); } .anchorWithHideOnScrollNavbar_WYt5 { scroll-margin-top: 0.5rem; } .hash-link { opacity: 0; padding-left: 0.5rem; transition: opacity var(--ifm-transition-fast); -webkit-user-select: none; user-select: none; } .hash-link::before { content: '#'; } .hash-link:focus, *:hover > .hash-link { opacity: 1; } /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ html, body { height: 100%; } .mainWrapper_z2l0 { flex: 1 0 auto; display: flex; flex-direction: column; } /* Docusaurus-specific utility class */ .docusaurus-mt-lg { margin-top: 3rem; } #__docusaurus { min-height: 100%; display: flex; flex-direction: column; } /* stylelint-disable docusaurus/copyright-header */ /** * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ .taglineContainer_Yesg { width: 70%; } .backgroundBox_r25G { padding-bottom: 40px; } /* various hero banner setups for subsites on cardano.org, light and dark mode images. Try them out on: https://cardano.org/docs/components/site-hero */ /** heroBannerZoom **/ .heroBannerZoom_FIS0 { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-position: 50% 75%; height: 410px; } html[data-theme="light"] .heroBannerZoom_FIS0 { background-image: url(/assets/images/hero-header-zoom-full-5fcefe7ade49183e822861e2164d3392.png); } html[data-theme="dark"] .heroBannerZoom_FIS0 { background-image: url(/assets/images/hero-header-zoom-full-5fcefe7ade49183e822861e2164d3392.png); } /** heroBannerZoomRedWhite **/ .heroBannerZoomRedWhite_ovTG { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: right; height: 410px; background-color: #ccd6ee; color: #0033ad; } .heroBannerZoomRedWhite_ovTG .subtitle_ZEHB { color: #1d1e21; } html[data-theme="light"] .heroBannerZoomRedWhite_ovTG { background-image: url(/assets/images/hero-header-zoom-red-white-ffbccfae8ce630fd26640c9069c6edb0.png); } html[data-theme="dark"] .heroBannerZoomRedWhite_ovTG { background-image: url(/assets/images/hero-header-zoom-red-white-ffbccfae8ce630fd26640c9069c6edb0.png); } /** heroBannerZoomRedWhiteDark **/ .heroBannerZoomRedWhiteDark_JldD { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: contain; background-repeat: no-repeat; background-position: right; height: 410px; background-color: #0538af; } html[data-theme="light"] .heroBannerZoomRedWhiteDark_JldD { background-image: url(/assets/images/hero-header-zoom-red-white-ffbccfae8ce630fd26640c9069c6edb0.png); } html[data-theme="dark"] .heroBannerZoomRedWhiteDark_JldD { background-image: url(/assets/images/hero-header-zoom-red-white-ffbccfae8ce630fd26640c9069c6edb0.png); } /** heroBannerZoomBlueRed **/ .heroBannerZoomBlueRed_Na5M { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: calc(100% + 220px) center; height: 410px; background-color: #0538af; background-image: url(/assets/images/hero-header-zoom-blue-red-ea4a8ce12723749171dd017b9ee19e40.svg); } /** heroBannerAda **/ .heroBannerAda_hInw { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 50%; background-position: top right; background-repeat: no-repeat; height: 410px; color: #f8f8f5; } html[data-theme="light"] .heroBannerAda_hInw { background-image: url(/assets/images/hero-header-ada-c36e91975ef7c8df6b02086c0d073720.webp); background-color: #0538af; } html[data-theme="dark"] .heroBannerAda_hInw { background-image: url(/assets/images/hero-header-ada-c36e91975ef7c8df6b02086c0d073720.webp); background-color: #244eaf; } /** heroBannerDots **/ .heroBannerDots_dPSv { /* fixme: this is actually a zoom variant */ padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-position: 50% 35%; height: 410px; } .heroBannerDots_dPSv::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #305bbd, #0035ad); z-index: -1; /* Ensure the gradient is behind the content */ } html[data-theme="light"] .heroBannerDots_dPSv { background-image: url(/assets/images/hero-header-dots-b281e4387b041f19fb67d4de7bd86725.webp); } html[data-theme="dark"] .heroBannerDots_dPSv { background-image: url(/assets/images/hero-header-dots-b281e4387b041f19fb67d4de7bd86725.webp); } /** heroBannerFluid **/ .heroBannerFluid_Hpvj { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-position: 50% 50%; height: 410px; } html[data-theme="light"] .heroBannerFluid_Hpvj { background-image: url(/assets/images/hero-header-fluid-e8175cb804063900446a4d19b5a412fd.png); background-color: #5281f7; } html[data-theme="dark"] .heroBannerFluid_Hpvj { background-image: url(/assets/images/hero-header-fluid-e8175cb804063900446a4d19b5a412fd.png); background-color: #5281f7; } /** heroBannerOverlap **/ .heroBannerOverlap_G3Ux { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-position: 50% 50%; height: 410px; } html[data-theme="light"] .heroBannerOverlap_G3Ux { background-image: url(/assets/images/hero-header-overlap-cc14043ed0c5b74290a5120f4990aa14.png); background-color: #5281f7; } html[data-theme="dark"] .heroBannerOverlap_G3Ux { background-image: url(/assets/images/hero-header-overlap-cc14043ed0c5b74290a5120f4990aa14.png); background-color: #5281f7; } /** heroBannerWaves **/ .heroBannerWaves_C_T0 { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 5600px; background-position: 30% 15%; background-repeat: no-repeat; background-image: url(/assets/images/hero-header-braid-blue-22e5d4168891978d1a1835014fae2757.svg); height: 410px; } html[data-theme="light"] .heroBannerWaves_C_T0 { background-color: #0538af; } html[data-theme="dark"] .heroBannerWaves_C_T0 { background-color: #244eaf; } /** heroBannerStarbust **/ .heroBannerStarburst_WhTQ { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-position: top right; background-repeat: no-repeat; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTMzNyIgaGVpZ2h0PSI1NTUiIHZpZXdCb3g9IjAgMCAxMzM3IDU1NSI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0icHJlZml4X19hIiBkPSJNMCAwSDE0NDFWNTU1SDB6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MikiPgogICAgICAgIDxtYXNrIGlkPSJwcmVmaXhfX2IiIGZpbGw9IiNmZmYiPgogICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwcmVmaXhfX2EiLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iIzAwMzNBRCIgZD0iTTY4MC4wNjMgMTExNy45NTJjMS4xNzctMTkuODQyIDE4Ljg4Ni0zNS4wMTUgMzkuNTY0LTMzLjg5NCAyMC42ODYgMS4xMjEgMzYuNDggMTguMTQgMzUuMzEyIDM3Ljk4Mi0xLjE2IDE5Ljg2LTE4Ljg4NiAzNS4wMTUtMzkuNTczIDMzLjkwMi0yMC42ODYtMS4xMy0zNi40OS0xOC4xMy0zNS4zMDMtMzcuOTl6bS0zMDMuMzExLTM5LjMwM2M4Ljc4My0xMi45MjggMjYuNzY1LTE2LjU0MiA0MC4xNTYtOC4wNjIgMTMuMzkxIDguNDg4IDE3LjEyNiAyNS44MjIgOC4zMjUgMzguNzY3LTguNzY2IDEyLjkxLTI2Ljc0OCAxNi41NS00MC4xMzkgOC4wNTQtMTMuMzgyLTguNDcyLTE3LjEyNi0yNS44MjMtOC4zNDItMzguNzU5em02NTEuMTk0LTEwLjY0N2MxNC4zMDUtNi45NjEgMzEuNzQtMS40MDIgMzguOTQ4IDEyLjM5NSA3LjIxIDEzLjgxMyAxLjQzNSAzMC42NC0xMi44MzUgMzcuNjAxLTE0LjMzMiA2Ljk2MS0zMS43NTcgMS40MDItMzguOTQ5LTEyLjM5NS03LjIwOC0xMy44MTMtMS40Ni0zMC42NTcgMTIuODM2LTM3LjYwMXpNOTM2Ljc0IDkxMi42NmMyMi4yMTctMTAuODA1IDQ5LjI3LTIuMTgyIDYwLjQ0OCAxOS4yNzcgMTEuMTYxIDIxLjQ1IDIuMjU2IDQ3LjYwNy0xOS45NDQgNTguMzk1LTIyLjE4MyAxMC44MTMtNDkuMjUzIDIuMjA2LTYwLjQxNC0xOS4yNTMtMTEuMTk2LTIxLjQ1OC0yLjI1Ni00Ny41OSAxOS45MS01OC40MnptLTQ4OC4zNjMgMTQuOTc0YzEzLjYzNS0yMC4wNyA0MS41MTItMjUuNjgyIDYyLjI5OC0xMi41MDEgMjAuNzY4IDEzLjE2MyAyNi41ODMgNDAuMTI5IDEyLjk1NyA2MC4yMTUtMTMuNjI2IDIwLjA5NC00MS41MjggMjUuNjktNjIuMzE1IDEyLjUzNC0yMC43NzctMTMuMTg5LTI2LjU2Ni00MC4xNTQtMTIuOTQtNjAuMjQ4em0yMTYuNzEtMjIuNjAxYzEuNjQzLTI4LjY2IDI2LjQ2Mi01MC41NjggNTUuMzk1LTQ4Ljk0OSAyOC45NDIgMS42MjkgNTEuMDg1IDI2LjIwNSA0OS40MzIgNTQuODczLTEuNjQzIDI4LjY2OC0yNi40MzcgNTAuNTk0LTU1LjM5NiA0OC45NTctMjguOTUtMS42MjgtNTEuMDY3LTI2LjIxMy00OS40MzItNTQuODgxek0yMDEuNjExIDgwNC44NThjMTguNTEzLTguOTQ1IDQxLjA1Ny0xLjgwNCA1MC4zNjYgMTUuOTI2IDkuMzI2IDE3Ljc2NCAxLjg4IDM5LjQxNS0xNi42MDcgNDguMzYtMTguNDc4IDguOTM3LTQxLjAzMSAxLjgxMy01MC4zNDktMTUuOTM0LTkuMzE4LTE3Ljc1Ni0xLjg5Ny0zOS40MTUgMTYuNTktNDguMzUyem05OTAuNTM5IDEyLjQwNGMxMS4zMi0xNi42MTcgMzQuNTkxLTIxLjI3IDUxLjkwOS0xMC4zNjEgMTcuMzI2IDEwLjkgMjIuMTM4IDMzLjIgMTAuODEgNDkuODM0LTExLjM5IDE2LjYzNC0zNC42MTggMjEuMjYzLTUxLjkyNiAxMC4zNy0xNy4zMjctMTAuOTEtMjIuMTU3LTMzLjIyNi0xMC43OTMtNDkuODQzek04MjUuOTY3IDY0NWMzNC4yIDAgNjUuMDI2IDE4LjU0MiA4MC40MTcgNDguNDIgMjIuMzI5IDQzLjMxNSA0LjQ0IDk2LjMzOC0zOS44NyAxMTguMTQ0LTEyLjUyMiA2LjE4OS0yNi41IDkuNDM2LTQwLjQ0MyA5LjQzNi0zNC4yIDAtNjUuMDE3LTE4LjU0Mi04MC4zOTItNDguNDAyLTEwLjgzLTIxLjAwMS0xMi42MzQtNDQuODQyLTUuMDk4LTY3LjE0IDcuNTM1LTIyLjM0IDIzLjQ5LTQwLjQ1IDQ0Ljk0My01MS4wMyAxMi41MTMtNi4xNzIgMjYuNTE3LTkuNDI4IDQwLjQ0My05LjQyOHptLTIxMC45MiAwYzE3LjUzNyAwIDM0LjU4MSA0Ljk4NiA0OS4yODUgMTQuNDMyIDIwLjA5NiAxMi44ODkgMzMuODU0IDMyLjY2MyAzOC43NTIgNTUuNjY4IDQuODk5IDIyLjk5Ni4zMyA0Ni41MDEtMTIuODU3IDY2LjE0OEM2NzMuNTQgODA2LjE0NCA2NDUuNDA3IDgyMSA2MTQuOTMzIDgyMWMtMTcuNTMgMC0zNC41NTYtNC45NzctNDkuMjY4LTE0LjQyNC0yMC4wOTYtMTIuODgtMzMuODU0LTMyLjY1NC0zOC43NDQtNTUuNjUtNC45MDctMjMuMDE0LS4zMzgtNDYuNTI3IDEyLjgzMS02Ni4xNjYgMTYuNjk3LTI0LjkwNCA0NC44NDctMzkuNzYgNzUuMjk0LTM5Ljc2em0tMjMyLjE3IDM5LjU4YzI1Ljg4OS0xMi45MzIgNTcuNDU4LTIuNjE4IDcwLjUwNSAyMy4wMjQgMTMuMDMgMjUuNjQxIDIuNjI1IDU2LjktMjMuMjcyIDY5LjgzMi0yNS44ODkgMTIuOTA2LTU3LjQ0IDIuNi03MC40ODgtMjMuMDQyLTEzLjA0LTI1LjY1LTIuNjI1LTU2LjkgMjMuMjU1LTY5LjgxNXptNjA5LjcyMSAxNi44OTVjMTUuODktMjMuOTkgNDguNDYtMzAuNyA3Mi42OC0xNC45NjIgMjQuMjY1IDE1Ljc1NSAzMS4wMTMgNDcuOTkgMTUuMTE1IDcxLjk5LTE1Ljg5NyAyNC4wMzMtNDguNDQyIDMwLjcxNy03Mi42ODkgMTQuOTc5LTI0LjIyLTE1Ljc0Ny0zMS4wMDQtNDcuOTktMTUuMTA2LTcyLjAwN3ptLTE0Ny40NS0xNTIuNDcxYzIuNzkyLTQ4LjIxMSA0NS4xMjgtODUuNjg2IDk0Ljk2Ni04Mi44NTMgMjQuMDA5IDEuMzIzIDQ2LjA0OSAxMS43MTEgNjIuMDM0IDI5LjI2NSAxNi4wMDMgMTcuNTIgMjQuMDg3IDQwLjEwNCAyMi42OTkgNjMuNTk1LTIuNjk4IDQ2LjU0LTQyLjE0NSA4Mi45ODktODkuNzcyIDgyLjk4OS0xLjcxNyAwLTMuNDYtLjA1LTUuMTg3LS4xNDQtNDkuNTQzLTIuNzQ4LTg3LjU2LTQ0LjQxMi04NC43NC05Mi44NTJ6bS00MjkuMDAyLS4wMDNjMi44MS00OC4yMzggNDUuMTI0LTg1LjY5IDk0Ljk1Ny04Mi44NSA0OS41NTYgMi43NTYgODcuNTY4IDQ0LjQwNiA4NC43NSA5Mi44MzhDNTkzLjEzOCA2MDUuNTQgNTUzLjY5NSA2NDIgNTA2LjA2NSA2NDJjLTEuNzE4IDAtMy40NDMtLjA2LTUuMTg3LS4xNDQtNDkuNTItMi43NzMtODcuNTQyLTQ0LjQyMi04NC43MzItOTIuODU1em0tMjEyLjA3MiA0LjAyMWMxLjQxNS0yMy45OTQgMjIuNjc4LTQyLjMyNSA0Ny40ODItNDAuOTUgMjQuODEzIDEuMzUxIDQzLjc3NyAyMS44OTcgNDIuMzcgNDUuODgzLTEuNDA1IDIzLjk5NC0yMi42NjkgNDIuMzI2LTQ3LjQ5IDQwLjk3NS0yNC43OTYtMS4zOTMtNDMuNzc2LTIxLjkyMi00Mi4zNjItNDUuOTA4em05NDMtMi45NzZjMS40MjMtMjMuOTk4IDIyLjY2Ny00Mi4zMzQgNDcuNDc3LTQwLjk3NSAyNC44MSAxLjM2NyA0My43OTcgMjEuOTI2IDQyLjM3NCA0NS45MDctMS4zOTcgMjMuOTY1LTIyLjY3NSA0Mi4zMTgtNDcuNDc3IDQwLjk1LTI0LjgxOC0xLjM3NS00My43ODgtMjEuOTEtNDIuMzc0LTQ1Ljg4MnpNNTIuMDUgNTUyLjQxYy45LTE1LjQ0IDE0LjYxMi0yNy4yNDggMzAuNTktMjYuMzYzIDE1Ljk5Ni44ODQgMjguMjEzIDE0LjA5NSAyNy4zMTMgMjkuNTQzLS45MDcgMTUuNDIyLTE0LjYyOSAyNy4yNDgtMzAuNjI0IDI2LjM2My0xNS45NzgtLjg2OC0yOC4yMTMtMTQuMTEyLTI3LjI3OS0yOS41NDN6bTEyNzguOTk4LS4wMDVjLjkyNS0xNS40NDEgMTQuNjEtMjcuMjM2IDMwLjYxLTI2LjM2IDE2LjAwMS44NiAyOC4yMzMgMTQuMTA3IDI3LjI5MSAyOS41NDktLjg5OSAxNS40MzMtMTQuNiAyNy4yNDQtMzAuNTc2IDI2LjM2LTE2LjAxLS44Ni0yOC4yNDEtMTQuMTA3LTI3LjMyNS0yOS41NDl6TTYxNC45MjYgMjg3YzM0LjI0NyAwIDY1LjA1OCAxOC41MzQgODAuNDU1IDQ4LjQwNSAyMi4zMzYgNDMuMzI2IDQuNDQgOTYuMzM0LTM5Ljg4NSAxMTguMTc1LTEyLjUxNyA2LjE1Ni0yNi41MDkgOS40Mi00MC40MyA5LjQyLTM0LjI0NyAwLTY1LjA2Ny0xOC41Ni04MC40NDYtNDguNDA1LTIyLjMzNy00My4zNDMtNC40NDItOTYuMzUxIDM5Ljg3NS0xMTguMTg0IDEyLjUyNi02LjE0NyAyNi41MS05LjQxMSA0MC40MzEtOS40MTF6bTIxMS4xMzggMGMxNy41NDIgMCAzNC41OSA0Ljk5NCA0OS4zMDMgMTQuNDQgNDEuNTEzIDI2LjU2NSA1My4xMzggODEuMjQ2IDI1LjkxNCAxMjEuODE5Qzg4NC41NzIgNDQ4LjEzNiA4NTYuNDIgNDYzIDgyNS45MjYgNDYzYy0xNy41NDIgMC0zNC41OS00Ljk4Ni00OS4zMTItMTQuNDMxLTQxLjQ5NS0yNi42MTYtNTMuMTItODEuMjQ3LTI1Ljg4OC0xMjEuODI4Qzc2Ny40MTggMzAxLjg2NCA3OTUuNTggMjg3IDgyNi4wNjQgMjg3em0tNDY1LjQ1IDYyLjQ3YzE1Ljg5OC0yMy45OSA0OC40MjUtMzAuNyA3Mi42NzItMTQuOTQ1IDI0LjI0NiAxNS43MzkgMzEuMDEyIDQ3Ljk3NCAxNS4xMDUgNzEuOTczLTE1Ljg4IDI0LjAzNC00OC40MzIgMzAuNzI2LTcyLjY3OSAxNC45OC0yNC4yNDctMTUuNzQ3LTMxLjAxMi00Ny45NzQtMTUuMDk3LTcyLjAwN3ptNjUwLjI2My0xOC44OTVjMjUuODg3LTEyLjkyMyA1Ny40NTQtMi42MTcgNzAuNTAxIDIzLjAyNCAxMy4wMzkgMjUuNjQxIDIuNjI1IDU2LjkwOC0yMy4yNTMgNjkuODMxLTI1LjkwNSAxMi45MTUtNTcuNDU1IDIuNjA5LTcwLjUwMi0yMy4wMzItMTMuMDM4LTI1LjY0MS0yLjYzMy01Ni45MDggMjMuMjU0LTY5LjgyM3pNMTg2LjE0IDI1MS4yNjZjMTEuMzY0LTE2LjYzNyAzNC41OTEtMjEuMjY3IDUxLjkzNS0xMC4zNjQgMTcuMyAxMC44OTUgMjIuMTMgMzMuMjE2IDEwLjc5MyA0OS44MjgtMTEuMzY0IDE2LjYzLTM0LjYgMjEuMjc1LTUxLjkzNSAxMC4zNzItMTcuMy0xMC45MDMtMjIuMTQ4LTMzLjIxNS0xMC43OTMtNDkuODM2em0xMDE5LjQ4Ni0xMi40MWMxOC40OTMtOC45MzcgNDEuMDI1LTEuODEzIDUwLjM2IDE1Ljk0MyA5LjMxNiAxNy43NjQgMS44NjEgMzkuNDA3LTE2LjYxNSA0OC4zNTItMTguNTAxIDguOTI5LTQxLjAyNSAxLjc5Ni01MC4zNDItMTUuOTUxLTkuMzM0LTE3Ljc0OC0xLjg5Ny0zOS40MDcgMTYuNTk3LTQ4LjM0NHptLTUzOS41NC00MS44MDhjMS42NTItMjguNjgzIDI2LjQ0Ni01MC41OTkgNTUuMzcxLTQ4Ljk2MiAyOC45NiAxLjYyIDUxLjA4NSAyNi4xOTQgNDkuNDU5IDU0Ljg2OS0xLjY2MSAyOC42NTctMjYuNDY0IDUwLjU3My01NS4zOTcgNDguOTYyLTI4Ljk1LTEuNjQ2LTUxLjA3Ny0yNi4yMTItNDkuNDMzLTU0Ljg3ek00NjMuNzYxIDExNy42NWMyMi4xNzItMTAuNzkgNDkuMjM4LTIuMTczIDYwLjQxNSAxOS4yOCAxMS4xODYgMjEuNDQ0IDIuMjU2IDQ3LjYwMy0xOS45MzMgNTguNC0yMi4xOSAxMC44MjQtNDkuMjMgMi4xODItNjAuNDE1LTE5LjI1NC0xMS4xOTUtMjEuNDUyLTIuMjU2LTQ3LjYyIDE5LjkzMy01OC40MjZ6bTQ1My42MiAxNS4wMDZjMTMuNjE4LTIwLjEgNDEuNTIzLTI1LjcwNCA2Mi4yOTMtMTIuNTI0IDIwLjc4NyAxMy4xODcgMjYuNTc3IDQwLjE0MSAxMi45NSA2MC4yMDctMTMuNjI3IDIwLjA5Mi00MS41MTUgMjUuNzA0LTYyLjMwMiAxMi41NDItMjAuNzgtMTMuMTgtMjYuNTc3LTQwLjE0MS0xMi45NDItNjAuMjI1ek0zODYuOTM3LTkuOTk1YzE0LjMxNi02Ljk2OCAzMS43MzYtMS40MDIgMzguOTU0IDEyLjM5MiA3LjIxIDEzLjgxIDEuNDQ0IDMwLjY0MS0xMi44MzcgMzcuNi0xNC4zMTYgNi45Ni0zMS43NDQgMS40MS0zOC45NDUtMTIuNC03LjIxLTEzLjgwMi0xLjQ1My0zMC42NDEgMTIuODI4LTM3LjU5MnptNjI4LjgxNyA4LjYzOWM4Ljc5LTEyLjkyNyAyNi43OC0xNi41NCA0MC4xNTItOC4wNDUgMTMuMzkgOC40NyAxNy4xMTUgMjUuODEzIDguMzUgMzguNzU2LTguNzgzIDEyLjkyOC0yNi43NzEgMTYuNTMzLTQwLjE1MiA4LjA2Mi0xMy4zOS04LjQ4Ny0xNy4xNDItMjUuODM3LTguMzUtMzguNzczek02ODIuMDYtMTQuMDQ4YzEuMTg1LTE5Ljg1NSAxOC44OTgtMzUuMDIzIDM5LjU3OC0zMy44OTMgMjAuNjcxIDEuMTMgMzYuNDcgMTguMTQ0IDM1LjMwMSAzNy45ODItMS4xNzcgMTkuODU1LTE4Ljg4OSAzNS4wMjItMzkuNTY5IDMzLjktMjAuNjcxLTEuMTMtMzYuNDctMTguMTQzLTM1LjMxLTM3Ljk5eiIgbWFzaz0idXJsKCNwcmVmaXhfX2IpIi8+CiAgICA8L2c+Cjwvc3ZnPgo=); height: 410px; } .heroBannerStarburst_WhTQ::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #305bbd, #0035ad); z-index: -1; /* Ensure the gradient is behind the content */ } /* See the dark-mode hero text block at the end of this file. */ /** heroBannerBraidBlue **/ .heroBannerBraidBlue_vICz { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 1600px; background-position: 0% 85%; background-repeat: no-repeat; background-image: url(/assets/images/hero-header-braid-blue-22e5d4168891978d1a1835014fae2757.svg); height: 410px; } .heroBannerBraidBlue_vICz::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #597cd0, #0035ad); z-index: -1; /* Ensure the gradient is behind the content */ } /** heroBannerBraidRedBlue **/ .heroBannerBraidRedBlue_d4fP { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 1600px; background-position: 0% 85%; background-repeat: no-repeat; background-image: url(/assets/images/hero-header-braid-red-blue-72887f1815b607ab1df9f4409ad801b0.svg); height: 410px; } .heroBannerBraidRedBlue_d4fP::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #597cd0, #0035ad); z-index: -1; /* Ensure the gradient is behind the content */ } /** heroBannerBraidBlack **/ .heroBannerBraidBlack_qmmz { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 1600px; background-position: 0% 85%; background-repeat: no-repeat; background-image: url(/assets/images/hero-header-braid-black-b0ff99e52672f4361825eda2f538c27e.svg); height: 410px; } .heroBannerBraidBlack_qmmz::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #597cd0, #011034); z-index: -1; /* Ensure the gradient is behind the content */ } html[data-theme="dark"] .heroBannerBraidBlack_qmmz::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #597cd0, #0035ad); } /** heroBannerOuroboros **/ .heroBannerOuroboros_CcEE { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: 1900px; background-position: 0% 2%; background-repeat: no-repeat; background-image: url(/assets/images/hero-header-braid-black-b0ff99e52672f4361825eda2f538c27e.svg); height: 410px; } .heroBannerOuroboros_CcEE::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(315deg, #305bbd, #0035ad); z-index: -1; /* Ensure the gradient is behind the content */ } .ouroborosLogo_l_c1 { color: #ffffff; max-width: 30rem; } /* screen size changes */ @media screen and (max-width: 576px) { .taglineContainer_Yesg { width: 100%; } .heroBannerAda_hInw, .heroBannerZoom_FIS0, .heroBannerZoomRedWhite_ovTG, .heroBannerDots_dPSv, .heroBannerFluid_Hpvj, .heroBannerOverlap_G3Ux, .heroBannerWaves_C_T0, .heroBannerStarburst_WhTQ, .heroBannerBraidBlue_vICz, .heroBannerBraidRedBlue_d4fP { padding: 2rem 1rem; /* Reduced padding */ height: auto; /* Adjust height dynamically */ } .backgroundBox_r25G { padding-bottom: 20px; /* Reduce space at the bottom */ } .heroBannerZoomBlueRed_Na5M { background-position: left; background-size: 700px } } @media screen and (max-width: 966px) { .taglineContainer_Yesg { width: 100%; } .heroBannerZoom_FIS0 { padding: 4rem; } .heroBannerZoomRedWhite_ovTG { padding: 4rem; background-size: cover; background-position: 50% 50%; } .heroBannerAda_hInw { padding: 4rem; background-size: 100%; background-position: top right; } .heroBannerDots_dPSv { padding: 4rem; } .heroBannerFluid_Hpvj { padding: 4rem; } .heroBannerOverlap_G3Ux { padding: 4rem; } .heroBannerWaves_C_T0 { padding: 4rem; } .heroBannerZoomBlueRed_Na5M { background-position: calc(100% + 100px) center; } } @media screen and (max-width: 1024px) { .heroBannerZoom_FIS0 { background-position: 34% 50%; } /* .heroBannerZoomRedWhite { } */ .heroBannerAda_hInw { background-position: 50% 20%; } .heroBannerDots_dPSv { background-position: 50% 35%; } .heroBannerFluid_Hpvj { background-position: 50% 50%; } .heroBannerOverlap_G3Ux { background-position: 34% 50%; } .heroBannerWaves_C_T0 { padding: 4rem 2rem; background-size: 4000px; } } @media screen and (min-width: 1950px) { .heroBannerZoom_FIS0 { background-repeat: no-repeat; background-size: cover; } .heroBannerZoomRedWhite_ovTG { background-repeat: no-repeat; } .heroBannerAda_hInw { background-size: 30%; background-position: top center; } .heroBannerDots_dPSv { background-repeat: no-repeat; background-size: cover; } .heroBannerFluid_Hpvj { background-repeat: no-repeat; background-size: cover; } .heroBannerWaves_C_T0 { background-size: 6800px; } } @media screen and (max-width: 576px) { .heroBannerAda_hInw { background-position: right 50% bottom; } } /* ---- Dark-mode hero text ------------------------------------------------- Infima's `hero--primary` derives its text colour from --ifm-font-color-base-inverse, which flips to dark in dark mode. Every banner below keeps the same dark background (gradient, blue fill, or photo) in both themes, so their title and subtitle must stay white rather than following the theme. `.heroBannerZoomRedWhite` is deliberately NOT in this list: it is the one light-background banner (#ccd6ee with a blue title and a #1d1e21 subtitle), where dark text is correct. */ html[data-theme="dark"] .heroBannerZoom_FIS0, html[data-theme="dark"] .heroBannerZoomRedWhiteDark_JldD, html[data-theme="dark"] .heroBannerZoomBlueRed_Na5M, html[data-theme="dark"] .heroBannerAda_hInw, html[data-theme="dark"] .heroBannerDots_dPSv, html[data-theme="dark"] .heroBannerFluid_Hpvj, html[data-theme="dark"] .heroBannerOverlap_G3Ux, html[data-theme="dark"] .heroBannerWaves_C_T0, html[data-theme="dark"] .heroBannerStarburst_WhTQ, html[data-theme="dark"] .heroBannerBraidBlue_vICz, html[data-theme="dark"] .heroBannerBraidRedBlue_d4fP, html[data-theme="dark"] .heroBannerBraidBlack_qmmz, html[data-theme="dark"] .heroBannerOuroboros_CcEE { --ifm-hero-text-color: #ffffff; color: #ffffff; } /* ---- Hero title accent --------------------------------------------------- A short, timely add-on inside the

(a closing date, say). Amber against the blue hero gradient sits at ~4:1 on the lighter end of it — over the 3:1 large-text threshold — and every gradient banner keeps the same background in dark mode, so one colour covers both themes. inline-block keeps it as one unit: it drops to its own line when the title fills the row, instead of splitting off a word or two of the accent. */ .titleAccent_o2KU { display: inline-block; color: #ffc857; } /* UseCaseTextRight.module.css */ .enterpriseWrap_lP1S { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 100px; } .imageSection_qLlA { max-width: 15rem; padding-top: 35px; order: 1; /* By default, image comes before text */ } .textSection_A8VF { width: 70%; padding-bottom: 30px; order: 2; /* By default, text comes after image */ } /* Small label above the title, grouping use cases the way cardano.org does. */ .category_gfe5 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #777778; margin-bottom: 4px; } [data-theme="dark"] .category_gfe5 { color: #a9a9ad; } .title_o4rc { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: var(--ifm-color-primary); } .description_ay5J { margin-bottom: 20px; } .solutions_R2I2, .product_cbrX { font-size: 15px; margin-bottom: 5px; } .solutionsContent_ueo5, .productContent_zCaz { font-size: 18px; margin-bottom: 15px; } /* Mobile view: ensure image is always first, regardless of isImageRight flag */ /* FIXME: unsolved issue between 983 and 1107 where it does not collapse as expected */ @media (max-width: 576px) { /* Adjust the max-width as necessary for your breakpoint */ .imageSection_qLlA{ order: 1; /* Both will stack with the image on top */ width: 100%; margin-top: 40px; padding: 0px; } .textSection_A8VF { order: 1; /* Both will stack with the image on top */ width: 100%; padding: 0px; } .enterpriseWrap_lP1S { gap: 20px; } } /* Additional styles for when the image is on the right on large screens */ @media (min-width: 577px) { .imageRight_Bx9m { order: 2; /* Image will be second if isImageRight is true */ } .textRight_TxWj { order: 1; /* Text will be first if isImageRight is true */ } } /* stylelint-disable docusaurus/copyright-header */ /** * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ /* Buttons */ .cta_VNho .button_N198 { margin-right: 1rem; /* space between buttons */ width: 240px; /* force equal width */ font-weight: normal; } html[data-theme="light"] .button_N198 { background-color: rgb(255, 255, 255); color: var(--ifm-color-primary); } html[data-theme="dark"] .button_N198 { background-color: var(--ifm-button-background-color); color: var(--ifm-button-color); } .cta_VNho .button_N198:last-child { margin-right: 0; /* no extra margin to the right of the the last button right: */ } .taglineContainer_k1Q7 { width: 50%; margin-bottom: 3rem; } /* Banner */ .heroBanner_FZGs { padding: 4rem 2rem; text-align: left; position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 35% 50%; height: 830px; } html[data-theme="light"] .heroBanner_FZGs { background-image: url(/assets/images/hero-header-welcome-fallback-e16bab9e43415939dc84d1f12709d4b7.jpg); /*background-image: linear-gradient(315deg, rgb(91, 123, 202), rgb(10, 56, 166));*/ } html[data-theme="dark"] .heroBanner_FZGs { background-image: url(/assets/images/hero-header-welcome-fallback-e16bab9e43415939dc84d1f12709d4b7.jpg); } /* Infima's `hero--primary` derives its text colour from --ifm-font-color-base-inverse, which flips to dark in dark mode. The banner photo behind it is the same in both themes, so pin the text to white. */ html[data-theme="dark"] .heroBanner_FZGs { --ifm-hero-text-color: #ffffff; color: #ffffff; } /* screen size changes */ @media screen and (max-width: 966px) { .heroBanner_FZGs { padding: 2rem; background-size: cover; background-position: 50% 50%; } .cta_VNho .button_N198 { margin-bottom: 1rem; } .taglineContainer_k1Q7 { width: 100%; } } @media screen and (max-width: 1024px) { .heroBanner_FZGs { background-position: 35% 50%; } } @media screen and (min-width: 1950px) { .heroBanner_FZGs { background-repeat: no-repeat; background-size: cover; } } .leftColumn_v8fx { background-size: cover; background-repeat: no-repeat; background-position: left; } .rightColumn_Y33y { padding-top: 30px; padding-left: 30px; padding-bottom: 30px; } .quote_lw1o { margin-bottom: 40px; } /* Width is set inline via the `imageWidth` prop; this keeps the aspect ratio when it is scaled down and centers it in the leftover column space. */ .image_ET7C { height: auto; display: block; margin-left: auto; margin-right: auto; } /* One step up from the default body copy, for teaser blocks that carry the page's main pitch. */ .largeDescription_c1_e { font-size: 1.2rem; line-height: 1.6; } /* With `titleAboveText` the title leads the text column, so the image in the other column has to start at the same y. The heading loses its large default top margin and the image column picks up .rightColumn's padding-top, putting both at the same offset from the top of the row. */ .leadingTitle_EL1t { margin-top: 0; } .leftColumnAligned_LY62 { padding-top: 30px; } /* The image is a link when `imageLink` is set; `display: block` keeps the anchor from adding inline-layout slack around it, and the hover lift is the affordance that it is clickable. */ .imageLink_V7qp { display: block; transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out; } .imageLink_V7qp:hover, .imageLink_V7qp:focus-visible { opacity: 0.9; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .imageLink_V7qp, .imageLink_V7qp:hover, .imageLink_V7qp:focus-visible { transition: none; transform: none; } } /* Base styles for larger screens */ .discoverItemWrap_hgEo { display: flex; /* Use flexbox layout */ align-items: top; /* Center items vertically */ justify-content: flex-start; /* Align content to the start */ flex-wrap: wrap; gap: 30px; /* Adjust the space between the image and the text */ margin-top: 30px; margin-bottom: 30px; } .imageWrap_w_iD { flex: 1.728; /* Allow the image to grow (bumped ~20% wider on desktop, three times) */ max-width: 51.84rem; /* Maximum width of image (bumped ~20% from 30rem, three times) */ padding-top: 20px; } .textWrap_SyFJ { flex: 2; /* Allow the text to take up twice the space of the image */ max-width: 50rem; /* Maximum width of text */ text-align: left; /* Left align the text */ padding-top: 20px; /* Match .imageWrap's padding-top so the heading lines up with the image's top edge, not above it */ } .textWrap_SyFJ h1 { /* Tighter than the global heading margin (2.75rem top) so this column doesn't open with a big empty gap before its own title. */ margin: 0 0 0.85rem; } .textWrap_SyFJ h2 { font-size: 20px; font-weight: 300; letter-spacing: 0.5px; text-transform: none; margin: 0 0 0.85rem; } .textWrap_SyFJ p { margin-bottom: 0.85rem; } .videoWrap_q5or { position: relative; width: 100%; max-width: 40rem; aspect-ratio: 16 / 9; margin: 0.5rem 0 1.25rem; } .videoWrap_q5or iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; } .flipOrder_Ootm { flex-direction: row-reverse; /* This will place the image on the right */ } /* Styles for smaller screens */ @media (max-width: 768px) { /* Adjust the breakpoint as needed */ .discoverItemWrap_hgEo, .container_pFHF.flipOrder_Ootm { flex-direction: column; /* Stack flex children vertically */ align-items: stretch; /* Stretch children to full width */ } .imageWrap_w_iD, .textWrap_SyFJ { margin-left: 0; margin-right: 0; max-width: 100%; /* Allow image and text to fill the container */ text-align: left; /* Center text for smaller screens */ } .imageWrap_w_iD { margin-bottom: 20px; /* Add space between the image and text */ } } /* Header.module.css */ .header_CJax { text-align: left; /*padding-top: 20px;*/ padding-bottom: 20px; } .header_CJax h6 { font-weight: 700; margin-bottom: 10px; /* Space between title and horizontalBar */ font-size: 1rem; } .horizontalBar_YUKG { height: 1px; /* Thickness of the bar */ width: 80%; /* Full width by default */ transition: width 0.3s ease-in-out; /* Smooth transition for resizing */ } .header_CJax h6 { color: #777778; font-size: 18px; } .horizontalBar_YUKG { background-color: #777778; /* Color of the bar */ } [data-theme="dark"] { .header_CJax h6 { color: #e3e3e3; } .horizontalBar_YUKG { background-color: #e3e3e3; /* Color of the bar */ } } /* White mode when used in darker BackgroundWrappers */ .white_DQkH h6 { color: #ffffff !important; } .white_DQkH .horizontalBar_YUKG { background-color: #ffffff !important; } /* Responsive styles */ @media (max-width: 599px) { .horizontalBar_YUKG { width: 50%; /* Adjust the width as needed for smaller screens */ } } .small_bfV3 { margin-top: 2rem; /* Equivalent to

*/ } .medium_qpXi { margin-top: 4rem; /* Equivalent to



*/ } .large_fU50 { margin-top: 6rem; /* Equivalent to





*/ } /* The section this sits in (gradientDark) has no padding of its own, so the wrapper provides the vertical breathing room and keeps everything — selector included — inside the section. The selector and the panel outline itself come from LanguagePanel. */ .sectionWrap_garK { padding-top: 3.5rem; padding-bottom: 3.5rem; } /* Three columns side by side when there's room; they wrap onto the next line on their own as the panel narrows. */ .panelRow_OLqI { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2.5rem; } .mediaColumn_Y0js { flex: 0 1 320px; max-width: 100%; } .instagramFrame_j8sS { width: 100%; height: 600px; border: 0; border-radius: 8px; background-color: #ffffff; display: block; } .outlineColumn_7j7F { flex: 1 1 240px; min-width: 0; } .scheduleColumn_XhuS { flex: 1 1 280px; min-width: 0; } .scheduleButton_xOEb { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .scheduleImage_ogVj { display: block; width: 100%; height: auto; border-radius: 8px; } .formatBlock_cRoj { margin-top: 2rem; } /* Deliberately much smaller than the content outline above it. */ .formatHeading_pDq3 { font-size: 1.15rem; line-height: 1.2; font-weight: bold; margin: 0; color: #ffffff; } .formatList_a3yH { font-size: 1rem; line-height: 1.45; margin: 0.6rem 0 0; color: #ffffff; } .formatList_a3yH li { margin-bottom: 0.3rem; } /* Same white-on-dark treatment as the "Watch Video" buttons on the home page. */ .bookCallButton_EUtB { margin-top: 1rem; background-color: #fdfdfb; color: #1c1e21; border: none; font-weight: normal; max-width: fit-content; } .bookCallButton_EUtB:hover, .bookCallButton_EUtB:focus { background-color: #cbcbc9; color: #1c1e21; border: none; font-weight: normal; } /* Full-screen view of the schedule image; a tap anywhere (or Escape) closes it. */ .lightbox_F4c1 { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background-color: rgba(0, 8, 30, 0.92); cursor: zoom-out; } .lightboxImage_r78W { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; } .outlineHeading_f7Lk { font-size: 2rem; line-height: 1.1; font-weight: bold; margin: 0; color: #ffffff; } .outlineList_NRv3 { font-size: 1.3rem; margin: 1.25rem 0 0; color: #ffffff; } .outlineList_NRv3 li { margin-bottom: 0.35rem; } /* Styles for smaller screens */ @media (max-width: 768px) { .panelRow_OLqI { flex-direction: column; align-items: stretch; gap: 2rem; } .mediaColumn_Y0js, .scheduleColumn_XhuS { width: 100%; } } /* The panel's outline colour is the only thing that changes between variants, so it is set once here and used by both the selector and the panel. */ .light_isWg { --language-panel-line: #4455bb; /* 45B accent, same family as ProfileChips */ --language-panel-active-text: #ffffff; --language-panel-hover: rgba(68, 85, 187, 0.12); --language-panel-fill: transparent; /* the page background shows through */ } .dark_JvuF { --language-panel-line: #ffffff; /* legible on the dark gradient behind it */ --language-panel-active-text: #0136ae; --language-panel-hover: rgba(255, 255, 255, 0.18); --language-panel-fill: rgba( 0, 20, 70, 0.25 ); /* darkens the gradient slightly so white text stays legible */ } .dark_JvuF .panel_Hv_F { color: #ffffff; } /* Selector: centered on the panel's top edge. Its bottom sits 3px into the panel's border so the active tab merges into the panel outline. */ .tabList_cpwO { display: flex; justify-content: center; flex-wrap: nowrap; max-width: 100%; width: fit-content; margin: 0 auto -3px; position: relative; z-index: 2; border: 3px solid var(--language-panel-line); border-bottom: none; border-radius: 12px 12px 0 0; overflow: hidden; } .tabButton_zd0t { padding: 0.7rem 2.2rem; background-color: transparent; color: var(--language-panel-line); border: none; cursor: pointer; font-family: Chivo, sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.2; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out; } .tabLabelShort_a2QB { display: none; } .tabButton_zd0t + .tabButton_zd0t { border-left: 3px solid var(--language-panel-line); } .tabButton_zd0t:hover { background-color: var(--language-panel-hover); color: var(--language-panel-line); } .tabButtonActive_EY95, .tabButtonActive_EY95:hover { /* fills over the panel border below -> merged */ background-color: var(--language-panel-line); color: var(--language-panel-active-text); } /* Panel: full width of the section's content area. */ .panel_Hv_F { position: relative; width: 100%; border: 3px solid var(--language-panel-line); border-radius: 12px; padding: 2.5rem 2rem; background-color: var(--language-panel-fill); } @media (max-width: 768px) { .panel_Hv_F { padding: 2rem 1.25rem; } } /* Four tabs, so the full names stop fitting well before the panel does. */ @media (max-width: 900px) { .tabButton_zd0t { padding: 0.6rem 1.2rem; font-size: 0.9rem; } } @media (max-width: 560px) { .tabLabelFull_FKnP { display: none; } .tabLabelShort_a2QB { display: inline; } .tabButton_zd0t { padding: 0.6rem 1.1rem; font-size: 0.95rem; letter-spacing: 0.03em; } } /* Plain white in light mode, plain black in dark mode — the one flat band on a page otherwise built from gradients and photographs, so the schedule reads as information rather than as more marketing. Both colours are set explicitly rather than inherited: this section sits directly between a dark gradient above and the footer below, and must not pick up either. The content inside sits in the same outlined pane as the overview section ("What is it? How can I use it?") — LanguagePanel's light variant, drawn with showSelector={false} because this section has no language to switch. That pane's fill is transparent, so the white/black set here is what shows through it. */ .section_eRtn { background-color: #ffffff; color: #1c1e21; /* Less on top than the bottom: the #upcoming anchor's Divider contributes a small spacer of its own above the pane. */ padding: 2rem 0 3.5rem; } [data-theme="dark"] .section_eRtn { background-color: #000000; color: #f5f5f5; } /* The hero's accent amber — the same colour as "— Ending this September!" in the

at the top of the page, tying the schedule to the deadline it belongs to. The hero's exact #ffc857 is kept for dark mode, where it sits on black at 13.6:1. It cannot be used in light mode: on this section's white it falls to 1.54:1, well under the 3:1 large-text floor, and reads as a smear rather than a heading. Light mode therefore uses the same amber darkened to #a06f00 (4.4:1), which is the nearest thing to "the same colour" that is actually readable. To force the hero value in both, delete the light rule below and use #ffc857 here. */ .heading_LUMP { font-size: 2rem; line-height: 1.1; font-weight: bold; margin: 0; color: #a06f00; } [data-theme="dark"] .heading_LUMP { color: #ffc857; } .intro_uL3X { font-size: 1.05rem; line-height: 1.5; margin: 0.75rem 0 0; max-width: 46rem; color: inherit; } .placeholder_sQEI { font-size: 1.05rem; margin: 1.75rem 0 0; opacity: 0.8; color: inherit; } .emptyLink_fSKy { color: inherit; text-decoration: underline; font-weight: bold; } /* A long session title must scroll this box, never the page. */ .tableWrap_fpcs { margin-top: 1.75rem; overflow-x: auto; } .table_FXaD { width: 100%; border-collapse: collapse; display: table; /* Docusaurus styles tables as inline-block */ margin: 0; } .table_FXaD th, .table_FXaD td { text-align: left; vertical-align: middle; padding: 0.85rem 1rem 0.85rem 0; border: none; border-bottom: 1px solid rgba(28, 30, 33, 0.15); background: none; color: inherit; } [data-theme="dark"] .table_FXaD th, [data-theme="dark"] .table_FXaD td { border-bottom-color: rgba(245, 245, 245, 0.2); } .table_FXaD th { font-size: 0.8rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; white-space: nowrap; } .table_FXaD tr:last-child td { border-bottom: none; } .title_kXvn { font-size: 1.05rem; font-weight: bold; } /* Which language the session itself is held in — #4 (EN) and #5 (PT) run in parallel, so this is the column that tells them apart. */ .langBadge_O2au { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.4rem; border: 1px solid currentColor; border-radius: 4px; font-size: 0.7rem; font-weight: bold; letter-spacing: 0.04em; opacity: 0.7; vertical-align: 0.1em; } .day__xWs { display: block; font-weight: bold; white-space: nowrap; } .time_uO5K { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; } .zone_xdNs { opacity: 0.6; font-size: 0.9em; } .todayBadge_R79v { display: inline-block; margin-right: 0.45rem; padding: 0.1rem 0.45rem; border-radius: 4px; background-color: #1c1e21; color: #ffffff; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: 0.1em; } [data-theme="dark"] .todayBadge_R79v { background-color: #ffffff; color: #000000; } .buttonRow_bD8V { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* Outline buttons: three of them on every row, so a filled treatment would shout louder than the session titles they belong to. */ .calButton_ccAU { padding: 0.3rem 0.75rem; font-size: 0.85rem; font-weight: normal; line-height: 1.4; border: 1px solid rgba(28, 30, 33, 0.4); border-radius: 6px; background-color: transparent; color: inherit; cursor: pointer; white-space: nowrap; } .calButton_ccAU:hover, .calButton_ccAU:focus { background-color: #1c1e21; color: #ffffff; border-color: #1c1e21; text-decoration: none; } [data-theme="dark"] .calButton_ccAU { border-color: rgba(245, 245, 245, 0.45); } [data-theme="dark"] .calButton_ccAU:hover, [data-theme="dark"] .calButton_ccAU:focus { background-color: #ffffff; color: #000000; border-color: #ffffff; } /* On a phone the three columns cannot sit side by side, so each row becomes a stacked block and the header row is dropped — every cell carries its own label through data-label instead. */ @media (max-width: 768px) { .table_FXaD, .table_FXaD tbody, .table_FXaD tr, .table_FXaD td { display: block; width: 100%; } .table_FXaD thead { display: none; } .table_FXaD tr { padding: 1rem 0; border-bottom: 1px solid rgba(28, 30, 33, 0.15); } [data-theme="dark"] .table_FXaD tr { border-bottom-color: rgba(245, 245, 245, 0.2); } .table_FXaD tr:last-child { border-bottom: none; } .table_FXaD td { padding: 0.35rem 0; border-bottom: none; } .table_FXaD td::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; margin-bottom: 0.2rem; } } /* --------------------------------------------------------------------------- "Review past calls" — the way out to learn.45b.io, under the panel rather than inside it. --------------------------------------------------------------------------- */ .pastCallsRow_tl7A { display: flex; justify-content: center; width: 100%; margin: 1.75rem 0 0; } /* The secondary of the pair, and outlined rather than filled — .btn-secondary in the org design system (notes/45b-design.md), which is also why it is a 30px pill. Two filled buttons a screen apart competed with each other; an outline ranks this one below the amber apply button without making it quieter to read, and it carries the same 700 weight, so colour and fill do all of the ranking. The indigo is the org accent (#4455BB). Infima's .button--primary is deliberately NOT on the element — it would fill the background — so every state is spelled out here. */ .pastCallsButton_ZXH5 { padding: 0.85rem 2.6rem; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; border-radius: 30px; background-color: transparent; border: 2px solid #4455bb; color: #4455bb; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .pastCallsButton_ZXH5:hover, .pastCallsButton_ZXH5:focus-visible { background-color: #4455bb; border-color: #4455bb; color: #ffffff; } /* On black, the indigo drops to about 3.1:1 — readable for a large label but no more than that, so dark mode uses the lighter member of the same family (the site's own dark-mode primary) at 6.4:1. */ [data-theme="dark"] .pastCallsButton_ZXH5 { border-color: #6684ce; color: #6684ce; } [data-theme="dark"] .pastCallsButton_ZXH5:hover, [data-theme="dark"] .pastCallsButton_ZXH5:focus-visible { background-color: #6684ce; color: #121314; } @media (prefers-reduced-motion: reduce) { .pastCallsButton_ZXH5 { transition: none; } } @media (max-width: 768px) { .pastCallsButton_ZXH5 { padding: 0.8rem 1.8rem; font-size: 1.05rem; } } .applyRow_s5_t { display: flex; justify-content: center; width: 100%; margin: 1.5rem 0 2.5rem; } /* Amber, not the site's primary blue: this is the hero's accent — the exact colour of "— Ending this September!" in the

— so the strongest call to action on the page wears the deadline that makes it urgent. The blue it used to wear now belongs to "Review past calls" under the Upcoming calls panel, which keeps the two apart at a glance. Shape follows the org design system (notes/45b-design.md): a 30px pill, and hovers mixed from the fill colour rather than hardcoded as a second hex. Weight matches the secondary button at 700 — colour is doing the work of ranking these two, so the type does not need to as well. The class is doubled to out-specify Infima's .button--primary, which is still on the element for its sizing and focus behaviour. The label is near-black because amber is a light fill (white on it came out at 1.8:1). The edge is a soft shadow rather than the darker-amber border it had first: the border muddied the fill where the two met, and the shadow lifts the button off a pale page without touching its colour. */ .applyButton_Aw0P { position: relative; overflow: hidden; /* keeps the shine clipped to the button */ padding: 1.1rem 3.4rem; font-size: 1.35rem; font-weight: 700; border-radius: 30px; } .applyButton_Aw0P.applyButton_Aw0P { background-color: #ffc857; border: none; color: #1c1e21; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 6px 18px rgba(160, 111, 0, 0.32); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .applyButton_Aw0P.applyButton_Aw0P:hover, .applyButton_Aw0P.applyButton_Aw0P:focus-visible { background-color: color-mix(in srgb, #ffc857 80%, #ffffff); color: #1c1e21; box-shadow: 0 8px 22px rgba(160, 111, 0, 0.42); transform: translateY(-1px); } .applyButton_Aw0P.applyButton_Aw0P:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(160, 111, 0, 0.32); } @media (prefers-reduced-motion: reduce) { .applyButton_Aw0P.applyButton_Aw0P { transition: none; } .applyButton_Aw0P.applyButton_Aw0P:hover, .applyButton_Aw0P.applyButton_Aw0P:focus-visible { transform: none; } } /* On the dark ground the amber glow would read as haze, so the lift comes from the fill alone. */ [data-theme="dark"] .applyButton_Aw0P.applyButton_Aw0P { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } .applyLabel_gU7P { position: relative; z-index: 1; /* label stays above the shine */ } /* A narrow diagonal highlight that flies across the button, then waits out the rest of the cycle before coming back. */ .applyButton_Aw0P::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 40%; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-250%) skewX(-20deg); animation: applyShine_Ocl2 5s ease-in-out infinite; pointer-events: none; } @keyframes applyShine_Ocl2 { 0% { transform: translateX(-250%) skewX(-20deg); } 18% { transform: translateX(350%) skewX(-20deg); } 100% { transform: translateX(350%) skewX(-20deg); } } @media (prefers-reduced-motion: reduce) { .applyButton_Aw0P::after { animation: none; } } @media (max-width: 768px) { .applyButton_Aw0P { padding: 0.95rem 2.2rem; font-size: 1.15rem; } } /* --------------------------------------------------------------------------- The "two ways in" modal opened by the button above. Layout is two equal cards with a small "and" between them — deliberately not an either/or choice. --------------------------------------------------------------------------- */ .overlay_TKVq { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; overflow-y: auto; background-color: rgba(0, 8, 30, 0.92); animation: applyOverlayIn_gplk 160ms ease-out; } .dialog_KpPX { position: relative; width: 100%; max-width: 46rem; margin: auto; padding: 2.5rem 2.25rem 2rem; border-radius: 14px; background-color: var(--ifm-background-surface-color, #fdfdfb); color: var(--ifm-font-color-base, #1c1e21); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); animation: applyDialogIn_bBNT 200ms ease-out; } .dialog_KpPX:focus { outline: none; } .closeButton_kn90 { position: absolute; top: 0.5rem; right: 0.75rem; padding: 0.25rem 0.5rem; border: none; background: none; color: inherit; font-size: 1.9rem; line-height: 1; opacity: 0.55; cursor: pointer; } .closeButton_kn90:hover, .closeButton_kn90:focus { opacity: 1; } /* Warning-coloured banner at the top of the dialog, used by the languages with no live cohort (es, fr) to say the sign-up is for the Async + Q&A format. The right padding keeps the text clear of the close button. */ .dialogNotice_Kg42 { margin: 0 0 1.25rem; padding: 0.8rem 2.25rem 0.8rem 0.9rem; border-left: 4px solid var(--ifm-color-warning, #e6a700); border-radius: 6px; background-color: rgba(230, 167, 0, 0.16); font-size: 0.9rem; font-weight: 600; line-height: 1.5; } .dialogTitle_iFqQ { margin-bottom: 0.75rem; font-size: 1.6rem; line-height: 1.25; } .dialogIntro_zQcn { margin-bottom: 1.75rem; font-size: 1rem; line-height: 1.55; opacity: 0.85; } .cardGrid_R5J1 { display: flex; align-items: stretch; /* the intro is optional, so the gap above the cards lives here — it collapses with the intro's bottom margin when there is one, and still clears the cards' overhanging step badges when there is not */ margin-top: 1.75rem; gap: 0.75rem; } .card_Qw1X { position: relative; flex: 1 1 0; display: flex; flex-direction: column; padding: 1.5rem 1.25rem 1.25rem; border: 1px solid var(--ifm-color-emphasis-300, #d8d8d4); border-radius: 10px; } /* The step number sits on the card's top edge. */ .cardStep_ntVc { position: absolute; top: -0.85rem; left: 1.25rem; display: flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background-color: var(--ifm-color-primary, #0033ad); color: #fff; font-size: 0.9rem; font-weight: 700; } .cardTitle_uz4X { margin-bottom: 0.5rem; font-size: 1.1rem; line-height: 1.3; } /* Qualifies the card's title, e.g. which languages a call can be held in. */ .cardTitleNote_KJDW { margin: -0.25rem 0 0.5rem; font-size: 0.85rem; font-style: italic; opacity: 0.7; } .cardText_Ty64 { flex: 1 1 auto; margin-bottom: 1.25rem; font-size: 0.92rem; line-height: 1.5; opacity: 0.85; } .cardButton_dhWm { width: 100%; white-space: normal; } /* "and", not "or" — the visual cue that both cards are wanted. */ .joiner_rhSH { display: flex; align-items: center; flex: 0 0 auto; } .joinerWord_PLEA { padding: 0.15rem 0.5rem; border-radius: 999px; background-color: var(--ifm-color-emphasis-200, #ebebe8); font-size: 0.8rem; font-style: italic; text-transform: lowercase; opacity: 0.8; } .footNote_ZtvN { margin: 1.5rem 0 0; font-size: 0.85rem; line-height: 1.45; text-align: center; opacity: 0.7; } @keyframes applyOverlayIn_gplk { from { opacity: 0; } to { opacity: 1; } } @keyframes applyDialogIn_bBNT { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .overlay_TKVq, .dialog_KpPX { animation: none; } } /* Stacked on narrow screens, with the joiner as a horizontal separator. */ @media (max-width: 700px) { .dialog_KpPX { padding: 2.25rem 1.25rem 1.5rem; } .dialogTitle_iFqQ { font-size: 1.35rem; } .cardGrid_R5J1 { flex-direction: column; gap: 1.25rem; } .joiner_rhSH { justify-content: center; } } .videoRow_OY9K { display: flex; justify-content: center; width: 100%; margin: 2rem 0 1rem; } /* Same geometry as the embed this replaced: 960px is half of a 1920px screen, which is what "half the page" looks like on a typical desktop. It does not grow with the window; min(100%, …) only takes over once the column itself is narrower, and from there it goes edge-to-edge down to mobile. 16/9 matches the source exactly (1920x1080), so nothing is letterboxed. */ .videoWrap_XJ1K { position: relative; width: min(100%, 960px); aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background-color: #0b0b0b; } .video_TWF0 { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Fullscreen hands the wrapper the whole screen, whose shape will not be 16/9. Letting the aspect-ratio rule win there would leave the video in a small box in the middle of a black screen. */ .videoWrap_XJ1K:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; } .videoWrap_XJ1K:fullscreen .video_TWF0 { object-fit: contain; } /* ---- The cover ----------------------------------------------------------- Over the paused and not-yet-started states. Where the cover image goes; a flat dark panel with a play glyph until one is supplied. */ .cover_yFIC { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; /* Inset rather than edge-to-edge, so the cover reads as artwork resting in the frame instead of as the frame itself. A percentage rather than a fixed value: it holds the same proportion at 960px and on a phone, where 19px of inset would eat a third of the picture. ~19px at full width. */ padding: 2%; background-color: #0b0b0b; opacity: 0; visibility: hidden; transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s; pointer-events: none; /* the click layer above takes every tap */ } /* Fitted, never cropped. Equal padding on all four sides makes the available area slightly wider than 16/9 — the same absolute inset costs proportionally more height than width — so `contain` leaves a hair more dark on the left and right than above and below. That is the honest trade: the alternative is cropping the artwork. Its own radius is smaller than the frame's 8px, which is what keeps a rounded shape inside a rounded shape from looking like a mistake. */ .coverImage_MiR3 { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; display: block; } .cover_yFIC[data-visible="true"] { opacity: 1; visibility: visible; transition: opacity 0.15s ease-in-out, visibility 0s; } /* Centred over whatever is behind it, image or flat panel. Absolute rather than a flex child so it sits ON the artwork instead of displacing it. */ .coverGlyph_SEZJ { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.14); color: #ffffff; } /* Over artwork the translucent white disc can vanish into a light area, and dimming the whole image to fix that would be throwing away the thing the cover exists to show. A dark disc instead — the same treatment as the controls, legible on any frame, and it leaves the artwork untouched. */ .coverGlyph_SEZJ[data-over-image="true"] { background-color: rgba(0, 0, 0, 0.55); } .coverGlyph_SEZJ svg { width: 30px; height: 30px; margin-left: 3px; /* a triangle is optically off-centre in a circle */ fill: currentColor; display: block; } /* ---- Controls ------------------------------------------------------------ Sized for a thumb first: 44px is the smallest reliably tappable target, and it is the floor here rather than the desktop size. */ .clickLayer_T_iU { position: absolute; inset: 0; z-index: 2; padding: 0; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .topControls_k4mb { position: absolute; top: 10px; right: 10px; z-index: 3; display: flex; gap: 8px; } .overlayButton_D9WG, .youtubeLink_qd0K { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%; /* The glyphs are white over whatever frame the video happens to be showing; without the disc they disappear on a light shot. */ background-color: rgba(0, 0, 0, 0.55); color: #ffffff; cursor: pointer; -webkit-tap-highlight-color: transparent; } .youtubeLink_qd0K { position: absolute; bottom: 10px; right: 10px; z-index: 3; } .clickLayer_T_iU:focus-visible, .overlayButton_D9WG:focus-visible, .youtubeLink_qd0K:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .glyph_mjHu { width: 22px; height: 22px; fill: currentColor; display: block; pointer-events: none; /* the button takes the click, never the svg */ } /* Wider than it is tall, so it needs its own box or it reads optically small beside the round glyphs. */ .youtubeGlyph_SnoT { width: 21.6px; /* 24 x 0.9 */ height: 15.3px; /* 17 x 0.9 */ fill: currentColor; display: block; pointer-events: none; } /* The YouTube mark stays dim at all times — it is a way out to somewhere else, not one of the controls, and it should never compete with them. Set here, outside the hover block below, so nothing can brighten it. It is also drawn 10% smaller than the two controls: 39.6px against their 44px. The element itself stays 44px, though — the padding plus a content-box background clip shrink only the *painted* disc, so the tap target is unchanged. Below about 44px a target starts needing to be aimed at on a phone, and this is the control someone is most likely to hit by accident on the way to something else. The glyph is scaled by the same 10% so the mark keeps its proportion inside the disc. */ .youtubeLink_qd0K { opacity: 0.45; box-sizing: border-box; padding: 2.2px; background-clip: content-box; } /* Hover does not exist on touch, so there the controls simply stay visible. On a pointer device they rest lower and come up together when the mouse is anywhere over the video — the YouTube mark excepted, deliberately. */ @media (hover: hover) and (pointer: fine) { .overlayButton_D9WG { opacity: 0.65; transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out; } .videoWrap_XJ1K:hover .overlayButton_D9WG, .overlayButton_D9WG:focus-visible { opacity: 1; } .videoWrap_XJ1K:hover .overlayButton_D9WG:hover { background-color: rgba(0, 0, 0, 0.8); } } .chipRow_pslw { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.25rem 0 1.5rem; } /* Base is the 45B accent (#4455BB); the two variants below brighten it so the row reads as one glowing, scannable block. */ .chip_knZj { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; background-color: #4455bb; color: #ffffff; font-size: 0.95rem; font-weight: 600; line-height: 1.3; box-shadow: 0 0 10px rgba(68, 85, 187, 0.45); } .chip_knZj:nth-child(3n + 2) { background-color: #5566d4; box-shadow: 0 0 10px rgba(85, 102, 212, 0.5); } .chip_knZj:nth-child(3n + 3) { background-color: #6b7ce8; box-shadow: 0 0 12px rgba(107, 124, 232, 0.55); } @media (max-width: 768px) { .chip_knZj { font-size: 0.85rem; padding: 0.3rem 0.7rem; } } /* Square edges and a tight fit, so it reads as selected text rather than as a badge. box-decoration-break keeps the padding on every line the text wraps onto instead of only the first and last. */ /* Light mode: selection blue picked off screen. White text sits at 5.3:1 on it. */ .selection_bcuW { background-color: #3367d1; color: #ffffff; padding: 0.1em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Dark mode was never the problem, so it keeps the 45B accent. */ html[data-theme="dark"] .selection_bcuW { background-color: #4455bb; color: #ffffff; } /** backgroundNone */ .backgroundNone_QZ2A { padding-top: 20px; padding-bottom: 20px; } /** backgroundSolidGrey */ .backgroundSolidGrey_UXwu { background-color: #f5f5f5; /*padding: 20px;*/ } [data-theme="dark"] { .backgroundSolidGrey_UXwu { background-color: #242526; } } /** backgroundSolidBlue */ .backgroundSolidBlue_ZtGq { background-color: #5281f7; padding-top: 20px; padding-bottom: 20px; } [data-theme="dark"] { .backgroundSolidBlue_ZtGq { background-color: #5281f7; /* fixme: darker */ } } /** backgroundZoom */ .backgroundZoom_dI_E { background-image: url(/assets/images/hero-header-dots-b281e4387b041f19fb67d4de7bd86725.webp); background-size: 500px; background-repeat: no-repeat; padding-top: 20px; padding-bottom: 20px; } [data-theme="dark"] { .backgroundZoom_dI_E { background-image: url(/assets/images/hero-header-dots-dark-532643ef7d3998ee018e479b7e65d538.webp); } } /** backgroundZoomMini */ .backgroundGradientDark_r7FM { background-image: linear-gradient(315deg, #0133ae, #335cbe); } [data-theme="dark"] { .backgroundGradientDark_r7FM { background-image: linear-gradient(315deg, #0133ae, #0b1f4f); } } /** backgroundGradientLight */ .backgroundGradientLight_wzQ0 { padding-top: 20px; padding-bottom: 20px; background-image: linear-gradient( 315deg, rgb(91, 123, 202), rgb(10, 56, 166) ); } [data-theme="dark"] { .backgroundGradientLight_wzQ0 { background-image: linear-gradient(315deg, rgb(43, 89, 205), rgb(0, 24, 80)); } } /** backgroundAda */ .backgroundAda_yH0w { position: relative; background-image: linear-gradient(rgb(0, 51, 173) 0%, rgb(51, 92, 190) 100%); background-size: contain; background-repeat: no-repeat; padding: 20px; z-index: 0; overflow: hidden; /* don't let the ada Logo bleed into other boxes, although the effect can be nice */ } .backgroundAda_yH0w:before { content: "₳"; z-index: -1; position: absolute; top: -25rem; right: 15vw; opacity: 0.07; font-size: 43rem; /* adjust size of the A */ padding-top: 0px; margin-top: 0px; transform: rotate(7deg); color: #5281f7; } .container_HiXj { position: relative; width: 100%; color: #ffffff; min-height: 14rem; } .boundaryBox_fom_ { max-width: 1200px; width: calc(100% - 2*60px); /* let it grow with the screen size until max-width */ margin-left: auto; /* These two auto margins center the box */ margin-right: auto; /* If you ever have problems with the spacing of your components, make visible with the next line and make sure that the components go right up to the purple border.*/ /* background-color: blueviolet; */ } /* med screen sizes */ @media screen and (max-width: 1200px) { .boundaryBox_fom_ { margin-left: 60px; margin-right: 60px } } /* small screen sizes */ @media screen and (max-width: 576px) { .boundaryBox_fom_ { margin-left: 30px; margin-right: 30px; width: calc(100% - 2*30px); } } /* stylelint-disable docusaurus/copyright-header */ /** * CSS files with the .module.css suffix will be treated as CSS modules * and scoped locally. */ .container_ApWA { display: flex; flex-direction: column; /* Stack children vertically */ align-items: center; /* Center children vertically */ justify-content: center; /* Center children horizontally */ text-align: center; /* Center text for any inline children */ } .taglineContainer_Eeqp { width: 70%; } .iconWrapper_WO7m { position: relative; display: inline-flex; /* Use inline-flex to center content */ align-items: center; /* Vertical center */ justify-content: center; /* Horizontal center */ margin: 0 10px; /* Adjust the spacing between icons */ width: 50px; /* Circle size */ height: 50px; /* Circle size */ border-radius: 50%; /* Make it round */ z-index: 0; } html[data-theme="light"] .iconWrapper_WO7m { color: var(--icon-fg-color, #ffffff); /* Default light theme color */ } html[data-theme="dark"] .iconWrapper_WO7m { color: var(--icon-fg-color, #000000); /* Override for dark theme */ } .iconWrapper_WO7m::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.8rem; /* Adjust size of the circle */ height: 2.8rem; /* Adjust size of the circle */ background-color: var(--icon-bg-color); border-radius: 50%; z-index: -1; transition: background-color 0.15s ease-in-out; } .iconWrapper_WO7m svg { width: 1.5rem; /* Adjust icon size */ height: 1.5rem; /* Adjust icon size */ position: relative; z-index: 1; } .iconMenuWrap_UGfT { position: relative; display: inline-block; } .iconButton_l5wj { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; } .popover_WD87 { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 2px; padding: 6px; white-space: nowrap; background-color: #ffffff; color: #1c1c1c; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); z-index: 10; } .popover_WD87::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #ffffff; } .popoverItem_zpb6 { padding: 6px 14px; border-radius: 6px; color: #1c1c1c !important; text-decoration: none !important; font-size: 0.85rem; } .popoverItem_zpb6:hover { background-color: var(--ifm-color-primary); color: #ffffff !important; } /* screen size changes */ @media screen and (max-width: 966px) { .taglineContainer_Eeqp { width: 100%; } } .teamGrid_oNSU { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 2em; } .teamMember_pXoR { background: #f5f5f5; padding: 20px; border-radius: 8px; text-align: center; } .teamMember_pXoR img { max-width: 100%; border-radius: 50%; margin-bottom: 10px; } .teamMember_pXoR h3 { font-size: 1.2rem; margin-bottom: 5px; margin-top: 5px; /* The card keeps its light background in dark mode, so the name must not inherit the light base font colour — it would go white on near-white. */ color: #1c1e21; } .teamMember_pXoR p { font-size: 0.9rem; color: #777; } .socialLinks_ZLFP a { display: inline-block; margin: 0 8px; text-decoration: none; color: #0077b5; /* Adjust color for style */ font-size: 1.2rem; } .socialLinks_ZLFP a:hover { color: #0056b3; /* Adjust hover color */ } /* Responsive adjustments */ @media (min-width: 1024px) { .teamGrid_oNSU { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .teamGrid_oNSU { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .teamGrid_oNSU { grid-template-columns: 1fr; } } .buttonRow_ypB7 { display: flex; justify-content: center; margin-top: 2em; } .boxWrap_V_vi { width: 100%; padding-top: 0rem; padding-bottom: 3rem; display: flex; align-items: center; color: #ffffff; } .leftColumn_ze8C { display: flex; /* Establish flex container */ flex-direction: column; /* Stack children vertically */ justify-content: center; /* Center children vertically within the container */ align-items: left; /* Center children horizontally */ } .rightColumn_fLpP { display: flex; /* Establish flex container */ flex-direction: column; /* Stack children vertically */ justify-content: center; /* Center children vertically within the container */ align-items: left; /* Center children horizontally */ } /* white style cta button */ .buttonWhite_LFmc { margin-top: 1rem; background-color: #fdfdfb; color: #1c1e21; border: none; font-weight: normal; max-width: fit-content; } .buttonWhite_LFmc:hover, buttonWhite:focus { background-color: #cbcbc9; color: #1c1e21; border: none; font-weight: normal; } .align-button-center_TqbS { margin: 0 auto; /* Center the button within its flex container */ display: flex; /* If not already flex */ justify-content: center; /* Center horizontally */ }