<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCENORA — одежда с вайбом любимой истории</title>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,700&family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Caveat:wght@600&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{
--pink:#FFB6D0;
--pink-hot:#FF4D87;
--pink-deep:#E22A6A;
--cream:#FFF6EF;
--cream-2:#FFE8DE;
--ink:#180810;
--plum:#3B0A28;
--lilac:#DDA9DC;
--butter:#FFE4A3;
--mint:#A8E6CF;
}
html{scroll-behavior:smooth}
body{
background:var(--cream);color:var(--ink);
font-family:'Space Grotesk',sans-serif;
overflow-x:hidden;font-size:15px;line-height:1.6;
cursor:none;
}
@media (max-width:900px){ body{cursor:auto} }
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:none;border:none;background:none;color:inherit}
@media (max-width:900px){ button{cursor:pointer} }
/* ЗАГРУЗОЧНЫЙ ЗАНАВЕС */
.curtain{
position:fixed;inset:0;z-index:9999;
display:grid;grid-template-columns:1fr 1fr;
pointer-events:none;
cursor:pointer;
}
.curtain-side{
background:var(--pink-hot);position:relative;overflow:hidden;
transition:transform 1.4s cubic-bezier(.87,0,.13,1)
}
.curtain-side::after{
content:'';position:absolute;inset:0;
background:repeating-linear-gradient(
90deg,
rgba(255,255,255,.12) 0,
rgba(255,255,255,.12) 2px,
transparent 2px,
transparent 40px
)
}
.curtain-left{transform-origin:left}
.curtain-right{transform-origin:right}
.curtain.open .curtain-left{transform:translateX(-100%)}
.curtain.open .curtain-right{transform:translateX(100%)}
.curtain-brand{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
z-index:10000;
font-family:'Archivo Black',sans-serif;
font-size:clamp(2rem,7vw,5rem);
color:var(--cream);letter-spacing:6px;
transition:opacity .5s, transform .8s;
text-align:center;pointer-events:none
}
.curtain-brand small{
display:block;font-family:'Fraunces',serif;font-style:italic;
font-size:clamp(.85rem,1.5vw,1.1rem);letter-spacing:4px;
margin-top:14px;font-weight:300;opacity:.85
}
.curtain.open .curtain-brand{
opacity:0;transform:translate(-50%,-50%) scale(.8)
}
/* КУРСОР */
.cursor-dot{
position:fixed;top:0;left:0;width:10px;height:10px;
background:var(--ink);border-radius:50%;
pointer-events:none;z-index:9998;
transform:translate(-50%,-50%);
transition:width .25s,height .25s,background .25s;
mix-blend-mode:difference
}
.cursor-ring{
position:fixed;top:0;left:0;width:48px;height:48px;
border:1.5px solid var(--pink-hot);border-radius:50%;
pointer-events:none;z-index:9997;
transform:translate(-50%,-50%);
transition:width .3s,height .3s,border-color .3s
}
.cursor-ring.hover{
width:70px;height:70px;border-color:var(--ink);
background:rgba(255,77,135,.12)
}
@media (max-width:900px){ .cursor-dot,.cursor-ring{display:none} }
/* ФОН — МЯГКИЕ ПЯТНА */
.blob{
position:fixed;border-radius:50%;filter:blur(80px);opacity:.55;
pointer-events:none;z-index:0;mix-blend-mode:multiply
}
.blob-1{
width:520px;height:520px;background:var(--pink);
top:-100px;left:-100px;animation:blobFloat 22s ease-in-out infinite
}
.blob-2{
width:460px;height:460px;background:var(--lilac);
top:40%;right:-140px;animation:blobFloat 26s ease-in-out infinite reverse
}
.blob-3{
width:400px;height:400px;background:var(--butter);
bottom:-100px;left:30%;animation:blobFloat 30s ease-in-out infinite
}
@keyframes blobFloat{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(60px,-40px) scale(1.08)}
66%{transform:translate(-40px,60px) scale(.95)}
}
.wrap{position:relative;z-index:2}
/* ВЕРХНЯЯ ТОНКАЯ ПОЛОСА */
.ticker{
background:var(--ink);color:var(--pink);
padding:12px 0;overflow:hidden;
font-family:'Archivo Black',sans-serif;
font-size:13px;letter-spacing:4px;
position:relative;z-index:5
}
.ticker-track{
display:flex;gap:40px;white-space:nowrap;
animation:marq 35s linear infinite
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-track span{display:flex;align-items:center;gap:40px}
.ticker-track span::after{
content:'★';color:var(--pink-hot);font-size:14px
}
/* ШАПКА */
.nav{
position:sticky;top:0;z-index:50;
padding:20px 4%;
display:flex;justify-content:space-between;align-items:center;
background:rgba(255,246,239,.7);
backdrop-filter:blur(20px);
border-bottom:1.5px solid var(--ink)
}
.nav-left,.nav-right{display:flex;gap:26px;align-items:center}
.nav a.nlink{
font-size:12px;font-weight:700;letter-spacing:2px;
text-transform:uppercase;position:relative;padding:4px 0
}
.nav a.nlink::before{
content:'';position:absolute;bottom:-2px;left:0;right:0;
height:2px;background:var(--pink-hot);
transform:scaleX(0);transform-origin:right;
transition:.35s cubic-bezier(.87,0,.13,1)
}
.nav a.nlink:hover::before{transform:scaleX(1);transform-origin:left}
.brand{
font-family:'Archivo Black',sans-serif;
font-size:26px;letter-spacing:6px;
position:absolute;left:50%;transform:translateX(-50%);
color:var(--ink)
}
.brand span{color:var(--pink-hot)}
.cart-pill{
display:flex;align-items:center;gap:10px;
background:var(--ink);color:var(--cream);
padding:10px 18px;border-radius:100px;
font-size:12px;font-weight:700;letter-spacing:2px;
transition:.3s;border:2px solid var(--ink)
}
.cart-pill:hover{background:var(--pink-hot);border-color:var(--pink-hot);transform:scale(1.05)}
.cart-pill b{
background:var(--pink);color:var(--ink);
min-width:22px;height:22px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:11px;font-weight:900
}
@media(max-width:900px){
.nav-left,.nav-right a{display:none}
.brand{font-size:20px;letter-spacing:4px;position:static;transform:none}
.nav{padding:14px 4%}
}
/* ГЕРОЙ */
.hero{
min-height:92vh;position:relative;
padding:60px 4% 80px;
display:flex;flex-direction:column;justify-content:center;
overflow:hidden
}
.hero-bg-text{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
font-family:'Archivo Black',sans-serif;
font-size:clamp(200px,36vw,620px);
color:transparent;
-webkit-text-stroke:2px rgba(255,77,135,.18);
white-space:nowrap;pointer-events:none;
animation:bgSlide 30s linear infinite;
z-index:0;letter-spacing:-8px
}
@keyframes bgSlide{
from{transform:translate(-52%,-50%)}
to{transform:translate(-48%,-50%)}
}
.hero-inner{
position:relative;z-index:2;
max-width:1500px;margin:0 auto;width:100%;
display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center
}
.hero-tag{
display:inline-flex;align-items:center;gap:12px;
background:var(--pink);color:var(--ink);
padding:8px 18px;border-radius:100px;
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:3px;
transform:rotate(-3deg);
margin-bottom:26px;
animation:tagWiggle 5s ease-in-out infinite
}
@keyframes tagWiggle{
0%,100%{transform:rotate(-3deg)}
50%{transform:rotate(2deg)}
}
.hero-tag::before{
content:'';width:8px;height:8px;border-radius:50%;
background:var(--ink);animation:blink 1.4s infinite
}
@keyframes blink{50%{opacity:.2}}
.hero h1{
font-family:'Fraunces',serif;
font-weight:300;font-size:clamp(2.6rem,7vw,6rem);
line-height:.95;letter-spacing:-3px;
margin-bottom:26px;color:var(--ink)
}
.hero h1 em{
font-style:italic;font-weight:700;
color:var(--pink-hot);position:relative;
display:inline-block
}
.hero h1 em::after{
content:'';position:absolute;
bottom:6px;left:0;right:0;height:12px;
background:var(--butter);z-index:-1;
transform:scaleX(0);transform-origin:left;
animation:underlineReveal 1.4s 1.6s forwards cubic-bezier(.87,0,.13,1)
}
@keyframes underlineReveal{to{transform:scaleX(1)}}
.hero p{
font-size:17px;line-height:1.65;
color:var(--plum);max-width:520px;margin-bottom:36px
}
.hero-cta{
display:inline-flex;align-items:center;gap:16px;
background:var(--ink);color:var(--cream);
padding:22px 42px;border-radius:100px;
font-family:'Archivo Black',sans-serif;
font-size:14px;letter-spacing:3px;
transition:.4s;border:2px solid var(--ink);
position:relative;overflow:hidden
}
.hero-cta::before{
content:'';position:absolute;inset:0;
background:var(--pink-hot);
border-radius:100px;
transform:translateY(101%);
transition:.5s cubic-bezier(.87,0,.13,1)
}
.hero-cta span,.hero-cta svg{position:relative;z-index:1}
.hero-cta:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,77,135,.3)}
.hero-cta:hover::before{transform:translateY(0)}
.hero-cta svg{transition:.4s}
.hero-cta:hover svg{transform:translateX(8px)}
.hero-visual{
position:relative;height:560px
}
.hero-photo{
position:absolute;inset:0;
background:url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=1200&auto=format&fit=crop') center/cover;
border-radius:20px;overflow:hidden;
box-shadow:20px 20px 0 var(--ink);
transition:.6s cubic-bezier(.34,1.56,.64,1)
}
.hero-photo::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(24,8,16,.4));
mix-blend-mode:multiply
}
.hero-photo:hover{
transform:translate(-8px,-8px);
box-shadow:28px 28px 0 var(--pink-hot)
}
.hero-badge{
position:absolute;top:-20px;right:-20px;
width:130px;height:130px;border-radius:50%;
background:var(--butter);
display:flex;align-items:center;justify-content:center;
text-align:center;
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:2px;line-height:1.3;
animation:spin 16s linear infinite;
z-index:3;padding:16px
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-badge-inner{
animation:spin 16s linear infinite reverse
}
.hero-sticker{
position:absolute;bottom:30px;left:-30px;
background:var(--pink);color:var(--ink);
padding:14px 22px;border-radius:100px;
font-family:'Caveat',cursive;font-size:22px;
transform:rotate(-6deg);
z-index:4;box-shadow:6px 6px 0 var(--ink);
transition:.3s
}
.hero-sticker:hover{transform:rotate(2deg) scale(1.08)}
@media(max-width:1000px){
.hero-inner{grid-template-columns:1fr;gap:50px}
.hero-visual{height:420px}
.hero-bg-text{font-size:40vw}
}
@media(max-width:600px){
.hero{padding:40px 5% 60px;min-height:auto}
.hero h1{letter-spacing:-1.5px}
.hero p{font-size:15px}
.hero-cta{padding:18px 32px;font-size:12px}
.hero-visual{height:360px}
.hero-photo{box-shadow:12px 12px 0 var(--ink)}
.hero-badge{width:100px;height:100px;font-size:9px;top:-14px;right:-14px}
.hero-sticker{font-size:18px;padding:10px 16px;bottom:16px;left:-10px}
}
/* БЕГУЩИЕ СТРОКИ */
.marquee{
padding:26px 0;overflow:hidden;
border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
position:relative;z-index:3
}
.marquee.pink{background:var(--pink)}
.marquee.lilac{background:var(--lilac)}
.marquee.ink{background:var(--ink);color:var(--cream)}
.marquee.mint{background:var(--mint)}
.marquee-track{
display:flex;gap:50px;white-space:nowrap;
animation:marq 30s linear infinite;
font-family:'Fraunces',serif;
font-style:italic;
font-size:clamp(1.6rem,4vw,3rem);
font-weight:400;letter-spacing:-1px
}
.marquee-track span{display:flex;align-items:center;gap:50px}
.marquee-track span::after{
content:'✿';font-size:.6em;
transform:rotate(0deg);
animation:spin 6s linear infinite
}
/* СЕКЦИИ */
section.sec{padding:110px 4%;position:relative;z-index:2}
.container{max-width:1500px;margin:0 auto}
.sec-head{
display:grid;grid-template-columns:auto 1fr auto;
gap:40px;align-items:end;
padding-bottom:24px;margin-bottom:64px;
border-bottom:2px solid var(--ink)
}
.sec-num{
font-family:'Archivo Black',sans-serif;
font-size:13px;letter-spacing:4px;
background:var(--ink);color:var(--cream);
padding:8px 14px;border-radius:100px
}
.sec-title{
font-family:'Fraunces',serif;font-weight:400;
font-size:clamp(2rem,5vw,4rem);
line-height:1;letter-spacing:-2px;text-align:center
}
.sec-title em{font-style:italic;font-weight:700;color:var(--pink-hot)}
.sec-tag{
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:3px;
text-align:right;line-height:1.7;color:var(--plum)
}
@media(max-width:700px){
section.sec{padding:70px 5%}
.sec-head{grid-template-columns:1fr;text-align:left;gap:16px}
.sec-title{text-align:left;font-size:2rem}
.sec-tag{text-align:left}
}
/* О ПРОЕКТЕ */
.about-grid{
display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center
}
.about-text .label{
font-family:'Caveat',cursive;font-size:26px;
color:var(--pink-hot);margin-bottom:14px
}
.about-text h3{
font-family:'Fraunces',serif;font-weight:400;
font-size:clamp(1.8rem,3vw,2.6rem);
line-height:1.08;letter-spacing:-1px;
margin-bottom:26px
}
.about-text h3 em{
font-style:italic;font-weight:700;
background:linear-gradient(180deg,transparent 60%,var(--pink) 60%);
padding:0 4px
}
.about-text p{
color:var(--plum);margin-bottom:18px;
font-size:15.5px;line-height:1.75;max-width:520px
}
.about-stats{
display:grid;grid-template-columns:1fr 1fr;gap:20px;
margin-top:36px;padding-top:30px;border-top:1.5px solid var(--ink)
}
.stat b{
display:block;font-family:'Fraunces',serif;
font-style:italic;font-weight:700;
font-size:44px;line-height:1;color:var(--pink-hot);
margin-bottom:6px
}
.stat span{
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:2px;color:var(--plum)
}
.about-visual{
position:relative;height:600px
}
.about-photo{
position:absolute;inset:0;
background:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1200&auto=format&fit=crop') center/cover;
border-radius:24px 24px 24px 0;
box-shadow:-20px 20px 0 var(--ink)
}
.about-photo::before{
content:'';position:absolute;top:-16px;right:-16px;
width:110px;height:110px;
background:var(--pink);border-radius:50%;
z-index:-1
}
.about-photo::after{
content:'';position:absolute;bottom:-16px;left:-16px;
width:80px;height:80px;
background:var(--butter);
border-radius:50% 0 0 0;
z-index:-1
}
@media(max-width:1000px){
.about-grid{grid-template-columns:1fr;gap:40px}
.about-visual{height:420px}
}
/* КАРУСЕЛЬ */
.carousel-sec{
background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)
}
.carousel-wrap{
position:relative;max-width:1200px;margin:0 auto;
height:580px;perspective:2000px;
touch-action:pan-y
}
.carousel-stage{
position:absolute;top:0;left:50%;width:250px;height:100%;
transform-style:preserve-3d;
transition:transform 1.1s cubic-bezier(.25,1,.5,1);
transform:translateX(-50%) rotateY(0)
}
.mannequin{
position:absolute;top:20px;left:0;width:250px;height:500px;
transform-style:preserve-3d;cursor:pointer;transition:.5s
}
.mq-body{
position:relative;width:100%;height:420px;
background:var(--pink);overflow:hidden;
border:2px solid var(--ink);border-radius:20px;
transition:.5s;box-shadow:0 0 0 var(--pink-hot)
}
.mq-body img{
width:100%;height:100%;object-fit:cover;
transition:.6s
}
.mq-vibe{
position:absolute;top:14px;left:14px;
background:var(--ink);color:var(--cream);
padding:6px 12px;border-radius:100px;
font-family:'Archivo Black',sans-serif;
font-size:9px;letter-spacing:2px;z-index:2
}
.mq-year{
position:absolute;top:14px;right:14px;
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:2px;
background:var(--butter);color:var(--ink);
padding:6px 10px;border-radius:100px;z-index:2
}
.mannequin .mq-pole{
width:2px;height:44px;background:var(--ink);
margin:0 auto;opacity:.4
}
.mannequin .mq-base{
width:110px;height:2px;background:var(--ink);
margin:0 auto;opacity:.3
}
.mannequin .mq-label{
text-align:center;margin-top:14px;
font-family:'Fraunces',serif;font-style:italic;
font-size:17px;color:rgba(24,8,16,.55);transition:.4s
}
.mannequin.active .mq-body{
border-color:var(--pink-hot);
box-shadow:12px 12px 0 var(--pink-hot);
transform:translate(-6px,-6px)
}
.mannequin.active .mq-body img{transform:scale(1.05)}
.mannequin.active .mq-label{color:var(--ink);font-size:19px;font-weight:700}
.mannequin.active .mq-pole{opacity:1;height:54px;background:var(--pink-hot)}
.carousel-controls{
position:absolute;top:44%;transform:translateY(-50%);
width:64px;height:64px;border-radius:50%;
background:var(--ink);color:var(--cream);
display:flex;align-items:center;justify-content:center;
font-size:24px;transition:.35s;z-index:10;
border:2px solid var(--ink)
}
.carousel-controls:hover{
background:var(--pink-hot);border-color:var(--pink-hot);
transform:translateY(-50%) scale(1.12)
}
.nav-prev{left:2%}
.nav-next{right:2%}
.carousel-dots{
display:flex;gap:12px;justify-content:center;margin-top:44px
}
.dot-btn{
width:36px;height:6px;border-radius:100px;
background:rgba(24,8,16,.15);transition:.4s;padding:0
}
.dot-btn.active{background:var(--pink-hot);width:56px}
/* ДЕТАЛЬ ПАНЕЛЬ */
.detail-panel{
max-width:1180px;margin:70px auto 0;
background:var(--cream);border:2px solid var(--ink);
border-radius:20px;overflow:hidden;
display:grid;grid-template-columns:.9fr 1.1fr;
box-shadow:14px 14px 0 var(--ink)
}
.detail-img{
background:var(--pink);position:relative;min-height:520px
}
.detail-img img{
width:100%;height:100%;object-fit:cover;position:absolute;inset:0
}
.detail-info{padding:48px 44px;display:flex;flex-direction:column}
.detail-info .vibe{
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:3px;color:var(--pink-hot);
margin-bottom:14px
}
.detail-info h3{
font-family:'Fraunces',serif;font-weight:400;
font-size:clamp(1.8rem,3vw,2.6rem);
line-height:1.05;letter-spacing:-1px;margin-bottom:18px
}
.detail-info h3 em{font-style:italic;font-weight:700}
.detail-info .desc{
color:var(--plum);font-size:14.5px;line-height:1.75;
margin-bottom:28px;max-width:500px
}
.detail-info .price-row{
display:flex;align-items:baseline;gap:16px;
padding-bottom:26px;margin-bottom:28px;
border-bottom:1.5px dashed rgba(24,8,16,.2)
}
.detail-info .price{
font-family:'Fraunces',serif;font-style:italic;font-weight:700;
font-size:44px;line-height:1;color:var(--ink);letter-spacing:-1px
}
.detail-info .price-old{
text-decoration:line-through;color:var(--plum);
opacity:.4;font-size:16px
}
.size-block{margin-bottom:26px}
.size-label{
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:3px;
margin-bottom:14px;display:flex;
justify-content:space-between;align-items:center
}
.size-label .hint{
font-family:'Caveat',cursive;font-size:20px;
color:var(--pink-hot);letter-spacing:0
}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.size-btn{
min-width:54px;height:54px;padding:0 12px;
background:transparent;border:2px solid var(--ink);
border-radius:100px;font-family:'Archivo Black',sans-serif;
font-size:13px;letter-spacing:1px;
transition:.3s;display:flex;align-items:center;justify-content:center
}
.size-btn:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--pink-hot);border-color:var(--pink-hot)}
.size-btn.selected{
background:var(--ink);color:var(--cream);
transform:translateY(-3px);
box-shadow:0 6px 0 var(--pink-hot)
}
.add-to-cart-btn{
width:100%;padding:22px;border-radius:100px;
background:var(--pink-hot);color:var(--cream);
font-family:'Archivo Black',sans-serif;
font-size:14px;letter-spacing:3px;
border:2px solid var(--pink-hot);
transition:.3s;position:relative;overflow:hidden
}
.add-to-cart-btn:hover:not(:disabled){
transform:translateY(-3px);
box-shadow:0 10px 0 var(--ink);
background:var(--ink);border-color:var(--ink)
}
.add-to-cart-btn:disabled{
opacity:.35;cursor:not-allowed;
background:transparent;color:var(--plum);border-color:var(--plum)
}
@media(max-width:1000px){
.carousel-wrap{height:500px}
.mannequin{width:200px;height:420px}
.mq-body{height:340px}
.detail-panel{grid-template-columns:1fr}
.detail-img{min-height:380px}
}
@media(max-width:600px){
.carousel-wrap{height:440px}
.mannequin{width:170px;height:360px}
.mq-body{height:280px}
.carousel-controls{width:48px;height:48px;font-size:18px}
.detail-info{padding:32px 22px}
.detail-info .price{font-size:34px}
.size-btn{min-width:46px;height:46px;font-size:11px}
}
/* КОРЗИНА */
.cart-sec{
background:var(--pink);border-top:2px solid var(--ink)
}
#cart-items{max-width:860px;margin:0 auto 44px}
.cart-item{
display:flex;justify-content:space-between;align-items:center;
padding:22px 26px;margin-bottom:14px;
background:var(--cream);border:2px solid var(--ink);
border-radius:16px;transition:.35s
}
.cart-item:hover{
transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)
}
.cart-item h4{
font-family:'Fraunces',serif;font-style:italic;
font-size:20px;font-weight:600;margin-bottom:6px
}
.cart-item small{
color:var(--plum);font-size:12px;
font-family:'Archivo Black',sans-serif;letter-spacing:1px
}
.cart-item .size-tag{
display:inline-block;margin-left:10px;
padding:3px 12px;background:var(--ink);color:var(--cream);
border-radius:100px;font-family:'Archivo Black',sans-serif;
font-size:10px;letter-spacing:2px
}
.cart-remove{
color:var(--ink);font-size:22px;padding:8px 14px;
transition:.35s;font-weight:900
}
.cart-remove:hover{color:var(--pink-hot);transform:rotate(90deg) scale(1.2)}
.cart-total{
text-align:center;padding:30px 0;
font-family:'Fraunces',serif;font-style:italic;font-weight:700;
font-size:clamp(28px,4vw,44px);margin-bottom:26px
}
.cart-total b{color:var(--ink)}
.cart-empty{
text-align:center;padding:60px 20px;
background:var(--cream);border:2px dashed var(--ink);
border-radius:16px;font-family:'Caveat',cursive;
font-size:28px;color:var(--plum)
}
.cart-actions{text-align:center}
.btn-main{
display:inline-flex;align-items:center;gap:14px;
padding:22px 44px;border-radius:100px;
background:var(--ink);color:var(--cream);
font-family:'Archivo Black',sans-serif;
font-size:14px;letter-spacing:3px;
transition:.35s;border:2px solid var(--ink)
}
.btn-main:hover{
background:var(--pink-hot);border-color:var(--pink-hot);
transform:translateY(-4px);
box-shadow:0 12px 0 rgba(24,8,16,.2)
}
.btn-main svg{transition:.35s}
.btn-main:hover svg{transform:translateX(8px)}
/* ОПЛАТА */
#checkout{
max-width:680px;margin:34px auto 0;
background:var(--cream);padding:50px 46px;
border:2px solid var(--ink);border-radius:20px;
display:none;box-shadow:14px 14px 0 var(--ink)
}
#checkout h3{
font-family:'Fraunces',serif;font-weight:400;
font-style:italic;font-size:36px;
text-align:center;margin-bottom:8px
}
#checkout .sub{
text-align:center;font-family:'Caveat',cursive;
font-size:22px;color:var(--plum);margin-bottom:36px
}
.form-group{margin-bottom:22px}
.form-group label{
display:block;font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:2.5px;color:var(--plum);
margin-bottom:8px
}
.form-group input,.form-group textarea,.form-group select{
width:100%;padding:15px 20px;
border:2px solid var(--ink);border-radius:100px;
background:var(--cream);color:var(--ink);
font-family:inherit;font-size:15px;transition:.3s
}
.form-group textarea{border-radius:20px;resize:vertical;min-height:90px}
.form-group select{border-radius:20px}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
outline:none;border-color:var(--pink-hot);
box-shadow:0 0 0 4px rgba(255,77,135,.15)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pay-note{
font-family:'Caveat',cursive;font-size:18px;
text-align:center;color:var(--plum);
margin-top:18px;opacity:.7
}
.btn-submit{
width:100%;padding:22px;border-radius:100px;
background:var(--pink-hot);color:var(--cream);
font-family:'Archivo Black',sans-serif;
font-size:14px;letter-spacing:3px;
transition:.35s;margin-top:10px;
border:2px solid var(--pink-hot)
}
.btn-submit:hover{
background:var(--ink);border-color:var(--ink);
transform:translateY(-3px);
box-shadow:0 8px 0 rgba(255,77,135,.3)
}
.success-msg{
display:none;text-align:center;padding:70px 40px;
background:var(--cream);border:2px solid var(--ink);
border-radius:20px;max-width:680px;margin:0 auto;
box-shadow:14px 14px 0 var(--ink)
}
.success-msg h3{
font-family:'Fraunces',serif;font-style:italic;
font-weight:700;font-size:42px;
color:var(--pink-hot);margin-bottom:18px
}
.success-msg p{
font-family:'Caveat',cursive;font-size:22px;
color:var(--plum);margin-bottom:32px;line-height:1.5
}
@media(max-width:600px){
#checkout{padding:34px 22px;box-shadow:8px 8px 0 var(--ink)}
.form-row{grid-template-columns:1fr}
}
/* ДИЗАЙНЕРЫ */
.designers-sec{
background:linear-gradient(180deg,var(--cream) 0%,var(--lilac) 150%)
}
.designers-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:32px
}
.designer-card{
background:var(--cream);border:2px solid var(--ink);
border-radius:20px;overflow:hidden;
display:flex;flex-direction:column;
transition:.4s cubic-bezier(.34,1.56,.64,1);
position:relative
}
.designer-card:hover{
transform:translate(-6px,-6px);
box-shadow:12px 12px 0 var(--pink-hot)
}
.designer-photo{
height:340px;background-size:cover;background-position:center;
position:relative;background-color:var(--pink);
border-bottom:2px solid var(--ink)
}
.designer-num{
position:absolute;top:16px;left:16px;
background:var(--butter);color:var(--ink);
padding:6px 14px;border-radius:100px;
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:2px;z-index:3
}
.designer-coll{
position:absolute;bottom:16px;left:16px;right:16px;z-index:3
}
.designer-coll small{
display:inline-block;
background:var(--ink);color:var(--cream);
padding:5px 12px;border-radius:100px;
font-family:'Archivo Black',sans-serif;
font-size:9px;letter-spacing:2px;margin-bottom:6px
}
.designer-coll b{
display:block;font-family:'Fraunces',serif;font-style:italic;
font-size:17px;font-weight:600;color:var(--cream);
text-shadow:0 2px 8px rgba(0,0,0,.6)
}
.designer-info{
padding:26px 24px;flex:1;display:flex;flex-direction:column
}
.designer-info h3{
font-family:'Fraunces',serif;font-weight:400;
font-size:26px;line-height:1.1;
letter-spacing:-.3px;margin-bottom:6px
}
.designer-info h3 em{font-style:italic;font-weight:700}
.designer-info .role{
font-family:'Archivo Black',sans-serif;
font-size:10px;letter-spacing:2px;
color:var(--pink-hot);margin-bottom:16px
}
.designer-info .bio{
font-size:13.5px;color:var(--plum);
line-height:1.7;margin-bottom:22px;flex:1
}
.designer-info .btn-outline{
display:flex;align-items:center;justify-content:center;gap:10px;
padding:16px 20px;border:2px solid var(--ink);
border-radius:100px;color:var(--ink);
font-family:'Archivo Black',sans-serif;
font-size:12px;letter-spacing:2px;
transition:.35s;background:transparent;width:100%
}
.designer-info .btn-outline:hover{
background:var(--ink);color:var(--cream);
transform:translateY(-3px);
box-shadow:0 8px 0 var(--pink-hot)
}
/* МОДАЛКА */
.modal-backdrop{
position:fixed;inset:0;background:rgba(24,8,16,.75);
backdrop-filter:blur(8px);z-index:1000;
display:none;align-items:center;justify-content:center;
padding:20px;overflow-y:auto
}
.modal-backdrop.open{display:flex}
.modal{
background:var(--cream);max-width:700px;width:100%;
padding:52px 46px;border-radius:24px;
border:2px solid var(--ink);
box-shadow:16px 16px 0 var(--pink-hot);
position:relative;max-height:92vh;overflow-y:auto
}
.modal-close{
position:absolute;top:18px;right:22px;
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
font-size:22px;color:var(--ink);transition:.3s;
background:var(--pink);border-radius:50%
}
.modal-close:hover{background:var(--pink-hot);color:var(--cream);transform:rotate(90deg)}
.modal h3{
font-family:'Fraunces',serif;font-weight:400;
font-style:italic;font-size:38px;text-align:center;
margin-bottom:10px;letter-spacing:-1px
}
.modal .subtitle{
text-align:center;font-family:'Caveat',cursive;
font-size:22px;color:var(--plum);margin-bottom:32px
}
.modal .designer-tag{
display:block;text-align:center;
background:var(--pink);padding:10px 20px;
border-radius:100px;font-family:'Archivo Black',sans-serif;
font-size:12px;letter-spacing:2px;
margin:0 auto 34px;width:fit-content;max-width:100%
}
@media(max-width:600px){
.modal{padding:38px 22px;box-shadow:8px 8px 0 var(--pink-hot)}
.modal h3{font-size:28px}
}
/* ЛИЦЕНЗИЯ */
.license-sec{background:var(--ink);color:var(--cream)}
.license-sec .sec-title{color:var(--cream)}
.license-sec .sec-title em{color:var(--pink)}
.license-sec .sec-num{background:var(--pink);color:var(--ink)}
.license-sec .sec-head{border-bottom-color:var(--pink)}
.license-sec .sec-tag{color:var(--pink)}
.license-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px
}
.license-card{
background:rgba(255,246,239,.05);
padding:34px 28px;border-radius:20px;
border:1.5px solid rgba(255,182,208,.25);
transition:.35s
}
.license-card:hover{
background:rgba(255,182,208,.1);
transform:translateY(-6px);
border-color:var(--pink)
}
.license-card h4{
font-family:'Archivo Black',sans-serif;
font-size:12px;letter-spacing:3px;
color:var(--pink);margin-bottom:18px;
display:flex;align-items:center;gap:12px
}
.license-card h4::before{
content:'✦';color:var(--pink-hot);font-size:14px
}
.license-card p,.license-card li{
font-size:13.5px;line-height:1.8;
color:rgba(255,246,239,.7)
}
.license-card ul{padding-left:20px;margin-top:12px}
.license-card li{margin-bottom:8px}
.license-card li::marker{color:var(--pink-hot)}
/* ПОДВАЛ */
footer{
padding:70px 4% 40px;background:var(--pink);
text-align:center;position:relative;z-index:2;
border-top:2px solid var(--ink)
}
.footer-brand{
font-family:'Archivo Black',sans-serif;
font-size:clamp(48px,10vw,120px);
letter-spacing:-2px;line-height:.9;
color:var(--ink);margin-bottom:24px;
position:relative;display:inline-block
}
.footer-brand span{color:var(--cream)}
.footer-brand::after{
content:'';position:absolute;bottom:-8px;left:5%;right:5%;
height:6px;background:var(--butter);border-radius:100px
}
footer p{
font-family:'Archivo Black',sans-serif;
font-size:11px;letter-spacing:3px;
color:var(--ink);opacity:.7;margin-bottom:8px
}
footer .legal{
font-family:'Caveat',cursive;font-size:20px;
opacity:.6;margin-top:20px;letter-spacing:0
}
/* ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ */
.reveal{opacity:0;transform:translateY(50px);transition:1s cubic-bezier(.87,0,.13,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.no-js .reveal{opacity:1;transform:none}
</style>
</head>
<body class="no-js">
<div class="curtain" id="curtain">
<div class="curtain-side curtain-left"></div>
<div class="curtain-side curtain-right"></div>
</div>
<div class="curtain-brand" id="curtainBrand">
SCENORA
<small>SCENE × AURA</small>
</div>
<div class="cursor-dot" id="cursorDot"></div>
<div class="cursor-ring" id="cursorRing"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<div class="wrap">
<div class="ticker">
<div class="ticker-track">
<span>SCENORA STUDIO PRESENTS</span>
<span>SEASON 01 · LIMITED EDITION</span>
<span>Одежда с вайбом любимой истории</span>
<span>SCENORA STUDIO PRESENTS</span>
<span>SEASON 01 · LIMITED EDITION</span>
<span>Одежда с вайбом любимой истории</span>
</div>
</div>
<nav class="nav">
<div class="nav-left">
<a href="#about" class="nlink">О проекте</a>
<a href="#capsule" class="nlink">Капсула</a>
</div>
<a href="#top" class="brand">SCEN<span>O</span>RA</a>
<div class="nav-right">
<a href="#designers" class="nlink">Дизайнеры</a>
<a href="#license" class="nlink">Лицензия</a>
<button class="cart-pill" onclick="scrollToCart()">
Корзина <b id="cartCount">0</b>
</button>
</div>
</nav>
<section class="hero" id="top">
<div class="hero-bg-text">SCENORA</div>
<div class="hero-inner">
<div>
<div class="hero-tag">SCENE × AURA</div>
<h1>Одежда с вайбом<br><em>любимой истории</em></h1>
<p>Капсульные коллекции по мотивам атмосферы кино и сериалов. Настроение, цвет и силуэт — без копирования костюмов и логотипов.</p>
<a href="#capsule" class="hero-cta">
<span>СМОТРЕТЬ КАПСУЛУ</span>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
<div class="hero-visual">
<div class="hero-photo"></div>
<div class="hero-badge">
<div class="hero-badge-inner">SCENORA · SEASON 01 · LIMITED ·</div>
</div>
<div class="hero-sticker">вайб любимого кино ✨</div>
</div>
</div>
</section>
<div class="marquee pink">
<div class="marquee-track">
<span>Twin Peaks</span>
<span>Alice in Wonderland</span>
<span>Twilight</span>
<span>Devil Wears Prada</span>
<span>Twin Peaks</span>
<span>Alice in Wonderland</span>
<span>Twilight</span>
<span>Devil Wears Prada</span>
</div>
</div>
<section class="sec" id="about">
<div class="container">
<div class="sec-head">
<div class="sec-num">01 / О ПРОЕКТЕ</div>
<h2 class="sec-title">Больше, чем <em>мерч</em></h2>
<div class="sec-tag">MANIFESTO<br>BEHIND SCENES</div>
</div>
<div class="about-grid">
<div class="about-text">
<div class="label">— наш манифест —</div>
<h3>Мы не копируем костюмы.<br>Мы создаём <em>настроение</em>.</h3>
<p>SCENORA — от английских <em>scene</em> («сцена») и <em>aura</em> («атмосфера»). Мы переводим визуальный референс из кино в удобную одежду для повседневной носки.</p>
<p>Дизайнерская капсула среднего ограниченного тиража. Продуманные силуэты, качественные ткани, понятная цена.</p>
<div class="about-stats">
<div class="stat"><b>04</b><span>КАПСУЛЫ В СЕЗОНЕ</span></div>
<div class="stat"><b>100%</b><span>АВТОРСКИЙ ДИЗАЙН</span></div>
</div>
</div>
<div class="about-visual">
<div class="about-photo"></div>
</div>
</div>
</div>
</section>
<div class="marquee lilac">
<div class="marquee-track">
<span>Дизайнерская капсула</span>
<span>Ограниченный тираж</span>
<span>Средний ценовой сегмент</span>
<span>Индивидуальный пошив</span>
<span>Дизайнерская капсула</span>
<span>Ограниченный тираж</span>
<span>Средний ценовой сегмент</span>
<span>Индивидуальный пошив</span>
</div>
</div>
<section class="sec carousel-sec" id="capsule">
<div class="container">
<div class="sec-head">
<div class="sec-num">02 / КАПСУЛА</div>
<h2 class="sec-title">Крутите <em>манекены</em></h2>
<div class="sec-tag">NOW SHOWING<br>SEASON 01</div>
</div>
<div class="carousel-wrap">
<button class="carousel-controls nav-prev" onclick="rotate(-1)" aria-label="Назад">‹</button>
<div class="carousel-stage" id="stage"></div>
<button class="carousel-controls nav-next" onclick="rotate(1)" aria-label="Вперёд">›</button>
</div>
<div class="carousel-dots" id="dots"></div>
<div class="detail-panel" id="detailPanel"></div>
</div>
</section>
<div class="marquee mint">
<div class="marquee-track">
<span>Выбери историю</span>
<span>Выбери настроение</span>
<span>Выбери размер</span>
<span>Выбери себя</span>
<span>Выбери историю</span>
<span>Выбери настроение</span>
<span>Выбери размер</span>
<span>Выбери себя</span>
</div>
</div>
<section class="sec cart-sec" id="cart">
<div class="container">
<div class="sec-head">
<div class="sec-num">03 / КОРЗИНА</div>
<h2 class="sec-title">Ваш <em>заказ</em></h2>
<div class="sec-tag">BOX OFFICE<br>ORDER SUMMARY</div>
</div>
<div id="cart-items"></div>
<div class="cart-total" id="cartTotal" style="display:none;"></div>
<div class="cart-actions">
<button class="btn-main" id="checkoutBtn" onclick="showCheckout()" style="display:none;">
<span>К ОПЛАТЕ</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
</div>
<div id="checkout">
<h3>Оформление заказа</h3>
<p class="sub">доставка по всей России</p>
<form onsubmit="processPayment(event)">
<div class="form-group"><label>ИМЯ И ФАМИЛИЯ</label><input type="text" required placeholder="Иван Иванов"></div>
<div class="form-group"><label>EMAIL</label><input type="email" required placeholder="ivan@example.com"></div>
<div class="form-group"><label>АДРЕС ДОСТАВКИ</label><input type="text" required placeholder="г. Москва, ул. Примерная, д. 1"></div>
<div class="form-group"><label>НОМЕР КАРТЫ</label><input type="text" required placeholder="0000 0000 0000 0000" maxlength="19"></div>
<div class="form-row">
<div class="form-group"><label>СРОК</label><input type="text" required placeholder="MM/ГГ" maxlength="5"></div>
<div class="form-group"><label>CVV</label><input type="text" required placeholder="000" maxlength="3"></div>
</div>
<button type="submit" class="btn-submit">ОПЛАТИТЬ · ДЕМО</button>
<p class="pay-note">учебный проект · оплата не производится</p>
</form>
</div>
<div class="success-msg" id="successMsg">
<h3>Заказ оформлен ✨</h3>
<p>Спасибо за демонстрацию работы сайта.<br>Это учебный проект — реальная оплата не была произведена.</p>
<button class="btn-main" onclick="resetAll()">
<span>ВЕРНУТЬСЯ В МАГАЗИН</span>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
</div>
</div>
</section>
<div class="marquee ink">
<div class="marquee-track">
<span>Featured Collaborators</span>
<span>Camille Laurent</span>
<span>Renata Silva</span>
<span>Astrid Holm</span>
<span>Marco Bellini</span>
<span>Featured Collaborators</span>
<span>Camille Laurent</span>
<span>Renata Silva</span>
<span>Astrid Holm</span>
<span>Marco Bellini</span>
</div>
</div>
<section class="sec designers-sec" id="designers">
<div class="container">
<div class="sec-head">
<div class="sec-num">04 / ДИЗАЙНЕРЫ</div>
<h2 class="sec-title">Дизайнеры <em>капсулы</em></h2>
<div class="sec-tag">FEATURED<br>COLLABORATORS</div>
</div>
<div class="designers-grid" id="designersGrid"></div>
</div>
</section>
<section class="sec license-sec" id="license">
<div class="container">
<div class="sec-head">
<div class="sec-num">05 / ЛИЦЕНЗИЯ</div>
<h2 class="sec-title">Правовая <em>информация</em></h2>
<div class="sec-tag">LEGAL<br>DISCLAIMER</div>
</div>
<div class="license-grid">
<div class="license-card">
<h4>О БРЕНДЕ</h4>
<p>SCENORA — учебный проект. Название образовано от английских слов <em>Scene</em> («сцена») и <em>Aura</em> («атмосфера»).</p>
</div>
<div class="license-card">
<h4>ИНТЕЛЛЕКТУАЛЬНАЯ СОБСТВЕННОСТЬ</h4>
<p>Дизайн одежды SCENORA — авторский. Мы не копируем костюмы, логотипы и охраняемые элементы.</p>
<ul>
<li>Названия фильмов принадлежат правообладателям</li>
<li>Референсы используются в учебных целях</li>
<li>Продукция — авторский дизайн</li>
</ul>
</div>
<div class="license-card">
<h4>ЮРИДИЧЕСКАЯ ФОРМА</h4>
<p>ООО, УСН «Доходы» — 6%. Участники команды официально закрепляют доли и роли.</p>
</div>
<div class="license-card">
<h4>ОПЛАТА И ДАННЫЕ</h4>
<p>Оплата имитируется в учебных целях. В реальном проекте — через ЮKassa или Тинькофф с соблюдением ФЗ-152.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-brand">SCEN<span>O</span>RA</div>
<p>STUDIO · 2026 · УЧЕБНЫЙ ПРОЕКТ</p>
<p class="legal">Дизайн не копирует костюмы и логотипы. Авторские вещи по мотивам атмосферы.</p>
</footer>
</div>
<div class="modal-backdrop" id="modalBackdrop" onclick="if(event.target===this)closeModal()">
<div class="modal">
<button class="modal-close" onclick="closeModal()">✕</button>
<h3>Индивидуальный заказ</h3>
<p class="subtitle">Обсудим вашу идею и сошьём вещь один на один</p>
<span class="designer-tag" id="modalDesignerName">—</span>
<form onsubmit="submitCustomOrder(event)">
<div class="form-group"><label>КАК ВАС ЗОВУТ?</label><input type="text" required placeholder="Имя и фамилия"></div>
<div class="form-row">
<div class="form-group"><label>EMAIL</label><input type="email" required placeholder="you@mail.ru"></div>
<div class="form-group"><label>TELEGRAM</label><input type="text" required placeholder="@nickname"></div>
</div>
<div class="form-group">
<label>ЧТО ХОТИТЕ СШИТЬ?</label>
<select required>
<option value="">— выберите категорию —</option>
<option>Пальто / тренч</option>
<option>Платье</option>
<option>Куртка / бомбер</option>
<option>Костюм / комплект</option>
<option>Свитер / трикотаж</option>
<option>Другое</option>
</select>
</div>
<div class="form-group">
<label>ОПИШИТЕ ИДЕЮ</label>
<textarea required placeholder="Какой фильм или атмосфера вдохновляет? Какие цвета, силуэт, детали?"></textarea>
</div>
<div class="form-row">
<div class="form-group"><label>БЮДЖЕТ, ₽</label><input type="text" required placeholder="от 15 000"></div>
<div class="form-group"><label>СРОК</label><input type="text" required placeholder="3–4 недели"></div>
</div>
<button type="submit" class="btn-submit">ОТПРАВИТЬ ЗАЯВКУ</button>
<p class="pay-note">учебный проект · заявка никуда не отправляется</p>
</form>
</div>
</div>
<script>
/* ЗАНАВЕС */
(function openCurtain(){
const curtain = document.getElementById('curtain');
const brand = document.getElementById('curtainBrand');
if (!curtain) return;
let opened = false;
function open(){
if (opened) return;
opened = true;
curtain.classList.add('open');
if (brand) brand.style.opacity = '0';
setTimeout(() => {
curtain.style.display = 'none';
if (brand) brand.style.display = 'none';
}, 1400);
}
curtain.addEventListener('click', open);
document.addEventListener('DOMContentLoaded', () => setTimeout(open, 500));
setTimeout(open, 1500);
setTimeout(open, 4000);
})();
document.body.classList.remove('no-js');
/* КУРСОР */
(function initCursor(){
const dot = document.getElementById('cursorDot');
const ring = document.getElementById('cursorRing');
if (!dot || !ring) return;
if ('ontouchstart' in window || window.innerWidth < 900) {
dot.style.display = 'none';
ring.style.display = 'none';
document.body.style.cursor = 'auto';
return;
}
let mouseX = window.innerWidth / 2;
let mouseY = window.innerHeight / 2;
let ringX = mouseX, ringY = mouseY;
window.addEventListener('mousemove', e => {
mouseX = e.clientX;
mouseY = e.clientY;
dot.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%,-50%)`;
}, { passive: true });
function animateRing(){
ringX += (mouseX - ringX) * 0.16;
ringY += (mouseY - ringY) * 0.16;
ring.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%,-50%)`;
requestAnimationFrame(animateRing);
}
animateRing();
document.addEventListener('mouseover', e => {
if (e.target.closest('a, button, .mannequin, .designer-card, .hero-photo')) {
ring.classList.add('hover');
}
});
document.addEventListener('mouseout', e => {
if (e.target.closest('a, button, .mannequin, .designer-card, .hero-photo')) {
ring.classList.remove('hover');
}
});
})();
/* ПОЯВЛЕНИЕ */
(function initReveal(){
const targets = document.querySelectorAll(
'.sec-head, .about-grid, .carousel-wrap, .detail-panel, .designers-grid, .license-grid'
);
if (!targets.length) return;
targets.forEach(el => el.classList.add('reveal'));
if (!('IntersectionObserver' in window)) {
targets.forEach(el => el.classList.add('in'));
return;
}
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
observer.unobserve(e.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -50px 0px' });
targets.forEach(el => observer.observe(el));
setTimeout(() => {
targets.forEach(el => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
el.classList.add('in');
}
});
}, 2500);
})();
/* 3D-НАКЛОН */
function attachTilt(){
if (window.innerWidth < 900) return;
document.querySelectorAll('.designer-card').forEach(card => {
card.addEventListener('mousemove', e => {
const r = card.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width - 0.5;
const y = (e.clientY - r.top) / r.height - 0.5;
card.style.transform = `translate(-6px,-6px) rotateY(${x*8}deg) rotateX(${-y*8}deg)`;
card.style.transformStyle = 'preserve-3d';
});
card.addEventListener('mouseleave', () => { card.style.transform = ''; });
});
}
/* ДАННЫЕ */
const products = [
{ id:1, name:'Тренч', title:'«Северный лес»', vibe:'TWIN PEAKS', year:'1990', price:14500, oldPrice:18000,
desc:'Двубортный тренч из плотной шерсти. Приглушённый зелёный, свободный крой, потайная застёжка. Атмосфера тихого городка и соснового леса.',
sizes:['XS','S','M','L','XL'],
img:'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=1000&auto=format&fit=crop' },
{ id:2, name:'Платье', title:'«Сон в лесу»', vibe:'ALICE IN WONDERLAND', year:'2010', price:9800, oldPrice:12500,
desc:'Платье-миди с многослойной юбкой и мягким силуэтом. Пудрово-голубой оттенок, кружевные вставки. Сказочная лёгкость на каждый день.',
sizes:['XS','S','M','L'],
img:'https://images.unsplash.com/photo-1515347619252-60a6bf4fffce?q=80&w=1000&auto=format&fit=crop' },
{ id:3, name:'Куртка', title:'«Офисный шик»', vibe:'DEVIL WEARS PRADA', year:'2006', price:12200, oldPrice:15000,
desc:'Строгая куртка-бомбер с чёткой линией плеча. Графичный силуэт, матовая фурнитура. Для тех, кто одевается как на обложку.',
sizes:['S','M','L','XL'],
img:'https://images.unsplash.com/photo-1551028719-00167b16eac5?q=80&w=1000&auto=format&fit=crop' },
{ id:4, name:'Свитер', title:'«Полночный сад»', vibe:'TWILIGHT', year:'2008', price:7600, oldPrice:9500,
desc:'Объёмный свитер крупной вязки. Цвет мокрого асфальта, oversize-посадка, спущенное плечо. Атмосфера туманного тихого утра.',
sizes:['S','M','L','XL','XXL'],
img:'https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=1000&auto=format&fit=crop' },
];
const designers = [
{ id:'d1', name:'Camille', lastName:'Laurent', role:'ВНЕШНИЙ ДИЗАЙНЕР',
collection:'Twin Peaks · S01',
bio:'Парижский дизайнер верхней одежды. Плотные пальтовые ткани, строгие архитектурные силуэты. Работала с домами моды в Милане и Копенгагене.',
photo:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=700&auto=format&fit=crop' },
{ id:'d2', name:'Renata', lastName:'Silva', role:'ВНЕШНИЙ ДИЗАЙНЕР',
collection:'Alice in Wonderland · S01',
bio:'Бразильская художница и дизайнер костюма. Кружево, мягкие женственные формы, пастельная палитра.',
photo:'https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=700&auto=format&fit=crop' },
{ id:'d3', name:'Astrid', lastName:'Holm', role:'ВНЕШНИЙ ДИЗАЙНЕР',
collection:'Twilight · S01',
bio:'Скандинавский дизайнер трикотажа. Крупная вязка, объёмные формы, сложные оттенки серого.',
photo:'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=700&auto=format&fit=crop' },
{ id:'d4', name:'Marco', lastName:'Bellini', role:'ВНЕШНИЙ ДИЗАЙНЕР',
collection:'Devil Wears Prada · S01',
bio:'Миланский дизайнер и стилист. Строгая архитектурная мода — чёткие линии, графичные формы.',
photo:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=700&auto=format&fit=crop' },
];
let cart = [];
try { cart = JSON.parse(localStorage.getItem('scenoraCart') || '[]'); } catch(e){ cart = []; }
let currentIndex = 0;
let selectedSizes = {};
const N = products.length;
const ANGLE = 360 / N;
const RADIUS = 400;
/* КАРУСЕЛЬ */
function renderCarousel(){
const stage = document.getElementById('stage');
const dots = document.getElementById('dots');
if (!stage || !dots) return;
stage.innerHTML = ''; dots.innerHTML = '';
products.forEach((p, i) => {
const el = document.createElement('div');
el.className = 'mannequin';
el.style.transform = `rotateY(${i * ANGLE}deg) translateZ(${RADIUS}px)`;
el.innerHTML = `
<div class="mq-body">
<span class="mq-vibe">${p.vibe}</span>
<span class="mq-year">${p.year}</span>
<img src="${p.img}" alt="${p.title}" loading="lazy" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22420%22><rect fill=%22%23FFB6D0%22 width=%22300%22 height=%22420%22/><text x=%2250%25%22 y=%2250%25%22 font-family=%22serif%22 font-size=%2230%22 fill=%22%23180810%22 text-anchor=%22middle%22 font-style=%22italic%22>Scenora</text></svg>'">
</div>
<div class="mq-pole"></div>
<div class="mq-base"></div>
<div class="mq-label">${p.name} ${p.title}</div>
`;
el.addEventListener('click', () => {
if (i === currentIndex) return;
const diff = i - currentIndex;
rotate(diff > 0 ? 1 : -1, Math.abs(diff));
});
stage.appendChild(el);
const d = document.createElement('button');
d.className = 'dot-btn';
d.onclick = () => {
const diff = i - currentIndex;
if (diff === 0) return;
rotate(diff > 0 ? 1 : -1, Math.abs(diff));
};
dots.appendChild(d);
});
updateCarousel();
}
function rotate(direction, steps = 1){
currentIndex = (currentIndex + direction * steps + N * 10) % N;
updateCarousel();
}
function updateCarousel(){
const stage = document.getElementById('stage');
if (!stage) return;
stage.style.transform = `translateX(-50%) rotateY(${-currentIndex * ANGLE}deg)`;
document.querySelectorAll('.mannequin').forEach((el, i) => {
const isActive = i === currentIndex;
el.classList.toggle('active', isActive);
el.style.filter = isActive ? 'none' : 'brightness(.7) saturate(.5)';
});
document.querySelectorAll('.dot-btn').forEach((d, i) => d.classList.toggle('active', i === currentIndex));
renderDetail(products[currentIndex]);
}
function renderDetail(p){
const panel = document.getElementById('detailPanel');
if (!panel) return;
const currentSize = selectedSizes[p.id];
panel.innerHTML = `
<div class="detail-img"><img src="${p.img}" alt="${p.title}"></div>
<div class="detail-info">
<div class="vibe">${p.vibe} · ${p.year}</div>
<h3>${p.name} <em>${p.title}</em></h3>
<p class="desc">${p.desc}</p>
<div class="price-row">
<span class="price">${p.price.toLocaleString('ru-RU')} ₽</span>
<span class="price-old">${p.oldPrice.toLocaleString('ru-RU')} ₽</span>
</div>
<div class="size-block">
<div class="size-label">
<span>ВЫБЕРИТЕ РАЗМЕР</span>
${currentSize ? '<span class="hint">выбран · ' + currentSize + '</span>' : '<span class="hint">обязательно</span>'}
</div>
<div class="sizes">
${p.sizes.map(s => `
<button class="size-btn ${currentSize === s ? 'selected' : ''}" onclick="pickSize(${p.id}, '${s}')">${s}</button>
`).join('')}
</div>
</div>
<button class="add-to-cart-btn" onclick="addToCart(${p.id})" ${!currentSize ? 'disabled' : ''}>
${currentSize ? 'ДОБАВИТЬ · ' + currentSize : 'СНАЧАЛА ВЫБЕРИТЕ РАЗМЕР'}
</button>
</div>
`;
}
function pickSize(productId, size){
selectedSizes[productId] = size;
renderDetail(products.find(p => p.id === productId));
}
/* КОРЗИНА */
function addToCart(productId){
const size = selectedSizes[productId];
if(!size) return;
const key = productId + '_' + size;
const ex = cart.find(i => i.key === key);
if(ex) ex.qty++;
else cart.push({ key, id:productId, size, qty:1 });
saveCart(); updateCartUI();
const cartSec = document.getElementById('cart');
if (cartSec) cartSec.scrollIntoView({behavior:'smooth'});
}
function removeFromCart(key){
cart = cart.filter(i => i.key !== key);
saveCart(); updateCartUI();
}
function saveCart(){
try { localStorage.setItem('scenoraCart', JSON.stringify(cart)); } catch(e){}
}
function updateCartUI(){
const countEl = document.getElementById('cartCount');
const box = document.getElementById('cart-items');
const totalEl = document.getElementById('cartTotal');
const checkoutBtn = document.getElementById('checkoutBtn');
if (!countEl || !box) return;
const count = cart.reduce((s,i)=>s+i.qty,0);
countEl.textContent = count;
if(cart.length === 0){
box.innerHTML = '<div class="cart-empty">Пока пусто — выберите вещи из капсулы ✨</div>';
if (totalEl) totalEl.style.display = 'none';
if (checkoutBtn) checkoutBtn.style.display = 'none';
return;
}
let total = 0;
box.innerHTML = cart.map(item => {
const p = products.find(x => x.id === item.id);
total += p.price * item.qty;
return `
<div class="cart-item">
<div>
<h4>${p.name} ${p.title} <span class="size-tag">${item.size}</span></h4>
<small>${item.qty} × ${p.price.toLocaleString('ru-RU')} ₽ · ${p.vibe}</small>
</div>
<button class="cart-remove" onclick="removeFromCart('${item.key}')">✕</button>
</div>
`;
}).join('');
if (totalEl) {
totalEl.innerHTML = 'ИТОГО · <b>' + total.toLocaleString('ru-RU') + ' ₽</b>';
totalEl.style.display = 'block';
}
if (checkoutBtn) checkoutBtn.style.display = 'inline-flex';
}
function scrollToCart(){
const c = document.getElementById('cart');
if (c) c.scrollIntoView({behavior:'smooth'});
}
function showCheckout(){
const co = document.getElementById('checkout');
const btn = document.getElementById('checkoutBtn');
if (co) co.style.display = 'block';
if (btn) btn.style.display = 'none';
if (co) co.scrollIntoView({behavior:'smooth'});
}
function processPayment(e){
e.preventDefault();
const co = document.getElementById('checkout');
const success = document.getElementById('successMsg');
if (co) co.style.display = 'none';
document.querySelectorAll('#cart-items, #cartTotal, .cart-actions').forEach(el => el.style.display = 'none');
if (success) {
success.style.display = 'block';
success.scrollIntoView({behavior:'smooth'});
}
}
function resetAll(){
cart = [];
saveCart();
const success = document.getElementById('successMsg');
if (success) success.style.display = 'none';
const items = document.getElementById('cart-items');
const total = document.getElementById('cartTotal');
const actions = document.querySelector('.cart-actions');
if (items) items.style.display = 'block';
if (total) total.style.display = 'block';
if (actions) actions.style.display = 'block';
updateCartUI();
window.scrollTo({top:0, behavior:'smooth'});
}
/* ДИЗАЙНЕРЫ */
function renderDesigners(){
const grid = document.getElementById('designersGrid');
if (!grid) return;
grid.innerHTML = designers.map((d, i) => `
<div class="designer-card">
<div class="designer-photo" style="background-image:url('${d.photo}')">
<div class="designer-num">0${i+1}</div>
<div class="designer-coll">
<small>РАБОТА НАД КАПСУЛОЙ</small>
<b>${d.collection}</b>
</div>
</div>
<div class="designer-info">
<h3>${d.name} <em>${d.lastName}</em></h3>
<div class="role">${d.role}</div>
<p class="bio">${d.bio}</p>
<button class="btn-outline" onclick="openModal('${d.id}')">
ИНДИВИДУАЛЬНЫЙ ЗАКАЗ
</button>
</div>
</div>
`).join('');
attachTilt();
}
/* МОДАЛКА */
function openModal(designerId){
const d = designers.find(x => x.id === designerId);
const nameEl = document.getElementById('modalDesignerName');
const backdrop = document.getElementById('modalBackdrop');
if (nameEl) nameEl.textContent = d.name + ' ' + d.lastName + ' · ' + d.collection;
if (backdrop) backdrop.classList.add('open');
document.body.style.overflow = 'hidden';
}
function closeModal(){
const backdrop = document.getElementById('modalBackdrop');
if (backdrop) backdrop.classList.remove('open');
document.body.style.overflow = '';
}
function submitCustomOrder(e){
e.preventDefault();
closeModal();
alert('✨ Заявка отправлена дизайнеру!\n\n(демо учебного проекта — заявка никуда не уходит)');
e.target.reset();
}
document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });
/* СТАРТ */
function start(){
try {
renderCarousel();
renderDesigners();
updateCartUI();
} catch(err) {
console.error('Ошибка инициализации:', err);
document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', start);
} else {
start();
}
setTimeout(start, 300);
</script>
</body>
</html>