⚡
Community Showcase

CSS Code Script

How to add the CSS code script to your site on Super:

  1. Head over to your Super dashboard and click on the gear icon to enter your site.
    2. image

  1. On the next page, click on code.
    2. image

  1. Toggle, and copy the code script below. (tip: hover over the code block, and click on copy at the top right of the code block)
    2. ‣
    See tip in detail
    image
    ‣
    CSS Code Script for ProtoPie Community
    :root {
  --color-text-purple: rgba(125, 106, 246, 1);
  --color-text-primary: #181818;
  --color-text-secondary: #373737;
  /* tags (multi-select, select) colors */
  --color-pill-default: rgba(206, 205, 202, 0.3);
}

@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://cdn.protopie.io/fonts/gilroy/Gilroy-Bold.woff) format('woff'),
    url(https://cdn.protopie.io/fonts/gilroy/Gilroy-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://cdn.protopie.io/fonts/gilroy/Gilroy-ExtraBold.woff)
      format('woff'),
    url(https://cdn.protopie.io/fonts/gilroy/Gilroy-ExtraBold.woff2)
      format('woff2');
}

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 80px !important;
}

.super-content.max-width {
  max-width: 1440px !important;
  margin: auto !important;
}

.super-content {
  padding-bottom: 0vh !important;
}

.notion-header {
  display: none !important;
}

.notion-header__title {
  display: none !important;
}  

.notion-header__cover.no-cover {
  display: none !important;
}

.super-footer {
  padding-top: 0px !important;
}
  
/* padding for site text */

.notion-text__content {
  padding: 10px 2px !important;
  margin: 0 !important;
}

/* Images with rounded border */

.notion-image img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

/* Text with colored link */

.notion-semantic-string .link {
  color: #8169FF !important;
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  transition: border-color 100ms ease-in, opacity 100ms ease-in !important;
}

.notion-semantic-string .link .highlighted-color.color-orange {
  color: #8169FF !important;
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  font-weight: 600 !important;
  transition: border-color 100ms ease-in, opacity 100ms ease-in !important;
}

.notion-semantic-string .link .highlighted-color.color-orange:hover {
  opacity: 0.7 !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-collection-card .notion-property__title .notion-property__title__icon-wrapper {
  display: none !important;
}

/* Hidden block */

.notion-toggle.bg-brown {
  display: none !important;
}

/* Pill */

.notion-pill {
  padding: 5px 10px !important;
}

/* callout background yellow for section yellow background*/

.notion-callout.bg-yellow-light {
  display: flex !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF2E2 100%) !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}
  
.notion-callout.bg-yellow-light.border {
  border: none !important;
}
  
.notion-callout.bg-yellow-light .notion-callout__icon .notion-icon {
  display: none !important;
}

.notion-callout.bg-yellow-light .notion-callout__icon {
  display: none !important;
}

