css
:root {
--column-spacing: 3rem !important;
--lift-radius: 14px !important;
--body-font: clamp(14px, 1.5vw, 18px);
--dark-blue: #303437;
--main-blue: #4f586d;
--main-blue-faded: rgba(79, 88, 109, 0.8);
--orange: #b44f2a;
--icy: #f4f2f2;
--beige: #f2eee9;
--dark-green: #988f7a;
--dark-green-warm: #93865d;
--beige-faded: rgba(189, 178, 152, 0.3);
--blue-faded: rgba(78, 85, 91, 0.3);
--white90: rgba(255, 255, 255, 0.9);
--dark-grey: #2f3030;
--yellow: #e9b956;
--main-light: #edeeee;
--layout-max-width: 1440px !important;
--reading-max-width: 700px !important;
}
html.theme-light {
--color-text-default: var(--main-blue) !important;
--color-bg-default: var(--beige) !important;
--color-bg-gray-light: var(--icy) !important;
--color-text-orange: var(--orange) !important;
--color-bg-orange: var(--orange) !important;
--color-bg-yellow: var(--color-bg-default) !important;
--color-text-blue: var(--main-blue) !important;
--cta-text: var(--white90) !important;
--cta-bg: var(--orange) !important;
--sec-cta-stroke: var(--beige-faded);
--sec-cta-bg: var(--color-bg-default);
--sec-cta-text: var(--dark-green);
--button-stroke: var(--main-blue-faded);
}
html.theme-dark {
--color-text-default: var(--main-light) !important;
--color-bg-default: var(--dark-blue) !important;
--color-bg-gray-dark: var(--dark-grey) !important;
--color-text-orange: var(--yellow) !important;
--color-bg-orange: var(--yellow);
--color-bg-orange-light: var(--yellow) !important;
--color-bg-yellow: var(--color-bg-default) !important;
--color-text-blue: var(--main-light) !important;
--cta-text: var(--dark-grey) !important;
--cta-bg: var(--yellow) !important;
--sec-cta-stroke: var(--blue-faded);
--sec-cta-bg: var(--color-bg-default);
--sec-cta-text: var(--dark-green-warm);
--button-stroke: var(--white90);
}
/*----------------------*/
.notion-root > .notion-image {
width: 25%;
margin: auto;
padding: 10rem 0rem 1rem 0rem;
}
.bg-brown {
display: none;
}
.notion-quote {
border-inline-start: 0 !important;
display: flex;
margin: auto;
padding: 1rem 0rem;
-webkit-animation: fadeIn 0.5s !important;
-moz-animation: fadeIn 0.5s !important;
-ms-animation: fadeIn 0.5s !important;
-o-animation: fadeIn 0.5s !important;
animation: fadeIn 0.5s !important;
}
.notion-quote .notion-semantic-string {
color: var(--color-text-default);
font-size: clamp(1rem, 1.1vw, 1.1rem); /* Responsive font size */
font-family: Lexend;
font-weight: 400;
line-height: 140%;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
}
h1 {
font-family: Merriweather !important;
font-size: clamp(
2rem,
3.125vw,
3.125rem
) !important; /* Adjusts between 2rem and 3.125rem */
line-height: 140% !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
max-width: var(--reading-max-width) !important;
min-width: var(--lrc-min-width);
color: var(--color-text-default);
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 1rem 0rem !important;
-webkit-animation: fadeIn 0.5s !important;
-moz-animation: fadeIn 0.5s !important;
-ms-animation: fadeIn 0.5s !important;
-o-animation: fadeIn 0.5s !important;
animation: fadeIn 0.5s !important;
}
/*-----------------*/
.highlighted-color.color-orange {
color: var(--color-text-orange);
text-align: center;
font-family: Mulish;
font-size: clamp(1rem, 1.25vw, 1.25rem); /* Responsive font size */
font-style: italic;
font-weight: 600;
line-height: 120%;
letter-spacing: 0.02em;
max-width:var(--reading-max-width)!important;
padding:
clamp(0.5rem, 0.875vw, 0.875rem) /* Top padding */
clamp(0.25rem, 0.625vw, 0.625rem) /* Right padding */
clamp(1.5rem, 2.75vw, 2.75rem) /* Bottom padding */
clamp(0.25rem, 0.625vw, 0.625rem); /* Left padding */0.875rem 0.625rem 2.75rem 0.625rem;
margin:auto;
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
}
.notion-text__content .color-orange {
display: flex;
justify-content: center!important;
align-items: center;
}
/*-----------------------*/
.notion-callout.bg-orange-light.border {
background-color: var(--cta-bg);
padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem);
display:flex;
justify-content: flex-end;
align-items: center;
border-radius: var(--lift-radius);
gap:0.75rem;
margin-top: clamp(1rem, 2vw, 2rem); /* Top margin */
margin-bottom: clamp(1rem, 2vw, 2rem); /* Bottom margin */
margin-right: clamp(1rem, 2vw, 2rem); /* Right margin */
}
.notion-callout__icon {
display: none!important;
}
.bg-orange-light.border.notion-callout .notion-callout__content .notion-semantic-string{
display:inline!important;
}
.notion-callout.bg-orange-light.border {
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
cursor: pointer; /* Change cursor to pointer */
transition: opacity 0.3s ease-in-out;
}
.notion-callout.bg-orange-light.border:hover {
opacity: 0.85; /* Change transparency on hover */
}
.notion-semantic-string .code {
color: var(--color-text-default);
background-color: transparent;
font-size: clamp(0.875rem, 1.1vw, 1.1rem); /* Responsive font size */
padding: 0;
}
.bg-orange-light.border.notion-callout .notion-semantic-string .code {
color: var(--cta-text)!important;
background-color: var(--cta-bg)!important;
}
.notion-callout.bg-orange-light .notion-callout__content {
display: inline-flex;
color: var(--cta-text);
font-family: Lexend;
font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
font-weight: 500;
line-height: 150%;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
margin-inline-start: 0;
}
.notion-root > .notion-column-list :nth-child(1) {
flex-direction: column;
justify-content: center;
align-items: flex-end;
}
/*-------------------*/
.bg-yellow-light.border.notion-callout .notion-callout__content {
margin-inline-start: 0px;
display:inline!important;
align-items: center!important;
border-radius:var(--lift-radius);
border: 2px solid var(--sec-cta-stroke);
padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem); /* Responsive padding */
justify-content: center !important;
justify-content: center!important;
align-items: center!important;
}
.notion-callout.bg-yellow-light.border {
display:inline-block!important;
background-color: transparent;
border: none!important;
margin-top: clamp(1rem, 2vw, 2rem); /* Responsive margin */
margin-bottom: clamp(1rem, 2vw, 2rem); /* Responsive margin */
cursor: pointer; /* Change cursor to pointer */
transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}
.notion-callout.bg-yellow-light.border:hover {
opacity: 0.6; /* Change transparency on hover */
}
.bg-yellow-light.border.notion-callout
.notion-callout__content
.notion-semantic-string {
color: var(--sec-cta-text);
font-family: Lexend;
font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
font-weight: 500;
line-height: 150%;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
text-align: center !important;
display: inline-block !important;
}
/*-------------------*/
.notion-callout.bg-gray-light {
background-color: var(--color-bg-gray-light);
}
.notion-callout.bg-gray-light.border {
border-color: var(--color-bg-gray-light);
display: flex;
width: clamp(20rem, 82vw, 80rem);
max-width: calc(100% - 2 * env(safe-area-inset-right))!important;
padding: clamp(3rem, 4vw, 6rem) clamp(3rem, 4vw, 6rem); /* Responsive padding */
justify-content: center;
border-radius: 1.875rem;
align-items: center;
flex-shrink: 0;
margin-left:auto;
margin-right:auto;
}
.highlighted-color.color-pink {
color: var(--color-text-default);
font-family: Lexend;
font-size: clamp(1rem, 1.125vw, 1.125rem); /* Responsive font size */
font-weight: 400;
line-height: 140%;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.notion-callout.bg-gray-light.border
.notion-callout__content
.notion-column-list:nth-child(2n+1)
.notion-column:nth-child(2n+1),
.notion-callout.bg-gray-light.border
.notion-callout__content
.notion-column-list:nth-child(2n)
.notion-column:nth-child(2n) {
color: var(--color-text-default);
font-family: PT Serif Caption;
font-size: clamp(1rem, 1.125vw, 1.125rem); /* Responsive font size */
font-style: normal;
font-weight: 400;
line-height: 125%;
letter-spacing: 0.01em;
display:flex;
justify-content: space-between!important;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
padding: clamp(2rem, 1vw, 3rem) clamp(2rem, 2vw, 4rem)
clamp(0rem, 0.5vw, 1rem) clamp(1rem, 1vw, 2rem) !important;
}
}
.notion-callout.bg-gray-light.border
.notion-callout__content
.notion-column-list:nth-child(2n+1)
.notion-column:nth-child(2n+1) h3,
.notion-callout.bg-gray-light.border
.notion-callout__content
.notion-column-list:nth-child(2n)
.notion-column:nth-child(2n) h3{
margin-left: 0 !important;
}
/*-------------*/
.notion-callout.bg-blue-light {
background-color: var(--icy)!important;
}
.bg-blue-light.border.notion-callout .notion-callout__content {
margin-inline-start: 0px;
align-items: center!important;
border-radius:var(--lift-radius);
border: 2px solid var(--button-stroke);
padding: clamp(0.5rem, 0.875vw, 0.875rem) clamp(1rem, 2vw, 2rem); /* Responsive padding */
justify-content: center !important;
justify-content: center!important;
align-items: center!important;
}
.notion-callout.bg-blue-light .notion-callout__content {
color: var(--color-text-default);
font-family: Lexend;
font-size: clamp(0.875rem, 1.05vw, 1.05rem); /* Responsive font size */
font-weight: 500;
line-height: 150%;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
}
.notion-callout.bg-blue-light.border {
display:inline-block!important;
background-color: transparent;
border: none!important;
margin-top: clamp(1rem, 2vw, 2rem); /* Responsive margin */
margin-bottom: clamp(1rem, 2vw, 2rem); /* Responsive margin */
padding-left:0;
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
cursor: pointer; /* Change cursor to pointer */
transition: opacity 0.3s ease-in-out;
cursor: pointer; /* Change cursor to pointer */
transition: opacity 0.3s ease-in-out; /* Smooth transition for opacity */
}
.notion-callout.bg-blue-light.border:hover {
opacity: 0.6; /* Change transparency on hover */
}
.bg-blue-light.border.notion-callout .notion-semantic-string .code {
color: var(--color-text-default) !important;
background-color: transparent;
}
/*---------------*/
.super-navbar {
-webkit-backdrop-filter: blur(16px) !important;
backdrop-filter: blur(16px) !important;
max-width: 900px !important;
min-width: 20rem;
font-famil
width: calc(80% - var(--column-spacing)) !important;
border-radius: 100px;
top: 0.5rem !important;
padding: 0 1rem;
margin: auto;
}
.super-footer {
font-family: lexend;
font-weight:400;
letter-spacing:0.0425rem;
line-height:1.5rem;
ront-size: 1.0625rem;
text-transform:uppercase;
}
.super-footer__list, .super-footer__list-links {
gap:0;
}
.super-footer__footnote {
font-family: "pt Srif Caption";
font-size:1.125rem;
font-style:italic;
text-transform:none;
line-height:125%;
letter-spacing:0.01125rem;
padding-top:4rem;
}
h3 {
font-size: clamp(
1.75rem,
2.5vw,
2.5rem
) !important; /* Adjusts between 1.75rem and 2.5rem */
font-family: Lexend !important;
line-height: 140% !important;
font-weight: 500 !important;
letter-spacing: -0.02em !important;
margin-left: auto;
margin-right: auto;
color: var(--text-color-default);
-webkit-animation: fadeIn 0.75s !important;
-moz-animation: fadeIn 0.75s !important;
-ms-animation: fadeIn 0.75s !important;
-o-animation: fadeIn 0.75s !important;
animation: fadeIn 0.75s !important;
}
.notion-link {
text-decoration: none !important;
}
.notion-column > .notion-heading:first-of-type {
margin-left: 0
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24;
vertical-align: middle;
}
@media (max-width:680px) {
.super-footer {
text-align:center;
}
.super-footer.has-list .super-footer__links {
grid-template-columns:1fr!important;
}
.notion-root > .notion-column-list :nth-child(1) {
margin-bottom:0;
align-items:center;
}
.notion-column-list > .notion-column:nth-child(2) {
margin-top:0;
padding-top:0;
}
.notion-column-list > .notion-column:nth-child(1) {
margin-top:0.9rem;
padding-top:0;
}
.notion-column-list > .notion-column:nth-child(2) .bg-yellow-light.border.notion-callout {
padding-left: 0;
margin-top:0;
margin-left:auto;
margin-right:auto;
}
.notion-root > .notion-column-list :nth-child(1) .notion-callout.bg-orange-light.border {
margin-left:0;
margin-right:0;
}
.notion-callout.bg-gray-light.border {
padding:0rem 0.9rem;
margin-top:3rem;
}
.notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(2) {
order: 1;
}
.notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(1) {
order: 2;
}
.notion-callout.bg-gray-light.border .notion-callout__content > .notion-column-list:nth-child(3) > .notion-column:nth-child(2) .notion-text {
display:none;
}
.notion-callout.bg-gray-light.border .notion-callout__content {
margin-left:0;
}
.notion-callout.bg-gray-light.border .notion-callout__content .notion-text:not([class*=" "]) {
display:none;
}
.notion-callout.bg-gray-light.border .notion-callout__content .notion-column-list:nth-child(2n+1) .notion-column:nth-child(2n+1), .notion-callout.bg-gray-light.border .notion-callout__content .notion-column-list:nth-child(2n) .notion-column:nth-child(2n) {
padding-bottom: clamp(5rem, 20vw, 10rem)!important;
}
}