/***********************
VARIABLES
***********************/
:root{
--base-copy-primary: #1B1B18 !important;
--base-copy-secondary: #946800;
--base-bg-decorative: #FDFDF9 !important;
--control-copy-primary: #1B1B1B !important;
--control-border-default #1B1B18 !important;
--control-bg-primary: #FFFFFF!important;
--action-copy-primary: #1B1B18 !important;
--action-copy-hover: #1B1B18 !important;
--action-bg-primary: #F7CE00;
--action-bg-hover: #FDFDF9;
--action-border-default: #1B1B18;
--action-border-hover: #1B1B18;
--cta-padding: 8px 24px;
--cta-border: 2px solid;
--cta-border-radius: 999px;
--transition: all .3s cubic-bezier(0.8,0.04,0.4,1) !important;
--shadow-md: 0 20px 40px -20px rgb(0,0,0,0.2) !important;
}
/*Link hover animation*/
@property --offset {
syntax: '<length>';
inherits: false;
initial-value: 0;
}
/***********************
TEXT STYLES
***********************/
.notion-heading,
.h3.notion-heading:not(.toggle){
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
h1.notion-heading
{
font-family: 'Quicksand';
font-style: normal;
font-weight: 300;
font-size: 62px;
line-height: 78px;
letter-spacing: -0.5px;
color: var(--base-copy-primary);
margin: 0px 0px 0px 0px;
}
h2.notion-heading
{
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 61px;
color: var(--base-copy-primary);
}
.notion-collection__header{
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-size: 49px;
line-height: 61px;
color: var(--base-copy-primary);
}
h3.notion-heading
{
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-size: 25px;
line-height: 31px;
color: var(--base-copy-primary);
margin: 0px 0px 8px 0px;
}
/*leading text body/xl*/
.notion-quote
{
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
font-size: 21px;
line-height: 26px;
letter-spacing: 0.15px;
color: var(--base-copy-primary);
}
.notion-semantic-string .code{
font-family: 'Quicksand';
font-style: normal;
font-weight: 500;
font-size: 21px;
line-height: 26px;
letter-spacing: 0.15px;
background: transparent;
color: var(--base-copy-secondary);
display: inline-block !important;
padding: 8px 8px 8px 0px !important;
}
.notion-callout.bg-gray-light.border{
font-family: 'Quicksand';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.5px;
}
.notion-property__title {
font-family: var(--font) !important;
grid-column-start: 2 !important;
grid-row-start: 1 !important;
font-family: 'Quicksand'!important;
font-style: normal!important;
font-weight: 500!important;
font-size: 25px!important;
line-height: 31px!important;
}
.notion-collection-card .notion-property__title .notion-property-list{
color: var(--control-copy-primary);
}
/*Nav lilnk*/
a.super-navbar__item{
font-family: 'Quicksand';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.5px;
color: var(--action-copy-primary);
opacity: 1;
}
a:hover.super-navbar__item, a:focus.super-navbar__item{
text-decoration-color: var(--action-copy-hover);
color: var(--action-copy-hover);
}
/*Footer link*/
a.super-footer__link{
font-weight: 600;
font-size: 16px;
color: var(--action-copy-primary);
}
a:hover.super-footer__link,
a:focus.super-footer__link {
text-decoration-color: var(--action-copy-hover);
color: var(--action-copy-hover);
}
/***********************
BACKGROUND & FADE ANIMATION
***********************/
body {
/* base/bg/dmBrand */
background: linear-gradient(146.49deg, rgba(247, 206, 0, 0.16) 4.17%, rgba(239, 211, 108, 0.14) 14.06%, rgba(253, 253, 252, 0.2) 28.36%), #FDFDFC; !important;
/*background-attachment: fixed !important;*/
-webkit-animation: fadeIn 1s !important;
-moz-animation: fadeIn 1s !important;
animation: fadeIn 1s !important;
}
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
/***********************
SITE LAYOUT
***********************/
.super-navbar {
background: transparent!important;
}
.max-width {
max-width: 85% !important;
width: 768px !important;
padding: 0 !important;
}
.super-content {
-webkit-animation: fadeInLeft 1s !important;
-moz-animation: fadeInLeft 1s !important;
animation: fadeInLeft 1s !important;
padding: 0 0 60px !important;
}
@keyframes fadeInLeft { 0% { transform: translate3d(-40px,0,0); } 100% { transform: translate3d(0,0,0); } }
@-moz-keyframes fadeInLeft { 0% { transform: translate3d(-40px,0,0); } 100% { transform: translate3d(0,0,0); } }
@-webkit-keyframes fadeInLeft { 0% { transform: translate3d(-40px,0,0); } 100% { transform: translate3d(0,0,0); } }
/*****************
NAVBAR
******************/
/*Nav underline animation starting position */
/*link size*/
a.super-navbar__item{
text-underline-offset: var(--offset, 0.4em);
text-decoration: underline 0.15em;
transition: --offset 600ms, text-decoration-color 400ms;
}
/* Nav underline offset and colours */
a:hover.super-navbar__item,
a:focus.super-navbar__item {
text-decoration: underline 0.25em;
--offset: 0.4em;
}
/* Fallback */
@supports not (background: paint(something)) {
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms;
}
a:hover.super-navbar__item,,
a:focus.super-navbar__item, {
text-underline-offset: 0.4em;
text-decoration: underline;
}
}
/***********************
FOOTER
***********************/
/*Nav underline animation starting position */
a.super-footer__link{
text-underline-offset: var(--offset, 0.4em);
text-decoration: underline 0.15em;
transition: --offset 600ms, text-decoration-color 400ms;
}
/* Nav underline offset and colours */
a:hover.super-footer__link,
a:focus.super-footer__link {
text-decoration: underline 0.25em;
--offset: 0.4em;
}
/* Fallback */
@supports not (background: paint(something)) {
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms;
}
a:hover.super-navbar__item,,
a:focus.super-navbar__item, {
text-underline-offset: 0.4em;
text-decoration: underline;
}
}
/***********************
BUTTONS - turn notion bold text link blocks into a button
***********************/
.notion-root .notion-text .notion-text__content .notion-semantic-string span strong .notion-link, .notion-text .notion-text__content .notion-semantic-string span .notion-link strong {
padding: var(--cta-padding)!important;
border: var(--cta-border)!important;
box-shadow: var(--cta-shadow)!important;
border-radius: var(--cta-border-radius)!important;
opacity: 1!important;
font-weight: 600!important;
display: inline-flex!important;
justify-content: center!important;
transition: all .2s ease!important;
/* You can change the button colors here */
background: var(--action-bg-primary)!important;
color: var(--action-copy-primary-primary)!important;
margin-right:24px;
}
/*Button hover*/
.notion-root .notion-text p.notion-text__content span.notion-semantic-string span strong a.notion-link:hover, .notion-text p.notion-text__content span.notion-semantic-string span a.notion-link strong:hover,
.notion-root .notion-text p.notion-text__content span.notion-semantic-string span strong a.notion-link:focus, .notion-text p.notion-text__content span.notion-semantic-string span a.notion-link strong:focus{
background: var(--action-bg-hover)!important;
border: 2px solid var(--action-border-hover)!important;
text-underline-offset: var(--offset, 0.2em)!important;
text-decoration: underline 0.15em!important;
transition: --offset 400ms, text-decoration-color 400ms!important;
}
.notion-root .notion-text p.notion-text__content span.notion-semantic-string span strong a.notion-link:hover, .notion-text p.notion-text__content span.notion-semantic-string span a.notion-link strong:hover {
--offset: 0.2em!important;
}
@supports not (background: paint(something))
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms!important;
}
.notion-callout.bg-gray-light.border:hover, .notion-callout.bg-gray-light.border:focus {
text-underline-offset: 0.2em!important;
}
/***********************
SECTIONS
***********************/
/*hero*/
.notion-callout.bg-blue-light.border{
margin:56px 0px;
padding: 0px 0px !important;
border: none !important;
background: transparent !important;
}
.notion-callout.bg-blue-light.border .notion-callout__content{
row-gap: 16px
}
/*button group*/
.notion-callout.bg-yellow-light.border{
margin-top:24px 0px 0px 0px;
padding: 0px 0px !important;
border: none !important;
background: transparent !important;
}
.notion-callout.bg-yellow-light.border .notion-callout__content{
display: flex;
flex-direction: flex-grow;
flex-wrap: wrap;
padding: 0px 0px;
margin: 16px 0px 0px 0px;
}
/*database gallary section*/
.notion-callout.bg-purple-light.border{
margin: 56px 0px !important;
padding: 0px 80px 0px 0px !important;
overflow: visible !important;
border: none !important;
background: transparent !important;
}
.notion-callout.bg-purple-light.border .notion-callout__content{
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 0px 0px;
margin: 16px 0px 0px 0px;
overflow: visible !important;
}
/***********************
GALLERY
***********************/
/*GALLERY LAYOUT*/
/*gallery padding from header to cards*/
.notion-collection__header {
margin: 0px 0px 40px 0px;
}
/*hoz layout*/
.notion-collection-gallery {
display: block !important;
border: none !important;
justify-content: start;
}
/* Prevent gallery card content from cutting off */
.notion-collection-card__content span {
white-space: normal !important;
}
/*card*/
/*card layout and border*/
.notion-collection-card {
grid-template-columns: min-content !important;
transition: var(--transition) !important;
padding: 0px 16px 0px 0px !important;
overflow: visible !important;
border-radius: 16px !important;
/* box-shadow: none !important; */
grid-gap: 32px !important;
display: grid !important;
border: 2px solid;
border-color: var(--control-border-default);
background: var(--control-bg-primary);
margin-bottom: 24px;
}
/*card image auto height & radius*/
.notion-collection-card__cover,
.notion-collection-card__cover div,
.notion-collection-card__cover img {
border-radius: 16px 0px 0px 16px !important;
width: 160px !important;
}
.notion-collection-card__cover.small, .notion-collection-card__cover.medium{
min-height: none;
max-height: none;
height: auto;
}
/*content block styling*/
.notion-collection-card__content {
align-items: flex-end !important;
grid-column-start: 2 !important;
grid-row-start: 1 !important;
font-size: 16px !important;
/* opacity: 0.6 !important;*/
padding: 24px 0px !important;
}
/*Intro font size */
.notion-collection-card__property{
font-size: 1rem;
margin-bottom: 16px;
}
/*Pills wrapping */
.notion-collection-card__content .notion-property__select{
flex-wrap: wrap;
}
/*INTERACTIONS*/
/* Grow and animate hovered card. Removing notion opacity */
.notion-collection-card:hover {
background: var(--control-bg-primary) !important;
opacity: 1 !important;
/*hover animation*/
transform: translateX(12px) !important;*/
transform: scale(1.02, 1.02) !important;
box-shadow: 8px 8px 0px #000000;
}
/* Add opacity to the other cards in the gallery */
.notion-collection-gallery:hover .notion-collection-card {
opacity: 0.6;
}
/*Hover underline on heading*/
.notion-collection-card.gallery:hover .notion-property__title .notion-semantic-string{
text-underline-offset: var(--offset, 0.2em);
text-decoration: underline 0.15em;
transition: --offset 600ms, text-decoration-color 400ms;
}
/* hover underline offset and colours */
.notion-collection-card.gallery:hover .notion-property__title .notion-semantic-string,
.notion-collection-card.gallery:focus .notion-property__title .notion-semantic-string {
text-decoration: underline 0.15em;
--offset: 0.25em;
}
/* Fallback */
@supports not (background: paint(something)) {
a {
transition: text-underline-offset 400ms, text-decoration-color 400ms;
}
.notion-collection-card.gallery:hover .notion-property__title .notion-semantic-string,
.notion-collection-card.gallery:focus .notion-property__title .notion-semantic-string {
text-underline-offset: 0.25em;
}
.jpg&w=1080&q=75)