.notion-callout.bg-yellow-light .notion-callout__content {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding-top: 5rem !important;
  padding-bottom: 10rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* callout background brown for section brown background*/

.notion-callout.bg-brown-light {
  display: flex !important;
  background: linear-gradient(180deg,rgba(254,213,154,0.3) 0%,rgba(255,172,136,0.2) 50%,rgba(255,172,136,0.1) 80%) !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.notion-callout.bg-brown-light.border {
  border: none !important;
}

.notion-callout.bg-brown-light .notion-callout__icon .notion-icon {
  display: none !important;
}

.notion-callout.bg-brown-light .notion-callout__icon {
  display: none !important;
}

.notion-callout.bg-brown-light .notion-callout__content {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* callout background purple for section purple background*/

.notion-callout.bg-purple-light {
  display: flex !important;
  background: linear-gradient(-270deg, #FEF4F3 -12.78%, #FECCC3 105.21%); !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 100px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.notion-callout.bg-purple-light.border {
  border: none !important;
}

.notion-callout.bg-purple-light .notion-callout__icon .notion-icon {
  display: none !important;
}

.notion-callout.bg-purple-light .notion-callout__icon {
  display: none !important;
}

.notion-callout.bg-purple-light .notion-callout__content {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* callout background orange for linear section orange background*/

.notion-callout.bg-orange-light {
  display: flex !important;
  background: linear-gradient(-270deg, #FEF4F3 -12.78%, #FECCC3 105.21%) !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: left !important;
}

.notion-callout.bg-orange-light.border {
  border: none !important;
}

.notion-callout.bg-orange-light .notion-callout__icon .notion-icon {
  display: none !important;
}

.notion-callout.bg-orange-light .notion-callout__icon {
  display: none !important;
}

.notion-callout.bg-orange-light .notion-callout__content {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* callout background gray for section gray background*/

.notion-callout.bg-gray-light {
  display: flex !important;
  background: none !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
}

.notion-callout.bg-gray-light.border {
  border: none !important;
}

.notion-callout.bg-gray-light .notion-callout__icon .notion-icon {
  display: none !important;
}

.notion-callout.bg-gray-light .notion-callout__icon {
  display: none !important;
}

.notion-callout.bg-gray-light .notion-callout__content {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding-top: 5rem !important;
  padding-bottom: 0rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Button Filled */

.notion-quote.bg-purple {
  background: none !important;
  align-items: center !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 2.5rem 0px !important;
  padding: 0px !important;
}

.notion-quote.bg-purple .notion-link {
  background: #8169FF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  border: none !important;
  padding: .875rem 1.5rem !important;
  border-radius: .25rem!important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-quote.bg-purple .notion-link:hover {
  background-color: rgba(91,67,186,1) !important;
  color: #FFFFFF !important;  
  border: none !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

/* Button Filled Centered */

.notion-quote.color-purple {
  background: none !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 2.5rem 0px !important;
  padding: 0px !important;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.notion-quote.color-purple .notion-link {
  background: #8169FF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  border: 2px solid #8169FF !important;
  padding: .875rem 1.5rem !important;
  border-radius: .25rem !important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-quote.color-purple .notion-link:hover {
  background-color: rgba(91,67,186,1) !important;
  color: #FFFFFF !important;
  border: 2px solid #8169FF !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}
  
/* Button Hollow */

.notion-quote.bg-brown {
  background: none !important;
  align-items: center !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 2.5rem 0px !important;
  padding: 0px !important;
}

.notion-quote.bg-brown .notion-link {
  background: none !important;
  color: #8169FF !important;
  opacity: 1 !important;
  border: 2px solid #8169FF !important;
  padding: .875rem 1.5rem !important;
  border-radius: .25rem !important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-quote.bg-brown .notion-link:hover {
  background: #8169FF !important;
  color: #FFFFFF !important;
  border: 2px solid #8169FF !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

/* Gallery Cards */

.notion-collection-gallery.small {
  gap: 37px !important;
}

.notion-collection-gallery.small .notion-collection-card .notion-property__title {
  font-family: var(--secondary-font) !important;
  font-weight: 500 !important;
}

.notion-collection-gallery.small .notion-collection-card:nth-child(odd) {
  background: #8169FF !important;
  color: #FFFFFF !important;
  opacity: 1 !important;
  border: 2px solid #8169FF !important;
  border-radius: .25rem !important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.notion-collection-gallery.small .notion-collection-card:nth-child(odd):hover {
  background-color: rgba(91,67,186,1) !important;
  color: #FFFFFF !important;
  border: 2px solid #8169FF !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-collection-gallery.small .notion-collection-card:nth-child(even) {
  background: none !important;
  color: #8169FF !important;
  opacity: 1 !important;
  border: 2px solid #8169FF !important;
  border-radius: .25rem !important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.notion-collection-gallery.small .notion-collection-card:nth-child(even):hover {
  background: #8169FF !important;
  color: #FFFFFF !important;
  border: 2px solid #8169FF !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-collection-gallery.small .notion-collection-card__content {
  padding: .875rem 1.5rem !important;
}

.notion-collection-gallery.medium {
  gap: 33px !important;
}

.notion-collection-gallery.medium .notion-collection-card {
    background: 
    linear-gradient(var(--color-bg-default), var(--color-bg-default)) padding-box,
    linear-gradient(to right, rgba(249, 226, 189, 1), rgba(246, 204, 202, 1)) border-box;
    border: 2px solid transparent;
    cursor: pointer !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.notion-collection-gallery.medium .notion-collection-card:hover {
    background: 
    linear-gradient(#FFF0EE, #FFF0EE) padding-box,
    linear-gradient(to right, rgba(249, 226, 189, 1), rgba(246, 204, 202, 1)) border-box !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-collection-gallery.medium .notion-collection-card__content {
  padding: 25px 40px !important;
}

.gallery .notion-semantic-string .link {
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  transition: border-color 100ms ease-in, opacity 100ms ease-in !important;  
}

.gallery .notion-collection-card__property .notion-semantic-string {
  white-space: normal !important;
}

.notion-collection-card.gallery .notion-property__title .notion-semantic-string {
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: flex !important;
}

.notion-collection-gallery .notion-collection-card__cover.large, .notion-collection-card__cover.large>span, .notion-collection-card__cover.large img {
  height: 500px !important;
  max-height: 500px !important;
}

.notion-collection-card .notion-property__title {
  font-size: 1.25rem !important;
  font-family: 'Gilroy' !important;
  font-style: normal !important;
  font-weight: 700 !important;
  display: flex !important;
}

.notion-collection-gallery .notion-collection-card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.notion-collection-gallery .notion-collection-card:hover {
  background: none !important;
}

.notion-collection-card__cover img {
  border-radius: 0px !important;
}

.notion-collection-gallery .notion-collection-card__property:last-child {
  padding-top: 13px !important;
}

.notion-collection-gallery {
  border-top: none !important;
  gap: 56px !important;
}

.notion-collection-card__content {
    padding: 20px 0px 0px 0px !important;
}

.notion-collection-gallery .notion-collection-card__content .notion-property__text {
  z-index: 29 !important;
}

/* Database Properties */

.notion-page__properties {
  border: 1px solid var(--color-border-default) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 40px 0px !important;
}
    
.notion-page__properties .notion-divider {
  margin: 16px 0px 28px 0px !important;
  display: none !important;
}  

.notion-property__text {
  font-size: 0.975rem !important;
  font-weight: 500 !important;
  padding-bottom: 7px !important;
}

.notion-property__text .link {
  background: none !important;
  color: #8169FF !important;
  opacity: 1 !important;
  cursor: pointer !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

.notion-property__text .link:hover {
  opacity: 0.7 !important;
  -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
}

/* Gallery dropdown filters */

.notion-dropdown__button svg:first-of-type, .notion-dropdown__menu-header, .notion-dropdown__option-icon {
  display: none !important;
}

.notion-dropdown__button {
  justify-content: space-between !important;
  width: 100% !important;
  border: 1px solid var(--color-border-default) !important;
  padding: 10px !important;
  border-radius: 8px !important;
}

.notion-collection-card__content .notion-property__select {
  z-index: 28 !important;
  cursor: auto !important;
}

@media only screen and (max-width: 480px) {
  #block-1d41f6e52ad244bcbdcba838bed6dc39 {
     display: none !important;
  }
} 

@media only screen and (max-width: 768px) {
  
  h1.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 900 !important;
    font-size: 47px !important;
    line-height: 60px !important;
    margin-top: -2px !important;
    margin-bottom: 18px !important;
    color: var(--color-text-primary) !important;
  }

  h2.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;  
    font-weight: 700 !important;
    font-size: 34px !important;
    line-height: 44px !important;
    margin-bottom: 18px !important;
    color: var(--color-text-primary) !important;
  }

  h3.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 700 !important;
    font-size: 24px !important;
    line-height: 32px !important;
    color: var(--color-text-primary) !important;
  }

  /* subtitle text */

  .notion-semantic-string .highlighted-color.color-brown {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: var(--color-text-secondary) !important;
  }

  /* main text */

  .notion-semantic-string .highlighted-color.color-orange {
    font-size: 20px;
    color: var(--color-text-secondary) !important;
  }
}

@media only screen and (min-width: 768px) {
  
  h1.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 800 !important;
    font-size: 62px !important;
    line-height: 80px !important;
    margin-top: -6px !important;
    margin-bottom: 18px !important;
    color: var(--color-text-primary) !important;
  }

  h2.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;  
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 56px !important;
    margin-bottom: 18px !important;
    color: var(--color-text-primary) !important;
  }

  h3.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 700 !important;
    font-size: 28px !important;
    line-height: 40px !important;
    color: var(--color-text-primary) !important;
  }

  /* subtitle text */

  .notion-semantic-string .highlighted-color.color-brown {
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    color: var(--color-text-secondary) !important;
  }

  /* main text */

  .notion-semantic-string .highlighted-color.color-orange {
    font-size: 20px;
    color: var(--color-text-secondary) !important;
  }
  
}

@media (min-width:680px) and (max-width:714px) {
  /* Button */

  .notion-quote.bg-brown {
    background: none !important;
    align-items: center !important;
    font-size: 0.85em !important;
    font-weight: 500 !important;
    border: none !important;
    margin: 30px 0px !important;
    padding: 0px !important;
  }

  .notion-quote.bg-brown .notion-link {
    background: none !important;
    color: #8169FF !important;
    opacity: 1 !important;
    border: 1px solid #8169FF !important;
    padding: .875rem 1rem !important;
    border-radius: .25rem !important;
    cursor: pointer !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }

  .notion-quote.bg-brown .notion-link:hover {
    background: #8169FF !important;
    color: #FFFFFF !important;
    border: 1px solid #8169FF !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }
}

@media (max-width:352px) {
  /* Button */

  .notion-quote.bg-brown {
    background: none !important;
    align-items: center !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    border: none !important;
    margin: 30px 0px !important;
    padding: 0px !important;
  }

  .notion-quote.bg-brown .notion-link {
    background: none !important;
    color: #8169FF !important;
    opacity: 1 !important;
    border: 1px solid #8169FF !important;
    padding: .875rem 1rem !important;
    border-radius: .25rem !important;
    cursor: pointer !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }

  .notion-quote.bg-brown .notion-link:hover {
    background: #8169FF !important;
    color: #FFFFFF !important;
    border: 1px solid #8169FF !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }
}

@media (min-width:715px) and (max-width:848px) {
  /* Button */
  .notion-quote.bg-brown {
    background: none !important;
    align-items: center !important;
    font-size: 1em !important;
    font-weight: 500 !important;
    border: none !important;
    margin: 30px 0px !important;
    padding: 0px !important;
  }

  .notion-quote.bg-brown .notion-link {
    background: none !important;
    color: #8169FF !important;
    opacity: 1 !important;
    border: 1px solid #8169FF !important;
    padding: .875rem 1rem !important;
    border-radius: .25rem !important;
    cursor: pointer !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }

  .notion-quote.bg-brown .notion-link:hover {
    background: #8169FF !important;
    color: #FFFFFF !important;
    border: 1px solid #8169FF !important;
    -webkit-transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
    transition: all 800ms cubic-bezier(0.190, 1.000, 0.220, 1.000) !important;
  }
}

  1. Paste the code script under the CSS section of the code of your Super site:
    2. image

  2. Once you have pasted the code, click on the Save button to save changes. And that’s it!