notion.css

/**
 * This file contains RDFN site-specifc style overrides and layout adjustments
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600&display=swap');

@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Regular.eot') format('embedded-opentype'),
    url('../fonts/GT-Pressura-Regular.otf') format('opentype'),
    url('../fonts/GT-Pressura-Regular.ttf') format('truetype'),
    url('../fonts/GT-Pressura-Regular.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Bold.eot') format('embedded-opentype'),
    url('../fonts/GT-Pressura-Bold.otf') format('opentype'),
    url('../fonts/GT-Pressura-Bold.ttf') format('truetype'),
    url('../fonts/GT-Pressura-Bold.woff') format('woff');
  font-weight: 700;
}

:root {
  --bg-start-color: rgba(255, 255, 255, 0.85);
  --bg-end-color: rgba(255, 255, 255, 1);
  --bg-color: #ffffff;
  --fg-color: rgba(0, 0, 0, 0.9);
  --fg-color-0: var(--fg-color);
  --fg-color-1: var(--fg-color);
  --fg-color-2: rgba(0, 0, 0, 0.8);
  --fg-color-3: rgba(0, 0, 0, 0.65);
  --fg-color-4: rgba(0, 0, 0, 0.45);
}

.dark-mode {
  --bg-color: #121212;
  --bg-start-color: rgba(20, 20, 20, 0.85);
  --bg-end-color: rgba(20, 20, 20, 1);
  --fg-color: rgba(255, 255, 255, 0.9);
  --fg-color-0: var(--fg-color);
  --fg-color-1: var(--fg-color);
  --fg-color-2: rgba(255, 255, 255, 0.8);
  --fg-color-3: rgba(255, 255, 255, 0.65);
  --fg-color-4: rgba(255, 255, 255, 0.45);
}

.notion,
.notion .index-page {
  --notion-max-width: 1200px;
  --notion-header-height: 72px;
  --notion-font: 'GT Pressura', sans-serif;
}

.notion .notion-header .notion-nav-header {
  max-width: 1200px;
  font-size: 20px;
}

/* Page layout */
.notion-frame {
  padding: 0;
}

.notion-page {
  display: block;
  padding-bottom: calc(max(5vh, 32px)) !important;
  line-height: 1.65;
}

.index-page {
  --notion-max-width: 900px;
}

@media only screen and (min-width: 920px) {
  .notion .notion-page {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  .notion-page-content {
    width: 100%;
  }

  .notion-collection-page-properties + .notion-page-content {
    width: 72%;
  }

  .notion-collection-page-properties {
    order: 2;
    width: calc(28% - 2rem);
    padding: 1rem;
  }

  .notion-collection-row-property {
    display: flex;
    align-items: start;
    flex-direction: column;
    padding: 0 0 0.25rem 0;
  }
}

/* Content elements */
.notion-title {
  display: block;
  text-align: left;
}

.notion .index-page h1.notion-title {
  display: none;
}

.notion-text {
  padding: 0.5em 2px;
}

.notion-asset-caption {
  text-align: center;
}

.notion-asset-wrapper {
  margin-bottom: 1em;
}

.notion-asset-wrapper-video>div,
.notion-asset-wrapper-video video {
  width: 100% !important;
}

.notion-header .notion-nav-header {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: auto;
}

.notion-nav-header-rhs {
  gap: 0.5rem;
}

.notion-gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 2vmin;
  gap: 2vmin;
  border-top: none;
}

.notion-gallery-grid .notion-page-icon-inline {
  display: none;
}

.notion-hash-link {
  display: none;
}

.notion-gallery-grid .notion-page-title-text {
  font-size: 20px;
  font-weight: 600;
  white-space: unset;
}

.notion-gallery-grid .notion-collection-card-property {
  white-space: unset;
  text-overflow: unset;
}

.notion-gallery-grid .notion-property-text {
  font-size: 14px;
}

.notion-collection-card {
  border-radius: 3px;
  box-shadow: none;
}

.notion-collection-card-cover img {
  border-radius: 3px;
}

.notion-collection-card {
  overflow: visible;
}

.notion-collection-card-cover {
  border-radius: 3px;
  box-shadow: 2px 2px 8px 4px rgba(15, 15, 15, 0.1);
  height: 280px;
}

.notion-collection-card-cover {
  border-bottom: 0 none;
  transition: all 150ms ease-in-out;
  filter: none;
}

a.notion-collection-card:hover .notion-collection-card-cover {
  filter: brightness(120%);
  box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
  transform: scale(1.02);
  background: var(--bg-color);
}

.notion-collection-card-body {
  padding: 10px;
}

