/* =========================================================

        AWO HEAT™
        UNDERGROUND STREETWEAR EXPERIENCE

        CSS PART 1/5

        FOUNDATION SYSTEM

        BLACK / NIGHT / ARCHIVE / MOVEMENT

========================================================= */







/* =========================================================
   GOOGLE FONTS
========================================================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=Archivo+Black&display=swap');









/* =========================================================
   ROOT DESIGN SYSTEM
========================================================= */


:root{


/* ---------------- COLORS ---------------- */


--awo-black:
#050505;


--awo-dark:
#080808;


--awo-surface:
#101010;


--awo-grey:
#777777;


--awo-light-grey:
#b5b5b5;


--awo-white:
#ffffff;


--awo-silver:
#d4d4d4;


--awo-red:
#850000;


--awo-line:
rgba(255,255,255,0.12);


--awo-glass:
rgba(255,255,255,0.05);





/* ---------------- TYPOGRAPHY ---------------- */


--font-main:
"Inter",
Arial,
sans-serif;



--font-street:
"Space Grotesk",
Arial,
sans-serif;



--font-heavy:
"Archivo Black",
Arial,
sans-serif;






/* ---------------- MOTION ---------------- */


--fast:
.3s cubic-bezier(.4,0,.2,1);



--smooth:
.8s cubic-bezier(.16,1,.3,1);



--slow:
1.5s cubic-bezier(.16,1,.3,1);



}









/* =========================================================
   RESET SYSTEM
========================================================= */


*,
*::before,
*::after{


margin:0;

padding:0;

box-sizing:border-box;


}







html{


scroll-behavior:smooth;


background:

var(--awo-black);



}







body{


background:

var(--awo-black);



color:

var(--awo-white);



font-family:

var(--font-main);



overflow-x:hidden;



-webkit-font-smoothing:

antialiased;



}









/* =========================================================
   GLOBAL ELEMENTS
========================================================= */


img{


max-width:100%;


display:block;


object-fit:cover;



}






a{


text-decoration:none;


color:white;



}







button{


font-family:inherit;


cursor:pointer;


color:white;


background:none;


border:none;



}








input{


font-family:inherit;



}







::selection{


background:white;


color:black;



}









/* =========================================================
   SCROLL BAR
========================================================= */


::-webkit-scrollbar{


width:7px;



}







::-webkit-scrollbar-track{


background:

#050505;



}








::-webkit-scrollbar-thumb{


background:

#ffffff;



}







::-webkit-scrollbar-thumb:hover{


background:

#000000;



}









/* =========================================================
   WEBSITE WRAPPER
========================================================= */


.website{


position:relative;


width:100%;


overflow:hidden;



}







.container{


width:

min(1300px,90%);



margin:auto;



}







section{


position:relative;


width:100%;



}









/* =========================================================
   BACKGROUND ATMOSPHERE
========================================================= */


body::before{


content:"";


position:fixed;


inset:0;



background:


radial-gradient(

circle at top,

rgba(255,255,255,.06),

transparent 30%

),


linear-gradient(

180deg,

#090909,

#050505

);



z-index:-3;



}









body::after{


content:"";


position:fixed;


inset:0;



background:


linear-gradient(

90deg,

transparent,

rgba(168, 166, 166, 0.02),

transparent

);



animation:

lightMove 8s infinite linear;



pointer-events:none;


z-index:999;



}







@keyframes lightMove{


0%{


transform:translateX(-100%);



}


100%{


transform:translateX(100%);



}



}









/* =========================================================
   GRAIN / FILM EFFECT
========================================================= */


.noise-layer{


position:fixed;


inset:0;



background-image:

url("assets/images/noise.png");



opacity:.08;



pointer-events:none;



z-index:9999;



animation:

noiseAnimation .25s infinite;



}







@keyframes noiseAnimation{


0%{


transform:translate(0,0);



}



20%{


transform:translate(-2%,2%);



}



40%{


transform:translate(3%,-1%);



}



60%{


transform:translate(-1%,3%);



}



80%{


transform:translate(2%,-2%);



}



100%{


transform:translate(0,0);



}



}









/* =========================================================
   SCANLINE EFFECT
========================================================= */


.scanlines{


position:fixed;


inset:0;



pointer-events:none;



background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.025)

0px,

rgba(255,255,255,.025)

1px,

transparent

1px,

transparent

4px

);



opacity:.15;



z-index:9998;



}









/* =========================================================
   TYPOGRAPHY SYSTEM
========================================================= */



.hero-title{


font-family:

var(--font-heavy);



font-size:

clamp(90px,18vw,260px);



line-height:.8;



letter-spacing:

-0.09em;



text-transform:

uppercase;



}





.section-title{


font-family:

var(--font-street);



font-weight:700;



font-size:

clamp(50px,9vw,130px);



line-height:.9;



letter-spacing:

-0.07em;



text-transform:

uppercase;



}







.street-heading{


font-family:

var(--font-street);



font-size:

clamp(35px,5vw,70px);



font-weight:600;



letter-spacing:

-0.04em;



text-transform:

uppercase;



}








