@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.cdnfonts.com/css/bebas-neue?display=swap");
:root {
/* Page background scene */
--bg-scene-color: #1d1d1b;
--bg-planet-op: 0.07;
--bg-graph-op: 0.11;
--bg-snippet-op: 0.09;
--ifm-color-orange-jupyter: #f37726;
--ifm-color-blue-jupyter: #0052cc;
--ifm-color-green-xtensor: #4ecb71;
--ifm-color-grey-condaforge: #7a7865;
--ifm-color-orange-light: #fef9ec;
--ifm-color-indigo-i1: rgb(79, 82, 255);
--ifm-color-primary-p0: #fffbd7;
--ifm-color-primary-p1: #f6f195;
--ifm-color-primary-p2: #1c1c16;
--ifm-text-color-on-primary-p1: #1e1c00;
--ifm-color-secondary-s1: #a0c9ff;
--ifm-color-secondary-s2: #0A0E2E;
--ifm-color-secondary-s3: #00497F;
--ifm-color-neutral-n1: #605e58;
--ifm-color-neutral-n2: #371300;
--ifm-color-neutral-n3: #c8c8c7;
--ifm-color-accent-yellow: #F5E53B;
--ifm-color-accent-red: #E8462A;
--ifm-shadow-card: 0px 2px 12px rgba(160, 140, 40, 0.15);
--ifm-shadow-dialog: 0 8px 16px rgba(0, 0, 0, 0.2);
--ifm-overlay-background: rgba(0, 0, 0, 0.3);
--ifm-text-color: var(--ifm-color-primary-p2);
--ifm-background-color: var(--ifm-bg-neutral);
/* Semantic background roles */
--ifm-bg-neutral: #ffffff; /* default reading surface */
--ifm-bg-brand: #ffffff; /* yellow dropped white throughout */
--ifm-bg-emphasis: var(--ifm-color-secondary-s2); /* CTA / strong contrast navy */
--ifm-bg-light-blue: #edf2fb; /* subtle blue tint section alternation */
--ifm-bg-light-grey: #f5f5f3; /* neutral grey section alternation */
/* footer */
--ifm-background-color-footer: #f5f5f3;
--ifm-text-color-footer: black;
/*popup overlay*/
--ifm-background-color-popup-overlay: gray;
/* Font sizes */
--ifm-font-size-small: 14px;
--ifm-font-size-normal: 18px;
--ifm-font-size-medium: 24px;
--ifm-font-size-main-title: 48px;
--ifm-font-size-secondary-title: 32px;
/*Font families */
--ifm-font-family-roboto: "Roboto";
--ifm-font-family-display: "Bebas Neue";
/* Spacing for margins and paddings */
--ifm-spacing-none: 0px;
--ifm-spacing-2xs: 4px;
--ifm-spacing-xs: 8px;
--ifm-spacing-sm: 12px;
--ifm-spacing-md: 16px;
--ifm-spacing-lg: 24px;
--ifm-spacing-xl: 32px;
--ifm-spacing-2xl: 56px;
--ifm-spacing-3xl: 64px;
--ifm-spacing-4xl: 96px;
--ifm-spacing-5xl: 120px;
--ifm-spacing-6xl: 144px;
--ifm-spacing-7xl: 240px;
--ifm-spacing-8xl: 400px;
--ifm-navbar-item-padding-horizontal: 2px;
--ifm-content-width: 1200px;
}
.flex-full-centered {
display: flex;
align-items: center;
justify-content: center;
}
.flex-horizontally-centered {
display: flex;
justify-content: center;
}
.horizontally-centered {
justify-content: center;
}
.margin-none {
margin: 0;
}
.padding-none {
padding: 0;
}
ul {
padding-left: 0;
margin-left: 0;
}
.container {
max-width: none;
padding: 0;
}
/***footer*****/
.footer__item {
color: var(--ifm-text-color-footer);
}
.footer__copyright {
color: var(--ifm-text-color-footer);
}
.footer {
background-color: var(--ifm-background-color-footer);
color: var(--ifm-text-color-footer);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
max-width: none;
padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl);
}
.footer__col {
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
height: 240px;
}
.row.footer__links {
display: flex;
justify-content: center;
margin: 0;
padding: 0;
color: var(--ifm-text-color-footer);
}
.footer__title {
color: var(--ifm-text-color-footer);
}
.footer__bottom {
margin-top: var(--ifm-spacing-xl);
}
.footer__link-item {
color: var(--ifm-text-color-footer);
}
@media (min-width: 1440px) {
.container {
max-width: none;
}
}
/****** Class that are specific for smaller screens*/
@media (max-width: 996px) {
h1 {
color: var(--ifm-text-color-main-title);
font-family: var(--ifm-font-family-display);
font-size: 44px;
font-style: normal;
font-weight: 900;
line-height: 110%;
letter-spacing: 0;
text-align: center;
padding: 0;
}
h2 {
font-family: var(--ifm-font-family-display);
font-size: 36px;
font-style: normal;
font-weight: 800;
line-height: 115%;
letter-spacing: 0;
text-align: center;
}
p {
font-family: var(--ifm-font-family-roboto);
font-size: 14px;
font-style: normal;
line-height: 150%;
line-height: 20px;
letter-spacing: 0.25px;
padding: 0 var(--ifm-spacing-lg);
}
li {
font-size: 14px;
margin-left: 24px;
}
.link-to-button {
margin-top: var(--ifm-spacing-lg);
margin-bottom: var(--ifm-spacing-lg);
}
}
/* Tablet range: overrides phone sizes for wider mobile viewports. */
@media (max-width: 996px) and (min-width: 600px) {
body h1 {
font-size: 56px;
}
body h2 {
font-size: 42px;
}
body p {
font-size: 16px;
line-height: 24px;
}
}
/****** Class that are specific to larger screens*/
@media (min-width: 996px) {
h1 {
color: var(--ifm-color-primary-p2);
font-family: var(--ifm-font-family-display);
font-size: 64px;
font-style: normal;
font-weight: 900;
line-height: 110%;
letter-spacing: 0;
text-align: start;
padding: 0;
margin: var(--ifm-spacing-md) 0;
}
h2 {
font-family: var(--ifm-font-family-display);
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: 115%;
letter-spacing: 0;
text-align: start;
}
p {
font-family: var(--ifm-font-family-roboto);
font-size: var(--ifm-font-size-normal);
font-style: normal;
letter-spacing: 0.25px;
text-align: left;
}
.link-to-button {
margin-top: var(--ifm-spacing-2xl);
margin-bottom: var(--ifm-spacing-2xl);
}
}
/***********************************************************/
/* Headings inside dark sections need explicit white */
[class*="section_dark"] h1,
[class*="section_dark"] h2,
[class*="section_dark"] h3 {
color: white;
}
/* Single-word red accent inside headings for energy */
.highlight {
color: var(--ifm-color-orange-jupyter);
}
/* Punchy blue tagline used in page header sections */
.page-tagline {
color: var(--ifm-color-blue-jupyter);
font-weight: 700;
padding: 0;
}
/* BD-style red accent bar below section headings */
.page-content h2::after {
content: '';
display: block;
width: 36px;
height: 3px;
background: var(--ifm-color-orange-jupyter);
margin-top: 10px;
clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
}
.page-content h2.text--center::after {
margin-left: auto;
margin-right: auto;
}
@media (max-width: 996px) {
.page-content h2::after {
margin-left: auto;
margin-right: auto;
}
}
/* No red bar on dark-background sections */
[class*="section_dark"] .page-content h2::after {
display: none;
}
/***********************************************************/
.link-to-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
font-family: var(--ifm-font-family-roboto);
border-radius: 35px;
background: var(--ifm-color-secondary-s2);
color: white;
font-size: 15px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.5px;
padding: 14px 36px;
border: none;
text-align: center;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
text-decoration: none;
}
.link-to-button:hover {
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(10, 14, 46, 0.35);
text-decoration: none;
}
.link-to-button:active {
transform: translateY(0);
box-shadow: none;
}
/*
Hyperlink states are crucial for accessibility.
Please double check before changing the rules below.
*/
a {
/*text-decoration: underline;
text-decoration-thickness: var(--pydata-link-underline-thickness);
text-underline-offset: var(--pydata-link-underline-offset);*/
color: var(---ifm-text-color);
}
a:hover,
/* We need to (re)override some of the infima rules to have proper states on
navbar links, table of contents, and docs sidebar links, respectively */
a.navbar__link:hover,
/* Top bar navigation links */
a.table-of-contents__link:hover,
/*Right sidebar links (table of contents) */
a[class^="sidebarItemLink"]:hover
/* The docs sidebar links do not have its own class */
{
/*text-decoration: underline;
text-decoration-thickness: var(--pydata-link-hover-decoration-thickness);
text-decoration-skip-ink: none;
text-decoration-skip: none;*/
}
a:active,
a.navbar__link:active,
a.table-of-contents__link:active,
a[class^="sidebarItemLink"]:active {
text-decoration-thickness: var(--pydata-link-decoration-thickness);
}
/* In some cases, we override the underlines because there are other elements that
already report the state (e.g. borders, background colors, etc) */
a[class^="sidebarItemLink"][aria-current="page"],
/* No underline if this is the current page */
a.navbar__link,
.navbar-sidebar__item,
.menu a,
.navbar__items--right a,
.pagination-nav__link,
a.card,
/* These cards are used in index-like documentation pages */
a.card:hover {
text-decoration: none;
}
/* On these elements, we only rely on background color changes. They are navigation items,
so they are already assumed to be clickable anyway */
.pagination-nav__link:active,
a.card:active,
a.menu__link:active {
background: var(--ifm-bg-neutral);
color: #000;
}
[data-theme="dark"] .pagination-nav__link:active,
[data-theme="dark"] a.card:active,
[data-theme="dark"] a.menu__link:active {
background: black;
color: #fff;
}
/* Animate the top navbar conda-forge logo a bit */
.navbar__logo img:hover {
transform: scale(1.05);
}
.navbar__logo img:active {
transform: scale(1);
}
/* Scroll-adaptive navbar */
.navbar {
transition: background-color 0.25s ease, box-shadow 0.25s ease;
background-color: var(--ifm-navbar-background-color);
}
html[data-bg-dark] {
--bg-scene-color: #ffffff;
--bg-planet-op: 0.10;
--bg-graph-op: 0.15;
--bg-snippet-op: 0.13;
}
html:not([data-navbar-scrolled]) .navbar {
background-color: transparent !important;
box-shadow: none !important;
}
html[data-navbar-scrolled] .navbar {
background-color: var(--ifm-bg-neutral) !important;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08) !important;
}
/* Home page at top: dark links over white hero */
html[data-navbar-home-top] .navbar__link,
html[data-navbar-home-top] .custom_navbar_item {
color: var(--ifm-color-primary-p2);
}
html[data-navbar-home-top] .custom_navbar_item:hover {
background-color: var(--ifm-color-primary-p1);
color: var(--ifm-color-primary-p2);
}
html[data-navbar-home-top] .navbar__link:hover {
color: var(--ifm-color-primary-p2);
}
/* Dark-hero pages (e.g. /notebooklink/): white links over dark section */
html[data-navbar-dark-top] .navbar__link,
html[data-navbar-dark-top] .custom_navbar_item {
color: white;
}
html[data-navbar-dark-top] .custom_navbar_item:hover {
background-color: var(--ifm-color-primary-p1);
color: var(--ifm-color-primary-p2);
}
html[data-navbar-dark-top] .navbar__link:hover {
color: var(--ifm-color-primary-p1);
}
html[data-navbar-dark-top] .github-icon,
html[data-navbar-dark-top] .linkedin-icon,
html[data-navbar-dark-top] .bluesky-icon,
html[data-navbar-dark-top] .mastodon-icon,
html[data-navbar-dark-top] .rss-circle-icon {
filter: invert(1);
}
html[data-navbar-dark-top] .navbar__toggle {
color: white;
}
/* Sidebar opens over a light background reset dark-top overrides */
html[data-navbar-dark-top] .navbar-sidebar a {
color: var(--ifm-color-primary-p2) !important;
}
html[data-navbar-dark-top] .navbar-sidebar a:hover {
color: black !important;
}
html[data-navbar-dark-top] .navbar-sidebar .navbar__logo img {
filter: invert(1);
}
html[data-navbar-dark-top] .navbar-sidebar .github-icon,
html[data-navbar-dark-top] .navbar-sidebar .linkedin-icon,
html[data-navbar-dark-top] .navbar-sidebar .bluesky-icon,
html[data-navbar-dark-top] .navbar-sidebar .mastodon-icon,
html[data-navbar-dark-top] .navbar-sidebar .rss-circle-icon {
filter: none;
}
.navbar__inner {
position: relative;
}
.navbar__inner .navbar__brand {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.theme-layout-navbar-left {
flex: 1;
justify-content: center;
}
@media (max-width: 996px) {
.theme-layout-navbar-left {
justify-content: flex-end;
}
}
.theme-layout-navbar-right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
/* At 9971300px: switch to left-aligned to avoid overlap */
@media (max-width: 1300px) and (min-width: 997px) {
.navbar__inner .navbar__brand {
position: static;
transform: none;
}
.theme-layout-navbar-left {
justify-content: flex-start;
}
.theme-layout-navbar-right {
position: static;
transform: none;
}
.navbar_hide_mid {
display: none;
}
}
/* Tighten item padding at narrower intermediate widths */
@media (max-width: 1150px) and (min-width: 997px) {
.custom_navbar_item {
padding: 6px 8px;
}
}
.custom_navbar_item {
font-family: var(--ifm-font-family-roboto);
height: 36px;
padding: 6px 14px;
text-align: center;
white-space: nowrap;
}
.custom_navbar_item:hover {
background-color: var(--ifm-color-primary-p1);
justify-items: center;
border-radius: 4px;
}
.navbar_notebooklink {
font-family: var(--ifm-font-family-roboto);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 6px 14px;
border: 2px solid var(--ifm-color-orange-jupyter);
border-radius: 4px;
color: var(--ifm-color-orange-jupyter) !important;
white-space: nowrap;
transition: background-color 0.15s ease, color 0.15s ease;
margin-right: var(--ifm-spacing-sm);
}
.navbar_notebooklink:hover {
background-color: var(--ifm-color-orange-jupyter) !important;
color: white !important;
text-decoration: none;
}
html[data-navbar-dark-top] .navbar_notebooklink {
border-color: var(--ifm-color-accent-yellow);
color: var(--ifm-color-accent-yellow) !important;
}
html[data-navbar-dark-top] .navbar_notebooklink:hover {
background-color: var(--ifm-color-accent-yellow) !important;
color: var(--ifm-color-primary-p2) !important;
}
html[data-navbar-scrolled] .navbar__link:hover,
html:not([data-navbar-home-top]) .navbar__link:hover {
color: black;
}
.rss-circle-icon:hover {
opacity: 0.6;
}
.rss-circle-icon:before {
background: url(@site/static/img/socialmedias/RSS.svg);
content: "";
display: flex;
height: 32px;
width: 32px;
background-repeat: no-repeat;
}
.github-icon:hover {
opacity: 0.6;
}
.github-icon:before {
background: url(@site/static/img/socialmedias/GH.svg);
content: "";
display: flex;
height: 32px;
width: 32px;
background-repeat: no-repeat;
}
.linkedin-icon:hover {
opacity: 0.6;
}
.linkedin-icon:before {
background: url(@site/static/img/socialmedias/LinkedIn.svg);
content: "";
display: flex;
height: 32px;
width: 32px;
background-repeat: no-repeat;
}
.bluesky-icon:hover {
opacity: 0.6;
}
.bluesky-icon:before {
background: url(@site/static/img/socialmedias/Bluesky.svg);
content: "";
display: flex;
height: 32px;
width: 32px;
background-repeat: no-repeat;
}
.mastodon-icon:hover {
opacity: 0.6;
}
.mastodon-icon:before {
background: url(@site/static/img/socialmedias/Mastodon.svg);
content: "";
display: flex;
height: 32px;
width: 32px;
background-repeat: no-repeat;
}
.close-button {
background: url(@site/static/img/icons/CloseButton.svg);
content: "";
display: flex;
height: 36px;
width: 36px;
background-repeat: no-repeat;
border: 0px solid;
}
.page-content {
max-width: var(--ifm-content-width);
width: 100%;
margin: 0 auto;
padding-left: var(--ifm-spacing-2xl);
padding-right: var(--ifm-spacing-2xl);
}
@media (max-width: 996px) {
.page-content {
padding-left: var(--ifm-spacing-lg);
padding-right: var(--ifm-spacing-lg);
}
}
/* fix scrolling issue in blog post */
.row {
margin: 0 auto;
}