From ce137675c34879d32197f65c1003fb30550fb952 Mon Sep 17 00:00:00 2001 From: neo Date: Tue, 23 Jun 2026 18:09:40 +0500 Subject: [PATCH] =?UTF-8?q?feat:=20correct=20DRAKON=20diagram=20with=20dra?= =?UTF-8?q?konwidget=20=E2=80=94=20proper=20skewer,=20hexagon,=20yes/no=20?= =?UTF-8?q?branches,=20light=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1178 +++++++++++++++++++++++++--------------------------- 1 file changed, 555 insertions(+), 623 deletions(-) diff --git a/index.html b/index.html index 66d884f..03dca4d 100644 --- a/index.html +++ b/index.html @@ -237,7 +237,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; color: var(--text); } -/* Hero diagram */ +/* Hero diagram — DrakonWidget container */ .hero-diagram { position: relative; background: var(--white); @@ -245,7 +245,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border: 1px solid var(--border); padding: 40px 24px 24px; box-shadow: var(--shadow-lg); - min-height: 500px; + min-height: 480px; display: flex; align-items: center; justify-content: center; @@ -265,15 +265,15 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; border-radius: 6px; } -#drakon-diagram { +.drakon-widget-container { width: 100%; - max-width: 460px; + max-width: 520px; + height: 400px; + position: relative; } -#drakon-diagram svg { - width: 100%; - height: auto; - display: block; +.drakon-widget-container canvas { + border-radius: 8px; } @media (max-width: 768px) { @@ -501,9 +501,31 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; overflow: hidden; } +.service-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 4px; + height: 100%; + background: var(--accent); + opacity: 0; + transition: opacity 0.2s; +} + +.service-card:hover::before { + opacity: 1; +} + .service-card:hover { - border-color: var(--accent); - box-shadow: 0 0 0 1px var(--accent); + border-color: var(--border-light); + box-shadow: var(--shadow-md); +} + +.service-icon { + font-size: 32px; + margin-bottom: 20px; + display: block; } .service-card h3 { @@ -517,22 +539,6 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: 15px; color: var(--text-secondary); line-height: 1.7; - margin-bottom: 20px; -} - -.service-tags { - display: flex; - gap: 8px; - flex-wrap: wrap; -} - -.service-tag { - font-size: 12px; - font-weight: 600; - padding: 4px 12px; - background: var(--bg); - color: var(--text-secondary); - border-radius: 100px; } @media (max-width: 768px) { @@ -540,182 +546,53 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ============================================ - PROCESS + PROCESS SECTION ============================================ */ .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); - gap: 32px; + gap: 24px; margin-top: 60px; } .process-step { text-align: center; + padding: 32px 24px; + position: relative; } -.step-number { +.process-step-number { width: 48px; height: 48px; - background: var(--accent); - color: white; - border-radius: 14px; + background: var(--accent-light); + color: var(--accent-dark); + border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; - font-weight: 800; - margin: 0 auto 20px; + font-weight: 700; + margin: 0 auto 16px; } .process-step h3 { - font-size: 17px; + font-size: 16px; font-weight: 700; - margin-bottom: 10px; - letter-spacing: -0.01em; + margin-bottom: 8px; } .process-step p { font-size: 14px; color: var(--text-secondary); - line-height: 1.7; + line-height: 1.6; } @media (max-width: 768px) { - .process-steps { - grid-template-columns: repeat(2, 1fr); - gap: 40px; - } + .process-steps { grid-template-columns: repeat(2, 1fr); } } /* ============================================ - PRICING - ============================================ */ -.pricing-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 24px; - margin-top: 60px; -} - -.pricing-card { - padding: 40px 32px; - background: var(--white); - border: 1px solid var(--border); - border-radius: var(--radius-lg); - transition: all 0.2s; - position: relative; -} - -.pricing-card.featured { - border-color: var(--accent); - box-shadow: 0 0 0 1px var(--accent); -} - -.pricing-card.featured::before { - content: 'Популярный'; - position: absolute; - top: -11px; - left: 50%; - transform: translateX(-50%); - background: var(--accent); - color: white; - font-size: 11px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - padding: 4px 14px; - border-radius: 6px; -} - -.pricing-tier { - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.08em; - color: var(--accent); - margin-bottom: 8px; -} - -.pricing-name { - font-size: 22px; - font-weight: 800; - letter-spacing: -0.02em; - margin-bottom: 24px; -} - -.pricing-price { - font-size: 36px; - font-weight: 800; - letter-spacing: -0.03em; - margin-bottom: 32px; -} - -.pricing-price span { - font-size: 16px; - font-weight: 500; - color: var(--text-secondary); -} - -.pricing-features { - list-style: none; - margin-bottom: 32px; -} - -.pricing-features li { - font-size: 14px; - color: var(--text-secondary); - padding: 10px 0; - border-bottom: 1px solid var(--border-light); - display: flex; - align-items: center; - gap: 10px; -} - -.pricing-features li::before { - content: '✓'; - color: var(--accent); - font-weight: 700; - font-size: 13px; - flex-shrink: 0; -} - -.pricing-btn { - display: block; - width: 100%; - padding: 14px; - text-align: center; - border-radius: var(--radius); - font-size: 15px; - font-weight: 600; - transition: all 0.2s; -} - -.pricing-btn-primary { - background: var(--accent); - color: white; - border: 1px solid var(--accent); -} - -.pricing-btn-primary:hover { - background: var(--accent-dark); -} - -.pricing-btn-secondary { - border: 1px solid var(--border); - color: var(--text-secondary); -} - -.pricing-btn-secondary:hover { - border-color: var(--text-tertiary); - color: var(--text); -} - -@media (max-width: 768px) { - .pricing-grid { grid-template-columns: 1fr; } -} - -/* ============================================ - AUDIENCE + AUDIENCE SECTION ============================================ */ .audience-grid { display: grid; @@ -725,34 +602,116 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; } .audience-card { - padding: 40px 32px; - background: var(--bg); - border-radius: var(--radius-lg); text-align: center; + padding: 40px 24px; + background: var(--white); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + transition: all 0.2s; +} + +.audience-card:hover { + border-color: var(--border-light); + box-shadow: var(--shadow-md); } .audience-icon { font-size: 36px; - margin-bottom: 20px; + margin-bottom: 16px; display: block; } .audience-card h3 { - font-size: 17px; + font-size: 16px; font-weight: 700; - margin-bottom: 10px; + margin-bottom: 8px; } .audience-card p { font-size: 14px; color: var(--text-secondary); - line-height: 1.7; + line-height: 1.6; } @media (max-width: 768px) { .audience-grid { grid-template-columns: 1fr; } } +/* ============================================ + PRICING + ============================================ */ +.pricing-card { + max-width: 520px; + margin: 60px auto 0; + background: var(--white); + border: 2px solid var(--accent); + border-radius: var(--radius-xl); + padding: 48px; + text-align: center; + position: relative; + overflow: hidden; +} + +.pricing-badge { + position: absolute; + top: 20px; + right: -32px; + background: var(--accent); + color: white; + font-size: 12px; + font-weight: 700; + padding: 4px 40px; + transform: rotate(45deg); + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.pricing-price { + font-size: 48px; + font-weight: 800; + color: var(--accent); + letter-spacing: -0.03em; + line-height: 1; + margin-bottom: 8px; +} + +.pricing-period { + font-size: 16px; + color: var(--text-secondary); + margin-bottom: 32px; +} + +.pricing-features { + list-style: none; + text-align: left; + margin-bottom: 32px; +} + +.pricing-features li { + padding: 10px 0; + font-size: 15px; + color: var(--text-secondary); + border-bottom: 1px solid var(--border-light); + display: flex; + align-items: center; + gap: 12px; +} + +.pricing-features li::before { + content: '✓'; + color: var(--accent); + font-weight: 700; + font-size: 14px; + flex-shrink: 0; +} + +.pricing-card .btn { + width: 100%; + justify-content: center; + font-size: 16px; + padding: 16px 28px; +} + /* ============================================ FAQ ============================================ */ @@ -763,18 +722,18 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; .faq-item { border-bottom: 1px solid var(--border); + padding: 24px 0; } .faq-question { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 24px 0; - font-size: 16px; + font-size: 17px; font-weight: 600; - text-align: left; - color: var(--text); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + gap: 16px; + user-select: none; transition: color 0.2s; } @@ -782,58 +741,92 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; color: var(--accent); } -.faq-icon { - font-size: 20px; +.faq-question::after { + content: '+'; + font-size: 24px; font-weight: 300; - transition: transform 0.3s; - flex-shrink: 0; - margin-left: 16px; color: var(--text-tertiary); + flex-shrink: 0; + transition: transform 0.3s; } -.faq-item.open .faq-icon { +.faq-item.open .faq-question::after { transform: rotate(45deg); - color: var(--accent); } .faq-answer { max-height: 0; overflow: hidden; - transition: max-height 0.3s ease; -} - -.faq-item.open .faq-answer { - max-height: 200px; -} - -.faq-answer p { - padding: 0 0 24px; + transition: max-height 0.4s ease, padding 0.4s ease; font-size: 15px; color: var(--text-secondary); line-height: 1.7; } +.faq-item.open .faq-answer { + max-height: 500px; + padding-top: 16px; +} + /* ============================================ - CTA SECTION + CONTACT ============================================ */ -.cta-section { +.contact-section { padding: 120px 0; + text-align: center; background: var(--bg); border-top: 1px solid var(--border); } -.cta-inner { +.contact-section .section-title { + margin-bottom: 24px; +} + +.contact-section .section-subtitle { + margin: 0 auto 40px; text-align: center; - max-width: 640px; +} + +.contact-form { + max-width: 480px; margin: 0 auto; } -.cta-actions { - display: flex; - gap: 16px; - justify-content: center; - flex-wrap: wrap; - margin-top: 40px; +.form-group { + margin-bottom: 20px; + text-align: left; +} + +.form-group label { + display: block; + font-size: 14px; + font-weight: 600; + margin-bottom: 6px; + color: var(--text); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 14px 16px; + border: 1px solid var(--border); + border-radius: var(--radius); + font-family: inherit; + font-size: 15px; + transition: border-color 0.2s; + background: var(--white); +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px var(--accent-light); +} + +.form-group textarea { + resize: vertical; + min-height: 120px; } /* ============================================ @@ -842,47 +835,46 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; .footer { padding: 40px 0; border-top: 1px solid var(--border); -} - -.footer-inner { - display: flex; - align-items: center; - justify-content: space-between; -} - -.footer-copy { - font-size: 13px; - color: var(--text-tertiary); -} - -.footer-links { - display: flex; - gap: 24px; - list-style: none; - font-size: 13px; -} - -.footer-links a { + text-align: center; + font-size: 14px; color: var(--text-secondary); - transition: color 0.2s; -} - -.footer-links a:hover { - color: var(--text); } /* ============================================ ANIMATIONS ============================================ */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + .animate-in { opacity: 0; transform: translateY(20px); - transition: opacity 0.6s ease, transform 0.6s ease; + animation: fadeInUp 0.6s ease forwards; } -.animate-in.visible { - opacity: 1; - transform: translateY(0); +.animate-in:nth-child(2) { animation-delay: 0.1s; } +.animate-in:nth-child(3) { animation-delay: 0.2s; } +.animate-in:nth-child(4) { animation-delay: 0.3s; } + +/* ============================================ + DRAKON WIDGET OVERRIDES + ============================================ */ +#drakon-canvas { + width: 100%; + height: 400px; + position: relative; +} + +#drakon-canvas canvas { + border-radius: var(--radius); } @@ -893,7 +885,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; ============================================ -->