:root {
--accent: #0094ff;
--accent-2: #00c3ff;
--accent-grad: linear-gradient(135deg, #0094ff, #00c3ff);
--bg: #f5f8fc;
--bg-soft: #ffffff;
--text: #1a1d23;
--muted: #6c7480;
--border: #e3e7ee;
--radius-lg: 18px;
--radius-md: 12px;
--radius-pill: 999px;
--shadow-soft: 0 12px 30px rgba(0,0,0,0.05);
--shadow-card: 0 8px 20px rgba(0,0,0,0.04);
--max-width: 1180px;
} body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
background: var(--bg);
color: var(--text);
}
a {
text-decoration: none;
color: inherit;
}
img {
display: block;
max-width: 100%;
} .shell {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: 50px 0;
}
.section-title {
font-size: 28px;
margin-bottom: 20px;
}
.section-subtitle {
font-size: 16px;
color: var(--muted);
max-width: 520px;
margin-bottom: 30px;
line-height: 1.55;
} .btn {
padding: 10px 18px;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
font-size: 14px;
transition: 0.2s;
}
.btn-primary {
background: var(--accent-grad);
color: white;
box-shadow: 0 6px 16px rgba(0,148,255,0.25);
}
.btn-primary:hover {
filter: brightness(0.92);
}
.btn-secondary {
background: #ffffff;
border: 1px solid var(--border);
color: var(--text);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.btn-secondary:hover {
background: #f0f4fa;
} * {
-webkit-tap-highlight-color: transparent;
} button:focus,
a:focus {
outline: none;
}header {
background: rgba(255,255,255,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 20;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 28px;
max-width: 1180px;
margin: 0 auto;
} .logo {
display: flex;
align-items: center;
gap: 10px;
}
.logo img {
width: 34px;
height: 34px;
border-radius: 6px;
object-fit: cover;
} .logo-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.15;
} .logo-line-main {
font-size: 18 px; font-weight: 600;
color: var(--accent);
white-space: nowrap;
} .logo-line-sub {
font-size: 12px;
font-weight: 400;
color: var(--accent);
} .main-nav {
display: flex;
gap: 20px;
font-size: 14px;
color: var(--muted);
}
.main-nav a,
.main-nav .nav-link {
color: var(--muted);
text-decoration: none;
cursor: pointer;
}
.main-nav a:hover,
.main-nav .nav-link:hover {
color: var(--accent);
} .nav-item {
position: relative;
} .nav-link {
color: var(--muted);
text-decoration: none;
cursor: pointer;
}
.nav-link:hover {
color: var(--accent);
} .nav-submenu {
position: absolute;
top: 100%; left: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 0;
min-width: 180px;
display: none;
flex-direction: column;
gap: 4px;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
z-index: 30;
} .nav-submenu a {
padding: 8px 16px;
font-size: 14px;
color: var(--muted);
white-space: nowrap;
}
.nav-submenu a:hover {
background: #f5faff;
color: var(--accent);
} .nav-item:hover .nav-submenu {
display: flex;
} .nav-item:hover .nav-link {
color: var(--accent);
} .header-phone {
font-weight: 600;
font-size: 16px;
color: var(--accent);
white-space: nowrap;
} @media (max-width: 600px) {
.main-nav {
display: none;
} .nav-submenu {
position: static;
border: none;
box-shadow: none;
padding: 0;
}
.nav-submenu a {
padding: 10px 0;
}
} .footer {
background: #fff;
border-top: 1px solid var(--border);
padding: 60px 0 40px;
margin-top: 60px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 14px;
} .footer-logo {
display: flex;
align-items: center;
gap: 12px;
}
.footer-logo img {
width: 34px;
height: 34px;
border-radius: 6px;
object-fit: cover;
}
.footer-logo span {
font-size: 18px;
font-weight: 600;
color: var(--accent);
} .footer-text {
font-size: 15px;
color: var(--muted);
line-height: 1.55;
margin: 0;
} .footer-heading {
font-weight: 600;
margin-bottom: 6px;
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-link {
font-size: 15px;
color: var(--muted);
text-decoration: none;
transition: color .2s ease;
}
.footer-link:hover {
color: var(--accent);
} .footer-phone,
.footer-email {
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.footer-worktime,
.footer-address,
.footer-company {
font-size: 15px;
color: var(--muted);
line-height: 1.55;
}
.footer-company {
font-weight: 600;
margin-top: 6px;
} .footer-bottom {
margin-top: 40px;
text-align: center;
font-size: 14px;
color: var(--muted);
} @media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.footer {
padding: 50px 0 30px;
}
}.hero {
padding: 80px 0 60px;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.hero-content {
display: flex;
flex-direction: column;
gap: 22px;
}
.hero-title {
font-size: 38px;
font-weight: 700;
line-height: 1.25;
}
.hero-title span {
color: var(--accent);
}
.hero-subtitle {
font-size: 17px;
color: var(--muted);
line-height: 1.55;
max-width: 520px;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-features {
display: flex;
gap: 26px;
flex-wrap: wrap;
font-size: 14px;
color: var(--muted);
}
.hero-feature {
background: #f4f8ff;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--border);
}
.hero-image img {
width: 100%;
height: auto;
object-fit: contain;
box-shadow: none;
border-radius: 0;
background: transparent;
} @media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content {
align-items: center;
}
.hero-subtitle {
max-width: none;
}
.hero-features {
justify-content: center;
}
.hero-image {
display: none;
}
}.catalog-v2 {
--catalog-gap: 22px;
--catalog-card-min-height: 120px; --catalog-card-radius: 14px;
--catalog-card-padding-desktop: 14px;
--catalog-card-padding-mobile: 12px;
--catalog-icon-size: 44px; --catalog-accent: var(--accent, #0094ff);
box-sizing: border-box;
} .catalog-v2 .catalog-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--catalog-gap);
align-items: stretch;
width: 100%;
} .catalog-v2 .catalog-card {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--catalog-card-radius);
padding: var(--catalog-card-padding-desktop);
display: flex !important;
flex-direction: column;
justify-content: center; align-items: center;
gap: 12px;
min-height: var(--catalog-card-min-height);
box-shadow: 0 4px 12px rgba(0,0,0,0.04);
transition: transform .18s ease, box-shadow .18s ease;
text-align: center;
box-sizing: border-box;
overflow: hidden;
}
.catalog-v2 .catalog-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
} .catalog-v2 .catalog-card__inner {
display: flex;
flex-direction: column;
justify-content: center; align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
} .catalog-v2 .catalog-card__icon {
width: var(--catalog-icon-size);
height: var(--catalog-icon-size);
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
box-sizing: border-box;
--icon-y: 0px; transform: translateY(var(--icon-y));
}
.catalog-v2 .catalog-card__icon svg {
width: 100%;
height: 100%;
display: block;
} .catalog-v2 .catalog-title {
font-size: 16px;
font-weight: 600;
margin: 0;
line-height: 1.12;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 0;
color: var(--text);
word-break: break-word;
} .catalog-v2 .catalog-card__thumb {
width: 100%;
max-width: 120px;
height: 120px;
display: block;
border-radius: 8px;
overflow: hidden;
background: #f5f7fa;
flex: 0 0 auto;
}
.catalog-v2 .catalog-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .catalog-v2 .btn {
width: auto !important;
} @media (max-width: 1200px) {
.catalog-v2 .catalog-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.catalog-v2 .catalog-grid {
grid-template-columns: repeat(2, 1fr);
}
.catalog-v2 .catalog-card {
min-height: 140px;
padding: 14px;
}
.catalog-v2 .catalog-card__thumb {
max-width: 100px;
height: 100px;
}
} @media (max-width: 700px) {
.catalog-v2 .catalog-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.catalog-v2 .catalog-card {
padding: 0;
text-align: left;
}
.catalog-v2 .catalog-card__inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 12px;
}
.catalog-v2 .catalog-card__icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
display: flex;
align-items: center;
justify-content: center;
}
.catalog-v2 .catalog-card__icon svg {
width: 100%;
height: 100%;
}
.catalog-v2 .catalog-title {
margin: 0;
font-size: 17px;
line-height: 1.25;
}
}#material-benefits .grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
} @media (max-width: 900px) {
#material-benefits .grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
#material-benefits .grid-4 {
grid-template-columns: 1fr;
}
} #material-benefits .card {
background: #fff;
border: 1px solid var(--border);
border-radius: 18px;
padding: 26px;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform .2s ease, box-shadow .2s ease;
}
#material-benefits .card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,0.08);
} #material-benefits .card img {
width: 48px;
height: 48px;
object-fit: contain;
margin-bottom: 14px;
} #material-benefits .card-title {
font-weight: 600;
margin-bottom: 6px;
font-size: 16px;
} #material-benefits .card-body {
font-size: 15px;
color: var(--muted);
line-height: 1.55;
}.about-subtitle {
max-width: 620px;
margin-bottom: 32px;
font-size: 16px;
color: var(--muted);
line-height: 1.55;
} .about-list {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
} .about-item {
display: flex;
align-items: flex-start;
gap: 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 22px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
transition: transform .2s ease, box-shadow .2s ease;
}
.about-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
} .about-icon svg {
width: 42px;
height: 42px;
stroke: var(--accent);
} .about-content h3 {
font-size: 17px;
font-weight: 600;
margin: 0 0 4px 0;
}
.about-content p {
font-size: 15px;
color: var(--muted);
line-height: 1.55;
margin: 0;
} @media (min-width: 600px) {
.about-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.about-list {
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
}.category-section {
margin-bottom: 60px;
} .category-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px 0;
} .category-text {
font-size: 16px;
color: var(--muted);
line-height: 1.55;
margin: 0 0 12px 0;
} .category-specs {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 15px;
color: var(--muted);
} .category-card,
.profiles-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 26px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
gap: 26px;
box-sizing: border-box;
} .profiles-top {
display: flex;
justify-content: space-between;
gap: 32px;
align-items: flex-start;
width: 100%;
} .profiles-content,
.category-content {
width: 55%;
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
flex: 1 1 auto;
} .profiles-image,
.category-image {
width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
} .profiles-content .btn,
.category-content .btn {
align-self: flex-start;
width: auto !important;
display: inline-flex;
margin-top: auto;
} .slider {
width: 100%;
max-width: 260px;
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
.slider input {
display: none;
}
.slides {
width: 100%;
height: 260px;
position: relative;
overflow: hidden;
background: #f5f7fa;
border-radius: 10px;
}
.slides img {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity .3s ease;
} #profiles-1:checked ~ .slides .s1,
#profiles-2:checked ~ .slides .s2,
#profiles-3:checked ~ .slides .s3,
#packages-1:checked ~ .slides .s1,
#packages-2:checked ~ .slides .s2,
#packages-3:checked ~ .slides .s3,
#lozhementy-1:checked ~ .slides .s1,
#lozhementy-2:checked ~ .slides .s2,
#lozhementy-3:checked ~ .slides .s3,
#polotno-1:checked ~ .slides .s1,
#polotno-2:checked ~ .slides .s2,
#polotno-3:checked ~ .slides .s3,
#vpe-bags-1:checked ~ .slides .s1,
#vpe-bags-2:checked ~ .slides .s2,
#vpe-bags-3:checked ~ .slides .s3 {
opacity: 1;
} .dots {
margin-top: 12px;
display: flex;
gap: 10px;
}
.dots label {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--border);
cursor: pointer;
transition: background .2s ease;
} #profiles-1:checked ~ .dots .d1,
#profiles-2:checked ~ .dots .d2,
#profiles-3:checked ~ .dots .d3,
#packages-1:checked ~ .dots .d1,
#packages-2:checked ~ .dots .d2,
#packages-3:checked ~ .dots .d3,
#lozhementy-1:checked ~ .dots .d1,
#lozhementy-2:checked ~ .dots .d2,
#lozhementy-3:checked ~ .dots .d3,
#polotno-1:checked ~ .dots .d1,
#polotno-2:checked ~ .dots .d2,
#polotno-3:checked ~ .dots .d3,
#vpe-bags-1:checked ~ .dots .d1,
#vpe-bags-2:checked ~ .dots .d2,
#vpe-bags-3:checked ~ .dots .d3 {
background: var(--accent);
} .profile-sizes {
width: 100%;
}
.profile-sizes-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
}
.profile-sizes-image {
margin-bottom: 12px;
}
.profile-sizes-image img {
max-width: 120px;
height: auto;
}
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sizes-table {
min-width: 900px;
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--muted);
}
.sizes-table th {
text-align: left;
padding: 10px 8px;
font-weight: 600;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.03);
white-space: nowrap;
}
.sizes-table td {
padding: 8px 8px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.sizes-table tbody tr:nth-child(odd) {
background: rgba(0,0,0,0.015);
} @media (max-width: 768px) {
.profiles-top {
flex-direction: column;
gap: 18px;
}
.profiles-content,
.profiles-image {
width: 100%;
}
.category-card,
.profiles-card {
padding: 22px;
}
}#contacts {
margin-bottom: 60px;
} .cta {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
transition: transform .2s ease, box-shadow .2s ease;
}
.cta:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
} .cta-text {
font-size: 17px;
color: var(--text);
line-height: 1.55;
max-width: 620px;
} @media (max-width: 800px) {
.cta {
flex-direction: column;
text-align: center;
padding: 26px;
}
.cta-text {
max-width: none;
}
.cta .btn {
align-self: center; }
}#faq {
margin-bottom: 60px;
} .faq-list {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 30px;
} .faq-item {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.faq-item:hover {
transform: translateY(-3px);
box-shadow: 0 10px 24px rgba(0,0,0,0.06);
} .faq-question {
width: 100%;
background: none;
border: none;
padding: 22px 26px;
font-size: 16px;
font-weight: 600;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--text);
} .faq-icon {
font-size: 20px;
color: var(--accent);
transition: transform 0.25s ease;
} .faq-answer {
max-height: 0;
overflow: hidden;
padding: 0 26px;
font-size: 15px;
color: var(--muted);
line-height: 1.55;
transition: max-height 0.35s ease, padding 0.35s ease;
} .faq-item.active .faq-answer {
max-height: 200px;
padding: 0 26px 22px;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
}