|
|
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%231a1a1a"/><path d="M0 0L100 100M100 0L0 100" stroke="%23222" stroke-width="1"/></svg>'); |
| background-color: #0f172a; |
| } |
| .parchment-bg { |
| background: linear-gradient(to bottom, #f5f0e1, #e8dfc8); |
| box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); |
| border: 1px solid #d4af37; |
| position: relative; |
| } |
|
|
| .parchment-bg::before { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23d4af3750" stroke-width="1"/></svg>'); |
| opacity: 0.3; |
| pointer-events: none; |
| } |
|
|
| .scroll-border { |
| border: 1px solid #d4af37; |
| box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .character-card { |
| transition: all 0.3s ease; |
| transform-style: preserve-3d; |
| } |
|
|
| .character-card:hover { |
| transform: translateY(-5px) rotate(1deg); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); |
| } |
|
|
| .glow { |
| box-shadow: 0 0 15px rgba(212, 175, 55, 0.7); |
| } |
|
|
| .btn-gold { |
| background: linear-gradient(to bottom, #d4af37, #b8860b); |
| color: #1a1a1a; |
| font-weight: bold; |
| text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); |
| border: 1px solid #8b6914; |
| transition: all 0.2s ease; |
| } |
|
|
| .btn-gold:hover { |
| background: linear-gradient(to bottom, #e6c158, #c9a227); |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4); |
| } |
|
|
| .btn-gold:active { |
| transform: translateY(1px); |
| } |
|
|
| .character-image { |
| border: 3px solid #d4af37; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); |
| background: linear-gradient(45deg, #2c1e1e, #1a1a2e); |
| } |
|
|
| .tab-content { |
| display: none; |
| } |
|
|
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.5s ease; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .tab-btn { |
| transition: all 0.3s ease; |
| } |
|
|
| .tab-btn.active { |
| background: linear-gradient(to bottom, #d4af37, #b8860b); |
| color: #1a1a1a; |
| font-weight: bold; |
| } |
|
|
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
|
|
| .pulse { |
| animation: pulse 2s infinite; |
| } |
|
|
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } |
| } |
|
|
| .characteristic { |
| transition: all 0.3s ease; |
| } |
|
|
| .characteristic:hover { |
| transform: scale(1.05); |
| background: linear-gradient(to right, rgba(212, 175, 55, 0.1), rgba(212, 175, 55, 0.3)); |
| } |
|
|
| .stat-bar { |
| height: 1rem; |
| background: linear-gradient(to right, #d4af37, #b8860b); |
| border-radius: 0.5rem; |
| box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
| } |
|
|
| .loading-spinner { |
| border: 4px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top: 4px solid #d4af37; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg);{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."} |
