/* CSS Variables for Design System */ :root { /* Colors - Light & Warm Theme */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-accent-blue: #f0f9ff; --bg-accent-green: #ecfdf5; --color-primary: #60a5fa; --color-accent: #22d3ee; --color-success: #10b981; --color-cta: #fb923c; --text-primary: #1f2937; --text-secondary: #6b7280; --text-header: #1e40af; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 0.15s ease-in-out; --transition-normal: 0.3s ease-in-out; --transition-slow: 0.5s ease-in-out; /* Measured at runtime to prevent overlap with fixed header */ --header-height: 80px; /* fallback */ } /* Business Theme Overrides (non-destructive) */ /* Apply by adding class `theme-business` on */ .theme-business { /* Brand & text colors */ --color-primary: #14b8a6; /* Teal */ --color-cta: #14b8a6; /* Use brand teal as CTA */ --text-header: #0f172a; /* Deep heading color */ --text-primary: #334155; /* Body text */ /* Surfaces */ --bg-accent-blue: #e6fffb; /* subtle minty bg for accents */ --bg-accent-green: #f0fdfa; } /* Component refinements for Business Theme */ .theme-business .cta-button { border-radius: 9999px; /* pill */ } .theme-business .cta-button.primary { background: linear-gradient(135deg, #14b8a6, #0f766e); } .theme-business .cta-button.secondary { border-color: #14b8a6; color: #0f766e; } .theme-business .icon { display: inline-block; vertical-align: middle; color: var(--color-primary); } /* Subtle header shadow when scrolled */ .header.is-scrolled { box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06); } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--text-primary); background-color: var(--bg-primary); } /* Slightly reduce overall font size for English on desktop to better fit longer text */ @media (min-width: 992px) { html[lang="en"] { font-size: 15px; /* default ~16px -> ~6% smaller */ } } .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); } /* Header Styles */ .header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); z-index: 1000; transition: var(--transition-normal); } .header-content { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md) 0; min-height: 60px; } .logo { flex-shrink: 0; margin-right: var(--spacing-lg); } .logo h1 { font-size: var(--font-size-xl); font-weight: 700; color: var(--color-primary); margin: 0; } .nav { flex: 1; display: flex; justify-content: center; overflow: hidden; } .nav-list { display: flex; list-style: none; gap: var(--spacing-md); margin: 0; padding: 0; flex-wrap: nowrap; align-items: center; } .nav-link { text-decoration: none; color: var(--text-primary); font-weight: 500; transition: var(--transition-fast); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md); white-space: nowrap; font-size: var(--font-size-sm); } .nav-link:hover { color: var(--color-primary); background-color: var(--bg-accent-blue); } .header-actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; margin-left: var(--spacing-lg); } .language-toggle { background: none; border: 1px solid var(--text-secondary); color: var(--text-secondary); padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); } .language-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Button Styles */ .cta-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-lg); border: none; border-radius: var(--radius-lg); font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--transition-fast); font-size: var(--font-size-base); } .cta-button.primary { background: linear-gradient(135deg, var(--color-cta), #ff7849); color: white; box-shadow: var(--shadow-md); } .cta-button.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .cta-button.secondary { background: var(--bg-primary); color: var(--color-primary); border: 2px solid var(--color-primary); } .cta-button.secondary:hover { background: var(--color-primary); color: white; } .cta-button.large { padding: var(--spacing-md) var(--spacing-2xl); font-size: var(--font-size-lg); } /* Hero Section */ .hero { padding: calc(var(--header-height) + 2rem) 0 4rem; background: linear-gradient(135deg, var(--bg-accent-blue), var(--bg-accent-green)); min-height: 100vh; display: flex; align-items: center; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: center; } .hero-title { font-size: var(--font-size-4xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--spacing-lg); color: var(--text-header); } .highlight { color: var(--color-primary); } .hero-description { font-size: var(--font-size-lg); color: var(--text-secondary); margin-bottom: var(--spacing-2xl); } .hero-actions { display: flex; gap: var(--spacing-lg); } /* Hero Visual */ .hero-illustration { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xl); } /* Hero image styling (replaces animated avatar) */ .hero-image { position: relative; /* above decorative arch */ z-index: 2; width: clamp(320px, 44vw, 620px); height: auto; display: block; border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid rgba(2, 6, 23, 0.08); } /* Hero decorative arch and subtle orbs (CSS-only, no HTML change) */ .hero-illustration::before { content: ""; position: absolute; z-index: 1; top: -10px; width: clamp(320px, 44vw, 620px); height: clamp(320px, 48vw, 700px); background: linear-gradient(180deg, rgba(20, 184, 166, 0.16), rgba(20, 184, 166, 0.08)); border-radius: 24px 24px 0 0 / 40% 40% 0 0; /* arch-like */ filter: drop-shadow(0 10px 25px rgba(17, 94, 89, 0.12)); } .hero-illustration::after { content: ""; position: absolute; z-index: 0; right: -20px; bottom: 10px; width: 120px; height: 120px; background: radial-gradient(closest-side, rgba(20,184,166,0.18), transparent 70%); filter: blur(2px); } .ai-avatar { position: relative; width: 200px; height: 200px; } .avatar-circle { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .avatar-glow { position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px; background: radial-gradient(circle, rgba(96, 165, 250, 0.3), transparent); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 0.3; } } .feature-cards { display: flex; gap: var(--spacing-md); justify-content: center; position: relative; z-index: 3; /* hover above decorative arch */ transform: translateY(-24px); /* float under the image */ max-width: clamp(320px, 44vw, 620px); width: 100%; } .feature-card { background: white; padding: var(--spacing-md); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; min-width: 100px; transition: var(--transition-normal); position: relative; z-index: 2; /* above arch */ } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); } .feature-icon { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xs); } .feature-icon .icon { color: var(--color-primary); } /* Feature cards color accents and gentle float */ .feature-cards .feature-card:nth-child(1) { background: linear-gradient(180deg, #edfffd, #ffffff); border: 1px solid rgba(20, 184, 166, 0.15); animation: floatY 7s ease-in-out infinite; } .feature-cards .feature-card:nth-child(2) { background: linear-gradient(180deg, #eff0ff, #ffffff); border: 1px solid rgba(124, 140, 248, 0.2); animation: floatY 6.5s ease-in-out infinite 0.6s; } .feature-cards .feature-card:nth-child(3) { background: linear-gradient(180deg, #fff8e6, #ffffff); border: 1px solid rgba(246, 196, 84, 0.25); animation: floatY 6s ease-in-out infinite 0.3s; } @keyframes floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } /* Content Navigation */ .content-nav { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: var(--spacing-lg) 0; border-bottom: 1px solid rgba(15, 23, 42, 0.06); position: sticky; top: var(--header-height); z-index: 100; } .nav-pills { display: flex; justify-content: center; gap: var(--spacing-xs); overflow-x: auto; padding: var(--spacing-xs); width: 100%; flex-wrap: wrap; position: relative; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(2, 6, 23, 0.06); border-radius: 9999px; /* soft segmented rail */ box-shadow: 0 6px 16px rgba(2, 6, 23, 0.06); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .nav-pill { background: transparent; border: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: 9999px; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); white-space: nowrap; font-weight: 600; font-size: var(--font-size-base); text-align: center; flex: 0 1 auto; min-width: fit-content; scroll-snap-align: center; } .nav-pill:hover { background: rgba(20, 184, 166, 0.08); } .nav-pill.active { background: linear-gradient(135deg, #14b8a6, #0f766e); color: white; box-shadow: 0 8px 18px rgba(20, 184, 166, 0.25); } /* Focus visibility for accessibility */ .nav-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); } /* Underline indicator (desktop & large tablets) */ .nav-indicator { position: absolute; bottom: 6px; height: 3px; background: linear-gradient(90deg, #14b8a6, #0f766e); border-radius: 9999px; transition: left var(--transition-normal), width var(--transition-normal), opacity var(--transition-fast); box-shadow: 0 4px 10px rgba(20, 184, 166, 0.25); display: none; /* hidden by default; enabled on >=768px */ pointer-events: none; } /* Section Styles */ .section { padding: var(--spacing-3xl) 0; /* Ensure anchor jumps and hash navigation don't hide content behind header */ scroll-margin-top: calc(var(--header-height) + 12px); } .section-header { text-align: center; margin-bottom: var(--spacing-3xl); } .section-title { font-size: var(--font-size-3xl); font-weight: 700; color: var(--text-header); margin-bottom: var(--spacing-md); } .section-subtitle { font-size: var(--font-size-lg); color: var(--text-secondary); } /* Problem-Solution Grid */ .problem-solution-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); } .problem-card, .solution-card, .result-card { background: white; padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: var(--transition-normal); } .problem-card:hover, .solution-card:hover, .result-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .card-icon { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-md); display: block; } .card-icon.problem { color: #ef4444; } .card-icon.solution { color: var(--color-primary); } .card-icon.result { color: var(--color-success); } /* Feature Showcase */ .feature-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3xl); align-items: center; } .feature-showcase.reverse { direction: rtl; } .feature-showcase.reverse > * { direction: ltr; } .pain-point, .solution-details, .benefits { margin-bottom: var(--spacing-xl); } .pain-point h3, .solution-details h3, .benefits h3 { color: var(--text-header); margin-bottom: var(--spacing-sm); font-size: var(--font-size-xl); } .benefits ul { list-style: none; padding-left: 0; } .benefits li { padding: var(--spacing-xs) 0; position: relative; padding-left: var(--spacing-lg); } .benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: bold; } /* Chat Demo */ .chat-demo { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 400px; height: 100%; display: flex; flex-direction: column; } .chat-header { background: var(--color-primary); color: white; padding: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-sm); } .status-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); } .chat-messages { padding: var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; overflow-y: auto; background: linear-gradient(180deg, #ffffff, #f9fafb 70%); } .message { margin-bottom: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-lg); max-width: 80%; position: relative; box-shadow: var(--shadow-sm); } .message.user { background: var(--bg-accent-blue); margin-left: auto; color: #0b3a52; } .message.ai { background: var(--bg-secondary); color: var(--text-primary); } /* Chat bubble tails */ .message.user::after { content: ""; position: absolute; right: -6px; top: 12px; width: 0; height: 0; border-left: 6px solid var(--bg-accent-blue); border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.04)); } .message.ai::after { content: ""; position: absolute; left: -6px; top: 12px; width: 0; height: 0; border-right: 6px solid var(--bg-secondary); border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.04)); } /* Typing indicator */ .message.typing { display: inline-flex; align-items: center; gap: 6px; width: auto; } .typing-dots { display: inline-flex; gap: 4px; } .typing-dots span { width: 6px; height: 6px; background: #cbd5e1; border-radius: 50%; display: inline-block; animation: typingBlink 1.4s infinite ease-in-out; } .typing-dots span:nth-child(2) { animation-delay: 0.2s; } .typing-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes typingBlink { 0%, 80%, 100% { opacity: 0.2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } } /* Customer Service: align heights and right-align visual content */ #customer-service .feature-showcase { align-items: stretch; } #customer-service .feature-visual { display: flex; justify-content: flex-end; } /* Sales Pipeline */ .sales-pipeline { position: relative; display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: var(--spacing-xl); justify-items: stretch; align-items: stretch; width: 100%; max-width: 640px; margin: 0 auto; } .pipeline-stage { background: white; padding: var(--spacing-lg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 140px; /* keep equal height across languages */ } .stage-icon { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-sm); } .stage-icon .icon { color: var(--color-primary); } .pipeline-arrow { position: absolute; font-size: 22px; line-height: 1; color: var(--color-primary); font-weight: 700; pointer-events: none; } /* Top row connector: between stage 1 and 2 */ .pipeline-arrow.right.top { top: 25%; left: 50%; transform: translate(-50%, -50%); } /* Diagonal connector: from stage 2 to stage 3 */ .pipeline-arrow.diag { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Bottom row connector: between stage 3 and 4 */ .pipeline-arrow.right.bottom { top: 75%; left: 50%; transform: translate(-50%, -50%); } /* Ensure no mobile rotation from previous styles affects grid arrows */ @media (max-width: 768px) { .sales-pipeline { max-width: 100%; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: var(--spacing-lg); } .sales-pipeline .pipeline-arrow { transform: translate(-50%, -50%) !important; } } /* Analytics Dashboard */ .analytics-dashboard { background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--spacing-xl); } /* Analytics chart styles */ .chart-area { margin-top: var(--spacing-xl); background: linear-gradient(180deg, #ffffff, #fbfdff); border: 1px solid rgba(2, 6, 23, 0.06); border-radius: var(--radius-lg); overflow: hidden; } .chart { width: 100%; height: 220px; display: block; } .chart .grid line { stroke: #e5e7eb; stroke-width: 1; } .chart .axes line { stroke: #94a3b8; stroke-width: 1.25; } .chart .area { fill: url(#areaGrad); } .chart .line { fill: none; stroke: url(#lineGrad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawLine 1.6s ease-out forwards; } .chart .points circle { fill: var(--color-primary); stroke: #ffffff; stroke-width: 1.5; } @keyframes drawLine { to { stroke-dashoffset: 0; } } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--bg-secondary); } .update-time { color: var(--text-secondary); font-size: var(--font-size-sm); } .metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); } .metric-card { text-align: center; padding: var(--spacing-lg); background: var(--bg-accent-blue); border-radius: var(--radius-lg); } .metric-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-primary); margin-bottom: var(--spacing-xs); } .metric-label { color: var(--text-secondary); font-size: var(--font-size-sm); } /* Process Steps */ .process-steps { display: flex; align-items: center; justify-content: center; gap: var(--spacing-xl); margin-bottom: var(--spacing-3xl); flex-wrap: wrap; } .step-card { background: white; padding: var(--spacing-xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); text-align: center; max-width: 250px; transition: var(--transition-normal); } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .step-number { width: 60px; height: 60px; background: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xl); font-weight: 700; margin: 0 auto var(--spacing-md); } .step-arrow { font-size: var(--font-size-xl); color: var(--color-primary); font-weight: bold; } .cta-section { text-align: center; background: var(--bg-accent-blue); padding: var(--spacing-3xl); border-radius: var(--radius-xl); } .cta-section h3 { font-size: var(--font-size-2xl); color: var(--text-header); margin-bottom: var(--spacing-md); } /* Push CTA button lower for better visual hierarchy */ .cta-section .cta-button { margin-top: var(--spacing-2xl); } /* Lead Form */ .lead-form-section { background: var(--bg-secondary); padding: var(--spacing-3xl) 0; } .form-container { max-width: 600px; margin: 0 auto; background: white; padding: var(--spacing-3xl); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .form-header { text-align: center; margin-bottom: var(--spacing-2xl); } .form-header h2 { font-size: var(--font-size-2xl); color: var(--text-header); margin-bottom: var(--spacing-sm); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); } .form-group { display: flex; flex-direction: column; } .form-group.full-width { grid-column: 1 / -1; } .form-group label { margin-bottom: var(--spacing-xs); font-weight: 500; color: var(--text-primary); } .form-group input, .form-group textarea { padding: var(--spacing-md); border: 1px solid #d1d5db; border-radius: var(--radius-md); font-size: var(--font-size-base); transition: var(--transition-fast); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1); } .full-width { width: 100%; } /* Footer */ .footer { background: var(--text-primary); color: white; padding: var(--spacing-3xl) 0 var(--spacing-lg); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .footer-section h3, .footer-section h4 { margin-bottom: var(--spacing-md); color: var(--color-primary); } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: var(--spacing-xs); } .footer-section a { color: #d1d5db; text-decoration: none; transition: var(--transition-fast); } .footer-section a:hover { color: var(--color-primary); } .footer-bottom { text-align: center; padding-top: var(--spacing-lg); border-top: 1px solid #374151; color: #9ca3af; } /* Navigation Pills Responsive */ @media (min-width: 1200px) { .nav-pills { justify-content: space-between; } .nav-pill { flex: 0 1 auto; /* natural width, less rigid */ max-width: none; font-size: var(--font-size-lg); padding: var(--spacing-md) var(--spacing-lg); } } @media (min-width: 992px) and (max-width: 1199px) { .nav-pills { justify-content: space-between; } .nav-pill { flex: 0 1 auto; /* natural width, less rigid */ font-size: var(--font-size-base); padding: var(--spacing-sm) var(--spacing-md); } } /* Responsive Design */ @media (max-width: 1200px) { .nav-list { gap: var(--spacing-sm); } .nav-link { font-size: var(--font-size-xs); padding: var(--spacing-xs); } } @media (max-width: 992px) { .logo h1 { font-size: var(--font-size-lg); } .nav-list { gap: var(--spacing-xs); } .header-actions { gap: var(--spacing-xs); margin-left: var(--spacing-sm); } .header-actions .cta-button { padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--font-size-sm); } .nav-pill { font-size: var(--font-size-base); padding: var(--spacing-sm) var(--spacing-md); } } @media (max-width: 768px) { .container { padding: 0 var(--spacing-md); } .header-content { flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-sm) 0; } .logo { margin-right: 0; } .nav { width: 100%; justify-content: flex-start; overflow-x: visible; /* Option A: no horizontal scroll */ } .nav-list { flex-direction: row; gap: var(--spacing-xs); /* tighter gap */ justify-content: center; /* nicer when wrapped */ flex-wrap: wrap; /* Option A: allow wrapping to 2 lines */ min-width: unset; /* remove forced single-line width */ padding: 0 var(--spacing-xs); } .nav-link { font-size: var(--font-size-xs); /* smaller text */ padding: 4px 6px; /* compact chip */ } .header-actions { margin-left: 0; width: 100%; justify-content: center; } .nav-pills { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--spacing-xs); } .nav-pill { font-size: var(--font-size-sm); padding: var(--spacing-xs) var(--spacing-sm); flex: 0 1 auto; min-width: fit-content; background: var(--color-primary); color: white; border: none; border-radius: 9999px; } .nav-pill:hover { background: #0f766e; /* darker teal for hover */ } .nav-pill:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1); } /* Mobile: header grows taller due to wrapping, add extra padding */ .hero { padding-top: calc(var(--header-height) + 3rem); } .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-title { font-size: var(--font-size-3xl); } .hero-actions { flex-direction: column; } .feature-showcase { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .process-steps { flex-direction: column; } .step-arrow { transform: rotate(90deg); } .sales-pipeline { flex-direction: column; } .pipeline-arrow { transform: rotate(90deg); } } /* Desktop/tab: use underline indicator instead of filled active pills */ @media (min-width: 768px) { .nav-indicator { display: block; } .nav-pill.active { background: transparent; color: var(--color-primary); box-shadow: none; } .nav-pills { flex-wrap: nowrap; /* prevent line breaks on wider screens */ overflow-x: auto; /* allow horizontal scrolling for long English labels */ } } /* Section Display Control */ .content-section { display: none; } .content-section.active { display: block; } /* Smooth Animations */ .content-section { opacity: 0; transform: translateY(20px); transition: var(--transition-normal); } .content-section.active { opacity: 1; transform: translateY(0); } /* Motion preferences */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ---------------------------- Toast notifications ---------------------------- */ .toast-container { position: fixed; top: calc(var(--header-height) + 8px); /* below measured header */ left: 50%; transform: translateX(-50%); right: auto; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; /* allow clicks through empty space */ } .toast { pointer-events: auto; /* clickable */ min-width: 280px; max-width: 420px; background: #ffffff; color: var(--text-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); border-left: 5px solid var(--color-primary); padding: 14px 16px; display: flex; align-items: flex-start; gap: 12px; opacity: 0; transform: translateY(-8px) scale(0.98); animation: toast-in 220ms ease-out forwards; } .toast--success { border-left-color: var(--color-success); } .toast--error { border-left-color: #ef4444; } .toast--info { border-left-color: var(--color-primary); } .toast__content { flex: 1; } .toast__title { font-weight: 700; margin-bottom: 2px; color: var(--text-header); font-size: var(--font-size-lg); } .toast__message { font-size: var(--font-size-base); color: var(--text-secondary); } .toast__close { background: transparent; border: none; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; } .toast--hide { animation: toast-out 180ms ease-in forwards; } @keyframes toast-in { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.98); } } @media (max-width: 768px) { .toast-container { top: auto; right: 0; left: 0; bottom: 16px; align-items: center; } .toast { width: calc(100% - 32px); max-width: 560px; } }