.empty {}:root {
--font-family--inherit: inherit;
--font-weight--inherit: inherit;
--font-weight--100: 100;
--font-weight--200: 200;
--font-weight--300: 300;
--font-weight--400: 400;
--font-weight--500: 500;
--font-weight--600: 600;
--font-weight--700: 700;
--font-weight--800: 800;
--font-weight--900: 900;
--line-height--inherit: inherit;
--letter-spacing--inherit: inherit;
--text-transform--none: none;
--text-transform--uppercase: uppercase;
--text-transform--capitalize: capitalize;
--text-transform--lowercase: lowercase;
--text-transform--inherit: inherit;
--swatch--currentcolor: currentColor;
--swatch--inherit: inherit;
--section-spacing-dm: 240px;
--section-spacing: 120px;
--section-top: 88px;
}
body { overscroll-behavior: none; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; }
button { background-color: unset; padding: unset; }
img::selection { background: transparent; }
.page_wrap { overflow: clip; }
:is(h1, h2, h3, h4, h5, h6, p) a { text-decoration: underline; }
.w-richtext > *:first-child { margin-top: 0; }
.w-richtext > *:last-child { margin-bottom: 0; }
.wf-empty[class*="--"] { padding: 0; }
.width-fit-content { width: fit-content; }
.truncate {
white-space: nowrap;
text-overflow: ellipsis;
max-width: fit-content;
width: 100%;
}
// Dark Mode
.dark-mode {
.top-divider {
background-color: var(--color--c-white-t12);
}
}
// Media Queries
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {
:root {
--section-spacing-dm: 160px;
--section-spacing: 88px;
--section-top: 64px;
}
}
@media screen and (max-width: 478px) {}
@media screen and (max-width: 320px) {}.page-wrap {
/* typography test */
// .h1 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h1-font-size);
// letter-spacing: -0.18rem;
// line-height: 120%;
// font-weight: 600;
// }
// .h2 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h2-font-size);
// letter-spacing: -0.2rem;
// line-height: 112%;
// font-weight: 600;
// }
// .h3 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h3-font-size);
// letter-spacing: -0.105rem;
// line-height: 120%;
// font-weight: 600;
// }
// .h4 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h4-font-size);
// letter-spacing: -0.09rem;
// line-height: 116%;
// font-weight: 600;
// }
// .h5 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h5-font-size);
// letter-spacing: -0.075rem;
// line-height: 132%;
// font-weight: 600;
// }
// .h6 {
// font-family: var(--font-family--primary-family);
// font-size: var(--headlines--h6-font-size);
// letter-spacing: -0.06rem;
// line-height: 132%;
// font-weight: 600;
// }
.p {
font-family: var(--font-family--primary-family);
font-size: var(--paragraphs--p-font-size);
letter-spacing: var(--paragraphs--letter-spacing);
line-height: var(--paragraphs--line-height);
}
.p-s {
font-family: var(--font-family--primary-family);
font-size: var(--paragraphs--p-small-font-size);
letter-spacing: var(--paragraphs--letter-spacing);
line-height: var(--paragraphs--line-height);
}
.p-l {
font-family: var(--font-family--primary-family);
font-size: var(--paragraphs--p-large-font-size);
letter-spacing: var(--paragraphs--letter-spacing);
line-height: var(--paragraphs--line-height);
}
.p-xl {
font-family: var(--font-family--primary-family);
font-size: var(--paragraphs--p-xlarge-font-size);
letter-spacing: var(--paragraphs--letter-spacing);
line-height: var(--paragraphs--line-height);
}
.dark-mode {
.h1, .h2, .h3, .h4, .h5, .h6, .overline {
color: var(--color--white);
}
.p-s, .p, .p-l, .p-xl {
color: var(--color--neutral-80);
}
strong {
color: var(--color--white);
}
}
}
.w-richtext {
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-family--primary-family);
letter-spacing: var(--headlines--letter-spacing);
line-height: var(--headlines--line-height);
font-weight: 600;
margin: 0;
padding: 0;
}
h1 {
font-size: var(--headlines--h1-font-size);
margin-bottom: 1.5rem;
}
h2 {
font-size: var(--headlines--h2-font-size);
margin-bottom: 1.5rem;
}
h3 {
font-size: var(--headlines--h3-font-size);
margin-bottom: 1.5rem;
}
h4 {
font-size: var(--headlines--h4-font-size);
margin-bottom: 1rem;
}
h5 {
font-size: var(--headlines--h5-font-size);
margin-bottom: 1rem;
}
h6 {
font-size: var(--headlines--h6-font-size);
margin-bottom: 1rem;
}
p,li,ol,a,blockquote {
font-family: var(--font-family--primary-family);
letter-spacing: var(--paragraphs--letter-spacing);
font-size: 1rem;
}
p, blockquote {
line-height: 1.5em;
padding: 0;
margin: 0 0 1.5rem 0;
}
p {
&+p { margin-top: -1rem; } // Grouped P's are closer
}
blockquote {
margin: 0 0 1.5rem 0;
padding: 0 0 0 1rem;
border-left: .1875rem solid black;
position: relative;
font-size: 1.25rem;
}
ul, ol {
padding: 0;
margin: 0 0 1.75rem 0;
}
li {
padding: 0 0 0 .25rem;
margin: 0 0 .25rem 2rem;
}
a {
color: black;
font-weight: 500;
&:hover, &:focused, &:clicked {
color: var(--color--neutral-900);
}
}
}
h1,h2,h3,h4,h5,h6 {
span {
font-family: var(--font-family--secondary-family), sans-serif;
color: #009bff;
font-style: italic;
font-weight: 600;
}
}
/* responsive font scaling */
/* tablet */
@media screen and (max-width: 991px) {
:root {
--headlines--h1-font-size: 4rem;
--headlines--h2-font-size: 3.75rem;
--headlines--h3-font-size: 3.5rem;
--headlines--h4-font-size: 3.25rem;
}
}
/* landscape */
@media screen and (max-width: 767px) {
:root {
--headlines--h1-font-size: 3rem;
--headlines--h2-font-size: 2.75rem;
--headlines--h3-font-size: 2.5rem;
--headlines--h4-font-size: 2.25rem;
}
}
/* portrait */
@media screen and (max-width: 479px) {
:root {
--headlines--h1-font-size: 3rem;
--headlines--h2-font-size: 2.75rem;
--headlines--h3-font-size: 2.5rem;
--headlines--h4-font-size: 2.25rem;
}
}
BLOG
Insights and inspiration to accelerate your growth.
