ProtoPie Community

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 {
	/* text, headings */
  --color-text-default: #373737;
	/* media caption */
  --color-text-default-light: rgba(55, 53, 47, 0.6);
	/* text, quote, toggle, callout colors */
  --color-text-gray: rgb(155, 154, 151);
  --color-text-brown: rgb(100, 71, 58);
  --color-text-orange: rgb(217, 115, 13);
  --color-text-yellow: rgb(223, 171, 1);
  --color-text-green: rgb(15, 123, 108);
  --color-text-blue: rgb(11, 110, 153);
  --color-text-purple: rgb(105, 64, 165);
  --color-text-pink: rgb(173, 26, 114);
  --color-text-red: rgb(224, 62, 62);
	/* text, quote, toggle background colors */
  --color-bg-default: rgb(255, 255, 255);
  --color-bg-gray: rgb(235, 236, 237);
  --color-bg-brown: rgb(233, 229, 227);
  --color-bg-orange: rgb(250, 235, 221);
  --color-bg-yellow: rgb(251, 243, 219);
  --color-bg-green: rgb(221, 237, 234);
  --color-bg-blue: rgb(221, 235, 241);
  --color-bg-purple: rgb(234, 228, 242);
  --color-bg-pink: rgb(244, 223, 235);
  --color-bg-red: rgb(251, 228, 228);
	/* callout background colors */
  --color-bg-gray-light: rgba(235, 236, 237, 0.3);
  --color-bg-brown-light: rgba(233, 229, 227, 0.3);
  --color-bg-orange-light: rgba(250, 235, 221, 0.3);
  --color-bg-yellow-light: rgba(251, 243, 219, 0.3);
  --color-bg-green-light: rgba(221, 237, 234, 0.3);
  --color-bg-blue-light: rgba(221, 235, 241, 0.3);
  --color-bg-purple-light: rgba(234, 228, 242, 0.3);
  --color-bg-pink-light: rgba(244, 223, 235, 0.3);
  --color-bg-red-light: rgba(251, 228, 228, 0.3);
	/* tags (multi-select, select) colors */
  --color-pill-default: rgba(206, 205, 202, 0.5);
  --color-pill-gray: rgba(155, 154, 151, 0.4);
  --color-pill-brown: rgba(140, 46, 0, 0.2);
  --color-pill-orange: rgba(245, 93, 0, 0.2);
  --color-pill-yellow: rgba(233, 168, 0, 0.2);
  --color-pill-green: rgba(0, 135, 107, 0.2);
  --color-pill-blue: rgba(0, 120, 223, 0.2);
  --color-pill-purple: rgba(103, 36, 222, 0.2);
  --color-pill-pink: rgba(221, 0, 129, 0.2);
  --color-pill-red: rgba(255, 0, 26, 0.2);
	/* gallery, board cards color when hovered */
  --color-ui-hover-bg: rgba(55, 53, 47, 0.08);
  --color-ui-hover-bg-light: rgba(55, 53, 47, 0.03);
	/* gallery, board cards background color */
  --color-card-bg: rgb(255, 255, 255);
  --color-accent-bg: rgb(46, 170, 220);
	/* horizontal divider, card border */
  --color-border-default: rgba(235, 236, 237, 0.8);
  --color-border-dark: rgba(55, 53, 47, 0.16);
  --collection-card-cover-size-medium: 250px;
  --color-text-primary: #181818;
  --color-text-secondary: #373737;
}

@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;
}

.notion-header {
  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;
}

.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-toggle {
  margin: 32px 0 !important;
}

.notion-toggle__summary {
  margin-top: 0px !important;
}

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

/* Hidden block */

.notion-toggle.bg-brown {
  display: none !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: #E3DEFF !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-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: 1140px !important;
  margin: 0 auto !important;
  padding-top: 2rem !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(180deg,rgba(255,172,136,0.1) 0%,rgba(255,255,255,0) 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-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: 740px !important;
  margin: 0 auto !important;
  padding-top: 5rem !important;
  padding-bottom: 2rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* callout background orange for section orange 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: 2rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Callout callout gray color */

.notion-callout.color-brown-light, .notion-callout.color-orange-light  {
  box-shadow: 0 0 8px rgb(29 32 39 / 10%) !important;
}

.notion-callout.color-gray-light, .notion-callout.color-brown-light, .notion-callout.color-orange-light  {
  box-shadow: 0 0 8px rgb(29 32 39 / 10%) !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-callout.color-gray-light .notion-semantic-string .link {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.notion-callout.color-gray-light .notion-semantic-string .link:hover {
  color: var(--color-text-yellow) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  opacity: 1 !important;
  transition: none !important;
}

.notion-callout.color-gray-light.border {
  border: none !important;
  border-radius: 8px !important;
}

.notion-callout.color-gray-light:hover {
  box-shadow: 0 0 8px rgb(29 32 39 / 10%) !important;
  transform: translateY(-5px) !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-callout.color-gray-light .notion-callout__content {
  text-align: center !important;
}

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

/* Callout orange color */

.notion-callout.color-orange-light.border {
  border-radius: 8px !important;
}

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

/* Super navbar item list */

.super-navbar__item {
  margin: 0px 5px !important;
}

.super-navbar__item-list .super-navbar__item:last-child {
  background: #8169FF !important;
  color: rgba(255, 255, 255, 1) !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  padding: 17px 24px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.super-navbar__item-list .super-navbar__item:last-child: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;
}

.super-navbar__item-list .super-navbar__item:nth-last-child(2) {
  background: none !important;
  color: #8169FF !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: 1px solid #8169FF !important;
  padding: 17px 24px !important;
  cursor: pointer !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

.super-navbar__item-list .super-navbar__item:nth-last-child(2):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;
}

/* 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;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  font-weight: 500 !important;
  border: none !important;
  margin: 2.5rem 0px !important;
  padding: 0px !important;
}

.notion-quote.color-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.color-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 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: 1px 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: 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;
}

/* Gallery */

.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__header {
  color: var(--color-special-text) !important;
  font-weight: 300 !important;
  background: none !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-family: inherit !important;
  padding: 0px !important;
}

.notion-collection-gallery .notion-collection-card__cover.medium, .notion-collection-card__cover.medium>span, .notion-collection-card__cover.medium img {
  height: 300px !important;
  max-height: 300px !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: 8px !important;
  box-shadow: 0 0 8px rgb(29 32 39 / 10%) !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;
}

/* Property */

.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;
}

.notion-dropdown__button-title {
  font-weight: 500 !important;
  font-size: 14px !important;
}

@media only screen and (max-width: 768px) {
  
  h1.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 800 !important;
    font-size: 47px !important;
    line-height: 60px !important;
    text-align: center !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;
  }

  .notion-toggle__trigger {
    height: 25px !important;
  }
}

@media only screen and (min-width: 768px) {
  .super-navbar__content {
    padding: 18px 50px 18px 0px !important;
  }
  
  h1.notion-heading {
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 800 !important;
    font-size: 62px !important;
    line-height: 80px !important;
    text-align: center !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;
  }

  .notion-toggle__trigger {
    height: 38px !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!