Spaces:
Running
Running
| /* =================================================== | |
| App.css — Landing Page Editorial Sections | |
| =================================================== */ | |
| /* ===== LANDING PAGE CONTAINER ===== */ | |
| .landing-page { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .landing-section { | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| padding: 0 40px; | |
| } | |
| /* ===== EDITORIAL NAV ===== */ | |
| .editorial-nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| z-index: 100; | |
| padding: 32px 40px 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| transition: all var(--duration) var(--ease-editorial); | |
| } | |
| .editorial-nav.scrolled { | |
| padding: 14px 40px; | |
| background: rgba(247, 246, 242, 0.80); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .nav-brand-bar { | |
| display: block; | |
| height: 1px; | |
| background: var(--fg); | |
| } | |
| .nav-brand-bar.short { width: 24px; } | |
| .nav-brand-bar.long { width: 32px; } | |
| .nav-brand-name { | |
| font-family: var(--font-serif); | |
| font-size: 24px; | |
| font-weight: 500; | |
| letter-spacing: -0.01em; | |
| color: var(--fg); | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 32px; | |
| } | |
| .nav-link { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3em; | |
| color: var(--muted); | |
| text-decoration: none; | |
| cursor: pointer; | |
| background: none; | |
| border: none; | |
| padding: 0; | |
| transition: color var(--duration) var(--ease-editorial); | |
| } | |
| .nav-link:hover { color: var(--fg); } | |
| /* ===== HERO ===== */ | |
| .hero-section { | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| padding: 160px 40px 100px; | |
| position: relative; | |
| } | |
| .hero-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px 20px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| margin-bottom: 40px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3em; | |
| color: var(--muted); | |
| animation: editorialSlideUp 1s var(--ease-editorial) both; | |
| } | |
| .pulse-dot { | |
| width: 8px; | |
| height: 8px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| animation: pulseDot 2s ease infinite; | |
| } | |
| @keyframes pulseDot { | |
| 0%, 100% { opacity: 1; transform: scale(1); } | |
| 50% { opacity: 0.5; transform: scale(1.5); } | |
| } | |
| .hero-title { | |
| font-family: var(--font-serif); | |
| font-size: 7vw; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: -0.02em; | |
| line-height: 0.95; | |
| color: var(--fg); | |
| margin-bottom: 32px; | |
| animation: editorialSlideUp 1s 0.15s var(--ease-editorial) both; | |
| } | |
| .hero-title em { | |
| font-style: italic; | |
| color: var(--muted); | |
| } | |
| .hero-char { | |
| display: inline-block; | |
| animation: charReveal 150ms var(--ease-editorial) both; | |
| } | |
| .hero-char.italic { | |
| font-style: italic; | |
| color: var(--muted); | |
| } | |
| .typing-cursor { | |
| display: inline-block; | |
| font-weight: 200; | |
| color: var(--primary); | |
| margin-left: 4px; | |
| transition: opacity 100ms; | |
| } | |
| .hero-subtitle.hidden, | |
| .hero-cta.hidden { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| pointer-events: none; | |
| } | |
| .hero-subtitle.fade-in, | |
| .hero-cta.fade-in { | |
| animation: editorialSlideUp 0.8s var(--ease-editorial) both; | |
| } | |
| .hero-cta.fade-in { | |
| animation-delay: 0.2s; | |
| } | |
| @keyframes charReveal { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .hero-subtitle { | |
| font-family: var(--font-sans); | |
| font-size: 1.25rem; | |
| color: var(--fg); | |
| max-width: 520px; | |
| line-height: 1.7; | |
| margin-bottom: 48px; | |
| animation: editorialSlideUp 1s 0.3s var(--ease-editorial) both; | |
| } | |
| .hero-cta { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| padding: 16px 40px; | |
| background: var(--primary); | |
| color: #fff; | |
| border: 1px solid var(--primary); | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.25em; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| text-decoration: none; | |
| transition: all var(--duration) var(--ease-editorial); | |
| animation: editorialSlideUp 1s 0.45s var(--ease-editorial) both; | |
| } | |
| .hero-cta::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(255,255,255,0.20); | |
| transform: translateY(100%); | |
| transition: transform var(--duration) var(--ease-editorial); | |
| } | |
| .hero-cta:hover { letter-spacing: 0.4em; } | |
| .hero-cta:hover::after { transform: translateY(0); } | |
| @keyframes editorialSlideUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ===== STATISTICS GRID ===== */ | |
| .stats-section { | |
| border-top: 1px solid var(--border); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| } | |
| .stat-cell { | |
| padding: 40px; | |
| border-right: 1px solid var(--border); | |
| transition: background var(--duration) var(--ease-editorial); | |
| } | |
| .stat-cell:last-child { border-right: none; } | |
| .stat-cell:hover { background: #ffffff; } | |
| .stat-icon-box { | |
| width: 48px; | |
| height: 48px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| color: var(--primary); | |
| } | |
| .stat-number { | |
| font-family: var(--font-serif); | |
| font-size: 2.8rem; | |
| font-weight: 500; | |
| letter-spacing: -0.02em; | |
| line-height: 1.1; | |
| color: var(--fg); | |
| margin-bottom: 8px; | |
| } | |
| .stat-label { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.25em; | |
| color: var(--muted); | |
| } | |
| /* ===== TEXT REVEAL ===== */ | |
| .text-reveal-section { | |
| padding: 120px 40px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| min-height: 80vh; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .text-reveal-content { | |
| font-family: var(--font-serif); | |
| font-size: clamp(1.6rem, 3.5vw, 2.8rem); | |
| font-weight: 400; | |
| line-height: 1.4; | |
| color: var(--fg); | |
| } | |
| .text-reveal-content .reveal-word { | |
| opacity: 0.15; | |
| transition: opacity 400ms var(--ease-editorial); | |
| display: inline; | |
| } | |
| .text-reveal-content .reveal-word.active { | |
| opacity: 1; | |
| } | |
| /* ===== WORKFLOW ===== */ | |
| .workflow-section { | |
| border-top: 1px solid var(--border); | |
| padding: 100px 40px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| min-height: 70vh; | |
| } | |
| .workflow-header { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3em; | |
| color: var(--muted); | |
| margin-bottom: 40px; | |
| } | |
| .workflow-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0; | |
| } | |
| .workflow-step { | |
| padding: 24px 0; | |
| border-bottom: 1px solid var(--border); | |
| cursor: pointer; | |
| transition: opacity var(--duration) var(--ease-editorial); | |
| } | |
| .workflow-step.inactive { opacity: 0.4; } | |
| .workflow-step.active { opacity: 1; } | |
| .workflow-step-top { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .workflow-step-number { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| letter-spacing: 0.2em; | |
| color: var(--primary); | |
| min-width: 30px; | |
| } | |
| .workflow-step-title { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.25em; | |
| color: var(--fg); | |
| font-weight: 700; | |
| } | |
| .workflow-step-desc { | |
| overflow: hidden; | |
| max-height: 0; | |
| opacity: 0; | |
| transition: all var(--duration) var(--ease-editorial); | |
| padding-left: 46px; | |
| } | |
| .workflow-step.active .workflow-step-desc { | |
| max-height: 200px; | |
| opacity: 1; | |
| padding-top: 12px; | |
| } | |
| .workflow-step-desc p { | |
| font-family: var(--font-sans); | |
| font-size: 1.05rem; | |
| color: var(--fg); | |
| line-height: 1.7; | |
| } | |
| .workflow-right { | |
| position: relative; | |
| } | |
| .workflow-card { | |
| position: sticky; | |
| top: 120px; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| overflow: hidden; | |
| } | |
| .workflow-image { | |
| width: 100%; | |
| height: 360px; | |
| object-fit: cover; | |
| filter: grayscale(100%); | |
| opacity: 0.6; | |
| mix-blend-mode: multiply; | |
| display: block; | |
| } | |
| .workflow-card .scan-line { | |
| margin-top: -2px; | |
| } | |
| /* ===== USE CASE TABS ===== */ | |
| .tabs-section { | |
| border-top: 1px solid var(--border); | |
| padding: 100px 40px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| } | |
| .tabs-header { | |
| text-align: center; | |
| margin-bottom: 48px; | |
| } | |
| .tabs-header h2 { | |
| font-family: var(--font-serif); | |
| font-size: 2.2rem; | |
| font-weight: 400; | |
| margin-bottom: 16px; | |
| } | |
| .tab-switcher { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-bottom: 48px; | |
| } | |
| .tab-pill { | |
| padding: 10px 24px; | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.25em; | |
| color: var(--muted); | |
| cursor: pointer; | |
| transition: all var(--duration) var(--ease-editorial); | |
| } | |
| .tab-pill:hover { border-color: var(--fg); color: var(--fg); } | |
| .tab-pill.active { | |
| background: var(--fg); | |
| color: var(--bg); | |
| border-color: var(--fg); | |
| } | |
| .tab-content-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--bg); | |
| padding: 60px; | |
| position: relative; | |
| overflow: hidden; | |
| min-height: 340px; | |
| } | |
| .tab-ghost-icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 240px; | |
| opacity: 0.05; | |
| pointer-events: none; | |
| line-height: 1; | |
| } | |
| .tab-content-inner { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .tab-content-title { | |
| font-family: var(--font-serif); | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| margin-bottom: 12px; | |
| } | |
| .tab-content-desc { | |
| font-family: var(--font-sans); | |
| font-size: 1.05rem; | |
| color: var(--fg); | |
| line-height: 1.7; | |
| margin-bottom: 40px; | |
| max-width: 600px; | |
| } | |
| .benefits-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .benefit-item { | |
| padding: 24px 20px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .benefit-item:last-child { border-right: none; } | |
| .benefit-icon { | |
| font-size: 1.5rem; | |
| margin-bottom: 12px; | |
| } | |
| .benefit-title { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| color: var(--fg); | |
| font-weight: 700; | |
| margin-bottom: 6px; | |
| } | |
| .benefit-desc { | |
| font-family: var(--font-sans); | |
| font-size: 0.85rem; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| /* ===== CONTACT FORM ===== */ | |
| .contact-section { | |
| border-top: 1px solid var(--border); | |
| padding: 100px 40px; | |
| max-width: 1280px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 80px; | |
| } | |
| .contact-left h2 { | |
| font-family: var(--font-serif); | |
| font-size: clamp(2.2rem, 4vw, 3.5rem); | |
| font-weight: 500; | |
| line-height: 1.1; | |
| margin-bottom: 20px; | |
| } | |
| .contact-left p { | |
| font-family: var(--font-sans); | |
| font-size: 1.1rem; | |
| color: var(--fg); | |
| line-height: 1.7; | |
| max-width: 400px; | |
| } | |
| .contact-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .contact-input { | |
| width: 100%; | |
| padding: 14px 0; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 1px solid var(--border); | |
| color: var(--fg); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| outline: none; | |
| border-radius: 0; | |
| transition: border-color var(--duration) var(--ease-editorial); | |
| } | |
| .contact-input::placeholder { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| color: var(--muted); | |
| } | |
| .contact-input:focus { border-bottom-color: var(--primary); } | |
| .contact-textarea { | |
| width: 100%; | |
| padding: 14px 0; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 1px solid var(--border); | |
| color: var(--fg); | |
| font-family: var(--font-sans); | |
| font-size: 1rem; | |
| outline: none; | |
| border-radius: 0; | |
| resize: vertical; | |
| min-height: 80px; | |
| transition: border-color var(--duration) var(--ease-editorial); | |
| } | |
| .contact-textarea::placeholder { | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| color: var(--muted); | |
| } | |
| .contact-textarea:focus { border-bottom-color: var(--primary); } | |
| .contact-submit { | |
| width: 100%; | |
| padding: 18px 40px; | |
| background: var(--primary); | |
| color: #fff; | |
| border: 1px solid var(--primary); | |
| border-radius: var(--radius); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.4em; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: 0 4px 16px rgba(61, 112, 104, 0.3); | |
| transition: all var(--duration) var(--ease-editorial); | |
| margin-top: 8px; | |
| } | |
| .contact-submit::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(255,255,255,0.20); | |
| transform: translateY(100%); | |
| transition: transform var(--duration) var(--ease-editorial); | |
| } | |
| .contact-submit:hover { letter-spacing: 0.5em; } | |
| .contact-submit:hover::after { transform: translateY(0); } | |
| /* ===== FOOTER ===== */ | |
| .editorial-footer { | |
| border-top: 1px solid var(--border); | |
| padding: 40px; | |
| text-align: center; | |
| } | |
| .footer-text { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.3em; | |
| color: var(--muted); | |
| } | |
| /* ===== SIMULATOR SECTION WRAPPER ===== */ | |
| .simulator-section { | |
| border-top: 1px solid var(--border); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .simulator-section .top-bar { | |
| position: sticky; | |
| } | |
| /* ===== RESPONSIVE LANDING ===== */ | |
| @media (max-width: 1024px) { | |
| .hero-title { font-size: 12vw; } | |
| .stats-grid { grid-template-columns: 1fr; } | |
| .stat-cell { border-right: none; border-bottom: 1px solid var(--border); } | |
| .stat-cell:last-child { border-bottom: none; } | |
| .workflow-section { grid-template-columns: 1fr; } | |
| .contact-section { grid-template-columns: 1fr; gap: 40px; } | |
| .benefits-grid { grid-template-columns: 1fr; } | |
| .benefit-item { border-right: none; border-bottom: 1px solid var(--border); } | |
| .benefit-item:last-child { border-bottom: none; } | |
| } | |
| @media (max-width: 640px) { | |
| .editorial-nav { padding: 16px 20px 10px; } | |
| .editorial-nav.scrolled { padding: 10px 20px; } | |
| .nav-links { gap: 16px; } | |
| .hero-section { padding: 120px 20px 60px; } | |
| .hero-title { font-size: 14vw; } | |
| .landing-section { padding: 0 20px; } | |
| .text-reveal-section { padding: 60px 20px; } | |
| .workflow-section { padding: 60px 20px; } | |
| .tabs-section { padding: 60px 20px; } | |
| .contact-section { padding: 60px 20px; } | |
| .tab-content-card { padding: 30px; } | |
| .tab-ghost-icon { font-size: 120px; } | |
| } | |