.label{


font-size:

10px;



letter-spacing:

8px;



text-transform:

uppercase;



color:

var(--awo-black);



}







.archive-text{


font-family:

var(--font-heavy);



font-size:

200px;



letter-spacing:

-10px;



opacity:

.04;



position:absolute;



pointer-events:none;



}









/* =========================================================
   AWO BRAND STAMPS
========================================================= */


.awo-stamp{


font-size:

9px;



letter-spacing:

5px;



text-transform:

uppercase;



color:

var(--awo-light-grey);



border:

1px solid var(--awo-line);



padding:

12px 18px;



display:inline-block;



}








.awo-stamp.red{


border-color:

var(--awo-red);



color:

#ffaaaa;



}









/* =========================================================
   DIVIDERS
========================================================= */


.line{


width:100%;


height:1px;



background:

var(--awo-line);



}









/* =========================================================
   BUTTON SYSTEM
========================================================= */


.awo-button{


position:relative;


display:inline-flex;



align-items:center;


justify-content:center;



padding:

18px 45px;



border:

1px solid rgba(255,255,255,.4);



font-size:

10px;



letter-spacing:

6px;



text-transform:

uppercase;



overflow:hidden;



transition:

var(--smooth);



z-index:1;



}








.awo-button span{


position:relative;


z-index:2;



}








.awo-button::before{


content:"";


position:absolute;


inset:0;



background:white;



transform:

translateY(110%);



transition:

var(--smooth);



z-index:-1;



}








.awo-button:hover{


color:black;



}








.awo-button:hover::before{


transform:

translateY(0);



}









/* =========================================================
   IMAGE SYSTEM
========================================================= */


.image-wrap{


overflow:hidden;


position:relative;



}








.image-wrap img{


transition:

transform 1.4s cubic-bezier(.16,1,.3,1);



}








.image-wrap:hover img{


transform:

scale(1.08);



}









/* =========================================================
   REVEAL SYSTEM
========================================================= */


.reveal{


opacity:0;


transform:

translateY(60px);



transition:

1s cubic-bezier(.16,1,.3,1);



}








.reveal.active{


opacity:1;


transform:

translateY(0);



}









/* =========================================================
   MOBILE FOUNDATION
========================================================= */


@media(max-width:900px){


.hero-title{


font-size:

90px;



}



.section-title{


font-size:

55px;



}



.container{


width:

90%;



}



}








@media(max-width:600px){



.hero-title{


font-size:

60px;



}



.label{


letter-spacing:

5px;



}



}
/* =========================================================

        AWO HEAT™

        CSS PART 2/5

        NIGHT HERO + NAVBAR SYSTEM

        UNDERGROUND DROP EXPERIENCE

========================================================= */







/* =========================================================
   NAVBAR BASE
========================================================= */


.navbar{


position:fixed;


top:0;


left:0;


width:100%;



height:100px;



padding:

0 55px;



display:flex;



align-items:center;



justify-content:space-between;



z-index:500;



transition:

.6s cubic-bezier(.16,1,.3,1);



}








.navbar.scrolled{


height:75px;



background:

rgba(5,5,5,.65);



backdrop-filter:

blur(20px);



border-bottom:

1px solid var(--awo-line);



}









/* =========================================================
   NAV LOGO
========================================================= */


.brand-logo{


width:75px;



display:flex;



align-items:center;



}

.brand-logo{

    width:110px;

    display:flex;

    align-items:center;

}

.brand-logo img{

    width:100%;

    filter:
    brightness(1.2);

    transition:
    var(--smooth);

}

.brand-logo:hover img{

    transform:
    scale(1.05);

}


.loader{

    position:fixed;

    width:100%;

    height:100vh;

    background:#000;

    top:0;

    left:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

    animation:
    loaderFade 1s ease 3s forwards;

}



.loader-content{

    display:flex;

    flex-direction:column;

    align-items:center;

}



.loader-logo{

    width:180px;

    margin-bottom:60px;

    animation:
    logoFade 1.5s ease;

}



.loader-logo img{

    width:100%;

    filter:
    brightness(1.2);

}



.loader-line{

    width:220px;

    height:2px;

    background:rgba(255,255,255,.2);

    overflow:hidden;

}



.loader-line span{

    display:block;

    height:100%;

    width:0%;

    background:white;

    animation:
    loading 3s ease forwards;

}



.loader p{

    margin-top:20px;

    color:white;

    font-size:10px;

    letter-spacing:5px;

    opacity:.7;

}



@keyframes loading{

    from{

        width:0%;

    }

    to{

        width:100%;

    }

}



@keyframes logoFade{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes loaderFade{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        visibility:hidden;

    }

}





/* =========================================================
   NAV LINKS
========================================================= */


.navbar-links{


display:flex;


align-items:center;



gap:45px;



}








.navbar-links a{


font-size:

10px;



letter-spacing:

5px;



text-transform:

uppercase;



color:

rgba(255,255,255,.7);



position:relative;



transition:

var(--fast);



}








.navbar-links a::after{


content:"";


position:absolute;


bottom:-10px;


left:0;



height:1px;



width:0;



background:white;



transition:

.4s ease;



}








