$monitor: 1440px;
$laptop: 1024px;
$tablet: 992px;
$mobile: 768px;
@mixin breakpoint($point) {
@if $point == monitor {
@media (max-width: $monitor - 1px) {
@content;
}
} @else if $point == laptop {
@media (max-width: $laptop - 1px) {
@content;
}
} @else if $point == tablet {
@media (max-width: $tablet - 1px) {
@content;
}
} @else if $point == mobile {
@media (max-width: $mobile - 1px) {
@content;
}
}
}
// https://wizardry-technique.webflow.io/
body {
font-size: 1.1111111111111112vw;
}
/* Max Font Size */
@media screen and (min-width:1440px) {
body {
font-size: 16px;
}
}
/* Min Font Size */
@media screen and (max-width:991px) {
body {
font-size: 1em;
}
}
// https://wizardry-technique.webflow.io/
body {
font-family: GT-America;
font-style: normal;
font-weight: 275;
line-height: 150%;
color: var(--forest);
background-color: var(--page-bg);
}
h1, .h1 {
font-size: 5em;
font-style: normal;
font-weight: 500;
line-height: 110%;
letter-spacing: -0.8px;
margin: 0.25em 0 0.75em;
@include breakpoint(tablet) {
font-size: 3.125em;
}
}
h2, .h2 {
font-size: 3.125em;
font-style: normal;
font-weight: 500;
line-height: 120%;
letter-spacing: -1px;
margin: 0.25em 0 0.75em;
@include breakpoint(tablet) {
font-size: 2.1875em;
}
}
h3, .h3 {
font-size: 2.8125em;
font-style: normal;
font-weight: 500;
line-height: 125%;
letter-spacing: -0.9px;
margin: 0.25em 0 0.75em;
@include breakpoint(tablet) {
font-size: 1.75em;
}
}
h4, .h4 {
font-size: 1.875em;
font-style: normal;
font-weight: 500;
line-height: 105%;
letter-spacing: -0.6px;
margin: 0.25em 0 0.75em;
@include breakpoint(tablet) {
font-size: 1.25em;
}
}
p {
font-style: normal;
font-size: 16px;
font-weight: 275;
line-height: 150%;
// color: var(--forest);
}
.eyebrow {
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 123%;
letter-spacing: 1.5px;
text-transform: uppercase;
@include breakpoint(tablet) {
font-size: 12px;
}
}
// LARGE BUTTON
.button-large {
display: inline-block;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 105.687%;
text-transform: capitalize;
text-decoration: none;
color: inherit;
padding: 0.82em 2em;
min-width: 212px;
border: 1px solid var(--forest);
border-radius: 25px;
transition: 0.3s background-color;
&:hover {
background-color: var(--evergreen);
border-color: var(--evergreen);
color: var(--neutral);
}
&--white-line {
@extend .button-large;
color: var(--white);
border: 1px solid var(--white);
&:hover {
color: var(--black);
background-color: var(--white);
}
}
&--evergreen {
@extend .button-large;
background-color: var(--evergreen);
color: var(--neutral);
border: none;
&:hover {
background-color: var(--forest);
}
}
}
// SMALL BUTTON
.button-small {
.button-small-href {
display: flex;
padding: 20px 0;
color: inherit;
text-decoration: none;
.button-small-line-right {
position: relative;
margin-left: 10px;
width: 35px;
height: 2px;
background-color: #06443c;
border-radius: 2px;
transition: 200ms width;
&:before, &:after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
width: 10px;
height: 2px;
background-color: #06443c;
transform: rotate(45deg);
right: -1px;
top: -3px;
border-radius: 2px;
}
&:after {
transform: rotate(-45deg);
top: 3px;
}
}
.button-small-line-left {
position: relative;
margin-right: 10px;
width: 35px;
height: 2px;
background-color: #06443c;
border-radius: 2px;
transition: 200ms width;
&:before, &:after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
width: 10px;
height: 2px;
background-color: #06443c;
transform: rotate(-45deg);
left: -1px;
top: -3px;
border-radius: 2px;
}
&:after {
transform: rotate(45deg);
top: 3px;
}
}
&:hover {
.button-small-line-right {
width: 50px;
}
.button-small-line-left {
width: 50px;
}
}
}
&--white {
@extend .button-small;
.button-small-href {
color: var(--white);
.button-small-line-right, .button-small-line-left {
background-color: var(--white);
&:before, &:after {
background-color: var(--white);
}
}
}
&:hover {
.button-small-line-right {
width: 50px;
}
.button-small-line-left {
width: 50px;
}
}
}
}
// DARK NAV
.nav-dark {
position: absolute;
background-color: var(--page-bg);
width: 100%;
height: 82px;
z-index: 1001;
@media screen and (max-width:991px) {
top: 0px;
height: 54px;
}
.nav-outside {
position: absolute;
background-image: none;
@media screen and (max-width:991px) {
background-color: var(--page-bg);
}
.nav-inside {
.nav-logo-image-white {
display: none;
}
.nav-logo-image-dark {
display: block;
}
.nav-menu {
.nav-linklist-label {
color: var(--forest);
}
.nav-linklist {
.nav-linklist-item {
.nav-linklist-item-link {
color: var(--forest);
}
}
}
.nav-button {
color: var(--forest);
border-color: var(--forest);
}
}
.nav-burger-btn {
.nav-burger-btn-bar {
background-color: var(--forest);
}
}
}
}
}
.w-dyn-item {
&.featured-item {
grid-column: 1/3 !important;
}
}
.image-card-cta {
.image-card-cta-image {
&:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(53, 53, 53, 0.00) 0%, rgba(53, 53, 53, 0.73) 100%);
z-index: 1;
}
&:after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--sage);
z-index: 2;
opacity: 0;
transition: 0.3s opacity;
}
}
.image-card-cta-play-icon {
.circle, .triangle {
transition: 0.3s all;
}
}
.button-small {
.button-small-line-right {
background-color: var(--white);
&:before, &:after {
background-color: var(--white);
}
}
}
&:hover {
color: var(--forest);
.image-card-cta-image {
&:after {
opacity: 1;
}
}
.image-card-cta-play-icon {
.circle {
fill: var(--moss);
}
.triangle {
fill: var(--moss);
}
}
.button-small {
.button-small-line-right {
background-color: var(--forest);
width: 50px;
&:before, &:after {
background-color: var(--forest);
}
}
}
}
}
Australian Coffee Franchise Looks To Bring Third Wave Of Coffee To US Offices
Meet our newest partner
.w-dyn-item {
&.featured-item {
grid-column: 1/3 !important;
}
}
.image-card-cta {
.image-card-cta-image {
&:before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(53, 53, 53, 0.00) 0%, rgba(53, 53, 53, 0.73) 100%);
z-index: 1;
}
&:after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV8/pCJVETuIOGRoO9lFRRy1CkWoEGqFVh1MLv2CJg1Jiouj4Fpw8GOx6uDirKuDqyAIfoA4OzgpukiJ/0sKLWI8OO7Hu3uPu3eAv1llqhmcBVTNMjKppJDLrwqhVwQxhAHEEJeYqc+JYhqe4+sePr7eJXiW97k/R79SMBngE4hnmW5YxBvE05uWznmfOMLKkkJ8Tjxu0AWJH7kuu/zGueSwn2dGjGxmnjhCLJS6WO5iVjZU4iniqKJqlO/Puaxw3uKsVuusfU/+wnBBW1nmOs0xpLCIJYgQIKOOCqqwkKBVI8VEhvaTHv5Rxy+SSyZXBYwcC6hBheT4wf/gd7dmcXLCTQongZ4X2/6IAaFdoNWw7e9j226dAIFn4Err+GtNYOaT9EZHix4Bg9vAxXVHk/eAyx1g5EmXDMmRAjT9xSLwfkbflAeGb4G+Nbe39j5OH4AsdZW+AQ4OgXiJstc93t3b3du/Z9r9/QCwaXK/e5hOFQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gEEQ4nOaS4shIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=);
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--sage);
z-index: 2;
opacity: 0;
transition: 0.3s opacity;
}
}
.image-card-cta-play-icon {
.circle, .triangle {
transition: 0.3s all;
}
}
.button-small {
.button-small-line-right {
background-color: var(--white);
&:before, &:after {
background-color: var(--white);
}
}
}
&:hover {
color: var(--forest);
.image-card-cta-image {
&:after {
opacity: 1;
}
}
.image-card-cta-play-icon {
.circle {
fill: var(--moss);
}
.triangle {
fill: var(--moss);
}
}
.button-small {
.button-small-line-right {
background-color: var(--forest);
width: 50px;
&:before, &:after {
background-color: var(--forest);
}
}
}
}
}
Australian Coffee Distribution Franchise Now Serving The Queen City
Meet our newest partner