.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;
}
}
}
@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;
}
}
@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);
}
}
}
Services Design. Educate. Deliver.
End to end fenestration solutions
Never sacrificing quality, we aim to bring comfort, efficiency and resilience to your project. We truly believe that each person and each home is unique deserving the greatest attention to detail. With this in mind, Extol goes the extra mile in ensuring every design option has been considered, every performance metric is met, and that the client's expectations are exceeded.
Serving any Category However large or small your project is we’re here to help Residential 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.
Commercial Elevate your commercial property by incorporating efficient aluminum profiles that not only look beautiful, but also perform wonderfully and keep your space feeling comfortable year round.
Multi-Family Create a safe, comfortable, and efficient environment on a mass scale by incorporating high performance tilt turn windows into a multi-family housing project. Not only are they sleek, they lower energy bills thanks to their thermal properties. Additionally, one is able to reduce the HVAC load and solar PV array needs as an outcome, making all shareholders pleased.
Capabilities Start to finish fenestration
Windows matter. Not just because you need some ventilation and daylight, but because they dramatically affect the overall homes aesthetic and performance. You need an expert to walk you through the options and to get all the details correct. At Extol, we are your fenestration nerds that happen to not only sell the best windows in the world, but who actually care about you and the projects end result. Reach out today to start the conversation.
Explore Products
From the early schematic design phase, we are happy to bounce ideas with the architect, builder or homeowner to ensure the windows and doors are incorporated perfectly into the overall building envelope.
Through constant dialogue with our manufacture’s and fabricators, we maintain clarity on the product details, options and quality of the windows being produced.
Windows are so integral to a buildings design that communicating with the architect from an early design stage is paramount. We assist in window sizing recommendations, share CAD files for easy inputting into the architectural software, and help dial in the conditions around window openings, especially doors where one may want a minimal to zero threshold.
From initial design through installation, we collaborate with the entire project team to ensure seamless transitions and flawless execution of the products. Whether we are installing or only supplying the product, our team of experts are there for you every step of the way.
In WA state, we offer turnkey installation services for all products we sell. This service can also include waterproofing the rough openings, connecting the window flashing to water resistant barrier and air-sealing openings. For out of state projects, we work with install contractors around the US who can complete the installation of our products. At the very least, installation instructions and training can be performed.
We ensure every installation is executed with precision and care. It takes great patience and exactitude to install European windows & doors. Our goal is to produce work that inspires others. With a 5-year standard warranty on all installed products, Extol promises to always take care of the product we supply and install. This extends well beyond the five years.
Our high-performance windows not only elevate your home’s design, they also bring lasting comfort and peace of mind. Thanks to their incredible efficiency, drafts and temperature fluctuations are mitigated. Use up to every square feet in your home without worrying about feeling cold near the windows.
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%;
}
}
}
.avif)
.JPG)
