/* ============================================================ Landing V2 — Redesigned landing page Scoped to .landing-v2 to avoid conflicts with .landing-page Uses design-tokens.css variables throughout ============================================================ */ /* ── Base Wrapper ── */ .landing-v2 { width: 100%; overflow-x: clip; color: var(--color-text-primary); font-family: var(--font-sans); } /* ── HERO SECTION ── */ .landing-v2 .lv2-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; padding: 80px 32px 56px; text-align: center; background: var(--color-bg-primary); } .landing-v2 .lv2-alpha-badge { position: absolute; top: 18px; right: 24px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); padding: 3px 10px; border-radius: var(--radius-full); letter-spacing: 0.04em; text-transform: uppercase; } .landing-v2 .lv2-logo-title { display: flex; align-items: center; gap: 0; font-size: 5rem; font-weight: 400; letter-spacing: -0.03em; margin-bottom: 16px; } .landing-v2 .lv2-logo-svg { width: 80px; height: 80px; object-fit: contain; /* Optical alignment: shift right and down to align with "ndroma" text baseline */ transform: translate(4px, 6px); margin-right: -2px; } .landing-v2 .lv2-title-text { font-size: inherit; font-weight: inherit; color: var(--color-text-primary); letter-spacing: inherit; line-height: 1; } .landing-v2 .lv2-tagline { font-size: var(--font-size-xl); color: var(--color-text-secondary); margin: 0 0 32px; font-weight: var(--font-weight-normal); } .landing-v2 .lv2-tagline-swap { display: inline-block; font-weight: 500; transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; } .landing-v2 .lv2-tagline-swap.striking { text-decoration: line-through; color: var(--color-text-tertiary, #B0A99C); } .landing-v2 .lv2-tagline-swap.swapping-out { text-decoration: line-through; color: var(--color-text-tertiary, #B0A99C); opacity: 0; transform: translateY(-6px); } .landing-v2 .lv2-tagline-swap.swapping-in { opacity: 0; transform: translateY(6px); } .landing-v2 .lv2-tagline-swap.landed { color: var(--color-accent, #5C6B54); font-weight: 600; } /* Search Box */ .landing-v2 .lv2-search-container { position: relative; width: 100%; max-width: 520px; margin-bottom: 28px; } .landing-v2 .lv2-search-box { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); transition: border-color var(--transition-normal), box-shadow var(--transition-normal); } .landing-v2 .lv2-search-box:focus-within { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); } .landing-v2 .lv2-search-icon { flex-shrink: 0; color: var(--color-text-tertiary); } .landing-v2 .lv2-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--font-size-md); color: var(--color-text-primary); font-family: var(--font-sans); } .landing-v2 .lv2-search-input::placeholder { color: var(--color-text-placeholder); } .landing-v2 .lv2-search-kbd { font-size: var(--font-size-xs); font-family: var(--font-sans); color: var(--color-text-tertiary); background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 2px 6px; line-height: 1; } /* Search dropdown — appended to via JS so it escapes overflow-x:clip on html/body. Positioned fixed by JS. */ .lv2-search-dropdown { display: none; position: fixed; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); max-height: min(460px, 50vh); overflow: hidden auto; z-index: 9999; padding: 4px 0; box-sizing: border-box; } .lv2-search-dropdown.active { display: block; } .lv2-search-dropdown .spotlight-result-item { display: flex; align-items: flex-start; text-decoration: none; color: inherit; text-align: left; padding: 10px 16px; overflow: hidden; } .lv2-search-dropdown .spotlight-result-content { flex: 1; min-width: 0; overflow: hidden; } .lv2-search-dropdown .spotlight-result-snippet { max-height: 2.95em; overflow: hidden; } .lv2-search-dropdown .spotlight-no-results { text-align: center; } /* CTA Buttons */ .landing-v2 .lv2-cta-buttons { display: flex; align-items: center; gap: 12px; margin-bottom: 0; } /* ── DEMO SWITCHER SECTION ── */ .landing-v2 .lv2-demo-section { padding: 64px 32px 80px; background: var(--color-bg-secondary); display: flex; flex-direction: column; align-items: center; } .landing-v2 .lv2-demo-wrapper { width: 100%; max-width: 1080px; } /* Demo Section Heading */ .landing-v2 .lv2-demo-heading { text-align: center; font-family: var(--font-sans); font-size: 2.5rem; font-weight: 500; letter-spacing: -0.025em; color: var(--color-text-primary); margin: 0 0 36px; line-height: 1.2; } .landing-v2 .lv2-demo-heading em { font-style: normal; font-family: inherit; font-weight: inherit; color: var(--color-accent); } /* Pill Tabs */ .landing-v2 .lv2-demo-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--color-bg-tertiary); border-radius: var(--radius-lg); margin-bottom: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; width: fit-content; margin-left: auto; margin-right: auto; } .landing-v2 .lv2-demo-tab { padding: 7px 16px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: color var(--transition-normal), background var(--transition-normal); font-family: var(--font-sans); } .landing-v2 .lv2-demo-tab:hover { color: var(--color-text-primary); } .landing-v2 .lv2-demo-tab.active { color: var(--color-text-primary); background: var(--color-bg-primary); box-shadow: var(--shadow-sm); } /* Browser Chrome */ .landing-v2 .lv2-browser { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: 0 0 var(--radius-xl) var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .landing-v2 .lv2-browser-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); } .landing-v2 .lv2-browser-dots { display: flex; gap: 6px; } .landing-v2 .lv2-browser-dot { width: 10px; height: 10px; border-radius: 50%; } .landing-v2 .lv2-browser-dot.red { background: #ff5f57; } .landing-v2 .lv2-browser-dot.yellow { background: #febc2e; } .landing-v2 .lv2-browser-dot.green { background: #28c840; } .landing-v2 .lv2-browser-url { flex: 1; font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-bg-primary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-sm); padding: 4px 12px; font-family: var(--font-sans); transition: color var(--transition-normal); } /* Tab Connector -- makes tabs visually connect to browser chrome */ .landing-v2 .lv2-tab-connector { height: 12px; background: transparent; border: none; margin-top: -1px; } /* Browser Content Area */ .landing-v2 .lv2-browser-content { min-height: 460px; position: relative; } /* Demo Pane -- shared layout for each tab */ .landing-v2 .lv2-demo-pane { display: none; position: absolute; inset: 0; min-height: 460px; } .landing-v2 .lv2-demo-pane.active { display: flex; position: relative; } /* ── Shared: Sidebar + Main layout ── */ .landing-v2 .lv2-app-sidebar { width: 230px; min-width: 230px; border-right: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); padding: 16px 0; overflow-y: auto; font-size: var(--font-size-sm); } .landing-v2 .lv2-app-main { flex: 1; padding: 24px 32px; overflow-y: auto; min-height: 460px; background: var(--color-bg-primary); } .landing-v2 .lv2-sidebar-heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 16px; margin-bottom: 6px; } .landing-v2 .lv2-sidebar-item { display: block; padding: 6px 16px 6px 24px; font-size: var(--font-size-sm); color: var(--color-text-secondary); text-decoration: none; cursor: pointer; transition: background var(--transition-fast); border-left: 2px solid transparent; } a.lv2-sidebar-item { color: inherit; text-decoration: none; } a.lv2-sidebar-item.active { color: var(--color-text-primary); } a.lv2-sidebar-item.lv2-sidebar-link::after { content: '→'; float: right; opacity: 0; transition: opacity var(--transition-fast); font-size: var(--font-size-xs); color: var(--color-text-tertiary); } a.lv2-sidebar-item.lv2-sidebar-link:hover::after { opacity: 1; } .landing-v2 .lv2-sidebar-item:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-sidebar-item.active { color: var(--color-text-primary); font-weight: var(--font-weight-medium); background: var(--color-bg-hover); border-left-color: var(--color-accent); } .landing-v2 .lv2-sidebar-divider { height: 1px; background: var(--color-border-secondary); margin: 10px 0; } /* ── PAGES TAB ── */ .landing-v2 .lv2-page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .landing-v2 .lv2-page-title { font-size: var(--font-size-4xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0; line-height: var(--line-height-tight); } .landing-v2 .lv2-page-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-top: 4px; } .landing-v2 .lv2-page-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--color-text-tertiary); text-decoration: none; transition: background 0.15s, color 0.15s; } .landing-v2 .lv2-page-action-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); } .landing-v2 .lv2-page-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-success-text); background: var(--color-success-subtle); padding: 2px 8px; border-radius: var(--radius-full); } .landing-v2 .lv2-page-badge svg { width: 12px; height: 12px; } .landing-v2 .lv2-page-section-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--color-border-primary); margin-bottom: 16px; } .landing-v2 .lv2-section-tab { padding: 8px 16px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-tertiary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; } .landing-v2 .lv2-section-tab:hover { color: var(--color-text-primary); } .landing-v2 .lv2-section-tab.active { color: var(--color-text-primary); border-bottom-color: var(--color-text-primary); } .landing-v2 .lv2-toc-item { font-size: var(--font-size-xs); } .landing-v2 .lv2-page-intro { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-primary); margin-bottom: 20px; } .landing-v2 .lv2-definition-block { border-left: 3px solid var(--color-accent); background: var(--color-bg-secondary); padding: 16px 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 20px; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } .landing-v2 .lv2-definition-block strong { color: var(--color-text-primary); } .landing-v2 .lv2-math-display { text-align: center; padding: 12px 0; font-family: var(--font-serif); font-size: var(--font-size-lg); color: var(--color-text-primary); } /* Hover Preview Card */ .landing-v2 .lv2-hover-card { width: 280px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 16px; font-size: var(--font-size-sm); z-index: 10; animation: lv2-fadeIn 0.2s ease; } .landing-v2 .lv2-hover-card-title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); color: var(--color-text-primary); margin-bottom: 6px; } .landing-v2 .lv2-hover-card p { color: var(--color-text-secondary); line-height: var(--line-height-normal); margin: 0; } @keyframes lv2-fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Animated cursor */ .landing-v2 .lv2-cursor-container { position: absolute; top: 80px; left: 40px; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .landing-v2 .lv2-cursor-container.lv2-cursor-animating { opacity: 1; } /* Hover link states */ /* lv2-hover-active mimics the real internal-wiki-link :hover state for the cursor animation */ .landing-v2 .lv2-hover-link.lv2-hover-active { border-bottom-style: solid; background: rgba(51, 51, 51, 0.1); }/* Hover instruction banner */ .landing-v2 .lv2-hover-instruction { position: absolute; top: 8px; right: 12px; font-size: var(--font-size-xs); color: var(--color-success-text); background: var(--color-success-subtle); padding: 4px 10px; border-radius: var(--radius-sm); animation: lv2-fadeIn 0.3s ease; } .landing-v2 .lv2-prerequisite-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .landing-v2 .lv2-prereq-tag { font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-bg-tertiary); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--color-border-secondary); } .landing-v2 .lv2-wiki-link { color: var(--color-text-link); text-decoration: underline; text-decoration-color: var(--color-border-primary); text-underline-offset: 2px; cursor: default; } /* ── THEOREMS TAB ── */ .landing-v2 .lv2-theorem-statement { border-left: 3px solid var(--color-info); background: var(--color-info-subtle); padding: 16px 20px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: 20px; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); } .landing-v2 .lv2-proof-block { border: 1px solid var(--color-border-secondary); border-radius: var(--radius-md); margin-bottom: 20px; } .landing-v2 .lv2-proof-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); cursor: pointer; user-select: none; transition: background var(--transition-fast); } .landing-v2 .lv2-proof-header:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-proof-body { padding: 16px; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-text-primary); } .landing-v2 .lv2-qed { text-align: right; font-size: var(--font-size-md); margin-top: 8px; } /* Theorem detail panels (multi-theorem sidebar switching) */ .landing-v2 .lv2-thm-detail { display: none; } .landing-v2 .lv2-thm-detail.active { display: block; } /* Knowledge Gaps */ .landing-v2 .lv2-thm-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; } .landing-v2 .lv2-knowledge-gaps-wrapper { position: relative; } .landing-v2 .lv2-knowledge-gaps-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: #c05621; background: #fffaf0; border: 1px solid #fbd38d; padding: 6px 12px; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .landing-v2 .lv2-knowledge-gaps-badge:hover { background: #fef3cd; } .landing-v2 .lv2-knowledge-gaps-tooltip { position: absolute; top: calc(100% + 8px); left: 0; width: 260px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 16px; z-index: 20; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .landing-v2 .lv2-knowledge-gaps-tooltip.lv2-tooltip-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .landing-v2 .lv2-tooltip-section { margin-bottom: 12px; } .landing-v2 .lv2-tooltip-section:last-child { margin-bottom: 0; } .landing-v2 .lv2-tooltip-section-title { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .landing-v2 .lv2-tooltip-list { list-style: none; margin: 0; padding: 0; } .landing-v2 .lv2-tooltip-list li { padding: 3px 0; } .landing-v2 .lv2-tooltip-list li a { font-size: var(--font-size-sm); color: var(--color-text-link); text-decoration: none; } .landing-v2 .lv2-tooltip-list li a:hover { text-decoration: underline; } .landing-v2 .lv2-add-knowledge-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-inverse); background: var(--color-text-primary); border: none; padding: 6px 14px; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); transition: opacity var(--transition-fast); } .landing-v2 .lv2-add-knowledge-btn:hover { opacity: 0.85; } /* ── COLLOQ TAB ── */ .landing-v2 .lv2-colloq-sidebar { width: 200px; min-width: 200px; } .landing-v2 .lv2-voice-indicator { display: flex; align-items: center; gap: 6px; padding: 8px 16px; font-size: var(--font-size-xs); color: var(--color-success-text); background: var(--color-success-subtle); border-bottom: 1px solid var(--color-border-secondary); } .landing-v2 .lv2-voice-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); animation: lv2-pulse 2s ease-in-out infinite; } @keyframes lv2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .landing-v2 .lv2-channel { display: flex; align-items: center; gap: 6px; padding: 6px 16px; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast); } .landing-v2 .lv2-channel:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-channel.active { color: var(--color-text-primary); font-weight: var(--font-weight-medium); background: var(--color-bg-hover); } .landing-v2 .lv2-colloq-main { flex: 1; display: flex; flex-direction: column; } .landing-v2 .lv2-colloq-header { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--color-border-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } /* Channel content switching */ .landing-v2 .lv2-channel-content { display: none; flex-direction: column; flex: 1; } .landing-v2 .lv2-channel-content.active { display: flex; } .landing-v2 .lv2-messages { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; } .landing-v2 .lv2-msg { display: flex; gap: 10px; position: relative; padding: 4px 0; border-radius: var(--radius-md); transition: background var(--transition-fast); } .landing-v2 .lv2-msg:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-msg-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); flex-shrink: 0; } .landing-v2 .lv2-msg-body { flex: 1; } .landing-v2 .lv2-msg-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .landing-v2 .lv2-msg-time { font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); color: var(--color-text-tertiary); margin-left: 6px; } .landing-v2 .lv2-msg-text { font-size: var(--font-size-md); color: var(--color-text-primary); line-height: var(--line-height-normal); margin-top: 2px; } /* Message actions (emoji + thread buttons) */ .landing-v2 .lv2-msg-actions { position: absolute; top: -8px; right: 8px; display: none; gap: 2px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); padding: 2px; box-shadow: var(--shadow-sm); } .landing-v2 .lv2-msg:hover .lv2-msg-actions { display: flex; } .landing-v2 .lv2-msg-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text-tertiary); transition: background var(--transition-fast), color var(--transition-fast); } .landing-v2 .lv2-msg-action-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); } /* Emoji reactions */ .landing-v2 .lv2-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .landing-v2 .lv2-reaction { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); padding: 2px 8px; border-radius: var(--radius-full); border: 1px solid var(--color-border-secondary); background: var(--color-bg-secondary); cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); user-select: none; } .landing-v2 .lv2-reaction:hover { border-color: var(--color-border-strong); background: var(--color-bg-hover); } .landing-v2 .lv2-reaction.lv2-reaction-active { border-color: var(--color-accent); background: var(--color-accent-subtle, rgba(59, 130, 246, 0.08)); } .landing-v2 .lv2-reaction-count { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } /* Typing indicator */ .landing-v2 .lv2-typing-indicator { display: flex; align-items: center; gap: 4px; padding: 6px 20px; font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .landing-v2 .lv2-typing-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-text-tertiary); animation: lv2-typingBounce 1.4s infinite ease-in-out both; } .landing-v2 .lv2-typing-dot:nth-child(1) { animation-delay: 0s; } .landing-v2 .lv2-typing-dot:nth-child(2) { animation-delay: 0.2s; } .landing-v2 .lv2-typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes lv2-typingBounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } .landing-v2 .lv2-typing-name { margin-left: 4px; font-style: italic; } .landing-v2 .lv2-colloq-input { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-top: 1px solid var(--color-border-primary); } .landing-v2 .lv2-colloq-input-field { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-placeholder); background: var(--color-bg-primary); font-family: var(--font-sans); } /* ── STUDY TAB ── */ .landing-v2 .lv2-study-pane { flex-direction: column; align-items: center; justify-content: center; padding: 40px 32px; background: var(--color-bg-primary); } .landing-v2 .lv2-study-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; width: 100%; max-width: 500px; } .landing-v2 .lv2-study-progress-bar { flex: 1; height: 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; } .landing-v2 .lv2-study-progress-fill { width: 47%; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); transition: width 0.4s ease; } .landing-v2 .lv2-study-progress-text { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; } .landing-v2 .lv2-study-category { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 20px; } .landing-v2 .lv2-flashcard { width: 100%; max-width: 500px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 40px 32px; text-align: center; box-shadow: var(--shadow-md); margin-bottom: 24px; transition: box-shadow var(--transition-normal); } .landing-v2 .lv2-flashcard-question { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-text-primary); line-height: var(--line-height-normal); } .landing-v2 .lv2-flashcard-divider { height: 1px; background: var(--color-border-primary); margin: 20px 0; } .landing-v2 .lv2-flashcard-badge { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 16px; } .landing-v2 .lv2-flashcard-answer-text { font-size: var(--font-size-md); color: var(--color-text-primary); line-height: var(--line-height-relaxed); text-align: left; animation: lv2-fadeIn 0.3s ease; } .landing-v2 .lv2-flashcard-answer-text .theorem-box { margin: 0 0 16px; } .landing-v2 .lv2-flashcard-explanation { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin-top: 12px; } .landing-v2 .lv2-show-answer-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 28px; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-inverse); background: var(--color-text-primary); border: none; border-radius: var(--radius-md); cursor: pointer; margin-bottom: 20px; font-family: var(--font-sans); transition: transform var(--transition-fast), opacity var(--transition-fast); } .landing-v2 .lv2-show-answer-btn:hover { transform: translateY(-1px); } .landing-v2 .lv2-difficulty-buttons { display: flex; gap: 8px; justify-content: center; animation: lv2-fadeIn 0.3s ease; } .landing-v2 .lv2-difficulty-btn { padding: 8px 20px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); border: 1px solid; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .landing-v2 .lv2-difficulty-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .landing-v2 .lv2-diff-again { color: #c53030; background: #fff5f5; border-color: #feb2b2; } .landing-v2 .lv2-diff-hard { color: #c05621; background: #fffaf0; border-color: #fbd38d; } .landing-v2 .lv2-diff-good { color: #2f855a; background: #f0fff4; border-color: #9ae6b4; } .landing-v2 .lv2-diff-easy { color: #2b6cb0; background: #ebf8ff; border-color: #90cdf4; } /* ── TEX EDITOR TAB ── */ .landing-v2 .lv2-tex-pane { display: none; } .landing-v2 .lv2-tex-pane.active { display: flex; } .landing-v2 .lv2-tex-sidebar { width: 200px; min-width: 200px; border-right: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); padding: 12px 0; } .landing-v2 .lv2-file-item { display: flex; align-items: center; gap: 6px; padding: 5px 16px; font-size: var(--font-size-sm); color: var(--color-text-secondary); cursor: default; } .landing-v2 .lv2-file-item.active { color: var(--color-text-primary); font-weight: var(--font-weight-medium); background: var(--color-bg-hover); } .landing-v2 .lv2-file-item.indent { padding-left: 32px; } .landing-v2 .lv2-file-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-text-tertiary); } .landing-v2 .lv2-tex-panels { flex: 1; display: flex; } .landing-v2 .lv2-tex-source, .landing-v2 .lv2-tex-preview { flex: 1; display: flex; flex-direction: column; } .landing-v2 .lv2-tex-source { border-right: 1px solid var(--color-border-primary); } .landing-v2 .lv2-tex-sidebar-divider { height: 1px; background: var(--color-border-primary); margin: 10px 16px; } .landing-v2 .lv2-collab-item { color: var(--color-text-tertiary); font-size: 12px; } .landing-v2 .lv2-collab-count { font-size: 10px; background: var(--color-bg-tertiary); color: var(--color-text-secondary); padding: 1px 6px; border-radius: var(--radius-full); margin-left: auto; } .landing-v2 .lv2-tex-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--color-border-secondary); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-bg-secondary); } .landing-v2 .lv2-tex-toolbar-left, .landing-v2 .lv2-tex-toolbar-right { display: flex; align-items: center; gap: 8px; } .landing-v2 .lv2-tex-vim-badge { font-size: 9px; font-weight: 700; color: var(--color-success); background: color-mix(in srgb, #10b981 12%, transparent); padding: 1px 6px; border-radius: 3px; letter-spacing: 0.08em; } .landing-v2 .lv2-tex-preview-toolbar { background: #3B3F42; border-bottom: 1px solid #2A2D30; color: #ddd; } .landing-v2 .lv2-tex-compile-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 10px; font-weight: 600; font-family: var(--font-sans); color: var(--color-text-inverse); background: var(--color-accent); border: none; border-radius: var(--radius-sm); cursor: pointer; text-transform: none; letter-spacing: 0; } .landing-v2 .lv2-tex-compile-status { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600; color: var(--color-success); text-transform: none; letter-spacing: 0; } .landing-v2 .lv2-tex-page-info, .landing-v2 .lv2-tex-zoom-info { font-size: 10px; font-weight: 500; color: #999; text-transform: none; letter-spacing: 0; } .landing-v2 .lv2-tex-highlight { color: var(--color-accent, #5A7A6A); font-weight: 600; } .landing-v2 .lv2-tex-wiki-link { font-size: 10px; font-weight: 400; color: var(--color-accent); font-style: italic; margin-left: 6px; } .landing-v2 .lv2-spin { animation: lv2-spin 0.8s linear infinite; } @keyframes lv2-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* LaTeX / Markdown source toggle */ .landing-v2 .lv2-tex-source-toggle { display: flex; border: 1px solid var(--color-border-secondary); border-radius: var(--radius-sm); overflow: hidden; } .landing-v2 .lv2-tex-toggle-btn { padding: 2px 10px; font-size: 10px; font-weight: var(--font-weight-medium); text-transform: none; letter-spacing: 0; border: none; background: var(--color-bg-secondary); color: var(--color-text-secondary); cursor: pointer; font-family: var(--font-sans); transition: background var(--transition-fast), color var(--transition-fast); } .landing-v2 .lv2-tex-toggle-btn.active { background: var(--color-bg-primary); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } .landing-v2 .lv2-tex-code { padding: 16px; font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.7; color: var(--color-text-primary); overflow: auto; flex: 1; } .landing-v2 .lv2-code-line { white-space: nowrap; } .landing-v2 .lv2-code-indent { padding-left: 2em; } .landing-v2 .lv2-code-blank { height: 1.7em; } .landing-v2 .lv2-tex-code .cmd { color: #6f42c1; } .landing-v2 .lv2-tex-code .env { color: #22863a; } .landing-v2 .lv2-tex-code .comment { color: var(--color-text-tertiary); } .landing-v2 .lv2-tex-code .md-tag { color: #6f42c1; font-weight: var(--font-weight-medium); } .landing-v2 .lv2-tex-code .md-bold { color: var(--color-text-primary); font-weight: var(--font-weight-bold); } .landing-v2 .lv2-tex-code .md-img { color: #0550ae; } .landing-v2 .lv2-tex-rendered { padding: 24px; font-family: var(--font-serif); font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-primary); overflow: auto; flex: 1; } .landing-v2 .lv2-tex-pdf-preview { background: #525659; display: flex; padding: 0; overflow: hidden; } .landing-v2 .lv2-tex-pdf-iframe { width: 100%; height: 100%; border: none; background: white; object-fit: contain; object-position: top center; } .landing-v2 .lv2-tex-rendered h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0 0 12px; } .landing-v2 .lv2-tex-figure { margin: 16px 0 0; padding: 0; } /* ── PULL REQUESTS TAB ── */ .landing-v2 .lv2-pr-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); padding: 2px 8px; border-radius: var(--radius-full); transition: background var(--transition-fast), color var(--transition-fast); } .landing-v2 .lv2-pr-badge.open { color: var(--color-accent-dark); background: var(--color-accent-subtle); } .landing-v2 .lv2-pr-badge.merged { color: var(--color-purple); background: var(--color-purple-subtle); } .landing-v2 .lv2-pr-open-count { float: right; font-weight: var(--font-weight-normal); color: var(--color-text-tertiary); text-transform: none; letter-spacing: 0; } .landing-v2 .lv2-pr-sidebar-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 16px; cursor: pointer; transition: background var(--transition-fast); } .landing-v2 .lv2-pr-sidebar-item:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-pr-sidebar-item.active { background: var(--color-bg-hover); } .landing-v2 .lv2-pr-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; transition: background var(--transition-fast); } .landing-v2 .lv2-pr-dot.open { background: var(--color-success); } .landing-v2 .lv2-pr-dot.merged { background: var(--color-purple); } .landing-v2 .lv2-pr-sidebar-title { font-size: var(--font-size-sm); color: var(--color-text-primary); font-weight: var(--font-weight-medium); line-height: 1.3; } .landing-v2 .lv2-pr-sidebar-meta { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } /* PR Detail panels (multi-panel switching) */ .landing-v2 .lv2-pr-detail-panel { display: none; } .landing-v2 .lv2-pr-detail-panel.active { display: block; } .landing-v2 .lv2-pr-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0 0 4px; } .landing-v2 .lv2-pr-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 20px; } .landing-v2 .lv2-pr-meta code { font-size: var(--font-size-xs); background: var(--color-bg-tertiary); padding: 1px 6px; border-radius: var(--radius-sm); font-family: var(--font-mono); } /* Diff Block */ .landing-v2 .lv2-diff { border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; font-family: var(--font-mono); font-size: var(--font-size-xs); } .landing-v2 .lv2-diff-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-secondary); font-size: var(--font-size-xs); color: var(--color-text-secondary); } .landing-v2 .lv2-diff-stats .added { color: var(--color-success-text); } .landing-v2 .lv2-diff-stats .removed { color: var(--color-danger); } .landing-v2 .lv2-diff-line { display: flex; padding: 1px 12px; line-height: 1.7; } .landing-v2 .lv2-diff-line.added { background: var(--color-success-subtle); color: var(--color-success-text); } .landing-v2 .lv2-diff-line.removed { background: var(--color-danger-subtle); color: var(--color-danger); } .landing-v2 .lv2-diff-line.context { color: var(--color-text-secondary); } .landing-v2 .lv2-diff-ln { width: 36px; flex-shrink: 0; color: var(--color-text-tertiary); user-select: none; text-align: right; padding-right: 8px; } /* Merged banner */ .landing-v2 .lv2-pr-merged-banner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--color-purple-subtle); border: 1px solid color-mix(in srgb, var(--color-purple) 30%, transparent); border-radius: var(--radius-md); margin-bottom: 16px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-purple); animation: lv2-fadeIn 0.3s ease; } .landing-v2 .lv2-pr-actions { display: flex; align-items: center; justify-content: space-between; } .landing-v2 .lv2-pr-approval { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--color-accent); font-weight: var(--font-weight-medium); } .landing-v2 .lv2-merge-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 20px; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-inverse); background: var(--color-accent); border: none; border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); transition: background var(--transition-fast), transform var(--transition-fast); } .landing-v2 .lv2-merge-btn:hover:not(:disabled) { background: var(--color-accent-dark); transform: translateY(-1px); } .landing-v2 .lv2-merge-btn.merged { background: var(--color-purple); cursor: default; } /* ── BLOG TAB ── */ .landing-v2 .lv2-blog-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin: 0 0 8px; line-height: var(--line-height-snug); } .landing-v2 .lv2-blog-byline { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 16px; } .landing-v2 .lv2-blog-text { font-size: var(--font-size-base); line-height: var(--line-height-relaxed); color: var(--color-text-primary); margin-bottom: 16px; } .landing-v2 .lv2-blog-tags { display: flex; gap: 6px; } .landing-v2 .lv2-blog-tag { font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-bg-secondary); padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border-secondary); } /* ── ATTRIBUTIONS TAB ── */ .landing-v2 .lv2-attr-pane { display: none; } .landing-v2 .lv2-attr-pane.active { display: flex; } .landing-v2 .lv2-attr-main { flex: 1; padding: 24px 32px; overflow-y: auto; } .landing-v2 .lv2-attr-sidebar { width: 250px; min-width: 250px; border-left: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); padding: 20px; } .landing-v2 .lv2-attr-toggle { display: flex; gap: 0; margin-bottom: 20px; border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); overflow: hidden; } .landing-v2 .lv2-attr-toggle-btn { flex: 1; padding: 6px 12px; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); text-align: center; border: none; cursor: pointer; background: var(--color-bg-secondary); color: var(--color-text-secondary); font-family: var(--font-sans); } .landing-v2 .lv2-attr-toggle-btn.active { background: var(--color-bg-primary); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); } .landing-v2 .lv2-attr-block { position: relative; padding: 16px 20px; margin-bottom: 12px; background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); transition: var(--transition-fast); } .landing-v2 .lv2-attr-block:hover { border-color: var(--color-border-secondary); box-shadow: var(--shadow-sm); } .landing-v2 .lv2-attr-block.verified { border-left: 3px solid var(--color-success, #28a745); } .landing-v2 .lv2-attr-block.unverified { border-left: 3px solid var(--color-warning, #ffc107); } /* Status icon (top-right circle) */ .landing-v2 .lv2-attr-block-status { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); } .landing-v2 .lv2-attr-block-status.verified { background: var(--color-success-subtle, rgba(40, 167, 69, 0.1)); color: var(--color-success, #28a745); } .landing-v2 .lv2-attr-block-status.unverified { background: var(--color-warning-subtle, rgba(255, 193, 7, 0.15)); color: var(--color-warning, #d4a017); } /* Info footer (hidden, shown on hover) */ .landing-v2 .lv2-attr-block-info { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-primary); justify-content: space-between; align-items: center; } .landing-v2 .lv2-attr-block:hover .lv2-attr-block-info { display: flex; } .landing-v2 .lv2-attr-block-meta { display: flex; align-items: center; gap: 12px; font-size: var(--font-size-xs); color: var(--color-text-secondary); } .landing-v2 .lv2-attr-block-type { padding: 2px 8px; background: var(--color-bg-secondary); border-radius: var(--radius-sm); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .landing-v2 .lv2-attr-block-contributor, .landing-v2 .lv2-attr-block-reviewer { display: flex; align-items: center; gap: 4px; } .landing-v2 .lv2-attr-verify-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: linear-gradient(45deg, #28a745, #20c997); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .landing-v2 .lv2-attr-verify-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); } .landing-v2 .lv2-attr-verify-btn.verified-done { background: var(--color-bg-secondary); color: var(--color-success, #28a745); pointer-events: none; } /* Sidebar contributor highlight on block hover */ .landing-v2 .lv2-attr-contributor { transition: background var(--transition-normal); padding: 4px 6px; border-radius: var(--radius-sm); } .landing-v2 .lv2-attr-contributor.highlighted { background: rgba(0, 123, 255, 0.08); } .landing-v2 .lv2-attr-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .landing-v2 .lv2-attr-block-text { font-size: var(--font-size-sm); line-height: var(--line-height-normal); color: var(--color-text-primary); } .landing-v2 .lv2-attr-sidebar-heading { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .landing-v2 .lv2-attr-contributor { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: var(--font-size-sm); } .landing-v2 .lv2-attr-contributor-name { flex: 1; color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .landing-v2 .lv2-attr-contributor-stat { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .landing-v2 .lv2-attr-progress { margin-top: 16px; } .landing-v2 .lv2-attr-progress-bar { height: 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin-top: 6px; } .landing-v2 .lv2-attr-progress-fill { height: 100%; background: var(--color-accent); border-radius: var(--radius-full); width: 83%; } .landing-v2 .lv2-attr-progress-label { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: 4px; } /* ── AUDIENCE SECTION ── */ .landing-v2 .lv2-audience-section { padding: 80px 32px; background: var(--color-bg-primary); border-top: 1px solid var(--color-border-primary); } .landing-v2 .lv2-audience-wrapper { max-width: 1080px; margin: 0 auto; } .landing-v2 .lv2-audience-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .landing-v2 .lv2-audience-heading { font-size: 2.5rem; font-weight: 600; font-family: var(--font-sans); color: var(--color-text-primary); margin: 0 0 40px; line-height: 1.2; letter-spacing: -0.025em; } .landing-v2 .lv2-audience-layout { display: flex; gap: 0; border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); overflow: hidden; background: var(--color-bg-primary); } .landing-v2 .lv2-audience-tabs { width: 240px; min-width: 240px; display: flex; flex-direction: column; border-right: 1px solid var(--color-border-primary); background: var(--color-bg-secondary); } .landing-v2 .lv2-audience-tab { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: transparent; border: none; border-bottom: 1px solid var(--color-border-secondary); cursor: pointer; text-align: left; transition: background var(--transition-normal), color var(--transition-normal); font-family: var(--font-sans); } .landing-v2 .lv2-audience-tab:last-child { border-bottom: none; } .landing-v2 .lv2-audience-tab:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-audience-tab.active { color: var(--color-text-primary); background: var(--color-bg-primary); font-weight: var(--font-weight-semibold); } .landing-v2 .lv2-audience-tab-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-tertiary); } .landing-v2 .lv2-audience-tab.active .lv2-audience-tab-icon { color: var(--color-accent); } .landing-v2 .lv2-audience-panel-area { flex: 1; min-height: 400px; } .landing-v2 .lv2-audience-panel { display: none; padding: 32px; } .landing-v2 .lv2-audience-panel.active { display: block; } .landing-v2 .lv2-audience-panel-heading { font-size: 1.75rem; font-weight: 600; font-family: var(--font-sans); color: var(--color-text-primary); margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.3; } .landing-v2 .lv2-audience-panel-desc { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: 24px; line-height: var(--line-height-normal); } .landing-v2 .lv2-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; } .landing-v2 .lv2-feature-card { padding: 16px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-lg); } .landing-v2 .lv2-feature-card-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 4px; } .landing-v2 .lv2-feature-card-desc { font-size: var(--font-size-xs); color: var(--color-text-secondary); line-height: var(--line-height-normal); } .landing-v2 .lv2-audience-illustration { padding: 20px; background: var(--color-bg-secondary); border: 1px solid var(--color-border-secondary); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .landing-v2 .lv2-audience-illustration svg { max-width: 100%; height: auto; } /* ── UNIVERSITY LOGOS SECTION ── */ .landing-v2 .lv2-logos-section { padding: 48px 32px; background: var(--color-bg-primary); } .landing-v2 .lv2-logos-wrapper { max-width: 1080px; margin: 0 auto; text-align: center; } .landing-v2 .lv2-logos-row { display: flex; align-items: center; justify-content: center; gap: 40px; margin-bottom: 16px; flex-wrap: wrap; } .landing-v2 .lv2-logo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; } .landing-v2 .lv2-logo-img { height: 32px; width: auto; opacity: 0.5; filter: grayscale(100%); transition: opacity var(--transition-normal); } .landing-v2 .lv2-logo-item:hover .lv2-logo-img { opacity: 0.8; } .landing-v2 .lv2-logo-name { font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .landing-v2 .lv2-logos-text { font-size: var(--font-size-sm); color: var(--color-text-tertiary); margin: 0; } /* ── STATS CTA SECTION ── */ .landing-v2 .lv2-stats-section { padding: 80px 32px; background: var(--color-bg-secondary); border-top: 1px solid var(--color-border-primary); text-align: center; } .landing-v2 .lv2-stats-wrapper { max-width: 900px; margin: 0 auto; } .landing-v2 .lv2-stats-heading { font-size: 2.5rem; font-weight: 600; margin: 0 0 16px; line-height: 1.2; letter-spacing: -0.025em; font-family: var(--font-sans); color: var(--color-text-primary); } .landing-v2 .lv2-stats-subtitle { font-size: 1rem; margin-bottom: 48px; color: var(--color-text-secondary); } .landing-v2 .lv2-stats-row { display: flex; justify-content: center; gap: 56px; margin-bottom: 48px; } .landing-v2 .lv2-stat { display: flex; flex-direction: column; align-items: center; } .landing-v2 .lv2-stat-number { font-size: 2.5rem; font-weight: 300; font-family: var(--font-sans); line-height: 1; margin-bottom: 6px; color: var(--color-text-primary); letter-spacing: -0.03em; /* Prevent layout shift during count-up animation */ display: inline-block; text-align: center; font-variant-numeric: tabular-nums; min-width: 5ch; } .landing-v2 .lv2-stat-label { font-size: 0.8125rem; color: var(--color-text-secondary); } .landing-v2 .lv2-stats-cta { display: flex; justify-content: center; gap: 12px; } .landing-v2 .lv2-stats-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 14px 32px; font-size: 0.9375rem; font-weight: 500; color: var(--color-bg-primary); background: var(--color-text-primary); border: none; border-radius: 10px; text-decoration: none; cursor: pointer; transition: transform 0.15s ease; font-family: system-ui, sans-serif; } .landing-v2 .lv2-stats-btn-primary:hover { transform: translateY(-1px); } .landing-v2 .lv2-stats-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 14px 32px; font-size: 0.9375rem; font-weight: 500; color: var(--color-text-primary); background: transparent; border: 1px solid var(--color-border-primary); border-radius: 10px; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease; font-family: system-ui, sans-serif; } .landing-v2 .lv2-stats-btn-secondary:hover { border-color: var(--color-text-secondary); } /* ============================================= EXPLORE SECTION ============================================= */ .landing-v2 .lv2-explore-section { padding: 64px 32px; border-top: 1px solid var(--color-border-primary); text-align: center; } .landing-v2 .lv2-explore-wrapper { max-width: 900px; margin: 0 auto; } .landing-v2 .lv2-explore-heading { font-family: var(--font-sans); font-size: 2.5rem; font-weight: 600; color: var(--color-text-primary); margin: 0 0 8px 0; letter-spacing: -0.025em; line-height: 1.2; } .landing-v2 .lv2-explore-subtitle { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0 0 32px 0; } .landing-v2 .lv2-explore-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .landing-v2 .lv2-explore-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--color-border-primary); border-radius: 999px; text-decoration: none; background: var(--color-bg-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .landing-v2 .lv2-explore-pill:hover { border-color: var(--color-text-secondary); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .landing-v2 .lv2-explore-pill-name { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); } .landing-v2 .lv2-explore-pill-type { font-size: 0.75rem; color: var(--color-text-tertiary); } @media (max-width: 768px) { .landing-v2 .lv2-explore-section { padding: 40px 16px; text-align: left; } .landing-v2 .lv2-explore-heading { text-align: center; font-size: 1.5rem; } .landing-v2 .lv2-explore-subtitle { text-align: center; margin-bottom: 24px; } .landing-v2 .lv2-explore-pills { flex-direction: column; gap: 0; } .landing-v2 .lv2-explore-pill { padding: 12px 0; gap: 8px; border: none; border-bottom: 1px solid var(--color-border-secondary); border-radius: 0; background: transparent; justify-content: space-between; } .landing-v2 .lv2-explore-pill:first-child { border-top: 1px solid var(--color-border-secondary); } .landing-v2 .lv2-explore-pill:hover { border-color: var(--color-border-secondary); box-shadow: none; } .landing-v2 .lv2-explore-pill-name { font-size: 0.875rem; } .landing-v2 .lv2-explore-pill-type { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } } /* ============================================= COLLOQ DEMO — Upgraded: Voice bar, DMs, Threads ============================================= */ /* Colloq bar overrides for the demo sidebar context */ .landing-v2 .lv2-colloq-sidebar .colloq-bar { border-bottom: 1px solid var(--color-border-primary); border-radius: 0; min-height: 44px; max-height: 52px; padding: 6px 12px; animation: none; /* no entrance animation inside demo */ } /* Re-enable leave animation when triggered */ .landing-v2 .lv2-colloq-sidebar .colloq-bar.leaving { animation: colloq-slide-up 0.2s ease forwards; } .landing-v2 .lv2-colloq-sidebar .colloq-participant { width: 24px; height: 24px; animation: none; /* disable join-pop in demo */ } /* Preserve speaking pulse for the active speaker */ .landing-v2 .lv2-colloq-sidebar .colloq-participant.speaking { animation: colloq-speaking-pulse 1.4s ease-in-out infinite; border-color: var(--color-accent); } .landing-v2 .lv2-colloq-sidebar .colloq-participant .colloq-avatar-fallback { font-size: 9px; } .landing-v2 .lv2-colloq-sidebar .colloq-participant .colloq-muted-badge { width: 12px; height: 12px; bottom: -1px; right: -1px; } .landing-v2 .lv2-colloq-sidebar .colloq-participant .colloq-muted-badge svg { width: 7px; height: 7px; } .landing-v2 .lv2-colloq-sidebar .colloq-participant-names { font-size: 11px; display: none; /* hide names to save space in demo sidebar */ } .landing-v2 .lv2-colloq-sidebar .colloq-control-btn { width: 26px; height: 26px; } .landing-v2 .lv2-colloq-sidebar .colloq-control-btn svg { width: 13px; height: 13px; } .landing-v2 .lv2-colloq-sidebar .colloq-bar-label { font-size: 11px; } .landing-v2 .lv2-colloq-sidebar .colloq-bar-label .colloq-live-dot { width: 5px; height: 5px; } /* Start Call demo button */ .landing-v2 .lv2-colloq-start-call-btn { display: flex; align-items: center; gap: 6px; width: calc(100% - 24px); margin: 8px 12px; padding: 6px 10px; font-size: 11px; font-weight: 500; font-family: var(--font-sans); color: var(--color-text-secondary); background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .landing-v2 .lv2-colloq-start-call-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-strong); } .landing-v2 .lv2-colloq-start-call-btn svg { width: 13px; height: 13px; flex-shrink: 0; } /* DM contacts in sidebar */ .landing-v2 .lv2-dm-contact { display: flex; align-items: center; gap: 8px; padding: 5px 16px; cursor: pointer; transition: background var(--transition-fast); border-radius: 0; } .landing-v2 .lv2-dm-contact:hover { background: var(--color-bg-hover); } .landing-v2 .lv2-dm-contact.active { background: var(--color-bg-hover); } .landing-v2 .lv2-dm-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--color-text-secondary); flex-shrink: 0; } .landing-v2 .lv2-dm-info { display: flex; align-items: center; gap: 6px; min-width: 0; } .landing-v2 .lv2-dm-name { font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .landing-v2 .lv2-dm-contact.active .lv2-dm-name, .landing-v2 .lv2-dm-contact:hover .lv2-dm-name { color: var(--color-text-primary); } .landing-v2 .lv2-dm-status { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex-shrink: 0; } .landing-v2 .lv2-dm-status.lv2-dm-online { background: var(--color-success); } /* Colloq body: main + thread side by side */ .landing-v2 .lv2-colloq-body { flex: 1; display: flex; min-width: 0; overflow: hidden; } .landing-v2 .lv2-colloq-body .lv2-colloq-main { flex: 1; min-width: 0; } /* Header hash symbol */ .landing-v2 .lv2-colloq-header-hash { opacity: 0.5; margin-right: 2px; } /* Thread panel overrides for demo context */ .landing-v2 .chat-float-thread { width: 260px; min-width: 200px; border-left: 1px solid var(--color-border-primary); background: var(--color-bg-primary); } .landing-v2 .chat-float-thread .lv2-msg { padding: 6px 0; } .landing-v2 .chat-float-thread .lv2-msg-avatar { width: 24px; height: 24px; font-size: 10px; } .landing-v2 .chat-float-thread .lv2-msg-text { font-size: var(--font-size-sm); } /* Thread original message styling */ .landing-v2 .lv2-thread-original { padding-bottom: 10px !important; } /* Thread divider between original and replies */ .landing-v2 .lv2-thread-divider { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 11px; color: var(--color-text-tertiary); } .landing-v2 .lv2-thread-divider::before, .landing-v2 .lv2-thread-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border-primary); } .landing-v2 .lv2-thread-empty { padding: 20px 0; text-align: center; font-size: var(--font-size-sm); color: var(--color-text-tertiary); } /* Thread indicator (inline "2 replies" link) */ .landing-v2 .lv2-thread-indicator { cursor: pointer; } /* Own message styling in DMs */ .landing-v2 .lv2-msg-own .lv2-msg-avatar { background: var(--color-accent-subtle, rgba(59, 130, 246, 0.1)); color: var(--color-accent); } /* Colloq ended / rejoin state */ .landing-v2 .lv2-colloq-ended { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 11px; color: var(--color-text-tertiary); background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border-primary); animation: lv2-fadeIn 0.2s ease; } .landing-v2 .lv2-colloq-rejoin-btn { padding: 3px 10px; font-size: 11px; font-weight: 500; font-family: var(--font-sans); color: var(--color-accent); background: var(--color-accent-subtle, rgba(59, 130, 246, 0.08)); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast); } .landing-v2 .lv2-colloq-rejoin-btn:hover { background: var(--color-accent); color: var(--color-text-inverse); }@keyframes lv2-fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Bookmark button active state */ .landing-v2 .lv2-bookmark-btn.active { color: var(--color-accent); } /* ── FIXED BACKGROUND KNOWLEDGE GRAPH ── */ .landing-v2 .lv2-graph-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; opacity: 0.07; transition: opacity 0.6s ease; } .landing-v2 .lv2-graph-bg svg { width: 100%; height: 100%; } .landing-v2 .lv2-graph-bg svg line { stroke: var(--color-text-primary); } .landing-v2 .lv2-graph-bg svg circle { fill: var(--color-text-primary); } /* All main sections need relative + bg so content sits above the fixed graph */ .landing-v2 .lv2-hero, .landing-v2 .lv2-demo-section, .landing-v2 .lv2-audience-section, .landing-v2 .lv2-stats-section { position: relative; z-index: 1; } /* ── INTERACTIVE GLOBE ── */ .landing-v2 .lv2-globe-row { max-width: 1200px; margin: 0 auto; padding: 0 32px 48px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .landing-v2 .lv2-globe-wrap { position: relative; width: 100%; aspect-ratio: 1; } .landing-v2 .lv2-globe-canvas { width: 100%; height: 100%; cursor: grab; } .landing-v2 .lv2-globe-canvas:active { cursor: grabbing; } /* Globe tooltip */ .landing-v2 .lv2-globe-tooltip { position: absolute; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity 0.2s ease; z-index: 20; } .landing-v2 .lv2-globe-tooltip.visible { opacity: 1; } .landing-v2 .lv2-globe-tooltip-inner { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 10px 14px; box-shadow: var(--shadow-md); white-space: nowrap; min-width: 120px; position: relative; } .landing-v2 .lv2-globe-tooltip-inner::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: var(--color-bg-primary); border-right: 1px solid var(--color-border-primary); border-bottom: 1px solid var(--color-border-primary); } .landing-v2 .lv2-globe-tooltip-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin-bottom: 2px; } .landing-v2 .lv2-globe-tooltip-detail { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .landing-v2 .lv2-globe-tooltip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-right: 5px; vertical-align: middle; position: relative; top: -1px; } /* Globe text side */ .landing-v2 .lv2-globe-text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .landing-v2 .lv2-globe-heading { font-family: var(--font-sans); font-size: 2.5rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 16px; color: var(--color-text-primary); } .landing-v2 .lv2-globe-stats { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; } .landing-v2 .lv2-globe-stat-num { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-accent); } .landing-v2 .lv2-globe-stat-lbl { font-size: var(--font-size-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .landing-v2 .lv2-globe-body { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 24px; } .landing-v2 .lv2-globe-quote { font-family: var(--font-serif); font-size: var(--font-size-base); font-style: italic; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 6px; } .landing-v2 .lv2-globe-cite { font-size: var(--font-size-xs); color: var(--color-text-tertiary); display: block; } /* Stats row */ .landing-v2 .lv2-graph-stats { display: flex; gap: 56px; margin-top: 28px; } .landing-v2 .lv2-graph-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .landing-v2 .lv2-graph-stat-number { font-family: var(--font-sans); font-size: 2.25rem; font-weight: 600; color: var(--color-text-primary); letter-spacing: -0.02em; line-height: 1.1; } .landing-v2 .lv2-graph-stat-label { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--color-text-tertiary); letter-spacing: 0.02em; } /* CTA row */ .landing-v2 .lv2-graph-cta { display: flex; gap: 14px; margin-top: 24px; } .landing-v2 .lv2-graph-btn-primary { display: inline-flex; align-items: center; padding: 11px 26px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text-inverse); background: var(--color-text-primary); border-radius: var(--radius-full); text-decoration: none; transition: opacity 0.15s ease; } .landing-v2 .lv2-graph-btn-primary:hover { opacity: 0.85; } .landing-v2 .lv2-graph-btn-secondary { display: inline-flex; align-items: center; padding: 11px 26px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--color-text-primary); background: transparent; border: 1.2px solid var(--color-border-primary); border-radius: var(--radius-full); text-decoration: none; transition: background 0.15s ease; } .landing-v2 .lv2-graph-btn-secondary:hover { background: var(--color-bg-secondary); } /* Graph node pills */ .landing-v2 .lv2-graph-node { position: absolute; display: flex; align-items: center; gap: 6px; background: var(--color-bg-primary); border: 1.2px solid var(--color-border-primary); border-radius: 20px; padding: 5px 13px 5px 9px; text-decoration: none; z-index: 1; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; cursor: pointer; } .landing-v2 .lv2-graph-node:hover { border-color: var(--color-accent); box-shadow: 0 2px 12px rgba(139, 115, 85, 0.15); transform: translateY(-1px); z-index: 4; } .landing-v2 .lv2-graph-node-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; } .landing-v2 .lv2-graph-node-text { font-family: var(--font-sans); font-size: 12px; color: var(--color-text-primary); white-space: nowrap; } /* Emphasized (larger) nodes */ .landing-v2 .lv2-graph-node.lv2-node-emphasis { border-width: 1.8px; border-color: var(--color-accent); box-shadow: 0 1px 6px rgba(139, 115, 85, 0.1); padding: 6px 14px 6px 10px; } .landing-v2 .lv2-graph-node.lv2-node-emphasis .lv2-graph-node-dot { width: 8px; height: 8px; } .landing-v2 .lv2-graph-node.lv2-node-emphasis .lv2-graph-node-text { font-size: 13px; font-weight: 600; } /* Tertiary (smaller, fainter) nodes */ .landing-v2 .lv2-graph-node.lv2-node-tertiary { border-color: var(--color-border-secondary, #E5E0D6); padding: 4px 11px 4px 8px; } .landing-v2 .lv2-graph-node.lv2-node-tertiary .lv2-graph-node-dot { width: 6px; height: 6px; background: var(--color-border-primary); } .landing-v2 .lv2-graph-node.lv2-node-tertiary .lv2-graph-node-text { font-size: 11px; color: var(--color-text-secondary); } /* Area cluster labels */ .landing-v2 .lv2-graph-area-label { position: absolute; font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-border-primary); z-index: 1; } /* Responsive */ /* ======================================== RESPONSIVE: TABLET (≤ 900px) ======================================== */ @media (max-width: 900px) { .landing-v2 .lv2-graph-bg { display: none; } .landing-v2 .lv2-globe-row { grid-template-columns: 1fr; padding: 0 20px 32px; gap: 32px; } .landing-v2 .lv2-globe-wrap { max-width: 400px; margin: 0 auto; } .landing-v2 .lv2-globe-heading { font-size: 1.5rem; } .landing-v2 .lv2-audience-layout { flex-direction: column; } .landing-v2 .lv2-audience-tabs { width: 100%; min-width: 0; flex-direction: row; border-right: none; border-bottom: 1px solid var(--color-border-primary); overflow-x: auto; -webkit-overflow-scrolling: touch; } .landing-v2 .lv2-audience-tab { white-space: nowrap; padding: 12px 16px; } .landing-v2 .lv2-audience-tab:last-child { border-bottom: none; } } /* ======================================== RESPONSIVE: MOBILE (≤ 600px) ======================================== */ @media (max-width: 600px) { /* Hero */ .landing-v2 .lv2-hero { padding: 60px 20px 40px; min-height: auto; } .landing-v2 .lv2-logo-title { font-size: 3rem; } .landing-v2 .lv2-logo-svg { width: 48px; height: 48px; transform: translate(2px, 4px); } .landing-v2 .lv2-subtitle { font-size: var(--font-size-md); } .landing-v2 .lv2-search-box { max-width: 100%; } .landing-v2 .lv2-search-kbd { display: none; } .landing-v2 .lv2-cta-buttons { flex-direction: column; width: 100%; max-width: 280px; } .landing-v2 .lv2-trust-logos { gap: 10px; flex-wrap: wrap; justify-content: center; } .landing-v2 .lv2-trust-logo { height: 18px; } /* Demo section */ .landing-v2 .lv2-demo-section { padding: 40px 16px 48px; } .landing-v2 .lv2-demo-heading { font-size: 1.5rem; } .landing-v2 .lv2-demo-tabs { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .landing-v2 .lv2-demo-tab { font-size: 0.75rem; padding: 6px 10px; white-space: nowrap; } .landing-v2 .lv2-browser-content { min-height: 320px; } .landing-v2 .lv2-browser-dot { width: 8px; height: 8px; } .landing-v2 .lv2-browser-url { font-size: 0.625rem; } /* Audience / "Who it's for" */ .landing-v2 .lv2-audience-section { padding: 40px 16px; } .landing-v2 .lv2-audience-heading { font-size: 1.5rem; } .landing-v2 .lv2-audience-layout { flex-direction: column; } .landing-v2 .lv2-audience-tabs { width: 100%; min-width: 0; flex-direction: row; border-right: none; border-bottom: 1px solid var(--color-border-primary); overflow-x: auto; -webkit-overflow-scrolling: touch; } .landing-v2 .lv2-audience-tab { white-space: nowrap; padding: 10px 14px; font-size: var(--font-size-sm); } .landing-v2 .lv2-audience-tab:last-child { border-bottom: none; } .landing-v2 .lv2-audience-panel-heading { font-size: 1.125rem; } .landing-v2 .lv2-audience-illustration { display: none; } /* Stats section */ .landing-v2 .lv2-stats-section { padding: 40px 16px; } .landing-v2 .lv2-stats-heading { font-size: 1.5rem; } .landing-v2 .lv2-stats-row { flex-wrap: wrap; gap: 24px 40px; justify-content: center; } .landing-v2 .lv2-stat-number { font-size: 2rem; } .landing-v2 .lv2-stats-cta { flex-direction: column; align-items: center; max-width: 280px; margin: 0 auto; } .landing-v2 .lv2-globe-wrap { max-width: 300px; } /* Final CTA */ .landing-v2 .lv2-final-cta { padding: 40px 16px; } /* Demo content sidebars (page sidebar, Colloq chat, PR list, attributions) */ .landing-v2 .lv2-app-sidebar, .landing-v2 .lv2-colloq-sidebar, .landing-v2 .lv2-attr-sidebar { display: none; } .landing-v2 .lv2-attr-main { padding: 16px; } /* TeX Editor: hide sidebar, stack source above preview */ .landing-v2 .lv2-tex-sidebar { display: none; } .landing-v2 .lv2-tex-panels { flex-direction: column; } .landing-v2 .lv2-tex-source { border-right: none; border-bottom: 1px solid var(--color-border-primary); max-height: 220px; overflow: hidden; } .landing-v2 .lv2-tex-preview { min-height: 160px; } .landing-v2 .lv2-tex-code { font-size: 11px; } .landing-v2 .lv2-tex-toolbar { padding: 4px 8px; } .landing-v2 .lv2-tex-source-toggle { display: none; } .landing-v2 .lv2-tex-vim-badge { display: none; } } /* ======================================== RESPONSIVE: SMALL MOBILE (≤ 400px) ======================================== */ @media (max-width: 400px) { .landing-v2 .lv2-logo-title { font-size: 2.5rem; } .landing-v2 .lv2-logo-svg { width: 40px; height: 40px; transform: translate(2px, 3px); } .landing-v2 .lv2-stat-number { font-size: 1.75rem; } .landing-v2 .lv2-stats-row { gap: 20px 32px; } } /* ============================================================ Trusted By — logos + supporting text Ported from landing.css so it renders on landing-v2. ============================================================ */ .landing-trusted { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding-top: 1rem; margin-top: 0.25rem; width: 100%; max-width: 100%; overflow: hidden; } .landing-trusted-logos { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: nowrap; overflow: hidden; max-width: 100%; } .trusted-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: var(--radius-md); text-decoration: none; transition: all 0.2s ease; } .trusted-item:hover { background: var(--light-gray, #f5f5f7); text-decoration: none; } .trusted-item:hover .trusted-logo { filter: grayscale(100%) opacity(0.7); } .trusted-item:hover .trusted-name { color: var(--text-color, #1D2433); } .trusted-logo { height: 24px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.4); transition: filter 0.2s ease; } .trusted-name { font-size: 0.75rem; font-weight: 500; color: var(--light-text, #86868b); transition: color 0.2s ease; } .landing-trusted-text { font-size: 0.8125rem; color: var(--color-accent); font-weight: var(--font-weight-medium); margin: 0; } .landing-open-note { font-size: 0.75rem; color: var(--color-text-tertiary, #9C9688); margin: 4px 0 0; } .landing-open-note a { color: var(--color-text-secondary, #6B6560); text-decoration: none; } .landing-open-note a:hover { color: var(--color-text-primary); text-decoration: underline; } @media (max-width: 900px) { .trusted-name { display: none; } .landing-trusted-logos { gap: 1rem; } } @media (max-width: 600px) { .landing-trusted-logos { gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .trusted-logo { height: 20px; } }/* ── Get Started nav modal ── */ .lv2-nav-modal-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .lv2-nav-modal-overlay.active { opacity: 1; visibility: visible; } .lv2-nav-modal { position: relative; background: var(--color-bg-primary, #fff); border: 1px solid var(--border-color, #d2d2d7); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.08); min-width: 520px; max-width: calc(100vw - 2rem); overflow: hidden; transform: scale(0.95) translateY(10px); transition: transform 0.25s ease; } .lv2-nav-modal-overlay.active .lv2-nav-modal { transform: scale(1) translateY(0); } .lv2-nav-modal-close { position: absolute; top: 12px; right: 12px; z-index: 1; background: none; border: none; cursor: pointer; color: var(--color-text-tertiary); padding: 4px; border-radius: 6px; transition: background 0.15s, color 0.15s; } .lv2-nav-modal-close:hover { background: var(--color-bg-tertiary, #f0f0f0); color: var(--color-text-primary); } /* Override site.css mobile resets — keep desktop layout inside the modal */ .lv2-nav-modal .nav-dropdown-inner { display: flex; flex-direction: row; } .lv2-nav-modal .nav-dropdown-main { grid-template-columns: repeat(2, 1fr); } .lv2-nav-modal .nav-dropdown-sidebar { width: 360px; border-left: 1px solid var(--border-color, #d2d2d7); border-top: none; } .lv2-nav-modal .nav-dropdown-sidebar-items { grid-template-columns: repeat(2, 1fr); } @media (max-width: 480px) { .lv2-nav-modal-overlay { align-items: flex-end; } .lv2-nav-modal { min-width: unset; width: 100%; max-height: 80vh; overflow-y: auto; border-radius: 16px 16px 0 0; transform: translateY(100%); } .lv2-nav-modal-overlay.active .lv2-nav-modal { transform: translateY(0); } .lv2-nav-modal .nav-dropdown-inner { flex-direction: column; } .lv2-nav-modal .nav-dropdown-main { grid-template-columns: 1fr; } .lv2-nav-modal .nav-dropdown-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border-color, #d2d2d7); } .lv2-nav-modal .nav-dropdown-sidebar-items { grid-template-columns: 1fr; } } }