Spaces:
Running
Running
| :root{ | |
| --canvas:#000000; | |
| --surface-card:#0a0a0c; | |
| --surface-elevated:#101012; | |
| --surface-deep:#06060a; | |
| --hairline: rgba(255,255,255,0.06); | |
| --hairline-strong: rgba(255,255,255,0.14); | |
| --divider-soft: rgba(255,255,255,0.04); | |
| --ink:#fcfdff; | |
| --body-c: rgba(252,253,255,0.86); | |
| --charcoal: rgba(252,253,255,0.7); | |
| --mute:#a1a4a5; | |
| --ash:#888e90; | |
| --stone:#464a4d; | |
| --primary:#fcfdff; | |
| --primary-on:#000000; | |
| --surface-light:#f1f7fe; | |
| --accent-orange:#ff801f; | |
| --accent-orange-glow: rgba(255,89,0,0.22); | |
| --accent-yellow:#ffc53d; | |
| --accent-blue:#3b9eff; | |
| --accent-blue-glow: rgba(0,117,255,0.34); | |
| --accent-green:#11ff99; | |
| --accent-green-glow: rgba(34,255,153,0.18); | |
| --accent-red:#ff2047; | |
| --accent-red-glow: rgba(255,32,71,0.34); | |
| --font-display:'Fraunces', Georgia, serif; | |
| --font-body:'Inter Tight', Inter, sans-serif; | |
| --font-ui:'Inter', sans-serif; | |
| --font-mono:'JetBrains Mono', monospace; | |
| } | |
| *{box-sizing:border-box;} | |
| html,body{background:var(--canvas); color:var(--ink); margin:0; font-family:var(--font-ui); -webkit-font-smoothing:antialiased;} | |
| ::selection{background:rgba(252,253,255,0.18);} | |
| ::-webkit-scrollbar{width:10px; height:10px;} | |
| ::-webkit-scrollbar-track{background:transparent;} | |
| ::-webkit-scrollbar-thumb{background:var(--hairline-strong); border-radius:8px;} | |
| .font-display{font-family:var(--font-display); font-feature-settings:"ss01","liga"; font-weight:400; line-height:1;} | |
| .font-body{font-family:var(--font-body);} | |
| .font-mono{font-family:var(--font-mono);} | |
| .display-xxl{font-family:var(--font-display); font-feature-settings:"ss01"; font-weight:400; line-height:1; letter-spacing:-0.96px; font-size:clamp(34px,7vw,72px);} | |
| .display-xl{font-family:var(--font-display); font-feature-settings:"ss01"; font-weight:400; line-height:1; letter-spacing:-0.7px; font-size:clamp(28px,4.5vw,44px);} | |
| .subtitle{font-family:var(--font-body); font-size:18px; line-height:1.5; color:var(--body-c);} | |
| .hairline-b{border-bottom:1px solid var(--hairline);} | |
| .hairline-t{border-top:1px solid var(--hairline);} | |
| .btn-primary{background:var(--primary); color:var(--primary-on); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; cursor:pointer; transition:background .15s ease, transform .1s ease;} | |
| .btn-primary:hover{background:#e8eef7;} | |
| .btn-primary:active{background:var(--surface-light); transform:scale(.98);} | |
| .btn-primary:disabled{opacity:.4; cursor:not-allowed;} | |
| .btn-ghost{background:var(--surface-elevated); color:var(--ink); border:1px solid var(--hairline-strong); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:background .15s ease;} | |
| .btn-ghost:hover{background:#17171a;} | |
| .btn-ghost:disabled{opacity:.4; cursor:not-allowed;} | |
| .btn-outline{background:transparent; color:var(--ink); border:1px solid var(--hairline-strong); font-family:var(--font-ui); font-weight:500; font-size:14px; padding:8px 16px; border-radius:8px; height:36px; display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; transition:border-color .15s ease;} | |
| .btn-outline:hover{border-color:var(--ink);} | |
| .btn-icon{width:36px; height:36px; border-radius:8px; background:var(--surface-elevated); border:1px solid var(--hairline-strong); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;} | |
| .btn-icon:hover{background:#17171a;} | |
| .card{background:var(--surface-card); border-radius:12px; padding:24px;} | |
| .card-b{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; padding:24px;} | |
| .card-elevated{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:12px; padding:24px;} | |
| .code-window{background:var(--surface-deep); border:1px solid var(--hairline-strong); border-radius:12px; padding:20px; font-family:var(--font-mono); font-size:13px; color:var(--body-c);} | |
| .pill{background:var(--surface-elevated); color:var(--body-c); font-size:12px; font-family:var(--font-ui); padding:4px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;} | |
| .status-dot{width:8px; height:8px; border-radius:9999px; display:inline-block; flex-shrink:0;} | |
| .field-label{font-family:var(--font-ui); font-size:12px; font-weight:500; color:var(--mute); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; display:block;} | |
| .input{width:100%; background:var(--surface-card); color:var(--ink); border:1px solid var(--hairline-strong); border-radius:8px; padding:10px 14px; height:40px; font-family:var(--font-ui); font-size:14px; outline:none; transition:border-color .15s ease;} | |
| .input:focus{border-color:var(--ink);} | |
| textarea.input{height:auto; padding-top:10px;} | |
| select.input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a1a4a5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:32px;} | |
| .nav-link{font-family:var(--font-ui); font-size:14px; letter-spacing:0.35px; color:var(--charcoal); padding:8px 4px; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s ease;} | |
| .nav-link:hover{color:var(--ink);} | |
| .nav-link.active{color:var(--ink); border-bottom-color:var(--ink);} | |
| .glow-blue{position:relative;} | |
| .glow-blue::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-blue-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.55;} | |
| .glow-green::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-green-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.6;} | |
| .glow-orange::before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1100px; max-width:160vw; height:480px; background:radial-gradient(ellipse at top, var(--accent-orange-glow), transparent 70%); pointer-events:none; z-index:0; opacity:.5;} | |
| .glow-wrap{position:relative; overflow:hidden;} | |
| .glow-wrap > *{position:relative; z-index:1;} | |
| .kanban-col{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; padding:16px; min-height:120px;} | |
| .kanban-card{background:var(--surface-elevated); border:1px solid var(--hairline); border-left:3px solid var(--hairline-strong); border-radius:8px; padding:12px; margin-bottom:10px; cursor:pointer; transition:border-color .15s ease, transform .1s ease;} | |
| .kanban-card:hover{border-color:var(--hairline-strong); transform:translateY(-1px);} | |
| table.data-table{width:100%; border-collapse:collapse; font-family:var(--font-ui); font-size:13px;} | |
| table.data-table th{text-align:left; font-weight:500; color:var(--mute); text-transform:uppercase; font-size:11px; letter-spacing:0.5px; padding:10px 12px; border-bottom:1px solid var(--hairline-strong); cursor:pointer; white-space:nowrap; user-select:none;} | |
| table.data-table th:hover{color:var(--ink);} | |
| table.data-table td{padding:12px; border-bottom:1px solid var(--divider-soft); color:var(--body-c); vertical-align:middle;} | |
| table.data-table tr:hover td{background:rgba(255,255,255,0.02);} | |
| .progress-track{height:8px; background:var(--hairline); border-radius:9999px; overflow:hidden; width:100%;} | |
| .progress-fill{height:100%; border-radius:9999px; transition:width .4s ease;} | |
| .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:40px 16px;} | |
| .modal-panel{background:var(--surface-card); border:1px solid var(--hairline-strong); border-radius:12px; max-width:640px; width:100%; padding:32px; margin:auto;} | |
| .chip{background:var(--surface-elevated); border:1px solid var(--hairline-strong); color:var(--body-c); font-size:12px; padding:4px 8px 4px 10px; border-radius:9999px; display:inline-flex; align-items:center; gap:6px;} | |
| .chip button{background:none; border:none; color:var(--ash); cursor:pointer; font-size:14px; line-height:1; padding:0;} | |
| .chip button:hover{color:var(--accent-red);} | |
| .star{cursor:pointer; font-size:20px; color:var(--stone); transition:color .1s ease;} | |
| .star.filled{color:var(--accent-yellow);} | |
| .toast{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:8px; padding:12px 16px; color:var(--ink); font-size:13px; font-family:var(--font-ui); box-shadow:none; min-width:260px; max-width:360px; display:flex; align-items:flex-start; gap:10px; animation:toast-in .2s ease;} | |
| @keyframes toast-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}} | |
| .chat-bubble-user{background:var(--surface-elevated); border:1px solid var(--hairline-strong); border-radius:12px 12px 2px 12px; padding:14px 16px; max-width:78%; margin-left:auto; font-size:14px; color:var(--ink); font-family:var(--font-body);} | |
| .chat-card{background:var(--surface-deep); border:1px solid var(--hairline-strong); border-radius:12px; padding:20px; max-width:92%; font-family:var(--font-ui);} | |
| .spinner{width:16px; height:16px; border-radius:50%; border:2px solid var(--hairline-strong); border-top-color:var(--ink); animation:spin .7s linear infinite;} | |
| @keyframes spin{to{transform:rotate(360deg);}} | |
| .typing-dot{width:6px; height:6px; border-radius:50%; background:var(--mute); animation:blink 1.2s infinite ease-in-out;} | |
| .typing-dot:nth-child(2){animation-delay:.2s;} .typing-dot:nth-child(3){animation-delay:.4s;} | |
| @keyframes blink{0%,80%,100%{opacity:.2;} 40%{opacity:1;}} | |
| .fab{position:fixed; bottom:24px; right:24px; z-index:40; width:52px; height:52px; border-radius:9999px; background:var(--primary); color:var(--primary-on); border:none; font-size:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease;} | |
| .fab:hover{transform:scale(1.06);} | |
| @media (max-width: 1023px){ | |
| .desktop-nav{display:none;} | |
| } | |
| @media (min-width: 1024px){ | |
| .mobile-nav-toggle{display:none;} | |
| } | |
| /* Best-of-three additions: editorial metrics, local advisor, responsive flow */ | |
| body{min-height:100vh;background: | |
| radial-gradient(900px 460px at 85% -10%,rgba(61,107,255,.13),transparent 62%), | |
| radial-gradient(760px 420px at 0 30%,rgba(163,255,112,.045),transparent 65%),var(--canvas);} | |
| nav{backdrop-filter:blur(18px);background:rgba(0,0,0,.82);} | |
| #view-root{min-height:calc(100vh - 190px);} | |
| .app-status{display:flex;align-items:center;gap:8px;color:var(--mute);font-size:11px;letter-spacing:.2px;} | |
| .metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 26px;} | |
| .metric-card{position:relative;min-height:145px;padding:18px;border:1px solid var(--hairline);border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden;} | |
| .metric-card::after{content:"";position:absolute;inset:auto -20% -65% 10%;height:120px;background:radial-gradient(ellipse,rgba(255,255,255,.07),transparent 68%);pointer-events:none;} | |
| .metric-card strong{display:block;margin:24px 0 7px;font-family:var(--font-display);font-size:32px;font-weight:400;letter-spacing:-1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} | |
| .metric-card span{display:block;color:var(--ash);font-size:11px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} | |
| .metric-lime{border-color:rgba(17,255,153,.16);}.metric-lime strong{color:#c8ff9b;} | |
| .metric-blue{border-color:rgba(59,158,255,.18);}.metric-blue strong{color:#9dcbff;} | |
| .metric-violet{border-color:rgba(171,130,255,.18);}.metric-violet strong{color:#d0b7ff;font-size:26px;} | |
| .focus-panel{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:54px;padding:20px 22px;border:1px solid rgba(216,249,155,.16);border-radius:12px;background:linear-gradient(100deg,rgba(216,249,155,.07),rgba(59,158,255,.035));} | |
| .focus-panel h2{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:-.5px;margin:2px 0 6px;} | |
| .focus-panel p:last-child{color:var(--ash);font-size:12px;} | |
| .section-kicker{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px;} | |
| .section-kicker span{color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:1.2px;} | |
| .section-kicker h2{font-family:var(--font-display);font-weight:400;font-size:26px;} | |
| .advisor-index{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;} | |
| .advisor-index span,.advisor-source{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid var(--hairline);border-radius:999px;background:rgba(255,255,255,.025);color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.55px;} | |
| .advisor-source{margin-bottom:14px;color:var(--body-c);} | |
| .quick-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} | |
| .quick-prompts button{padding:7px 10px;border:1px solid var(--hairline-strong);border-radius:999px;background:var(--surface-card);color:var(--charcoal);font-size:11px;cursor:pointer;transition:.15s ease;} | |
| .quick-prompts button:hover{border-color:var(--accent-blue);color:var(--ink);transform:translateY(-1px);} | |
| .bar-chart{height:280px;display:grid;grid-template-columns:32px 1fr;gap:12px;padding-top:16px;} | |
| .chart-y{display:flex;flex-direction:column;justify-content:space-between;color:var(--stone);font-family:var(--font-mono);font-size:9px;text-align:right;padding-bottom:26px;} | |
| .chart-bars{display:grid;grid-template-columns:repeat(8,minmax(22px,1fr));gap:8px;border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:0 6px 0 12px;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(50% - 1px),var(--divider-soft) 50%,transparent calc(50% + 1px));} | |
| .chart-bar-group{min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;} | |
| .chart-bar-area{height:225px;width:100%;display:flex;align-items:flex-end;justify-content:center;} | |
| .chart-bar{position:relative;width:min(34px,70%);min-height:4px;border-radius:5px 5px 1px 1px;background:linear-gradient(to top,rgba(59,158,255,.45),rgba(59,158,255,.9));box-shadow:0 0 22px rgba(59,158,255,.13);animation:bar-grow .5s ease-out;} | |
| .chart-bar b{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font:9px var(--font-mono);color:var(--mute);} | |
| .chart-bar-group small{height:18px;color:var(--ash);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} | |
| @keyframes bar-grow{from{height:0;opacity:.2}to{opacity:1}} | |
| .app-footer{border-top:1px solid var(--divider-soft);padding:26px 20px 34px;color:var(--stone);font-size:11px;} | |
| .app-footer-inner{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;} | |
| .app-footer strong{font-family:var(--font-display);font-size:15px;font-weight:400;color:var(--charcoal);} | |
| @media(max-width:900px){ | |
| .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));} | |
| #kanban-board{grid-template-columns:1fr;} | |
| #analytics-grid{grid-template-columns:1fr;} | |
| } | |
| @media(max-width:620px){ | |
| #view-root{padding-left:14px;padding-right:14px;} | |
| .metric-grid{grid-template-columns:1fr 1fr;gap:7px;} | |
| .metric-card{min-height:120px;padding:14px;}.metric-card strong{font-size:25px;margin-top:18px;}.metric-violet strong{font-size:20px;} | |
| .focus-panel{align-items:flex-start;flex-direction:column;margin-bottom:45px;}.focus-panel .btn-primary{width:100%;} | |
| .section-kicker{align-items:flex-start;flex-direction:column;gap:4px;} | |
| .app-status{display:none;}.app-footer-inner{align-items:flex-start;flex-direction:column;} | |
| .chart-bars{gap:4px;padding-left:7px}.chart-bar{width:70%}.chart-bar-group small{font-size:8px;transform:rotate(-32deg);transform-origin:center top;overflow:visible;} | |
| table.data-table{min-width:760px;} | |
| } | |
| @media(max-width:390px){.metric-grid{grid-template-columns:1fr}.metric-card{min-height:104px}.metric-card strong{margin-top:12px}.quick-prompts{display:grid}.quick-prompts button{text-align:left}} | |
| /* Vault Styles */ | |
| .vault-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); | |
| gap: 20px; | |
| margin-top: 24px; | |
| } | |
| .question-card { | |
| background: var(--surface-card); | |
| border: 1px solid var(--hairline-strong); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| position: relative; | |
| transition: transform 0.2s ease, border-color 0.2s ease; | |
| } | |
| .question-card:hover { | |
| transform: translateY(-2px); | |
| border-color: var(--accent-blue); | |
| } | |
| .question-img-container { | |
| width: 100%; | |
| height: 180px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| background: var(--surface-deep); | |
| border: 1px solid var(--divider-soft); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: zoom-in; | |
| } | |
| .question-img-container img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| } | |
| .upload-zone { | |
| border: 2px dashed var(--hairline-strong); | |
| border-radius: 12px; | |
| padding: 32px 20px; | |
| text-align: center; | |
| background: rgba(255, 255, 255, 0.01); | |
| cursor: pointer; | |
| transition: border-color 0.15s ease, background 0.15s ease; | |
| } | |
| .upload-zone:hover { | |
| border-color: var(--accent-blue); | |
| background: rgba(59, 158, 255, 0.03); | |
| } | |
| .upload-preview-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); | |
| gap: 12px; | |
| margin-top: 16px; | |
| } | |
| .upload-preview-item { | |
| position: relative; | |
| aspect-ratio: 1; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| border: 1px solid var(--hairline-strong); | |
| background: var(--surface-deep); | |
| } | |
| .upload-preview-item img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .upload-preview-item button { | |
| position: absolute; | |
| top: 4px; | |
| right: 4px; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: #fff; | |
| border: none; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| } | |
| .upload-preview-item button:hover { | |
| background: var(--accent-red); | |
| } | |
| .lightbox { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(8px); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: zoom-out; | |
| } | |
| .lightbox img { | |
| max-width: 90%; | |
| max-height: 90%; | |
| object-fit: contain; | |
| border-radius: 4px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); | |
| } | |