diff --git a/index-v4.html b/index-v4.html index a885f76..4e0a12f 100644 --- a/index-v4.html +++ b/index-v4.html @@ -143,10 +143,40 @@ overflow-x: hidden; } + /* ═══════════════════════════════════════════ + BACKGROUND + ═══════════════════════════════════════════ */ + .bg-gradient { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 0; + background: + radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); + } + + .bg-grid { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); + background-size: 60px 60px; + } + /* ═══════════════════════════════════════════ ACCESSIBILITY ═══════════════════════════════════════════ */ - :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; @@ -155,6 +185,38 @@ /* ═══════════════════════════════════════════ ABSTRACT GEOMETRY BACKGROUND (Bauhaus) ═══════════════════════════════════════════ */ + body { + position: relative; + } + + .bg-gradient { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 0; + background: + radial-gradient(ellipse at 20% 0%, rgba(255, 61, 0, 0.08) 0%, transparent 50%), + radial-gradient(ellipse at 80% 100%, rgba(34, 197, 94, 0.06) 0%, transparent 50%), + radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.04) 0%, transparent 60%); + } + + .bg-grid { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); + background-size: 60px 60px; + } + .geo-bg { position: fixed; top: 0; @@ -1708,9 +1770,9 @@ ═══════════════════════════════════════════ */ .pricing-grid { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.25rem; - max-width: 1000px; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; + max-width: 900px; margin: 0 auto; } @@ -1722,24 +1784,50 @@ text-align: center; transition: all 0.3s var(--ease-out); position: relative; + overflow: hidden; + } + + .pricing-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, var(--accent), var(--accent-secondary)); + opacity: 0; + transition: opacity 0.3s; } .pricing-card:hover { - border-color: var(--border-hover); - transform: translateY(-2px); + border-color: var(--accent); + transform: translateY(-4px); + box-shadow: 0 12px 40px rgba(255, 61, 0, 0.1); + } + + .pricing-card:hover::before { + opacity: 1; } .pricing-card.featured { border-color: var(--accent); + background: linear-gradient( + 135deg, + rgba(255, 61, 0, 0.03) 0%, + var(--bg-card) 100% + ); } .pricing-card.featured::before { + opacity: 1; + } + + .pricing-card.featured::after { content: "Популярный"; position: absolute; - top: -0.625rem; - left: 50%; - transform: translateX(-50%); - padding: 0.25rem 1rem; + top: 1rem; + right: 1rem; + padding: 0.25rem 0.75rem; background: var(--accent); color: white; font-size: 0.6875rem; @@ -1749,8 +1837,6 @@ letter-spacing: 0.05em; } - /* Enterprise pricing card */ - /* Pricing enterprise styles */ .pricing-card.enterprise { border-color: var(--accent-secondary); background: linear-gradient( @@ -1758,7 +1844,10 @@ rgba(34, 197, 94, 0.05) 0%, var(--bg-card) 100% ); - position: relative; + } + + .pricing-card.enterprise::before { + background: linear-gradient(90deg, var(--accent-secondary), var(--accent-tertiary)); } .pricing-label-custom { @@ -2274,6 +2363,20 @@
+ + + +