/* only target safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  _::-webkit-full-page-media,
  _:future,
  :root,
  .notion-collection-card-cover {
    transition: none 0ms linear;
  }
}

.notion-quote {
  padding: 0.2em 0.75em;
  line-height: 1.5;
  font-style: italic;
  font-size: 1.2em;
  border-left: 4px solid #67bdfc;
}

.notion-h1,
.notion-h2,
.notion-h3 {
  margin-bottom: 0.25em;
}

.notion-callout {
  margin: 0.75em 0;
}

.notion-hr {
  margin: 2em 0;
}

@media only screen and (max-width: 920px) {
  .index-page.notion-page {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media only screen and (max-width: 720px) {
  .notion-page {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media only screen and (max-width: 600px) {
  .notion-search-button {
    display: none !important;
  }
}

.notion .notion-page-icon-cover {
  margin-left: auto;
  margin-right: auto;
}



.notion-collection-row {
  padding-bottom: 1em;
  border-bottom: none;
  padding: 0;
}

@keyframes fadeInProperties {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.notion-collection-row-property {
  opacity: 0;
  animation: fadeInProperties 0.5s ease forwards; 
  animation-delay: calc(var(--index) * 0.1s); 
}

.notion-collection-row-property {
  --index: 0; 
}

.notion-collection-row-property:nth-child(1) {
  --index: 1;
}

.notion-collection-row-property:nth-child(2) {
  --index: 2;
}

.notion-collection-row-property:nth-child(3) {
  --index: 3;
}

.notion-collection-row-property:nth-child(4) {
  --index: 4;
}

.notion-collection-row-property:nth-child(5) {
  --index: 5;
}

.notion-collection-row-property:nth-child(6) {
  --index: 6;
}
.notion-collection-row-property:nth-child(7) {
  --index: 7;
}

.notion-collection-row-property:nth-child(8) {
  --index: 8;
}

.notion-collection-row-property .notion-collection-column-title {
  /* labels */
  color: var(--fg-color-3);
  height: 28px;
}

.notion-collection-column-title svg {
  display: none;
}




.notion-collection-row-value {
  display: flex;
  align-items: center;
  padding: 0;
  min-height: 23px;
}

.notion-page-cover-wrapper,
.notion-page-cover-wrapper span,
.notion-page-cover-wrapper img {
  position: fixed;
  max-width: 100% !important;
  top: 0;
  opacity: 0.6;
}

.notion-page-cover-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, var(--bg-start-color) 0%, var(--bg-end-color) 100%);
  pointer-events: none;
}

@media only screen and (max-width: 1200px) {
  .notion-page-cover-wrapper,
  .notion-page-cover-wrapper span,
  .notion-page-cover-wrapper img {
    border-radius: 0;
  }
}

.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-page-link {
  justify-content: center;
  padding: 2em;
}

.notion-code {
  background: rgba(249, 250, 251, 1);
  border: 1px solid rgba(229, 231, 235, 1);
  border-radius: 0.375rem;
}

.notion-item-default,
.notion-property-date {
  background-color: transparent;
  padding: 0 6px;
}

.notion-link {
  position: relative;
  transition: unset;
  opacity: 1;
  background: transparent;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 0 100%;
  padding: 0.2rem;
  border-radius: 0;

}

.notion-link:focus,
.notion-link:hover {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, var(--notion-teal) 20.0%, var(--notion-blue) 100.0%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 100%;
  border-radius: 0.15rem;
  transition-property: background-position, background-size, border-radius;
  transition-duration: 300ms;
}

.notion-red_background,
.notion-pink_background,
.notion-blue_background,
.notion-purple_background,
.notion-teal_background,
.notion-yellow_background,
.notion-orange_background,
.notion-brown_background,
.notion-gray_background {
  padding: 0 0.5rem;
  margin: 0 -0.5rem 0 -0.25rem;
  border-radius: 0.5rem;
  border-bottom-left-radius: 0.125rem;
  box-decoration-break: clone;

  background-color: none;

  /* light yellow */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #fff697 10.5%,
      #fdf59d 85.29%,
      var(--bg-color));
}

.notion-purple_background,
.notion-pink_background {
  /* light pink */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #f5b8d1 10.5%,
      #f9bcd3 85.29%,
      var(--bg-color));
}

.notion-blue_background,
.notion-gray_background {
  /* light blue */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #adedfc 10.5%,
      #adebfd 85.29%,
      var(--bg-color));
}

.notion-red_background,
.notion-orange_background {
  /* light red */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #f5c4ff 10.5%,
      #e7a8fc 85.29%,
      var(--bg-color));
}

.notion-teal_background {
  /* light green */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #d4eabc 10.5%,
      #d2eabc 85.29%,
      var(--bg-color));
}

.notion-brown_background {
  /* dark blue */
  background-image: linear-gradient(119deg,
      var(--bg-color),
      #96b8ec 10.5%,
      #a6c3f0 85.29%,
      var(--bg-color));
}

/* disable highlighting in dark mode */


.dark-mode .notion-red_background,
.dark-mode .notion-pink_background,
.dark-mode .notion-blue_background,
.dark-mode .notion-purple_background,
.dark-mode .notion-teal_background,
.dark-mode .notion-yellow_background,
.dark-mode .notion-orange_background,
.dark-mode .notion-brown_background,
.dark-mode .notion-gray_background {
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none !important;
}

/* if you don't want rounded page icon images, remove this */
.notion-page-icon-hero.notion-page-icon-image {
  border-radius: 50%;
  box-shadow: 0 8px 40px 0 rgb(0 0 0 / 21%);
}

.notion-page-icon-hero.notion-page-icon-image span,
.notion-page-icon-hero.notion-page-icon-image img {
  border-radius: 50%;
}

.notion-header {
  font-size: 20px;
  background: transparent;
}

.notion-header .breadcrumb {
  padding: 6px;
}

.notion-bookmark:hover {
  border-image: linear-gradient(90.68deg, #b439df 0.26%, #e5337e 102.37%);
  border-image-slice: 1;
}

.notion-block-ab9a258d6cf444f3bb40dc2600feae91 .notion-column {
  padding: 0;
}

.notion-block-1197556cf91f4906a42e6752b32e9842 {
  /* Hidden subpages */
  display: none;
}

.notion-equation.notion-equation-block {
  align-items: center;
}