Spaces:
Running
Running
| /* Base & Variables */ | |
| :root { | |
| --primary: #818cf8; /* Indigo 400 */ | |
| --primary-light: #a5b4fc; /* Indigo 300 */ | |
| --primary-dark: #6366f1; /* Indigo 500 */ | |
| --secondary: #38bdf8; /* Sky 400 */ | |
| --accent: #f472b6; /* Pink 400 */ | |
| --bg-main: #0f172a; /* Slate 900 - Semi Dark */ | |
| --bg-alt: #1e293b; /* Slate 800 */ | |
| --bg-card: #1e293b; | |
| --bg-card-hover: #334155; /* Slate 700 */ | |
| --text-main: #f8fafc; /* Slate 50 */ | |
| --text-body: #cbd5e1; /* Slate 300 */ | |
| --text-muted: #94a3b8; /* Slate 400 */ | |
| --border-light: #334155; /* Slate 700 */ | |
| --border-med: #475569; /* Slate 600 */ | |
| --danger: #f87171; /* Red 400 */ | |
| --success: #34d399; /* Emerald 400 */ | |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); | |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4); | |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5); | |
| --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.6), 0 8px 10px -6px rgb(0 0 0 / 0.6); | |
| --radius-md: 0.5rem; | |
| --radius-lg: 1rem; | |
| --radius-xl: 1.5rem; | |
| --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text-body); | |
| background-color: var(--bg-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| h1, h2, h3, h4 { | |
| color: var(--text-main); | |
| line-height: 1.2; | |
| font-weight: 700; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| } | |
| .section-padding { | |
| padding: 6rem 0; | |
| } | |
| .bg-alt { | |
| background-color: var(--bg-alt); | |
| } | |
| /* Utilities */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| background: rgba(129, 140, 248, 0.15); | |
| color: var(--primary); | |
| border-radius: 2rem; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid rgba(129, 140, 248, 0.3); | |
| transition: var(--transition); | |
| } | |
| .badge:hover { | |
| background: rgba(129, 140, 248, 0.25); | |
| transform: scale(1.05); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: var(--radius-md); | |
| font-weight: 600; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-dark); | |
| color: white; | |
| box-shadow: 0 4px 14px 0 rgba(99, 102, 241, 0.4); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary); | |
| transform: translateY(-3px) scale(1.02); | |
| box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| color: var(--text-main); | |
| border: 1px solid var(--border-med); | |
| } | |
| .btn-outline:hover { | |
| border-color: var(--primary); | |
| color: var(--primary-light); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); | |
| background: rgba(129, 140, 248, 0.05); | |
| } | |
| /* Navbar */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| background: rgba(15, 23, 42, 0.85); /* Semi dark transparent */ | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border-light); | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| transition: var(--transition); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 800; | |
| font-size: 1.25rem; | |
| color: var(--text-main); | |
| transition: transform 0.3s ease; | |
| } | |
| .logo:hover { | |
| transform: scale(1.05); | |
| } | |
| .logo-icon { | |
| color: var(--primary); | |
| animation: pulse-glow 3s infinite alternate; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| color: var(--text-body); | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -4px; | |
| left: 0; | |
| background-color: var(--primary); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-light); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| position: relative; | |
| padding-top: 12rem; | |
| padding-bottom: 8rem; | |
| text-align: center; | |
| overflow: hidden; | |
| } | |
| .bg-blobs { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| opacity: 0.6; | |
| } | |
| .blob { | |
| position: absolute; | |
| filter: blur(90px); | |
| border-radius: 50%; | |
| animation: float 12s ease-in-out infinite; | |
| } | |
| .blob-1 { | |
| top: -10%; | |
| left: -10%; | |
| width: 500px; | |
| height: 500px; | |
| background: rgba(99, 102, 241, 0.3); | |
| } | |
| .blob-2 { | |
| bottom: -20%; | |
| right: -10%; | |
| width: 600px; | |
| height: 600px; | |
| background: rgba(14, 165, 233, 0.25); | |
| animation-delay: -6s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translate(0, 0) scale(1); } | |
| 33% { transform: translate(5%, 10%) scale(1.05); } | |
| 66% { transform: translate(-5%, 5%) scale(0.95); } | |
| } | |
| .hero-title { | |
| font-size: 4.5rem; | |
| margin-bottom: 1.5rem; | |
| letter-spacing: -0.02em; | |
| } | |
| .hero-subtitle { | |
| font-size: 1.25rem; | |
| color: var(--text-body); | |
| max-width: 800px; | |
| margin: 0 auto 2.5rem; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 5rem; | |
| } | |
| /* Mockup Browser */ | |
| .hero-mockup { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-xl); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); | |
| border: 1px solid var(--border-light); | |
| overflow: hidden; | |
| text-align: left; | |
| transition: transform 0.5s ease, box-shadow 0.5s ease; | |
| } | |
| .hero-mockup:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 30px 60px -15px rgba(99, 102, 241, 0.3); | |
| border-color: rgba(99, 102, 241, 0.4); | |
| } | |
| .browser-header { | |
| background: #334155; | |
| padding: 1rem; | |
| border-bottom: 1px solid #0f172a; | |
| } | |
| .dots { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .dots span { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #475569; | |
| transition: background 0.3s ease; | |
| } | |
| .hero-mockup:hover .dots span:nth-child(1) { background: #ef4444; } | |
| .hero-mockup:hover .dots span:nth-child(2) { background: #f59e0b; } | |
| .hero-mockup:hover .dots span:nth-child(3) { background: #10b981; } | |
| .browser-body { | |
| padding: 2.5rem; | |
| background: #020617; /* Very dark slate */ | |
| color: #f8fafc; | |
| font-family: monospace; | |
| font-size: 1rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .browser-body::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(180deg, transparent 80%, #020617 100%); | |
| pointer-events: none; | |
| } | |
| .code-comment { color: #64748b; } | |
| .code-keyword { color: #c678dd; } | |
| .code-var { color: #e06c75; } | |
| .code-string { color: #98c379; } | |
| .code-function { color: #61afef; } | |
| /* Section Headers */ | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 5rem; | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .section-desc { | |
| color: var(--text-muted); | |
| font-size: 1.125rem; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Grids */ | |
| .grid-2 { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 2rem; | |
| } | |
| .grid-3 { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| } | |
| /* Cards */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-lg); | |
| padding: 2.5rem; | |
| box-shadow: var(--shadow-sm); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); | |
| transition: var(--transition); | |
| z-index: 1; | |
| } | |
| .card:hover::before { | |
| left: 100%; | |
| transition: 0.8s ease-in-out; | |
| } | |
| .card:hover { | |
| background: var(--bg-card-hover); | |
| box-shadow: var(--shadow-hover); | |
| transform: translateY(-8px); | |
| border-color: rgba(99, 102, 241, 0.4); | |
| } | |
| .card-icon { | |
| width: 4rem; | |
| height: 4rem; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.75rem; | |
| transition: var(--transition); | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .card:hover .card-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .card-icon.old-way { background: rgba(248, 113, 113, 0.1); color: var(--danger); } | |
| .card-icon.new-way { background: rgba(52, 211, 153, 0.1); color: var(--success); } | |
| .card-icon.primary { background: rgba(129, 140, 248, 0.1); color: var(--primary); } | |
| .card-icon.secondary { background: rgba(56, 189, 248, 0.1); color: var(--secondary); } | |
| .card-icon.accent { background: rgba(244, 114, 182, 0.1); color: var(--accent); } | |
| /* Feature Lists */ | |
| .feature-list { | |
| list-style: none; | |
| margin-top: 1.5rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .feature-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-body); | |
| } | |
| .feature-list li i { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| } | |
| .old-way li i { color: var(--danger); } | |
| .new-way li i { color: var(--success); } | |
| /* Workflow Comparison */ | |
| .workflow-comparison { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 2rem; | |
| background: var(--bg-card); | |
| padding: 4rem 3rem; | |
| border-radius: var(--radius-xl); | |
| border: 1px solid var(--border-light); | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .workflow-comparison::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 50%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(52, 211, 153, 0.05)); | |
| pointer-events: none; | |
| } | |
| .workflow-track { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .track-title { | |
| margin-bottom: 2.5rem; | |
| font-size: 1.5rem; | |
| } | |
| .text-danger { color: var(--danger); } | |
| .text-success { color: var(--success); } | |
| .flow-steps { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| width: 100%; | |
| } | |
| .step-box { | |
| width: 100%; | |
| padding: 1.25rem 1rem; | |
| background: var(--bg-alt); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .step-box:hover { | |
| transform: scale(1.05); | |
| border-color: var(--text-muted); | |
| box-shadow: var(--shadow-md); | |
| background: var(--bg-card-hover); | |
| } | |
| .step-box.highlight { | |
| background: rgba(129, 140, 248, 0.1); | |
| border-color: var(--primary); | |
| color: var(--primary-light); | |
| } | |
| .step-box.highlight:hover { | |
| border-color: var(--primary-light); | |
| box-shadow: 0 0 15px rgba(129, 140, 248, 0.3); | |
| } | |
| .flow-arrow { | |
| margin: 1.25rem 0; | |
| color: var(--border-med); | |
| transition: var(--transition); | |
| } | |
| .workflow-track:hover .flow-arrow { | |
| transform: translateY(5px); | |
| color: var(--text-muted); | |
| } | |
| .highlight-arrow { | |
| color: var(--primary); | |
| } | |
| .workflow-track:hover .highlight-arrow { | |
| transform: translateY(5px); | |
| color: var(--primary-light); | |
| } | |
| .success-icon { | |
| color: var(--success); | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| margin-top: 1.5rem; | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .vs-divider { | |
| font-size: 1.75rem; | |
| font-weight: 800; | |
| color: var(--border-light); | |
| padding: 1.5rem; | |
| background: var(--bg-alt); | |
| border-radius: 50%; | |
| box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); | |
| z-index: 2; | |
| } | |
| /* Options Cards */ | |
| .option-card { | |
| position: relative; | |
| } | |
| .card-badge { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--text-muted); | |
| background: var(--bg-alt); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: var(--radius-md); | |
| z-index: 2; | |
| } | |
| .card-text { | |
| color: var(--text-muted); | |
| margin-top: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .code-snippet { | |
| background: #020617; /* Very dark slate */ | |
| color: #e2e8f0; | |
| padding: 1.25rem; | |
| border-radius: var(--radius-md); | |
| font-family: monospace; | |
| font-size: 0.875rem; | |
| margin-bottom: 1.5rem; | |
| border-left: 4px solid var(--primary); | |
| position: relative; | |
| z-index: 2; | |
| transition: var(--transition); | |
| } | |
| .option-card:hover .code-snippet { | |
| border-left-color: var(--secondary); | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.5); | |
| } | |
| .mini-list { | |
| list-style: none; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .mini-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.75rem; | |
| font-size: 0.95rem; | |
| color: var(--text-body); | |
| } | |
| .mini-list li i { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| color: var(--primary); | |
| } | |
| /* Trend Alert */ | |
| .trend-alert { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 1.5rem; | |
| margin-top: 4rem; | |
| background: linear-gradient(to right, rgba(99, 102, 241, 0.1), rgba(14, 165, 233, 0.1)); | |
| border: 1px solid rgba(99, 102, 241, 0.3); | |
| padding: 2.5rem; | |
| border-radius: var(--radius-lg); | |
| transition: var(--transition); | |
| } | |
| .trend-alert:hover { | |
| box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.3); | |
| border-color: rgba(99, 102, 241, 0.5); | |
| transform: translateY(-5px); | |
| } | |
| @keyframes pulse-glow { | |
| 0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0.4); } | |
| 70% { box-shadow: 0 0 0 15px rgba(129, 140, 248, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); } | |
| } | |
| .trend-icon { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| color: var(--primary-light); | |
| flex-shrink: 0; | |
| border-radius: 50%; | |
| animation: pulse-glow 2s infinite; | |
| } | |
| .trend-content h4 { | |
| margin-bottom: 0.75rem; | |
| color: var(--primary-light); | |
| font-size: 1.25rem; | |
| } | |
| /* Stepper */ | |
| .stepper { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2.5rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .stepper::before { | |
| content: ''; | |
| position: absolute; | |
| left: 1.5rem; | |
| top: 0; | |
| height: 100%; | |
| width: 2px; | |
| background: var(--border-light); | |
| z-index: 0; | |
| } | |
| .step { | |
| display: flex; | |
| gap: 2rem; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .step-number { | |
| width: 3rem; | |
| height: 3rem; | |
| border-radius: 50%; | |
| background: var(--bg-main); | |
| border: 2px solid var(--primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| color: var(--primary); | |
| flex-shrink: 0; | |
| box-shadow: 0 0 0 6px var(--bg-main); | |
| transition: var(--transition); | |
| } | |
| .step:hover .step-number { | |
| transform: scale(1.1); | |
| background: var(--primary); | |
| color: white; | |
| } | |
| .step-number.success { | |
| background: var(--success); | |
| border-color: var(--success); | |
| color: var(--bg-main); | |
| } | |
| .step:hover .step-number.success { | |
| box-shadow: 0 0 0 6px var(--bg-main), 0 0 15px var(--success); | |
| } | |
| .step-content { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-light); | |
| padding: 2rem; | |
| border-radius: var(--radius-lg); | |
| flex: 1; | |
| box-shadow: var(--shadow-sm); | |
| transition: var(--transition); | |
| } | |
| .step:hover .step-content { | |
| transform: translateX(10px); | |
| border-color: var(--primary-light); | |
| background: var(--bg-card-hover); | |
| } | |
| .step-content h4 { | |
| margin-bottom: 0.75rem; | |
| color: var(--text-main); | |
| } | |
| .prompt-text { | |
| font-style: italic; | |
| color: var(--primary-light); | |
| font-weight: 500; | |
| background: rgba(129, 140, 248, 0.1); | |
| padding: 0.5rem 1rem; | |
| border-radius: var(--radius-md); | |
| display: inline-block; | |
| } | |
| .chip-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| margin-top: 1.25rem; | |
| } | |
| .chip { | |
| padding: 0.35rem 1rem; | |
| background: var(--bg-alt); | |
| border: 1px solid var(--border-med); | |
| border-radius: 2rem; | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| color: var(--text-body); | |
| } | |
| .step:hover .chip { | |
| border-color: var(--primary); | |
| color: var(--primary-light); | |
| } | |
| .chip:hover { | |
| background: var(--primary); | |
| color: white ; | |
| transform: translateY(-2px); | |
| } | |
| /* Footer */ | |
| .footer { | |
| background: #020617; /* Very dark slate */ | |
| color: var(--text-muted); | |
| padding: 5rem 0 3rem; | |
| text-align: center; | |
| border-top: 1px solid var(--border-light); | |
| } | |
| .footer-brand { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-weight: 800; | |
| font-size: 1.75rem; | |
| color: white; | |
| margin-bottom: 1.5rem; | |
| } | |
| .footer-brand i { | |
| color: var(--primary); | |
| } | |
| .copyright { | |
| margin-top: 3rem; | |
| font-size: 0.875rem; | |
| color: var(--border-med); | |
| } | |
| /* Scroll Animations */ | |
| .animate-on-scroll { | |
| opacity: 0; | |
| visibility: hidden; | |
| will-change: transform, opacity; | |
| } | |
| .fade-up { | |
| transform: translateY(40px); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), | |
| transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .fade-left { | |
| transform: translateX(-40px); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), | |
| transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .fade-right { | |
| transform: translateX(40px); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), | |
| transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .zoom-in { | |
| transform: scale(0.9); | |
| transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), | |
| transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .fade-up.visible, | |
| .fade-left.visible, | |
| .fade-right.visible, | |
| .zoom-in.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(0) scale(1); | |
| } | |
| .delay-1 { transition-delay: 0.1s; } | |
| .delay-2 { transition-delay: 0.2s; } | |
| .delay-3 { transition-delay: 0.3s; } | |
| .delay-4 { transition-delay: 0.4s; } | |
| .delay-5 { transition-delay: 0.5s; } | |
| /* Responsive */ | |
| @media (max-width: 992px) { | |
| .grid-3 { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero-title { | |
| font-size: 3rem; | |
| } | |
| .nav-links { | |
| display: none; | |
| } | |
| .grid-2, .grid-3 { | |
| grid-template-columns: 1fr; | |
| } | |
| .workflow-comparison { | |
| flex-direction: column; | |
| padding: 3rem 1.5rem; | |
| } | |
| .workflow-comparison::before { | |
| width: 100%; | |
| height: 50%; | |
| top: auto; | |
| bottom: 0; | |
| background: linear-gradient(0deg, rgba(52, 211, 153, 0.05), transparent); | |
| } | |
| .vs-divider { | |
| margin: 2rem 0; | |
| } | |
| .stepper::before { | |
| left: 1rem; | |
| } | |
| .step-number { | |
| width: 2rem; | |
| height: 2rem; | |
| font-size: 0.875rem; | |
| } | |
| .step { | |
| gap: 1rem; | |
| } | |
| } | |