/* ========================================================================== Descomplica - Subpage Styles Solution Pages, Industry Pages, About Page Loaded alongside styles-shared.css (variables, reset, navbar, footer, buttons) ========================================================================== */ /* ========================================================================== 1. Page Hero ========================================================================== */ .page-hero { padding: calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl); background: var(--color-black); color: var(--color-white); text-align: center; } .page-hero-label { display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-green); margin-bottom: var(--spacing-md); } .page-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; margin-bottom: var(--spacing-lg); max-width: 800px; margin-left: auto; margin-right: auto; } .page-hero p { font-size: 1.15rem; color: var(--color-gray-400); max-width: 600px; margin: 0 auto var(--spacing-2xl); line-height: 1.7; } .page-hero .btn { font-size: 1.05rem; padding: 0.9rem 2rem; } /* ========================================================================== 2. Breadcrumbs ========================================================================== */ /* Breadcrumbs: visually hidden, SEO handled by JSON-LD BreadcrumbList in */ .breadcrumbs { display: none; } /* ========================================================================== 3. How It Works (3-step process) ========================================================================== */ .how-it-works { padding: var(--spacing-4xl) 0; background: var(--color-white); } .how-it-works .section-title { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-3xl); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-3xl); max-width: 1100px; margin: 0 auto; position: relative; } .step-card { position: relative; padding: 2.5rem 0 2.5rem 7.5rem; text-align: left; } .step-number { position: absolute; left: 0; top: 1.25rem; width: auto; height: auto; border-radius: 0; background: none; color: var(--color-green); font-size: 6rem; font-weight: 700; line-height: 1; opacity: 0.25; display: block; margin: 0; } .step-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--spacing-sm); position: relative; z-index: 1; } .step-card p { font-size: 0.95rem; color: var(--color-gray-400); line-height: 1.7; position: relative; z-index: 1; } /* ========================================================================== 4. Benefits Grid ========================================================================== */ .benefits-section { padding: var(--spacing-4xl) 0; padding-top: calc(var(--spacing-4xl) + 40px); background: var(--color-white); } .benefits-section .section-title { text-align: center; font-size: 2rem; margin-bottom: 8rem; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-xl); overflow: visible; } .benefit-card { background: var(--color-white); border-radius: var(--border-radius-xl); padding: 4rem var(--spacing-2xl) var(--spacing-2xl); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .benefit-card:hover { transform: translateY(-8px); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.15); } .benefit-icon { width: 80px; height: 80px; border-radius: var(--border-radius-full); background: var(--color-green); color: var(--color-black); display: flex; align-items: center; justify-content: center; position: absolute; top: -40px; left: var(--spacing-2xl); box-shadow: 0 8px 24px rgba(181, 224, 78, 0.3); } .benefit-icon svg { width: 36px; height: 36px; } .benefit-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--spacing-sm); } .benefit-card p { font-size: 0.9rem; color: var(--color-gray-600); line-height: 1.6; } a.benefit-card { text-decoration: none; color: inherit; } /* Dark variant */ .benefits-section--dark { background: var(--color-gray-900); } .benefits-section--dark .section-title { color: var(--color-white); } .benefits-section--dark .benefit-card { background: var(--color-gray-800); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } .benefits-section--dark .benefit-card:hover { box-shadow: 0 20px 56px rgba(0, 0, 0, 0.4); } .benefits-section--dark .benefit-card h3 { color: var(--color-white); font-size: 1.2rem; margin-bottom: var(--spacing-md); } .benefits-section--dark .benefit-card p { color: var(--color-gray-400); font-size: 0.95rem; line-height: 1.7; } /* ========================================================================== 5. FAQ Accordion ========================================================================== */ .faq-section { padding: var(--spacing-4xl) 0; background: var(--color-white); } .faq-section .section-title { text-align: center; font-size: 2rem; margin-bottom: var(--spacing-3xl); } .faq-list { max-width: 700px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--color-gray-200); } .faq-question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--spacing-lg) 0; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--color-gray-900); text-align: left; gap: var(--spacing-md); } .faq-question:hover { color: var(--color-green-dark); } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; transition: transform var(--transition-base); } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); } .faq-item.open .faq-answer { max-height: 500px; } .faq-answer p { padding-bottom: var(--spacing-lg); font-size: 0.95rem; color: var(--color-gray-600); line-height: 1.7; } /* ========================================================================== 6. Demo Section (solution pages) ========================================================================== */ .demo-section { padding: var(--spacing-4xl) 0; background: var(--color-gray-900); text-align: center; } .demo-section .section-title { color: var(--color-white); margin-bottom: var(--spacing-md); } .demo-section .section-subtitle { color: var(--color-gray-400); font-size: 1rem; margin-bottom: var(--spacing-2xl); } .demo-embed { max-width: 500px; margin: 0 auto; background: var(--color-black); border-radius: var(--border-radius-xl); padding: var(--spacing-2xl); min-height: 300px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-gray-800); } .demo-placeholder { color: var(--color-gray-500); font-size: 0.9rem; } /* ========================================================================== 7. Pain Points (industry pages) ========================================================================== */ .pain-points { padding: var(--spacing-4xl) 0; background: var(--color-white); } .pain-points .section-title { text-align: center; margin-bottom: var(--spacing-3xl); } .pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-xl); } .pain-card { text-align: center; padding: var(--spacing-2xl); border: 1px solid var(--color-gray-200); border-radius: var(--border-radius-xl); } .pain-icon { width: 56px; height: 56px; border-radius: var(--border-radius-full); background: rgba(170, 30, 87, 0.1); color: var(--color-maroon); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-lg); } .pain-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--spacing-sm); } .pain-card p { font-size: 0.9rem; color: var(--color-gray-600); line-height: 1.6; } /* ========================================================================== 8. Solution Stack (industry pages) ========================================================================== */ .solution-stack { padding: var(--spacing-4xl) 0; background: var(--color-gray-100); } .solution-stack .section-title { text-align: center; margin-bottom: var(--spacing-3xl); } .stack-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-xl); } .stack-card { background: var(--color-white); border-radius: var(--border-radius-xl); padding: var(--spacing-2xl); display: flex; gap: var(--spacing-lg); align-items: flex-start; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base); } .stack-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stack-card-icon { width: 48px; height: 48px; border-radius: var(--border-radius-md); background: var(--color-green); color: var(--color-black); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stack-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; } .stack-card p { font-size: 0.85rem; color: var(--color-gray-600); line-height: 1.5; } .stack-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 600; color: var(--color-green-dark); margin-top: var(--spacing-sm); } .stack-card-link:hover { color: var(--color-black); } /* ========================================================================== 9. Before/After Comparison ========================================================================== */ .before-after { padding: var(--spacing-4xl) 0; background: var(--color-white); } .before-after .section-title { text-align: center; margin-bottom: var(--spacing-3xl); } .comparison-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spacing-xl); max-width: 900px; margin: 0 auto; align-items: stretch; } .comparison-card { padding: var(--spacing-2xl); border-radius: var(--border-radius-xl); } .comparison-card.before { background: var(--color-gray-100); color: var(--color-gray-900); border: 1px solid var(--color-gray-200); } .comparison-card.after { background: var(--color-black); color: var(--color-white); border: 1px solid var(--color-gray-800); } .comparison-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-lg); } .comparison-card.before .comparison-label { color: var(--color-gray-500); } .comparison-card.after .comparison-label { color: var(--color-green); } .comparison-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .comparison-item { display: flex; align-items: flex-start; gap: var(--spacing-sm); font-size: 0.9rem; line-height: 1.5; } .comparison-item svg { flex-shrink: 0; margin-top: 2px; } .comparison-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-green); font-size: 2rem; } /* ========================================================================== 10. Results Callout ========================================================================== */ .results-section { padding: var(--spacing-4xl) 0; background: var(--color-green); color: var(--color-black); text-align: center; } .results-section .section-title { margin-bottom: var(--spacing-3xl); } .results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-2xl); max-width: 800px; margin: 0 auto; } .result-stat { text-align: center; } .result-number { font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: var(--spacing-sm); } .result-label { font-size: 0.9rem; font-weight: 500; } /* ========================================================================== 11. About Page Sections ========================================================================== */ .about-hero { padding: calc(var(--navbar-height) + var(--spacing-4xl)) 0 var(--spacing-4xl); background: var(--color-black); color: var(--color-white); } .about-hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 5rem; align-items: center; max-width: 1000px; margin: 0 auto; } .about-agent-card { display: flex; flex-direction: column; align-items: center; align-self: stretch; justify-content: center; } .about-agent-avatar { flex: 1; display: flex; align-items: center; } .about-agent-avatar .voice-demo-avatar { width: 220px; height: 220px; } .about-agent-avatar .voice-demo-avatar-img { border-radius: 0; } .about-agent-card .voice-demo-info { margin-top: var(--spacing-lg); } .about-agent-card .voice-demo-name { font-size: 1.6rem; } .about-agent-card .voice-demo-status { font-size: 0.95rem; } .about-description p { font-size: 1.1rem; color: var(--color-gray-400); line-height: 1.8; margin-bottom: var(--spacing-md); opacity: 0; animation: fadeSlideUp 0.6s ease forwards; } .about-description p:nth-child(1) { animation-delay: 0.3s; } .about-description p:nth-child(2) { animation-delay: 0.6s; } .about-description p:nth-child(3) { animation-delay: 0.9s; } .about-description p:last-child { margin-bottom: 0; } .about-description .about-lead { font-size: 1.25rem; color: var(--color-white); } /* Accent text for closing emphasis */ .text-accent { color: var(--color-green); font-weight: 700; } .methodology-section { padding: var(--spacing-4xl) 0; background: var(--color-gray-900); color: var(--color-white); } .methodology-section .section-title { text-align: center; margin-bottom: var(--spacing-3xl); } .tech-trust { padding: var(--spacing-4xl) 0; background: var(--color-gray-100); text-align: center; } .tech-trust .section-title { margin-bottom: var(--spacing-3xl); } .tech-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-2xl); align-items: center; max-width: 800px; margin: 0 auto; } .tech-logo-item { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); color: var(--color-gray-500); font-size: 0.8rem; } .tech-logo-item svg { width: 40px; height: 40px; color: var(--color-gray-700); } /* ========================================================================== 11b. Error Page (404) ========================================================================== */ .error-hero { min-height: 60vh; display: flex; align-items: center; } .error-hero .container { text-align: center; } .error-hero h1 { font-size: 6rem; margin-bottom: 0.25em; line-height: 1; } .error-subtitle { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5em; } .error-description { margin-bottom: 2em; opacity: 0.8; } .error-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ========================================================================== 12. Page CTA (bottom of subpages) ========================================================================== */ .page-cta { padding: var(--spacing-4xl) 0; background: var(--color-black); color: var(--color-white); text-align: center; } .page-cta h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; margin-bottom: var(--spacing-md); } .page-cta p { color: var(--color-gray-400); font-size: 1rem; margin-bottom: var(--spacing-2xl); max-width: 500px; margin-left: auto; margin-right: auto; } .page-cta-actions { display: flex; justify-content: center; gap: var(--spacing-lg); flex-wrap: wrap; } /* ========================================================================== 13. Section Title (reused across all sections) ========================================================================== */ .section-title { font-size: 2.5rem; font-weight: 800; line-height: 1.2; margin-bottom: var(--spacing-md); } /* ========================================================================== 14. Responsive — All Page Components ========================================================================== */ @media (max-width: 1024px) and (min-width: 769px) { .steps-grid, .pain-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { /* ================================================================= Snap scroll engine — seamless full-viewport snapping ================================================================= */ html, body { height: 100%; overflow: hidden; } /* Hide breadcrumbs completely on mobile to eliminate gaps */ .breadcrumbs { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* Navbar stays fixed, doesn't participate in scroll */ #navbar-placeholder { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } /* .snap-wrapper is the scroll container (created by JS). Using an inner div instead of body prevents the browser from hiding the address/bottom bar on scroll. */ .snap-wrapper { height: 100vh; height: 100svh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; } /* All sections become snap targets */ .page-hero, .about-hero, .pain-points, .solution-stack, .before-after, .results-section, .faq-section, .page-cta, .how-it-works, .benefits-section, .methodology-section { scroll-snap-align: start; scroll-snap-stop: always; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; max-height: 100vh; max-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; box-sizing: border-box; } /* Footer as full snap slide */ #footer-placeholder { scroll-snap-align: start; scroll-snap-stop: always; height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; max-height: 100vh; max-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; box-sizing: border-box; padding-top: var(--navbar-height); background-color: var(--color-gray-900); } #footer-placeholder .footer { width: 100%; padding: var(--spacing-lg) 0; } /* --- Compact footer for snap slide (subpages only) --- */ #footer-placeholder .footer-content { gap: var(--spacing-md); padding-bottom: var(--spacing-md); } #footer-placeholder .footer-logo { height: 24px; } #footer-placeholder .footer-tagline { font-size: 0.75rem; margin-top: var(--spacing-xs); } #footer-placeholder .footer-location { font-size: 0.7rem; } #footer-placeholder .footer-nav { flex-direction: row; gap: var(--spacing-xl); } #footer-placeholder .footer-nav-title { font-size: 0.72rem; margin-bottom: var(--spacing-xs); } #footer-placeholder .footer-nav-group ul { gap: 2px; } #footer-placeholder .footer-nav-group a { font-size: 0.78rem; } #footer-placeholder .footer-contact { flex-direction: row; gap: var(--spacing-md); } #footer-placeholder .footer-contact-link { font-size: 0.85rem; padding: 6px 12px; } #footer-placeholder .footer-bottom { padding-top: var(--spacing-md); } #footer-placeholder .footer-bottom p { font-size: 0.75rem; } /* Chat widget is position:fixed, placeholder must not take scroll space */ #chat-widget-placeholder { height: 0; overflow: visible; } /* ================================================================= Shared compact sizes — improved readability ================================================================= */ .section-title { font-size: 1.5rem; margin-bottom: var(--spacing-lg); } /* ================================================================= Page Hero — more breathing room ================================================================= */ .page-hero { padding: calc(var(--navbar-height) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-xl); } .page-hero h1 { font-size: 1.75rem; margin-bottom: var(--spacing-md); line-height: 1.2; } .page-hero p { font-size: 1rem; margin-bottom: var(--spacing-xl); line-height: 1.6; } /* ================================================================= About Hero — improved spacing ================================================================= */ .about-hero { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .about-hero-grid { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--spacing-md); } .about-agent-avatar .voice-demo-avatar { width: 94px; height: 94px; } .about-description p { font-size: 0.77rem; line-height: 1.5; margin-bottom: var(--spacing-xs); } .about-description .about-lead { font-size: 0.9rem; font-weight: 600; } /* ================================================================= Pain Points — 3 cards, grid layout (−6% sizing) ================================================================= */ .pain-points { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .pain-points .section-title { font-size: 1.41rem; } .pain-grid { grid-template-columns: 1fr; gap: var(--spacing-sm); } .pain-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: var(--spacing-sm) var(--spacing-md); text-align: left; } .pain-icon { grid-row: 1 / -1; align-self: center; width: 38px; height: 38px; margin: 0; } .pain-card h3 { grid-column: 2; font-size: 0.86rem; margin-bottom: 0; font-weight: 600; align-self: end; } .pain-card p { grid-column: 2; font-size: 0.77rem; line-height: 1.4; align-self: start; } /* ================================================================= Solution Stack — accent bar + arrow list (Option D) ================================================================= */ .solution-stack { padding: calc(var(--navbar-height) + var(--spacing-md)) var(--spacing-lg) var(--spacing-md); background: var(--color-gray-900); } .solution-stack .section-title { color: var(--color-white); } .stack-grid { grid-template-columns: 1fr; gap: 0; } .stack-card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 13px 0 13px 13px; position: relative; background: transparent; border: none; border-bottom: 1px solid var(--color-gray-700); border-radius: 0; box-shadow: none; transition: none; } .stack-card:hover { transform: none; } .stack-card::before { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; background: var(--color-green); border-radius: 2px; } .stack-card::after { content: '›'; flex: 0 0 auto; color: var(--color-gray-600); font-size: 1.2rem; font-weight: 300; padding-right: 4px; } .stack-card:last-child { border-bottom: none; } .stack-card-icon { flex: 0 0 30px; width: 30px; height: 30px; max-width: 30px; max-height: 30px; background: rgba(181, 224, 78, 0.15); border-radius: 8px; overflow: hidden; } .stack-card-icon svg { width: 15px; height: 15px; color: var(--color-green); stroke: var(--color-green); } .stack-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .stack-card h3 { font-size: 0.88rem; margin-bottom: 2px; font-weight: 600; color: var(--color-white); } .stack-card p { font-size: 0.74rem; line-height: 1.35; color: var(--color-gray-400); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .stack-card-link { display: none; } /* ================================================================= Before / After — paired rows (Option A) ================================================================= */ .before-after { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .comparison-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 0; grid-auto-flow: dense; } .comparison-arrow { display: none; } /* Unwrap card and list containers so items join the parent grid */ .comparison-card { display: contents; } .comparison-list { display: contents; } .comparison-label { display: none; } .comparison-item { font-size: 0.78rem; line-height: 1.4; padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); display: flex; align-items: center; } .comparison-item:last-child { border-bottom: none; } .comparison-item svg { display: none; } /* Before column: strikethrough muted + right-aligned */ .comparison-card.before .comparison-item { grid-column: 1; text-align: right; justify-content: flex-end; position: relative; } .comparison-card.before .comparison-item span { text-decoration: line-through; color: var(--color-gray-400); } /* Green arrow bridging the gap */ .comparison-card.before .comparison-item::after { content: '→'; position: absolute; right: -19px; top: 50%; transform: translateY(-50%); color: var(--color-green); font-size: 0.9rem; font-weight: 600; text-decoration: none; } /* After column: bold dark text */ .comparison-card.after .comparison-item { grid-column: 2; color: var(--color-gray-900); } .comparison-card.after .comparison-item span { font-weight: 500; color: var(--color-gray-900); } /* ================================================================= Results — 3-col horizontal layout ================================================================= */ .results-section { padding: calc(var(--navbar-height) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-xl); } .results-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); text-align: center; } .result-number { font-size: 2.2rem; line-height: 1; margin-bottom: var(--spacing-xs); } .result-label { font-size: 0.8rem; line-height: 1.4; } /* ================================================================= FAQ — readable collapsed items (all sizes −7%) ================================================================= */ .faq-section { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .faq-section .section-title { font-size: 1.44rem; margin-bottom: calc(var(--spacing-xl) + 6px); } .faq-list { gap: 2px; } .faq-question { padding: 0.9rem 0; font-size: 0.87rem; } .faq-answer p { font-size: 0.81rem; line-height: 1.5; padding: 0.48rem 0 0.9rem; } .faq-icon { width: 19px; height: 19px; } /* ================================================================= How It Works / Methodology — 3 step cards ================================================================= */ .how-it-works, .methodology-section { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .steps-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .step-card { padding: var(--spacing-xs) 0 var(--spacing-xs) 3.4rem; } .step-number { font-size: 2.5rem; top: 0; left: 0; } .step-card h3 { font-size: 0.9rem; margin-bottom: 2px; font-weight: 700; } .step-card p { font-size: 0.77rem; line-height: 1.5; } /* ================================================================= Benefits — shared base ================================================================= */ .benefits-section { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .benefits-section .section-title { margin-bottom: var(--spacing-md); font-size: 1.3rem; } .benefit-icon { position: static; top: auto; box-shadow: none; } .benefit-card { border-radius: var(--border-radius-lg); } .benefit-card:hover { transform: none; } /* Hide "Veja como funcionam" paragraph on mobile */ .benefits-section .benefits-grid + p { display: none; } /* --- Vantagens (4 cards, dark bg) — vertical list with green accent --- */ .benefits-section--dark { padding: calc(var(--navbar-height) + var(--spacing-md)) var(--spacing-lg) var(--spacing-md); } .benefits-section--dark .section-title { font-size: 1.3rem; } .benefits-section--dark .benefits-grid { grid-template-columns: 1fr; gap: 0; } .benefits-section--dark .benefit-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; padding: 13px 0 13px 13px; background: transparent; border: none; border-bottom: 1px solid var(--color-gray-700); border-radius: 0; box-shadow: none; text-align: left; position: relative; } .benefits-section--dark .benefit-card::before { content: ''; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; background: var(--color-green); border-radius: 2px; } .benefits-section--dark .benefit-card:last-child { border-bottom: none; } .benefits-section--dark .benefit-icon { grid-row: 1 / -1; align-self: center; width: 38px; height: 38px; margin-bottom: 0; background: rgba(181, 224, 78, 0.15); border: none; border-radius: 10px; box-shadow: none; } .benefits-section--dark .benefit-icon svg { width: 19px; height: 19px; stroke: var(--color-green); } .benefits-section--dark .benefit-card h3 { grid-column: 2; font-size: 0.88rem; margin-bottom: 0; color: var(--color-white); font-weight: 600; align-self: end; } .benefits-section--dark .benefit-card p { grid-column: 2; font-size: 0.77rem; line-height: 1.4; color: var(--color-gray-400); align-self: start; } /* --- Soluções relacionadas (3 cards, light bg) — horizontal list --- */ .benefits-section:not(.benefits-section--dark) { padding: calc(var(--navbar-height) + var(--spacing-lg)) var(--spacing-lg) var(--spacing-lg); } .benefits-section:not(.benefits-section--dark) .benefits-grid { grid-template-columns: 1fr; gap: 0; } .benefits-section:not(.benefits-section--dark) .benefit-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--spacing-md); row-gap: 2px; padding: var(--spacing-md); background: transparent; box-shadow: none; border-bottom: 1px solid var(--color-gray-200); border-radius: 0; } .benefits-section:not(.benefits-section--dark) .benefit-card:last-child { border-bottom: none; } .benefits-section:not(.benefits-section--dark) .benefit-icon { grid-row: 1 / -1; align-self: center; width: 44px; height: 44px; margin-bottom: 0; } .benefits-section:not(.benefits-section--dark) .benefit-icon svg { width: 22px; height: 22px; } .benefits-section:not(.benefits-section--dark) .benefit-card h3 { grid-column: 2; font-size: 0.95rem; margin-bottom: 0; font-weight: 600; align-self: end; } .benefits-section:not(.benefits-section--dark) .benefit-card p { grid-column: 2; font-size: 0.82rem; line-height: 1.4; color: var(--color-gray-500); align-self: start; } /* Right arrow on link cards */ .benefits-section:not(.benefits-section--dark) a.benefit-card { position: relative; padding-right: calc(var(--spacing-md) + 24px); } .benefits-section:not(.benefits-section--dark) a.benefit-card::after { content: '›'; position: absolute; right: var(--spacing-md); top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 300; color: var(--color-gray-400); line-height: 1; } /* ================================================================= Page CTA — clear call to action ================================================================= */ .page-cta { padding: calc(var(--navbar-height) + var(--spacing-xl)) var(--spacing-lg) var(--spacing-2xl); } .page-cta h2 { font-size: 1.6rem; margin-bottom: var(--spacing-sm); line-height: 1.2; } .page-cta p { margin-bottom: var(--spacing-xl); font-size: 1rem; line-height: 1.5; } .page-cta-actions { display: flex; flex-direction: column; gap: var(--spacing-md); } .page-cta-actions .btn { width: 100%; } } /* ========================================================================== 15. Scroll Animations (all subpages) ========================================================================== */ /* Keyframes */ @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } @keyframes drawLineH { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes drawLineV { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes iconPulse { 0% { background: rgba(181, 224, 78, 0.15); } 40% { background: rgba(181, 224, 78, 0.45); } 100% { background: rgba(181, 224, 78, 0.15); } } @keyframes borderGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes slideFromLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideFromRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes arrowPop { 0% { opacity: 0; transform: translateY(-50%) scale(0); } 70% { opacity: 1; transform: translateY(-50%) scale(1.4); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } } /* --- Steps connector line (horizontal, desktop) --- */ .steps-connector { display: none; } .steps-grid.animate-on-scroll .steps-connector { display: none; } /* --- Step cards: hidden until visible --- */ .steps-grid.animate-on-scroll .step-card { opacity: 0; } .steps-grid.animate-on-scroll.visible .step-card { animation: fadeSlideUp 0.5s ease forwards; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(2) { animation-delay: 0s; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(3) { animation-delay: 0.2s; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(4) { animation-delay: 0.4s; } /* --- Step number fade --- */ .steps-grid.animate-on-scroll .step-number { opacity: 0; } .steps-grid.animate-on-scroll.visible .step-number { animation: fadeSlideUp 0.5s ease forwards; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(2) .step-number { animation-delay: 0.05s; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(3) .step-number { animation-delay: 0.25s; } .steps-grid.animate-on-scroll.visible .step-card:nth-child(4) .step-number { animation-delay: 0.45s; } /* --- Benefit cards: hidden until visible --- */ .benefits-grid.animate-on-scroll .benefit-card { opacity: 0; position: relative; } .benefits-grid.animate-on-scroll.visible .benefit-card { animation: fadeSlideUp 0.5s ease forwards; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(1) { animation-delay: 0s; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(2) { animation-delay: 0.15s; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(3) { animation-delay: 0.3s; } /* --- Icon pulse on reveal --- */ .benefits-grid.animate-on-scroll.visible .benefit-icon { animation: iconPulse 0.8s ease 0.3s; } /* --- Left accent border (draws in from top) --- */ .benefits-grid.animate-on-scroll .benefit-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-green); border-radius: 4px 0 0 4px; transform-origin: top center; transform: scaleY(0); } .benefits-grid.animate-on-scroll.visible .benefit-card::before { animation: borderGrow 0.5s ease forwards; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(1)::before { animation-delay: 0.1s; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(2)::before { animation-delay: 0.25s; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(3)::before { animation-delay: 0.4s; } /* --- 4th benefit card (solution pages have 4 benefits) --- */ .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(4) { animation-delay: 0.45s; } .benefits-grid.animate-on-scroll.visible .benefit-card:nth-child(4)::before { animation-delay: 0.55s; } /* --- Pain cards (3 cards, industry pages): hidden until visible --- */ .pain-grid.animate-on-scroll .pain-card { opacity: 0; } .pain-grid.animate-on-scroll.visible .pain-card { animation: fadeSlideUp 0.5s ease forwards; } .pain-grid.animate-on-scroll.visible .pain-card:nth-child(1) { animation-delay: 0s; } .pain-grid.animate-on-scroll.visible .pain-card:nth-child(2) { animation-delay: 0.15s; } .pain-grid.animate-on-scroll.visible .pain-card:nth-child(3) { animation-delay: 0.3s; } /* --- Stack cards (4 cards, industry pages): hidden until visible --- */ .stack-grid.animate-on-scroll .stack-card { opacity: 0; } .stack-grid.animate-on-scroll.visible .stack-card { animation: fadeSlideUp 0.5s ease forwards; } .stack-grid.animate-on-scroll.visible .stack-card:nth-child(1) { animation-delay: 0s; } .stack-grid.animate-on-scroll.visible .stack-card:nth-child(2) { animation-delay: 0.15s; } .stack-grid.animate-on-scroll.visible .stack-card:nth-child(3) { animation-delay: 0.3s; } .stack-grid.animate-on-scroll.visible .stack-card:nth-child(4) { animation-delay: 0.45s; } /* --- Result stats (3 stats, industry pages): hidden until visible --- */ .results-grid.animate-on-scroll .result-stat { opacity: 0; } .results-grid.animate-on-scroll.visible .result-stat { animation: fadeSlideUp 0.5s ease forwards; } .results-grid.animate-on-scroll.visible .result-stat:nth-child(1) { animation-delay: 0s; } .results-grid.animate-on-scroll.visible .result-stat:nth-child(2) { animation-delay: 0.15s; } .results-grid.animate-on-scroll.visible .result-stat:nth-child(3) { animation-delay: 0.3s; } /* --- Section-level fade (faq, cta): hidden until visible --- */ .faq-section.animate-on-scroll, .page-cta.animate-on-scroll { opacity: 0; } .faq-section.animate-on-scroll.visible, .page-cta.animate-on-scroll.visible { animation: fadeSlideUp 0.6s ease forwards; } /* --- Before/After: per-item slide-from-sides (mobile) --- */ .before-after.animate-on-scroll { opacity: 0; } .before-after.animate-on-scroll.visible { opacity: 1; transition: opacity 0.3s ease; } .before-after.animate-on-scroll .comparison-card.before .comparison-item { opacity: 0; } .before-after.animate-on-scroll .comparison-card.after .comparison-item { opacity: 0; } .before-after.animate-on-scroll .comparison-card.before .comparison-item::after { opacity: 0; } /* Before items slide from left */ .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item { animation: slideFromLeft 0.5s ease forwards; } /* After items slide from right */ .before-after.animate-on-scroll.visible .comparison-card.after .comparison-item { animation: slideFromRight 0.5s ease forwards; } /* Stagger rows */ .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(1), .before-after.animate-on-scroll.visible .comparison-card.after .comparison-item:nth-child(1) { animation-delay: 0.1s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(2), .before-after.animate-on-scroll.visible .comparison-card.after .comparison-item:nth-child(2) { animation-delay: 0.25s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(3), .before-after.animate-on-scroll.visible .comparison-card.after .comparison-item:nth-child(3) { animation-delay: 0.4s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(4), .before-after.animate-on-scroll.visible .comparison-card.after .comparison-item:nth-child(4) { animation-delay: 0.55s; } /* Green arrows pop in after their row lands */ .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item::after { animation: arrowPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(1)::after { animation-delay: 0.3s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(2)::after { animation-delay: 0.45s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(3)::after { animation-delay: 0.6s; } .before-after.animate-on-scroll.visible .comparison-card.before .comparison-item:nth-child(4)::after { animation-delay: 0.75s; } /* --- Page hero: CSS-only load animation (always above the fold) --- */ .page-hero .page-hero-label, .page-hero h1, .page-hero p, .page-hero .btn { opacity: 0; animation: fadeSlideUp 0.6s ease forwards; } .page-hero .page-hero-label { animation-delay: 0.1s; } .page-hero h1 { animation-delay: 0.25s; } .page-hero p { animation-delay: 0.4s; } .page-hero .btn { animation-delay: 0.55s; } /* --- Desktop: scroll-progress-driven mode (--p: 0→1) --- */ .steps-grid.scroll-driven .step-card:nth-child(2) { --stagger: 0; } .steps-grid.scroll-driven .step-card:nth-child(3) { --stagger: 0.2; } .steps-grid.scroll-driven .step-card:nth-child(4) { --stagger: 0.4; } .steps-grid.scroll-driven .step-card { --card-p: clamp(0, (var(--p, 0) - var(--stagger, 0)) * 2.5, 1); opacity: var(--card-p); transform: translateY(calc(24px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .steps-grid.scroll-driven .step-number { opacity: clamp(0, var(--card-p, 0) * 0.25, 0.25); animation: none; transition: opacity 0.18s ease-out; } .benefits-grid.scroll-driven .benefit-card:nth-child(1) { --stagger: 0; } .benefits-grid.scroll-driven .benefit-card:nth-child(2) { --stagger: 0.15; } .benefits-grid.scroll-driven .benefit-card:nth-child(3) { --stagger: 0.3; } .benefits-grid.scroll-driven .benefit-card:nth-child(4) { --stagger: 0.45; } .benefits-grid.scroll-driven .benefit-card { --card-p: clamp(0, (var(--p, 0) - var(--stagger, 0)) * 2.85, 1); opacity: var(--card-p); transform: translateY(calc(24px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow var(--transition-base); } .benefits-grid.scroll-driven .benefit-card:hover { transform: translateY(calc((24px * (1 - var(--card-p))) - 8px)); box-shadow: 0 20px 56px rgba(0, 0, 0, 0.15); } .benefits-grid.scroll-driven .benefit-card::before { transform: scaleY(var(--card-p)); animation: none; transition: transform 0.18s ease-out; } .benefits-grid.scroll-driven .benefit-icon { animation: none; } /* --- Desktop: pain-grid scroll-driven --- */ .pain-grid.scroll-driven .pain-card:nth-child(1) { --stagger: 0; } .pain-grid.scroll-driven .pain-card:nth-child(2) { --stagger: 0.15; } .pain-grid.scroll-driven .pain-card:nth-child(3) { --stagger: 0.3; } .pain-grid.scroll-driven .pain-card { --card-p: clamp(0, (var(--p, 0) - var(--stagger, 0)) * 2.85, 1); opacity: var(--card-p); transform: translateY(calc(24px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } /* --- Desktop: stack-grid scroll-driven --- */ .stack-grid.scroll-driven .stack-card:nth-child(1) { --stagger: 0; } .stack-grid.scroll-driven .stack-card:nth-child(2) { --stagger: 0.15; } .stack-grid.scroll-driven .stack-card:nth-child(3) { --stagger: 0.3; } .stack-grid.scroll-driven .stack-card:nth-child(4) { --stagger: 0.45; } .stack-grid.scroll-driven .stack-card { --card-p: clamp(0, (var(--p, 0) - var(--stagger, 0)) * 2.5, 1); opacity: var(--card-p); transform: translateY(calc(24px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } /* --- Desktop: results-grid scroll-driven --- */ .results-grid.scroll-driven .result-stat:nth-child(1) { --stagger: 0; } .results-grid.scroll-driven .result-stat:nth-child(2) { --stagger: 0.15; } .results-grid.scroll-driven .result-stat:nth-child(3) { --stagger: 0.3; } .results-grid.scroll-driven .result-stat { --card-p: clamp(0, (var(--p, 0) - var(--stagger, 0)) * 2.85, 1); opacity: var(--card-p); transform: translateY(calc(24px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } /* --- Desktop: section-level scroll-driven fade --- */ .faq-section.scroll-driven, .page-cta.scroll-driven { opacity: clamp(0, var(--p, 0) * 2, 1); transform: translateY(calc(24px * (1 - clamp(0, var(--p, 0) * 2, 1)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .before-after.scroll-driven { --ba-p: clamp(0, (var(--p, 0) - 0.25) * 2.65, 1); opacity: var(--ba-p); transform: translateY(calc(24px * (1 - var(--ba-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } /* --- Desktop: before-after scroll-driven directional slide --- */ .before-after.scroll-driven .comparison-card.before .comparison-item:nth-child(1) { --stagger: 0; } .before-after.scroll-driven .comparison-card.before .comparison-item:nth-child(2) { --stagger: 0.15; } .before-after.scroll-driven .comparison-card.before .comparison-item:nth-child(3) { --stagger: 0.3; } .before-after.scroll-driven .comparison-card.before .comparison-item:nth-child(4) { --stagger: 0.45; } .before-after.scroll-driven .comparison-card.before .comparison-item { --card-p: clamp(0, (var(--p, 0) - 0.25 - var(--stagger, 0)) * 2.85, 1); opacity: var(--card-p); transform: translate(calc(-24px * (1 - var(--card-p))), calc(12px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .before-after.scroll-driven .comparison-card.after .comparison-item:nth-child(1) { --stagger: 0; } .before-after.scroll-driven .comparison-card.after .comparison-item:nth-child(2) { --stagger: 0.15; } .before-after.scroll-driven .comparison-card.after .comparison-item:nth-child(3) { --stagger: 0.3; } .before-after.scroll-driven .comparison-card.after .comparison-item:nth-child(4) { --stagger: 0.45; } .before-after.scroll-driven .comparison-card.after .comparison-item { --card-p: clamp(0, (var(--p, 0) - 0.25 - var(--stagger, 0)) * 2.85, 1); opacity: var(--card-p); transform: translate(calc(24px * (1 - var(--card-p))), calc(12px * (1 - var(--card-p)))); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } .before-after.scroll-driven .comparison-card.before .comparison-item::after { opacity: var(--card-p); animation: none; transition: opacity 0.18s ease-out; } .before-after.scroll-driven .comparison-arrow { --arrow-p: clamp(0, var(--p, 0) * 3, 1); opacity: var(--arrow-p); transform: scale(var(--arrow-p)); animation: none; transition: opacity 0.18s ease-out, transform 0.18s ease-out; } /* --- Mobile: benefit icon base (snap-scroll overrides above take precedence) --- */ @media (max-width: 768px) { .benefit-icon { position: static; top: auto; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .steps-grid.animate-on-scroll .step-card, .steps-grid.animate-on-scroll .step-number, .benefits-grid.animate-on-scroll .benefit-card, .benefits-grid.animate-on-scroll .benefit-card::before, .benefits-grid.animate-on-scroll .benefit-icon, .pain-grid.animate-on-scroll .pain-card, .stack-grid.animate-on-scroll .stack-card, .results-grid.animate-on-scroll .result-stat, .faq-section.animate-on-scroll, .page-cta.animate-on-scroll, .before-after.animate-on-scroll, .before-after.animate-on-scroll .comparison-card.before .comparison-item, .before-after.animate-on-scroll .comparison-card.after .comparison-item, .before-after.animate-on-scroll .comparison-card.before .comparison-item::after, .page-hero .page-hero-label, .page-hero h1, .page-hero p, .page-hero .btn, .about-description p { animation: none !important; opacity: 1 !important; transform: none !important; } }