/* ===== BYKUSH — Shared Styles ===== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css'); :root { --primary: #0d2137; --primary-light: #1a3a5c; --accent: #ff5c35; --accent-dark: #e04520; --green: #27ae60; --yellow: #f39c12; --bg: #f4f5f7; --white: #ffffff; --text: #2c2c2c; --text-light: #888888; --border: #e8e8e8; --shadow: 0 2px 16px rgba(0,0,0,0.08); --shadow-hover: 0 10px 40px rgba(0,0,0,0.15); --radius: 14px; --radius-sm: 8px; --transition: all 0.3s cubic-bezier(0.4,0,0.2,1); --max-width: 1280px; } /* ===== RESET ===== */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px} body{font-family:'Montserrat',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit;transition:var(--transition)} ul{list-style:none} img{max-width:100%;height:auto;display:block} button{cursor:pointer;border:none;background:none;font-family:inherit} input,select,textarea{font-family:inherit} /* ===== LAYOUT ===== */ .container{max-width:var(--max-width);margin:0 auto;padding:0 24px} .section{padding:80px 0} .section--dark{background:var(--primary);color:var(--white)} .section--gray{background:#f0f2f5} .section--accent{background:linear-gradient(135deg,var(--accent) 0%,#ff8a65 100%);color:var(--white)} /* ===== TYPOGRAPHY ===== */ h1{font-size:clamp(32px,5vw,60px);font-weight:900} h2{font-size:clamp(22px,3.5vw,40px);font-weight:800} h3{font-size:clamp(17px,2.5vw,24px);font-weight:700} .section-title{font-size:clamp(22px,3vw,36px);font-weight:800;text-align:center;margin-bottom:48px;color:var(--primary)} .section-title span{color:var(--accent)} .section-subtitle{text-align:center;color:var(--text-light);margin-top:-36px;margin-bottom:48px;font-size:15px} /* ===== HEADER ===== */ .header{position:sticky;top:0;z-index:1000;background:var(--primary);box-shadow:0 2px 20px rgba(0,0,0,0.25)} .header-top{background:var(--primary-light);padding:8px 0;font-size:13px;color:rgba(255,255,255,0.7)} .header-top .container{display:flex;justify-content:space-between;align-items:center;gap:16px} .header-top-right{display:flex;align-items:center;gap:20px} .header-top a:hover{color:var(--white)} .header-main{padding:16px 0} .header-main .container{display:flex;align-items:center;gap:32px} .logo{font-size:28px;font-weight:900;color:var(--white);flex-shrink:0;letter-spacing:-1px} .logo span{color:var(--accent)} .search-bar{flex:1;position:relative} .search-bar input{width:100%;padding:11px 20px;padding-right:50px;border-radius:50px;border:2px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.08);color:var(--white);font-size:14px;transition:var(--transition)} .search-bar input::placeholder{color:rgba(255,255,255,0.45)} .search-bar input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,0.12)} .search-btn{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,0.55);font-size:17px;background:none;border:none;cursor:pointer;transition:var(--transition)} .search-btn:hover{color:var(--accent)} .header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0} .phone-link{color:var(--white);font-weight:600;font-size:15px;white-space:nowrap} .phone-link:hover{color:var(--accent)} .cart-btn{position:relative;color:var(--white);display:flex;align-items:center;gap:7px;font-weight:700;padding:10px 20px;border-radius:50px;background:var(--accent);transition:var(--transition);font-size:14px} .cart-btn:hover{background:var(--accent-dark);transform:scale(1.04);box-shadow:0 4px 20px rgba(255,92,53,0.4)} .cart-count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;background:var(--white);color:var(--accent);border-radius:50px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px} .nav{background:rgba(255,255,255,0.04);border-top:1px solid rgba(255,255,255,0.05)} .nav .container{display:flex;align-items:center;flex-wrap:wrap} .nav-link{display:inline-block;padding:13px 17px;color:rgba(255,255,255,0.75);font-size:13.5px;font-weight:600;position:relative;transition:var(--transition);white-space:nowrap} .nav-link::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2.5px;background:var(--accent);border-radius:2px;transition:var(--transition)} .nav-link:hover{color:var(--white)} .nav-link:hover::after,.nav-link.active::after{width:60%} .nav-link.active{color:var(--white)} .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px} .hamburger span{display:block;width:24px;height:2px;background:var(--white);transition:var(--transition);border-radius:2px} .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)} /* ===== MOBILE MENU ===== */ .mobile-menu{display:none;position:fixed;inset:0;background:var(--primary);z-index:9999;flex-direction:column;align-items:center;justify-content:center;gap:28px;animation:fadeIn 0.3s ease} .mobile-menu.open{display:flex} .mobile-menu a{font-size:22px;font-weight:700;color:var(--white);transition:var(--transition)} .mobile-menu a:hover{color:var(--accent)} .mobile-close{position:absolute;top:24px;right:24px;font-size:32px;color:white;cursor:pointer;line-height:1} /* ===== FOOTER ===== */ .footer{background:var(--primary);color:rgba(255,255,255,0.8);padding:64px 0 0} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px} .footer-brand .logo{font-size:24px;margin-bottom:16px;display:block} .footer-brand p{font-size:14px;opacity:0.7;line-height:1.8;margin-bottom:20px} .footer-title{font-size:12px;font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:20px} .footer-links{display:flex;flex-direction:column;gap:11px} .footer-links a{font-size:14px;transition:var(--transition);color:rgba(255,255,255,0.7)} .footer-links a:hover{color:var(--accent);padding-left:6px} .footer-contacts{display:flex;flex-direction:column;gap:12px;font-size:14px;color:rgba(255,255,255,0.7)} .footer-contacts a:hover{color:var(--accent)} .footer-contacts i{margin-right:6px;color:var(--accent)} .social-links{display:flex;gap:10px} .social-link{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;font-size:17px;transition:var(--transition);color:rgba(255,255,255,0.8)} .social-link:hover{background:var(--accent);color:white;transform:scale(1.12)} .footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding:20px 0;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;opacity:0.55;flex-wrap:wrap;gap:8px} /* ===== BUTTONS ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 28px;border-radius:50px;font-size:15px;font-weight:700;transition:var(--transition);cursor:pointer;border:2px solid transparent;letter-spacing:0.2px} .btn:active{transform:scale(0.97)!important} .btn-primary{background:var(--accent);color:var(--white)} .btn-primary:hover{background:var(--accent-dark);box-shadow:0 6px 24px rgba(255,92,53,0.45);transform:translateY(-2px)} .btn-outline{background:transparent;border-color:var(--accent);color:var(--accent)} .btn-outline:hover{background:var(--accent);color:var(--white);transform:translateY(-2px)} .btn-dark{background:var(--primary);color:var(--white)} .btn-dark:hover{background:var(--primary-light);transform:translateY(-2px)} .btn-white{background:var(--white);color:var(--primary)} .btn-white:hover{background:var(--bg);transform:translateY(-2px)} .btn-outline-white{background:transparent;border-color:rgba(255,255,255,0.6);color:var(--white)} .btn-outline-white:hover{background:rgba(255,255,255,0.15);border-color:white} .btn-sm{padding:9px 20px;font-size:13px} .btn-lg{padding:17px 42px;font-size:17px} .btn-xl{padding:20px 52px;font-size:19px} .btn-block{width:100%;justify-content:center} /* ===== PRODUCT CARD ===== */ .product-card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);position:relative;cursor:pointer} .product-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-hover)} .product-img-wrap{position:relative;overflow:hidden;aspect-ratio:1;background:#f0f2f5} .product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease} .product-card:hover .product-img-wrap img{transform:scale(1.08)} .product-badge{position:absolute;top:12px;left:12px;padding:4px 11px;border-radius:50px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;z-index:2} .badge-sale{background:var(--accent);color:var(--white)} .badge-new{background:var(--green);color:var(--white)} .badge-hit{background:var(--yellow);color:var(--white);animation:pulse 2s infinite} .product-colors{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;z-index:2} .color-dot{width:16px;height:16px;border-radius:50%;border:2px solid white;cursor:pointer;transition:var(--transition);box-shadow:0 1px 4px rgba(0,0,0,0.2)} .color-dot:hover{transform:scale(1.4)} .product-card-actions{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(12px);transition:var(--transition);z-index:3} .product-card:hover .product-card-actions{opacity:1;transform:translateX(0)} .action-btn{width:36px;height:36px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 10px rgba(0,0,0,0.14);cursor:pointer;transition:var(--transition)} .action-btn:hover{background:var(--accent);color:var(--white)} .product-info{padding:16px} .product-name{font-size:14.5px;font-weight:700;margin-bottom:5px;color:var(--primary);line-height:1.3} .product-desc{font-size:12.5px;color:var(--text-light);margin-bottom:12px;line-height:1.5} .product-price-row{display:flex;align-items:center;justify-content:space-between;gap:8px} .product-price{font-size:20px;font-weight:800;color:var(--accent)} .product-price-old{font-size:13px;color:var(--text-light);text-decoration:line-through} .add-cart-btn{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:18px;transition:var(--transition);flex-shrink:0;border:none;cursor:pointer} .add-cart-btn:hover{background:var(--accent-dark);transform:scale(1.12) rotate(90deg)} .quick-buy-btn{font-size:12px;color:var(--text-light);text-align:center;margin-top:8px;padding:0;background:none;border:none;cursor:pointer;width:100%;transition:var(--transition)} .quick-buy-btn:hover{color:var(--accent)} /* ===== GRID ===== */ .products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* ===== FORMS ===== */ .form-group{margin-bottom:20px} .form-label{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:7px} .form-control{width:100%;padding:12px 18px;border:2px solid var(--border);border-radius:var(--radius-sm);font-size:14.5px;font-family:inherit;color:var(--text);background:var(--white);transition:var(--transition)} .form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,92,53,0.1)} .form-control::placeholder{color:#bbb} textarea.form-control{resize:vertical;min-height:120px} select.form-control{cursor:pointer} .form-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px} .form-check input[type="checkbox"],.form-check input[type="radio"]{width:18px;height:18px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;margin-top:2px} .form-check label{font-size:13.5px;cursor:pointer;color:var(--text-light);line-height:1.5} .form-check a{color:var(--accent);font-weight:600} /* ===== STARS ===== */ .stars{color:var(--yellow);font-size:15px;display:flex;gap:2px} .rating-text{font-size:13px;color:var(--text-light);margin-left:6px} /* ===== BREADCRUMB ===== */ .breadcrumb{padding:18px 0;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text-light);flex-wrap:wrap} .breadcrumb a{color:var(--text-light)} .breadcrumb a:hover{color:var(--accent)} .breadcrumb i{font-size:10px;opacity:0.5} /* ===== QUANTITY ===== */ .qty-control{display:flex;align-items:center;gap:0;border:2px solid var(--border);border-radius:50px;overflow:hidden} .qty-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;cursor:pointer;transition:var(--transition);color:var(--text)} .qty-btn:hover{background:var(--accent);color:white} .qty-input{width:48px;text-align:center;font-size:15px;font-weight:700;border:none;outline:none;background:none;font-family:inherit} /* ===== TOAST ===== */ .toast{position:fixed;bottom:28px;right:28px;background:var(--primary);color:var(--white);padding:14px 22px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:10px;transform:translateX(200%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);z-index:99999;box-shadow:var(--shadow-hover)} .toast.show{transform:translateX(0)} .toast-icon{font-size:20px} /* ===== MODAL ===== */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn 0.3s ease} .modal-overlay.open{display:flex} .modal{background:var(--white);border-radius:var(--radius);padding:48px 40px;max-width:480px;width:100%;text-align:center;position:relative;animation:slideUp 0.4s ease} .modal-close{position:absolute;top:16px;right:20px;font-size:24px;cursor:pointer;color:var(--text-light);transition:var(--transition)} .modal-close:hover{color:var(--text)} .modal-icon{font-size:60px;margin-bottom:16px} .modal h3{font-size:24px;margin-bottom:12px;color:var(--primary)} .modal p{color:var(--text-light);margin-bottom:24px;font-size:15px} /* ===== ANIMATIONS ===== */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}} @keyframes slideInLeft{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:translateX(0)}} @keyframes slideInRight{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} @keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}} .animate-fadeIn{animation:fadeIn 0.7s ease both} .animate-slideUp{animation:slideUp 0.7s ease both} .animate-d1{animation-delay:0.1s} .animate-d2{animation-delay:0.2s} .animate-d3{animation-delay:0.3s} .animate-d4{animation-delay:0.4s} .animate-d5{animation-delay:0.5s} .animate-d6{animation-delay:0.6s} /* Scroll reveal */ .reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s ease,transform 0.7s ease} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-left{opacity:0;transform:translateX(-32px);transition:opacity 0.7s ease,transform 0.7s ease} .reveal-left.visible{opacity:1;transform:translateX(0)} .reveal-right{opacity:0;transform:translateX(32px);transition:opacity 0.7s ease,transform 0.7s ease} .reveal-right.visible{opacity:1;transform:translateX(0)} /* Delay variants for stagger */ .reveal.d1,.reveal-left.d1,.reveal-right.d1{transition-delay:0.1s} .reveal.d2,.reveal-left.d2,.reveal-right.d2{transition-delay:0.2s} .reveal.d3,.reveal-left.d3,.reveal-right.d3{transition-delay:0.3s} .reveal.d4,.reveal-left.d4,.reveal-right.d4{transition-delay:0.4s} .reveal.d5,.reveal-left.d5,.reveal-right.d5{transition-delay:0.5s} .reveal.d6,.reveal-left.d6,.reveal-right.d6{transition-delay:0.6s} /* ===== RESPONSIVE ===== */ @media(max-width:1024px){ .products-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:768px){ .section{padding:52px 0} .section-title{margin-bottom:32px} .products-grid{grid-template-columns:repeat(2,1fr);gap:16px} .nav{display:none} .hamburger{display:flex} .phone-link{display:none} .search-bar{display:none} .footer-grid{grid-template-columns:1fr;gap:28px} .footer-bottom{flex-direction:column;text-align:center} } @media(max-width:480px){ .products-grid{grid-template-columns:repeat(2,1fr);gap:12px} .container{padding:0 16px} .btn-lg,.btn-xl{padding:14px 28px;font-size:15px} .product-info{padding:12px} .product-price{font-size:17px} }
BYKUSH — Рюкзаки для школьников | Главная
Доставка по всей России | Пн-Вс: 9:00-21:00
info@bykush.site
8 800 555-35-35 Корзина 0
Рюкзаки №1 для школьников

Рюкзак, который
вдохновляет
учиться

Брендовые школьные рюкзаки для детей от 6 до 16 лет. Эргономичная спинка, прочные материалы, яркие дизайны — всё для комфортного и стильного учебного дня.

Смотреть каталог О нас
3500+ довольных клиентов
120+ моделей рюкзаков
5 ★ средняя оценка
Школьный рюкзак
🎒
Топ продаж 2024
🚀
Быстрая доставка
Листайте вниз
🚚
Быстрая доставка
Доставим рюкзак по всей России за 2-7 дней. Курьером или самовывоз.
🔒
Гарантия качества
12 месяцев гарантии на каждый рюкзак. Возврат в течение 30 дней.
💳
Удобная оплата
Карта, наличные, рассрочка. Оплата при получении — без риска.
🎯
Эргономика
Анатомическая спинка и широкие лямки защитят позвоночник ребёнка.

Выбери свой стиль

Рюкзаки для каждого школьника

Рюкзаки для младших классов
Начальная школа
1–4 класс · 34 модели
 Рюкзаки для средних классов
Средняя школа
5–9 класс · 51 модель
 Рюкзаки для старших классов
Старшая школа
10–11 класс · 28 моделей
 Спортивные рюкзаки
Спортивные
Для секций · 18 моделей

Хиты продаж

Самые популярные модели этого сезона

SmartPack Pro Blue Хит
SmartPack Pro · Синий
Эргономичная спинка, 22 л, светоотражатели
3 490 ₽
4 200 ₽
KidStyle Rainbow Новинка
KidStyle Rainbow · Яркий
Для начальной школы, водоотталкивающий
2 790 ₽
Urban Class Black −20%
Urban Class · Чёрный
Для старшеклассников, USB-порт, 30 л
4 190 ₽
5 240 ₽
Весь каталог

Сезонная распродажа — до −35%

На все коллекции прошлого сезона. Спешите — количество ограничено!

35%
скидка на коллекцию
Выбрать

Отзывы покупателей

Мария К.
Мария К.
12 сентября 2024

Заказала SmartPack Pro для дочери в 3-й класс. Рюкзак просто отличный — лёгкий, вместительный, и дочь в восторге от цвета! Спинка удобная, плечи не тянет. Доставили быстро, упаковка аккуратная.

Алексей П.
Алексей П.
5 октября 2024

Взял Urban Class для сына-старшеклассника. Рюкзак большой, все книжки влезают. USB-зарядка — это вообще находка! Качество материала на уровне, швы прочные. Сын доволен, просит ещё один для спорта.

Ольга С.
Ольга С.
18 октября 2024

Покупала KidStyle Rainbow для первоклассницы. Яркий, лёгкий, все необходимые отделения есть. Дочка прыгала от радости! Заказывала уже второй раз — второй ребёнок пошёл в школу. Магазин надёжный, рекомендую!

Мы в Instagram

Подпишитесь и получите скидку 500 ₽ за отзыв с фото

Подписаться

Готовы к новому учебному году?

Выбирайте рюкзак прямо сейчас и получайте 10% скидку на первый заказ!

Выбрать рюкзак Задать вопрос
🛒
Made on
Tilda