.navbar-links a:hover{


color:white;



}








.navbar-links a:hover::after{


width:100%;



}









/* =========================================================
   NAV RIGHT
========================================================= */


.navbar-right{


display:flex;


align-items:center;



gap:30px;



}








.navbar-right button{


font-size:

10px;



letter-spacing:

5px;



text-transform:

uppercase;



color:

rgba(255,255,255,.8);



}








.nav-bag span{


color:

var(--awo-grey);



}









/* =========================================================
   MOBILE MENU BUTTON
========================================================= */


.menu-toggle{


display:none;



width:35px;



}








.menu-toggle span{


display:block;


height:1px;



background:white;



margin:8px 0;



transition:

.4s;



}









.menu-toggle.active span:nth-child(1){


transform:

translateY(9px)

rotate(45deg);



}



.menu-toggle.active span:nth-child(2){


opacity:0;



}



.menu-toggle.active span:nth-child(3){


transform:

translateY(-9px)

rotate(-45deg);



}









/* =========================================================
   MOBILE NAVIGATION
========================================================= */


.mobile-navigation{


position:fixed;


inset:0;



background:

#050505;



z-index:450;



display:flex;


align-items:center;


justify-content:center;



opacity:0;



visibility:hidden;



transition:

.6s ease;



}








.mobile-navigation.active{


opacity:1;


visibility:visible;



}








.mobile-navigation-inner{


display:flex;


flex-direction:column;



gap:35px;



text-align:center;



}








.mobile-navigation-inner a{


font-family:

var(--font-street);



font-size:

45px;



font-weight:600;



letter-spacing:

-2px;



text-transform:

uppercase;



}









/* =========================================================
   HERO SECTION
========================================================= */


.hero{


height:

100vh;



min-height:

850px;



position:relative;



overflow:hidden;



display:flex;



align-items:center;



justify-content:center;



}









/* =========================================================
   HERO IMAGE
========================================================= */


.hero-media{


position:absolute;


inset:0;



z-index:1;



}








.hero-media img{


height:100%;


width:100%;



object-fit:cover;



filter:

brightness(.35)

contrast(1.15);



transform:

scale(1.08);



animation:

heroZoom 15s infinite alternate;



}








@keyframes heroZoom{


from{


transform:

scale(1.08);



}



to{


transform:

scale(1.18);



}



}









/* =========================================================
   HERO DARK LAYERS
========================================================= */


.hero::before{


content:"";


position:absolute;


inset:0;



background:

linear-gradient(

180deg,

rgba(0,0,0,.6),

transparent 40%,

#050505

);



z-index:2;



}








.hero-dark-overlay{


position:absolute;


inset:0;



background:

radial-gradient(

circle,

transparent,

rgba(0,0,0,.8)

);



z-index:2;



}









/* =========================================================
   HERO CONTENT
========================================================= */


.hero-content{


position:relative;



z-index:5;



display:flex;


flex-direction:column;



align-items:center;



text-align:center;



}








.hero-label{


font-size:

11px;



letter-spacing:

12px;



color:

var(--awo-light-grey);



margin-bottom:50px;



opacity:0;



animation:

heroFade 1s .4s forwards;



}








.hero-brand-logo{


width:

clamp(220px,35vw,600px);



opacity:0;



animation:

logoReveal 1.5s .8s forwards;



}








.hero-description{


margin-top:45px;



font-family:

var(--font-street);



font-size:

12px;



letter-spacing:

12px;



color:white;



opacity:0;



animation:

heroFade 1s 1.3s forwards;



}








.hero-button{


margin-top:60px;



opacity:0;



animation:

heroFade 1s 1.7s forwards;



}









/* =========================================================
   HERO ANIMATIONS
========================================================= */


@keyframes logoReveal{


from{


opacity:0;


transform:

translateY(50px)

scale(.9);



filter:

blur(15px);



}



to{


opacity:1;


transform:

translateY(0)

scale(1);



filter:

blur(0);



}



}








@keyframes heroFade{


from{


opacity:0;


transform:

translateY(30px);



}



to{


opacity:1;


transform:

translateY(0);



}



}









/* =========================================================
   GLITCH LOGO EFFECT
========================================================= */


.hero-brand-logo{


position:relative;



}



.hero-brand-logo:hover{


animation:

logoGlitch .3s;



}








@keyframes logoGlitch{


0%{


transform:

translate(0);



}



20%{


transform:

translate(-5px,2px);



}



40%{


transform:

translate(5px,-2px);



}



60%{


transform:

translate(-3px);



}



100%{


transform:

translate(0);



}



}









/* =========================================================
   CAMERA FLASH
========================================================= */


.hero-flash{


position:absolute;


inset:0;



background:white;



opacity:0;



z-index:20;



pointer-events:none;



}








.hero-flash.active{


animation:

cameraFlash .4s;



}
.brand-title{

    font-family: "Arial Black", sans-serif;

    font-size:80px;

    font-weight:900;

    letter-spacing:12px;

    text-transform:uppercase;

    color:#fff;

    line-height:1;

    text-align:center;

    text-shadow:
    0 0 25px rgba(255,255,255,.15);
    border-radius: 30px;

}







