From bf21dbc409046892243bc00696a2481f22526c7b Mon Sep 17 00:00:00 2001 From: "ab.an.ev@yandex.ru" Date: Thu, 2 Apr 2026 13:19:16 +0300 Subject: [PATCH] =?UTF-8?q?Anton=20|=20fix:=20=D0=BD=D0=B0=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=BE=D0=B9=D0=BA=D0=B0=20cart?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .history/index3_20260402120245.css | 1468 +++++++++++++++++ .history/index3_20260402131852.css | 1468 +++++++++++++++++ .../page-cart_20260402130834.php | 207 +++ .../page-cart_20260402131711.php | 207 +++ .../page-cart_20260402131804.php | 194 +++ .../page-cart_20260402131817.php | 185 +++ index3.css | 2 +- .../themes/twentytwentyfour/page-cart.php | 36 +- 8 files changed, 3737 insertions(+), 30 deletions(-) create mode 100644 .history/index3_20260402120245.css create mode 100644 .history/index3_20260402131852.css create mode 100644 .history/wp-content/themes/twentytwentyfour/page-cart_20260402130834.php create mode 100644 .history/wp-content/themes/twentytwentyfour/page-cart_20260402131711.php create mode 100644 .history/wp-content/themes/twentytwentyfour/page-cart_20260402131804.php create mode 100644 .history/wp-content/themes/twentytwentyfour/page-cart_20260402131817.php diff --git a/.history/index3_20260402120245.css b/.history/index3_20260402120245.css new file mode 100644 index 00000000..33944ed9 --- /dev/null +++ b/.history/index3_20260402120245.css @@ -0,0 +1,1468 @@ +: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); + } + + .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; } + .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; + } + + .cart-actions { + grid-template-columns: 1fr; + } + } diff --git a/.history/index3_20260402131852.css b/.history/index3_20260402131852.css new file mode 100644 index 00000000..744e3f19 --- /dev/null +++ b/.history/index3_20260402131852.css @@ -0,0 +1,1468 @@ +: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); + } + + .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; } + .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; + } + + .cart-actions { + grid-template-columns: 1fr; + } + } diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402130834.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402130834.php new file mode 100644 index 00000000..e8bc4483 --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402130834.php @@ -0,0 +1,207 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + + +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131711.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131711.php new file mode 100644 index 00000000..621486fe --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131711.php @@ -0,0 +1,207 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+ {#
+
+ + +
+
+ + +
+
+ + +
+
#} +
+ + // + // + // +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131804.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131804.php new file mode 100644 index 00000000..932779a0 --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131804.php @@ -0,0 +1,194 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+ {#
+
+ + +
+
+ + +
+
+ + +
+
#} +
+ + // + // + // +
+
+
+ + +
+
+ + +
+
+ +
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131817.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131817.php new file mode 100644 index 00000000..b5cab163 --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402131817.php @@ -0,0 +1,185 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+ {#
+
+ + +
+
+ + +
+
+ + +
+
#} +
+ + // + // + // +
+ + +
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/index3.css b/index3.css index 33944ed9..744e3f19 100644 --- a/index3.css +++ b/index3.css @@ -349,7 +349,7 @@ .hero-title { margin: 18px 0 18px; font-family: "Manrope", sans-serif; - font-size: clamp(38px, 7vw, 74px); + /* font-size: clamp(38px, 7vw, 74px); */ line-height: 0.98; letter-spacing: -0.05em; max-width: 12ch; diff --git a/wp-content/themes/twentytwentyfour/page-cart.php b/wp-content/themes/twentytwentyfour/page-cart.php index e8bc4483..b5cab163 100644 --- a/wp-content/themes/twentytwentyfour/page-cart.php +++ b/wp-content/themes/twentytwentyfour/page-cart.php @@ -61,7 +61,7 @@

-
+ {#
@@ -74,37 +74,15 @@
-
+
#}
- - - -
-
-
- - -
-
- - -
-
-
-
- - -
-
- - -
-
- - -
+ // + // + //
+ +