Spaces:
Sleeping
Sleeping
| /* Jacobina design system — Tailwind v4 input; compiled to main.css. | |
| Dark-first with a light theme via [data-theme]. */ | |
| @import "tailwindcss"; | |
| @theme { | |
| --font-ui: "Inter", ui-sans-serif, system-ui, sans-serif; | |
| --font-display: "Space Grotesk", var(--font-ui); | |
| --font-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace; | |
| } | |
| /* ------------------------------------------------------------ tokens */ | |
| :root, | |
| :root[data-theme="dark"] { | |
| --bg: #0a0d14; | |
| --bg-glow: radial-gradient(1200px 500px at 70% -10%, rgba(79, 70, 229, 0.14), transparent 60%); | |
| --surface: #10141d; | |
| --surface-2: #171c28; | |
| --surface-3: #1e2432; | |
| --border: #242b3c; | |
| --border-strong: #333c52; | |
| --text: #e8ebf3; | |
| --text-muted: #96a0b5; | |
| --accent: #7c7ff2; | |
| --accent-strong: #5b54ec; | |
| --accent-soft: rgba(124, 127, 242, 0.14); | |
| --danger: #f26d7c; | |
| --danger-soft: rgba(242, 109, 124, 0.12); | |
| --ok: #58d6a3; | |
| --warn: #eec26a; | |
| --plot-grid: rgba(150, 160, 181, 0.16); | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); | |
| color-scheme: dark; | |
| } | |
| :root[data-theme="light"] { | |
| --bg: #f6f7fb; | |
| --bg-glow: radial-gradient(1200px 500px at 70% -10%, rgba(91, 84, 236, 0.08), transparent 60%); | |
| --surface: #ffffff; | |
| --surface-2: #f0f2f8; | |
| --surface-3: #e7eaf3; | |
| --border: #dfe3ee; | |
| --border-strong: #c8cede; | |
| --text: #171c2b; | |
| --text-muted: #5c667e; | |
| --accent: #5b54ec; | |
| --accent-strong: #4f46e5; | |
| --accent-soft: rgba(91, 84, 236, 0.1); | |
| --danger: #d43f52; | |
| --danger-soft: rgba(212, 63, 82, 0.1); | |
| --ok: #12925f; | |
| --warn: #a97b16; | |
| --plot-grid: rgba(92, 102, 126, 0.18); | |
| --shadow: 0 8px 24px rgba(23, 28, 43, 0.08); | |
| color-scheme: light; | |
| } | |
| /* ------------------------------------------------------------ base */ | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background: var(--bg); | |
| background-image: var(--bg-glow); | |
| background-attachment: fixed; | |
| color: var(--text); | |
| font-family: var(--font-ui); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { background: var(--accent-soft); } | |
| .boot-splash { | |
| display: grid; | |
| place-items: center; | |
| gap: 0.75rem; | |
| min-height: 70vh; | |
| color: var(--text-muted); | |
| } | |
| /* ------------------------------------------------------------ shell */ | |
| #app { min-height: 100%; } | |
| .topbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 40; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 0.65rem 1.25rem; | |
| background: color-mix(in srgb, var(--bg) 82%, transparent); | |
| backdrop-filter: blur(14px); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .brand { display: flex; align-items: baseline; gap: 0.6rem; } | |
| .brand-mark { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: 0.55rem; | |
| background: linear-gradient(135deg, var(--accent-strong), #8a4fe5); | |
| color: #fff; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.15rem; | |
| align-self: center; | |
| box-shadow: 0 4px 14px rgba(91, 84, 236, 0.35); | |
| } | |
| .brand-name { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| letter-spacing: 0.01em; | |
| } | |
| .brand-sub { | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.04em; | |
| } | |
| .topbar-right { display: flex; align-items: center; gap: 0.6rem; } | |
| .model-pill { | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text-muted); | |
| border-radius: 999px; | |
| padding: 0.3rem 0.85rem; | |
| font-size: 0.78rem; | |
| cursor: pointer; | |
| transition: border-color 0.15s, color 0.15s; | |
| max-width: 20rem; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .model-pill.is-loaded { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } | |
| .model-pill:hover { border-color: var(--accent); color: var(--accent); } | |
| .icon-btn { | |
| border: 1px solid var(--border); | |
| background: var(--surface-2); | |
| color: var(--text-muted); | |
| width: 2rem; | |
| height: 2rem; | |
| border-radius: 0.55rem; | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| } | |
| .icon-btn:hover { color: var(--text); border-color: var(--border-strong); } | |
| .auth-slot { display: flex; align-items: center; } | |
| .auth-user { display: flex; align-items: center; gap: 0.5rem; } | |
| .auth-avatar { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--border-strong); } | |
| .auth-name { font-size: 0.85rem; color: var(--text-muted); } | |
| .body-grid { | |
| display: grid; | |
| grid-template-columns: 12.5rem minmax(0, 1fr); | |
| gap: 1.25rem; | |
| max-width: 100rem; | |
| margin: 0 auto; | |
| padding: 1.25rem; | |
| } | |
| .nav-rail { | |
| position: sticky; | |
| top: 4.4rem; | |
| align-self: start; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.25rem; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.55rem 0.85rem; | |
| border: 1px solid transparent; | |
| border-radius: 0.65rem; | |
| background: transparent; | |
| color: var(--text-muted); | |
| font-size: 0.92rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| text-align: left; | |
| transition: background 0.15s, color 0.15s; | |
| } | |
| .nav-item:hover { background: var(--surface-2); color: var(--text); } | |
| .nav-item.is-active { | |
| background: var(--accent-soft); | |
| border-color: color-mix(in srgb, var(--accent) 35%, transparent); | |
| color: var(--accent); | |
| } | |
| .nav-icon { width: 1.1rem; text-align: center; opacity: 0.9; } | |
| .main { min-width: 0; } | |
| .view[hidden] { display: none; } | |
| /* ------------------------------------------------------------ layout bits */ | |
| .view-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); | |
| gap: 1.25rem; | |
| align-items: start; | |
| } | |
| .lens-grid { grid-template-columns: minmax(24rem, 3fr) minmax(22rem, 2fr); } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.35rem; | |
| box-shadow: var(--shadow); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.9rem; | |
| min-width: 0; | |
| } | |
| .card-full { grid-column: 1 / -1; } | |
| .card-title { | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| .card-sub { color: var(--text-muted); font-size: 0.86rem; margin-top: -0.5rem; } | |
| .mini-title { | |
| font-family: var(--font-display); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| margin-top: 0.35rem; | |
| } | |
| .stack { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } | |
| .check-stack { gap: 0.45rem; justify-content: center; } | |
| .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.85rem; align-items: end; } | |
| .row-wrap { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: end; } | |
| .row-end { justify-content: space-between; } | |
| .row-between { justify-content: space-between; align-items: center; } | |
| .btn-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } | |
| /* ------------------------------------------------------------ fields */ | |
| .field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } | |
| .field-label { | |
| font-size: 0.72rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| } | |
| .field-hint { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; } | |
| .input { | |
| width: 100%; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.5rem 0.7rem; | |
| color: var(--text); | |
| font-size: 0.92rem; | |
| font-family: inherit; | |
| transition: border-color 0.15s, box-shadow 0.15s; | |
| } | |
| textarea.input { resize: vertical; line-height: 1.5; } | |
| .input:focus-visible { | |
| outline: none; | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 3px var(--accent-soft); | |
| } | |
| .input-number { width: 7.5rem; } | |
| .file-input { font-size: 0.85rem; color: var(--text-muted); } | |
| .file-input::file-selector-button { | |
| margin-right: 0.75rem; | |
| border: 1px solid var(--border-strong); | |
| background: var(--surface-2); | |
| color: var(--text); | |
| border-radius: 0.5rem; | |
| padding: 0.4rem 0.8rem; | |
| cursor: pointer; | |
| font-family: inherit; | |
| } | |
| .check-field { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| color: var(--text); | |
| } | |
| .checkbox { | |
| appearance: none; | |
| width: 1.05rem; | |
| height: 1.05rem; | |
| border: 1px solid var(--border-strong); | |
| border-radius: 0.3rem; | |
| background: var(--surface-2); | |
| cursor: pointer; | |
| position: relative; | |
| flex: none; | |
| } | |
| .checkbox:checked { background: var(--accent-strong); border-color: var(--accent-strong); } | |
| .checkbox:checked::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0.12rem 0.3rem 0.28rem; | |
| border: solid #fff; | |
| border-width: 0 2px 2px 0; | |
| transform: rotate(45deg); | |
| } | |
| /* segmented control */ | |
| .seg { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.18rem; | |
| gap: 0.18rem; | |
| width: fit-content; | |
| max-width: 100%; | |
| } | |
| .seg-item { position: relative; display: inline-flex; } | |
| .seg-item input { position: absolute; opacity: 0; pointer-events: none; } | |
| .seg-item span { | |
| display: inline-block; | |
| padding: 0.32rem 0.75rem; | |
| border-radius: 0.45rem; | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .seg-sm .seg-item span { padding: 0.22rem 0.6rem; font-size: 0.8rem; } | |
| .seg-item input:checked + span { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.25); font-weight: 500; } | |
| .seg-item input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } | |
| .seg.is-disabled { opacity: 0.5; pointer-events: none; } | |
| /* slider */ | |
| .slider-wrap { display: flex; align-items: center; gap: 0.7rem; min-height: 2.1rem; } | |
| .slider-wrap.is-disabled { opacity: 0.45; } | |
| .slider { flex: 1; accent-color: var(--accent-strong); min-width: 6rem; } | |
| .slider-value { font-size: 0.82rem; color: var(--text-muted); min-width: 2.6rem; text-align: right; } | |
| /* buttons */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| border-radius: 0.6rem; | |
| border: 1px solid transparent; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| font-family: inherit; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| transition: filter 0.12s, background 0.12s, border-color 0.12s; | |
| } | |
| .btn:disabled { opacity: 0.45; cursor: not-allowed; } | |
| .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent-strong), #7a4bd6); | |
| color: #fff; | |
| box-shadow: 0 4px 14px rgba(91, 84, 236, 0.3); | |
| } | |
| .btn-primary:not(:disabled):hover { filter: brightness(1.1); } | |
| .btn-secondary { | |
| background: var(--surface-2); | |
| border-color: var(--border-strong); | |
| color: var(--text); | |
| } | |
| .btn-secondary:not(:disabled):hover { border-color: var(--accent); color: var(--accent); } | |
| .btn-danger { | |
| background: var(--danger-soft); | |
| border-color: color-mix(in srgb, var(--danger) 45%, transparent); | |
| color: var(--danger); | |
| } | |
| .btn-danger:not(:disabled):hover { filter: brightness(1.12); } | |
| .btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; } | |
| .btn-ghost:not(:disabled):hover { color: var(--text); background: var(--surface-2); } | |
| .btn-chip { | |
| background: var(--surface-2); | |
| border-color: var(--border); | |
| color: var(--text-muted); | |
| border-radius: 999px; | |
| padding: 0.25rem 0.75rem; | |
| font-size: 0.78rem; | |
| font-family: var(--font-mono); | |
| } | |
| .btn-chip:not(:disabled):hover { color: var(--accent); border-color: var(--accent); } | |
| .btn-hf { | |
| background: #ffd21e; | |
| color: #1a1a1a; | |
| font-weight: 600; | |
| } | |
| .btn-hf:not(:disabled):hover { filter: brightness(1.05); } | |
| /* details/accordion */ | |
| .panel-details { | |
| border: 1px solid var(--border); | |
| border-radius: 0.75rem; | |
| background: var(--surface-2); | |
| overflow: hidden; | |
| } | |
| .panel-details > summary { | |
| cursor: pointer; | |
| padding: 0.65rem 0.9rem; | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| list-style: none; | |
| user-select: none; | |
| } | |
| .panel-details > summary::before { content: "▸ "; color: var(--accent); } | |
| .panel-details[open] > summary::before { content: "▾ "; } | |
| .panel-details > summary:hover { color: var(--text); } | |
| .details-body { padding: 0.35rem 0.9rem 0.9rem; } | |
| /* ------------------------------------------------------------ output */ | |
| .status-pane { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.6rem 0.8rem; | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| } | |
| .status-pane.is-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } | |
| .status-pane.is-busy { color: var(--accent); animation: pulse 1.6s ease-in-out infinite; } | |
| @keyframes pulse { 50% { opacity: 0.55; } } | |
| .output-wrap { display: flex; flex-direction: column; gap: 0.35rem; } | |
| .output-head { display: flex; align-items: center; justify-content: space-between; } | |
| .output-text { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.7rem 0.85rem; | |
| font-size: 0.9rem; | |
| line-height: 1.6; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| margin: 0; | |
| max-height: 24rem; | |
| overflow: auto; | |
| } | |
| .json-pane { font-family: var(--font-mono); font-size: 0.78rem; } | |
| /* tables */ | |
| .table-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 0.6rem; } | |
| .candidates-scroll { max-height: 24rem; } | |
| .table-scroll.is-disabled { opacity: 0.45; pointer-events: none; } | |
| .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } | |
| .data-table th { | |
| position: sticky; | |
| top: 0; | |
| background: var(--surface-3); | |
| text-align: left; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.07em; | |
| color: var(--text-muted); | |
| padding: 0.5rem 0.75rem; | |
| z-index: 1; | |
| } | |
| .data-table td { padding: 0.42rem 0.75rem; border-top: 1px solid var(--border); } | |
| .data-table tr.is-preview td { background: var(--accent-soft); } | |
| .data-table tr.is-disabled-row td { opacity: 0.5; } | |
| .token-cell { white-space: pre; } | |
| .eos-cell { text-align: center; color: var(--warn); padding: 1rem ; } | |
| /* pills */ | |
| .pill-grid { display: flex; flex-direction: column; gap: 0.6rem; } | |
| .pill { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| padding: 0.45rem 0.8rem; | |
| } | |
| .pill-label { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--text-muted); | |
| flex: none; | |
| } | |
| .pill-value { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } | |
| /* model search */ | |
| .search-wrap { position: relative; } | |
| .search-results { | |
| position: absolute; | |
| top: calc(100% + 0.3rem); | |
| left: 0; | |
| right: 0; | |
| z-index: 30; | |
| background: var(--surface); | |
| border: 1px solid var(--border-strong); | |
| border-radius: 0.6rem; | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| max-height: 19rem; | |
| overflow-y: auto; | |
| } | |
| .search-item { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| width: 100%; | |
| padding: 0.5rem 0.8rem; | |
| background: transparent; | |
| border: 0; | |
| color: var(--text); | |
| font-size: 0.85rem; | |
| cursor: pointer; | |
| text-align: left; | |
| } | |
| .search-item:hover { background: var(--accent-soft); } | |
| .search-meta { color: var(--text-muted); font-size: 0.75rem; flex: none; } | |
| .chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; } | |
| /* plots */ | |
| .plot-host { min-height: 2rem; width: 100%; } | |
| .plot-host.has-plot { min-height: 18rem; } | |
| .plot-tall.has-plot { min-height: 24rem; } | |
| /* lens */ | |
| .lens-html-host { min-width: 0; font-size: 0.95rem; } | |
| .lens-html-host table { max-width: 100%; } | |
| .token-strip { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.25rem; | |
| max-height: 12rem; | |
| overflow: auto; | |
| padding: 0.4rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| min-height: 2.6rem; | |
| } | |
| .token-chip { | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| padding: 0.14rem 0.4rem; | |
| border-radius: 0.35rem; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| white-space: pre; | |
| transition: border-color 0.1s, color 0.1s; | |
| } | |
| .token-chip:hover { border-color: var(--accent); color: var(--text); } | |
| .token-chip.is-generated { border-style: dashed; } | |
| .token-chip.is-selected { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .pinned-list { display: flex; flex-wrap: wrap; gap: 0.4rem; } | |
| .pinned-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.78rem; | |
| padding: 0.2rem 0.3rem 0.2rem 0.6rem; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-strong); | |
| background: var(--surface-2); | |
| } | |
| .chip-x { | |
| border: 0; | |
| background: transparent; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| font-size: 0.95rem; | |
| line-height: 1; | |
| padding: 0 0.3rem; | |
| } | |
| .chip-x:hover { color: var(--danger); } | |
| .intervention-toolbar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.5rem; | |
| align-items: center; | |
| } | |
| .layer-rail { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(2rem, 1fr)); | |
| gap: 0.25rem; | |
| max-height: 8rem; | |
| overflow: auto; | |
| padding: 0.4rem; | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.6rem; | |
| } | |
| .layer-chip { | |
| min-width: 0; | |
| height: 1.65rem; | |
| padding: 0 0.25rem; | |
| border: 1px solid var(--border); | |
| border-radius: 0.35rem; | |
| background: var(--surface); | |
| color: var(--text-muted); | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| cursor: pointer; | |
| } | |
| .layer-chip:hover { border-color: var(--accent); color: var(--text); } | |
| .layer-chip.is-selected { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| font-weight: 600; | |
| } | |
| .lens-cell { cursor: pointer; outline-offset: -2px; } | |
| .lens-cell:hover { outline: 2px solid var(--accent); } | |
| .iv-table-host { min-width: 0; } | |
| /* responsive */ | |
| @media (max-width: 1180px) { | |
| .lens-grid { grid-template-columns: 1fr; } | |
| } | |
| @media (max-width: 860px) { | |
| .body-grid { grid-template-columns: 1fr; padding: 0.75rem; } | |
| .nav-rail { | |
| position: static; | |
| flex-direction: row; | |
| overflow-x: auto; | |
| padding-bottom: 0.25rem; | |
| } | |
| .nav-item { flex: none; } | |
| .brand-sub { display: none; } | |
| .view-grid { grid-template-columns: 1fr; } | |
| } | |