@keyframes cameraFlash{


0%{


opacity:0;



}


20%{


opacity:.9;



}


100%{


opacity:0;



}



}









/* =========================================================
   SCROLL INDICATOR
========================================================= */


.hero-scroll{


position:absolute;


bottom:50px;



left:50%;



transform:

translateX(-50%);



z-index:5;



display:flex;


flex-direction:column;



align-items:center;



gap:20px;



}








.hero-scroll span{


font-size:

9px;



letter-spacing:

8px;



color:

var(--awo-grey);



}








.scroll-line{


height:80px;


width:1px;



background:

linear-gradient(

white,

transparent

);



animation:

scrollMove 2s infinite;



}








@keyframes scrollMove{


0%{


transform:

scaleY(0);



transform-origin:top;



}



50%{


transform:

scaleY(1);



}



100%{


transform:

scaleY(0);



transform-origin:bottom;



}



}









/* =========================================================
   HERO MOBILE
========================================================= */


@media(max-width:900px){



.navbar{


padding:

0 25px;



}



.navbar-links{


display:none;



}



.menu-toggle{


display:block;



}



.hero{


min-height:

750px;



}



.hero-description{


letter-spacing:

7px;



}



}







@media(max-width:600px){



.navbar{


height:

80px;



}





}
/* =========================================================

        AWO HEAT™

        CSS PART 3/5

        THE DROP SYSTEM

        PRODUCT / COLLECTION EXPERIENCE

========================================================= */







/* =========================================================
   DROP SECTION
========================================================= */


.drop-section{


padding:

180px 5% 120px;



background:

#050505;



}









/* =========================================================
   DROP HEADER
========================================================= */


.drop-header{


max-width:

1100px;



margin-bottom:

100px;



}








.drop-number{


display:block;



font-size:

10px;



letter-spacing:

10px;



color:

var(--awo-grey);



margin-bottom:

40px;



text-transform:

uppercase;



}








.drop-header h2{


font-family:

var(--font-heavy);



font-size:

clamp(80px,15vw,220px);



line-height:

.8;



letter-spacing:

-10px;



text-transform:

uppercase;



}








.drop-description{


margin-top:

45px;



max-width:

500px;



font-size:

15px;



line-height:

2;



color:

#888;



}









/* =========================================================
   COLLECTION META BAR
========================================================= */


.collection-meta{


display:flex;



justify-content:space-between;



align-items:center;



border-top:

1px solid var(--awo-line);



border-bottom:

1px solid var(--awo-line);



padding:

25px 0;



margin-bottom:

90px;



}








.collection-meta span{


font-size:

10px;



letter-spacing:

6px;



color:

var(--awo-light-grey);



}









/* =========================================================
   PRODUCT GRID
========================================================= */


.product-grid{


display:grid;



grid-template-columns:

repeat(2,1fr);



gap:

90px 35px;



}









/* =========================================================
   PRODUCT CARD
========================================================= */


.product-card{


position:relative;



cursor:pointer;



}








.product-image{


position:relative;



overflow:hidden;



background:

#101010;



aspect-ratio:

.8;



}








.product-image img{


width:100%;


height:100%;



object-fit:cover;



transition:

1.2s cubic-bezier(.16,1,.3,1);



}








.product-image .hover-image{


position:absolute;


inset:0;



opacity:0;



}








.product-card:hover .product-image img{


transform:

scale(1.06);



}








.product-card:hover .hover-image{


opacity:1;



}









/* =========================================================
   PRODUCT LABELS
========================================================= */


.product-label{


position:absolute;


top:25px;


left:25px;



z-index:5;



}








.product-label span{


font-size:

9px;



letter-spacing:

5px;



padding:

12px 18px;



border:

1px solid rgba(255,255,255,.4);



background:

rgba(0,0,0,.5);



backdrop-filter:

blur(10px);



}








.product-label .sold{


border-color:

var(--awo-red);



color:

#ff7777;



}









/* =========================================================
   PRODUCT INFORMATION
========================================================= */


.product-info{


padding-top:

30px;



}








.product-category{


font-size:

9px;



letter-spacing:

8px;



color:

var(--awo-grey);



text-transform:

uppercase;



}








.product-name{


margin-top:

18px;



font-family:

var(--font-street);



font-size:

clamp(22px,3vw,38px);



font-weight:

600;



letter-spacing:

-1px;



text-transform:

uppercase;



}








.product-details{


display:flex;


justify-content:space-between;



align-items:center;



margin-top:

25px;



}








.product-price{


font-size:

14px;



letter-spacing:

3px;



}








.product-status{


font-size:

9px;



letter-spacing:

5px;



color:

#777;



}









/* =========================================================
   PRODUCT TAGS
========================================================= */


.product-tags{


display:flex;



gap:

10px;



margin-top:

30px;



flex-wrap:

wrap;



}








.product-tags span{


font-size:

8px;



letter-spacing:

4px;



border:

1px solid var(--awo-line);



padding:

10px 14px;



color:

#888;



}









/* =========================================================
   LIMITED DROP EFFECT
========================================================= */


