.visual-accordion{
height:100vh;
min-height:800px;
@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;
}
}
}
@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;
}
}
test{}; About From concept to reality, we are setting a new course for the Fenestration industry in America. One that is marked with performance, durability and beauty. Importing innovative window and door solutions from Europe and being delivered straight to your home.
@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;
}
.slider-window{
align-items:left;
width:2000vw;
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{
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;
}
We Offer High performance products
Never sacrificing quality, we aim to bring comfort, effiencency and resilience to your project. We truly believe that each person and each home is unique deserving the greatest attention to detail.
Superior living through superior products World Class Windows
Trim and simplify. Save the tech jargon for the product page. Europe has been producing world class windows for decades upon decades and for some reason, Americans haven’t caught on… yet. The classic European “tilt-turn” window consists of components that create an incredibly efficient product. They standardly have 2-3 gaskets, triple-pane glass, multi-point locking hardware and many more features. The air tightness, thermal performance and overall quality of these windows are why you should highly consider them for your next project. Not only will they outperform anything you compare it to domestically, you will also pay the same amount for them, sometimes less. The same quality and performance can be found in any of the products we source for you.
Proudly based in the North West , serving nationwide.
Never sacrificing quality, we aim to bring comfort, effiencency and resilience to your project. We truly believe that each person and each home is unique deserving the greatest attention to detail.
The founder
Peter Dupenthaller (aka the Fenestration Guy) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
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%;
}
}
}
