Вода 19 литров
+Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.
+diff --git a/index3.css b/index3.css new file mode 100644 index 00000000..8c50c473 --- /dev/null +++ b/index3.css @@ -0,0 +1,1452 @@ +:root { + --bg: #f4f8ff; + --surface: rgba(255, 255, 255, 0.76); + --surface-solid: #ffffff; + --surface-dark: #0a2b6d; + --text: #123059; + --muted: #5f7496; + --line: rgba(18, 48, 89, 0.12); + --primary: #0d4fd6; + --primary-strong: #08338d; + --accent: #3cc8ff; + --accent-soft: #dbf6ff; + --success: #19a76f; + --warning: #ffd166; + --shadow: 0 30px 80px rgba(10, 43, 109, 0.16); + --radius-xl: 32px; + --radius-lg: 24px; + --radius-md: 18px; + --radius-sm: 14px; + --container: 1180px; + } + + * { + box-sizing: border-box; + } + + html { + scroll-behavior: smooth; + } + + body { + margin: 0; + font-family: "Manrope", sans-serif; + color: var(--text); + background: + radial-gradient(circle at top left, rgba(60, 200, 255, 0.16), transparent 32%), + radial-gradient(circle at 85% 15%, rgba(13, 79, 214, 0.18), transparent 22%), + linear-gradient(180deg, #eef6ff 0%, #f9fcff 48%, #eef5ff 100%); + min-width: 320px; + } + + body.menu-open, + body.modal-open { + overflow: hidden; + } + + body::before { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background-image: + linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); + background-size: 24px 24px; + opacity: 0.45; + mix-blend-mode: soft-light; + } + + img { + max-width: 100%; + display: block; + } + + a { + color: inherit; + text-decoration: none; + } + + button, + input, + textarea, + select { + font: inherit; + } + + button { + cursor: pointer; + border: 0; + background: none; + color: inherit; + } + + .container { + width: min(var(--container), calc(100% - 32px)); + margin: 0 auto; + } + + .section { + padding: 32px 0 0; + } + + .eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 8px 14px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.65); + border: 1px solid rgba(255, 255, 255, 0.75); + box-shadow: 0 10px 30px rgba(13, 79, 214, 0.08); + font-size: 13px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--primary-strong); + } + + .eyebrow::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: linear-gradient(135deg, var(--accent), var(--primary)); + box-shadow: 0 0 0 6px rgba(60, 200, 255, 0.16); + } + + .section-head { + display: flex; + align-items: end; + justify-content: space-between; + gap: 24px; + margin-bottom: 28px; + } + + .section-title { + margin: 14px 0 0; + font-family: "Manrope", sans-serif; + font-size: clamp(30px, 4.6vw, 56px); + line-height: 1.02; + letter-spacing: -0.03em; + } + + .section-copy { + max-width: 560px; + color: var(--muted); + line-height: 1.7; + } + + .site-header { + position: sticky; + top: 0; + z-index: 30; + backdrop-filter: blur(20px); + background: rgba(244, 248, 255, 0.74); + border-bottom: 1px solid rgba(18, 48, 89, 0.08); + } + + .header-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + min-height: 82px; + } + + .brand { + display: flex; + align-items: center; + gap: 14px; + font-weight: 800; + } + + .brand-mark { + width: 48px; + height: 48px; + display: grid; + place-items: center; + border-radius: 18px; + background: linear-gradient(145deg, var(--accent), var(--primary)); + color: #fff; + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24); + } + + .brand-text strong { + display: block; + font-size: 16px; + } + + .brand-text span { + font-size: 12px; + color: var(--muted); + } + + .nav { + display: flex; + align-items: center; + gap: 22px; + font-size: 14px; + font-weight: 700; + color: var(--muted); + } + + .nav a:hover, + .nav a:focus-visible { + color: var(--primary-strong); + } + + .header-actions { + display: flex; + align-items: center; + gap: 12px; + } + + .cart-button, + .header-phone, + .button, + .ghost-button, + .mobile-toggle, + .chip, + .toggle-button, + .mini-button { + transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease; + } + + .header-phone { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 12px 18px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(18, 48, 89, 0.1); + font-weight: 800; + box-shadow: 0 10px 30px rgba(10, 43, 109, 0.08); + } + + .cart-button { + position: relative; + display: inline-flex; + align-items: center; + gap: 10px; + padding: 12px 16px; + border-radius: 999px; + color: #fff; + background: linear-gradient(135deg, var(--primary-strong), var(--primary)); + box-shadow: 0 16px 30px rgba(13, 79, 214, 0.25); + font-weight: 800; + } + + .cart-count { + min-width: 22px; + height: 22px; + display: inline-grid; + place-items: center; + border-radius: 999px; + background: #fff; + color: var(--primary-strong); + font-size: 12px; + } + + .mobile-toggle { + display: none; + width: 46px; + height: 46px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.84); + border: 1px solid rgba(18, 48, 89, 0.1); + box-shadow: 0 10px 30px rgba(10, 43, 109, 0.08); + } + + .mobile-panel { + display: none; + padding: 0 0 18px; + } + + .mobile-card { + display: grid; + gap: 14px; + padding: 18px; + border-radius: 24px; + background: rgba(255, 255, 255, 0.88); + border: 1px solid rgba(18, 48, 89, 0.08); + box-shadow: var(--shadow); + } + + .mobile-nav { + display: grid; + gap: 10px; + } + + .mobile-nav a, + .mobile-card .header-phone, + .mobile-card .cart-button { + justify-content: center; + } + + .hero { + position: relative; + padding: 34px 0 0; + overflow: hidden; + } + + .hero-grid { + display: grid; + grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr); + gap: 28px; + align-items: stretch; + } + + .hero-copy, + .hero-panel, + .catalog-card, + .glass-card, + .step-card, + .segment-card, + .promo-card, + .review-card, + .contact-card, + .faq-item, + .footer-card { + border-radius: var(--radius-xl); + background: var(--surface); + border: 1px solid rgba(255, 255, 255, 0.72); + backdrop-filter: blur(22px); + box-shadow: var(--shadow); + } + + .hero-copy { + position: relative; + padding: clamp(28px, 4vw, 46px); + overflow: hidden; + isolation: isolate; + } + + .hero-copy::before { + content: ""; + position: absolute; + inset: auto auto -24% -10%; + width: 64%; + height: 54%; + border-radius: 50%; + background: radial-gradient(circle, rgba(60, 200, 255, 0.22), transparent 62%); + z-index: -1; + } + + .hero-copy::after { + content: ""; + position: absolute; + top: -18%; + right: -8%; + width: 280px; + height: 280px; + border-radius: 50%; + background: radial-gradient(circle, rgba(13, 79, 214, 0.16), transparent 58%); + z-index: -1; + } + + .hero-title { + margin: 18px 0 18px; + font-family: "Manrope", sans-serif; + font-size: clamp(38px, 7vw, 74px); + line-height: 0.98; + letter-spacing: -0.05em; + max-width: 12ch; + } + + .hero-title span { + color: var(--primary); + } + + .hero-text { + max-width: 640px; + color: var(--muted); + font-size: clamp(16px, 2vw, 18px); + line-height: 1.72; + } + + .hero-toggle { + display: inline-flex; + flex-wrap: wrap; + gap: 10px; + margin: 28px 0 18px; + padding: 8px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(18, 48, 89, 0.08); + } + + .toggle-button { + padding: 14px 18px; + border-radius: 999px; + font-weight: 800; + color: var(--muted); + } + + .toggle-button.active { + background: linear-gradient(135deg, var(--primary-strong), var(--primary)); + color: #fff; + box-shadow: 0 16px 30px rgba(13, 79, 214, 0.22); + } + + .hero-actions { + display: flex; + flex-wrap: wrap; + gap: 14px; + margin-top: 22px; + } + + .button, + .ghost-button, + .mini-button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + border-radius: 999px; + font-weight: 800; + } + + .button { + padding: 16px 22px; + color: #fff; + background: linear-gradient(135deg, var(--primary-strong), var(--primary)); + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.26); + } + + .ghost-button { + padding: 16px 22px; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(18, 48, 89, 0.1); + color: var(--primary-strong); + } + + .mini-button { + padding: 13px 18px; + background: linear-gradient(135deg, var(--primary), #2d78ff); + color: #fff; + box-shadow: 0 14px 28px rgba(13, 79, 214, 0.22); + } + + .button:hover, + .ghost-button:hover, + .mini-button:hover, + .cart-button:hover, + .header-phone:hover, + .chip:hover, + .mobile-toggle:hover { + transform: translateY(-2px); + } + + .hero-stats { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 30px; + } + + .stat-card { + padding: 16px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.74); + border: 1px solid rgba(18, 48, 89, 0.08); + } + + .stat-card strong { + display: block; + font-size: 24px; + color: var(--primary-strong); + } + + .stat-card span { + display: block; + margin-top: 4px; + color: var(--muted); + font-size: 14px; + line-height: 1.5; + } + + .hero-panel { + display: grid; + gap: 18px; + padding: 22px; + background: linear-gradient(180deg, rgba(9, 54, 145, 0.94), rgba(10, 43, 109, 0.97)); + color: #fff; + overflow: hidden; + } + + .panel-top { + display: flex; + justify-content: space-between; + gap: 18px; + align-items: start; + } + + .signal-pill { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.12); + font-size: 13px; + font-weight: 800; + letter-spacing: 0.08em; + text-transform: uppercase; + } + + .signal-pill::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: #6ff7ca; + box-shadow: 0 0 0 6px rgba(111, 247, 202, 0.14); + } + + .hero-panel h2 { + margin: 14px 0 10px; + font-family: "Manrope", sans-serif; + font-size: clamp(28px, 4.2vw, 42px); + line-height: 1.08; + letter-spacing: -0.03em; + } + + .hero-panel p { + margin: 0; + color: rgba(255, 255, 255, 0.8); + line-height: 1.72; + } + + .route-map { + position: relative; + min-height: 280px; + padding: 18px; + border-radius: 28px; + background: + radial-gradient(circle at 20% 20%, rgba(60, 200, 255, 0.28), transparent 22%), + radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.18), transparent 20%), + linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); + border: 1px solid rgba(255, 255, 255, 0.1); + overflow: hidden; + } + + .route-map::before, + .route-map::after { + content: ""; + position: absolute; + inset: 18px; + border-radius: 22px; + border: 1px dashed rgba(255, 255, 255, 0.14); + } + + .route-map::after { + inset: 44px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.08); + } + + .map-line { + position: absolute; + inset: auto 24px 50px 24px; + height: 160px; + border-radius: 120px; + border: 2px solid rgba(111, 247, 202, 0.45); + border-color: rgba(111, 247, 202, 0.45) transparent transparent transparent; + transform: rotate(-8deg); + } + + .map-chip, + .delivery-chip { + position: absolute; + padding: 10px 12px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(12px); + font-size: 13px; + font-weight: 800; + box-shadow: 0 12px 20px rgba(4, 18, 51, 0.2); + } + + .map-chip.one { top: 32px; left: 24px; } + .map-chip.two { top: 112px; right: 34px; } + .map-chip.three { bottom: 34px; left: 78px; } + .delivery-chip { bottom: 28px; right: 24px; color: #062764; background: rgba(111, 247, 202, 0.88); } + + .hero-notes { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + } + + .hero-note { + padding: 16px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.08); + } + + .hero-note strong { + display: block; + margin-bottom: 6px; + font-size: 15px; + } + + .hero-note span { + color: rgba(255, 255, 255, 0.74); + font-size: 14px; + line-height: 1.6; + } + + .ticker { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; + margin-top: 22px; + } + + .ticker-item { + padding: 16px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(18, 48, 89, 0.08); + text-align: center; + } + + .ticker-item strong { + display: block; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--primary-strong); + margin-bottom: 8px; + } + + .ticker-item span { + color: var(--muted); + font-weight: 700; + font-size: 14px; + } + + .catalog-grid, + .delivery-grid, + .steps-grid, + .segments-grid, + .promo-grid, + .reviews-grid, + .contacts-grid, + .footer-grid { + display: grid; + gap: 18px; + } + + .catalog-grid { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .catalog-card { + padding: 22px; + display: flex; + flex-direction: column; + gap: 14px; + min-height: 100%; + } + + .catalog-icon { + width: 62px; + height: 62px; + display: grid; + place-items: center; + border-radius: 22px; + background: linear-gradient(135deg, rgba(60, 200, 255, 0.2), rgba(13, 79, 214, 0.12)); + color: var(--primary-strong); + } + + .catalog-card h3, + .segment-card h3, + .promo-card h3, + .contact-card h3, + .glass-card h3 { + margin: 0; + font-size: 22px; + line-height: 1.2; + } + + .catalog-card p, + .segment-card p, + .promo-card p, + .contact-card p, + .glass-card p, + .review-card p, + .faq-answer, + .about-copy p { + margin: 0; + color: var(--muted); + line-height: 1.7; + } + + .tag-row, + .chip-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + } + +.chip { + padding: 10px 14px; + border-radius: 999px; + border: 1px solid rgba(18, 48, 89, 0.08); + background: rgba(255, 255, 255, 0.7); + font-size: 13px; + font-weight: 800; + color: var(--primary-strong); + } + + .chip-row-spaced { + margin: 18px 0 20px; + } + + .card-price { + display: flex; + align-items: baseline; + gap: 8px; + margin-top: auto; + } + + .card-price strong { + font-size: 32px; + color: var(--primary-strong); + line-height: 1; + } + + .card-price span { + color: var(--muted); + font-size: 14px; + } + + .featured-grid, + .about-grid { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); + gap: 18px; + } + + .glass-card { + padding: 28px; + } + + .product-table { + display: grid; + gap: 14px; + margin-top: 18px; + } + + .product-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto auto; + gap: 14px; + align-items: center; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(18, 48, 89, 0.08); + } + + .product-row strong { + display: block; + margin-bottom: 4px; + font-size: 18px; + } + + .product-row span { + color: var(--muted); + font-size: 14px; + } + + .product-row .price { + font-size: 30px; + font-weight: 800; + color: var(--primary-strong); + white-space: nowrap; + } + + .delivery-grid, + .segments-grid, + .contacts-grid, + .footer-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .delivery-map, + .about-visual, + .map-placeholder { + position: relative; + min-height: 100%; + overflow: hidden; + } + + .delivery-map { + padding: 28px; + background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92)); + color: #fff; + } + + .zone-card { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.08); + font-size: 14px; + font-weight: 700; + } + + .zones { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 18px; + } + + .delivery-wave { + position: absolute; + width: 180%; + height: 180px; + left: -30%; + bottom: 40px; + border-radius: 50%; + border: 2px solid rgba(111, 247, 202, 0.3); + border-color: rgba(111, 247, 202, 0.3) transparent transparent transparent; + } + + .delivery-pins { + position: relative; + min-height: 300px; + margin-top: 20px; + border-radius: 24px; + background: rgba(255, 255, 255, 0.08); + border: 1px solid rgba(255, 255, 255, 0.08); + overflow: hidden; + } + +.delivery-pins::before { + content: ""; + position: absolute; + inset: 18px; + border-radius: 20px; + border: 1px dashed rgba(255, 255, 255, 0.18); + } + + .eyebrow-inverse { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.16); + color: #fff; + } + + .section-heading-compact { + margin: 16px 0 0; + line-height: 1.1; + } + + .section-heading-delivery { + font-size: 30px; + } + + .section-heading-map { + font-size: 28px; + max-width: 12ch; + } + + .pin { + position: absolute; + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.14); + font-size: 13px; + font-weight: 800; + backdrop-filter: blur(10px); + } + + .pin::before { + content: ""; + width: 10px; + height: 10px; + border-radius: 50%; + background: #6ff7ca; + } + + .pin.one { top: 36px; left: 28px; } + .pin.two { top: 96px; right: 22px; } + .pin.three { bottom: 84px; left: 54px; } + .pin.four { bottom: 24px; right: 54px; } + + .steps-grid, + .promo-grid, + .reviews-grid { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .step-card, + .promo-card, + .review-card { + padding: 24px; + } + + .step-number { + width: 52px; + height: 52px; + display: grid; + place-items: center; + margin-bottom: 18px; + border-radius: 18px; + background: linear-gradient(135deg, rgba(60, 200, 255, 0.26), rgba(13, 79, 214, 0.18)); + color: var(--primary-strong); + font-weight: 800; + font-size: 20px; + } + + .segment-card, + .contact-card, + .footer-card { + padding: 28px; + } + + .segment-card.featured { + background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92)); + color: #fff; + } + + .segment-card.featured p, + .segment-card.featured li, + .segment-card.featured .segment-meta { + color: rgba(255, 255, 255, 0.82); + } + + .segment-list, + .contact-list, + .footer-links, + .footer-legal { + display: grid; + gap: 12px; + margin: 18px 0 0; + padding: 0; + list-style: none; + } + + .segment-meta { + font-size: 14px; + color: var(--muted); + } + + .promo-card.highlight { + background: linear-gradient(135deg, rgba(255, 209, 102, 0.34), rgba(255, 255, 255, 0.9)); + } + + .faq-list { + display: grid; + gap: 12px; + } + + .faq-item { + padding: 10px; + } + + .faq-question { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 14px; + padding: 16px 18px; + text-align: left; + border-radius: 20px; + font-weight: 800; + } + + .faq-question span:last-child { + width: 34px; + height: 34px; + display: grid; + place-items: center; + border-radius: 12px; + background: rgba(13, 79, 214, 0.08); + color: var(--primary-strong); + flex-shrink: 0; + } + + .faq-item.open .faq-question span:last-child { + background: rgba(13, 79, 214, 0.14); + transform: rotate(45deg); + } + + .faq-answer { + max-height: 0; + overflow: hidden; + padding: 0 18px; + transition: max-height 0.28s ease, padding 0.28s ease; + } + + .faq-item.open .faq-answer { + max-height: 180px; + padding: 0 18px 16px; + } + +.about-visual { + min-height: 420px; + padding: 28px; + background: linear-gradient(180deg, rgba(219, 246, 255, 0.74), rgba(255, 255, 255, 0.9)); + } + + .about-copy-secondary { + margin-top: 16px; + } + + .quality-stack { + position: absolute; + inset: auto 28px 28px 28px; + display: grid; + gap: 12px; + } + + .quality-card { + padding: 16px 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(18, 48, 89, 0.08); + box-shadow: 0 16px 28px rgba(10, 43, 109, 0.12); + } + + .droplet { + position: absolute; + top: 38px; + right: 38px; + width: 180px; + aspect-ratio: 0.84; + border-radius: 60% 60% 70% 70% / 80% 80% 40% 40%; + background: linear-gradient(180deg, rgba(60, 200, 255, 0.52), rgba(13, 79, 214, 0.3)); + transform: rotate(18deg); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), 0 30px 50px rgba(13, 79, 214, 0.16); + } + + .droplet::before { + content: ""; + position: absolute; + inset: 18px 40px 44px 30px; + border-radius: 60% 60% 70% 70% / 80% 80% 40% 40%; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), transparent); + opacity: 0.58; + } + + .review-card strong { + display: block; + margin-bottom: 10px; + font-size: 18px; + } + +.review-meta { + margin-top: 16px; + font-size: 14px; + color: var(--muted); + font-weight: 700; + } + + .hero-actions-spaced { + margin-top: 22px; + } + + .map-placeholder { + min-height: 320px; + padding: 24px; + border-radius: var(--radius-xl); + background: linear-gradient(180deg, rgba(8, 51, 141, 0.96), rgba(11, 67, 175, 0.92)); + color: #fff; + box-shadow: var(--shadow); + overflow: hidden; + } + + .map-placeholder::before, + .map-placeholder::after { + content: ""; + position: absolute; + inset: 26px; + border-radius: 24px; + border: 1px dashed rgba(255, 255, 255, 0.16); + } + + .map-placeholder::after { + inset: 56px; + border-style: solid; + border-color: rgba(255, 255, 255, 0.08); + } + + .map-note { + position: absolute; + padding: 10px 12px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.08); + font-size: 13px; + font-weight: 800; + } + + .map-note.a { top: 42px; left: 30px; } + .map-note.b { top: 120px; right: 28px; } + .map-note.c { bottom: 82px; left: 80px; } +.map-note.d { bottom: 30px; right: 44px; } + + .map-copy { + max-width: 320px; + color: rgba(255, 255, 255, 0.78); + line-height: 1.7; + } + + .contact-form { + display: grid; + gap: 12px; + margin-top: 18px; + } + + .field { + width: 100%; + padding: 16px 18px; + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.1); + background: rgba(255, 255, 255, 0.82); + color: var(--text); + outline: none; + } + + .field:focus { + border-color: rgba(13, 79, 214, 0.4); + box-shadow: 0 0 0 4px rgba(13, 79, 214, 0.08); + } + + textarea.field { + min-height: 120px; + resize: vertical; + } + + .contact-list li, + .footer-links a, + .footer-legal a { + color: var(--muted); + } + + .footer { + padding: 32px 0 42px; + } + + .footer-grid { + align-items: start; + } + +.footer-bottom { + display: flex; + justify-content: space-between; + gap: 20px; + align-items: center; + margin-top: 18px; + color: var(--muted); + font-size: 14px; + } + + .footer-description { + margin: 20px 0 0; + color: var(--muted); + line-height: 1.7; + } + + .cart-drawer, + .modal-backdrop { + position: fixed; + inset: 0; + z-index: 60; + pointer-events: none; + opacity: 0; + transition: opacity 0.24s ease; + } + + .cart-drawer.open, + .modal-backdrop.open { + pointer-events: auto; + opacity: 1; + } + + .cart-drawer::before, + .modal-backdrop::before { + content: ""; + position: absolute; + inset: 0; + background: rgba(3, 17, 45, 0.42); + backdrop-filter: blur(10px); + } + + .cart-panel, + .modal-card { + position: absolute; + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(255, 255, 255, 0.82); + box-shadow: var(--shadow); + backdrop-filter: blur(24px); + } + + .cart-panel { + top: 0; + right: 0; + width: min(440px, 100%); + height: 100%; + padding: 22px; + display: grid; + grid-template-rows: auto auto 1fr auto; + gap: 16px; + transform: translateX(100%); + transition: transform 0.28s ease; + } + + .cart-drawer.open .cart-panel { + transform: translateX(0); + } + + .modal-card { + top: 50%; + left: 50%; + width: min(560px, calc(100% - 24px)); + padding: 24px; + border-radius: 28px; + transform: translate(-50%, -50%) scale(0.96); + transition: transform 0.24s ease; + } + + .modal-backdrop.open .modal-card { + transform: translate(-50%, -50%) scale(1); + } + + .drawer-head, + .modal-head { + display: flex; + justify-content: space-between; + gap: 18px; + align-items: start; + } + +.drawer-head h3, + .modal-head h3 { + margin: 0; + font-size: 28px; + line-height: 1.1; + } + + .dialog-copy { + margin: 8px 0 0; + color: var(--muted); + } + + .close-button { + width: 42px; + height: 42px; + display: grid; + place-items: center; + border-radius: 14px; + background: rgba(13, 79, 214, 0.08); + color: var(--primary-strong); + font-size: 18px; + font-weight: 800; + } + + .cart-list { + display: grid; + align-content: start; + gap: 12px; + overflow: auto; + padding-right: 4px; + } + + .cart-item { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 14px; + padding: 16px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.76); + border: 1px solid rgba(18, 48, 89, 0.08); + } + + .cart-item strong { + display: block; + margin-bottom: 6px; + } + + .cart-item span { + color: var(--muted); + font-size: 14px; + } + + .cart-item button { + justify-self: end; + color: #d53b5c; + font-weight: 800; + } + + .cart-summary { + display: grid; + gap: 12px; + padding: 18px; + border-radius: 22px; + background: linear-gradient(135deg, rgba(13, 79, 214, 0.08), rgba(60, 200, 255, 0.12)); + border: 1px solid rgba(18, 48, 89, 0.08); + } + + .summary-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + font-weight: 700; + } + + .summary-row strong { + font-size: 28px; + color: var(--primary-strong); + } + + .empty-state { + padding: 20px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px dashed rgba(18, 48, 89, 0.14); + text-align: center; + color: var(--muted); + line-height: 1.7; + } + + .success-note { + display: none; + margin-top: 14px; + padding: 14px 16px; + border-radius: 16px; + background: rgba(25, 167, 111, 0.12); + color: #0d6d49; + font-weight: 700; + } + + .success-note.visible { + display: block; + } + + .reveal { + opacity: 0; + transform: translateY(28px); + animation: rise 0.8s ease forwards; + } + + .reveal-delay-1 { animation-delay: 0.08s; } + .reveal-delay-2 { animation-delay: 0.16s; } + .reveal-delay-3 { animation-delay: 0.24s; } + .reveal-delay-4 { animation-delay: 0.32s; } + + @keyframes rise { + to { + opacity: 1; + transform: translateY(0); + } + } + + @media (max-width: 1120px) { + .catalog-grid, + .steps-grid, + .promo-grid, + .reviews-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .hero-grid, + .featured-grid, + .about-grid { + grid-template-columns: 1fr; + } + + .ticker { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + @media (max-width: 820px) { + .nav, + .header-actions .header-phone, + .header-actions .cart-button { + display: none; + } + + .mobile-toggle, + .mobile-panel.active { + display: block; + } + + .delivery-grid, + .segments-grid, + .contacts-grid, + .footer-grid, + .hero-notes, + .hero-stats { + grid-template-columns: 1fr; + } + + .section-head, + .footer-bottom, + .product-row { + grid-template-columns: 1fr; + display: grid; + } + + .product-row { + justify-items: start; + } + } + + @media (max-width: 640px) { + .container { + width: min(var(--container), calc(100% - 20px)); + } + + .hero, + .section, + .footer { + padding-top: 22px; + } + + .catalog-grid, + .steps-grid, + .promo-grid, + .reviews-grid, + .ticker { + grid-template-columns: 1fr; + } + + .hero-toggle { + width: 100%; + } + + .toggle-button, + .button, + .ghost-button, + .mini-button { + width: 100%; + } + + .hero-actions { + display: grid; + } + + .panel-top, + .footer-bottom { + flex-direction: column; + align-items: start; + } + } diff --git a/index3.html b/index3.html new file mode 100644 index 00000000..d5101213 --- /dev/null +++ b/index3.html @@ -0,0 +1,750 @@ + + +
+ + +Артезианская вода 19 литров с доставкой на дом и в офис. Привозим по Гагаринскому, Ленинскому, Нахимовскому и Балаклавскому районам, помогаем с возвратной тарой и держим понятные цены без скрытых доплат.
+ +Каталог собран под ежедневные бытовые и коммерческие задачи: от крупной бутыли 19 литров для кулера до компактной питьевой воды для дома, зала, кафе и переговорных.
+Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.
+Удобный домашний формат для кухни, поездок и дачи. Легко хранить, просто переносить.
+Для тренировок, поездок, мероприятий и ежедневного запаса питьевой воды дома или на работе.
+Освежающий вариант для гостей, кафе и тех, кто предпочитает яркий минеральный вкус.
+Соберите микс под привычки семьи или офиса: мягкая вода на каждый день и газированная к столу.
+Если вы впервые выбираете воду с доставкой в Севастополе, начните с этих комплектов: они закрывают базовые домашние и офисные сценарии без лишних затрат.
+Артезианская вода для кулера и повседневного потребления. Подходит для дома, офиса, салонов, фитнес-клубов, медицинских кабинетов и небольших кафе.
+ +Мы заранее резервируем окна доставки, напоминаем об окончании запаса воды и подбираем график под вашу семью или рабочий день команды. Такой сервис особенно важен, когда вода нужна без срывов и лишних звонков.
+Привозим заказы в удобные интервалы и заранее подтверждаем маршрут. Для локального SEO мы естественно указываем районы, в которых чаще всего принимаем заявки.
+Процесс специально сделан коротким и понятным: вы выбираете подходящую воду, оформляете заявку и получаете доставку в согласованное окно.
+Определите нужный объем: вода 19 литров, 5 литров, малые бутылки, минеральная или газированная вода.
+Соберите заказ прямо на сайте и проверьте итоговую сумму до подтверждения.
+Оставьте телефон и адрес в Севастополе, а мы уточним время и детали по таре.
+Курьер привезет воду, поможет с выгрузкой и при необходимости заберет пустые бутыли.
+Мы разделили предложения, чтобы сразу показать преимущества для семей и для компаний: частота, объем, документы, регулярность и удобство повторных поставок.
+Подходит для семей, молодых родителей, пожилых клиентов и тех, кто не хочет тратить время на покупку воды в магазине.
+Офисам, салонам, кафе, фитнес-клубам и студиям нужен предсказуемый сервис. Мы строим график так, чтобы запас воды не заканчивался в рабочие часы.
+Промо-блоки усиливают конверсию: первый заказ снижает барьер входа, а автодоставка делает повторные продажи естественными и предсказуемыми.
+Получите скидку 10% на первый заказ воды 19 литров с доставкой в Севастополе. Отличный способ попробовать сервис без риска.
+Настройте регулярный график: раз в 3 дня, неделю или по вашему потреблению. Мы напомним и приедем вовремя.
+При заказе стартового комплекта для дома дарим механическую помпу, чтобы пользоваться 19-литровой бутылью было проще.
+Для корпоративных клиентов действует персональная цена при регулярном объеме и закрепленном графике поставок.
+SEO-блок с реальными вопросами помогает пользователям быстро снять возражения и усиливает релевантность по коммерческим запросам.
+Этот блок отвечает на главный вопрос о доверии: откуда берется вода, как она обрабатывается, кто следит за качеством и почему ей можно доверять каждый день.
+Источник воды - артезианский горизонт с защищенной зоной забора. После подъема вода проходит фильтрацию, проверку минерализации и санитарный контроль перед розливом. Особое внимание уделяем чистоте тары и логистике, потому что вкус и безопасность зависят не только от источника, но и от дисциплины на каждом этапе.
+Для клиентов доступны сертификаты качества, а для офисов и коммерческих объектов мы предлагаем стабильные поставки с прогнозируемым временем прибытия. Поэтому доставка воды в офис или домой остается одинаково надежной в любой сезон.
+Натуральные отзывы работают сильнее абстрактных обещаний. Мы добавили разные сценарии: дом, офис и коммерческие объекты.
+Заказываем воду 19 литров домой в Гагаринский район. Курьер всегда заранее звонит, поднимает бутыли и забирает пустые. Удобно, что не нужно снова объяснять адрес.
+ +У нас небольшая команда, вода уходит быстро. С автодоставкой больше не вспоминаем в последний момент, что кулер пустой. Документы присылают без задержек.
+ +Переходили с другого поставщика и сразу почувствовали разницу. Вода приятная и для питья, и для чайника. Заказываем и 19 литров, и 5 литров домой.
+ +Для нашего фитнес-клуба важна стабильность. Ребята привозят четко по графику, можно комбинировать большие бутыли и маленькие бутылки для стойки продаж.
+ +Контактный блок завершает воронку: даем телефон, адрес, зону обслуживания и простую форму для заявки прямо на странице.
+Оперативно закрываем центральные и спальные районы, чтобы доставка воды на дом и в офис оставалась быстрой даже в часы пик.
+Не удалось загрузить шаблон страницы `index3.html`.
+