diff --git a/index.html b/index.html index aa9acd0..9e7d7a5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - +
@@ -12,10 +12,13 @@ a.kt-ai-btn { text-decoration: none; } .step { display: none; } .step.active { display: block; } - .kt-ai-hero { padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); } + .kt-ai-hero { + padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); + background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%); + } .role-poster { position: relative; - background: var(--kt-ai-card-bg); + background: white; border: 1px solid var(--kt-ai-border); border-radius: var(--kt-ai-radius-2xl); padding: var(--kt-ai-space-8); @@ -25,9 +28,17 @@ min-height: 280px; display: flex; flex-direction: column; + box-shadow: 0 1px 3px rgba(0,0,0,0.05); + } + .role-poster:hover { + transform: translateY(-8px); + box-shadow: 0 12px 40px rgba(0,0,0,0.1); + border-color: var(--role-accent, var(--kt-ai-primary)); + } + .role-poster.selected { + outline: 2px solid var(--role-accent, var(--kt-ai-primary)); + box-shadow: 0 12px 40px rgba(0,0,0,0.15); } - .role-poster:hover { transform: translateY(-8px); border-color: var(--kt-ai-primary); } - .role-poster.selected { outline: 2px solid var(--kt-ai-primary); } .role-poster::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--role-accent, var(--kt-ai-primary)); @@ -37,13 +48,14 @@ background: var(--role-accent, var(--kt-ai-primary)); display: flex; align-items: center; justify-content: center; margin-bottom: var(--kt-ai-space-5); + flex-shrink: 0; } - .role-icon svg { width: 28px; height: 28px; color: white; } + .role-icon svg { width: 32px; height: 32px; color: white; flex-shrink: 0; } .role-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-3); } - .role-desc { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.5; flex-grow: 1; } - .product-card { cursor: pointer; transition: all 0.3s ease; } - .product-card:hover { transform: translateY(-4px); } - .product-card.selected { outline: 2px solid var(--kt-ai-primary); } + .role-desc { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.6; flex-grow: 1; } + .product-card { cursor: pointer; transition: all 0.3s ease; background: white; border: 1px solid var(--kt-ai-border); } + .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } + .product-card.selected { outline: 2px solid var(--kt-ai-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.12); } .product-icon { width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg); background: var(--kt-ai-primary); @@ -83,42 +95,42 @@Выберите роль — мы подберем подходящие сервисы