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

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