.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);
}
}
}
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;
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;
}
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
European windows are highly regarded for their excellent design, energy efficiency, and durability. They feature advanced technologies such as triple glazing, multi-locking systems, and superior insulation, which help keep homes comfortable year-round. Additionally, European windows are designed with sleek, modern aesthetics, offering both functionality and style. The use of high-quality materials, like aluminum, wood and UPVC, also ensures longevity and low maintenance, making them a great choice for both residential and commercial projects.
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 Duppenthaler (AKA Fenestration Guy) is passionate about people and better buildings. Windows are the avenue in which he integrates those passions together by offering the most efficient, durable and sleek windows in the world to residences and commercial buildings. With well over a decade of experience, his expertise, technical mind, and product knowledge allow for a smooth process for choosing the perfect windows. Connect today to start the fenestration journey!
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)