.limited-piece{


position:relative;



overflow:hidden;



}








.limited-piece::after{


content:"LIMITED";



position:absolute;



right:

-20px;



bottom:

100px;



font-size:

120px;



font-family:

var(--font-heavy);



letter-spacing:

-8px;



opacity:

.03;



transform:

rotate(-90deg);



}









/* =========================================================
   FEATURED PRODUCT
========================================================= */


.feature-product{


display:grid;



grid-template-columns:

1.2fr .8fr;



gap:

80px;



padding:

180px 7%;



align-items:center;



}








.feature-image{


height:

850px;



overflow:hidden;



}








.feature-image img{


height:100%;



transition:

1.5s cubic-bezier(.16,1,.3,1);



}








.feature-image:hover img{


transform:

scale(1.05);



}








.feature-content span{


font-size:

10px;



letter-spacing:

10px;



color:

var(--awo-grey);



}








.feature-content h3{


font-family:

var(--font-heavy);



font-size:

clamp(45px,6vw,90px);



line-height:

.9;



letter-spacing:

-5px;



margin-top:

35px;



text-transform:

uppercase;



}








.feature-content p{


margin-top:

40px;



max-width:

450px;



line-height:

2;



color:

#888;



}









/* =========================================================
   PRODUCT ACTION
========================================================= */


.product-action{


margin-top:

50px;



}








.product-action a{


display:inline-flex;



padding:

18px 40px;



border:

1px solid rgba(255,255,255,.4);



font-size:

10px;



letter-spacing:

6px;



text-transform:

uppercase;



transition:

.4s;



}








.product-action a:hover{


background:white;



color:black;



}









/* =========================================================
   DROP BANNER
========================================================= */


.drop-banner{


height:

90vh;



position:relative;



overflow:hidden;



}








.drop-banner img{


height:100%;



filter:

brightness(.35);



transition:

2s;



}








.drop-banner:hover img{


transform:

scale(1.08);



}








.drop-banner::after{


content:"";



position:absolute;



inset:0;



background:

linear-gradient(

transparent,

#050505

);



}








.drop-banner-content{


position:absolute;



z-index:3;



inset:0;



display:flex;



align-items:center;



justify-content:center;



flex-direction:column;



}








.drop-banner-content span{


font-size:

10px;



letter-spacing:

12px;



}








.drop-banner-content h2{


font-family:

var(--font-heavy);



font-size:

clamp(100px,18vw,260px);



letter-spacing:

-12px;



line-height:

.8;



}









/* =========================================================
   PRODUCT MOBILE
========================================================= */


@media(max-width:900px){



.product-grid{


grid-template-columns:

1fr;



gap:

70px;



}




.collection-meta{


flex-direction:

column;



gap:

20px;



align-items:

flex-start;



}




.feature-product{


grid-template-columns:

1fr;



padding:

100px 5%;



}




.feature-image{


height:

600px;



}



}








@media(max-width:600px){



.drop-section{


padding:

100px 20px;



}



.drop-header h2{


letter-spacing:

-5px;



}



.product-name{


font-size:

25px;



}



.drop-banner-content h2{


letter-spacing:

-5px;



}



}
/* =========================================================

        AWO HEAT™

        CSS PART 4/5

        THE MOVEMENT

        BRAND WORLD / ARCHIVE / STORY

========================================================= */








/* =========================================================
   MANIFESTO SECTION
========================================================= */


.manifesto{


padding:

220px 7%;



display:flex;



justify-content:center;



align-items:center;



text-align:center;



overflow:hidden;



}








.manifesto-container{


max-width:

1200px;



position:relative;



}








.manifesto-small{


font-size:

10px;



letter-spacing:

12px;



color:

var(--awo-grey);



text-transform:

uppercase;



}








.manifesto h2{


font-family:

var(--font-heavy);



font-size:

clamp(70px,13vw,200px);



line-height:

.82;



letter-spacing:

-10px;



margin-top:

60px;



text-transform:

uppercase;



}








.manifesto p{


max-width:

650px;



margin:

70px auto 0;



font-size:

16px;



line-height:

2;



color:

#888;



}









/* =========================================================
   BACKGROUND ARCHIVE NUMBERS
========================================================= */


.archive-number{


position:absolute;



font-family:

var(--font-heavy);



font-size:

400px;



letter-spacing:

-20px;



color:

white;



opacity:

.025;



z-index:

-1;



}








.archive-number.one{


top:

-100px;



left:

-100px;



}








.archive-number.two{


bottom:

-100px;



right:

-100px;



}









/* =========================================================
   PHILOSOPHY SECTION
========================================================= */


.philosophy{


padding:

180px 7%;



display:grid;



grid-template-columns:

.8fr 1.2fr;



gap:

120px;



}








.philosophy-title{


position:

sticky;



top:

150px;



height:

fit-content;



}








.philosophy-title span{


font-size:

10px;



letter-spacing:

10px;



color:

var(--awo-grey);



}








.philosophy-title h2{


margin-top:

40px;



font-family:

var(--font-heavy);



font-size:

clamp(55px,8vw,120px);



line-height:

.85;



letter-spacing:

-8px;



}









