Spaces:
Paused
Paused
| /* ============================================================ | |
| CONSTRUCT - Digital Person Instantiation Interface | |
| Persona-agnostic industrial grunge aesthetic | |
| 90's garage meets Stark tech monster | |
| With individual RSI and voice selection | |
| ============================================================ */ | |
| body { | |
| background: #1a1a1a; | |
| background-image: | |
| radial-gradient(ellipse at center, #2a2a2a 0%, #0f0f0f 100%), | |
| repeating-linear-gradient( | |
| 45deg, | |
| transparent, | |
| transparent 10px, | |
| rgba(0, 0, 0, 0.03) 10px, | |
| transparent 20px | |
| ); | |
| color: #d4d4d4; | |
| font-family: "Courier New", "Fira Code", monospace; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Industrial grunge texture overlay */ | |
| body::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: | |
| url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3C/svg%3E"); | |
| opacity: 0.08; | |
| pointer-events: none; | |
| mix-blend-mode: overlay; | |
| } | |
| .construct-container { | |
| position: relative; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| /* World Tree - subtle background element */ | |
| .world-tree { | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60vh; | |
| height: 40vh; | |
| background: | |
| radial-gradient(circle at 50% 100%, rgba(66, 72, 241, 0.1) 0%, transparent 60%), | |
| radial-gradient(circle at 50% 90%, rgba(247, 68, 68, 0.08) 0%, transparent 50%); | |
| border-radius: 50% 50% 0 0 / 60% 60% 0 0; | |
| z-index: 1; | |
| opacity: 0.6; | |
| animation: tree-pulse 4s ease-in-out infinite; | |
| } | |
| @keyframes tree-pulse { | |
| 0%, 100% { opacity: 0.5; } | |
| 50% { opacity: 0.7; } | |
| } | |
| /* Round Table - Stark garage centerpiece */ | |
| .round-table { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) scale(2); | |
| width: 400px; | |
| height: 400px; | |
| border: 8px solid rgba(139, 139, 139, 0.3); | |
| border-radius: 50%; | |
| background: | |
| radial-gradient(circle at 30% 30%, rgba(66, 72, 241, 0.05) 0%, transparent 50%), | |
| repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 20px, | |
| rgba(0, 0, 0, 0.1) 20px, | |
| transparent 40px | |
| ); | |
| z-index: 1; | |
| box-shadow: | |
| 0 0 60px rgba(0, 0, 0, 0.5), | |
| inset 0 0 40px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Form Container */ | |
| .construct-form { | |
| position: relative; | |
| z-index: 10; | |
| background: linear-gradient(135deg, #1f1f1f 0%, #1a1a1a 100%); | |
| border: 3px solid rgba(139, 139, 139, 0.4); | |
| padding: 2.5rem 2rem; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| text-align: center; | |
| box-shadow: | |
| 0 0 0 10px rgba(0, 0, 0, 0.8), | |
| 0 10px 30px rgba(0, 0, 0, 0.5), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| position: relative; | |
| } | |
| /* Industrial corner markers */ | |
| .construct-form::before { | |
| content: ''; | |
| position: absolute; | |
| top: -1px; | |
| left: -1px; | |
| right: -1px; | |
| bottom: -1px; | |
| background: | |
| linear-gradient(to right, rgba(66, 72, 241, 0.6) 2px, transparent 2px) 0 0 / 10px 10px, | |
| linear-gradient(to right, transparent 2px, rgba(66, 72, 241, 0.6) 2px) 0 100% / 10px 10px, | |
| linear-gradient(to bottom, rgba(66, 72, 241, 0.6) 2px, transparent 2px) 0 0 / 10px 10px, | |
| linear-gradient(to bottom, transparent 2px, rgba(66, 72, 241, 0.6) 2px) 100% 0 / 10px 10px; | |
| pointer-events: none; | |
| border-radius: 2px; | |
| } | |
| /* Persona Display Stage */ | |
| .persona-display { | |
| margin-bottom: 2rem; | |
| padding-bottom: 1.5rem; | |
| border-bottom: 1px solid rgba(139, 139, 139, 0.3); | |
| } | |
| .persona-avatar { | |
| width: 100px; | |
| height: 100px; | |
| margin: 0 auto 1.5rem; | |
| border-radius: 50%; | |
| border: 4px solid rgba(139, 139, 139, 0.5); | |
| overflow: hidden; | |
| position: relative; | |
| box-shadow: | |
| 0 0 20px rgba(0, 0, 0, 0.4), | |
| inset 0 0 15px rgba(0, 0, 0, 0.3); | |
| background: #0f0f0f; | |
| transition: all 0.3s ease; | |
| } | |
| .persona-avatar:hover { | |
| border-color: rgba(66, 72, 241, 0.6); | |
| box-shadow: | |
| 0 0 30px rgba(66, 72, 241, 0.5), | |
| inset 0 0 20px rgba(66, 72, 241, 0.1); | |
| } | |
| .avatar-image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| filter: sepia(30%) contrast(1.1); | |
| } | |
| .avatar-placeholder { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2.5rem; | |
| background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); | |
| color: #666; | |
| font-weight: bold; | |
| } | |
| .persona-name { | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| color: #d4d4d4; | |
| text-transform: uppercase; | |
| letter-spacing: 3px; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); | |
| font-family: "Impact", "Arial Black", sans-serif; | |
| animation: glitch 3s infinite; | |
| } | |
| @keyframes glitch { | |
| 0%, 90%, 100% { | |
| transform: translate(0); | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); | |
| } | |
| 91% { | |
| transform: translate(-2px, 1px); | |
| text-shadow: -2px -1px 0 rgba(66, 72, 241, 0.8); | |
| } | |
| 92% { | |
| transform: translate(2px, -1px); | |
| text-shadow: 2px 1px 0 rgba(247, 68, 68, 0.8); | |
| } | |
| 93% { | |
| transform: translate(-1px, 2px); | |
| } | |
| 94% { | |
| transform: translate(1px, -2px); | |
| } | |
| 95% { | |
| transform: translate(0); | |
| } | |
| } | |
| .persona-subtitle { | |
| font-size: 0.75rem; | |
| color: #888; | |
| margin-bottom: 0; | |
| text-transform: uppercase; | |
| letter-spacing: 4px; | |
| font-family: "Courier New", monospace; | |
| } | |
| /* Customization Stage */ | |
| .customization-stage { | |
| display: block; | |
| animation: fade-in 0.5s ease; | |
| } | |
| @keyframes fade-in { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .customization-header { | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 2px solid rgba(66, 72, 241, 0.4); | |
| } | |
| .customization-header h2 { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| margin: 0 0 0.5rem 0; | |
| color: #4248f1; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| font-family: "Impact", "Arial Black", sans-serif; | |
| } | |
| .stage-description { | |
| font-size: 0.75rem; | |
| color: #777; | |
| margin: 0; | |
| } | |
| /* Section: RSI Selection */ | |
| .rsi-selection, | |
| .voice-selection { | |
| margin-bottom: 2rem; | |
| padding: 1.25rem; | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(139, 139, 139, 0.3); | |
| border-radius: 0; | |
| } | |
| .section-label { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1rem; | |
| color: #888; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| font-family: "Courier New", monospace; | |
| } | |
| .section-icon { | |
| font-size: 1.25rem; | |
| } | |
| .section-help { | |
| font-size: 0.675rem; | |
| color: #666; | |
| margin: 0 0 1rem 0; | |
| line-height: 1.4; | |
| } | |
| /* RSI Options */ | |
| .rsi-options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| .rsi-option, | |
| .voice-option { | |
| display: flex; | |
| padding: 0.75rem 1rem; | |
| background: rgba(15, 15, 15, 0.8); | |
| border: 2px solid rgba(139, 139, 139, 0.2); | |
| border-radius: 0; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| align-items: center; | |
| } | |
| .rsi-option:hover, | |
| .voice-option:hover { | |
| background: rgba(25, 25, 25, 0.9); | |
| border-color: rgba(66, 72, 241, 0.4); | |
| } | |
| .rsi-option input[type="radio"], | |
| .voice-option input[type="radio"] { | |
| margin-right: 1rem; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| cursor: pointer; | |
| } | |
| .option-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .option-title { | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| color: #d4d4d4; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .option-desc { | |
| font-size: 0.75rem; | |
| color: #666; | |
| margin-top: 0.25rem; | |
| } | |
| /* Upload Input */ | |
| .rsi-upload { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: rgba(10, 10, 10, 0.6); | |
| border: 1px dashed rgba(139, 139, 139, 0.3); | |
| } | |
| .rsi-upload input[type="file"] { | |
| width: 100%; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.875rem; | |
| color: #888; | |
| cursor: pointer; | |
| } | |
| .upload-status { | |
| font-size: 0.75rem; | |
| color: #4248f1; | |
| margin-top: 0.5rem; | |
| } | |
| /* Voice Presets */ | |
| .voice-presets { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.75rem; | |
| } | |
| /* Custom Tokens Input */ | |
| .voice-custom { | |
| margin-top: 1rem; | |
| padding: 1rem; | |
| background: rgba(10, 10, 10, 0.6); | |
| border: 1px solid rgba(139, 139, 139, 0.3); | |
| } | |
| .voice-custom label { | |
| display: block; | |
| font-size: 0.75rem; | |
| color: #777; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .voice-custom input[type="text"] { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 2px solid rgba(139, 139, 139, 0.3); | |
| border-radius: 0; | |
| background: rgba(15, 15, 15, 0.8); | |
| color: #d4d4d4; | |
| font-family: "Courier New", monospace; | |
| font-size: 0.875rem; | |
| box-sizing: border-box; | |
| } | |
| /* Login Stage */ | |
| .login-stage { | |
| display: none; | |
| } | |
| .input-group { | |
| margin-bottom: 1.75rem; | |
| text-align: left; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| color: #777; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| font-family: "Courier New", monospace; | |
| } | |
| .input-group input { | |
| width: 100%; | |
| padding: 0.875rem 1rem; | |
| border: 2px solid rgba(139, 139, 139, 0.3); | |
| border-radius: 0; | |
| background: #0f0f0f; | |
| color: #d4d4d4; | |
| font-size: 1rem; | |
| font-family: "Courier New", monospace; | |
| box-sizing: border-box; | |
| transition: all 0.2s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .input-group input:focus { | |
| outline: none; | |
| border-color: rgba(66, 72, 241, 0.8); | |
| background: #151515; | |
| box-shadow: | |
| inset 0 0 10px rgba(66, 72, 241, 0.1), | |
| 0 0 20px rgba(66, 72, 241, 0.2); | |
| } | |
| .input-group input::placeholder { | |
| color: #444; | |
| text-transform: none; | |
| } | |
| /* Buttons */ | |
| .btn-main { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 3px solid rgba(139, 139, 139, 0.5); | |
| background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%); | |
| color: #d4d4d4; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-transform: uppercase; | |
| font-family: "Impact", "Arial Black", sans-serif; | |
| margin-top: 0.5rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); | |
| } | |
| .btn-main:hover { | |
| background: linear-gradient(135deg, #333 0%, #2a2a2a 100%); | |
| border-color: rgba(66, 72, 241, 0.6); | |
| box-shadow: 0 5px 15px rgba(66, 72, 241, 0.3); | |
| transform: translateY(-2px); | |
| text-shadow: 2px 2px 4px rgba(66, 72, 241, 0.8); | |
| } | |
| .btn-main:active { | |
| transform: translateY(0); | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| .btn-secondary { | |
| width: 100%; | |
| padding: 0.875rem; | |
| border: 2px solid rgba(139, 139, 139, 0.4); | |
| background: transparent; | |
| color: #777; | |
| font-size: 0.875rem; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-transform: uppercase; | |
| font-family: "Courier New", monospace; | |
| margin-top: 0.5rem; | |
| } | |
| .btn-secondary:hover { | |
| background: rgba(15, 15, 15, 0.8); | |
| color: #d4d4d4; | |
| border-color: rgba(66, 72, 241, 0.4); | |
| } | |
| .btn-continue { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 3px solid rgba(66, 72, 241, 0.5); | |
| background: linear-gradient(135deg, #4248f1 0%, #2a2a2a 100%); | |
| color: #d4d4d4; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| text-transform: uppercase; | |
| font-family: "Impact", "Arial Black", sans-serif; | |
| margin-top: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(66, 72, 241, 0.3); } | |
| 50% { box-shadow: 0 0 30px rgba(66, 72, 241, 0.5); } | |
| } | |
| .btn-continue:hover { | |
| background: linear-gradient(135deg, #333 0%, #4248f1 100%); | |
| border-color: rgba(66, 72, 241, 0.6); | |
| box-shadow: 0 5px 20px rgba(66, 72, 241, 0.4); | |
| transform: translateY(-2px); | |
| animation: none; | |
| } | |
| .error { | |
| color: #cf6679; | |
| margin-top: 1.5rem; | |
| font-size: 0.875rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border: 1px solid #cf6679; | |
| padding: 0.75rem; | |
| background: rgba(207, 102, 121, 0.1); | |
| } | |
| /* Scanline effect */ | |
| body::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: repeating-linear-gradient( | |
| 0deg, | |
| transparent, | |
| transparent 2px, | |
| rgba(0, 0, 0, 0.03) 2px, | |
| transparent 4px | |
| ); | |
| pointer-events: none; | |
| z-index: 100; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| .construct-form { | |
| padding: 1.5rem 1rem; | |
| max-width: 95%; | |
| } | |
| .round-table { | |
| width: 250px; | |
| height: 250px; | |
| } | |
| .world-tree { | |
| width: 40vh; | |
| height: 25vh; | |
| } | |
| .persona-name { | |
| font-size: 1.5rem; | |
| letter-spacing: 2px; | |
| } | |
| .persona-avatar { | |
| width: 80px; | |
| height: 80px; | |
| } | |
| .customization-header h2 { | |
| font-size: 1rem; | |
| } | |
| .rsi-option, | |
| .voice-option { | |
| padding: 0.625rem 0.75rem; | |
| } | |
| } | |