How to add the CSS code script to your site on Super:
- Head over to your Super dashboard and click on the gear icon to enter your site.
- On the next page, click on code.
- 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)
‣
‣
‣
: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 red for linear section orange background*/
.notion-callout.bg-red-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-red-light.border {
border: none !important;
}
.notion-callout.bg-red-light .notion-callout__icon .notion-icon {
display: none !important;
}
.notion-callout.bg-red-light .notion-callout__icon {
display: none !important;
}
.notion-callout.bg-red-light .notion-callout__content {
max-width: 1140px !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 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 */
.notion-collection-gallery.medium {
gap: 37px !important;
padding: 25px 55px !important;
}
.notion-collection-gallery.medium .notion-collection-card .notion-property__title {
font-family: var(--secondary-font) !important;
font-weight: 500 !important;
}
.notion-collection-gallery.medium .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.medium .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.medium .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.medium .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.medium .notion-collection-card__content {
padding: .875rem 1.5rem !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__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.large .notion-collection-card__cover.large, .notion-collection-card__cover.large>span, .notion-collection-card__cover.large 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;
}
}‣
: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;
}
}- Paste the code script under the CSS section of the code of your Super site:
- Once you have pasted the code, click on the Save button to save changes. And that’s it!
