diff --git a/assets/css/custom.css b/assets/css/custom.css deleted file mode 100644 index f4aba09..0000000 --- a/assets/css/custom.css +++ /dev/null @@ -1,387 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); - -:root { - --font-family: 'Inter', sans-serif; - --background-body: #FFFFFF; - --text-color-dark: #101828; - --text-color-light: #667085; - --primary-color: #3B82F6; - --border-color: #EAECF0; - --white: #FFFFFF; - --section-bg: #F9FAFB; -} - -/* --- Reset & Base Styles --- */ -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -body { - font-family: var(--font-family); - background-color: var(--background-body); - color: var(--text-color-light); - line-height: 1.6; - -webkit-font-smoothing: antialiased; -} - -.container { - max-width: 1280px; - margin-left: auto; - margin-right: auto; - padding-left: 32px; - padding-right: 32px; -} - -a { - text-decoration: none; - color: var(--primary-color); -} - -h1, h2, h3, h4, h5, h6 { - color: var(--text-color-dark); - font-weight: 600; -} - -h1 { font-size: 60px; line-height: 1.2; letter-spacing: -0.02em; } -h2 { font-size: 48px; line-height: 1.2; } -h3 { font-size: 20px; line-height: 1.5; } - -/* --- Header --- */ -.header { - padding: 24px 0; - background-color: var(--white); - position: sticky; - top: 0; - z-index: 10; - border-bottom: 1px solid var(--border-color); -} - -.nav-container { - display: flex; - justify-content: space-between; - align-items: center; -} - -.logo { - font-weight: 700; - font-size: 24px; - color: var(--text-color-dark); -} - -.nav-links { - display: flex; - align-items: center; - gap: 32px; -} - -.nav-links a { - color: var(--text-color-light); - font-weight: 500; - transition: color 0.3s ease; -} - -.nav-links a:hover { - color: var(--primary-color); -} - -.nav-actions { - display: flex; - gap: 12px; -} - -/* --- Buttons --- */ -.btn { - padding: 12px 20px; - border-radius: 8px; - font-weight: 500; - font-size: 16px; - border: 1px solid transparent; - cursor: pointer; - transition: all 0.3s ease; - display: inline-block; -} - -.btn-secondary { - background-color: var(--white); - color: var(--text-color-light); - border-color: #D0D5DD; - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); -} - -.btn-secondary:hover { - background-color: #F9FAFB; -} - -.btn-primary { - background: var(--primary-color); - color: var(--white); - border-color: var(--primary-color); - box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); -} - -.btn-primary:hover { - background: #3538b7; -} - -/* --- Hero Section --- */ -.hero { - padding: 96px 0; -} - -.hero-grid { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - gap: 64px; -} - -.hero-content .tagline { - color: var(--primary-color); - font-weight: 600; - margin-bottom: 16px; -} - -.hero-content h1 { - margin-bottom: 24px; -} - -.hero-content .subtitle { - font-size: 20px; - max-width: 550px; - margin-bottom: 48px; -} - -.hero-actions { - display: flex; - gap: 12px; -} - -.hero-image img { - width: 100%; - height: auto; - border-radius: 16px; -} - -/* --- Clients Section --- */ -.clients { - padding: 48px 0; - text-align: center; -} - -.clients .heading { - color: var(--text-color-light); - font-weight: 500; - margin-bottom: 24px; -} - -.client-logos { - display: flex; - justify-content: space-around; - align-items: center; - gap: 32px; - flex-wrap: wrap; -} - -.client-logos img { - height: 32px; - opacity: 0.7; - filter: grayscale(100%); - transition: opacity 0.3s, filter 0.3s; -} - -.client-logos img:hover { - opacity: 1; - filter: grayscale(0%); -} - -/* --- Features Section --- */ -.how-it-works-section { - padding: 96px 0; - background-color: var(--section-bg); -} - -.section-header { - text-align: center; - max-width: 768px; - margin: 0 auto 64px; -} - -.section-header .tagline { - color: var(--primary-color); - font-weight: 600; - margin-bottom: 12px; -} - -.section-header h2 { - margin-bottom: 20px; -} - -.how-it-works-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 32px; -} - -.how-it-works-card { - text-align: center; - border: 1px solid var(--border-color); - border-radius: 16px; - padding: 40px; - transition: all 0.3s ease; -} - -.how-it-works-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(16, 24, 40, 0.05); -} - -.how-it-works-card .card-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 64px; - height: 64px; - border-radius: 50%; - background-color: #EEF4FF; - margin-bottom: 24px; -} - -.how-it-works-card .card-icon img { - width: 32px; - height: 32px; -} - -.how-it-works-card h3 { - margin-bottom: 8px; -} - -/* --- CTA Section --- */ -.cta-section { - padding: 96px 0; - text-align: center; -} - -.cta-section h2 { - margin-bottom: 20px; -} - -.cta-section .subtitle { - font-size: 20px; - max-width: 768px; - margin: 0 auto 40px; -} - -/* --- Footer --- */ -.footer { - padding: 64px 0; - background-color: var(--background-body); - border-top: 1px solid var(--border-color); - font-size: 16px; -} - -.footer-grid { - display: grid; - grid-template-columns: 2fr repeat(4, 1fr); - gap: 64px; -} - -.footer-about .logo { - margin-bottom: 24px; -} - -.footer-col h4 { - color: #98A2B3; - font-size: 14px; - font-weight: 600; - margin-bottom: 16px; -} - -.footer-col ul { - list-style: none; -} - -.footer-col ul li { - margin-bottom: 12px; -} - -.footer-col ul a { - color: var(--text-color-light); - font-weight: 500; -} -.footer-col ul a:hover { - color: var(--primary-color); -} - -.footer-bottom { - margin-top: 64px; - padding-top: 32px; - border-top: 1px solid var(--border-color); - display: flex; - justify-content: space-between; - align-items: center; -} - -.social-links { - display: flex; - gap: 24px; -} - -.social-links a img { - width: 24px; - height: 24px; -} - -/* --- Responsive Design --- */ -@media (max-width: 1024px) { - h1 { font-size: 48px; } - h2 { font-size: 36px; } - .hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; } - .hero-content .subtitle { margin-left: auto; margin-right: auto; } - .hero-actions { justify-content: center; } - .hero-image { order: -1; } - .how-it-works-grid { grid-template-columns: 1fr; } - .footer-grid { grid-template-columns: 1fr; gap: 48px; } -} - -@media (max-width: 768px) { - .nav-links, .nav-actions .btn-secondary { display: none; } -} - -/* Product Page Specific Styles */ -#human-in-loop-tabs .tab-button { - border-bottom-width: 2px; - border-color: transparent; - color: var(--text-color-dark); - transition: all 0.3s ease; - padding: 1rem 1.5rem; - font-weight: 600; -} - -#human-in-loop-tabs .tab-button:hover { - border-color: var(--primary-color); - color: var(--primary-color); - opacity: 1; -} - -#human-in-loop-tabs .tab-button.active-tab { - border-color: var(--primary-color); - color: var(--primary-color); - background-color: #F9FAFB; - opacity: 1; -} - -#human-in-loop-tabs .tab-content { - animation: fadeIn 0.5s; -} - -@keyframes fadeIn { - from { opacity: 0; transform: translateY(10px); } - to { opacity: 1; transform: translateY(0); } -} - -.automates-list li:nth-child(2n) { - justify-self: end; -} - diff --git a/how_it_works.php b/how_it_works.php index 01662bc..b74d0ed 100644 --- a/how_it_works.php +++ b/how_it_works.php @@ -19,7 +19,7 @@ Home Problem Why FinMox - How It Works + How It Works ROI Pricing diff --git a/pricing.php b/pricing.php index 28d9447..ff9df62 100644 --- a/pricing.php +++ b/pricing.php @@ -21,7 +21,7 @@ Why FinMox How It Works ROI - Pricing + Pricing
Sign In diff --git a/problem.php b/problem.php index 131f3fd..7deebf9 100644 --- a/problem.php +++ b/problem.php @@ -20,7 +20,7 @@
FinMox