diff options
Diffstat (limited to 'static/landing-styles.css')
-rw-r--r-- | static/landing-styles.css | 744 |
1 files changed, 0 insertions, 744 deletions
diff --git a/static/landing-styles.css b/static/landing-styles.css deleted file mode 100644 index cf359fb..0000000 --- a/static/landing-styles.css +++ /dev/null @@ -1,744 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -:root { - --primary-color: #6366f1; - --primary-dark: #4f46e5; - --secondary-color: #f1f5f9; - --text-primary: #1e293b; - --text-secondary: #64748b; - --background: #ffffff; - --surface: #f8fafc; - --border: #e2e8f0; - --success: #10b981; - --warning: #f59e0b; - --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); - --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); - --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -} - -body { - font-family: 'Inter', sans-serif; - line-height: 1.6; - color: var(--text-primary); - background: var(--background); -} - -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; -} - -/* Navigation */ -.navbar { - position: fixed; - top: 0; - width: 100%; - background: rgba(255, 255, 255, 0.95); - backdrop-filter: blur(10px); - z-index: 1000; - border-bottom: 1px solid var(--border); -} - -.nav-container { - max-width: 1200px; - margin: 0 auto; - padding: 1rem 2rem; - display: flex; - justify-content: space-between; - align-items: center; -} - -.nav-logo { - font-size: 1.5rem; - font-weight: 700; - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.nav-menu { - display: flex; - list-style: none; - gap: 2rem; -} - -.nav-link { - text-decoration: none; - color: var(--text-primary); - font-weight: 500; - transition: color 0.3s ease; -} - -.nav-link:hover { - color: var(--primary-color); -} - -.nav-actions { - display: flex; - align-items: center; - gap: 1rem; -} - -.hamburger { - display: none; - flex-direction: column; - cursor: pointer; -} - -.hamburger span { - width: 25px; - height: 3px; - background: var(--text-primary); - margin: 3px 0; - transition: 0.3s; -} - -/* Buttons */ -.btn { - padding: 0.75rem 1.5rem; - border: none; - border-radius: 0.5rem; - font-weight: 600; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; - font-size: 0.875rem; -} - -.btn-large { - padding: 1rem 2rem; - font-size: 1rem; -} - -.btn-full { - width: 100%; - justify-content: center; -} - -.btn-primary { - background: var(--gradient); - color: white; - box-shadow: var(--shadow); -} - -.btn-primary:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-lg); -} - -.btn-secondary { - background: white; - color: var(--text-primary); - border: 2px solid var(--border); -} - -.btn-secondary:hover { - border-color: var(--primary-color); - color: var(--primary-color); -} - -.btn-ghost { - background: transparent; - color: var(--text-primary); - border: none; -} - -.btn-ghost:hover { - background: var(--surface); -} - -/* Hero Section */ -.hero { - min-height: 100vh; - display: flex; - align-items: center; - padding: 6rem 2rem 4rem; - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); -} - -.hero-content { - max-width: 1200px; - margin: 0 auto; - display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; - align-items: center; -} - -.hero-title { - font-size: 3.5rem; - font-weight: 700; - line-height: 1.1; - margin-bottom: 1.5rem; -} - -.gradient-text { - background: var(--gradient); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.hero-subtitle { - font-size: 1.25rem; - color: var(--text-secondary); - margin-bottom: 2rem; - line-height: 1.6; -} - -.hero-buttons { - display: flex; - gap: 1rem; - margin-bottom: 3rem; -} - -.hero-stats { - display: flex; - gap: 2rem; -} - -.stat-item { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -.stat-item strong { - font-size: 1.5rem; - font-weight: 700; - color: var(--primary-color); -} - -.stat-item span { - font-size: 0.875rem; - color: var(--text-secondary); -} - -/* Dashboard Mockup */ -.dashboard-mockup { - background: white; - border-radius: 1rem; - box-shadow: var(--shadow-lg); - overflow: hidden; - transform: perspective(1000px) rotateY(-15deg) rotateX(10deg); - transition: transform 0.3s ease; -} - -.dashboard-mockup:hover { - transform: perspective(1000px) rotateY(-10deg) rotateX(5deg); -} - -.mockup-header { - background: var(--surface); - padding: 1rem; - display: flex; - align-items: center; - gap: 1rem; - border-bottom: 1px solid var(--border); -} - -.mockup-dots { - display: flex; - gap: 0.5rem; -} - -.mockup-dots span { - width: 12px; - height: 12px; - border-radius: 50%; - background: var(--border); -} - -.mockup-dots span:first-child { - background: #ef4444; -} - -.mockup-dots span:nth-child(2) { - background: #f59e0b; -} - -.mockup-dots span:last-child { - background: #10b981; -} - -.mockup-title { - font-size: 0.875rem; - color: var(--text-secondary); -} - -.mockup-content { - display: flex; - height: 300px; -} - -.mockup-sidebar { - width: 200px; - background: var(--surface); - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.sidebar-item { - height: 40px; - background: var(--border); - border-radius: 0.5rem; -} - -.sidebar-item.active { - background: var(--gradient); -} - -.mockup-main { - flex: 1; - padding: 1rem; - display: flex; - flex-direction: column; - gap: 1rem; -} - -.mockup-cards { - display: flex; - gap: 1rem; -} - -.mockup-card { - flex: 1; - height: 100px; - background: var(--surface); - border-radius: 0.5rem; - border: 1px solid var(--border); -} - -.mockup-chart { - flex: 1; - background: var(--surface); - border-radius: 0.5rem; - border: 1px solid var(--border); -} - -/* Social Proof */ -.social-proof { - padding: 4rem 0; - background: var(--background); - text-align: center; -} - -.social-proof-text { - color: var(--text-secondary); - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.company-logos { - display: flex; - justify-content: center; - align-items: center; - gap: 3rem; - flex-wrap: wrap; -} - -.company-logo { - font-size: 1.25rem; - font-weight: 600; - color: var(--text-secondary); - opacity: 0.6; -} - -/* Sections */ -.section-title { - font-size: 2.5rem; - font-weight: 700; - text-align: center; - margin-bottom: 1rem; -} - -.section-subtitle { - font-size: 1.125rem; - color: var(--text-secondary); - text-align: center; - margin-bottom: 3rem; -} - -.section-header { - margin-bottom: 4rem; -} - -/* Features */ -.features { - padding: 6rem 0; - background: var(--surface); -} - -.features-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; -} - -.feature-card { - background: white; - padding: 2rem; - border-radius: 1rem; - box-shadow: var(--shadow); - text-align: center; - transition: transform 0.3s ease; -} - -.feature-card:hover { - transform: translateY(-5px); -} - -.feature-icon { - font-size: 3rem; - margin-bottom: 1rem; -} - -.feature-card h3 { - font-size: 1.25rem; - font-weight: 600; - margin-bottom: 1rem; -} - -.feature-card p { - color: var(--text-secondary); - line-height: 1.6; -} - -/* Testimonials */ -.testimonials { - padding: 6rem 0; - background: var(--background); -} - -.testimonials-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; -} - -.testimonial-card { - background: white; - padding: 2rem; - border-radius: 1rem; - box-shadow: var(--shadow); -} - -.testimonial-content { - margin-bottom: 1.5rem; -} - -.testimonial-content p { - font-style: italic; - color: var(--text-secondary); - line-height: 1.6; -} - -.testimonial-author { - display: flex; - align-items: center; - gap: 1rem; -} - -.author-avatar { - width: 48px; - height: 48px; - border-radius: 50%; - background: var(--gradient); - color: white; - display: flex; - align-items: center; - justify-content: center; - font-weight: 600; -} - -.author-name { - font-weight: 600; -} - -.author-title { - font-size: 0.875rem; - color: var(--text-secondary); -} - -/* Pricing */ -.pricing { - padding: 6rem 0; - background: var(--surface); -} - -.pricing-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - max-width: 1000px; - margin: 0 auto; -} - -.pricing-card { - background: white; - padding: 2rem; - border-radius: 1rem; - box-shadow: var(--shadow); - position: relative; - text-align: center; -} - -.pricing-card.featured { - border: 2px solid var(--primary-color); - transform: scale(1.05); -} - -.pricing-badge { - position: absolute; - top: -12px; - left: 50%; - transform: translateX(-50%); - background: var(--gradient); - color: white; - padding: 0.5rem 1rem; - border-radius: 1rem; - font-size: 0.875rem; - font-weight: 600; -} - -.pricing-header { - margin-bottom: 2rem; -} - -.pricing-header h3 { - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 1rem; -} - -.price { - display: flex; - align-items: baseline; - justify-content: center; - gap: 0.25rem; -} - -.price-amount { - font-size: 3rem; - font-weight: 700; - color: var(--primary-color); -} - -.price-period { - color: var(--text-secondary); -} - -.pricing-features { - list-style: none; - margin-bottom: 2rem; -} - -.pricing-features li { - padding: 0.5rem 0; - color: var(--text-secondary); - border-bottom: 1px solid var(--border); -} - -.pricing-features li:last-child { - border-bottom: none; -} - -/* CTA */ -.cta { - padding: 6rem 0; - background: var(--text-primary); - color: white; - text-align: center; -} - -.cta-content h2 { - font-size: 2.5rem; - font-weight: 700; - margin-bottom: 1rem; -} - -.cta-content p { - font-size: 1.125rem; - opacity: 0.9; - margin-bottom: 2rem; -} - -.cta-buttons { - display: flex; - justify-content: center; - gap: 1rem; - margin-bottom: 2rem; -} - -.cta-note { - font-size: 0.875rem; - opacity: 0.7; -} - -/* Footer */ -.footer { - background: var(--text-primary); - color: white; - padding: 4rem 0 2rem; -} - -.footer-content { - display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 3rem; - margin-bottom: 3rem; -} - -.footer-logo { - font-size: 1.5rem; - font-weight: 700; - margin-bottom: 1rem; -} - -.footer-section h4 { - font-weight: 600; - margin-bottom: 1rem; -} - -.footer-section ul { - list-style: none; -} - -.footer-section ul li { - margin-bottom: 0.5rem; -} - -.footer-section ul li a { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: color 0.3s ease; -} - -.footer-section ul li a:hover { - color: white; -} - -.footer-bottom { - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 2rem; - border-top: 1px solid rgba(255, 255, 255, 0.1); -} - -.footer-links { - display: flex; - gap: 2rem; -} - -.footer-links a { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: color 0.3s ease; -} - -.footer-links a:hover { - color: white; -} - -/* Responsive Design */ -@media (max-width: 768px) { - .nav-actions { - display: none; - } - - .hamburger { - display: flex; - } - - .nav-menu { - display: none; - } - - .hero-content { - grid-template-columns: 1fr; - text-align: center; - } - - .hero-title { - font-size: 2.5rem; - } - - .hero-buttons { - flex-direction: column; - align-items: center; - } - - .hero-stats { - justify-content: center; - } - - .dashboard-mockup { - transform: none; - } - - .features-grid, - .testimonials-grid { - grid-template-columns: 1fr; - } - - .pricing-grid { - grid-template-columns: 1fr; - } - - .pricing-card.featured { - transform: none; - } - - .cta-buttons { - flex-direction: column; - align-items: center; - } - - .footer-content { - grid-template-columns: 1fr; - text-align: center; - } - - .footer-bottom { - flex-direction: column; - gap: 1rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .container { - padding: 0 1rem; - } - - .hero { - padding: 4rem 1rem 2rem; - } - - .hero-title { - font-size: 2rem; - } - - .section-title { - font-size: 2rem; - } - - .mockup-content { - height: 200px; - } - - .mockup-sidebar { - width: 120px; - } -} |