@use 'sass:math';
@function torem($px){
@return calc($px / 16);
}
html,body { padding:0; margin:0;}
// a clamping function used for fluid values
@function fluid($fmin, $fmax, $vmin, $vmax){
$fminr: torem($fmin);
$fmaxr: torem($fmax);
$vminr: torem($vmin);
$vmaxr: torem($vmax);
$v: calc(100 * ($fmaxr - $fminr) / ($vmaxr - $vminr));
$r: calc( (($vminr * $fmaxr) - ($vmaxr * $fminr)) / ($vminr - $vmaxr) );
@return clamp(#{$fminr}rem, #{$v}vw + #{$r}rem, #{$fmaxr}rem);
}
$desk-max: 2600;
$desktop-upper: 1440;
$desktop-lower: 1080;
$tablet: 600;
$mobile: 300;
section, nav{
width:100%;
display: grid;
padding-left: fluid(32, 48, 1080, 1920);
padding-right: fluid(32, 48, 1080, 1920);
}
.grid-padding-left{
padding-left: fluid(32, 48, 1080, 1920);
}
.grid-padding-right{
padding-right: fluid(32, 48, 1080, 1920);
}
.grid-padding{
padding-left: fluid(32, 48, 1080, 1920);
padding-right: fluid(32, 48, 1080, 1920);
}
@media (max-width:#{$mobile}px){
.grid-padding-left{
padding-left: fluid(20, 24, $mobile, $tablet);
}
.grid-padding-right{
padding-right: fluid(20, 24, $mobile, $tablet);
}
.grid-padding{
padding-left: fluid(20, 24, $mobile, $tablet);
padding-right: fluid(20, 24, $mobile, $tablet);
}
}
@media (max-width:#{$tablet}px){
.grid-padding-left{
padding-left: fluid(24, 32, $tablet, $desktop-lower);
}
.grid-padding-right{
padding-right: fluid(24, 32, $tablet, $desktop-lower);
}
.grid-padding{
padding-left: fluid(24, 32, $tablet, $desktop-lower);
padding-right: fluid(24, 32, $tablet, $desktop-lower);
}
}
//!------GRID DEFINITIONS------
//------
//grid is desktop first. mobile specific styling is defined with 'm_' and tablet with 't_'
//mobile
@media (min-width:#{$mobile}px){
section, footer, .grid, nav{
width:100%;
padding-left: torem(20)+rem;
padding-right: torem(20)+rem;
display: grid;
gap: fluid(20, 24, $mobile, $tablet);
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
}
@for $i from 1 through 12 {
.col-#{$i} {
grid-column: span 4;
}
@for $i from 1 through 4 {
.m_col-#{$i} {
grid-column: span #{$i};
}
}
@for $i from 1 through 12 {
.t_col-#{$i} {
grid-column: span #{math.round($i)};
}
}
}
.bleed-left, .t_bleed-left, .m_bleed-left{
margin-left:-torem(20)rem;
padding-left:0;
}
.bleed-right, .t_bleed-right, .m_bleed-right{
margin-right:-torem(20)rem;
padding-right:0;
}
@for $i from 1 through 12{
.sub-grid-#{i}{
display: grid;
gap: fluid(20, 24, $mobile, $tablet);
grid-auto-rows: auto;
grid-template-columns: repeat(4, 1fr);
grid-column: span 4;
}
}
}
//tablet
@media (min-width:#{$tablet}px){
section, footer, nav{
width:100%;
padding-left: torem(24)+rem;
padding-right: torem(24)+rem;
display: grid;
gap: fluid(24, 32, $tablet, $desktop-lower);
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: auto;
}
@for $i from 1 through 12 {
.col-#{$i} {
grid-column: span 8;
}
}
@for $i from 1 through 12 {
.t_col-#{$i} {
grid-column: span #{$i};
}
}
.bleed-left, .t_bleed-left{
margin-left:-torem(24)rem;
padding-left:0;
}
.bleed-right, .t_bleed-right{
margin-right:-torem(24)rem;
padding-right:0;
}
}
//desktop
@media (min-width:#{($desktop-lower + 1)}px){
section, footer, nav{
width:100%;
padding-left:fluid(32, 48, 1080, 1920);
padding-right:fluid(32, 48, 1080, 1920);
display: grid;
gap: fluid(32, 48, $desktop-lower, $desktop-upper);
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: auto;
}
@for $i from 1 through 12 {
.col-#{$i} {
grid-column: span #{$i};
}
}
.bleed-left{
margin-left:-fluid(32, 48, 1080, 1920);
padding-left:0;
}
.bleed-right{
margin-right:-fluid(32, 48, 1080, 1920);
padding-right:0;
}
}
@for $i from 1 through 12{
.sub-grid-#{$i}{
display: grid;
gap: 3rem;
width:100%;
@media (max-widht:#{$mobile}px){
gap:0;
}
grid-auto-rows: auto;
grid-template-columns: repeat(#{$i}, 1fr);
}
}
nav{
.col-6:last-child{
justify-self: end;
}
}
.grid-center{
align-items: center;
}
.t-hidden{
@media(max-width:#{$desktop-lower}px){
display:none;
}
}
.m-hidden{
@media(max-width:#{$tablet}px){
display:none;
}
}
@mixin write-spacing($metric, $val-1, $val-2, $val-3, $val-4){
$top: true;
$direction: top;
@for $i from 1 through 2{
@if $top{
$direction: top
} @else{
$direction: bottom;
}
.#{$metric}-#{$direction} {
@media screen and (min-width: #{$mobile}px) {
padding-#{$direction}: #{fluid($val-4, $val-3, $mobile, $tablet)};
}
@media screen and (min-width: #{$tablet}px) {
padding-#{$direction}: #{fluid($val-3, $val-2, $tablet, $desktop-lower)};
}
@media screen and (min-width: #{$desktop-lower}px) {
padding-#{$direction}: #{fluid($val-2, $val-1, $desktop-lower, $desktop-upper)};
}
$top: false;
}
}
.spacer-#{$metric}{
height: #{fluid($val-4, $val-3, $desktop-lower, $desktop-upper)};
position: relative;
display: block;
}
}
@include write-spacing(macro-1, 144, 120, 104, 64);
@include write-spacing(macro-2, 120, 104, 88, 56);
@include write-spacing(macro-3, 96, 80, 31, 32);
@include write-spacing(macro-4, 120, 96, 64, 32);
@include write-spacing(macro-5, 96, 72, 56, 24);
@include write-spacing(macro-6, 64, 56, 48, 24);
@include write-spacing(micro-1, 32, 28, 24, 20);
@include write-spacing(micro-2, 28, 24, 20, 16);
@function torem($px){
@return calc($px / 16);
}
// a clamping function used for fluid values
@function fluid($fmin, $fmax, $vmin, $vmax){
$fminr: torem($fmin);
$fmaxr: torem($fmax);
$vminr: torem($vmin);
$vmaxr: torem($vmax);
$v: calc(100 * ($fmaxr - $fminr) / ($vmaxr - $vminr));
$r: calc( (($vminr * $fmaxr) - ($vmaxr * $fminr)) / ($vminr - $vmaxr) );
@return clamp(#{$fminr}rem, #{$v}vw + #{$r}rem, #{$fmaxr}rem);
}
$desk-max: 2600;
$desktop-upper: 1920;
$desktop-lower: 1080;
$tablet: 600;
$mobile: 300;
*{
font-family: Instrument Sans, helvetica, sans-serif;
font-smooth: always;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
@for $i from 1 through 6{
.h#{$i}-serif{
font-family:ppeiko, times, serif;
font-weight:300;
font-style:italic;
}
}
.h1{
font-size: fluid( 64, 80, $desktop-lower, $desktop-upper) !important;
font-weight: 400;
margin:0;
line-height: 0.95;
text-wrap:balance;
@media (max-width:#{$tablet}px){
font-size: fluid( 40, 56, $mobile, $tablet) !important;
line-height: 1;
}
@media (max-width:#{$desktop-lower}px){
font-size: fluid( 56, 64, $tablet, $desktop-lower) !important;
}
}
.h2{
font-size: fluid( 48, 64, $desktop-lower, $desktop-upper);
margin:0;
font-weight:400;
line-height:1;
text-wrap: balance;
@media (max-width:#{$desktop-lower}px){
font-size: fluid( 40, 48, $tablet, $desktop-lower) !important;
}
@media (max-width:#{$tablet}px){
font-size: fluid( 32, 40, $mobile, $tablet) !important;
}
}
.h3{
font-size: fluid( 32, 56, $desktop-lower, 1920) !important;
font-weight: 400;
margin:0;
}
.h4{
font-size: fluid( 24, 32, $desktop-lower, 1920) !important;
font-weight: 500;
margin:0;
line-height:1.25;
@media (max-width:#{$desktop-lower}px){
font-size: fluid( 24, 32, $tablet, $desktop-lower) !important;
@media (max-width:#{$tablet}px){
font-size: #{torem(20)}rem;
}
}
}
.h5{
}
.h6{
font-size: fluid( 16, 16, $desktop-lower, $desktop-upper) !important;
font-weight: 400;
margin:0;
text-transform:uppercase;
letter-spacing:.8px;
}
.p1{
font-size: fluid( 16, 20, $desktop-lower, $desktop-upper);
margin:0;
line-height:1.5;
@media (max-width:#{$desktop-lower}px){
font-size: #{torem(16)}rem;
}
@media (max-width:#{$tablet}px){
font-size: #{torem(16)}rem;
}
}
.p-indent{
text-indent: #{torem(28)}rem;
position:relative;
&:before{
content:url(https://cdn.prod.website-files.com/6780a187f1bff60a0924e333/67a2c3954a41f9ede01972f1_shimmer-dark.svg);
position:absolute;
width:#{torem(9)};
height:#{torem(9)};
left:-#{torem(28)}rem;
top:#{torem(-1)}rem;
}
}
.nav-link{
font-size: fluid(16, 18, $desktop-lower, $desktop-upper);
margin:0;
line-height:1;
@media (max-width:#{$desktop-lower}px){
font-size: #{torem(16)}rem;
}
@media (max-width:#{$tablet}px){
font-size: #{torem(14)}rem;
}
}
.quote{
font-size: fluid( 40, 64, $desktop-lower, $desktop-upper);
margin:0;
line-height:1.25;
@media (max-width:#{$desktop-lower}px){
font-size: fluid( 36, 40, $tablet, $desktop-lower);
}
@media (max-width:#{$tablet}px){
font-size: fluid( 32, 36, $mobile, $tablet);
}
}
.quote-serif{
font-family:ppeiko;
}
.button{
font-size: fluid(18, 20, $desktop-lower, $desktop-upper);
@media (max-width:#{$desktop-lower}px){
font-size: fluid( 16, 18, $tablet, $desktop-lower);
}
@media (max-width:#{$tablet}px){
font-size: 1rem;
}
} .rounded{
border-radius:12px;
}
.flex-between-vertical{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.product-card{
.product-card_content{
display:flex;
flex-direction:column;
gap:1rem;
}
@media (max-width:1080px){
flex-direction:row;
.product-card-image, .product-card-content{
width:50%;
}
}
@media (max-width:600px){
flex-direction:column;
.product-card-image, .product-card-content{
width:100%;
}
}
}
.t-hidden{
@media (max-width:1080px){
display:none;
}
}
.w-button{
font-family:inherit;
padding:0;
pointer-events:auto;
}
.button, .button-outline, .button-reverse, .button-wrapper{
transition: padding 200ms cubic-bezier(0.4,0,0,1);
will-change: padding;
position:relative;
display:inline-flex;
overflow:hidden;
&::before{
content:url(https://cdn.prod.website-files.com/6780a187f1bff60a0924e333/67a5772c9f17da7b912ad39c_btn-arrow.svg);
position:absolute;
left:-14px;
top: 6.5px;
transition: transform 200ms cubic-bezier(0.4,0,0,1);
}
&:hover{
padding-left:32px;
padding-right:12px;
&:before{
transform: translateX(24px);
}
}
}
input[type=submit]{
transition: padding 200ms cubic-bezier(0.4,0,0,1);
}
.button-wrapper {
pointer-events: none;
border-radius:8px;
overflow:hidden;
&:before{
top:7.5px;
}
&:hover{
background-color:var(--_colors---black);
input{
padding-left:32px;
padding-right:12px;
}
padding:0;
}
}
.submit-button{
padding:8px 22px;
}
.button-outline, .button-reverse{
&::before{
content:url(https://cdn.prod.website-files.com/6780a187f1bff60a0924e333/6792feeda5be3c6114392385_arrow-right.svg)
}
}
.balance-wrap{
text-wrap:balance;
}
.sub-hero{
.h2, .quote{
text-wrap: balance;
}
}
textarea{
border: 1px solid #d9d9d9;
border-radius:8px;
}
input{
font-family: Instrument Sans, sans-serif;
border: 1px solid #d9d9d9;
border-radius:8px;
}
.Success-Message{
text-align:left;
}
.Error-Message{
text-align: left;
}
.w-form-done{
text-align:left;
} test{}; Contact us Reach out to chatWhether you want to begin a conversation for a new project, have questions, want to nerd out about windows or just say hi, drop us a message here and we’ll respond shortly!
.home-intro{
@media (max-width:1080px){
p{
max-width:720px;
}
}
}