/* * The operator shell: the chrome and the parts every operator tool is built * from. Loaded by /vendor, /admin, /console and /door. * * This was /vendor's alone until the other three were asked to look like it. * Rather than copy 800 lines into three more files and watch them drift, the * generic half of vendor.css moved here and kept its class names, which is why * everything below is still prefixed `v-` (and the cards `d-`). Read that * prefix as "the operator shell", not as "vendor": renaming it would have * touched every template in web/vendor-page/ to no one's benefit. * * A page opts in with `class="v-scene"` on , alongside its own scene * class (`a-scene`, `c-scene`, `d-scene`), which its own stylesheet hangs the * tool-specific rules off. What belongs here is anything a second tool would * otherwise have to copy: the sidebar, the top bar, buttons, fields, the * segmented control, cards, the toast, motion, the footer. What does not is * anything answering one tool's question - a worklist row, a map strip, a * ticket - which stays beside that tool. * * A handful of rules here are still /vendor's own (.v-place-card, .v-plancard, * .v-status-pill, the dashboard's skeleton shapes). They are harmless to the * other three, which simply never render that markup. * * Every colour is a token from lib/theme.css, and which layer to reach for is * the note at the top of that file: the ramp (--g-*) for things dark in both * themes, the roles (--link, --accent, --tint) for everything else. There are * no literals here, because all four tools are themeable and a literal is a * rule that only works in the theme its author happened to be in. */ * { box-sizing: border-box; } /* * The chrome takes the accent. * * A tint rather than a fill. The sidebar and the top bar are the two surfaces * on screen the longest and the ones least worth looking at, so they carry the * accent at the strength a paper stock carries a colour - enough that picking * midnight blue visibly changes the tool, not so much that the nav competes * with the section it wraps. The inset hairline is what reads at a glance; the * wash behind it keeps the hairline from looking like a stray border. */ body.v-scene { margin: 0; --v-hub: url("/op-bg-vendor.svg"); --nav-tint: color-mix(in srgb, var(--g-500) 8%, var(--card)); --nav-edge: color-mix(in srgb, var(--g-500) 16%, transparent); /* The ground artwork, below. Dark takes twice the light theme's, because a near-black swallows a wash that a near-white shows plainly. */ --hub-opacity: 0.05; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.5 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--g-500) 24%, transparent); } /* * Every field is exactly 16px. Below that iOS Safari zooms the page on focus, * and this rule has been broken twice by type passes that meant no harm. The * longhands are deliberate: `font: 400 16px/1.4 inherit` is invalid CSS. */ .v-scene input, .v-scene select, .v-scene textarea { font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); } .v-scene [hidden] { display: none !important; } /* No specificity, so any component's own link colour wins over it. */ :where(.v-scene a) { color: var(--link); } .v-scene h1, .v-scene h2, .v-scene h3 { text-wrap: balance; } .v-num { font-variant-numeric: tabular-nums; } .ic { flex: none; display: block; } .v-scene button:focus-visible, .v-scene input:focus-visible, .v-scene textarea:focus-visible, .v-scene a:focus-visible { outline: none; box-shadow: var(--ring); } /* * /vendor's measure, and the default only because /vendor wrote it. A tool * whose subject is wider than a column of prose overrides it: see * `.c-scene .v-wrap` in console.css, where the subject is a map. */ .v-wrap { width: 100%; max-width: 760px; margin: 0 auto; } /* The small caps line over a group. Sentence case would be Apple's; these name groups rather than say anything, and read as labels at a glance. */ .v-label { margin: 0; font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } /* * The hub, behind everything. * * Each tool has its own drawing (--v-hub, set per page) and they were the one * thing the dark operator pages had that the light rebuild did not: a flat * ground reads as unfinished at this size, and the artwork is the only piece * of Cite on these screens that is neither type nor a control. * * Painted as a mask over a flat accent fill rather than as the SVG itself, * which is the point: the file's own colours would sit there ignoring the * accent somebody picked, and this way the texture IS the accent. * * Fixed, so it does not scroll with a long section - it is the ground, not * part of the page. A positive z-index rather than a negative one, because a * negative z-index puts it behind the body's own background and makes it * invisible; the shell is lifted to 1 to sit over it. */ body.v-scene::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--g-500); opacity: var(--hub-opacity); -webkit-mask: var(--v-hub) center / cover no-repeat; mask: var(--v-hub) center / cover no-repeat; } @media print { body.v-scene::before { display: none; } } [data-theme="dark"] body.v-scene { --hub-opacity: 0.1; } /* ── The shell ────────────────────────────────────────────────────────── */ .v-shell { position: relative; z-index: 1; margin-inline: auto; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--gap); min-height: 100vh; padding: var(--gap); } .v-side { position: sticky; top: var(--gap); align-self: start; display: flex; flex-direction: column; gap: 18px; height: calc(100vh - var(--gap) * 2); min-height: 560px; padding: 22px 14px 14px; border-radius: var(--r-panel); background: var(--nav-tint); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--nav-edge); overflow-y: auto; scrollbar-width: none; } .v-side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; } .v-side-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .v-side-brand .v-mark { width: 26px; height: 26px; color: var(--link); } .v-side-brand em { padding: 3px 8px; border-radius: 999px; background: var(--tint-2); color: var(--link); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: 0.02em; } /* The place this page is about, where the initials chip used to be. */ .v-place-card { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; border: 1px solid var(--sep); border-radius: 18px; background: var(--inset); color: var(--ink); font: inherit; text-align: left; } button.v-place-card { cursor: pointer; transition: background 0.2s, transform 0.2s var(--spring); } button.v-place-card:hover { background: var(--fill); } button.v-place-card:active { transform: scale(0.98); } .v-place-card-id { flex: 1; min-width: 0; } .v-place-card-name { display: block; overflow: hidden; font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; text-overflow: ellipsis; } .v-place-card-state { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: var(--t-cap); color: var(--ink-2); } .v-place-card .ic-chev { color: var(--ink-3); transition: transform 0.25s var(--spring); } .v-place-card[aria-expanded="true"] .ic-chev { transform: rotate(180deg); } /* A picture of the place when there is one, a storefront when there is not. */ .v-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; overflow: hidden; border-radius: 13px; background: linear-gradient(145deg, var(--g-600), var(--g-800)); color: #fff; } .v-avatar img { width: 100%; height: 100%; object-fit: cover; } .v-avatar-sm { width: 34px; height: 34px; border-radius: 11px; } .v-live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v-c, var(--s-closed)); } .v-live-dot.is-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--v-c); opacity: 0.35; animation: v-ping 2.2s var(--ease) infinite; } @keyframes v-ping { 0% { transform: scale(0.5); opacity: 0.5; } 80%, 100% { transform: scale(1.6); opacity: 0; } } .v-side-nav { display: flex; flex-direction: column; gap: 2px; } .v-side-label { margin: 10px 12px 6px; } .v-side-label:first-child { margin-top: 0; } .v-side-item, .v-side-act { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 13px; background: none; color: var(--ink-2); font: inherit; font-size: var(--t-body); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; } .v-side-item:hover, .v-side-act:hover { background: var(--inset); color: var(--ink); } .v-side-item .ic, .v-side-act .ic { color: var(--ink-3); transition: color 0.2s; } .v-side-item[aria-current="true"] { color: var(--ink); font-weight: 700; background: var(--tint); } .v-side-item[aria-current="true"] .ic { color: var(--link); } .v-side-item[aria-current="true"]::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--link); animation: v-bar-in 0.35s var(--spring); } @keyframes v-bar-in { from { transform: scaleY(0.2); opacity: 0; } } .v-side-count, .v-side-tag { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; } .v-side-count { background: var(--g-800); color: #fff; } .v-side-tag { background: var(--fill); color: var(--ink-2); } .v-side-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--sep); } .v-side-act { font-size: var(--t-sub); min-height: 40px; } /* The plan, in the corner the reference keeps for its app download. */ .v-side-plan { margin-top: auto; } .v-plancard { position: relative; overflow: hidden; padding: 18px; border-radius: 20px; background: radial-gradient(120% 90% at 100% 0%, var(--g-600) 0%, var(--g-800) 45%, var(--g-950) 100%); color: #fff; isolation: isolate; } .v-plancard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0.1; -webkit-mask: var(--v-hub) right -120px bottom -300px / 520px 520px no-repeat; mask: var(--v-hub) right -120px bottom -300px / 520px 520px no-repeat; } .v-plancard-k { display: flex; align-items: center; gap: 7px; margin: 0; font-size: var(--t-cap); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--g-300); } .v-plancard-t { margin: 8px 0 4px; font-size: var(--t-lead); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; } .v-plancard-s { margin: 0 0 14px; font-size: var(--t-foot); color: rgba(255, 255, 255, 0.72); line-height: 1.45; } .v-plancard .v-btn { width: 100%; background: #fff; color: var(--g-900); } .v-plancard .v-btn:hover { background: var(--g-100); } /* ── The top bar ──────────────────────────────────────────────────────── */ .v-main-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; } .v-topbar { position: sticky; top: var(--gap); z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 12px 10px 18px; border-radius: var(--r-card); /* Kept translucent: it is sticky, and the section scrolling under a solid bar is the one thing this blur is for. */ background: color-mix(in srgb, var(--nav-tint) 86%, transparent); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--nav-edge); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } .v-topbar:empty { display: none; } .v-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .v-topbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; } .v-status-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px 0 14px; border-radius: 999px; background: color-mix(in srgb, var(--v-c) 12%, var(--card)); color: var(--ink); font-size: var(--t-sub); font-weight: 700; white-space: nowrap; } .v-status-pill small { font-size: var(--t-foot); font-weight: 500; color: var(--ink-2); } .v-updated { font-size: var(--t-foot); color: var(--ink-3); white-space: nowrap; } .v-icon-btn { position: relative; display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid var(--sep); border-radius: 50%; background: var(--card); color: var(--ink-2); text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.2s var(--spring), color 0.2s; } .v-icon-btn:hover { background: var(--inset); color: var(--ink); } .v-icon-btn:active { transform: scale(0.94); } .v-icon-btn.has-dot::after { content: ""; position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border: 2px solid var(--card); border-radius: 50%; background: var(--s-sold); } #v-refresh.is-spinning .ic { animation: v-spin 0.8s var(--ease); } @keyframes v-spin { to { transform: rotate(360deg); } } .v-acct { display: flex; align-items: center; gap: 10px; padding-left: 8px; margin-left: 4px; border-left: 1px solid var(--sep); } .v-acct-name { display: block; font-size: var(--t-sub); font-weight: 700; line-height: 1.2; } .v-acct-plan { display: block; font-size: var(--t-cap); color: var(--ink-3); } /* Popovers: the bell's news and the place switcher. */ .v-pop-wrap { position: relative; } .v-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: min(340px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--sep); border-radius: 20px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: var(--shadow-lift); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); transform-origin: top right; animation: v-pop-in 0.28s var(--spring); } .v-pop-left { left: 0; right: auto; transform-origin: top left; width: 100%; } @keyframes v-pop-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } } .v-pop-head { margin: 6px 10px 8px; font-size: var(--t-foot); font-weight: 700; color: var(--ink-2); } .v-pop-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-radius: 13px; background: none; color: var(--ink); font: inherit; font-size: var(--t-sub); text-align: left; cursor: pointer; } .v-pop-item:hover { background: var(--inset); } .v-pop-item .ic { color: var(--link); } .v-pop-empty { margin: 4px 10px 10px; font-size: var(--t-sub); color: var(--ink-2); } /* The tick against the choice in force, pushed to the far edge of the row. */ .v-pop-check { margin-left: auto; color: var(--link); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .v-btn, .d-act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; background: var(--inset); color: var(--ink); font: inherit; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s var(--spring); } .v-btn:hover { background: var(--fill-2); } .v-btn:active, .d-act:active { transform: scale(0.97); } .v-btn:disabled { opacity: 0.45; cursor: default; transform: none; } .v-btn-go, .d-act.d-act-go { background: var(--accent); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); } .v-btn-go:hover, .d-act.d-act-go:hover { background: var(--accent-hover); } .v-btn-line, .d-act:not(.d-act-go) { border-color: var(--sep-2); background: var(--card); } .v-btn-line:hover, .d-act:not(.d-act-go):hover { background: var(--inset); } .v-btn-sm { min-height: 36px; padding: 0 14px; font-size: var(--t-sub); } .v-btn-quiet, .d-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--t-sub); font-weight: 600; cursor: pointer; } .v-btn-quiet:hover, .d-link-btn:hover { color: var(--link-strong); } .v-btn-danger { color: var(--red); } .v-btn-danger:hover { color: var(--red-ink); } .v-btn .ic, .d-act .ic { margin-left: -4px; } /* The round arrow in a card's corner, as the reference draws it. */ .v-arrow { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--sep-2); border-radius: 50%; color: var(--ink); transition: transform 0.3s var(--spring), background 0.2s; } /* ── Fields ───────────────────────────────────────────────────────────── */ .v-field { display: block; margin-top: 14px; } .v-field > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: var(--t-foot); font-weight: 600; color: var(--ink-2); } .v-input { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--inset); outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; } .v-input::placeholder { color: var(--ink-3); } .v-input:hover { background: var(--inset-hover); } .v-input:focus { border-color: var(--g-500); background: var(--card); box-shadow: var(--ring); } textarea.v-input { resize: vertical; } .v-notice { margin: 10px 0 0; font-size: var(--t-foot); color: var(--red); line-height: 1.45; } .v-notice:empty { display: none; } /* ── The segmented control ────────────────────────────────────────────── */ /* * One control for every either-or on the page: the state, the hold, the * insights span. A grey track with a white thumb that slides to the choice. * The thumb is the track's ::before, placed by --v-i (the pressed index) and * --v-n (how many), so it moves in CSS alone and a failed write can put it * back by setting one number. */ .v-seg, .v-track, .v-for, .d-seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: 13px; background: var(--fill); isolation: isolate; } .v-seg::before, .v-track::before, .v-for::before, .d-seg::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--v-n, 4)); border-radius: 10px; background: var(--thumb); box-shadow: var(--shadow-thumb); transform: translateX(calc(var(--v-i, 0) * 100%)); transition: transform 0.42s var(--spring), opacity 0.2s; } .v-track[data-i="-1"]::before, .v-seg[data-i="-1"]::before { opacity: 0; } .v-seg > button, .v-state, .v-hr, .d-seg-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: var(--t-sub); font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 0.25s; } .v-seg > button[aria-pressed="true"], .v-hr[aria-pressed="true"], .d-seg-btn[aria-pressed="true"] { color: var(--ink); } /* Chips: the many-choice cousin, for categories and kinds. */ .v-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .v-chip-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: var(--inset); color: var(--ink-2); font: inherit; font-size: var(--t-sub); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.18s var(--spring); } .v-chip-btn:hover { background: var(--fill-2); } .v-chip-btn:active { transform: scale(0.96); } .v-chip-btn[aria-pressed="true"] { border-color: var(--g-500); background: var(--tint); color: var(--link-strong); } /* ── Cards ────────────────────────────────────────────────────────────── */ .d-card { min-width: 0; padding: 22px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow-card); } .d-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .d-card-head h2, .d-card-head h3 { margin: 0; font-size: var(--t-lead); font-weight: 700; letter-spacing: -0.015em; } .d-card-head > span, .d-card-head p { margin: 0; font-size: var(--t-foot); color: var(--ink-3); } .d-card-head .d-card-sub { display: block; margin-top: 2px; font-size: var(--t-foot); font-weight: 500; color: var(--ink-3); letter-spacing: 0; } .d-empty { margin: 0; font-size: var(--t-sub); line-height: 1.6; color: var(--ink-2); max-width: 60ch; } /* The small tinted square an icon sits in, on rows and empty states. */ .v-glyph { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--v-c, var(--link)) 14%, var(--card)); color: var(--v-c, var(--link)); } /* ── Toast ────────────────────────────────────────────────────────────── */ .v-toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; display: flex; align-items: center; gap: 9px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--toast-bg); color: #fff; font-size: var(--t-sub); font-weight: 600; box-shadow: var(--shadow-lift); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transform: translateX(-50%); animation: v-toast 2.4s var(--spring) both; pointer-events: none; } .v-toast .ic { color: var(--g-300); } @keyframes v-toast { 0% { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } 12%, 82% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, 8px) scale(0.98); } } /* ── Motion ───────────────────────────────────────────────────────────── */ /* * A section arrives, it does not appear: its parts rise into place one after * another. Only when the section or the place changes (motion.js sets * data-enter on #app), never on the re-render after a save, which would make * the page flinch every time a vendor did anything. */ #app[data-enter="1"] .d-dash > * { animation: v-rise 0.6s var(--spring) both; } #app[data-enter="1"] .d-dash > *:nth-child(2) { animation-delay: 40ms; } #app[data-enter="1"] .d-dash > *:nth-child(3) { animation-delay: 80ms; } #app[data-enter="1"] .d-dash > *:nth-child(4) { animation-delay: 120ms; } #app[data-enter="1"] .d-dash > *:nth-child(5) { animation-delay: 160ms; } #app[data-enter="1"] .d-dash > *:nth-child(n + 6) { animation-delay: 200ms; } @keyframes v-rise { from { opacity: 0; transform: translateY(12px); } } @keyframes v-fade { from { opacity: 0; } } @keyframes v-open { from { opacity: 0; transform: translateY(-6px) scale(0.99); } } @media (prefers-reduced-motion: reduce) { .v-scene *, .v-scene *::before, .v-scene *::after { animation: none !important; transition: none !important; } } /* ── Loading ──────────────────────────────────────────────────────────── */ .v-skeleton { display: grid; gap: var(--gap); } .v-skel { border-radius: var(--r-card); background: linear-gradient(90deg, var(--skel-a) 0%, var(--skel-b) 45%, var(--skel-a) 90%) 0 0 / 200% 100%; animation: v-shimmer 1.4s linear infinite; } @keyframes v-shimmer { to { background-position: -200% 0; } } .v-skel-head { height: 64px; max-width: 420px; border-radius: 16px; } .v-skel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .v-skel-kpi { height: 136px; } .v-skel-main { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--gap); } .v-skel-big { height: 420px; } /* ── Footer ───────────────────────────────────────────────────────────── */ .v-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 6px 4px; font-size: var(--t-foot); color: var(--ink-3); } .v-foot-brand { display: flex; align-items: center; gap: 8px; } .v-foot-links { display: flex; gap: 18px; flex-wrap: wrap; } .v-foot-links a { color: var(--ink-3); text-decoration: none; } .v-foot-links a:hover { color: var(--ink); } .v-checkout-banner { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--tint-2); color: var(--link-strong); font-size: var(--t-sub); font-weight: 600; } /* ── Before a claim: no chrome to switch between yet ─────────────────── */ .v-shell-bare { grid-template-columns: minmax(0, 1fr); } .v-shell-bare .v-side, .v-shell-bare .v-topbar { display: none; } /* ── Narrow screens ───────────────────────────────────────────────────── */ @media (max-width: 1080px) { :root { --side-w: 232px; } } /* * A phone gets the sidebar as a header: brand and sign-out on one line, the * place under it, the sections as a row that scrolls sideways. The plan card * and help link step aside; Billing and the top bar's ? still reach both. */ @media (max-width: 900px) { .v-shell { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 10px; } .v-side { position: relative; top: 0; height: auto; min-height: 0; gap: 12px; padding: 14px; overflow: visible; } .v-side-top { padding: 0 2px; } .v-side-nav { flex-direction: row; gap: 6px; margin: 0 -14px; padding: 0 14px 2px; overflow-x: auto; scrollbar-width: none; } .v-side-nav::-webkit-scrollbar { display: none; } .v-side-label { display: none; } .v-side-item { flex: none; width: auto; min-height: 38px; padding: 0 14px; border-radius: 999px; background: var(--inset); font-size: var(--t-sub); } .v-side-item[aria-current="true"] { background: var(--g-800); color: #fff; } .v-side-item[aria-current="true"] .ic { color: #fff; } .v-side-item[aria-current="true"]::before { display: none; } .v-side-item .ic { width: 17px; height: 17px; } .v-side-plan { display: none; } .v-side-foot { position: absolute; top: 12px; right: 12px; flex-direction: row; padding: 0; border: 0; } .v-side-foot a { display: none; } .v-side-foot .v-side-act { min-height: 34px; padding: 0 12px; border-radius: 999px; background: var(--inset); font-size: var(--t-foot); } .v-side-foot .v-side-act .ic { width: 16px; height: 16px; } .v-topbar { position: relative; top: 0; min-height: 60px; padding: 8px 8px 8px 12px; } .v-updated, .v-acct { display: none; } .v-skel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-skel-main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { .v-status-pill small { display: none; } .v-icon-btn { width: 38px; height: 38px; } }