/* =========================================================
   PHILOSOPHY ITEMS
========================================================= */


.philosophy-content{


display:flex;



flex-direction:column;



gap:

100px;



}








.philosophy-item{


padding-top:

35px;



border-top:

1px solid var(--awo-line);



}








.philosophy-number{


font-size:

10px;



letter-spacing:

8px;



color:

var(--awo-red);



}








.philosophy-item h3{


font-family:

var(--font-street);



font-size:

clamp(35px,5vw,70px);



letter-spacing:

-3px;



margin-top:

25px;



text-transform:

uppercase;



}








.philosophy-item p{


margin-top:

30px;



max-width:

450px;



font-size:

15px;



line-height:

2;



color:

#888;



}









/* =========================================================
   CITY SECTION
========================================================= */


.city-section{


height:

100vh;



position:

relative;



overflow:hidden;



display:flex;



align-items:center;



justify-content:center;



}








.city-section img{


position:absolute;



inset:0;



height:100%;



filter:

brightness(.25)

contrast(1.2);



}








.city-overlay{


position:absolute;



inset:0;



background:

linear-gradient(

90deg,

rgba(0,0,0,.8),

transparent,

rgba(0,0,0,.8)

);



}








.city-content{


position:relative;



z-index:2;



text-align:center;



}








.city-content span{


font-size:

10px;



letter-spacing:

15px;



color:

#aaa;



}








.city-content h2{


font-family:

var(--font-heavy);



font-size:

clamp(70px,15vw,230px);



letter-spacing:

-12px;



line-height:

.8;



margin-top:

40px;



}








.city-content p{


margin-top:

40px;



letter-spacing:

5px;



font-size:

10px;



}









/* =========================================================
   LOOKBOOK SYSTEM
========================================================= */


.lookbook{


padding:

200px 5%;



}








.lookbook-header{


display:flex;



justify-content:space-between;



align-items:end;



margin-bottom:

100px;



}








.lookbook-header span{


font-size:

10px;



letter-spacing:

10px;



color:

var(--awo-grey);



}








.lookbook-header h2{


font-family:

var(--font-heavy);



font-size:

clamp(70px,12vw,180px);



letter-spacing:

-10px;



line-height:

.8;



}









/* =========================================================
   LOOKBOOK GRID
========================================================= */


.lookbook-grid{


display:grid;



grid-template-columns:

repeat(12,1fr);



gap:

30px;



}








.lookbook-item{


overflow:hidden;



position:relative;



}








.lookbook-item img{


width:100%;



height:100%;



transition:

1.5s cubic-bezier(.16,1,.3,1);



}








.lookbook-item:hover img{


transform:

scale(1.08);



}








.lookbook-one{


grid-column:

1/7;



height:

850px;



}








.lookbook-two{


grid-column:

8/13;



height:

600px;



}








.lookbook-three{


grid-column:

3/11;



height:

900px;



}








.lookbook-four{


grid-column:

1/6;



height:

650px;



}








.lookbook-five{


grid-column:

7/13;



height:

750px;



}









/* =========================================================
   QUOTE SECTION
========================================================= */


.quote-section{


min-height:

80vh;



display:flex;



align-items:center;



justify-content:center;



padding:

120px 8%;



text-align:center;



}








.quote-text{


font-family:

var(--font-heavy);



font-size:

clamp(50px,9vw,140px);



line-height:

.85;



letter-spacing:

-8px;



text-transform:

uppercase;



}








.quote-author{


margin-top:

50px;



font-size:

10px;



letter-spacing:

10px;



color:

var(--awo-grey);



}









/* =========================================================
   ARCHIVE COLLECTIONS
========================================================= */


.archive{


padding:

160px 7%;



}








.archive-header{


display:flex;



justify-content:space-between;



align-items:end;



margin-bottom:

80px;



}








.archive-header h2{


font-family:

var(--font-heavy);



font-size:

clamp(60px,10vw,140px);



letter-spacing:

-8px;



}








.archive-grid{


display:grid;



grid-template-columns:

repeat(3,1fr);



gap:

25px;



}








.archive-card{


height:

600px;



position:

relative;



overflow:hidden;



}








.archive-card img{


height:

100%;



transition:

1.3s ease;



}








.archive-card:hover img{


transform:

scale(1.07);



}








.archive-overlay{


position:absolute;



inset:0;



display:flex;



align-items:end;



padding:

40px;



background:

linear-gradient(

transparent,

rgba(0,0,0,.8)

);



}








.archive-overlay h3{


font-family:

var(--font-street);



font-size:

25px;



letter-spacing:

3px;



}









/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:900px){



.philosophy{


grid-template-columns:

1fr;



gap:

60px;



}



.philosophy-title{


position:relative;



top:auto;



}



.lookbook-grid{


display:flex;



flex-direction:column;



}



.lookbook-item{


height:

650px;



}



.archive-grid{


grid-template-columns:

1fr;



}



}




