| | |
| |
|
| | :root { |
| | --bg-primary: #0a0e1a; |
| | --bg-secondary: #141824; |
| | --bg-card: #1a1f2e; |
| | --text-primary: #e8eaed; |
| | --text-secondary: #9aa0a8; |
| | --accent-blue: #3b82f6; |
| | --accent-cyan: #06b6d4; |
| | --accent-purple: #8b5cf6; |
| | --border-color: rgba(255, 255, 255, 0.1); |
| | --hover-bg: rgba(59, 130, 246, 0.1); |
| | --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); |
| | --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5); |
| | --gradient-primary: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-cyan) 100%); |
| | --gradient-bg: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-card) 100%); |
| | } |
| |
|
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| |
|
| | body { |
| | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; |
| | line-height: 1.6; |
| | color: var(--text-primary); |
| | background: var(--bg-primary); |
| | } |
| |
|
| | .container { |
| | max-width: 1200px; |
| | margin: 0 auto; |
| | padding: 0 2rem; |
| | } |
| |
|
| | |
| | |
| | |
| |
|
| | .guide-section { |
| | background: var(--gradient-bg); |
| | padding: 4rem 0; |
| | min-height: 100vh; |
| | } |
| |
|
| | .guide-header { |
| | text-align: center; |
| | margin-bottom: 4rem; |
| | } |
| |
|
| | .robot-icon { |
| | width: 120px; |
| | height: 120px; |
| | margin-bottom: 2rem; |
| | animation: float 3s ease-in-out infinite; |
| | } |
| |
|
| | @keyframes float { |
| | 0%, 100% { transform: translateY(0px); } |
| | 50% { transform: translateY(-10px); } |
| | } |
| |
|
| | .guide-header h1 { |
| | font-size: 3rem; |
| | font-weight: 800; |
| | background: var(--gradient-primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .guide-description { |
| | font-size: 1.25rem; |
| | color: var(--text-primary); |
| | margin-bottom: 1.5rem; |
| | max-width: 800px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | } |
| |
|
| | .guide-info { |
| | font-size: 1rem; |
| | color: var(--text-secondary); |
| | max-width: 800px; |
| | margin-left: auto; |
| | margin-right: auto; |
| | } |
| |
|
| | .how-to-section { |
| | margin: 4rem 0; |
| | } |
| |
|
| | .how-to-section h2 { |
| | text-align: center; |
| | font-size: 2.5rem; |
| | color: var(--accent-cyan); |
| | margin-bottom: 3rem; |
| | } |
| |
|
| | |
| | .carousel { |
| | position: relative; |
| | background: var(--bg-card); |
| | border-radius: 20px; |
| | padding: 3rem; |
| | border: 1px solid var(--border-color); |
| | backdrop-filter: blur(10px); |
| | margin-bottom: 3rem; |
| | box-shadow: var(--shadow-lg); |
| | } |
| |
|
| | .carousel-inner { |
| | position: relative; |
| | min-height: 500px; |
| | } |
| |
|
| | .carousel-item { |
| | display: none; |
| | animation: fadeIn 0.5s; |
| | } |
| |
|
| | .carousel-item.active { |
| | display: block; |
| | } |
| |
|
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| |
|
| | .step-content { |
| | display: flex; |
| | flex-direction: column; |
| | gap: 2rem; |
| | align-items: center; |
| | } |
| |
|
| | .step-image { |
| | max-width: 100%; |
| | height: auto; |
| | border-radius: 12px; |
| | border: 2px solid var(--border-color); |
| | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); |
| | } |
| |
|
| | .step-text { |
| | text-align: center; |
| | max-width: 700px; |
| | } |
| |
|
| | .step-text h3 { |
| | font-size: 1.75rem; |
| | color: var(--accent-blue); |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .step-text p { |
| | font-size: 1.1rem; |
| | color: var(--text-secondary); |
| | line-height: 1.8; |
| | } |
| |
|
| | .step-text code { |
| | background: var(--hover-bg); |
| | padding: 0.2rem 0.5rem; |
| | border-radius: 4px; |
| | font-family: 'Courier New', monospace; |
| | color: var(--accent-cyan); |
| | } |
| |
|
| | |
| | .carousel-control { |
| | position: absolute; |
| | top: 50%; |
| | transform: translateY(-50%); |
| | background: var(--bg-card); |
| | border: 1px solid var(--border-color); |
| | color: var(--text-primary); |
| | font-size: 2rem; |
| | padding: 1rem 1.5rem; |
| | cursor: pointer; |
| | border-radius: 50%; |
| | transition: all 0.3s ease; |
| | backdrop-filter: blur(10px); |
| | z-index: 10; |
| | } |
| |
|
| | .carousel-control:hover { |
| | background: var(--accent-blue); |
| | border-color: var(--accent-blue); |
| | transform: translateY(-50%) scale(1.1); |
| | box-shadow: var(--shadow-sm); |
| | } |
| |
|
| | .carousel-control.prev { |
| | left: -20px; |
| | } |
| |
|
| | .carousel-control.next { |
| | right: -20px; |
| | } |
| |
|
| | |
| | .carousel-indicators { |
| | display: flex; |
| | justify-content: center; |
| | gap: 0.5rem; |
| | margin-top: 2rem; |
| | } |
| |
|
| | .indicator { |
| | width: 12px; |
| | height: 12px; |
| | border-radius: 50%; |
| | background: rgba(255, 255, 255, 0.3); |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | } |
| |
|
| | .indicator.active { |
| | background: var(--gradient-primary); |
| | width: 30px; |
| | border-radius: 6px; |
| | } |
| |
|
| | .indicator:hover { |
| | background: rgba(255, 255, 255, 0.5); |
| | } |
| |
|
| | |
| | .delete-warning { |
| | background: rgba(139, 92, 246, 0.1); |
| | border: 2px solid var(--accent-purple); |
| | border-radius: 12px; |
| | padding: 1.5rem; |
| | text-align: center; |
| | font-size: 1.1rem; |
| | color: var(--accent-purple); |
| | } |
| |
|
| | |
| | .separator { |
| | background: var(--bg-primary); |
| | padding: 3rem 0; |
| | text-align: center; |
| | } |
| |
|
| | .separator h2 { |
| | font-size: 2rem; |
| | color: var(--text-secondary); |
| | } |
| |
|
| | |
| | |
| | |
| |
|
| | .template-section { |
| | background: var(--gradient-bg); |
| | padding: 4rem 0; |
| | min-height: 100vh; |
| | } |
| |
|
| | .hero { |
| | text-align: center; |
| | padding: 4rem 0; |
| | } |
| |
|
| | .hero-robot-icon { |
| | width: 100px; |
| | height: 100px; |
| | margin-bottom: 2rem; |
| | animation: float 3s ease-in-out infinite; |
| | } |
| |
|
| | .hero-title { |
| | font-size: 3.5rem; |
| | font-weight: 800; |
| | background: var(--gradient-primary); |
| | -webkit-background-clip: text; |
| | -webkit-text-fill-color: transparent; |
| | background-clip: text; |
| | margin-bottom: 3rem; |
| | } |
| |
|
| | .demo-placeholder { |
| | background: var(--bg-card); |
| | border: 2px dashed var(--border-color); |
| | border-radius: 20px; |
| | padding: 4rem 2rem; |
| | margin: 3rem auto; |
| | max-width: 800px; |
| | color: var(--text-secondary); |
| | font-size: 1.1rem; |
| | } |
| |
|
| | .keywords { |
| | display: flex; |
| | gap: 1rem; |
| | justify-content: center; |
| | flex-wrap: wrap; |
| | margin: 2rem 0; |
| | } |
| |
|
| | .keyword { |
| | background: var(--gradient-primary); |
| | padding: 0.5rem 1.5rem; |
| | border-radius: 20px; |
| | font-weight: 600; |
| | font-size: 0.9rem; |
| | transition: transform 0.3s ease; |
| | } |
| |
|
| | .keyword:hover { |
| | transform: scale(1.05); |
| | } |
| |
|
| | .description { |
| | font-size: 1.2rem; |
| | color: var(--text-secondary); |
| | max-width: 800px; |
| | margin: 2rem auto 3rem; |
| | line-height: 1.8; |
| | } |
| |
|
| | .install-button { |
| | background: var(--gradient-primary); |
| | color: var(--text-primary); |
| | font-size: 1.2rem; |
| | font-weight: 700; |
| | padding: 1rem 3rem; |
| | border: none; |
| | border-radius: 50px; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | display: inline-flex; |
| | align-items: center; |
| | gap: 0.5rem; |
| | box-shadow: var(--shadow-lg); |
| | } |
| |
|
| | .install-button:hover { |
| | transform: translateY(-2px); |
| | box-shadow: 0 15px 40px rgba(59, 130, 246, 0.5); |
| | } |
| |
|
| | .dashboard-input { |
| | display: flex; |
| | flex-direction: column; |
| | gap: 1rem; |
| | max-width: 500px; |
| | margin: 2rem auto 0; |
| | background: var(--bg-card); |
| | padding: 2rem; |
| | border-radius: 12px; |
| | border: 1px solid var(--border-color); |
| | } |
| |
|
| | .dashboard-input label { |
| | font-weight: 600; |
| | color: var(--text-primary); |
| | } |
| |
|
| | .dashboard-input input { |
| | padding: 0.75rem 1rem; |
| | border-radius: 8px; |
| | border: 1px solid var(--border-color); |
| | background: var(--bg-secondary); |
| | color: var(--text-primary); |
| | font-size: 1rem; |
| | } |
| |
|
| | .dashboard-input button { |
| | background: var(--gradient-primary); |
| | color: var(--text-primary); |
| | padding: 0.75rem 2rem; |
| | border: none; |
| | border-radius: 8px; |
| | font-weight: 600; |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | } |
| |
|
| | .dashboard-input button:hover { |
| | transform: translateY(-2px); |
| | box-shadow: var(--shadow-sm); |
| | } |
| |
|
| | |
| | .footer { |
| | background: var(--bg-primary); |
| | padding: 3rem 0; |
| | text-align: center; |
| | border-top: 1px solid var(--border-color); |
| | } |
| |
|
| | .footer p { |
| | color: var(--text-secondary); |
| | margin-bottom: 1rem; |
| | } |
| |
|
| | .browse-link { |
| | color: var(--accent-blue); |
| | text-decoration: none; |
| | font-weight: 600; |
| | font-size: 1.1rem; |
| | transition: color 0.3s ease; |
| | } |
| |
|
| | .browse-link:hover { |
| | color: var(--accent-cyan); |
| | } |
| |
|
| | |
| | @media (max-width: 768px) { |
| | .guide-header h1, |
| | .hero-title { |
| | font-size: 2rem; |
| | } |
| |
|
| | .how-to-section h2 { |
| | font-size: 1.75rem; |
| | } |
| |
|
| | .carousel { |
| | padding: 1.5rem; |
| | } |
| |
|
| | .carousel-inner { |
| | min-height: 600px; |
| | } |
| |
|
| | .step-text h3 { |
| | font-size: 1.25rem; |
| | } |
| |
|
| | .step-text p { |
| | font-size: 1rem; |
| | } |
| |
|
| | .carousel-control { |
| | font-size: 1.5rem; |
| | padding: 0.75rem 1rem; |
| | } |
| |
|
| | .carousel-control.prev { |
| | left: 0; |
| | } |
| |
|
| | .carousel-control.next { |
| | right: 0; |
| | } |
| |
|
| | .container { |
| | padding: 0 1rem; |
| | } |
| | } |
| |
|
