/* ============================================================ MPS / Media Project Store — Custom CSS для Impreza Theme Options Собрано из макетов ИИ. Вставить целиком в: Внешний вид -> Настройки темы (Theme Options) -> Custom CSS ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@800;900&family=Space+Grotesk:wght@300;400;500;700&display=swap'); /* ---------- from index (1).html ---------- */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#080808;--surface:#121212;--border:#222; --text:#f5f5f5;--text-muted:#888; --accent:#aaff00;--accent-dim:rgba(170,255,0,0.1); --font-h:'Outfit',sans-serif;--font-b:'Space Grotesk',sans-serif; } html{background:var(--bg);color:var(--text);font-family:var(--font-b); -webkit-font-smoothing:antialiased;overflow-x:hidden;scroll-padding-top:120px} body{background:var(--bg);overflow-x:hidden} a{color:inherit;text-decoration:none} /* PRELOADER */ .preloader{position:fixed;inset:0;z-index:10000;background:var(--bg); display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px} .preloader__title{font-family:var(--font-h);font-size:clamp(48px,8vw,140px); font-weight:900;letter-spacing:-.05em;color:var(--accent);text-transform:uppercase} .preloader__bar{width:200px;height:2px;background:#1a1a1a;position:relative;overflow:hidden} .preloader__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--accent)} .preloader.done{transform:translateY(-100%);transition:transform 1.2s cubic-bezier(.85,0,.15,1)} /* CURSOR */ .cursor{position:fixed;top:0;left:0;width:12px;height:12px;background:var(--accent); border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%); mix-blend-mode:difference;transition:transform .2s cubic-bezier(.25,1,.5,1)} .cursor-ring{position:fixed;top:0;left:0;width:40px;height:40px;border:1px solid var(--accent); border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%); transition:width .3s,height .3s,background .3s} .cursor-ring.active{width:80px;height:80px;background:var(--accent-dim);border-color:var(--accent)} @media(hover:none){.cursor,.cursor-ring{display:none}} /* GRAIN OVERLAY */ .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* WEBGL GRID */ #webgl{position:fixed;inset:0;z-index:1;pointer-events:none} /* HEADER/NAV */ /* NAV STYLES */ /* NAV STYLES */ .nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:32px 60px; display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--border);backdrop-filter:blur(10px); background: rgba(8,8,8,0.8);} .nav__logo{font-family:var(--font-h);font-size:24px;font-weight:900;text-transform:uppercase;color:var(--text);letter-spacing:-.03em; display:flex; align-items:center;} .nav__logo-img{height:80px;width:auto;object-fit:contain;filter:brightness(1.1)} .nav__links{display:flex;align-items:center;gap:32px} .nav__link{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:color .3s} .nav__link:hover{color:var(--accent)} .nav__lang{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);transition:color .3s; cursor:pointer;} .nav__lang:hover{color:var(--text)} .nav__cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--accent-dim)} /* INDUSTRIAL HERO */ .hero{min-height:100vh;height:auto;display:flex;flex-direction:column;justify-content:flex-end; padding:160px 60px 100px;position:relative;z-index:2;border-bottom:1px solid var(--border)} .hero__title{font-family:var(--font-h);font-size:clamp(40px,10vw,160px); font-weight:900;line-height:.95;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:40px;word-break:break-word} .hero__title span{color:transparent;-webkit-text-stroke:2px var(--text)} .hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-end} .hero__desc{font-size:16px;line-height:1.6;color:var(--text-muted);max-width:480px} .hero__stats{display:flex;gap:64px;justify-content:flex-end} .hero__stat-val{font-family:var(--font-h);font-size:48px;font-weight:900;color:var(--accent);line-height:1} .hero__stat-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-top:8px} /* MARQUEE RIBBON */ .marquee{border-bottom:1px solid var(--border);padding:32px 0;background:#0d0d0d; overflow:hidden;white-space:nowrap;position:relative;z-index:2} .marquee__track{display:flex;animation:marqueeScroll 20s linear infinite;width:max-content} .marquee__item{font-family:var(--font-h);font-size:48px;font-weight:900; text-transform:uppercase;color:rgba(245,245,245,0.03);-webkit-text-stroke:1px rgba(245,245,245,0.15); padding:0 40px;display:flex;align-items:center;gap:40px;flex-shrink:0} .marquee__item span{color:var(--accent);-webkit-text-stroke:none} @keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* LOGISTICS TICKER */ .logistics-ticker{background:#000;border-bottom:1px solid var(--border);padding:14px 60px;display:flex;align-items:center;gap:24px;overflow:hidden;position:relative;z-index:2} .logistics-ticker__label{font-family:var(--font-h);font-size:10px;font-weight:900;color:var(--accent);text-transform:uppercase;letter-spacing:.2em;display:flex;align-items:center;gap:8px;flex-shrink:0} .logistics-ticker__label::before{content:'';display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulseGlow 1.5s infinite} @keyframes pulseGlow{0%{transform:scale(0.8);opacity:0.5}50%{transform:scale(1.2);opacity:1}100%{transform:scale(0.8);opacity:0.5}} .logistics-ticker__track{display:flex;gap:48px;animation:tickerScroll 45s linear infinite;white-space:nowrap;width:max-content} .logistics-ticker__item{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:12px;flex-shrink:0} .logistics-ticker__item span{color:var(--text);font-weight:500} @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} /* HORIZONTAL HORIZON SECTION (AWWWARDS EXCLUSIVE) */ .horizontal-section{position:relative;z-index:2;background:#080808} .horizontal-scroll-wrap{position:sticky;top:0;height:100vh;overflow:hidden; display:flex;align-items:center} .horizontal-track{display:flex;width:400vw;will-change:transform} .slide{width:100vw;height:100vh;flex-shrink:0;display:flex;align-items:center; padding:0 100px;position:relative;border-right:1px solid var(--border)} .slide__num{position:absolute;bottom:40px;left:60px;font-family:var(--font-h); font-size:24vw;font-weight:900;color:rgba(255,255,255,0.015);line-height:.8;pointer-events:none} .slide__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:120px;align-items:center;width:100%} .slide__showcase{position:relative;aspect-ratio:4/3;background:var(--surface); border:1px solid var(--border);border-radius:8px;display:flex;align-items:center; justify-content:center;overflow:hidden} .slide__showcase img{width:75%;height:75%;object-fit:contain; transition:transform .6s cubic-bezier(.25,1,.5,1);} .slide__showcase:hover img{transform:scale(1.08)} .slide__content{display:flex;flex-direction:column;gap:32px} .slide__brand{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:700} .slide__title{font-family:var(--font-h);font-size:clamp(32px, 8vw, 64px);font-weight:900;letter-spacing:-.03em;text-transform:uppercase;line-height:1} .slide__desc{font-size:15px;line-height:1.7;color:var(--text-muted);max-width:440px} .slide__btn{align-self:flex-start;padding:16px 36px;border:1px solid var(--text); font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; transition:background .3s,color .3s,border-color .3s;cursor:pointer} .slide__btn:hover{background:var(--text);color:var(--bg)} /* INDUSTRIAL CONTACT SECTION */ .contact{padding:160px 60px;position:relative;z-index:2;background:var(--bg); border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1.2fr;gap:100px} .contact__left{display:flex;flex-direction:column;gap:32px} .contact__label{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:700} .contact__title{font-family:var(--font-h);font-size:72px;font-weight:900; letter-spacing:-.03em;text-transform:uppercase;line-height:1} .contact__desc{font-size:16px;line-height:1.6;color:var(--text-muted);max-width:460px} .contact-form{display:flex;flex-direction:column;gap:40px} .form-group{position:relative} .form-input{width:100%;background:transparent;border:none; border-bottom:1px solid var(--border);padding:20px 0;font-size:18px; color:var(--text);font-family:var(--font-b);outline:none;transition:border-color .3s} .form-input:focus{border-color:var(--accent)} .form-label{position:absolute;left:0;top:20px;font-size:14px;color:var(--text-muted); text-transform:uppercase;letter-spacing:.1em;pointer-events:none; transition:transform .3s,font-size .3s,color .3s} .form-input:focus ~ .form-label, .form-input:not(:placeholder-shown) ~ .form-label{ transform:translateY(-24px);font-size:11px;color:var(--accent)} .form-btn{height:72px;background:var(--text);color:var(--bg);font-family:var(--font-h); font-size:16px;font-weight:900;text-transform:uppercase;letter-spacing:.1em; border:none;outline:none;cursor:pointer;transition:background .3s,transform .2s} .form-btn:hover{background:var(--accent);transform:translateY(-2px)} .brands{padding:120px 60px;position:relative;z-index:2;border-bottom:1px solid var(--border);background:#0b0b0b} .brands__title{font-family:var(--font-h);font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-muted);text-align:center;margin-bottom:60px} .brands__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:center} .brand-item{height:100px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center; cursor:pointer;transition:border-color .3s,background .3s} .brand-item:hover{border-color:var(--accent);background:var(--accent-dim)} .brand-item img{max-width:60%;max-height:50%;object-fit:contain;filter:brightness(.6) contrast(1.2);transition:filter .3s} .brand-item:hover img{filter:brightness(1) contrast(1)} /* FOOTER GRID STYLE */ .footer{padding:60px; border-top:1px solid var(--border); background:#050505; position:relative; z-index:2;} .footer__grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:60px;} .footer__info{display:flex; flex-direction:column; gap:20px;} .footer__logo-img{height:65px; width:auto; object-fit:contain; align-self:flex-start;} .footer__desc{font-size:13px; color:var(--text-muted); line-height:1.6; max-width:280px;} .footer__socials{display:flex; gap:16px; margin-top:8px;} .footer__social{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--border); border-radius:4px; color:var(--text-muted); transition:color .3s, border-color .3s;} .footer__social:hover{color:var(--accent); border-color:var(--accent);} .footer__col-title{font-family:var(--font-h); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.15em; color:#fff; margin-bottom:24px;} .footer__list{list-style:none; display:flex; flex-direction:column; gap:12px;} .footer__link{font-size:13px; color:var(--text-muted); transition:color .3s; cursor:pointer;} .footer__link:hover{color:var(--accent);} .footer__copy{max-width:1400px; margin:40px auto 0; padding-top:40px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;} /* CYBERPUNK DRAWER */ .drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);z-index:9000;opacity:0;pointer-events:none;transition:opacity .4s} .drawer-overlay.active{opacity:1;pointer-events:all} .drawer{position:fixed;top:0;right:0;width:min(600px,100%);height:100vh;background:rgba(8,8,8,0.96); border-left:2px solid var(--border);z-index:9001;padding:60px 40px;transform:translateX(100%); transition:transform .6s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:32px;overflow-y:auto} .drawer.active{transform:translateX(0);border-left-color:var(--accent)} .drawer__header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:20px} .drawer__close{font-size:12px;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;color:var(--text-muted);transition:color .3s} .drawer__close:hover{color:var(--accent)} .drawer__title{font-family:var(--font-h);font-size:36px;font-weight:900;text-transform:uppercase;line-height:1} .drawer__price{font-family:var(--font-h);font-size:28px;color:var(--accent);font-weight:900} .drawer__price span{font-family:var(--font-b);font-size:14px;color:var(--text-muted);margin-left:4px} .drawer__hub-title{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:12px} .drawer__hubs{display:grid;grid-template-columns:1fr 1fr;gap:16px} .drawer__hub{border:1px solid var(--border);border-radius:4px;padding:20px;cursor:pointer;transition:border-color .3s,background .3s} .drawer__hub.active{border-color:var(--accent);background:var(--accent-dim)} .drawer__hub-name{font-family:var(--font-h);font-size:16px;font-weight:900;text-transform:uppercase;margin-bottom:4px} .drawer__hub-time{font-size:12px;color:var(--text-muted)} .drawer__qty-title{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:12px} .drawer__qty-row{display:flex;gap:16px;align-items:center} .drawer__qty-selector{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:4px;padding:12px 24px;width:150px;background:var(--surface)} .drawer__qty-btn{cursor:pointer;font-size:18px;font-weight:700;user-select:none;color:var(--text-muted);transition:color .3s} .drawer__qty-btn:hover{color:var(--accent)} .drawer__qty-val{font-family:var(--font-h);font-size:16px;font-weight:900} .drawer__btn-primary{flex:1;height:56px;background:var(--accent);color:var(--bg);font-family:var(--font-h);font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;border:none;cursor:pointer;transition:transform .2s,background .3s} /* STORY TIMELINE SECTION */ .story-section{padding:160px 60px;position:relative;z-index:2;border-bottom:1px solid var(--border);background:var(--bg)} .story-header{margin-bottom:80px;max-width:800px} .story-header__label{font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:16px;display:block} .story-header__title{font-family:var(--font-h);font-size:clamp(36px,5.5vw,72px);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:1} .timeline{display:flex;flex-direction:column;gap:40px;max-width:1100px;margin:0 auto;position:relative;padding-left:60px} .timeline::before{content:'';position:absolute;left:20px;top:10px;bottom:10px;width:2px;background:linear-gradient(to bottom, var(--accent) 0%, rgba(255,255,255,0.03) 100%)} .timeline-item{position:relative;display:flex;flex-direction:column;background:rgba(12,12,12,0.4);border:1px solid rgba(255,255,255,0.03);padding:40px 48px;border-radius:6px;transition:border-color .4s, background .4s, transform .4s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-sizing:border-box} .timeline-item::before{content:'';position:absolute;left:-47px;top:44px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 0 10px var(--accent);z-index:2;transition:background .3s, transform .3s} .timeline-item:hover{border-color:var(--accent);background:rgba(170,255,0,0.015);box-shadow:0 10px 40px rgba(170, 255, 0, 0.03);transform:translateX(15px)} .timeline-item:hover::before{background:var(--accent);transform:scale(1.2)} .timeline-item__num{font-family:var(--font-h);font-size:56px;font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.08);line-height:1;position:absolute;right:40px;top:30px;transition:color .4s, -webkit-text-stroke .4s;cursor:default} .timeline-item:hover .timeline-item__num{color:var(--accent);-webkit-text-stroke:1px var(--accent)} .timeline-item__content{display:flex;flex-direction:column;gap:16px;max-width:85%} .timeline-item__title{font-family:var(--font-h);font-size:clamp(20px,2.5vw,28px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.2;color:#fff} .timeline-item__text{font-size:16px;line-height:1.75;color:var(--text-muted)} .timeline-item__text span{color:#fff;font-weight:600;border-bottom:1px dashed var(--accent)} /* COMPARE SECTION */ .compare-section{padding:160px 60px;position:relative;z-index:2;background:#050505;border-bottom:1px solid var(--border)} .compare__grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin:80px auto 0} .compare-col{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:60px 40px;display:flex;flex-direction:column;gap:32px;transition:transform 0.4s, border-color 0.4s, box-shadow 0.4s;position:relative;overflow:hidden} .compare-col--grey{border-color:#222;opacity:0.5;transform:scale(0.95)} .compare-col--pro{border-color:var(--accent);background:rgba(170,255,0,0.02);box-shadow:0 0 80px rgba(170,255,0,0.03);transform:scale(1.05);z-index:2} .compare-col--pro::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--accent)} .compare-col__title{font-family:var(--font-h);font-size:32px;font-weight:900;text-transform:uppercase} .compare-col--pro .compare-col__title{color:var(--accent)} .compare-list{display:flex;flex-direction:column;gap:24px} .compare-item{display:flex;flex-direction:column;gap:8px;border-bottom:1px dashed #333;padding-bottom:16px;position:relative;padding-left:24px} .compare-item::before{content:'\2022';position:absolute;left:0;top:-2px;font-size:20px;line-height:1} .compare-col--grey .compare-item::before{content:'\2715';color:#ff3333;font-size:12px;top:2px} .compare-col--pro .compare-item::before{content:'\2713';color:var(--accent);font-size:14px;font-weight:bold;top:1px} .compare-item:last-child{border:none} .compare-item__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted)} .compare-item__val{font-size:18px;font-weight:500;color:var(--text)} .compare-col--pro .compare-item__val{color:#fff} /* PARALLAX MANIFESTO */ .manifesto{min-height:100vh;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg);padding:100px 20px} .manifesto__bg{position:absolute;inset:0;background:url('mediaproject/wp-content/uploads/2024/12/meyer_sound_leopard.jpg') center/cover no-repeat;background-attachment:fixed;filter:grayscale(100%) brightness(0.2) contrast(1.2);opacity:0;transition:opacity 1s ease} .manifesto.is-visible .manifesto__bg{opacity:1} .manifesto__text{font-family:var(--font-h);font-size:clamp(50px,9vw,150px);font-weight:900;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,0.15);text-align:center;line-height:0.85;position:relative;z-index:2;cursor:default;letter-spacing:-0.05em} .manifesto__text span{display:block;color:var(--accent);-webkit-text-stroke:0;margin-top:20px} /* CAROUSEL STYLES */ .carousel-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; z-index: 2; } .carousel-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; border-bottom: 1px solid var(--border); padding-bottom: 24px; } .carousel-label { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 12px; display: block; } .carousel-title { font-family: var(--font-h, 'Outfit', sans-serif); font-size: clamp(24px, 3.5vw, 40px); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; } .carousel-nav { display: flex; gap: 12px; } .carousel-nav-btn { width: 44px; height: 44px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 4px; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .3s, color .3s, transform .2s; } .carousel-nav-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.05); } .carousel-nav-btn:active { transform: scale(0.95); } .carousel-track-wrapper { overflow: hidden; margin: 0 -20px; padding: 0 20px; position: relative; } .carousel-track { display: flex; gap: 24px; width: max-content; /* Needed for continuous animation */ padding: 10px 0 30px; } .carousel-track.is-animated { animation: productCarouselScroll 40s linear infinite; } .carousel-track.is-animated:hover { animation-play-state: paused; } @keyframes productCarouselScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 12px)); /* -50% minus half the gap */ } } .carousel-track::-webkit-scrollbar { display: none; } .carousel-track { -ms-overflow-style: none; scrollbar-width: none; } .carousel-track .product-card { flex-shrink: 0; width: 320px !important; position: relative; display: flex; flex-direction: column; } .promo-card { border-color: rgba(200,200,200,.15); } .badge-promo { position: absolute; top: 20px; left: 20px; background: var(--accent); color: var(--bg); font-family: var(--font-h, 'Outfit', sans-serif); font-size: 9px; font-weight: 900; padding: 6px 12px; border-radius: 4px; z-index: 10; text-transform: uppercase; } .price-old { text-decoration: line-through; color: var(--text-muted) !important; font-size: 13px !important; margin-right: 8px; } @media(max-width: 768px) { .carousel-container { padding: 0 20px; } } /* ─── NEW CUSTOM LAYOUT STYLES ─── */ /* NAV STYLES */ .nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:24px 60px; display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--border);backdrop-filter:blur(10px); background: rgba(8,8,8,0.8);} /* FOOTER GRID STYLE */ .footer{padding:80px 60px; border-top:1px solid var(--border); background:#050505; position:relative; z-index:2;} @media(max-width: 968px) { .footer__grid{grid-template-columns:1fr; gap:40px;} } /* ─── PREMIUM CAROUSEL PRODUCT CARD STYLES ─── */ .carousel-track { cursor: grab; user-select: none; } .carousel-track.active { cursor: grabbing; } .carousel-track .product-card { flex-shrink: 0; width: 320px !important; background: rgba(15, 15, 15, 0.55); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 24px; position: relative; display: flex; flex-direction: column; transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s; cursor: pointer; box-sizing: border-box; } .carousel-track .product-card:hover { border-color: rgba(170, 255, 0, 0.6); box-shadow: 0 10px 40px rgba(170, 255, 0, 0.12), 0 0 20px rgba(170, 255, 0, 0.05) inset; transform: translateY(-8px); } .carousel-progress-bar { max-width: 1400px; margin: 20px auto 0; height: 2px; background: rgba(255, 255, 255, 0.05); position: relative; border-radius: 2px; } .carousel-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--accent); box-shadow: 0 0 10px var(--accent); transition: width 0.1s ease-out; } .product-card__img { width: 100%; height: 220px; background: #ffffff; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 20px; margin-bottom: 20px; box-sizing: border-box; } .product-card__img img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.4s ease; } .carousel-track .product-card:hover .product-card__img img { transform: scale(1.06); } .product-card__body { display: flex; flex-direction: column; flex-grow: 1; } .product-card__brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent); margin-bottom: 8px; display: block; } .product-card__name { font-family: var(--font-h, 'Outfit', sans-serif); font-size: 18px; font-weight: 900; text-transform: uppercase; color: #fff; margin-bottom: 8px; line-height: 1.2; } .product-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__price { font-family: var(--font-h, 'Outfit', sans-serif); font-size: 16px; color: #fff; font-weight: 900; margin-top: auto; } .product-card__price span { font-family: var(--font-b, 'Space Grotesk', sans-serif); font-size: 11px; color: var(--text-muted); font-weight: 500; margin-left: 4px; } .product-card__price .price-old { text-decoration: line-through; color: var(--text-muted) !important; font-size: 13px !important; margin-right: 8px; font-weight: 500; } /* ─── NEW HOMEPAGE SECTIONS (PARTNERS, REVIEWS, PROJECTS) ─── */ .home-section { padding: 80px 60px; max-width: 1600px; margin: 0 auto; } .home-section__header { margin-bottom: 40px; display: flex; flex-direction: column; gap: 8px; } .home-section__label { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); } .home-section__title { font-family: var(--font-h); font-size: 32px; font-weight: 900; color: var(--text); letter-spacing: -0.02em; } /* Partners */ .partners-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; } .partner-card { flex: 1 1 200px; max-width: 250px; padding: 30px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 4px; text-align: center; transition: all 0.3s ease; font-family: var(--font-h); font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; text-transform: uppercase; } .partner-card:hover { background: rgba(255,255,255,0.05); color: var(--text); border-color: rgba(255,255,255,0.1); transform: translateY(-5px); } /* Reviews */ .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .review-card { background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 40px 30px; display: flex; flex-direction: column; gap: 20px; transition: all 0.3s ease; } .review-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 30px rgba(134,38,255,0.1); } .review-quote { font-size: 15px; line-height: 1.6; color: var(--text-muted); font-style: italic; flex-grow: 1; } .review-author { display: flex; align-items: center; gap: 15px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; } .review-author__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--bg); font-family: var(--font-h); } .review-author__info { display: flex; flex-direction: column; } .review-author__name { font-weight: 700; font-size: 14px; color: var(--text); } .review-author__title { font-size: 12px; color: var(--text-muted); } /* Projects */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .project-card { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; background: #111; border: 1px solid rgba(255,255,255,0.05); } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease, opacity 0.5s ease; opacity: 0.6; } .project-card:hover img { transform: scale(1.05); opacity: 0.2; } .project-card__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; transition: all 0.3s ease; } .project-card__title { font-family: var(--font-h); font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 8px; transform: translateY(20px); transition: transform 0.3s ease; } .project-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .project-card:hover .project-card__title, .project-card:hover .project-card__desc { transform: translateY(0); opacity: 1; } @media(max-width:900px){ .home-section { padding: 40px 20px; } .project-card__title { transform: translateY(0); } .project-card__desc { opacity: 1; transform: translateY(0); } .project-card img { opacity: 0.4; } } /* RESPONSIVE */ @media(max-width:968px){ .hero__meta{grid-template-columns:1fr;gap:48px} .hero__stats{justify-content:flex-start} .slide__grid{grid-template-columns:1fr;gap:40px} .slide{padding:0 40px} .contact{grid-template-columns:1fr;gap:60px} .timeline { padding-left: 30px; gap: 24px; } .timeline::before { left: 10px; } .timeline-item { padding: 30px 24px; } .timeline-item::before { left: -26px; top: 34px; } .timeline-item__num { font-size: 36px; right: 20px; top: 20px; opacity: 0.15; } .timeline-item__content { max-width: 100%; } .timeline-item:hover { transform: translateX(5px); } .story-section{padding:100px 20px} .nav{padding:16px 20px} .nav__links{gap:20px} .nav__cta{padding:8px 16px;font-size:10px} .horizontal-scroll-wrap{height:auto;position:relative} .horizontal-track{flex-direction:column;width:100%!important;transform:none!important} .slide{width:100%;height:auto;padding:60px 20px;border-right:none;border-bottom:1px solid var(--border)} .slide__showcase{aspect-ratio:16/10} .hero{padding:140px 20px 60px} .hero__title{font-size:clamp(32px,8vw,80px)} .contact{padding:80px 20px} .contact__title{font-size:40px} .marquee__item{font-size:28px;padding:0 20px} .footer{flex-direction:column;gap:24px;text-align:center;padding:40px 20px} .compare__grid{grid-template-columns:1fr} .compare-col--pro{transform:scale(1)} .compare-col--grey{transform:scale(1);opacity:0.7} .brands__grid{grid-template-columns:repeat(2,1fr);gap:16px} .quiz-section{padding:80px 20px} .quiz-steps{grid-template-columns:1fr} } @media(max-width:480px){ .nav__links{display:none} .hero__stats{flex-direction:column;gap:24px} .hero__stat-val{font-size:36px} } /* ---------- from catalog.html ---------- */ :root{ --bg:#080808;--surface:#121212;--border:#222; --text:#f5f5f5;--text-muted:#888; --accent:#aaff00;--font-h:'Outfit',sans-serif;--font-b:'Space Grotesk',sans-serif; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-b); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* GRAIN & WEBGL-LIKE BG */ .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none; background-size:40px 40px; background-image:linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px); } /* NAV */ .nav{position:fixed;top:0;left:0;right:0;z-index:8000;padding:32px 60px; display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--border);backdrop-filter:blur(10px); background: rgba(8,8,8,0.8);} .nav__logo{font-family:var(--font-h);font-size:24px;font-weight:900;text-transform:uppercase;color:var(--text);letter-spacing:-.03em} .nav__back{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; padding:12px 28px;border:1px solid var(--border);border-radius:4px; cursor:pointer;transition:border-color .3s, color .3s} .nav__back:hover{border-color:var(--accent);color:var(--accent)} /* HEADER */ .catalog-header { position: relative; z-index: 2; padding: 160px 60px 60px; border-bottom: 1px solid var(--border); background: #050505; } .catalog-label { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 24px; display: block; } .catalog-title { font-family: var(--font-h); font-size: clamp(40px, 5vw, 80px); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.03em;} /* SEARCH BAR */ .search-bar { position: relative; z-index: 2; padding: 30px 60px; background: #0a0a0a; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .search-input { flex: 1; min-width: 250px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 14px 20px; font-family: var(--font-b); font-size: 14px; outline: none; transition: border-color 0.3s; } .search-input:focus { border-color: var(--accent); } .search-input::placeholder { color: var(--text-muted); } .results-count { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; } /* LAYOUT */ .catalog-container { position: relative; z-index: 2; padding: 60px; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 250px 1fr; gap: 60px; } /* FILTERS */ .filters { border-right: 1px dashed var(--border); padding-right: 40px; } .filter-group { margin-bottom: 40px; } .filter-title { font-family: var(--font-h); font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 20px; color: #fff; } .filter-list { list-style: none; } .filter-list li { margin-bottom: 12px; } .filter-label { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: color 0.3s; } .filter-label:hover { color: var(--accent); } .filter-checkbox { appearance: none; width: 16px; height: 16px; border: 1px solid var(--border); background: transparent; cursor: pointer; position: relative; transition: border-color 0.3s; flex-shrink: 0; } .filter-checkbox:checked { border-color: var(--accent); background: rgba(170,255,0,0.1); } .filter-checkbox:checked::after { content: ''; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; background: var(--accent); } .filter-reset { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; border: none; background: none; font-family: var(--font-b); margin-top: 8px; transition: opacity 0.3s; } .filter-reset:hover { opacity: 0.7; } /* GRID */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; } .product-card { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); padding: 30px; position: relative; overflow: hidden; transition: border-color 0.4s, transform 0.4s; } .product-card:hover { border-color: var(--accent); transform: translateY(-5px); } .product-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s; } .product-card:hover::before { transform: scaleX(1); } .product-brand { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 20px; } .product-image { width: 100%; height: 200px; object-fit: contain; margin-bottom: 30px; filter: grayscale(100%) contrast(1.2); transition: filter 0.4s; } .product-card:hover .product-image { filter: grayscale(0%) contrast(1); } .product-title { font-family: var(--font-h); font-size: 20px; text-transform: uppercase; color: #fff; margin-bottom: 10px; line-height: 1.2; } .product-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 20px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .product-price { font-family: var(--font-h); font-size: 16px; color: var(--accent); font-weight: 900; margin-bottom: 16px; } .product-link { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); gap: 8px; } .product-link::after { content: '→'; transition: transform 0.3s; } .product-card:hover .product-link::after { transform: translateX(5px); } .no-results { grid-column: 1 / -1; text-align: center; padding: 80px 20px; } .no-results__title { font-family: var(--font-h); font-size: 32px; font-weight: 900; text-transform: uppercase; margin-bottom: 16px; } .no-results__text { font-size: 14px; color: var(--text-muted); } @media(max-width: 968px) { .footer__grid{grid-template-columns:1fr; gap:40px;} .nav { padding: 16px 20px; } .catalog-header { padding: 120px 24px 40px; } .search-bar { padding: 20px 24px; } .catalog-container { grid-template-columns: 1fr; padding: 40px 24px; } .filters { border-right: none; border-bottom: 1px dashed var(--border); padding-right: 0; padding-bottom: 40px; display: flex; gap: 40px; overflow-x: auto; } .filter-group { margin-bottom: 0; min-width: 150px; flex-shrink: 0; } .products-grid { gap: 24px; } } @media(max-width: 480px) { .products-grid { grid-template-columns: 1fr; } } .footer__logo-img{height:65px;width:auto;object-fit:contain;filter:brightness(0.9)} /* BREADCRUMBS */ .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-muted); padding: 160px 60px 0; position: relative; z-index: 2; } .breadcrumbs a { transition: color 0.3s; } .breadcrumbs a:hover { color: var(--accent); } .breadcrumbs .separator { color: rgba(255,255,255,0.15); } .breadcrumbs .current { color: var(--text); font-weight: 500; } /* NAV STYLES OVERWRITE */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; padding: 32px 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); background: rgba(8,8,8,0.8); mix-blend-mode: normal !important; } .nav__logo { font-family: var(--font-h, 'Outfit', sans-serif); font-size: 24px; font-weight: 900; text-transform: uppercase; color: var(--text); letter-spacing: -.03em; display: flex; align-items: center; } .nav__logo-img { height: 28px; width: auto; object-fit: contain; filter: brightness(1.1); } .nav__links { display: flex; align-items: center; gap: 32px; } .nav__link { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; transition: color .3s; } .nav__link:hover { color: var(--accent); } .nav__lang { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color .3s; cursor: pointer; } .nav__lang:hover { color: var(--text); } /* FOOTER OVERWRITE */ .footer { padding: 60px; border-top: 1px solid var(--border); background: #050505; position: relative; z-index: 2; display: block !important; } .footer__grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px; text-align: left !important; } .footer__info { display: flex; flex-direction: column; gap: 20px; align-items: flex-start !important; text-align: left !important; } .footer__logo-img { height: 24px; width: auto; object-fit: contain; align-self: flex-start; } .footer__desc { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 280px; text-align: left !important; } .footer__socials { display: flex; gap: 16px; margin-top: 8px; } .footer__social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); transition: color .3s, border-color .3s; } .footer__social:hover { color: var(--accent); border-color: var(--accent); } .footer__col-title { font-family: var(--font-h, 'Outfit', sans-serif); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .15em; color: #fff; margin-bottom: 24px; } .footer__list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .footer__link { font-size: 13px; color: var(--text-muted); transition: color .3s; cursor: pointer; } .footer__link:hover { color: var(--accent); } .footer__copy { max-width: 1400px; margin: 40px auto 0; padding-top: 40px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; } /* PREMIUM PRODUCT DISPLAY FRAMES */ .product-image, .product-card__img img, .slide__showcase img, .drawer__img-container img { background: #ffffff !important; padding: 12px !important; border-radius: 8px !important; object-fit: contain !important; } .drawer__img-container { background: #ffffff !important; } @media(max-width: 968px) { .nav { padding: 24px; } .nav__links { display: none; } .footer__grid { grid-template-columns: 1fr; gap: 40px; } } /* ---------- from product.html ---------- */