| :root { |
| --bg-primary: #e0e5ec; |
| --bg-dark: #0a0e17; |
| --bg-surface: #e0e5ec; |
| --bg-card: #e0e5ec; |
| --border-color: rgba(0, 0, 0, 0.08); |
| --accent-blue: #1E90FF; |
| --accent-blue-dark: #1565C0; |
| --accent-blue-light: #64B5F6; |
| --accent-emerald: #10b981; |
| --accent-pink: #ec4899; |
| --text-main: #2d3748; |
| --text-muted: #718096; |
| --text-on-dark: #f1f5f9; |
| --neu-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; |
| --neu-shadow-sm: 4px 4px 8px #b8bec7, -4px -4px 8px #ffffff; |
| --neu-inset: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff; |
| } |
|
|
| * { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| body { |
| background-color: var(--bg-primary); |
| color: var(--text-main); |
| font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| min-height: 100vh; |
| } |
|
|
| main { |
| overflow-x: hidden; |
| } |
|
|
| a { color: inherit; text-decoration: none; } |
|
|
| |
| ::-webkit-scrollbar { display: none; width: 0; height: 0; } |
| * { scrollbar-width: none; -ms-overflow-style: none; } |
|
|
| |
| .neu-card { |
| background: var(--bg-surface); |
| border-radius: 20px; |
| box-shadow: var(--neu-shadow); |
| border: 1px solid rgba(255, 255, 255, 0.6); |
| transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
| } |
| .neu-card:hover { |
| box-shadow: 10px 10px 20px #b8bec7, -10px -10px 20px #ffffff; |
| transform: translateY(-2px); |
| } |
| .neu-card-clickable { |
| cursor: pointer; |
| } |
| .neu-card-clickable:active { |
| box-shadow: var(--neu-inset); |
| transform: translateY(0); |
| } |
|
|
| .neu-card-dark { |
| background: var(--bg-dark); |
| border-radius: 20px; |
| box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.4), -4px -4px 12px rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| } |
|
|
| .neu-inset { |
| box-shadow: var(--neu-inset); |
| border-radius: 12px; |
| } |
|
|
| button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| } |
|
|
| |
| .neu-btn { |
| background: var(--bg-surface); |
| border-radius: 12px; |
| box-shadow: var(--neu-shadow-sm); |
| border: 1px solid rgba(255, 255, 255, 0.6); |
| padding: 12px 24px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| gap: 8px; |
| } |
| .neu-btn:active { box-shadow: var(--neu-inset); } |
|
|
| .neu-btn-primary { |
| background: linear-gradient(135deg, #1E90FF 0%, #1565C0 100%); |
| color: #ffffff; |
| border-radius: 12px; |
| box-shadow: 4px 4px 12px rgba(30, 144, 255, 0.3), -2px -2px 8px rgba(255, 255, 255, 0.1); |
| border: none; |
| padding: 12px 24px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| gap: 8px; |
| } |
| .neu-btn-primary:hover { |
| box-shadow: 6px 6px 16px rgba(30, 144, 255, 0.4), -3px -3px 10px rgba(255, 255, 255, 0.15); |
| transform: translateY(-1px); |
| } |
|
|
| .neu-btn-dark { |
| background: rgba(255, 255, 255, 0.08); |
| color: #e2e8f0; |
| border-radius: 12px; |
| box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); |
| border: 1px solid rgba(255, 255, 255, 0.12); |
| padding: 12px 24px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| gap: 8px; |
| } |
| .neu-btn-dark:hover { |
| background: rgba(255, 255, 255, 0.14); |
| border-color: rgba(30, 144, 255, 0.4); |
| } |
|
|
| |
| .neu-input { |
| width: 100%; |
| background: var(--bg-surface); |
| border: 1px solid rgba(0, 0, 0, 0.06); |
| border-radius: 12px; |
| padding: 12px 16px; |
| color: var(--text-main); |
| font-size: 0.95rem; |
| outline: none; |
| transition: all 0.2s ease; |
| box-shadow: var(--neu-inset); |
| } |
| .neu-input:focus { |
| border-color: var(--accent-blue); |
| box-shadow: var(--neu-inset), 0 0 0 2px rgba(30, 144, 255, 0.2); |
| } |
|
|
| |
| .neu-file-input { |
| position: relative; |
| width: 100%; |
| } |
| .neu-file-input input[type="file"] { |
| position: absolute; |
| inset: 0; |
| opacity: 0; |
| cursor: pointer; |
| z-index: 2; |
| } |
| .neu-file-input-label { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| width: 100%; |
| padding: 14px 20px; |
| background: var(--bg-surface); |
| border-radius: 12px; |
| box-shadow: var(--neu-shadow-sm); |
| border: 1px solid rgba(255, 255, 255, 0.6); |
| color: var(--text-main); |
| font-weight: 600; |
| font-size: 0.9rem; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| } |
| .neu-file-input-label:hover { |
| box-shadow: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff; |
| border-color: rgba(30, 144, 255, 0.3); |
| } |
| .neu-file-input input[type="file"]:active + .neu-file-input-label { |
| box-shadow: var(--neu-inset); |
| } |
| .neu-file-input-label svg { flex-shrink: 0; } |
|
|
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 5px 14px; |
| border-radius: 9999px; |
| font-size: 0.8rem; |
| font-weight: 600; |
| } |
| .badge-blue { |
| background: rgba(30, 144, 255, 0.12); |
| color: #1E90FF; |
| border: 1px solid rgba(30, 144, 255, 0.25); |
| } |
| .badge-emerald { |
| background: rgba(16, 185, 129, 0.12); |
| color: #10b981; |
| border: 1px solid rgba(16, 185, 129, 0.25); |
| } |
| .badge-pink { |
| background: rgba(236, 72, 153, 0.12); |
| color: #ec4899; |
| border: 1px solid rgba(236, 72, 153, 0.25); |
| } |
|
|
| .gradient-text { |
| background: linear-gradient(135deg, #1E90FF 0%, #1565C0 50%, #0d47a1 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
|
|
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| @keyframes slideInRight { |
| from { opacity: 0; transform: translateX(20px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| @keyframes scaleIn { |
| from { opacity: 0; transform: scale(0.97); } |
| to { opacity: 1; transform: scale(1); } |
| } |
|
|
| .anim-fade-up { |
| animation: fadeInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; |
| } |
| .anim-fade-in { |
| animation: fadeIn 0.5s ease both; |
| } |
| .anim-slide-right { |
| animation: slideInRight 0.5s ease both; |
| } |
| .anim-scale-in { |
| animation: scaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; |
| } |
|
|
| |
| .delay-1 { animation-delay: 0.08s; } |
| .delay-2 { animation-delay: 0.16s; } |
| .delay-3 { animation-delay: 0.24s; } |
| .delay-4 { animation-delay: 0.32s; } |
| .delay-5 { animation-delay: 0.4s; } |
| .delay-6 { animation-delay: 0.48s; } |
|
|
| |
| .expand-enter { |
| max-height: 0; |
| opacity: 0; |
| overflow: hidden; |
| transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), |
| opacity 0.4s ease, |
| padding 0.4s ease, |
| margin 0.4s ease; |
| } |
| .expand-enter-active { |
| max-height: 200px; |
| opacity: 1; |
| } |
| .expand-collapse { |
| max-height: 200px; |
| opacity: 1; |
| overflow: hidden; |
| transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), |
| opacity 0.4s ease, |
| padding 0.4s ease, |
| margin 0.4s ease; |
| } |
| .expand-collapse.collapsing { |
| max-height: 0; |
| opacity: 0; |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .desktop-nav { display: none !important; } |
| #mobile-hamburger-btn { display: flex !important; } |
| } |
| @media (min-width: 769px) { |
| #mobile-hamburger-btn { display: none !important; } |
| } |
|
|
