1f:I[920494,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"ThemeProvider"] 25:I[678415,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"NavigationEvents"] 26:I[982642,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"LinkUpgrader"] 27:I[245155,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"LightboxEnhancer"] 28:I[818466,["/_next/static/chunks/1dlft7ht-6kzk.js","/_next/static/chunks/1xt6zdl-o7wg3.js","/_next/static/chunks/2dqfxeq83i129.js","/_next/static/chunks/2matreab0rub0.js","/_next/static/chunks/0hund3nm1jlh-.js","/_next/static/chunks/3cmvik1zogxvy.js"],"SpeedInsights"] 20:T6a84, :root { /* Layout */ --padding-layout: 0.6rem; --border-radii-layout: 5px; --border-thickness-layout: 1px; --border-type-layout: solid; --border-layout: var(--border-thickness-layout) var(--border-type-layout) var(--color-border-default); --layout-max-width: 900px; --column-spacing: 46px; --page-display: flex; --padding-right: calc(env(safe-area-inset-right) + 96px); --padding-left: calc(env(safe-area-inset-left) + 96px); --padding-right-mobile: calc(env(safe-area-inset-right) + 24px); --padding-left-mobile: calc(env(safe-area-inset-left) + 24px); /* Header */ --header-cover-height: 30vh; --header-title-align: start; --header-icon-align: -112px auto auto auto; --header-display: block; /* Collection header */ --collection-header-border: var(--border-layout); /* Collection table */ --collection-table-cell-padding: calc(var(--padding-layout) - 0.3rem) calc(var(--padding-layout) - 0.1rem); /* Collection list */ --collection-list-item-padding: calc(var(--padding-layout) - 0.5rem); --collection-list-item-border-radii: calc( var(--border-radii-layout) - 1px ); /* Collection card */ --collection-card-padding: 0px; --collection-card-title-padding: 0px; --collection-card-content-padding: var(--padding-layout); --collection-card-border-radii: var(--border-radii-layout); --collection-card-gap: 10px; --collection-card-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px; --collection-card-title-size: 0.875rem; --collection-card-cover-height-small: 128px; --collection-card-cover-size-small: 172px; --collection-card-cover-height-medium: 200px; --collection-card-cover-size-medium: 260px; --collection-card-cover-height-large: 200px; --collection-card-cover-size-large: 320px; --collection-card-icon-display: inline-flex; /* Callout */ --callout-padding: calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.4rem) calc(var(--padding-layout) + 0.1em); --callout-border-radii: calc(var(--border-radii-layout) - 2px); --callout-border: var(--border-layout); --callout-icon-display: block; --callout-shadow: none; /* File */ --file-border-radii: calc(var(--border-radii-layout) - 2px); /* Equation */ --equation-border-radii: calc(var(--border-radii-layout) - 2px); /* Divider */ --divider-border: var(--border-layout); /* Quote */ --quote-border: calc(var(--border-thickness-layout) + 2px) solid currentcolor; /* Code */ --code-padding: calc(var(--padding-layout) + 1.4rem); --code-border-radii: var(--border-radii-layout); /* Tweet */ --tweet-padding: calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.65rem) calc(var(--padding-layout) + 0.05rem) calc(var(--padding-layout) + 0.65rem); --tweet-border-radii: var(--border-radii-layout); --tweet-border: var(--border-layout); /* Bookmark */ --bookmark-padding: calc(var(--padding-layout) + 0.15rem) 0px calc(var(--padding-layout) + 0.025rem) calc(var(--padding-layout) + 0.275rem); --bookmark-border-radii: var(--border-radii-layout); --bookmark-border: var(--border-layout); --bookmark-image-border-radii: 0px calc(var(--border-radii-layout) - 1px) calc(var(--border-radii-layout) - 1px) 0px; /* Embed */ --embed-border-radii: calc(var(--border-radii-layout) - 5px); /* Image */ --image-border-radii: calc(var(--border-radii-layout) - 5px); /* Typography */ --title-size: 2.5rem; --quote-size: 1.2rem; --quote-size-large: 1.4rem; --heading-size: 1rem; --primary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --secondary-font: Inter, Inter-fallback, Helvetica, Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Noto Color Emoji, Segoe UI Symbol, Android Emoji, EmojiSymbols, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Noto Sans, sans-serif; --text-weight: 400; --heading-weight: 600; --heading1-size: calc(var(--heading-size) * 1.875); --heading2-size: calc(var(--heading-size) * 1.5); --heading3-size: calc(var(--heading-size) * 1.25); --heading4-size: calc(var(--heading-size) * 1); --heading5-size: calc(var(--heading-size) * 0.8125); /* Scrollbars */ --scrollbar-width: 15px; /* Navbar */ --navbar-height: 56px; --navbar-shadow: none; --navbar-button-border-radii: 50px; --navbar-list-width-single-column: 320px; --navbar-list-width: 620px; /*Sidebar*/ --sidebar-width: 280px; --sidebar-shadow: none; } html { scroll-padding-top: 62px; } body { font-family: var(--secondary-font); } @charset "UTF-8"; /* ============================================ PRO SESSIONS APEX TRAINING — Foundation Pass ============================================ */ /* Jost — light weights */ @import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&display=swap"); /* --- Cool charcoal ground, sitewide --- */ html, body, .super-root, .super-content, .notion-root { background-color: #12161B !important; } /* --- Base type: Jost light, cool off-white --- */ body, .super-content, .notion-root, p, span, li, a, div, .notion-text { font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif !important; color: #E9ECEF !important; font-weight: 300 !important; letter-spacing: 0.015em !important; } /* --- Headings: extra-light, wide tracking --- */ h1, h2, h3, h4, .notion-h1, .notion-h2, .notion-h3 { font-family: "Jost", sans-serif !important; font-weight: 200 !important; color: #E9ECEF !important; letter-spacing: 0.04em !important; } /* --- Hairline dividers in cool steel --- */ hr, .notion-divider { border-color: rgba(126, 140, 151, 0.25) !important; } /* --- Nav bar + breadcrumb: kill the white band --- */ .notion-navbar, .notion-navbar__content, .notion-breadcrumb, .notion-header { background-color: #12161B !important; background: #12161B !important; box-shadow: none !important; border-bottom: 1px solid rgba(126, 140, 151, 0.15) !important; } /* Nav / breadcrumb text: cool off-white */ .notion-navbar a, .notion-breadcrumb a, .notion-breadcrumb span, .notion-navbar span { color: #E9ECEF !important; font-family: "Jost", sans-serif !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; } /* --- Left spine: shift the whole content wrapper left --- */ .super-content-wrapper, main.super-content, main.page__index { align-items: flex-start !important; padding-left: 7vw !important; padding-right: 4vw !important; } .super-content .notion-root.max-width { margin-left: 0 !important; margin-right: 0 !important; max-width: 900px !important; } /* --- Vertical breathing room between blocks --- */ .notion-text { margin-top: 0.35em !important; margin-bottom: 0.35em !important; line-height: 1.7 !important; } /* More air around the hairline dividers (section breaks) */ .notion-divider, hr { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; } /* Give the big page title room to breathe */ .notion-header.page, .notion-header { padding-top: 6rem !important; padding-bottom: 2rem !important; } /* --- Even out the first section's top spacing --- */ .notion-header.page + .notion-root .notion-text:first-child, .notion-root > .notion-text:first-of-type { margin-top: 2rem !important; } /* Consistent rhythm between stacked text lines */ .notion-root .notion-text { margin-top: 0.15em !important; margin-bottom: 0.15em !important; } /* --- Hide homepage scaffolding (links + instructional note) --- */ /* The six structural page-links shown in the body */ a#block-aikido, a#block-iaido, a#block-urban-combatives, a#block-methodology, a#block-about, a#block-begin { display: none !important; } /* The italic instructional note above the links */ #block-d3f85804fa3444baa95f550e02c1494a { display: none !important; } /* --- Navbar (Simple type) full styling --- */ .notion-navbar, .notion-navbar__content { background-color: #12161B !important; border-bottom: 1px solid rgba(126, 140, 151, 0.15) !important; box-shadow: none !important; } /* Wordmark on the left */ .notion-navbar__title, .notion-navbar a.notion-navbar__logo, .notion-navbar__logo { color: #E9ECEF !important; font-family: "Jost", sans-serif !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; } /* The three menu links on the right */ .notion-navbar a { color: #AEB4BA !important; font-family: "Jost", sans-serif !important; font-weight: 300 !important; font-size: 12px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; transition: color 0.25s ease !important; } /* Links brighten on hover */ .notion-navbar a:hover { color: #E9ECEF !important; } /* --- Simple navbar: correct class names --- */ .super-navbar, .super-navbar.simple, .super-navbar__content { background-color: #12161B !important; background: #12161B !important; border-bottom: 1px solid rgba(126, 140, 151, 0.15) !important; box-shadow: none !important; } /* Wordmark on the left */ .super-navbar__logo { color: #E9ECEF !important; font-family: "Jost", sans-serif !important; font-weight: 400 !important; font-size: 15px !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; } /* The three menu links on the right */ .super-navbar__item { color: #AEB4BA !important; font-family: "Jost", sans-serif !important; font-weight: 300 !important; font-size: 12px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; transition: color 0.25s ease !important; } /* Links brighten on hover */ .super-navbar__item:hover { color: #E9ECEF !important; } /* --- HERO: hide the redundant homepage title only --- */ main#page-index .notion-header.page, main#page-index .notion-header { display: none !important; } /* Give the statement room to breathe as the hero */ main#page-index .notion-root > .notion-text:first-of-type { margin-top: 4rem !important; } /* --- HERO statement: subtly elevate line one, group tightly --- */ main#page-index .notion-root > .notion-text:first-of-type { font-size: 2.4rem !important; font-weight: 300 !important; line-height: 1.3 !important; margin-top: 6rem !important; margin-bottom: 2.2rem !important; max-width: 26ch !important; } /* --- HERO supporting lines: lift to a bridging size --- */ main#page-index .notion-root > .notion-text:nth-of-type(2), main#page-index .notion-root > .notion-text:nth-of-type(3), main#page-index .notion-root > .notion-text:nth-of-type(4) { font-size: 1.2rem !important; line-height: 1.6 !important; margin-top: 0.6rem !important; margin-bottom: 0.6rem !important; } /* --- Keep the brand name together on line two --- */ #block-61c6b547a40b458883cddc20d0c4d70e { text-wrap: balance !important; } /* --- ART DOORS: turn the three art links into rows with arrows --- */ main#page-index .notion-root a.notion-link[href*=aikido], main#page-index .notion-root a.notion-link[href*=iaido], main#page-index .notion-root a.notion-link[href*=urban-combatives] { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; max-width: 640px !important; padding: 22px 4px !important; border-bottom: 1px solid rgba(126, 140, 151, 0.25) !important; color: #E9ECEF !important; text-decoration: none !important; font-size: 1.15rem !important; font-weight: 300 !important; letter-spacing: 0.02em !important; transition: color 0.25s ease, padding-left 0.25s ease !important; } /* Top hairline on the first door */ main#page-index .notion-root a.notion-link[href*=aikido] { border-top: 1px solid rgba(126, 140, 151, 0.25) !important; } /* The diagonal arrow on each door */ main#page-index .notion-root a.notion-link[href*=aikido]::after, main#page-index .notion-root a.notion-link[href*=iaido]::after, main#page-index .notion-root a.notion-link[href*=urban-combatives]::after { content: "↗" !important; color: #AEBDC7 !important; font-size: 1.1rem !important; } /* Hover: brighten + slide right slightly */ main#page-index .notion-root a.notion-link[href*=aikido]:hover, main#page-index .notion-root a.notion-link[href*=iaido]:hover, main#page-index .notion-root a.notion-link[href*=urban-combatives]:hover { color: #FFFFFF !important; padding-left: 12px !important; } /* --- Re-hide the six scaffolding links (they have clean block-[name] IDs) --- */ a#block-aikido, a#block-iaido, a#block-urban-combatives, a#block-methodology, a#block-about, a#block-begin { display: none !important; } /* --- Force-hide scaffolding: higher specificity to beat the door rule --- */ main#page-index .notion-root a#block-aikido, main#page-index .notion-root a#block-iaido, main#page-index .notion-root a#block-urban-combatives, main#page-index .notion-root a#block-methodology, main#page-index .notion-root a#block-about, main#page-index .notion-root a#block-begin { display: none !important; } /* --- Methodology bridge link (quiet underlined text, NOT a door) --- */ main#page-index .notion-root a.notion-link[href*=methodology]:not([id]) { color: #AEBDC7 !important; font-size: 1.05rem !important; font-weight: 300 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; border-bottom: 1px solid rgba(126, 140, 151, 0.4) !important; padding-bottom: 3px !important; transition: color 0.25s ease, border-color 0.25s ease !important; } /* Hover: brighten the text and the underline */ main#page-index .notion-root a.notion-link[href*=methodology]:not([id]):hover { color: #E9ECEF !important; border-color: #AEBDC7 !important; } /* --- Paragraph breathing room on content pages (not the homepage hero) --- */ main:not(#page-index) .notion-root .notion-text { font-size: 1.05rem !important; margin-top: 1.1rem !important; margin-bottom: 1.1rem !important; line-height: 2 !important; } /* CONTENT PAGES: left-align the page title to match the left spine */ main:not(#page-index) { --header-title-align: left !important; } main:not(#page-index) .notion-header__content, main:not(#page-index) .notion-header__title-wrapper { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; margin-left: 0 !important; } main:not(#page-index) .notion-header__title { text-align: left !important; width: fit-content !important; margin-left: 0 !important; margin-right: auto !important; } /* ===== AIKIDO — material band ===== */ main#page-aikido .notion-image.page-width { position: relative; width: 100%; max-width: 1100px; /* band width — tune this */ margin-left: auto; margin-right: auto; margin-top: 6rem; margin-bottom: 6rem; } main#page-aikido .notion-image.page-width img { width: 100% !important; max-width: 100% !important; height: auto !important; /* natural proportions — no re-crop, no zoom */ object-fit: fill !important; border-radius: 0 !important; display: block; } /* material treatment: cool vignette + grain over the image */ main#page-aikido .notion-image.page-width::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, rgba(18, 22, 27, 0) 55%, rgba(18, 22, 27, 0.55) 100%), url("data:image/svg+xml;utf8,"); background-size: cover, 140px 140px; mix-blend-mode: overlay; opacity: 0.5; } /* ===== AIKIDO — Section One beat ("Force is always present…") ===== */ main#page-aikido .notion-root #block-d88e3d88755b4f648777235df5bd1d03 { font-size: 1.6rem !important; font-weight: 300 !important; line-height: 1.35 !important; max-width: 30ch !important; margin-top: 0rem !important; margin-bottom: 0.5rem !important; } /* ===== CONTENT PAGES — lift the title up to match homepage height ===== */ main:not(#page-index) .notion-header, main:not(#page-index) .notion-header__content { padding-top: 3rem !important; margin-top: 0 !important; } main:not(#page-index) .notion-header__cover.no-cover { display: none !important; } /* ===== CONTENT PAGES — remove Super's full-width line under the page title ===== */ main:not(#page-index) .notion-header, main:not(#page-index) .notion-header__content, main:not(#page-index) .notion-header__title-wrapper { border-bottom: 0 !important; box-shadow: none !important; } main:not(#page-index) .notion-header::after, main:not(#page-index) .notion-header__content::after { content: none !important; display: none !important; border: 0 !important; } /* ===== CONTENT PAGES — style "The methodology" door to match homepage ===== */ main:not(#page-index) .notion-root a.notion-link[href*=methodology]:not([id]) { color: #AEBDC7 !important; font-size: 1.05rem !important; font-weight: 300 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; text-decoration: none !important; border-bottom: 1px solid rgba(126, 140, 151, 0.4) !important; padding-bottom: 3px !important; transition: color 0.25s ease, border-color 0.25s ease !important; } /* hover: brighten, matching the homepage */ main:not(#page-index) .notion-root a.notion-link[href*=methodology]:not([id]):hover { color: #E9ECEF !important; border-color: #AEBDC7 !important; } /* ===== IAIDO — Section One beat ("The sword does not respond to effort…") ===== */ main#page-iaido .notion-root #block-e27eb7c73db94e989a0b18147e9bc90c { font-size: 1.6rem !important; font-weight: 300 !important; line-height: 1.35 !important; max-width: 30ch !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; } /* ===== IAIDO — material band ===== */ main#page-iaido .notion-image.page-width { position: relative; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; margin-top: 4rem; margin-bottom: 3rem; } main#page-iaido .notion-image.page-width img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: fill !important; border-radius: 0 !important; display: block; } /* material treatment: cool vignette + grain over the image */ main#page-iaido .notion-image.page-width::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, rgba(18, 22, 27, 0) 55%, rgba(18, 22, 27, 0.55) 100%), url("data:image/svg+xml;utf8,"); background-size: cover, 140px 140px; mix-blend-mode: overlay; opacity: 0.5; } /* ===== HOMEPAGE — lift the lower body paragraphs to match site rhythm ===== */ main#page-index .notion-root .notion-text { font-size: 1.05rem !important; } /* ===== URBAN COMBATIVES — Section One beat ===== */ main#page-urban-combatives .notion-root #block-2749c41043ca4dc698717cb4fc0e8aed { font-size: 1.6rem !important; font-weight: 300 !important; line-height: 1.5 !important; max-width: 30ch !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; } /* ===== URBAN COMBATIVES — image band ===== */ main#page-urban-combatives #block-3aae12447922800979177d849c901d972 { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; margin-top: 3rem !important; margin-bottom: 3rem !important; } main#page-urban-combatives #block-3aae12447922800979177d849c901d972 img { width: 100vw !important; max-width: 100vw !important; height: auto !important; object-fit: cover !important; display: block !important; border-radius: 0 !important; filter: brightness(0.92) contrast(1.05) saturate(0.95) !important; } /* ===== URBAN COMBATIVES — image band (matches Aikido/Iaido) ===== */ main#page-urban-combatives .notion-image.page-width { position: relative; width: 100%; max-width: 1100px; margin-left: auto; margin-right: auto; margin-top: 4rem; margin-bottom: 4rem; } main#page-urban-combatives .notion-image.page-width img { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: fill !important; border-radius: 0 !important; display: block; filter: brightness(0.92) contrast(1.05) saturate(0.95); } /* material treatment: cool vignette + grain over the image */ main#page-urban-combatives .notion-image.page-width::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 45%, rgba(18, 22, 27, 0) 55%, rgba(18, 22, 27, 0.55) 100%), url("data:image/svg+xml;utf8,"); background-size: cover, 140px 140px; mix-blend-mode: overlay; opacity: 0.5; } /* ===== ART PAGES — tighten divider spacing ===== */ main#page-aikido .notion-divider, main#page-iaido .notion-divider, main#page-urban-combatives .notion-divider { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } /* ===== SITE-WIDE GRAIN — fine material layer over the whole page ===== */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml;utf8,"); background-size: 140px 140px; mix-blend-mode: overlay; opacity: 0.05; } /* ===== MOBILE NAV MENU — dark panel (fixes white dropdown on iPhone) ===== */ .super-navbar__menu, .super-navbar__mobile, .super-navbar__mobile-menu, .super-navbar__dropdown, .super-navbar__menu-content, .notion-navbar__menu { background-color: #12161B !important; background: #12161B !important; border: 1px solid rgba(126, 140, 151, 0.2) !important; box-shadow: none !important; } .super-navbar__menu a, .super-navbar__mobile a, .super-navbar__mobile-menu a, .super-navbar__dropdown a, .super-navbar__menu .super-navbar__item, .notion-navbar__menu a { color: #E9ECEF !important; font-family: "Jost", sans-serif !important; font-weight: 300 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; } /* ===== MOBILE NAV — kill the white "current page" pill ===== */ .super-navbar__item--active, .super-navbar__item.active, .super-navbar__menu a[aria-current], .super-navbar__mobile a[aria-current], .super-navbar__menu .active, .super-navbar__mobile .active, .super-navbar a[aria-current=page] { background-color: transparent !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; color: #AEBDC7 !important; } /* ===== BEGIN PAGE — GHL form embed ===== */ main#page-begin .notion-embed, main#page-begin iframe { height: 760px !important; min-height: 760px !important; width: 100% !important; max-width: 640px !important; margin-left: 0 !important; margin-right: auto !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* BEGIN — kill the Notion embed border */ main#page-begin .notion-embed, main#page-begin .notion-embed *, main#page-begin [class*=embed], main#page-begin [class*=embed] * { border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; } /* ===== PAGE FOOT — kill Super's default bottom padding (site-wide) ===== */ .notion-root { padding-bottom: 3rem !important; } /* ===== END PAGE FOOT ===== */ /* ===== BEGIN PAGE — flow/spacing (this page only) ===== */ main#page-begin .notion-header { padding-bottom: 0.5rem !important; } main#page-begin .notion-root .notion-text { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; } main#page-begin .notion-divider { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } /* ===== END BEGIN PAGE FLOW ===== */ /* ===== MOBILE — hero (phones only) ===== */ @media (max-width: 700px) { main#page-index .notion-root > .notion-text:first-of-type { font-size: 2rem !important; max-width: 100% !important; margin-top: 2rem !important; } main#page-index .notion-header { padding-top: 0 !important; padding-bottom: 0 !important; } } /* ===== END MOBILE HERO ===== */ /* ===== MOBILE — content-page top gap (phones only) ===== */ @media (max-width: 700px) { main:not(#page-index) .notion-header { padding-top: 2rem !important; padding-bottom: 0.5rem !important; } main:not(#page-index) .notion-header__content { margin-top: 0 !important; padding-top: 0 !important; } } /* ===== END MOBILE CONTENT TOP GAP ===== */ /* ===== FOOTER — charcoal ground (added 08/07) ===== */ .super-footer { background-color: #12161B !important; background: #12161B !important; box-shadow: none !important; } .super-footer__content { background-color: transparent !important; background: transparent !important; } /* ===== END FOOTER ===== */ /* ===== FOOTER — footnote weight (added 08/07) ===== */ .super-footer__footnote { font-size: 0.8rem !important; font-weight: 300 !important; color: #7E8C97 !important; opacity: 1 !important; letter-spacing: 0.08em !important; } /* ===== END FOOTER FOOTNOTE ===== */ /* ===== FOOTER — padding (added 08/07) ===== */ .super-footer { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* ===== END FOOTER PADDING ===== */ 21:T5aa6, html.theme-light { /* Gray */ --gray-h: 36; --gray-s: 2%; --gray-l: 46%; --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)); --color-text-gray: var(--color-gray); --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 90% ); --color-bg-gray-light: var(--color-bg-gray); --color-pill-gray: hsl( calc(var(--gray-h) + 14), var(--gray-s), 88% ); --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) ); --color-bg-form-btn-gray: #A7A39A; /* Brown */ --brown-h: 19; --brown-s: 31%; --brown-l: 47%; --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)); --color-text-brown: var(--color-brown); --color-bg-brown: hsl( var(--brown-h), var(--brown-s), 90% ); --color-bg-brown-light: var(--color-bg-brown); --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), 89% ); --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) + 10%), calc(var(--brown-l) - 28%) ); --color-bg-form-btn-brown: #9A6851; /* Orange */ --orange-h: 30; --orange-s: 87%; --orange-l: 45%; --color-orange: hsl( var(--orange-h), var(--orange-s), var(--orange-l) ); --color-text-orange: var(--color-orange); --color-bg-orange: hsl( var(--orange-h), var(--orange-s), 90% ); --color-bg-orange-light: var(--color-bg-orange); --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) - 6%), 87% ); --color-pill-text-orange: hsl( calc(var(--orange-h) - 5), calc(var(--orange-s) - 18%), calc(var(--orange-l) - 28%) ); --color-bg-form-btn-orange: #D9730D; /* Yellow */ --yellow-h: 38; --yellow-s: 62%; --yellow-l: 49%; --color-yellow: hsl( var(--yellow-h), var(--yellow-s), var(--yellow-l) ); --color-text-yellow: var(--color-yellow); --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) + 90%), 90% ); --color-bg-yellow-light: var(--color-bg-yellow); --color-pill-yellow: hsl( calc(var(--yellow-h) + 3), calc(var(--yellow-s) + 24%), 90% ); --color-pill-text-yellow: hsl( calc(var(--yellow-h) - 11), calc(var(--yellow-s) - 22%), calc(var(--yellow-l) - 28%) ); --color-bg-form-btn-yellow: #CA922F; /* Green */ --green-h: 149; --green-s: 31%; --green-l: 39%; --color-green: hsl(var(--green-h), var(--green-s), var(--green-l)); --color-text-green: var(--color-green); --color-bg-green: hsl( var(--green-h), var(--green-s), 90% ); --color-bg-green-light: var(--color-bg-green); --color-pill-green: hsl( calc(var(--green-h) - 28), calc(var(--green-s) + 3%), 89% ); --color-pill-text-green: hsl( calc(var(--green-h) - 2), var(--green-s), calc(var(--green-l) - 22%) ); --color-bg-form-btn-green: #448361; /* Blue */ --blue-h: 202; --blue-s: 53%; --blue-l: 43%; --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --color-text-blue: var(--color-blue); --color-bg-blue: hsl( var(--blue-h), var(--blue-s), 90% ); --color-bg-blue-light: var(--color-bg-blue); --color-pill-blue: hsl( var(--blue-h), calc(var(--blue-s) - 5%), 85% ); --color-pill-text-blue: hsl( calc(var(--blue-h) + 7), calc(var(--blue-s) - 6%), calc(var(--blue-l) - 22%) ); --color-bg-form-btn-blue: #327DA9; /* Purple */ --purple-h: 274; --purple-s: 32%; --purple-l: 54%; --color-purple: hsl( var(--purple-h), var(--purple-s), var(--purple-l) ); --color-text-purple: var(--color-purple); --color-bg-purple: hsl( var(--purple-h), var(--purple-s), 90% ); --color-bg-purple-light: var(--color-bg-purple); --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) + 5%), 90% ); --color-pill-text-purple: hsl( calc(var(--purple-h) + 1), calc(var(--purple-s) + 10%), calc(var(--purple-l) - 31%) ); --color-bg-form-btn-purple: #8F64AF; /* Pink */ --pink-h: 328; --pink-s: 48%; --pink-l: 53%; --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)); --color-text-pink: var(--color-pink); --color-bg-pink: hsl( var(--pink-h), var(--pink-s), 90% ); --color-bg-pink-light: var(--color-bg-pink); --color-pill-pink: hsl( var(--pink-h), var(--pink-s), 90% ); --color-pill-text-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 14%), calc(var(--pink-l) - 31%) ); --color-bg-form-btn-pink: #C24C8B; /* Red */ --red-h: 2; --red-s: 62%; --red-l: 55%; --color-red: hsl(var(--red-h), var(--red-s), var(--red-l)); --color-text-red: var(--color-red); --color-bg-red: hsl( var(--red-h), var(--red-s), 90% ); --color-bg-red-light: var(--color-bg-red); --color-pill-red: hsl( calc(var(--red-h) + 6), calc(var(--red-s) + 42%), 90% ); --color-pill-text-red: hsl( calc(var(--red-h) + 0), var(--red-s), calc(var(--red-l) - 32%) ); --color-bg-form-btn-red: #D44E49; /*Default*/ --default-h: 45; --default-s: 8%; --default-l: 20%; --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) ); --color-pill-default: hsl( var(--gray-h), var(--gray-s), 90% ); --color-pill-text-default: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) - 28%) ); --color-bg-form-btn-default: #55534E; /*Other*/ --color-text-default: #37352F; --color-text-default-light: #7d7c78; --color-bg-default: #ffffff; --color-border-default: #E9E9E7; --color-border-dark: var(--color-border-default); --color-ui-hover-bg: #efefef; --color-card-bg: #ffffff; --color-card-bg-hover: #f9f9f8; --color-calendar-weekend-bg: #f7f6f3; --color-checkbox-bg: #2EAADC; --color-code-bg: rgba(135,131,120,.15); /*Scrollbar*/ --scrollbar-background-color: #FAFAFA; --scrollbar-thumb-color: #C1C1C1; --scrollbar-border-color: #E8E8E8; /*Navbar*/ --navbar-text-color: #37352F; --navbar-list-item-hover: rgba(130, 130, 130, 0.09); --navbar-background-color-hover: #f0f0f0; --navbar-background-color: #ffffff; --navbar-button-text-color: #ffffff; --navbar-button-background-color: #37352F; --navbar-menu-background-color: var(--navbar-background-color); --navbar-text-color-dark: #282620; /*Footer*/ --footer-text-color: #37352F; --footer-background-color: #ffffff; /*Sidebar*/ --sidebar-text-color: #37352F; --sidebar-cta-text-color: #37352F; --sidebar-background-color: #ffffff; --sidebar-cta-background-color: #ffffff; --sidebar-border-color: #E9E9E7; --sidebar-background-color-hover: #efefef; --sidebar-text-color-dark: #282620; --sidebar-cta-background-color-hover: #efefef; } /** * One Light theme for prism.js * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax */ /** * One Light colours (accurate as of commit eb064bf on 19 Feb 2021) * From colors.less * --mono-1: hsl(230, 8%, 24%); * --mono-2: hsl(230, 6%, 44%); * --mono-3: hsl(230, 4%, 64%) * --hue-1: hsl(198, 99%, 37%); * --hue-2: hsl(221, 87%, 60%); * --hue-3: hsl(301, 63%, 40%); * --hue-4: hsl(119, 34%, 47%); * --hue-5: hsl(5, 74%, 59%); * --hue-5-2: hsl(344, 84%, 43%); * --hue-6: hsl(35, 99%, 36%); * --hue-6-2: hsl(35, 99%, 40%); * --syntax-fg: hsl(230, 8%, 24%); * --syntax-bg: hsl(230, 1%, 98%); * --syntax-gutter: hsl(230, 1%, 62%); * --syntax-guide: hsla(230, 8%, 24%, 0.2); * --syntax-accent: hsl(230, 100%, 66%); * From syntax-variables.less * --syntax-selection-color: hsl(230, 1%, 90%); * --syntax-gutter-background-color-selected: hsl(230, 1%, 90%); * --syntax-cursor-line: hsla(230, 8%, 24%, 0.05); */ html.theme-light code[class*="language-"], html.theme-light pre[class*="language-"] { color: hsl(230, 8%, 24%); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Selection */ html.theme-light code[class*="language-"]::-moz-selection, html.theme-light code[class*="language-"] *::-moz-selection, html.theme-light pre[class*="language-"] *::-moz-selection { background: hsl(230, 1%, 90%); color: inherit; } html.theme-light code[class*="language-"]::selection, html.theme-light code[class*="language-"] *::selection, html.theme-light pre[class*="language-"] *::selection { background: hsl(230, 1%, 90%); color: inherit; } /* Code blocks */ html.theme-light pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ html.theme-light :not(pre) > code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.3em; white-space: normal; } html.theme-light .token.comment, html.theme-light .token.prolog, html.theme-light .token.cdata { color: hsl(230, 4%, 64%); } html.theme-light .token.doctype, html.theme-light .token.punctuation, html.theme-light .token.entity { color: hsl(230, 8%, 24%); } html.theme-light .token.attr-name, html.theme-light .token.class-name, html.theme-light .token.boolean, html.theme-light .token.constant, html.theme-light .token.number, html.theme-light .token.atrule { color: hsl(35, 99%, 36%); } html.theme-light .token.keyword { color: hsl(301, 63%, 40%); } html.theme-light .token.property, html.theme-light .token.tag, html.theme-light .token.symbol, html.theme-light .token.deleted, html.theme-light .token.important { color: hsl(5, 74%, 59%); } html.theme-light .token.selector, html.theme-light .token.string, html.theme-light .token.char, html.theme-light .token.builtin, html.theme-light .token.inserted, html.theme-light .token.regex, html.theme-light .token.attr-value, html.theme-light .token.attr-value > .token.punctuation { color: hsl(119, 34%, 47%); } html.theme-light .token.variable, html.theme-light .token.operator, html.theme-light .token.function { color: hsl(221, 87%, 60%); } html.theme-light .token.url { color: hsl(198, 99%, 37%); } /* HTML overrides */ html.theme-light .token.attr-value > .token.punctuation.attr-equals, html.theme-light .token.special-attr > .token.attr-value > .token.value.css { color: hsl(230, 8%, 24%); } /* CSS overrides */ html.theme-light .language-css .token.selector { color: hsl(5, 74%, 59%); } html.theme-light .language-css .token.property { color: hsl(230, 8%, 24%); } html.theme-light .language-css .token.function, html.theme-light .language-css .token.url > .token.function { color: hsl(198, 99%, 37%); } html.theme-light .language-css .token.url > .token.string.url { color: hsl(119, 34%, 47%); } html.theme-light .language-css .token.important, html.theme-light .language-css .token.atrule .token.rule { color: hsl(301, 63%, 40%); } /* JS overrides */ html.theme-light .language-javascript .token.operator { color: hsl(301, 63%, 40%); } html.theme-light .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { color: hsl(344, 84%, 43%); } /* JSON overrides */ html.theme-light .language-json .token.operator { color: hsl(230, 8%, 24%); } html.theme-light .language-json .token.null.keyword { color: hsl(35, 99%, 36%); } /* MD overrides */ html.theme-light .language-markdown .token.url, html.theme-light .language-markdown .token.url > .token.operator, html.theme-light .language-markdown .token.url-reference.url > .token.string { color: hsl(230, 8%, 24%); } html.theme-light .language-markdown .token.url > .token.content { color: hsl(221, 87%, 60%); } html.theme-light .language-markdown .token.url > .token.url, html.theme-light .language-markdown .token.url-reference.url { color: hsl(198, 99%, 37%); } html.theme-light .language-markdown .token.blockquote.punctuation, html.theme-light .language-markdown .token.hr.punctuation { color: hsl(230, 4%, 64%); font-style: italic; } html.theme-light .language-markdown .token.code-snippet { color: hsl(119, 34%, 47%); } html.theme-light .language-markdown .token.bold .token.content { color: hsl(35, 99%, 36%); } html.theme-light .language-markdown .token.italic .token.content { color: hsl(301, 63%, 40%); } html.theme-light .language-markdown .token.strike .token.content, html.theme-light .language-markdown .token.strike .token.punctuation, html.theme-light .language-markdown .token.list.punctuation, html.theme-light .language-markdown .token.title.important > .token.punctuation { color: hsl(5, 74%, 59%); } /* General */ html.theme-light .token.bold { font-weight: bold; } html.theme-light .token.comment, html.theme-light .token.italic { font-style: italic; } html.theme-light .token.entity { cursor: help; } html.theme-light .token.namespace { opacity: 0.8; } /* Plugin overrides */ /* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ html.theme-light .token.token.tab:not(:empty):before, html.theme-light .token.token.cr:before, html.theme-light .token.token.lf:before, html.theme-light .token.token.space:before { color: hsla(230, 8%, 24%, 0.2); } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(230, 1%, 90%); color: hsl(230, 6%, 44%); padding: 0.1em 0.4em; border-radius: 0.3em; } html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, html.theme-light div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */ color: hsl(230, 8%, 24%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ html.theme-light .line-highlight.line-highlight { background: hsla(230, 8%, 24%, 0.05); } /* Default line numbers in Line Highlight plugin */ html.theme-light .line-highlight.line-highlight:before, html.theme-light .line-highlight.line-highlight[data-end]:after { background: hsl(230, 1%, 90%); color: hsl(230, 8%, 24%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ html.theme-light pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(230, 8%, 24%, 0.05); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ html.theme-light .line-numbers.line-numbers .line-numbers-rows, html.theme-light .command-line .command-line-prompt { border-right-color: hsla(230, 8%, 24%, 0.2); } /* Stuff in the gutter */ html.theme-light .line-numbers .line-numbers-rows > span:before, html.theme-light .command-line .command-line-prompt > span:before { color: hsl(230, 1%, 62%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ html.theme-light .rainbow-braces .token.token.punctuation.brace-level-1, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-5, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(5, 74%, 59%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-2, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-6, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(119, 34%, 47%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-3, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-7, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(221, 87%, 60%); } html.theme-light .rainbow-braces .token.token.punctuation.brace-level-4, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-8, html.theme-light .rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(301, 63%, 40%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix), html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, html.theme-light pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, html.theme-light pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */ /* Border around popup */ html.theme-light .prism-previewer.prism-previewer:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(0, 0, 95%); } /* Angle and time should remain as circles and are hence not included */ html.theme-light .prism-previewer-color.prism-previewer-color:before, html.theme-light .prism-previewer-gradient.prism-previewer-gradient div, html.theme-light .prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ html.theme-light .prism-previewer.prism-previewer:after { border-top-color: hsl(0, 0, 95%); } html.theme-light .prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(0, 0, 95%); } /* Background colour within the popup */ html.theme-light .prism-previewer-angle.prism-previewer-angle:before, html.theme-light .prism-previewer-time.prism-previewer-time:before, html.theme-light .prism-previewer-easing.prism-previewer-easing { background: hsl(0, 0%, 100%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ html.theme-light .prism-previewer-angle.prism-previewer-angle circle, html.theme-light .prism-previewer-time.prism-previewer-time circle { stroke: hsl(230, 8%, 24%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle, html.theme-light .prism-previewer-easing.prism-previewer-easing path, html.theme-light .prism-previewer-easing.prism-previewer-easing line { stroke: hsl(230, 8%, 24%); } /* Fill colour of the handle */ html.theme-light .prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } 22:T5f9c, html.theme-dark { /* Gray */ --gray-h: 0; --gray-s: 0%; --gray-l: 61%; --color-gray: hsl(var(--gray-h), var(--gray-s), var(--gray-l)); --color-text-gray: var(--color-gray); --color-bg-gray: hsl( var(--gray-h), var(--gray-s), 14.5% ); --color-bg-gray-light: hsl( var(--gray-h), var(--gray-s), 14.5% ); --color-pill-gray: hsl( var(--gray-h), var(--gray-s), 35% ); --color-pill-text-gray: hsl( var(--gray-h), var(--gray-s), calc(var(--gray-l) + 26%) ); --color-bg-form-btn-gray: #A7A39A; /* Brown */ --brown-h: 18; --brown-s: 35%; --brown-l: 58%; --color-brown: hsl(var(--brown-h), var(--brown-s), var(--brown-l)); --color-text-brown: var(--color-brown); --color-bg-brown: hsl( var(--brown-h), calc(var(--brown-s) - 7%), 22% ); --color-bg-brown-light: hsl( calc(var(--brown-h) - 2), calc(var(--brown-s) - 22%), 16% ); --color-pill-brown: hsl( var(--brown-h), calc(var(--brown-s) + 2%), 27% ); --color-pill-text-brown: hsl( var(--brown-h), calc(var(--brown-s) - 21%), calc(var(--brown-l) + 33%) ); --color-bg-form-btn-brown: #9A6851; /* Orange */ --orange-h: 25; --orange-s: 54%; --orange-l: 53%; --color-orange: hsl( var(--orange-h), var(--orange-s), var(--orange-l) ); --color-text-orange: var(--color-orange); --color-bg-orange: hsl( var(--orange-h), calc(var(--orange-s) - 10%), 25% ); --color-bg-orange-light: hsl( var(--orange-h), calc(var(--orange-s) - 30%), 17% ); --color-pill-orange: hsl( var(--orange-h), calc(var(--orange-s) + 9%), 32% ); --color-pill-text-orange: hsl( var(--orange-h), calc(var(--orange-s) - 23%), calc(var(--orange-l) + 33%) ); --color-bg-form-btn-orange: #D9730D; /* Yellow */ --yellow-h: 38; --yellow-s: 54%; --yellow-l: 54%; --color-yellow: hsl( var(--yellow-h), var(--yellow-s), var(--yellow-l) ); --color-text-yellow: var(--color-yellow); --color-bg-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 18%), 25% ); --color-bg-yellow-light: hsl( var(--yellow-h), calc(var(--yellow-s) - 24%), 17% ); --color-pill-yellow: hsl( calc(var(--yellow-h) - 1), calc(var(--yellow-s) + 2%), 35% ); --color-pill-text-yellow: hsl( var(--yellow-h), calc(var(--yellow-s) - 28%), calc(var(--yellow-l) + 33%) ); --color-bg-form-btn-yellow: #CA922F; /* Green */ --green-h: 146; --green-s: 32%; --green-l: 47%; --color-green: hsl(var(--green-h), var(--green-s), var(--green-l)); --color-text-green: var(--color-green); --color-bg-green: hsl( calc(var(--green-h) + 3), calc(var(--green-s) - 6%), 19% ); --color-bg-green-light: hsl( var(--green-h), calc(var(--green-s) - 20%), 15% ); --color-pill-green: hsl( calc(var(--green-h) + 1), calc(var(--green-s) + 3%), 26% ); --color-pill-text-green: hsl( var(--green-h), calc(var(--green-s) - 20%), calc(var(--green-l) + 38%) ); --color-bg-form-btn-green: #448361; /* Blue */ --blue-h: 217; --blue-s: 50%; --blue-l: 58%; --color-blue: hsl(var(--blue-h), var(--blue-s), var(--blue-l)); --color-text-blue: var(--color-blue); --color-bg-blue: hsl( calc(var(--blue-h) - 16), calc(var(--blue-s) + 9%), 19% ); --color-bg-blue-light: hsl( calc(var(--blue-h) + 16), calc(var(--blue-s) - 27%), 15% ); --color-pill-blue: hsl( calc(var(--blue-h) - 3), calc(var(--blue-s) - 6%), 29% ); --color-pill-text-blue: hsl( calc(var(--blue-h) - 5), calc(var(--blue-s) - 32%), calc(var(--blue-l) + 28%) ); --color-bg-form-btn-blue: #327DA9; /* Purple */ --purple-h: 270; --purple-s: 55%; --purple-l: 62%; --color-purple: hsl( var(--purple-h), var(--purple-s), var(--purple-l) ); --color-text-purple: var(--color-purple); --color-bg-purple: hsl( calc(var(--purple-h) + 2), calc(var(--purple-s) - 31%), 23% ); --color-bg-purple-light: hsl( calc(var(--purple-h) + 5), calc(var(--purple-s) - 40%), 17% ); --color-pill-purple: hsl( var(--purple-h), calc(var(--purple-s) - 19%), 29% ); --color-pill-text-purple: hsl( calc(var(--purple-h) - 3), calc(var(--purple-s) - 40%), calc(var(--purple-l) + 24%) ); --color-bg-form-btn-purple: #8F64AF; /* Pink */ --pink-h: 329; --pink-s: 57%; --pink-l: 58%; --color-pink: hsl(var(--pink-h), var(--pink-s), var(--pink-l)); --color-text-pink: var(--color-pink); --color-bg-pink: hsl( calc(var(--pink-h) + 3), calc(var(--pink-s) - 29%), 24% ); --color-bg-pink-light: hsl( calc(var(--pink-h) + 5), calc(var(--pink-s) - 40%), 16% ); --color-pill-pink: hsl( calc(var(--pink-h) - 2), calc(var(--pink-s) - 21%), 30% ); --color-pill-text-pink: hsl( calc(var(--pink-h) + 4), calc(var(--pink-s) - 41%), calc(var(--pink-l) + 28%) ); --color-bg-form-btn-pink: #C24C8B; /* Red */ --red-h: 1; --red-s: 69%; --red-l: 60%; --color-red: hsl(var(--red-h), var(--red-s), var(--red-l)); --color-text-red: var(--color-red); --color-bg-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 37%), 24% ); --color-bg-red-light: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 56%), 17% ); --color-pill-red: hsl( calc(var(--red-h) + 5), calc(var(--red-s) - 30%), 31% ); --color-pill-text-red: hsl( calc(var(--red-h) + 7), calc(var(--red-s) - 50%), calc(var(--red-l) + 24%) ); --color-bg-form-btn-red: #D44E49; /*Default*/ --default-h: 45; --default-s: 8%; --default-l: 20%; --color-default: hsl( var(--default-h), var(--default-s), var(--default-l) ); --color-pill-default: hsl( var(--default-h), var(--default-s), -19% ); --color-pill-text-default: hsl( var(--default-h), var(--default-s), calc(var(--default-l) + 23%) ); --color-bg-form-btn-default: #55534E; /*Other*/ --color-text-default: #e1e1e1; --color-text-default-light: #9b9b9b; --color-bg-default: #191919; --color-border-default: #373737; --color-border-dark: var(--color-border-default); --color-ui-hover-bg: #292929; --color-card-bg: #212121; --color-card-bg-hover: #292929; --color-calendar-weekend-bg: #202020; --color-checkbox-bg: #2EAADC; --color-code-bg: rgba(135,131,120,.15); /*Scrollbar*/ --scrollbar-background-color: #FAFAFA; --scrollbar-thumb-color: #C1C1C1; --scrollbar-border-color: #E8E8E8; /*Navbar*/ --navbar-text-color: #e1e1e1; --navbar-list-item-hover: rgba(255,255,255,.2); --navbar-background-color: #191919; --navbar-background-color-hover: #282828; --navbar-button-text-color: #191919; --navbar-button-background-color: #e1e1e1; --navbar-menu-background-color: var(--navbar-background-color); --navbar-text-color-dark: #d2d2d2; /*Footer*/ --footer-text-color: #e1e1e1; --footer-background-color: #12161b; /*Sidebar*/ --sidebar-text-color: #e1e1e1; --sidebar-cta-text-color: #e1e1e1; --sidebar-background-color: #191919; --sidebar-cta-background-color: #191919; --sidebar-border-color: #373737; --sidebar-background-color-hover: #292929; --sidebar-text-color-dark: #d2d2d2; --sidebar-cta-background-color-hover: #292929; } /* Calendar for dark mode */ html.theme-dark .notion-collection-calendar__row { box-shadow: var(--color-border-default) -1px 0px 0px; } html.theme-dark .notion-collection-calendar__week-days { box-shadow: var(--color-border-default) 0px 1px 0px; } html.theme-dark .notion-collection-calendar__date { border-right: 1px solid var(--color-border-default); border-bottom: 1px solid var(--color-border-default); } /** * One Dark theme for prism.js * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax */ /** * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) * From colors.less * --mono-1: hsl(220, 14%, 71%); * --mono-2: hsl(220, 9%, 55%); * --mono-3: hsl(220, 10%, 40%); * --hue-1: hsl(187, 47%, 55%); * --hue-2: hsl(207, 82%, 66%); * --hue-3: hsl(286, 60%, 67%); * --hue-4: hsl(95, 38%, 62%); * --hue-5: hsl(355, 65%, 65%); * --hue-5-2: hsl(5, 48%, 51%); * --hue-6: hsl(29, 54%, 61%); * --hue-6-2: hsl(39, 67%, 69%); * --syntax-fg: hsl(220, 14%, 71%); * --syntax-bg: hsl(220, 13%, 18%); * --syntax-gutter: hsl(220, 14%, 45%); * --syntax-guide: hsla(220, 14%, 71%, 0.15); * --syntax-accent: hsl(220, 100%, 66%); * From syntax-variables.less * --syntax-selection-color: hsl(220, 13%, 28%); * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); */ html.theme-dark code[class*="language-"], html.theme-dark pre[class*="language-"] { background: hsl(220, 13%, 18%); color: hsl(220, 14%, 71%); text-shadow: 0 1px rgba(0, 0, 0, 0.3); font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; direction: ltr; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; line-height: 1.5; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Selection */ html.theme-dark code[class*="language-"]::-moz-selection, html.theme-dark code[class*="language-"] *::-moz-selection, html.theme-dark pre[class*="language-"] *::-moz-selection { background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } html.theme-dark code[class*="language-"]::selection, html.theme-dark code[class*="language-"] *::selection, html.theme-dark pre[class*="language-"] *::selection { background: hsl(220, 13%, 28%); color: inherit; text-shadow: none; } /* Code blocks */ html.theme-dark pre[class*="language-"] { padding: 1em; margin: 0.5em 0; overflow: auto; border-radius: 0.3em; } /* Inline code */ html.theme-dark :not(pre) > code[class*="language-"] { padding: 0.2em 0.3em; border-radius: 0.3em; white-space: normal; } /* Print */ @media print { html.theme-dark code[class*="language-"], html.theme-dark pre[class*="language-"] { text-shadow: none; } } html.theme-dark .token.comment, html.theme-dark .token.prolog, html.theme-dark .token.cdata { color: hsl(220, 10%, 40%); } html.theme-dark .token.doctype, html.theme-dark .token.punctuation, html.theme-dark .token.entity { color: hsl(220, 14%, 71%); } html.theme-dark .token.attr-name, html.theme-dark .token.class-name, html.theme-dark .token.boolean, html.theme-dark .token.constant, html.theme-dark .token.number, html.theme-dark .token.atrule { color: hsl(29, 54%, 61%); } html.theme-dark .token.keyword { color: hsl(286, 60%, 67%); } html.theme-dark .token.property, html.theme-dark .token.tag, html.theme-dark .token.symbol, html.theme-dark .token.deleted, html.theme-dark .token.important { color: hsl(355, 65%, 65%); } html.theme-dark .token.selector, html.theme-dark .token.string, html.theme-dark .token.char, html.theme-dark .token.builtin, html.theme-dark .token.inserted, html.theme-dark .token.regex, html.theme-dark .token.attr-value, html.theme-dark .token.attr-value > .token.punctuation { color: hsl(95, 38%, 62%); } html.theme-dark .token.variable, html.theme-dark .token.operator, html.theme-dark .token.function { color: hsl(207, 82%, 66%); } html.theme-dark .token.url { color: hsl(187, 47%, 55%); } /* HTML overrides */ html.theme-dark .token.attr-value > .token.punctuation.attr-equals, html.theme-dark .token.special-attr > .token.attr-value > .token.value.css { color: hsl(220, 14%, 71%); } /* CSS overrides */ html.theme-dark .language-css .token.selector { color: hsl(355, 65%, 65%); } html.theme-dark .language-css .token.property { color: hsl(220, 14%, 71%); } html.theme-dark .language-css .token.function, html.theme-dark .language-css .token.url > .token.function { color: hsl(187, 47%, 55%); } html.theme-dark .language-css .token.url > .token.string.url { color: hsl(95, 38%, 62%); } html.theme-dark .language-css .token.important, html.theme-dark .language-css .token.atrule .token.rule { color: hsl(286, 60%, 67%); } /* JS overrides */ html.theme-dark .language-javascript .token.operator { color: hsl(286, 60%, 67%); } html.theme-dark .language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { color: hsl(5, 48%, 51%); } /* JSON overrides */ html.theme-dark .language-json .token.operator { color: hsl(220, 14%, 71%); } html.theme-dark .language-json .token.null.keyword { color: hsl(29, 54%, 61%); } /* MD overrides */ html.theme-dark .language-markdown .token.url, html.theme-dark .language-markdown .token.url > .token.operator, html.theme-dark .language-markdown .token.url-reference.url > .token.string { color: hsl(220, 14%, 71%); } html.theme-dark .language-markdown .token.url > .token.content { color: hsl(207, 82%, 66%); } html.theme-dark .language-markdown .token.url > .token.url, html.theme-dark .language-markdown .token.url-reference.url { color: hsl(187, 47%, 55%); } html.theme-dark .language-markdown .token.blockquote.punctuation, html.theme-dark .language-markdown .token.hr.punctuation { color: hsl(220, 10%, 40%); font-style: italic; } html.theme-dark .language-markdown .token.code-snippet { color: hsl(95, 38%, 62%); } html.theme-dark .language-markdown .token.bold .token.content { color: hsl(29, 54%, 61%); } html.theme-dark .language-markdown .token.italic .token.content { color: hsl(286, 60%, 67%); } html.theme-dark .language-markdown .token.strike .token.content, html.theme-dark .language-markdown .token.strike .token.punctuation, html.theme-dark .language-markdown .token.list.punctuation, html.theme-dark .language-markdown .token.title.important > .token.punctuation { color: hsl(355, 65%, 65%); } /* General */ html.theme-dark .token.bold { font-weight: bold; } html.theme-dark .token.comment, html.theme-dark .token.italic { font-style: italic; } html.theme-dark .token.entity { cursor: help; } html.theme-dark .token.namespace { opacity: 0.8; } /* Plugin overrides */ /* Selectors should have higher specificity than those in the plugins' default stylesheets */ /* Show Invisibles plugin overrides */ html.theme-dark .token.token.tab:not(:empty):before, html.theme-dark .token.token.cr:before, html.theme-dark .token.token.lf:before, html.theme-dark .token.token.space:before { color: hsla(220, 14%, 71%, 0.15); text-shadow: none; } /* Toolbar plugin overrides */ /* Space out all buttons and move them away from the right edge of the code block */ html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item { margin-right: 0.4em; } /* Styling the buttons */ html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { background: hsl(220, 13%, 26%); color: hsl(220, 9%, 55%); padding: 0.1em 0.4em; border-radius: 0.3em; } html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, html.theme-dark div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { background: hsl(220, 13%, 28%); color: hsl(220, 14%, 71%); } /* Line Highlight plugin overrides */ /* The highlighted line itself */ html.theme-dark .line-highlight.line-highlight { background: hsla(220, 100%, 80%, 0.04); } /* Default line numbers in Line Highlight plugin */ html.theme-dark .line-highlight.line-highlight:before, html.theme-dark .line-highlight.line-highlight[data-end]:after { background: hsl(220, 13%, 26%); color: hsl(220, 14%, 71%); padding: 0.1em 0.6em; border-radius: 0.3em; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ } /* Hovering over a linkable line number (in the gutter area) */ /* Requires Line Numbers plugin as well */ html.theme-dark pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { background-color: hsla(220, 100%, 80%, 0.04); } /* Line Numbers and Command Line plugins overrides */ /* Line separating gutter from coding area */ html.theme-dark .line-numbers.line-numbers .line-numbers-rows, html.theme-dark .command-line .command-line-prompt { border-right-color: hsla(220, 14%, 71%, 0.15); } /* Stuff in the gutter */ html.theme-dark .line-numbers .line-numbers-rows > span:before, html.theme-dark .command-line .command-line-prompt > span:before { color: hsl(220, 14%, 45%); } /* Match Braces plugin overrides */ /* Note: Outline colour is inherited from the braces */ html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-1, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-5, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-9 { color: hsl(355, 65%, 65%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-2, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-6, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-10 { color: hsl(95, 38%, 62%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-3, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-7, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-11 { color: hsl(207, 82%, 66%); } html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-4, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-8, html.theme-dark .rainbow-braces .token.token.punctuation.brace-level-12 { color: hsl(286, 60%, 67%); } /* Diff Highlight plugin overrides */ /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix), html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) { background-color: hsla(353, 100%, 66%, 0.15); } html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, html.theme-dark pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, html.theme-dark pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { background-color: hsla(353, 95%, 66%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix), html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) { background-color: hsla(137, 100%, 55%, 0.15); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { background-color: hsla(135, 73%, 55%, 0.25); } html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, html.theme-dark pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, html.theme-dark pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { background-color: hsla(135, 73%, 55%, 0.25); } /* Previewers plugin overrides */ /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ /* Border around popup */ html.theme-dark .prism-previewer.prism-previewer:before, html.theme-dark .prism-previewer-gradient.prism-previewer-gradient div { border-color: hsl(224, 13%, 17%); } /* Angle and time should remain as circles and are hence not included */ html.theme-dark .prism-previewer-color.prism-previewer-color:before, html.theme-dark .prism-previewer-gradient.prism-previewer-gradient div, html.theme-dark .prism-previewer-easing.prism-previewer-easing:before { border-radius: 0.3em; } /* Triangles pointing to the code */ html.theme-dark .prism-previewer.prism-previewer:after { border-top-color: hsl(224, 13%, 17%); } html.theme-dark .prism-previewer-flipped.prism-previewer-flipped.after { border-bottom-color: hsl(224, 13%, 17%); } /* Background colour within the popup */ html.theme-dark .prism-previewer-angle.prism-previewer-angle:before, html.theme-dark .prism-previewer-time.prism-previewer-time:before, html.theme-dark .prism-previewer-easing.prism-previewer-easing { background: hsl(219, 13%, 22%); } /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ /* For time, this is the alternate colour */ html.theme-dark .prism-previewer-angle.prism-previewer-angle circle, html.theme-dark .prism-previewer-time.prism-previewer-time circle { stroke: hsl(220, 14%, 71%); stroke-opacity: 1; } /* Stroke colours of the handle, direction point, and vector itself */ html.theme-dark .prism-previewer-easing.prism-previewer-easing circle, html.theme-dark .prism-previewer-easing.prism-previewer-easing path, html.theme-dark .prism-previewer-easing.prism-previewer-easing line { stroke: hsl(220, 14%, 71%); } /* Fill colour of the handle */ html.theme-dark .prism-previewer-easing.prism-previewer-easing circle { fill: transparent; } 23:T46e0,

Begin