Вода 19 литров
+Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.
+diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css b/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css new file mode 100644 index 00000000..ed888288 --- /dev/null +++ b/wp-content/themes/twentytwentyfour/assets/css/test1-landing.css @@ -0,0 +1,1653 @@ +: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; + } + + a:focus-visible, + button:focus-visible, + input:focus-visible, + textarea:focus-visible, + select:focus-visible { + outline: 3px solid rgba(13, 79, 214, 0.44); + outline-offset: 3px; + } + + 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; + margin-bottom: 15px; + 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: #fff; + 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, 62px); + line-height: 0.98; + letter-spacing: -0.05em; + } + + .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); + } + + .button:focus-visible, + .ghost-button:focus-visible, + .mini-button:focus-visible, + .cart-button:focus-visible, + .mobile-toggle:focus-visible, + .faq-question:focus-visible, + .close-button:focus-visible, + .header-phone:focus-visible, + .mobile-nav a:focus-visible, + .footer-links a:focus-visible, + .footer-legal a:focus-visible { + box-shadow: 0 0 0 4px rgba(13, 79, 214, 0.18); + } + + .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; + } + 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(4, minmax(0, 1fr)); + } + + .catalog-card { + padding: 22px; + display: flex; + flex-direction: column; + align-items: center; + 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-highlights { + display: grid; + gap: 12px; + margin-top: 20px; + } + + .delivery-highlight-card { + padding: 16px; + border-radius: 18px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.14); + } + + .delivery-highlight-card strong { + display: block; + font-size: 16px; + line-height: 1.25; + } + + .delivery-highlight-card span { + display: block; + margin-top: 6px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.55; + font-size: 14px; + } + + .delivery-cta { + width: 100%; + margin-top: 6px; + } + + .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); + display: grid; + gap: 14px; + } + + .map-copy { + max-width: 56ch; + color: rgba(255, 255, 255, 0.78); + line-height: 1.7; + } + + .contact-fast-facts { + display: grid; + gap: 10px; + } + + .contact-fact-card { + padding: 14px; + border-radius: 16px; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.14); + } + + .contact-fact-card strong { + display: block; + font-size: 15px; + line-height: 1.25; + } + + .contact-fact-card span { + display: block; + margin-top: 5px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.55; + font-size: 14px; + } + + .contact-quick-actions { + display: grid; + gap: 10px; + margin-top: 2px; + } + + .contact-quick-link { + display: block; + padding: 12px 14px; + border-radius: 14px; + color: #fff; + font-weight: 700; + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.14); + } + + .contact-quick-link:hover { + background: rgba(255, 255, 255, 0.18); + } + + .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; + } + + .classic-footer { + width: 100%; + margin-top: 24px; + padding: 44px 0 28px; + background: #0a1f47; + border-top: 1px solid rgba(255, 255, 255, 0.16); + } + + .classic-footer-shell { + display: grid; + gap: 22px; + } + + .classic-footer-main { + display: grid; + grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(180px, 1fr)); + gap: 28px; + align-items: start; + } + + .classic-footer-col { + min-width: 0; + } + + .classic-footer-col h3 { + margin: 0; + color: #ffffff; + font-size: 18px; + line-height: 1.2; + } + + .classic-footer .brand-text strong, + .classic-footer .brand-text span, + .classic-footer .footer-description, + .classic-footer .footer-links a, + .classic-footer .footer-legal a, + .classic-footer .footer-bottom { + color: rgba(255, 255, 255, 0.78); + } + + .classic-footer .footer-links, + .classic-footer .footer-legal { + margin-top: 14px; + } + + .classic-footer .footer-links a, + .classic-footer .footer-legal a { + transition: color 0.2s ease; + } + + .classic-footer .footer-links a:hover, + .classic-footer .footer-legal a:hover, + .classic-footer .footer-links a:focus-visible, + .classic-footer .footer-legal a:focus-visible { + color: #ffffff; + } + + .classic-footer-bottom { + margin-top: 8px; + padding-top: 16px; + border-top: 1px solid rgba(255, 255, 255, 0.16); + font-size: 13px; + } + + .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); + } + + .cart-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 12px; + } + + .cart-actions .ghost-button, + .cart-actions .button { + justify-content: center; + text-align: center; + } + + .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; + border-radius: var(--radius-xl); } + .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; + } + + .classic-footer-main { + grid-template-columns: 1fr 1fr; + } + + .classic-footer-main .brand-col { + grid-column: 1 / -1; + } + } + + @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; + } + + .classic-footer { + padding-top: 32px; + } + + .classic-footer-main { + grid-template-columns: 1fr; + gap: 20px; + } + + .classic-footer-main .brand-col { + grid-column: auto; + } + + .cart-actions { + grid-template-columns: 1fr; + } + } + + @media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } + + .reveal { + opacity: 1; + transform: none; + animation: none !important; + } + } diff --git a/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js b/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js new file mode 100644 index 00000000..1433a970 --- /dev/null +++ b/wp-content/themes/twentytwentyfour/assets/js/test1-landing.js @@ -0,0 +1,343 @@ +const mobileToggle = document.getElementById('mobileToggle') + const mobilePanel = document.getElementById('mobilePanel') + const cartDrawer = document.getElementById('cartDrawer') + const cartOpenButton = document.getElementById('cartOpenButton') + const mobileCartOpenButton = document.getElementById('mobileCartOpenButton') + const cartCloseButton = document.getElementById('cartCloseButton') + const modalBackdrop = document.getElementById('orderModal') + const modalCloseButton = document.getElementById('modalCloseButton') + const viewCartButton = document.getElementById('viewCartButton') + const checkoutButton = document.getElementById('checkoutButton') + const orderButtons = document.querySelectorAll('[data-open-order]') + const addToCartButtons = document.querySelectorAll('.add-to-cart') + const faqItems = document.querySelectorAll('.faq-item') + const cartCount = document.getElementById('cartCount') + const mobileCartCount = document.getElementById('mobileCartCount') + const cartItemsCount = document.getElementById('cartItemsCount') + const cartTotal = document.getElementById('cartTotal') + const cartList = document.getElementById('cartList') + const orderForm = document.getElementById('orderForm') + const contactForm = document.getElementById('contactForm') + const orderItemsField = document.getElementById('orderItemsField') + const orderSuccess = document.getElementById('orderSuccess') + const contactSuccess = document.getElementById('contactSuccess') + const wooCommerceConfig = window.test1WooCommerce || null + const cartPageUrl = (wooCommerceConfig && wooCommerceConfig.cartUrl) ? wooCommerceConfig.cartUrl : '/cart/' + const checkoutPageUrl = (wooCommerceConfig && wooCommerceConfig.checkoutUrl) ? wooCommerceConfig.checkoutUrl : '/checkout/' + const cartPanel = cartDrawer?.querySelector('.cart-panel') + const modalCard = modalBackdrop?.querySelector('.modal-card') + + let cart = [] + let lastCartTrigger = null + let lastModalTrigger = null + + const getFocusableElements = container => { + if (!container) { + return [] + } + + return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])')) + .filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]')) + } + + const focusFirstElement = container => { + const [first] = getFocusableElements(container) + + if (first) { + first.focus() + } + } + + const openMobileMenu = () => { + mobilePanel.classList.add('active') + mobileToggle.setAttribute('aria-expanded', 'true') + document.body.classList.add('menu-open') + } + + const closeMobileMenu = () => { + mobilePanel.classList.remove('active') + mobileToggle.setAttribute('aria-expanded', 'false') + document.body.classList.remove('menu-open') + } + + const openCart = triggerElement => { + lastCartTrigger = triggerElement || document.activeElement + cartDrawer.classList.add('open') + cartDrawer.setAttribute('aria-hidden', 'false') + document.body.classList.add('modal-open') + focusFirstElement(cartPanel) + } + + const closeCart = () => { + const shouldRestoreFocus = cartDrawer.classList.contains('open') + cartDrawer.classList.remove('open') + cartDrawer.setAttribute('aria-hidden', 'true') + document.body.classList.remove('modal-open') + + if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') { + lastCartTrigger.focus() + } + + lastCartTrigger = null + } + + const openModal = triggerElement => { + lastModalTrigger = triggerElement || document.activeElement + orderItemsField.value = cart.length + ? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n') + : '' + modalBackdrop.classList.add('open') + modalBackdrop.setAttribute('aria-hidden', 'false') + document.body.classList.add('modal-open') + focusFirstElement(modalCard) + } + + const closeModal = () => { + const shouldRestoreFocus = modalBackdrop.classList.contains('open') + modalBackdrop.classList.remove('open') + modalBackdrop.setAttribute('aria-hidden', 'true') + document.body.classList.remove('modal-open') + + if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') { + lastModalTrigger.focus() + } + + lastModalTrigger = null + } + + const renderCart = () => { + const total = cart.reduce((sum, item) => sum + item.price, 0) + const count = cart.length + + cartCount.textContent = count + mobileCartCount.textContent = count + cartItemsCount.textContent = count + cartTotal.textContent = `${total} ₽` + + if (!count) { + cartList.innerHTML = '
Не удалось загрузить шаблон страницы `index3.html`.
+Не удалось загрузить шаблон страницы `template-parts/test1-landing-static.php`.
В каталоге — популярные объемы для дома и офиса: от небольших бутылей до стандартных 19 литров. +Можно заказать разово или подключить регулярную доставку, чтобы не следить за остатками.
+Главный формат для кулеров, кухни и офиса. Самая выгодная цена за литр и удобная возвратная тара.
+Удобный домашний формат для кухни, поездок и дачи. Легко хранить, просто переносить.
+Для тренировок, поездок, мероприятий и ежедневного запаса питьевой воды дома или на работе.
+Освежающий вариант для гостей, кафе и тех, кто предпочитает яркий минеральный вкус.
+Соберите микс под привычки семьи или офиса: мягкая вода на каждый день и газированная к столу.
+Если заказывают впервые, чаще всего начинают с бутыли 19 литров. Для дома, поездок или редкого использования обычно добавляют компактные форматы.
+Хороший вариант на каждый день: для дома, офиса и мест, где вода нужна постоянно. Удобно ставить в кулер и не вспоминать о запасах каждый день.
+ +Многие берут воду по графику, чтобы не вспоминать о заказе в последний момент. Это удобно и для семьи, и для офиса, где запас должен быть всегда под рукой.
+Работаем по основным районам Севастополя. При оформлении заказа подскажем ближайшее окно и заранее подтвердим удобное время доставки.
+Все просто: выбираете воду, оставляете заявку, а мы уточняем детали и привозим заказ в согласованное время.
+Определите нужный объем: вода 19 литров, 5 литров, малые бутылки, минеральная или газированная вода.
+Соберите заказ прямо на сайте и проверьте итоговую сумму до подтверждения.
+Оставьте телефон и адрес в Севастополе, а мы уточним время и детали по таре.
+Курьер привезет воду, поможет с выгрузкой и при необходимости заберет пустые бутыли.
+У домашних и корпоративных заказов разные задачи, поэтому мы отдельно продумали условия для семьи и для компаний.
+Такой формат выбирают семьи, пожилые клиенты и все, кто не хочет носить тяжелые бутыли из магазина.
+Офисам, салонам, кафе, фитнес-клубам и студиям нужен предсказуемый сервис. Мы строим график так, чтобы запас воды не заканчивался в рабочие часы.
+Для новых и постоянных клиентов периодически действуют акции. Это удобный способ попробовать сервис или сделать регулярные заказы выгоднее.
+На первый заказ действует скидка 10%. Это удобно, если хотите сначала попробовать сервис и оценить качество воды.
+Настройте регулярный график: раз в 3 дня, неделю или по вашему потреблению. Мы напомним и приедем вовремя.
+При заказе стартового комплекта для дома дарим механическую помпу, чтобы пользоваться 19-литровой бутылью было проще.
+Для корпоративных клиентов действует персональная цена при регулярном объеме и закрепленном графике поставок.
+Собрали вопросы, которые чаще всего задают перед первым заказом.
+Важно не только откуда вода, но и как она проходит обработку, розлив и доставку. Поэтому мы уделяем внимание качеству на каждом этапе.
+Вода поступает из артезианского источника, проходит очистку и контроль перед розливом. Не меньше внимания уделяем бутылям: их состояние и санитарная обработка напрямую влияют на вкус и качество воды.
+По запросу можно получить информацию о качестве воды и условиях поставки. Для офисов и коммерческих объектов отдельно настраиваем регулярный график, чтобы запас воды не заканчивался в рабочее время.
+Несколько отзывов от клиентов, которые заказывают воду домой, в офис и для коммерческих объектов.
+Заказываем воду 19 литров домой в Гагаринский район. Курьер всегда заранее звонит, поднимает бутыли и забирает пустые. Удобно, что не нужно снова объяснять адрес.
+ +У нас небольшая команда, вода уходит быстро. С автодоставкой больше не вспоминаем в последний момент, что кулер пустой. Документы присылают без задержек.
+ +Переходили с другого поставщика и сразу почувствовали разницу. Вода приятная и для питья, и для чайника. Заказываем и 19 литров, и 5 литров домой.
+ +Для нашего фитнес-клуба важна стабильность. Ребята привозят четко по графику, можно комбинировать большие бутыли и маленькие бутылки для стойки продаж.
+ +Позвоните нам или оставьте заявку на сайте — уточним детали и подберём удобное время доставки.
+Работаем ежедневно и подбираем удобный интервал доставки для дома, офиса, кафе и небольших коммерческих точек.
+ +