@media(max-width:600px){



.manifesto h2{


letter-spacing:

-5px;



}



.city-content h2{


letter-spacing:

-6px;



}



.lookbook-header{


display:block;



}



}
/* =========================================================

        AWO HEAT™

        CSS PART 5/5

        STORE SYSTEM + FINAL POLISH

========================================================= */







/* =========================================================
   LOADING SCREEN
========================================================= */


.awo-loader{


position:fixed;


inset:0;



background:#050505;



z-index:99999;



display:flex;



align-items:center;



justify-content:center;



flex-direction:column;



transition:

1s cubic-bezier(.16,1,.3,1);



}








.awo-loader.hide{


opacity:0;


visibility:hidden;



}








.loader-logo{


font-family:

var(--font-heavy);



font-size:

clamp(80px,15vw,220px);



letter-spacing:

-10px;



animation:

loaderPulse 2s infinite;



}








.loader-text{


margin-top:40px;



font-size:

9px;



letter-spacing:

12px;



color:

var(--awo-grey);



}








@keyframes loaderPulse{


0%,100%{


opacity:.5;



}



50%{


opacity:1;



}



}









/* =========================================================
   SEARCH OVERLAY
========================================================= */


.search-overlay{


position:fixed;



inset:0;



background:

rgba(5,5,5,.95);



backdrop-filter:

blur(20px);



z-index:9000;



display:flex;



align-items:center;



justify-content:center;



opacity:0;



visibility:hidden;



transition:

.5s;



}








.search-overlay.active{


opacity:1;



visibility:visible;



}








.search-box{


width:

80%;



max-width:

900px;



}








.search-box input{


width:100%;



background:none;



border:none;



border-bottom:

1px solid white;



padding:

30px 0;



font-size:

clamp(40px,7vw,100px);



font-family:

var(--font-street);



color:white;



outline:none;



text-transform:

uppercase;



}








.search-close{


position:absolute;



top:50px;



right:60px;



font-size:

10px;



letter-spacing:

5px;



}









/* =========================================================
   SHOPPING BAG DRAWER
========================================================= */


.bag-drawer{


position:fixed;



top:0;



right:0;



height:100vh;



width:

450px;



background:

#090909;



z-index:8000;



transform:

translateX(100%);



transition:

.7s cubic-bezier(.16,1,.3,1);



padding:

50px;



}








.bag-drawer.active{


transform:

translateX(0);



}








.bag-header{


display:flex;



justify-content:space-between;



border-bottom:

1px solid var(--awo-line);



padding-bottom:

30px;



}








.bag-header h2{


font-family:

var(--font-heavy);



font-size:

50px;



letter-spacing:

-3px;



}








.bag-item{


display:flex;



gap:

20px;



margin-top:

40px;



}








.bag-item img{


width:

100px;



height:

130px;



object-fit:cover;



}








.bag-item h3{


font-size:

14px;



letter-spacing:

2px;



}








.bag-total{


position:absolute;



bottom:

50px;



left:

50px;



right:

50px;



border-top:

1px solid var(--awo-line);



padding-top:

30px;



}









/* =========================================================
   QUICK VIEW
========================================================= */


.quick-view{


position:fixed;



inset:0;



background:

rgba(0,0,0,.8);



backdrop-filter:

blur(10px);



z-index:8500;



opacity:0;



visibility:hidden;



transition:

.5s;



display:flex;



align-items:center;



justify-content:center;



}








.quick-view.active{


opacity:1;



visibility:visible;



}








.quick-container{


width:

90%;



max-width:

1100px;



background:

#0b0b0b;



display:grid;



grid-template-columns:

1fr 1fr;



}








.quick-image{


height:

700px;



}








.quick-image img{


height:100%;



}








.quick-info{


padding:

60px;



}








.quick-info h2{


font-family:

var(--font-heavy);



font-size:

70px;



letter-spacing:

-5px;



}









/* =========================================================
   SIZE SELECTOR
========================================================= */


.sizes{


display:flex;



gap:

15px;



margin:

40px 0;



}








.size{


width:

55px;



height:

55px;



border:

1px solid var(--awo-line);



display:flex;



align-items:center;



justify-content:center;



font-size:

10px;



letter-spacing:

2px;



transition:

.3s;



}








.size:hover,
.size.active{


background:white;



color:black;



}









/* =========================================================
   NEWSLETTER
========================================================= */


.newsletter{


padding:

180px 8%;



text-align:center;



}








.newsletter span{


font-size:

10px;



letter-spacing:

12px;



color:

var(--awo-grey);



}








.newsletter h2{


font-family:

var(--font-heavy);



font-size:

clamp(70px,12vw,180px);



letter-spacing:

-10px;



line-height:

.8;



margin:

50px 0;



}








.newsletter-form{


display:flex;



max-width:

700px;



margin:auto;



border-bottom:

1px solid white;



}








.newsletter-form input{


flex:1;



background:none;



border:none;



outline:none;



padding:

25px 0;



color:white;



font-size:

15px;



}








.newsletter-form button{


letter-spacing:

5px;



font-size:

10px;



}









/* =========================================================
   FOOTER
========================================================= */




.awo-footer{

padding:70px 7% 30px;

border-top:1px solid rgba(255,255,255,.12);

}



