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
  3. Once you have pasted the code, click on the Save button to save changes. And that’s it!