Spaces:
Sleeping
Sleeping
| /* ═══════════════════════════════════════════════ | |
| LaTeX Studio — Main Stylesheet | |
| Aesthetic: Dark editorial, print-inspired | |
| ═══════════════════════════════════════════════ */ | |
| :root { | |
| --bg: #0f0f0f; | |
| --bg2: #161616; | |
| --bg3: #1e1e1e; | |
| --bg4: #252525; | |
| --border: #2a2a2a; | |
| --border2: #333; | |
| --text: #e8e4dc; | |
| --text2: #9a9590; | |
| --text3: #5a5550; | |
| --accent: #c8a96e; | |
| --accent2: #a08050; | |
| --accent-glow: rgba(200, 169, 110, 0.15); | |
| --green: #4caf7d; | |
| --red: #e05252; | |
| --blue: #5b8fd4; | |
| --radius: 6px; | |
| --radius2: 10px; | |
| --font-sans: 'DM Sans', system-ui, sans-serif; | |
| --font-serif: 'DM Serif Display', Georgia, serif; | |
| --font-mono: 'JetBrains Mono', 'Fira Code', monospace; | |
| --shadow: 0 4px 24px rgba(0,0,0,0.5); | |
| --shadow2: 0 2px 8px rgba(0,0,0,0.4); | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* ─── SCROLLBAR ─── */ | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-track { background: var(--bg2); } | |
| ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--text3); } | |
| /* ─── NAV ─── */ | |
| .nav { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 40px; | |
| height: 60px; | |
| background: rgba(15,15,15,0.95); | |
| backdrop-filter: blur(12px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| text-decoration: none; | |
| color: var(--text); | |
| } | |
| .nav-logo { | |
| font-size: 20px; | |
| color: var(--accent); | |
| } | |
| .nav-name { | |
| font-family: var(--font-sans); | |
| font-size: 17px; | |
| letter-spacing: -0.3px; | |
| } | |
| .nav-name strong { color: var(--accent); } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| } | |
| .nav-link { | |
| color: var(--text2); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .nav-link:hover, .nav-link.active { color: var(--text); } | |
| .nav-auth { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| /* ─── BUTTONS ─── */ | |
| .btn-primary { | |
| background: var(--accent); | |
| color: #0f0f0f; | |
| border: none; | |
| padding: 10px 22px; | |
| border-radius: var(--radius); | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| letter-spacing: 0.2px; | |
| } | |
| .btn-primary:hover { | |
| background: #d4b87a; | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 16px rgba(200,169,110,0.3); | |
| } | |
| .btn-primary.full { width: 100%; justify-content: center; } | |
| .btn-ghost { | |
| background: transparent; | |
| color: var(--text); | |
| border: 1px solid var(--border2); | |
| padding: 10px 22px; | |
| border-radius: var(--radius); | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .btn-ghost:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .btn-sm { | |
| padding: 6px 14px; | |
| font-size: 13px; | |
| } | |
| /* ─── HERO ─── */ | |
| .hero { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 60px; | |
| align-items: center; | |
| padding: 80px 40px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .hero-eyebrow { | |
| font-size: 12px; | |
| font-weight: 600; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 16px; | |
| } | |
| .hero-title { | |
| font-family: var(--font-serif); | |
| font-size: 56px; | |
| line-height: 1.1; | |
| color: var(--text); | |
| margin-bottom: 20px; | |
| } | |
| .hero-title em { | |
| font-style: italic; | |
| color: var(--accent); | |
| } | |
| .hero-sub { | |
| font-size: 17px; | |
| color: var(--text2); | |
| line-height: 1.7; | |
| margin-bottom: 32px; | |
| max-width: 440px; | |
| } | |
| .hero-actions { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| /* CODE PREVIEW */ | |
| .code-preview { | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius2); | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .code-toolbar { | |
| display: flex; | |
| gap: 6px; | |
| padding: 12px 16px; | |
| background: var(--bg4); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .code-toolbar span { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: var(--border2); | |
| } | |
| .code-toolbar span:nth-child(1) { background: #ff5f57; } | |
| .code-toolbar span:nth-child(2) { background: #febc2e; } | |
| .code-toolbar span:nth-child(3) { background: #28c840; } | |
| .code-sample { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| line-height: 1.8; | |
| padding: 20px; | |
| color: var(--text2); | |
| white-space: pre; | |
| overflow-x: auto; | |
| } | |
| /* ─── GALLERY SECTION ─── */ | |
| .gallery-section { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 40px 80px; | |
| } | |
| .filters { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 32px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-btn { | |
| background: var(--bg2); | |
| color: var(--text2); | |
| border: 1px solid var(--border); | |
| padding: 7px 18px; | |
| border-radius: 100px; | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .filter-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .filter-btn.active { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #0f0f0f; | |
| } | |
| /* TEMPLATE GRID */ | |
| .template-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 20px; | |
| } | |
| .template-card { | |
| background: var(--bg2); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius2); | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: all 0.25s; | |
| position: relative; | |
| } | |
| .template-card:hover { | |
| border-color: var(--accent2); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4); | |
| } | |
| .template-preview { | |
| aspect-ratio: 4/3; | |
| background: var(--bg3); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow: hidden; | |
| border-bottom: 1px solid var(--border); | |
| position: relative; | |
| } | |
| .template-preview img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .template-preview-code { | |
| font-family: var(--font-mono); | |
| font-size: 9px; | |
| line-height: 1.6; | |
| color: var(--text3); | |
| padding: 16px; | |
| white-space: pre; | |
| overflow: hidden; | |
| pointer-events: none; | |
| user-select: none; | |
| } | |
| .card-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| padding: 3px 8px; | |
| border-radius: 100px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| letter-spacing: 0.5px; | |
| text-transform: uppercase; | |
| } | |
| .badge-public { background: rgba(76,175,125,0.2); color: var(--green); border: 1px solid rgba(76,175,125,0.3); } | |
| .badge-private { background: rgba(91,143,212,0.2); color: var(--blue); border: 1px solid rgba(91,143,212,0.3); } | |
| .template-info { | |
| padding: 16px; | |
| } | |
| .template-category { | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| color: var(--accent); | |
| margin-bottom: 6px; | |
| } | |
| .template-name { | |
| font-family: var(--font-serif); | |
| font-size: 17px; | |
| color: var(--text); | |
| margin-bottom: 6px; | |
| line-height: 1.3; | |
| } | |
| .template-desc { | |
| font-size: 13px; | |
| color: var(--text2); | |
| line-height: 1.5; | |
| margin-bottom: 12px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| .template-footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--border); | |
| } | |
| .template-tags { | |
| display: flex; | |
| gap: 4px; | |
| flex-wrap: wrap; | |
| } | |
| .tag { | |
| background: var(--bg4); | |
| color: var(--text3); | |
| padding: 2px 8px; | |
| border-radius: 100px; | |
| font-size: 11px; | |
| } | |
| .template-uses { | |
| font-size: 12px; | |
| color: var(--text3); | |
| } | |
| .card-actions { | |
| display: flex; | |
| gap: 8px; | |
| padding: 0 16px 16px; | |
| } | |
| .card-btn { | |
| flex: 1; | |
| padding: 8px; | |
| border-radius: var(--radius); | |
| font-family: var(--font-sans); | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| border: 1px solid var(--border); | |
| background: transparent; | |
| color: var(--text2); | |
| } | |
| .card-btn:hover { border-color: var(--accent); color: var(--accent); } | |
| .card-btn.primary { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| color: #0f0f0f; | |
| } | |
| .card-btn.primary:hover { background: #d4b87a; } | |
| /* ─── MODALS ─── */ | |
| .modal-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0,0,0,0.7); | |
| backdrop-filter: blur(4px); | |
| z-index: 200; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .modal { | |
| background: var(--bg2); | |
| border: 1px solid var(--border2); | |
| border-radius: var(--radius2); | |
| padding: 32px; | |
| width: 100%; | |
| max-width: 440px; | |
| position: relative; | |
| box-shadow: var(--shadow); | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| } | |
| .modal-wide { max-width: 680px; } | |
| .modal-close { | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| background: none; | |
| border: none; | |
| color: var(--text2); | |
| font-size: 16px; | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: var(--radius); | |
| transition: all 0.2s; | |
| } | |
| .modal-close:hover { background: var(--bg3); color: var(--text); } | |
| .modal-desc { | |
| font-size: 13px; | |
| color: var(--text2); | |
| margin-bottom: 20px; | |
| line-height: 1.5; | |
| } | |
| .modal-tabs { | |
| display: flex; | |
| gap: 0; | |
| margin-bottom: 24px; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .modal-tab { | |
| background: none; | |
| border: none; | |
| padding: 10px 20px; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--text2); | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| margin-bottom: -1px; | |
| transition: all 0.2s; | |
| } | |
| .modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); } | |
| .modal-tab:hover { color: var(--text); } | |
| .auth-form { display: none; } | |
| .auth-form.active { display: block; } | |
| .auth-form h2 { | |
| font-family: var(--font-serif); | |
| font-size: 22px; | |
| margin-bottom: 20px; | |
| color: var(--text); | |
| } | |
| /* ─── FORM FIELDS ─── */ | |
| .field { | |
| margin-bottom: 16px; | |
| } | |
| .field label { | |
| display: block; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text2); | |
| margin-bottom: 6px; | |
| } | |
| .field input, | |
| .field select, | |
| .field textarea { | |
| width: 100%; | |
| background: var(--bg3); | |
| border: 1px solid var(--border2); | |
| border-radius: var(--radius); | |
| padding: 10px 14px; | |
| font-family: var(--font-sans); | |
| font-size: 14px; | |
| color: var(--text); | |
| transition: border-color 0.2s; | |
| outline: none; | |
| } | |
| .field textarea { | |
| font-family: var(--font-mono); | |
| font-size: 12px; | |
| resize: vertical; | |
| } | |
| .field input:focus, | |
| .field select:focus, | |
| .field textarea:focus { | |
| border-color: var(--accent); | |
| background: var(--bg4); | |
| } | |
| .field input::placeholder, | |
| .field textarea::placeholder { color: var(--text3); } | |
| .field-row { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 12px; | |
| } | |
| .form-error { | |
| color: var(--red); | |
| font-size: 13px; | |
| margin-bottom: 12px; | |
| min-height: 18px; | |
| } | |
| .form-hint { | |
| text-align: center; | |
| font-size: 12px; | |
| color: var(--text3); | |
| margin-top: 12px; | |
| } | |
| /* FILE DROP */ | |
| .file-drop { | |
| border: 2px dashed var(--border2); | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| font-size: 13px; | |
| color: var(--text3); | |
| } | |
| .file-drop:hover { border-color: var(--accent); color: var(--accent); } | |
| /* ─── LOADING ─── */ | |
| .loading-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 60px; | |
| gap: 16px; | |
| color: var(--text2); | |
| } | |
| .spinner { | |
| width: 32px; | |
| height: 32px; | |
| border: 2px solid var(--border2); | |
| border-top-color: var(--accent); | |
| border-radius: 50%; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| .spinner.large { width: 48px; height: 48px; } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| /* ─── EMPTY STATE ─── */ | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 60px; | |
| gap: 12px; | |
| color: var(--text2); | |
| text-align: center; | |
| } | |
| .empty-state p { font-size: 15px; } | |
| .empty-state small { color: var(--text3); font-size: 13px; } | |
| /* ─── TOAST ─── */ | |
| .toast { | |
| position: fixed; | |
| bottom: 24px; | |
| right: 24px; | |
| background: var(--bg4); | |
| border: 1px solid var(--border2); | |
| border-radius: var(--radius); | |
| padding: 12px 20px; | |
| font-size: 14px; | |
| color: var(--text); | |
| z-index: 9999; | |
| transform: translateY(100px); | |
| opacity: 0; | |
| transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1); | |
| pointer-events: none; | |
| max-width: 320px; | |
| } | |
| .toast.show { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .toast.success { border-left: 3px solid var(--green); } | |
| .toast.error { border-left: 3px solid var(--red); } | |
| /* ─── USER CHIP ─── */ | |
| .user-chip { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--bg3); | |
| border: 1px solid var(--border); | |
| border-radius: 100px; | |
| padding: 5px 12px 5px 6px; | |
| font-size: 13px; | |
| color: var(--text2); | |
| } | |
| .user-avatar { | |
| width: 24px; | |
| height: 24px; | |
| background: var(--accent); | |
| color: #0f0f0f; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 11px; | |
| font-weight: 700; | |
| } | |
| .user-chip button { | |
| background: none; | |
| border: none; | |
| color: var(--text3); | |
| cursor: pointer; | |
| font-size: 13px; | |
| padding: 0 0 0 8px; | |
| margin-left: 4px; | |
| border-left: 1px solid var(--border); | |
| transition: color 0.2s; | |
| } | |
| .user-chip button:hover { color: var(--red); } | |
| /* ─── UPLOAD TAB CONTENT ─── */ | |
| .upload-tab-content { display: none; } | |
| .upload-tab-content.active { display: block; } | |
| /* ─── RESPONSIVE ─── */ | |
| @media (max-width: 768px) { | |
| .nav { padding: 0 20px; } | |
| .hero { grid-template-columns: 1fr; padding: 40px 20px; gap: 32px; } | |
| .hero-title { font-size: 38px; } | |
| .hero-visual { display: none; } | |
| .gallery-section { padding: 0 20px 60px; } | |
| .field-row { grid-template-columns: 1fr; } | |
| } | |