.footer-container{

display:grid;

grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;

gap:40px;

}



.footer-logo{

font-size:40px;

letter-spacing:10px;

font-weight:600;

}




.footer-column h3,
.footer-newsletter h3{

font-size:9px;

letter-spacing:4px;

color:#777;

margin-bottom:25px;

}



.footer-column a{

display:block;

text-decoration:none;

color:#999;

font-size:11px;

letter-spacing:1px;

margin-bottom:14px;

transition:.3s;

}



.footer-column a:hover{

color:white;

}




.footer-newsletter p{

font-size:10px;

color:#777;

letter-spacing:2px;

}




.email-box{

display:flex;

border-bottom:1px solid #555;

margin-top:20px;

}



.email-box input{

background:none;

border:none;

outline:none;

color:white;

padding:10px 0;

width:140px;

}
.top-notice{
    width:100%;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    position:fixed;
    top:0;
    left:0;
    z-index:9999;

    background:transparent;
    border:none;
    pointer-events:none;
}

.notice-track{
    white-space:nowrap;
    color:#fff;
    font-size:.75rem;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;

    animation:marquee 22s linear infinite;
}

@keyframes marquee{
    from{
        transform:translateX(100%);
    }
    to{
        transform:translateX(-100%);
    }
}



.email-box button{

background:none;

border:none;

color:white;

cursor:pointer;

}





.footer-bottom{

margin-top:60px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.12);

display:flex;

justify-content:space-between;

font-size:9px;

letter-spacing:3px;

color:#666;

}



.awo-marquee{

    width:100%;

    overflow:hidden;

    border-top:1px solid rgba(255,255,255,.12);

    border-bottom:1px solid rgba(255,255,255,.12);

    padding:14px 0;

    background:#ffffff;

}



.marquee-track{

    display:flex;

    width:max-content;

    animation:awoScroll 25s linear infinite;

}



.marquee-track span{

    display:flex;

    gap:50px;

    padding-right:50px;

    color:rgb(0, 0, 0);

    font-size:11px;

    letter-spacing:5px;

    text-transform:uppercase;

    white-space:nowrap;

}



@keyframes awoScroll{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}




/* =========================================================
   CUSTOM CURSOR
========================================================= */


.cursor{


width:

20px;



height:

20px;



border:

1px solid white;



border-radius:50%;



position:fixed;



pointer-events:none;



z-index:99999;



transition:

.15s;



}








.cursor.hover{


transform:

scale(3);



background:white;



mix-blend-mode:

difference;



}









/* =========================================================
   PAGE TRANSITIONS
========================================================= */


.page-transition{


position:fixed;



inset:0;



background:white;



z-index:100000;



transform:

translateY(100%);



transition:

.8s cubic-bezier(.16,1,.3,1);



}








.page-transition.active{


transform:

translateY(0);



}









/* =========================================================
   FINAL RESPONSIVE SYSTEM
========================================================= */


@media(max-width:900px){



.bag-drawer{


width:

100%;



}



.quick-container{


grid-template-columns:

1fr;



}



.quick-image{


height:

500px;



}



.footer-grid{


grid-template-columns:

1fr 1fr;



}



}




@media(max-width:600px){



.newsletter h2{


letter-spacing:

-5px;



}



.newsletter-form{


display:block;



}



.newsletter-form button{


margin-top:

30px;



}



.footer-grid{


grid-template-columns:

1fr;



}



.footer-bottom{


flex-direction:

column;



gap:

20px;



}



}
.shop-section{

    width:100%;

    padding:170px 70px;

}



.shop-header h2{

    font-size:18px;

    letter-spacing:7px;

    font-weight:400;

    margin-bottom:100px;

}





.product-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:120px 35px;

}





.product{

    cursor:pointer;

}





.product img{

    width:100%;

    aspect-ratio:1 / 1.25;

    object-fit:cover;

    display:block;

    transition:0.6s cubic-bezier(.2,.8,.2,1);

}





.product:hover img{

    transform:scale(1.04);

}





.product h3{

    margin-top:28px;

    font-size:15px;

    font-weight:400;

    letter-spacing:2px;

}





.product p{

    margin-top:10px;

    font-size:14px;

    letter-spacing:1px;

    color:#777;

}





.grab-btn{


    display:inline-flex;

    align-items:center;


    margin-top:25px;


    padding:13px 32px;


    border:1px solid #111;


    color:#f0ebeb;


    text-decoration:none;


    font-size:11px;


    letter-spacing:4px;


    transition:.4s ease;
    border-radius: 75px;


}





.grab-btn:hover{


    background:#fefefe;


    color:#090909;


    transform:translateY(-4px);


}





@media(max-width:1000px){


.product-grid{

grid-template-columns:repeat(2,1fr);

}


.shop-section{

padding:120px 35px;

}


}





@media(max-width:600px){


.shop-section{

padding:90px 20px;

}



.product-grid{

grid-template-columns:repeat(2,1fr);

gap:60px 15px;

}



.product h3{

font-size:11px;

}



.grab-btn{

padding:10px 20px;

font-size:10px;

}


}