diff --git a/.history/index3_20260402132449.css b/.history/index3_20260402132449.css new file mode 100644 index 00000000..ff8326da --- /dev/null +++ b/.history/index3_20260402132449.css @@ -0,0 +1,1474 @@ +: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; + } +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_20260402132456.css b/.history/index3_20260402132456.css new file mode 100644 index 00000000..6b3eb5c5 --- /dev/null +++ b/.history/index3_20260402132456.css @@ -0,0 +1,1474 @@ +: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; + } + 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/assets/css/test1-checkout_20260402130952.css b/.history/wp-content/themes/twentytwentyfour/assets/css/test1-checkout_20260402130952.css new file mode 100644 index 00000000..48b4befe --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/assets/css/test1-checkout_20260402130952.css @@ -0,0 +1,939 @@ +:root { + --checkout-max-width: 1180px; + --premium-navy: #081f4f; + --premium-blue: #0d4fd6; + --premium-cyan: #6ee0ff; + --premium-mist: rgba(255, 255, 255, 0.66); + --premium-line: rgba(13, 79, 214, 0.14); + --premium-shadow: 0 40px 120px rgba(8, 31, 79, 0.18); +} + +body:is(.test1-checkout-page, .test1-cart-page) { + min-width: 320px; +} + +:is(.test1-checkout-page, .test1-cart-page) { + position: relative; +} + +:is(.test1-checkout-page, .test1-cart-page)::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: + radial-gradient(circle at 18% 12%, rgba(110, 224, 255, 0.12), transparent 24%), + radial-gradient(circle at 84% 18%, rgba(13, 79, 214, 0.14), transparent 22%), + linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%); + opacity: 0.9; +} + +.premium-topline { + position: relative; + z-index: 3; + border-bottom: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(90deg, rgba(8, 31, 79, 0.96), rgba(10, 43, 109, 0.84)); + color: rgba(255, 255, 255, 0.92); +} + +.premium-topline-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 42px; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-shell { + position: relative; + display: grid; + gap: 28px; + align-items: start; + z-index: 1; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-intro { + max-width: 780px; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-card { + padding: clamp(22px, 3vw, 36px); +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-back-link { + white-space: nowrap; +} + +.premium-stage { + position: relative; + padding: clamp(18px, 2vw, 28px); + border-radius: 36px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)); + border: 1px solid rgba(255, 255, 255, 0.5); + box-shadow: var(--premium-shadow); + overflow: hidden; + isolation: isolate; +} + +.premium-stage::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 24%), + linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 68%); + opacity: 0.8; + pointer-events: none; +} + +.premium-orb { + position: absolute; + border-radius: 50%; + filter: blur(6px); + pointer-events: none; + opacity: 0.9; +} + +.premium-orb-one { + top: -64px; + right: -40px; + width: 220px; + height: 220px; + background: radial-gradient(circle, rgba(110, 224, 255, 0.38), transparent 70%); +} + +.premium-orb-two { + bottom: -80px; + left: -30px; + width: 260px; + height: 260px; + background: radial-gradient(circle, rgba(13, 79, 214, 0.22), transparent 70%); +} + +.premium-kicker { + display: inline-flex; + align-items: center; + gap: 10px; + margin-top: 18px; + padding: 8px 14px; + border-radius: 999px; + background: rgba(8, 31, 79, 0.08); + color: var(--premium-navy); + font-size: 12px; + letter-spacing: 0.14em; + text-transform: uppercase; + font-weight: 800; +} + +.premium-kicker::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: linear-gradient(135deg, var(--premium-cyan), var(--premium-blue)); + box-shadow: 0 0 0 6px rgba(110, 224, 255, 0.12); +} + +.premium-metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 26px; +} + +.premium-metric { + padding: 18px 18px 16px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(255, 255, 255, 0.72); + box-shadow: 0 18px 44px rgba(8, 31, 79, 0.1); +} + +.premium-metric strong { + display: block; + margin-bottom: 6px; + font-size: 22px; + line-height: 1; + color: var(--premium-navy); +} + +.premium-metric span { + display: block; + color: var(--muted); + line-height: 1.55; +} + +.premium-note-row { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 24px; +} + +.premium-note-card { + padding: 18px 18px 20px; + border-radius: 22px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.56)); + border: 1px solid rgba(255, 255, 255, 0.76); + box-shadow: 0 18px 50px rgba(8, 31, 79, 0.1); +} + +.premium-note-card span { + display: inline-block; + margin-bottom: 8px; + color: var(--premium-blue); + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +.premium-note-card strong { + display: block; + color: var(--premium-navy); + line-height: 1.5; +} + +.cart-trust-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.cart-trust-card { + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.62); + border: 1px solid rgba(255, 255, 255, 0.78); + box-shadow: 0 18px 48px rgba(8, 31, 79, 0.08); +} + +.cart-trust-card span { + display: inline-block; + margin-bottom: 8px; + color: var(--premium-blue); + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +.cart-trust-card strong { + display: block; + color: var(--premium-navy); + line-height: 1.55; +} + +.premium-stack { + display: grid; + gap: 20px; +} + +.premium-aside, +.premium-form-card { + position: relative; + overflow: hidden; +} + +.premium-aside::before, +.premium-form-card::before, +.premium-footer-card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 34%); + pointer-events: none; +} + +.premium-aside { + padding: 26px; + border-radius: 30px; +} + +.premium-aside-head h2 { + margin: 16px 0 0; + font-size: clamp(28px, 3vw, 38px); + line-height: 1.02; + letter-spacing: -0.04em; + color: var(--premium-navy); +} + +.premium-timeline { + display: grid; + gap: 14px; + margin-top: 24px; +} + +.premium-timeline-item { + display: grid; + grid-template-columns: auto 1fr; + gap: 14px; + align-items: start; + padding: 16px 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.premium-timeline-item strong { + min-width: 44px; + height: 44px; + display: grid; + place-items: center; + border-radius: 14px; + background: linear-gradient(145deg, rgba(8, 31, 79, 0.96), rgba(13, 79, 214, 0.92)); + color: #fff; + font-size: 13px; + letter-spacing: 0.08em; +} + +.premium-timeline-item span { + display: block; + padding-top: 6px; + color: var(--text); + line-height: 1.6; +} + +.premium-badge-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.premium-badge-card { + padding: 18px; + border-radius: 20px; + background: linear-gradient(160deg, rgba(8, 31, 79, 0.88), rgba(13, 79, 214, 0.78)); + color: #fff; + box-shadow: 0 24px 60px rgba(8, 31, 79, 0.18); +} + +.premium-badge-card span { + display: block; + margin-bottom: 8px; + font-size: 11px; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.72); +} + +.premium-badge-card strong { + display: block; + line-height: 1.45; +} + +.cart-side-note { + margin-top: 18px; + padding: 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(13, 79, 214, 0.08); + color: var(--text); + line-height: 1.7; +} + +.premium-form-card { + border-radius: 30px; + box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16); +} + +:is(.test1-checkout-page, .test1-cart-page) .entry-content, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart, +:is(.test1-checkout-page, .test1-cart-page) .is-large { + position: relative; + z-index: 1; + max-width: 100%; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce a, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-combobox .components-combobox-control__input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row input.input-text, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row select, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input select, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea, +:is(.test1-checkout-page, .test1-cart-page) .components-text-control__input, +:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__input, +:is(.test1-checkout-page, .test1-cart-page) .components-combobox-control__input, +:is(.test1-checkout-page, .test1-cart-page) .coupon #coupon_code { + min-height: 58px; + padding: 14px 16px; + border-radius: 18px; + border: 1px solid var(--premium-line); + background: rgba(255, 255, 255, 0.92); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea { + min-height: 120px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, +:is(.test1-checkout-page, .test1-cart-page) #order_review, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-wrapper, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-step, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-coupon, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-shipping-rates-control, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-address-form, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, +:is(.test1-checkout-page, .test1-cart-page) .cart_totals, +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + border-radius: 26px; + border: 1px solid rgba(255, 255, 255, 0.78); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)); + box-shadow: 0 30px 90px rgba(8, 31, 79, 0.12); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, +:is(.test1-checkout-page, .test1-cart-page) #order_review, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, +:is(.test1-checkout-page, .test1-cart-page) .cart_totals, +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + padding: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row { + margin-bottom: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-radio-control__option-label { + font-weight: 700; + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button, +:is(.test1-checkout-page, .test1-cart-page) .checkout-button, +:is(.test1-checkout-page, .test1-cart-page) .actions .button, +:is(.test1-checkout-page, .test1-cart-page) .coupon .button { + min-height: 56px; + padding: 16px 22px; + border: 0; + border-radius: 999px; + color: #fff; + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24); + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button:hover, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .checkout-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .actions .button:hover, +:is(.test1-checkout-page, .test1-cart-page) .coupon .button:hover { + transform: translateY(-1px); + filter: brightness(1.03); +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary-item, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-product-name { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table { + overflow: hidden; + border-radius: 18px; + border-collapse: separate; + border-spacing: 0; +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table td, +:is(.test1-checkout-page, .test1-cart-page) table.shop_table th, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table th, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table td { + border-color: rgba(18, 48, 89, 0.1); +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table thead th { + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_item img { + border-radius: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .product-remove a.remove { + display: grid; + place-items: center; + width: 36px; + height: 36px; + border-radius: 12px; + background: rgba(213, 59, 92, 0.08); + color: #d53b5c !important; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-info, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-message, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-error, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-notice-banner { + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.1); + background: rgba(255, 255, 255, 0.84); + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--single, +:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--multiple { + min-height: 56px; + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.14); + background: rgba(255, 255, 255, 0.9); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table, +:is(.test1-checkout-page, .test1-cart-page) #add_payment_method #payment div.payment_box, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart #payment div.payment_box, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment div.payment_box { + background: rgba(219, 246, 255, 0.45); + border-radius: 18px; +} + +:is(.test1-checkout-page, .test1-cart-page) .coupon { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + margin-top: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_totals { + float: none; + width: 100%; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-proceed-to-checkout { + margin-bottom: 0; + padding-bottom: 0; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar-layout { + gap: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar { + padding: 22px; +} + +.premium-footer { + position: relative; + z-index: 1; + padding-top: 0; +} + +.premium-footer-grid { + grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(240px, 0.8fr)); + gap: 20px; +} + +.premium-footer-card { + position: relative; + overflow: hidden; + border-radius: 30px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.62)); + border: 1px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 26px 70px rgba(8, 31, 79, 0.12); +} + +.premium-footer-brand { + min-height: 100%; +} + +.premium-footer-pills { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 20px; +} + +.premium-footer-contacts { + margin: 0; + padding: 0; + list-style: none; +} + +.premium-footer-contacts li + li { + margin-top: 10px; +} + +.premium-footer-bottom { + padding-top: 24px; +} + +.checkout-progress { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; + margin-bottom: 22px; +} + +.checkout-progress-step { + display: inline-flex; + justify-content: center; + align-items: center; + min-height: 48px; + padding: 12px 14px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.55); + border: 1px solid rgba(255, 255, 255, 0.68); + color: var(--muted); + font-weight: 800; + text-align: center; +} + +.checkout-progress-step.is-active { + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + color: #fff; + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24); +} + +.checkout-progress-step.is-complete { + color: var(--premium-navy); +} + +.checkout-progress-step.is-pending { + opacity: 0.72; +} + +.water-commerce-panel, +.water-seo-copy-section { + margin-top: 24px; + padding: 24px; + border-radius: 28px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.62)); + border: 1px solid rgba(255, 255, 255, 0.78); + box-shadow: 0 24px 64px rgba(8, 31, 79, 0.1); +} + +.water-commerce-panel-head h2, +.water-seo-copy-section h2 { + margin: 0; + color: var(--premium-navy); + font-size: clamp(28px, 3vw, 40px); + line-height: 1.05; + letter-spacing: -0.04em; +} + +.water-commerce-panel-head p, +.water-seo-copy-section p { + margin: 14px 0 0; + color: var(--muted); + line-height: 1.8; +} + +.water-commerce-benefits { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 18px; +} + +.water-commerce-benefits span, +.water-commerce-alert { + display: inline-flex; + align-items: center; + min-height: 42px; + padding: 10px 14px; + border-radius: 18px; + background: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.water-commerce-alerts { + display: grid; + gap: 12px; + margin-top: 18px; +} + +.water-commerce-alert.is-success { + background: rgba(25, 167, 111, 0.1); + color: #0d6d49; +} + +.water-commerce-repeat-order { + margin-top: 18px; +} + +.water-checkout-submit-box { + margin: 0 0 18px; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.water-checkout-submit-note { + margin-bottom: 12px; + color: var(--premium-navy); + font-weight: 800; +} + +.water-checkout-submit-list { + margin: 0; + padding-left: 20px; + color: var(--muted); + line-height: 1.7; +} + +.water-cart-summary-box { + margin-bottom: 18px; + padding: 18px; + border-radius: 22px; + background: linear-gradient(145deg, rgba(8, 31, 79, 0.92), rgba(13, 79, 214, 0.82)); + color: #fff; + box-shadow: 0 24px 60px rgba(8, 31, 79, 0.16); +} + +.water-cart-summary-usp { + margin-bottom: 10px; + font-weight: 800; +} + +.water-cart-summary-list { + margin: 0; + padding-left: 18px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.7; +} + +.water-empty-cart-cta { + margin-top: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_totals { + position: sticky; + top: 104px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form { + position: relative; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(255, 255, 255, 0.52); + backdrop-filter: blur(3px); + z-index: 4; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::before { + content: "Обновляем корзину"; + position: absolute; + top: 24px; + right: 24px; + z-index: 5; + padding: 10px 14px; + border-radius: 999px; + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + color: #fff; + font-size: 12px; + letter-spacing: 0.08em; + text-transform: uppercase; + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells { + margin-top: 24px; + padding: 24px; + border-radius: 28px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.6)); + border: 1px solid rgba(255, 255, 255, 0.78); +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells > h2 { + margin: 0 0 16px; + color: var(--premium-navy); +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .product { + margin: 0; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +:is(.test1-checkout-page, .test1-cart-page) .quantity { + display: inline-flex; + align-items: center; + gap: 8px; +} + +:is(.test1-checkout-page, .test1-cart-page) .quantity .qty { + width: 74px; + text-align: center; +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-name { + font-weight: 800; + color: var(--premium-navy); +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-subtotal, +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-price { + color: var(--premium-navy); + font-weight: 800; +} + +.water-order-total-value .amount { + font-size: 28px; + color: var(--premium-navy); +} + +.quantity-button { + width: 38px; + height: 38px; + display: inline-grid; + place-items: center; + border-radius: 12px; + background: rgba(8, 31, 79, 0.08); + color: var(--premium-navy); + font-weight: 800; +} + +.quantity-button:hover { + background: rgba(13, 79, 214, 0.14); +} + +@media (max-width: 991px) { + .checkout-progress, + .water-commerce-benefits { + grid-template-columns: 1fr; + } + + .cart-trust-grid { + grid-template-columns: 1fr; + } + + :is(.test1-checkout-page, .test1-cart-page) .cart_totals { + position: static; + top: auto; + } +} + +@media (min-width: 992px) { + :is(.test1-checkout-page, .test1-cart-page) .checkout-shell { + grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr); + } +} + +@media (max-width: 991px) { + .premium-metrics, + .premium-note-row, + .premium-badge-grid, + .premium-footer-grid { + grid-template-columns: 1fr; + } + + .checkout-progress { + grid-template-columns: 1fr; + } +} + +@media (max-width: 781px) { + .premium-topline-inner, + :is(.test1-checkout-page, .test1-cart-page) .header-row, + :is(.test1-checkout-page, .test1-cart-page) .header-actions { + flex-wrap: wrap; + } + + .premium-topline-inner { + justify-content: center; + padding: 8px 0; + text-align: center; + } + + :is(.test1-checkout-page, .test1-cart-page) .header-actions { + width: 100%; + justify-content: stretch; + } + + :is(.test1-checkout-page, .test1-cart-page) .header-actions > * { + flex: 1 1 100%; + justify-content: center; + text-align: center; + } + + .premium-stage { + padding: 14px; + border-radius: 26px; + } + + :is(.test1-checkout-page, .test1-cart-page) .checkout-card, + :is(.test1-checkout-page, .test1-cart-page) .premium-aside, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, + :is(.test1-checkout-page, .test1-cart-page) #order_review, + :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, + :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, + :is(.test1-checkout-page, .test1-cart-page) .cart_totals, + :is(.test1-checkout-page, .test1-cart-page) .cart-collaterals, + .premium-footer-card { + padding: 18px; + } + + :is(.test1-checkout-page, .test1-cart-page) .coupon { + display: grid; + } + + .water-commerce-panel, + .water-seo-copy-section, + .cross-sells, + .water-checkout-submit-box { + padding: 18px; + } +} diff --git a/.history/wp-content/themes/twentytwentyfour/assets/css/test1-checkout_20260402132508.css b/.history/wp-content/themes/twentytwentyfour/assets/css/test1-checkout_20260402132508.css new file mode 100644 index 00000000..d008368d --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/assets/css/test1-checkout_20260402132508.css @@ -0,0 +1,946 @@ +:root { + --checkout-max-width: 1180px; + --premium-navy: #081f4f; + --premium-blue: #0d4fd6; + --premium-cyan: #6ee0ff; + --premium-mist: rgba(255, 255, 255, 0.66); + --premium-line: rgba(13, 79, 214, 0.14); + --premium-shadow: 0 40px 120px rgba(8, 31, 79, 0.18); +} + +body:is(.test1-checkout-page, .test1-cart-page) { + min-width: 320px; +} + +:is(.test1-checkout-page, .test1-cart-page) { + position: relative; +} + +:is(.test1-checkout-page, .test1-cart-page)::after { + content: ""; + position: fixed; + inset: 0; + pointer-events: none; + background: + radial-gradient(circle at 18% 12%, rgba(110, 224, 255, 0.12), transparent 24%), + radial-gradient(circle at 84% 18%, rgba(13, 79, 214, 0.14), transparent 22%), + linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%); + opacity: 0.9; +} + +.premium-topline { + position: relative; + z-index: 3; + border-bottom: 1px solid rgba(255, 255, 255, 0.24); + background: linear-gradient(90deg, rgba(8, 31, 79, 0.96), rgba(10, 43, 109, 0.84)); + color: rgba(255, 255, 255, 0.92); +} + +.premium-topline-inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 42px; + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-shell { + position: relative; + display: grid; + gap: 28px; + align-items: start; + z-index: 1; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-intro { + max-width: 780px; +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-card { + padding: clamp(22px, 3vw, 36px); +} + +:is(.test1-checkout-page, .test1-cart-page) .checkout-back-link { + white-space: nowrap; +} + +.premium-stage { + position: relative; + padding: clamp(18px, 2vw, 28px); + border-radius: 36px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)); + border: 1px solid rgba(255, 255, 255, 0.5); + box-shadow: var(--premium-shadow); + overflow: hidden; + isolation: isolate; +} + +.premium-stage::before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.24), transparent 24%), + linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 68%); + opacity: 0.8; + pointer-events: none; +} + +.premium-orb { + position: absolute; + border-radius: 50%; + filter: blur(6px); + pointer-events: none; + opacity: 0.9; +} + +.premium-orb-one { + top: -64px; + right: -40px; + width: 220px; + height: 220px; + background: radial-gradient(circle, rgba(110, 224, 255, 0.38), transparent 70%); +} + +.premium-orb-two { + bottom: -80px; + left: -30px; + width: 260px; + height: 260px; + background: radial-gradient(circle, rgba(13, 79, 214, 0.22), transparent 70%); +} + +.premium-kicker { + display: inline-flex; + align-items: center; + gap: 10px; + margin-top: 18px; + padding: 8px 14px; + border-radius: 999px; + background: rgba(8, 31, 79, 0.08); + color: var(--premium-navy); + font-size: 12px; + letter-spacing: 0.14em; + text-transform: uppercase; + font-weight: 800; +} + +.premium-kicker::before { + content: ""; + width: 8px; + height: 8px; + border-radius: 50%; + background: linear-gradient(135deg, var(--premium-cyan), var(--premium-blue)); + box-shadow: 0 0 0 6px rgba(110, 224, 255, 0.12); +} + +.premium-metrics { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 26px; +} + +.premium-metric { + padding: 18px 18px 16px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(255, 255, 255, 0.72); + box-shadow: 0 18px 44px rgba(8, 31, 79, 0.1); +} + +.premium-metric strong { + display: block; + margin-bottom: 6px; + font-size: 22px; + line-height: 1; + color: var(--premium-navy); +} + +.premium-metric span { + display: block; + color: var(--muted); + line-height: 1.55; +} + +.premium-note-row { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 24px; +} + +.premium-note-card { + padding: 18px 18px 20px; + border-radius: 22px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.56)); + border: 1px solid rgba(255, 255, 255, 0.76); + box-shadow: 0 18px 50px rgba(8, 31, 79, 0.1); +} + +.premium-note-card span { + display: inline-block; + margin-bottom: 8px; + color: var(--premium-blue); + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +.premium-note-card strong { + display: block; + color: var(--premium-navy); + line-height: 1.5; +} + +.cart-trust-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.cart-trust-card { + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.62); + border: 1px solid rgba(255, 255, 255, 0.78); + box-shadow: 0 18px 48px rgba(8, 31, 79, 0.08); +} + +.cart-trust-card span { + display: inline-block; + margin-bottom: 8px; + color: var(--premium-blue); + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +.cart-trust-card strong { + display: block; + color: var(--premium-navy); + line-height: 1.55; +} + +.premium-stack { + display: grid; + gap: 20px; +} + +.premium-aside, +.premium-form-card { + position: relative; + overflow: hidden; +} + +.premium-aside::before, +.premium-form-card::before, +.premium-footer-card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 34%); + pointer-events: none; +} + +.premium-aside { + padding: 26px; + border-radius: 30px; +} + +.premium-aside-head h2 { + margin: 16px 0 0; + font-size: clamp(28px, 3vw, 38px); + line-height: 1.02; + letter-spacing: -0.04em; + color: var(--premium-navy); +} +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; +} + +.premium-timeline { + display: grid; + gap: 14px; + margin-top: 24px; +} + +.premium-timeline-item { + display: grid; + grid-template-columns: auto 1fr; + gap: 14px; + align-items: start; + padding: 16px 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.premium-timeline-item strong { + min-width: 44px; + height: 44px; + display: grid; + place-items: center; + border-radius: 14px; + background: linear-gradient(145deg, rgba(8, 31, 79, 0.96), rgba(13, 79, 214, 0.92)); + color: #fff; + font-size: 13px; + letter-spacing: 0.08em; +} + +.premium-timeline-item span { + display: block; + padding-top: 6px; + color: var(--text); + line-height: 1.6; +} + +.premium-badge-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.premium-badge-card { + padding: 18px; + border-radius: 20px; + background: linear-gradient(160deg, rgba(8, 31, 79, 0.88), rgba(13, 79, 214, 0.78)); + color: #fff; + box-shadow: 0 24px 60px rgba(8, 31, 79, 0.18); +} + +.premium-badge-card span { + display: block; + margin-bottom: 8px; + font-size: 11px; + letter-spacing: 0.12em; + text-transform: uppercase; + color: rgba(255, 255, 255, 0.72); +} + +.premium-badge-card strong { + display: block; + line-height: 1.45; +} + +.cart-side-note { + margin-top: 18px; + padding: 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(13, 79, 214, 0.08); + color: var(--text); + line-height: 1.7; +} + +.premium-form-card { + border-radius: 30px; + box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16); +} + +:is(.test1-checkout-page, .test1-cart-page) .entry-content, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart, +:is(.test1-checkout-page, .test1-cart-page) .is-large { + position: relative; + z-index: 1; + max-width: 100%; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce a, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-combobox .components-combobox-control__input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row input.input-text, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row select, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input input, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input select, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea, +:is(.test1-checkout-page, .test1-cart-page) .components-text-control__input, +:is(.test1-checkout-page, .test1-cart-page) .components-form-token-field__input, +:is(.test1-checkout-page, .test1-cart-page) .components-combobox-control__input, +:is(.test1-checkout-page, .test1-cart-page) .coupon #coupon_code { + min-height: 58px; + padding: 14px 16px; + border-radius: 18px; + border: 1px solid var(--premium-line); + background: rgba(255, 255, 255, 0.92); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row textarea, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-textarea textarea { + min-height: 120px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, +:is(.test1-checkout-page, .test1-cart-page) #order_review, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-wrapper, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-step, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-totals-coupon, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-shipping-rates-control, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-address-form, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, +:is(.test1-checkout-page, .test1-cart-page) .cart_totals, +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + border-radius: 26px; + border: 1px solid rgba(255, 255, 255, 0.78); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.64)); + box-shadow: 0 30px 90px rgba(8, 31, 79, 0.12); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, +:is(.test1-checkout-page, .test1-cart-page) #order_review, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, +:is(.test1-checkout-page, .test1-cart-page) .cart_totals, +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + padding: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row { + margin-bottom: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce form .form-row label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-text-input label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkbox label, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-radio-control__option-label { + font-weight: 700; + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button, +:is(.test1-checkout-page, .test1-cart-page) .checkout-button, +:is(.test1-checkout-page, .test1-cart-page) .actions .button, +:is(.test1-checkout-page, .test1-cart-page) .coupon .button { + min-height: 56px; + padding: 16px 22px; + border: 0; + border-radius: 999px; + color: #fff; + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24); + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce button.button:hover, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce #payment #place_order:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-cart__submit-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-checkout-place-order-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .checkout-button:hover, +:is(.test1-checkout-page, .test1-cart-page) .actions .button:hover, +:is(.test1-checkout-page, .test1-cart-page) .coupon .button:hover { + transform: translateY(-1px); + filter: brightness(1.03); +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-order-summary-item, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-product-name { + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table { + overflow: hidden; + border-radius: 18px; + border-collapse: separate; + border-spacing: 0; +} + +:is(.test1-checkout-page, .test1-cart-page) table.shop_table td, +:is(.test1-checkout-page, .test1-cart-page) table.shop_table th, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table th, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table td { + border-color: rgba(18, 48, 89, 0.1); +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table thead th { + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_item img { + border-radius: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .product-remove a.remove { + display: grid; + place-items: center; + width: 36px; + height: 36px; + border-radius: 12px; + background: rgba(213, 59, 92, 0.08); + color: #d53b5c !important; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-info, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-message, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-error, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-notice-banner { + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.1); + background: rgba(255, 255, 255, 0.84); + color: var(--text); +} + +:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--single, +:is(.test1-checkout-page, .test1-cart-page) .select2-container--default .select2-selection--multiple { + min-height: 56px; + border-radius: 18px; + border: 1px solid rgba(18, 48, 89, 0.14); + background: rgba(255, 255, 255, 0.9); +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout-review-order-table, +:is(.test1-checkout-page, .test1-cart-page) #add_payment_method #payment div.payment_box, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart #payment div.payment_box, +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment div.payment_box { + background: rgba(219, 246, 255, 0.45); + border-radius: 18px; +} + +:is(.test1-checkout-page, .test1-cart-page) .coupon { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart-collaterals { + margin-top: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_totals { + float: none; + width: 100%; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-proceed-to-checkout { + margin-bottom: 0; + padding-bottom: 0; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-block-components-sidebar-layout { + gap: 24px; +} + +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, +:is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar { + padding: 22px; +} + +.premium-footer { + position: relative; + z-index: 1; + padding-top: 0; +} + +.premium-footer-grid { + grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(240px, 0.8fr)); + gap: 20px; +} + +.premium-footer-card { + position: relative; + overflow: hidden; + border-radius: 30px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.62)); + border: 1px solid rgba(255, 255, 255, 0.8); + box-shadow: 0 26px 70px rgba(8, 31, 79, 0.12); +} + +.premium-footer-brand { + min-height: 100%; +} + +.premium-footer-pills { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 20px; +} + +.premium-footer-contacts { + margin: 0; + padding: 0; + list-style: none; +} + +.premium-footer-contacts li + li { + margin-top: 10px; +} + +.premium-footer-bottom { + padding-top: 24px; +} + +.checkout-progress { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 12px; + margin-bottom: 22px; +} + +.checkout-progress-step { + display: inline-flex; + justify-content: center; + align-items: center; + min-height: 48px; + padding: 12px 14px; + border-radius: 999px; + background: rgba(255, 255, 255, 0.55); + border: 1px solid rgba(255, 255, 255, 0.68); + color: var(--muted); + font-weight: 800; + text-align: center; +} + +.checkout-progress-step.is-active { + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + color: #fff; + box-shadow: 0 18px 34px rgba(13, 79, 214, 0.24); +} + +.checkout-progress-step.is-complete { + color: var(--premium-navy); +} + +.checkout-progress-step.is-pending { + opacity: 0.72; +} + +.water-commerce-panel, +.water-seo-copy-section { + margin-top: 24px; + padding: 24px; + border-radius: 28px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.62)); + border: 1px solid rgba(255, 255, 255, 0.78); + box-shadow: 0 24px 64px rgba(8, 31, 79, 0.1); +} + +.water-commerce-panel-head h2, +.water-seo-copy-section h2 { + margin: 0; + color: var(--premium-navy); + font-size: clamp(28px, 3vw, 40px); + line-height: 1.05; + letter-spacing: -0.04em; +} + +.water-commerce-panel-head p, +.water-seo-copy-section p { + margin: 14px 0 0; + color: var(--muted); + line-height: 1.8; +} + +.water-commerce-benefits { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-top: 18px; +} + +.water-commerce-benefits span, +.water-commerce-alert { + display: inline-flex; + align-items: center; + min-height: 42px; + padding: 10px 14px; + border-radius: 18px; + background: rgba(255, 255, 255, 0.82); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.water-commerce-alerts { + display: grid; + gap: 12px; + margin-top: 18px; +} + +.water-commerce-alert.is-success { + background: rgba(25, 167, 111, 0.1); + color: #0d6d49; +} + +.water-commerce-repeat-order { + margin-top: 18px; +} + +.water-checkout-submit-box { + margin: 0 0 18px; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +.water-checkout-submit-note { + margin-bottom: 12px; + color: var(--premium-navy); + font-weight: 800; +} + +.water-checkout-submit-list { + margin: 0; + padding-left: 20px; + color: var(--muted); + line-height: 1.7; +} + +.water-cart-summary-box { + margin-bottom: 18px; + padding: 18px; + border-radius: 22px; + background: linear-gradient(145deg, rgba(8, 31, 79, 0.92), rgba(13, 79, 214, 0.82)); + color: #fff; + box-shadow: 0 24px 60px rgba(8, 31, 79, 0.16); +} + +.water-cart-summary-usp { + margin-bottom: 10px; + font-weight: 800; +} + +.water-cart-summary-list { + margin: 0; + padding-left: 18px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.7; +} + +.water-empty-cart-cta { + margin-top: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cart_totals { + position: sticky; + top: 104px; +} + +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form { + position: relative; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(255, 255, 255, 0.52); + backdrop-filter: blur(3px); + z-index: 4; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::before { + content: "Обновляем корзину"; + position: absolute; + top: 24px; + right: 24px; + z-index: 5; + padding: 10px 14px; + border-radius: 999px; + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + color: #fff; + font-size: 12px; + letter-spacing: 0.08em; + text-transform: uppercase; + font-weight: 800; +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells { + margin-top: 24px; + padding: 24px; + border-radius: 28px; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.6)); + border: 1px solid rgba(255, 255, 255, 0.78); +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells > h2 { + margin: 0 0 16px; + color: var(--premium-navy); +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .product { + margin: 0; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(13, 79, 214, 0.08); +} + +:is(.test1-checkout-page, .test1-cart-page) .quantity { + display: inline-flex; + align-items: center; + gap: 8px; +} + +:is(.test1-checkout-page, .test1-cart-page) .quantity .qty { + width: 74px; + text-align: center; +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-name { + font-weight: 800; + color: var(--premium-navy); +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-subtotal, +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-price { + color: var(--premium-navy); + font-weight: 800; +} + +.water-order-total-value .amount { + font-size: 28px; + color: var(--premium-navy); +} + +.quantity-button { + width: 38px; + height: 38px; + display: inline-grid; + place-items: center; + border-radius: 12px; + background: rgba(8, 31, 79, 0.08); + color: var(--premium-navy); + font-weight: 800; +} + +.quantity-button:hover { + background: rgba(13, 79, 214, 0.14); +} + +@media (max-width: 991px) { + .checkout-progress, + .water-commerce-benefits { + grid-template-columns: 1fr; + } + + .cart-trust-grid { + grid-template-columns: 1fr; + } + + :is(.test1-checkout-page, .test1-cart-page) .cart_totals { + position: static; + top: auto; + } +} + +@media (min-width: 992px) { + :is(.test1-checkout-page, .test1-cart-page) .checkout-shell { + grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1.12fr); + } +} + +@media (max-width: 991px) { + .premium-metrics, + .premium-note-row, + .premium-badge-grid, + .premium-footer-grid { + grid-template-columns: 1fr; + } + + .checkout-progress { + grid-template-columns: 1fr; + } +} + +@media (max-width: 781px) { + .premium-topline-inner, + :is(.test1-checkout-page, .test1-cart-page) .header-row, + :is(.test1-checkout-page, .test1-cart-page) .header-actions { + flex-wrap: wrap; + } + + .premium-topline-inner { + justify-content: center; + padding: 8px 0; + text-align: center; + } + + :is(.test1-checkout-page, .test1-cart-page) .header-actions { + width: 100%; + justify-content: stretch; + } + + :is(.test1-checkout-page, .test1-cart-page) .header-actions > * { + flex: 1 1 100%; + justify-content: center; + text-align: center; + } + + .premium-stage { + padding: 14px; + border-radius: 26px; + } + + :is(.test1-checkout-page, .test1-cart-page) .checkout-card, + :is(.test1-checkout-page, .test1-cart-page) .premium-aside, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-checkout #payment, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-billing-fields, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-additional-fields, + :is(.test1-checkout-page, .test1-cart-page) #order_review, + :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__main, + :is(.test1-checkout-page, .test1-cart-page) .wc-block-checkout__sidebar, + :is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form, + :is(.test1-checkout-page, .test1-cart-page) .cart_totals, + :is(.test1-checkout-page, .test1-cart-page) .cart-collaterals, + .premium-footer-card { + padding: 18px; + } + + :is(.test1-checkout-page, .test1-cart-page) .coupon { + display: grid; + } + + .water-commerce-panel, + .water-seo-copy-section, + .cross-sells, + .water-checkout-submit-box { + padding: 18px; + } +} diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132004.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132004.php new file mode 100644 index 00000000..aabf648e --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132004.php @@ -0,0 +1,172 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+ +
+ + // + // + // +
+ + +
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132014.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132014.php new file mode 100644 index 00000000..7315fdb7 --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132014.php @@ -0,0 +1,169 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

+ +
+ +
+ + +
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132131.php b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132131.php new file mode 100644 index 00000000..6b6d6401 --- /dev/null +++ b/.history/wp-content/themes/twentytwentyfour/page-cart_20260402132131.php @@ -0,0 +1,160 @@ + +> + + + + + +> + +
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ +
+

+

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

+

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

+

+ +
+ +
+ + +
+ +
+ + +
+ +
+
+
+
+
+
+
+ + + + diff --git a/index3.css b/index3.css index 744e3f19..6b3eb5c5 100644 --- a/index3.css +++ b/index3.css @@ -512,7 +512,13 @@ 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); diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css index 48b4befe..d008368d 100644 --- a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css +++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css @@ -263,6 +263,13 @@ body:is(.test1-checkout-page, .test1-cart-page) { letter-spacing: -0.04em; color: var(--premium-navy); } +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; +} .premium-timeline { display: grid; diff --git a/wp-content/themes/twentytwentyfour/page-cart.php b/wp-content/themes/twentytwentyfour/page-cart.php index b5cab163..0ecc7353 100644 --- a/wp-content/themes/twentytwentyfour/page-cart.php +++ b/wp-content/themes/twentytwentyfour/page-cart.php @@ -58,28 +58,11 @@
-

- {#
-
- - -
-
- - -
-
- - -
-
#} +
- // - // - //
@@ -88,8 +71,7 @@