Spaces:
Configuration error
Configuration error
| /* About Modal Styles */ | |
| .about-modal { | |
| background: var(--color-bg-primary); | |
| border: 1px solid var(--color-border-primary); | |
| border-radius: var(--border-radius-lg); | |
| max-width: 900px; | |
| width: 95%; | |
| max-height: 85vh; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .dark-mode .about-modal { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); | |
| } | |
| .about-modal-content { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100%; | |
| } | |
| /* Header */ | |
| .about-modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 24px 16px 24px; | |
| border-bottom: 1px solid var(--color-border-primary); | |
| background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%); | |
| } | |
| .dark-mode .about-modal-header { | |
| background: linear-gradient(135deg, var(--color-bg-secondary-dark) 0%, var(--color-bg-primary-dark) 100%); | |
| border-bottom-color: var(--color-border-primary-dark); | |
| } | |
| .about-title { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--color-text-primary); | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| line-height: 1.2; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| } | |
| .dark-mode .about-title { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .about-close-button { | |
| background: none; | |
| border: none; | |
| color: var(--color-text-secondary); | |
| cursor: pointer; | |
| padding: 8px; | |
| border-radius: var(--border-radius-sm); | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .about-close-button:hover { | |
| background: var(--color-bg-secondary); | |
| color: var(--color-text-primary); | |
| } | |
| .dark-mode .about-close-button { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .dark-mode .about-close-button:hover { | |
| background: var(--color-bg-secondary-dark); | |
| color: var(--color-text-primary-dark); | |
| } | |
| /* Body */ | |
| .about-modal-body { | |
| padding: 20px 24px; | |
| overflow-y: auto; | |
| flex: 1; | |
| } | |
| /* Hero Section */ | |
| .about-hero { | |
| margin-bottom: 24px; | |
| text-align: center; | |
| } | |
| .about-description { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| color: var(--color-text-primary); | |
| margin: 0 0 24px 0; | |
| text-align: left; | |
| } | |
| .dark-mode .about-description { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .about-section { | |
| margin-bottom: 24px; | |
| } | |
| .about-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .about-section-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| margin: 0 0 12px 0; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | |
| 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', | |
| sans-serif; | |
| } | |
| .dark-mode .about-section-title { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .about-section-text { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--color-text-secondary); | |
| margin: 0; | |
| } | |
| .dark-mode .about-section-text { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Content Grid Layout */ | |
| .about-content-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| align-items: start; | |
| margin-top: 24px; | |
| } | |
| .about-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| /* Pipeline Demo */ | |
| .pipeline-demo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| margin: 16px 0; | |
| padding: 20px; | |
| background: var(--color-bg-secondary); | |
| border-radius: var(--border-radius-md); | |
| border: 1px solid var(--color-border-primary); | |
| flex-wrap: wrap; | |
| } | |
| .dark-mode .pipeline-demo { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| /* Pipeline Steps */ | |
| .pipeline-steps { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .step-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| padding: 0; | |
| } | |
| .step-content { | |
| flex: 1; | |
| } | |
| .step-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 4px; | |
| } | |
| .step-number { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 20px; | |
| height: 20px; | |
| background: var(--color-bg-primary); | |
| color: var(--color-text-primary); | |
| border: 1px solid var(--color-text-secondary); | |
| border-radius: 50%; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .dark-mode .step-number { | |
| background: var(--color-bg-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| border-color: var(--color-text-secondary-dark); | |
| } | |
| .step-description { | |
| font-size: 13px; | |
| line-height: 1.4; | |
| color: var(--color-text-secondary); | |
| margin: 0; | |
| } | |
| .dark-mode .step-description { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .step-example { | |
| flex-shrink: 0; | |
| } | |
| /* Mini Matrix */ | |
| .mini-matrix { | |
| font-family: 'Courier New', monospace; | |
| font-size: 6px; | |
| line-height: 1; | |
| background: white; | |
| padding: 4px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .mini-matrix { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .mini-row { | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.1; | |
| margin-bottom: 1px; | |
| } | |
| .zero-value { | |
| opacity: .5; | |
| } | |
| /* Vector Preview */ | |
| .vector-preview { | |
| font-family: 'Courier New', monospace; | |
| font-size: 8px; | |
| line-height: 1.2; | |
| background: var(--color-bg-primary); | |
| padding: 6px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| max-width: 120px; | |
| word-break: break-all; | |
| color: var(--color-text-primary); | |
| font-weight: 600; | |
| letter-spacing: -0.3px; | |
| } | |
| .dark-mode .vector-preview { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| color: var(--color-text-primary-dark); | |
| } | |
| /* Coordinates */ | |
| .coordinates { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 9px; | |
| background: var(--color-bg-primary); | |
| padding: 6px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .coordinates { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .coord { | |
| color: var(--color-accent); | |
| font-weight: 600; | |
| } | |
| .dark-mode .coord { | |
| color: var(--color-accent-dark); | |
| } | |
| /* Font Cluster Demo */ | |
| .font-cluster-demo { | |
| display: flex; | |
| gap: 6px; | |
| align-items: center; | |
| padding: 6px; | |
| background: var(--color-bg-primary); | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .font-cluster-demo { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .font-sample { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| line-height: 1; | |
| } | |
| .dark-mode .font-sample { | |
| color: var(--color-text-primary-dark); | |
| } | |
| /* Subtitle */ | |
| .about-subtitle { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| margin: 20px 0 8px 0; | |
| } | |
| .dark-mode .about-subtitle { | |
| color: var(--color-text-primary-dark); | |
| } | |
| /* Code Link */ | |
| .code-link { | |
| display: inline-block; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-text-primary); | |
| text-decoration: underline; | |
| margin-top: 8px; | |
| margin-bottom: 24px; | |
| transition: color var(--transition-normal); | |
| } | |
| .code-link:hover { | |
| color: var(--color-text-secondary); | |
| } | |
| .dark-mode .code-link { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .dark-mode .code-link:hover { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Inline Link */ | |
| .inline-link { | |
| color: var(--color-text-primary); | |
| text-decoration: underline; | |
| font-size: 12px; | |
| font-weight: 500; | |
| transition: color var(--transition-normal); | |
| } | |
| .inline-link:hover { | |
| color: var(--color-text-secondary); | |
| } | |
| .dark-mode .inline-link { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .dark-mode .inline-link:hover { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Multi-Glyph Demo */ | |
| .multi-glyph-demo { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 4px; | |
| padding: 8px 10px; | |
| background: var(--color-bg-primary); | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .multi-glyph-demo { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .glyph-grid { | |
| display: flex; | |
| gap: 8px; | |
| color: var(--color-text-primary); | |
| } | |
| .dark-mode .glyph-grid { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .glyph-grid-label { | |
| font-family: 'Courier New', monospace; | |
| font-size: 9px; | |
| color: var(--color-text-secondary); | |
| opacity: 0.6; | |
| } | |
| .dark-mode .glyph-grid-label { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Pipeline Flow */ | |
| .pipeline-flow { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 10px; | |
| background: var(--color-bg-primary); | |
| padding: 6px 8px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .pipeline-flow { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .pipeline-node { | |
| color: var(--color-text-primary); | |
| font-weight: 500; | |
| white-space: nowrap; | |
| } | |
| .dark-mode .pipeline-node { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .pipeline-arrow { | |
| color: var(--color-text-secondary); | |
| opacity: 0.5; | |
| } | |
| .dark-mode .pipeline-arrow { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Animation */ | |
| @keyframes modalSlideIn { | |
| from { | |
| opacity: 0; | |
| transform: scale(0.9) translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: scale(1) translateY(0); | |
| } | |
| } | |
| /* Google Fonts link styling */ | |
| .about-modal .google-fonts-link { | |
| color: var(--color-text-primary); | |
| text-decoration: underline; | |
| font-weight: 500; | |
| transition: color var(--transition-normal); | |
| } | |
| .about-modal .google-fonts-link:hover { | |
| color: var(--color-text-secondary); | |
| } | |
| .dark-mode .about-modal .google-fonts-link { | |
| color: var(--color-text-primary-dark); | |
| } | |
| .dark-mode .about-modal .google-fonts-link:hover { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| /* Tech list styling */ | |
| .about-tech-list { | |
| margin: 12px 0 16px 0; | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .about-tech-list li { | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--color-text-secondary); | |
| margin-bottom: 8px; | |
| padding-left: 20px; | |
| position: relative; | |
| } | |
| .about-tech-list li:before { | |
| content: "→"; | |
| position: absolute; | |
| left: 0; | |
| color: var(--color-accent); | |
| font-weight: bold; | |
| } | |
| .about-tech-list li:last-child { | |
| margin-bottom: 0; | |
| } | |
| .dark-mode .about-tech-list li { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .dark-mode .about-tech-list li:before { | |
| color: var(--color-accent-dark); | |
| } | |
| .about-tech-list strong { | |
| color: var(--color-text-primary); | |
| font-weight: 600; | |
| } | |
| .dark-mode .about-tech-list strong { | |
| color: var(--color-text-primary-dark); | |
| } | |
| /* Legacy pixel matrix demo - now using pipeline-demo */ | |
| .pixel-matrix-demo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 16px; | |
| margin: 20px 0; | |
| padding: 20px; | |
| background: var(--color-bg-secondary); | |
| border-radius: var(--border-radius-md); | |
| border: 1px solid var(--color-border-primary); | |
| flex-wrap: wrap; | |
| } | |
| .dark-mode .pixel-matrix-demo { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .demo-step { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 120px; | |
| } | |
| .demo-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--color-accent); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .dark-mode .demo-label { | |
| color: var(--color-accent-dark); | |
| } | |
| .pixel-matrix { | |
| font-family: 'Courier New', monospace; | |
| font-size: 8px; | |
| line-height: 1; | |
| background: white; | |
| padding: 4px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .pixel-matrix { | |
| background: var(--color-bg-secondary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .pixel-row { | |
| margin: 0; | |
| padding: 0; | |
| line-height: 1.2; | |
| margin-bottom: 1px; | |
| } | |
| .vector-demo { | |
| font-family: 'Courier New', monospace; | |
| font-size: 8px; | |
| line-height: 1.2; | |
| background: var(--color-bg-primary); | |
| padding: 6px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| max-width: 200px; | |
| word-break: break-all; | |
| color: var(--color-text-secondary); | |
| } | |
| .dark-mode .vector-demo { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .umap-demo { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| font-family: 'Courier New', monospace; | |
| font-size: 10px; | |
| background: var(--color-bg-primary); | |
| padding: 8px; | |
| border-radius: 2px; | |
| border: 1px solid var(--color-border-primary); | |
| } | |
| .dark-mode .umap-demo { | |
| background: var(--color-bg-primary-dark); | |
| border-color: var(--color-border-primary-dark); | |
| } | |
| .coordinate { | |
| color: var(--color-accent); | |
| font-weight: 600; | |
| } | |
| .dark-mode .coordinate { | |
| color: var(--color-accent-dark); | |
| } | |
| .demo-caption { | |
| font-size: 10px; | |
| color: var(--color-text-secondary); | |
| text-align: center; | |
| font-style: italic; | |
| } | |
| .dark-mode .demo-caption { | |
| color: var(--color-text-secondary-dark); | |
| } | |
| .demo-arrow { | |
| font-size: 16px; | |
| color: var(--color-accent); | |
| font-weight: bold; | |
| } | |
| .dark-mode .demo-arrow { | |
| color: var(--color-accent-dark); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .about-modal { | |
| max-width: 95%; | |
| width: 95%; | |
| } | |
| .about-content-grid { | |
| grid-template-columns: 1fr; | |
| gap: 24px; | |
| } | |
| .step-item { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .step-example { | |
| align-self: center; | |
| } | |
| .mini-matrix { | |
| font-size: 5px; | |
| } | |
| .vector-preview { | |
| font-size: 7px; | |
| max-width: 100px; | |
| } | |
| .coordinates { | |
| font-size: 8px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .about-modal-header { | |
| padding: 16px 20px 12px 20px; | |
| } | |
| .about-modal-body { | |
| padding: 16px 20px; | |
| } | |
| .about-title { | |
| font-size: 20px; | |
| } | |
| .info-card { | |
| padding: 12px; | |
| } | |
| .pipeline-demo { | |
| padding: 12px; | |
| } | |
| } | |