@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;
width:100%;
gap: fluid(20, 24, $mobile, $tablet);
grid-auto-rows: auto;
grid-template-columns: repeat(#{$i}, 1fr);
}
}
}
//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(12, 1fr);
grid-auto-rows: auto;
}
@for $i from 1 through 12 {
.col-#{$i} {
grid-column: span 12;
}
}
@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%;
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{
margin:0;
}
.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, times, serif;
font-style:italic;
}
.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;
}
}
.h5-list{
.p1 + .h5{
margin-top:8px;
}
} .rounded{
border-radius:12px;
}
.flex-between-vertical{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.product-card-horizontal{
display:flex;
gap: 2rem;
.product-card-image, .image-grid{
aspect-ratio: 4/2;
object-fit:cover;
width: 50%;
}
.product-card_content{
display:flex;
flex-direction:column;
gap:1rem;
width:50%;
}
@media (max-width: 600px){
flex-direction:column;
gap:1rem;
.product-card_content{
width:100%;
}
.product-card-image, .image-grid{
width: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;
}
}
@use 'sass:math';
@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);
}
.slider{
position:relative;
overflow:hidden;
}
.slider-window{
align-items:left;
width:20000px;
will-change:transform;
transition:transform 2000ms cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-img-wrap{
will-change:right;
display:flex;
justify-items:stretch;
width:120%;
height:100%;
position:absolute;
top:0;
bottom:0;
right:-10%;
transition: all 2000ms cubic-bezier(0.4, 0, 0.2, 1);
img{
width:100%;
}
}
.slider-previous{
.slider-img-wrap{
right:-20%;
}
}
.slider-next{
.slider-img-wrap{
right:0%;
}
}
.image-window{
min-width: calc(100vw - var(--scrollbar-width) - (fluid(32, 48, 1080, 1920)*2));
position:relative;
height: 75svh;
min-height:300px;
left:calc(fluid(32, 48, 1080, 1920));
img{
object-fit:cover;
max-width:none;
height:100%;
}
}
.slider-window{
gap: fluid(16, 24, 1080, 1920);
}
.slider-controls{
left: calc(12px + fluid(32, 48, 1080, 1920));
bottom: 12px;
}
.visual-accordion{
height:100vh;
min-height:1000px;
@media (min-aspect-ratio: 16/7) and (min-width:1800px){
min-height:900px !important;
}
img{
border-radius:12px;
@media (max-width:1080px){
width:100%;
aspect-ratio:4 / 3;
object-fit:cover;
margin-bottom:1rem;
}
}
}
.accordion-left-image-wrap{
img{
position:absolute;
will-change:transform;
width:100%;
height:100%;
object-fit:cover;
transform:scale(120%);
opacity:0;
transition:transform 600ms cubic-bezier(.4,0,0,1), opacity 600ms cubic-bezier(.4,0,0,1);
}
.top{
transform:scale(100%);
opacity:1;
}
}
.accordion-header{
padding-top:12px;
padding-bottom:12px;
transition: opacity 200ms cubic-bezier(0.4,0,0,1);
cursor: pointer;
&:hover{
opacity:.75;
}
}
.accordion-content{
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 350 cubic-bezier(0.4,0,0,1);
.accordion-content_inner{
overflow: hidden;
}
}
.open .accordion-content{
grid-template-rows: 1fr;
}
.accordion{
gap:1rem;
.cross-bar, .vertical-bar{
transition:transform 350ms cubic-bezier(0.2, 0, 0, 1);
}
.accordion-content{
overflow-anchor: none;
//height:220px;
transition: all 350ms cubic-bezier(.4, 0 ,0, 1);
will-change: height;
overflow:hidden;
}
.closed .accordion-content{
//height:0;
}
.open {
.cross-bar{
transform: rotateZ(90deg);
}
.vertical-bar{
transform: rotateZ(180deg)
}
.accordion-content{
padding-top:12px;
}
}
}
.visual-accordion{
@media (max-width:1080px){
height:auto;
min-height:auto;
}
}
.visual-accordion_right{
@media (max-width:1080px){
display:none;
}
}
.visual-accordion_left{
position:relative;
.accordion{
will-change:height;
overflow-anchor: none;
position:absolute;
bottom:0;
top:0;
max-height:100%;
justify-content:end;
@media (max-width:1080px){
position:relative;
margin-top:32px;
}
}
}
.editor{
.visual-accordion{
height:auto;
}
.visual-accordion_left{
height:auto !important;
min-height:auto !important;
.accordion{
position:relative !important;
}
}
}
@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;
nav{
position:relative;
z-index:100;
&:before{
content:url(https://cdn.prod.website-files.com/6780a187f1bff60a0924e333/67d45bda781b0026f9652eeb_empty.png);
position:absolute;
width:0vw;
bottom:0px;
right:1px;
height:1px;
background: #d0d0d0;
transition:width 300ms cubic-bezier(.4,0,0,1);
}
}
nav.shadow{
&:before{
width:100vw;
}
}
nav .button-outline{
@media (max-width: #{$tablet}px){
font-size: 1rem;
}
}
.nav-list{
display:flex;
gap: 2rem;
@media (max-width:#{$tablet}px){
flex-direction: row-reverse;
gap:8px;
}
}
.burger{
display:none;
@media (max-width:#{$tablet}px){
display:flex;
}
top: 0;
position: relative;
align-items: center;
justify-content: center;
z-index: 100;
border: 1px solid #000;
width: 32px;
height: 32px;
border-radius: 8px;
}
#top, #center, #bottom{
transition: transform 300ms cubic-bezier(0.4,0,0,1);
}
.burger.open{
#top{
transform: rotateZ(45deg) translate(3px, 0px);
}
#center{
transform: scale(0);
}
#bottom{
transform: rotateZ(-45deg) translate(-5px, -2px);
}
}
.burger.open ~ .nav-links_clip{
width:60vw;
height:100vh;
.nav-links_wrap{
border-left:1px solid #d0d0d0;
}
}
.hamb{
@media (max-width:#{$tablet}px){
display:flex;
}
}
.nav-links_clip{
@media (max-width:#{$tablet}px){
position:fixed;
height:100vh;
width:0vw;
right:0px;
top:66px;
overflow:hidden;
transition:width 300ms cubic-bezier(0.4,0,0,1);
}
}
.nav-links_wrap{
display:flex;
gap: fluid(24, 32, $desktop-lower, $desktop-upper);
background: #fff;
transition: transform 300ms cubic-bezier(0.4,0,0,1);
@media (max-width: #{$tablet}px){
flex-direction: column;
position: absolute;
width:60vw;
top:0;
padding:32px;
right:0;
background: #fff;
height:100vh;
z-index:1000;
gap: fluid(32, 48, $tablet, $mobile);
.nav-link{
font-size: fluid(24, 32, $tablet, $mobile);
}
}
}
Windows that make your home, home .
Whether you’re beginning a new build or reimagining an existing house, we empower your home to be the place you’ve dreamed it to be. Importing top of the line, luxury windows and doors from Europe, we help fulfill your vision for a house that is beautiful, comfortable, resilient and entirely yours.
Get a quote
.home-intro{
@media (max-width:1080px){
p{
max-width:720px;
}
}
}
we offer High performance products
Every order is made specifically for your project and is tailored to fit your design, aesthetic and performance goals. The options for our windows is vast allowing us to dial in your unique set of needs and requirements to get the perfect product.
Caring for our clients is our top priority. This starts with asking the right questions up front to understand you better and to gain a holistic view of the project. It ends by always having a direct line of communication so that we are only a phone call away for expert advice or assistance.
Experience the ultimate comfort in your home with choosing European triple pane windows. These are also equipped with triple gaskets and multiple locking points to create an airtight seal that eliminates all drafts.
From reinforced upvc, to durable aluminum and sustainable wood, we utilize the finest materials that create long lasting, beautiful windows and doors.
“Extol was excellent to work with. Their detail oriented approach kept me at ease throughout the process. The doors and windows are incredibly well built, efficient, and reasonably priced. If you are on the fence about your windows, give Extol a call.”
— Lars Beal, Home Owner
Our Process Completely tailored for your home.
We work with you to identify the best possible solution for your vision based on your design, performance and aesthetic goals. Then, we help bring it to life, interfacing with architects and builders ensuring a holistic approach to your fenestration.
Get a quote
.card-light{
padding-left:20px;
}
Our Products High performance products Windows A robust systems of windows creates a home as unique as you are. The windows come in almost any arrangement and feature high-grade materials and some of the strongest thermal insulation on the market.
Curtain Walls Invite natural light into your home. Curtain walls encourage light to flow freely, breathing life to your living spaces and opening up stunning views. Tailored to your vision, these walls are designed with high-performance materials, seamlessly blending expansive glass panes with sturdy frames, offering superior energy efficiency, durability, and insulation.
Doors Open your house to the outside world with any door style or function you wish. Whether the door swings, slides, pivots, folds, or stacks, our products are sure to exceed your expectations - both in their performance and beauty.
Request a quote We work with you to identify the best possible solution for your vision based on your design, performance and aesthetic goals. Then, we help bring it to life, interfacing with architects and builders ensuring a holistic approach to your fenestration.
Get a quote
.card-heavy{
@media (max-width: 1080px){
height: auto !important;
gap:0;
.col-6:first-child{
aspect-ratio: 3 / 2;
gap:0;
margin-bottom:24px;
}
.card-light_content_bottom{
margin-top:16px;
width:100%;
}
}
}
FAQs
We are based in Bellingham, WA and proudly supply windows and doors to anywhere in the continental U.S.
We work with you, your architect and builder from schematic design phase through the course of the entire project ensuring windows and doors are delivered & installed on time. The timeline of the engagement is based on the project itself but typically ranges from six months to a year.
Contractor, builder, or whomever is in charge of the job assumes responsibility to gather the man power, and heavy machinery (as needed) to unload the product from the container at the jobsite.
We handle all the logistics of importing, shipping and delivery of your fenestration. Once products are at your job site it is the builder's responsibility to install them, but we provide all necessary documents to execute a perfect installation.
