/* Blue North CRM — project stylesheet * * Everything here is what Bootstrap's Sass variables cannot express. Brand * colours, radii, shadows and the type scale come from .wappler/theme.json and * are compiled into /bootstrap/5/css/bootstrap.min.css — see CLAUDE.md. * * This file loads AFTER Bootstrap, so a `--bs-*` declaration on :root would * silently outrank the theme build and break the Theme tab. Don't add any. * The component-scoped `--bs-btn-*` / `--bs-card-*` overrides below are safe: * they are Bootstrap's own documented per-component API, not theme values. * * THE ONE EXEMPTION IS THE DARK BLOCK AT THE FOOT OF THIS FILE. Wappler rejects * every `$*-dark` Sass variable (see CLAUDE.md → Theme), so the Theme tab cannot * reach dark mode at all and the only place its surfaces can live is here. That * block declares `--bs-*` under `[data-bs-theme="dark"]` and nowhere else, so it * cannot outrank the light theme build — light mode is still entirely the Sass * compiler's, which is what keeps the Theme tab working. * * `line-height-base` and `border-radius-xl` are rejected outright by this * Wappler version, so the only place they can live is here. */ /* --------------------------------------------------------------------------- * Fonts — Anthropic Sans * * Self-hosted: it isn't a Google font, so it can't go through theme.json's * `headings-font-family` (that key always emits a Google Fonts @import, which * would just 404). @font-face lives here instead, and the body/heading rules * below set the actual `font-family` property — not a `--bs-*` custom * property, so the "don't override those" rule above doesn't apply and the * Theme tab's own colour/radius/shadow values are untouched. * * Two families, matching how Anthropic itself pairs them: Text for body copy, * Display for headings. * ------------------------------------------------------------------------ */ @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Light-Static.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Regular-Static.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-RegularItalic-Static.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Medium-Static.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-MediumItalic-Static.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Semibold-Static.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Bold-Static.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-BoldItalic-Static.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-Extrabold-Static.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Text"; src: url("/fonts/anthropic-sans/AnthropicSans-Text-ExtraboldItalic-Static.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Light-Static.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Regular-Static.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-RegularItalic-Static.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Medium-Static.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-MediumItalic-Static.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Semibold-Static.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Bold-Static.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-BoldItalic-Static.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-Extrabold-Static.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Anthropic Sans Display"; src: url("/fonts/anthropic-sans/AnthropicSans-Display-ExtraboldItalic-Static.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; } /* --------------------------------------------------------------------------- * Tokens * ------------------------------------------------------------------------ */ :root { --bn-sidebar-w: 264px; --bn-topbar-h: 64px; /* HOW LONG THE SIDEBAR TAKES TO FOLD, and on what curve. One pair of tokens because six things move on that gesture — the panel's own width, the shell sliding across to meet it, the section headings' height, each link's padding, and two cross-fades — and every one of them has to finish on the same frame or the panel arrives before its contents do. The curve is fast out of the gate and long on the settle, which is what makes a panel read as being pushed rather than tweened; a symmetric ease at this distance looks like it is being dragged. See "Folding the rail" below for why animating this costs one relayout rather than one per frame. */ --bn-nav-dur: 300ms; --bn-nav-ease: cubic-bezier(0.32, 0.72, 0, 1); /* The page gutter, and the rhythm everything else is a multiple of. Widened from 1.5rem in the design refresh: the shell is the outermost margin in the app and every list, board and record page reads as tighter than it is when the content starts 24px from the sidebar. */ --bn-gutter: 2rem; /* The vertical step between two blocks on a page — a page head and the tiles under it, the tiles and the tabs, one card and the next. Named rather than repeated so "more air" is one edit, not forty. */ --bn-stack-lg: 1.5rem; --bn-stack: 0.75rem; --bn-stack-sm: 0.75rem; /* Card corners. `border-radius-xl` is rejected by Wappler. */ --bn-radius-card: 1rem; --bn-radius: 1rem; --bn-radius-sm: 0.5rem; /* A LABEL-SHAPED THING IS NOT A STADIUM. Status pills and board chips were 999px, which at 22px tall is a capsule — the loudest shape available for the quietest fact on a row, and the one shape nothing else in the app has any more now the theme switch, the tiles and the queue rows all sit on small radii. A dot stays a dot and a count badge stays a circle: those are round because they are round things, not because they are labels. */ --bn-radius-pill: 0.375rem; /* Interior padding of a surface. One value, so a card, a panel and a table cell agree about where their content starts. */ --bn-pad: 1.2rem; --bn-pad-sm: 1rem; /* ------------------------------------------------------------------------- Surfaces. THE TWO NAMES EXIST BECAUSE DARK MODE NEEDS THEM TO MOVE IN OPPOSITE DIRECTIONS. `--bs-secondary-bg` was doing two unrelated jobs: the page canvas behind everything, and the recess *inside* a surface — a table header, a board column head, the search field, a row hover. In light mode one tone can be both, because a recess and a canvas are each just "slightly less white than a card". In dark mode a canvas has to go DARKER than the card and a recess has to go LIGHTER, so a single token cannot serve both and the canvas is named separately here. `--bn-surface` derives from `--bs-body-bg` rather than restating `#fff`: body-bg is Bootstrap's own raised surface — cards, modals, dropdowns and form controls all read it — and this app paints the canvas on instead, so body-bg is left meaning exactly "a raised surface" in both modes. Nothing here duplicates a theme value; both derive. */ --bn-surface: var(--bs-body-bg); --bn-canvas: var(--bs-secondary-bg); /* A surface under the pointer. "Lighter on hover" is only literally possible in dark mode — in light mode the surface is already white — so what the token actually holds is a LIFT: the faintest tint of primary mixed into the surface itself, which reads as lit in light mode and is genuinely lighter in dark. Primary rather than a neutral because the border and the corner arrow already go primary on the same hover; three things moving toward one colour is one gesture, three toward two colours is a smudge. Opaque, not the transparent `--bn-wash` further down that does the same job for a drop target and a chart band: this one is transitioned, and animating `background-color` between two flat colours is what makes that cheap. */ --bn-surface-hover: color-mix(in srgb, var(--bs-primary) 5%, var(--bn-surface)); --bn-card-hover: color-mix(in srgb, var(--bs-primary) 3%, var(--bs-tertiary-bg)); /* The sidebar and topbar are chrome, not content — in light mode that is still just the surface (a white panel, same as a card), but dark mode gives chrome its own tone distinct from both the canvas and a card, so the two need to be able to move independently. */ --bn-chrome: var(--bn-surface); --bn-border-hover: #dcdce0; /* SCROLLBARS. Two tokens and nothing else: a thumb, and the same thumb under a pointer. There is no track token because a track is not drawn at all — every scrollbar in the app is a thumb floating over whatever it is scrolling. A scrollbar is chrome about chrome; it should say "there is more" and then get out of the way, and a full-contrast Chrome default scrollbar sitting down the side of a 320px board column says it much louder than the content it is describing. Both are a mix of the app's own ink into the surface rather than a flat grey, so they follow the theme and dark mode is two numbers rather than two hexes. */ --bn-scroll-thumb: color-mix(in srgb, var(--bs-emphasis-color) 18%, transparent); --bn-scroll-thumb-hover: color-mix(in srgb, var(--bs-emphasis-color) 34%, transparent); /* How tall a board column may grow before its own cards start scrolling inside it. One token because it is a judgement rather than a measurement: the columns sit well down the page under a head, the tiles and the filter bar, so a height budgeted off the viewport alone always under-counts what is on screen. The 2rem is the gutter under the board and nothing else — the column is deliberately allowed to run past the fold, because the page scrolls and reaching a card by scrolling the PAGE is better than reaching it by scrolling a 320px box. */ --bn-board-col-max: calc(100vh - var(--bn-topbar-h) - 2rem); /* How far the fade at a scrolling edge reaches. See the mask block under Kanban. */ --bn-fade: 2rem; /* CHROME UNDER A POINTER, AND CHROME THAT IS SELECTED. The same recipe as --bn-surface-hover above, mixed into --bn-chrome instead of --bn-surface so the sidebar's own tone is what gets tinted — which in light mode is the same white and in dark mode is not. They exist because the sidebar used to answer a pointer with `--bs-secondary-bg` and mark the current page with `--bs-tertiary-bg`: two flat greys, and the only two places in the app where a hover or a selection is a NEUTRAL. Everything else already speaks primary — a tile goes primary-border and primary-tint on hover, a queue row takes --bn-surface-hover, the queue's own group heading turns primary, the board card's drop target is a primary wash. The navigation, which is the control surface you look at most, was the one thing not saying it. Two steps of one hue rather than one step of two hues: 6% is a pointer resting somewhere, 12% is where you actually are. The active step carries primary INK as well, which is what makes it readable as a state rather than as a slightly darker rectangle. */ --bn-nav-hover: color-mix(in srgb, var(--bs-primary) 6%, var(--bn-chrome)); --bn-nav-active: color-mix(in srgb, var(--bs-primary) 12%, var(--bn-chrome)); /* An inverted fill — the current stage pill, the active bucket chip, the chart tooltip. This CANNOT be `--bs-emphasis-color` with white on it, which is what it used to be: emphasis-color is #fff in dark mode, so all three became white text on a white box. The pair inverts together instead. */ --bn-invert-bg: var(--bs-emphasis-color); --bn-invert-fg: #fff; --bn-invert-fg-dim: rgba(255, 255, 255, 0.72); /* The brand square. `--bs-dark` is a theme colour and does not follow the mode, so in dark mode it lands within a shade of the surface it sits on. */ --bn-mark-bg: var(--bs-dark); --bn-mark-fg: #fff; /* Shadows. Softer and shorter-throw than Bootstrap's, because almost every surface here is a hairline-bordered white block on a near-white canvas — at that contrast a visible drop shadow reads as grime rather than lift. */ --bn-lift: 0 1px 2px rgba(24, 24, 27, 0.04); --bn-lift-lg: 0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 28px -10px rgba(24, 24, 27, 0.12); /* ------------------------------------------------------------------------- Status tints — a wash of a theme colour, and the ink that goes on it. These were rgba() literals holding the theme's own RGB triplets, at four different alphas that had drifted apart (0.1 and 0.12 for the same hue in different places). They are one alpha and one `color-mix` now, so a colour retuned in the Theme tab carries through to every pill and chip instead of leaving the wash pointing at the old hue. The ink is NOT `--bs-*-text-emphasis`. Bootstrap derives that as a 60% shade, which is markedly darker than the tones the app was using; adopting it would restyle every pill in light mode. The light values below are the app's own, unchanged. Dark mode DOES hand over to Bootstrap's dark `*-text-emphasis`, because there the Sass-derived tint is exactly right and following it keeps the ink in step with the Theme tab. */ --bn-fill-primary: color-mix(in srgb, var(--bs-primary) 12%, transparent); --bn-fill-success: color-mix(in srgb, var(--bs-success) 12%, transparent); --bn-fill-warning: color-mix(in srgb, var(--bs-warning) 12%, transparent); --bn-fill-danger: color-mix(in srgb, var(--bs-danger) 12%, transparent); --bn-fill-info: color-mix(in srgb, var(--bs-info) 12%, transparent); --bn-edge-success: color-mix(in srgb, var(--bs-success) 35%, transparent); --bn-edge-warning: color-mix(in srgb, var(--bs-warning) 35%, transparent); --bn-edge-danger: color-mix(in srgb, var(--bs-danger) 35%, transparent); --bn-on-primary: #4338ca; --bn-on-success: #AEE362; --bn-on-warning: #FFCE14; --bn-on-danger: #FF5C56; --bn-on-info: #175cd3; /* The faintest wash there is: the drop target on a board, and a hovered band on the activity chart. Too weak to survive on a dark surface at this alpha, so the dark block raises it rather than each call site guessing. */ --bn-wash: color-mix(in srgb, var(--bs-primary) 3%, transparent); --bn-wash-strong: color-mix(in srgb, var(--bs-primary) 7%, transparent); /* ------------------------------------------------------------------------- Identity hues. Six of them, kept away from success/warning/danger because those carry meaning elsewhere. They tint an avatar (assigned deterministically from a name by fmt.tint(), so one person is one colour on every page) and they colour the activity-type mark on the timeline. THIS IS NOT A CHART PALETTE and is not held to one. Six hues inside a single lightness band cannot clear the categorical CVD floor — the light set does not either, and never has — which is legal here and would not be on a chart, because an avatar always carries the person's initials and a timeline mark always carries the type's own Lucide glyph — a handset, an envelope, a ticked calendar. Colour is the second encoding in both, which is what let the timeline drop the WORD "Call" beside its mark and still be readable to someone who cannot separate the three hues. The palette that IS held to the floor, and was measured against it, is `--bn-viz-*` below. The dark steps mirror the light set's own lightness spread rather than landing on one flat value, so the six stay as separable from each other in dark mode as they are in light. Every dark pairing measures at least 5.9:1 ink-on-tint, against 4.5:1 at the light set's tightest. */ --bn-hue-indigo: #4338ca; --bn-hue-emerald: #52aa17; --bn-hue-amber: #b45309; --bn-hue-fuchsia: #a21caf; --bn-hue-sky: #0369a1; --bn-hue-rose: #be123c; --bn-tint-indigo: #eef2ff; --bn-tint-emerald: #ecfdf5; --bn-tint-amber: #fef3c7; --bn-tint-fuchsia: #fae8ff; --bn-tint-sky: #e0f2fe; --bn-tint-rose: #ffe4e6; /* ------------------------------------------------------------------------- Data visualisation. THESE VALUES WERE VALIDATED, NOT CHOSEN. They are checked against #fff — the card surface charts actually sit on, not a generic light surface — for lightness band, chroma floor, contrast, and separation under simulated protanopia and deuteranopia. Changing a hex here without re-running that check is how a palette silently stops working for a red-green colourblind reader, which is 8% of men and is not something review catches by looking. They replaced a ramp that FAILED it: eight hues that were the status colours wearing different names — chart-3 was exactly $success, chart-4 $warning, chart-5 $danger — despite a comment claiming the opposite. Its first two slots measured ΔE 6.2 under deuteranopia (target 8) and 10.4 under normal vision (floor 15), so indigo and blue were a near-collision for everyone. It was never referenced by a stylesheet or a template, so nothing rendered wrong; it was a trap set for the first chart to use it. --- The ordinal ramp: one hue, light to dark, order in the colour --- For bands that HAVE an order — deal-size tiers — where a reader should see the sequence in the step, not just in the position. Adjacent steps hold ΔL >= 0.06 so they stay distinguishable, and the light end clears 3:1 on white, well over the 2:1 an ordinal ramp is held to. Six steps is the whole ramp: a seventh could not keep the gap without going black. */ --bn-viz-seq-1: #7b83ff; --bn-viz-seq-2: #676bf6; --bn-viz-seq-3: #5453da; --bn-viz-seq-4: #423cbd; --bn-viz-seq-5: #3224a1; --bn-viz-seq-6: #230286; /* The single-series hue, and the brand's own primary. Nominal categories — company names — take THIS for every bar rather than a step each: the bar length already encodes the value, and colouring by value would spend the identity channel restating it. */ --bn-viz-accent: #6366f1; /* The diverging pair, for the two charts with a real zero in the middle: won above the line and lost below it, signed above estimate and below it. Warm against cool, so the poles read as opposite — the midpoint is the neutral track below, never a third hue. Measured ΔE 28.8 under protanopia and 38.6 under normal vision, comfortably clear of both floors. */ --bn-viz-pos: #4f46e5; --bn-viz-neg: #f04438; /* Absence, not a series. The funnel draws the deals it cannot price in this grey beside the accent — the emphasis pattern, where one hue carries the data and grey carries what is missing. It fails the chroma floor on purpose: the floor exists to stop a hue that has gone grey from being asked to carry identity, and this one is meant to read as grey. It still clears 3:1 on white, and it is 20.8 from the accent, so the distinction itself is safe. */ --bn-viz-muted: #94949e; /* Chart chrome. Hairline and solid — never dashed, which reads as a projection or a threshold when it is only a grid. */ --bn-viz-grid: #e9e9eb; --bn-viz-axis: #d4d4d8; --bn-viz-track: #f4f4f5; } /* --------------------------------------------------------------------------- * Scrollbars * * ONE RULE FOR THE WHOLE APP, and it is deliberately the quietest thing here. * `scrollbar-width` and `scrollbar-color` are INHERITED properties, so * declaring them on :root reaches every scroll container in the project — the * page, the board, a board column, the nav, a table card, the search panel, a * combobox panel — without a universal selector and without one call site * having to opt in. The ::-webkit-* block underneath is the fallback for * engines that do not have the standard properties yet; where both are * understood the standard pair wins and the pseudo-elements are ignored, which * is why the two describe the same thing rather than different things. * * THE TRACK IS NOT PAINTED. A track is a permanent grey channel down the side * of whatever it belongs to — it is drawn whether or not you are scrolling and * regardless of how little there is to scroll, so on a board with seven columns * it is seven vertical rules that mean nothing. The thumb alone says "there is * more below", which is the only thing a scrollbar is for here. * * `scrollbar-gutter: stable` ON THE PAGE, and that is the reason this block is * not purely cosmetic. The document is what scrolls (the sidebar is sticky * inside it), so every navigation between a long page and a short one used to * add or remove the scrollbar and move the whole layout sideways by its width — * most visible switching a board between `?view=table` and back, where the * content jumps as the view swaps. Reserving the gutter permanently costs a few * pixels that were being fought over anyway and makes the shift impossible. It * fixes the same shift at the other end for free: `.bn-search-open` sets * `overflow: hidden` on to lock the page behind the search dialog, and an * element with `overflow: hidden` is still a scroll container, so the gutter is * held there too and summoning search no longer nudges the page. * ------------------------------------------------------------------------ */ :root { scrollbar-width: thin; scrollbar-color: var(--bn-scroll-thumb) transparent; } html { scrollbar-gutter: stable; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } /* The transparent border plus `background-clip: padding-box` is what makes the thumb read as a floating pill rather than as a bar filling the channel: the border is part of the thumb's box, so it reserves the inset without painting it. */ ::-webkit-scrollbar-thumb { background-color: var(--bn-scroll-thumb); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--bn-scroll-thumb-hover); } /* --- Fading a scrolling edge --------------------------------------------- * * A scroll container marked `data-bn-fade="y"` or `"x"` fades its content out * at whichever end it can still be scrolled toward, so a column of cards that * continues below the fold ends in a dissolve instead of in a card sliced * cleanly in half. A thin thumb says "there is more" only to somebody already * looking at the edge of the box; the fade says it in the middle of the content * being read. * * The fade is a MASK, not an overlaid gradient, which is what makes it work on * a board column: the column, the card and the page canvas are three different * tones, and an opaque gradient can only ever match one of them. A mask takes * the pixels out instead, so whatever is behind shows through and dark mode * needs no second copy. * * BOTH ENDS ARE SEPARATE, and each is zero until there is something to scroll * toward — `.bn-fade-start` and `.bn-fade-end` are written by * partials/scroll-fade.ejs from the container's own scroll position. Fading an * edge that is already at the end of its content would dim real content for no * reason, and fading a container that does not scroll at all would dim it * permanently. * * The gradient stops are custom properties rather than four separate * mask-image declarations so that a state change is one value, and at 0 the two * transparent stops collapse onto the black ones and the mask is a no-op. */ [data-bn-fade] { --bn-fade-a: 0px; --bn-fade-b: 0px; } [data-bn-fade].bn-fade-start { --bn-fade-a: var(--bn-fade); } [data-bn-fade].bn-fade-end { --bn-fade-b: var(--bn-fade); } [data-bn-fade="y"] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--bn-fade-a), #000 calc(100% - var(--bn-fade-b)), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 var(--bn-fade-a), #000 calc(100% - var(--bn-fade-b)), transparent 100%); } [data-bn-fade="x"] { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--bn-fade-a), #000 calc(100% - var(--bn-fade-b)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--bn-fade-a), #000 calc(100% - var(--bn-fade-b)), transparent 100%); } /* The board's wrapper carries BOTH the `scaleY(-1)` flip and this mask, and they do not interfere: the flip is vertical and the mask is horizontal, so `to right` still means right. A vertical fade on that element would have to be written upside down; there is no reason to want one, since the wrapper does not scroll on that axis. */ /* `line-height-base` is also rejected by Wappler. */ body { font-family: "Anthropic Sans Text", var(--bs-font-sans-serif); line-height: 1.55; background-color: var(--bn-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings are Anthropic Sans Display 600; the tracking is not something the Theme tab exposes and 600-weight Anthropic Sans Display at these sizes is noticeably loose without it. theme.json's own `headings-font-family` is left unset (see the Fonts block above) so `font-family` here is the only place the heading font is decided. */ h1, h2, h3, h4, h5, h6 { font-family: "Anthropic Sans Display", "Anthropic Sans Text", var(--bs-font-sans-serif); font-weight: 500; } h1, h2, h3, .bn-page-head h1 { letter-spacing: -0.01em; } /* --------------------------------------------------------------------------- * Icons * * Every icon in the app is a Lucide icon rendered by the local extension fork * (see views/partials/icons.ejs and CLAUDE.md → Icons). These classes are the * only place a size is decided, and each one applies to BOTH states of the * element: the placeholder before the library runs, and the * that replaces it. That is what keeps an icon appearing from shifting * anything — the box is already the right size while it is still empty. * * Sizes are not set as width/height ATTRIBUTES on purpose. Lucide writes its * own 24×24 pair onto every svg it makes, and a CSS declaration outranks a * presentation attribute, so the class always wins and there is exactly one * thing to read. * * `stroke-width` is a CSS property on SVG, so it overrides Lucide's stroke-width * attribute the same way. 2 is Lucide's default and is heavy below about 18px; * 1.75 is what makes a 14px icon sit next to 13px text without shouting. * ------------------------------------------------------------------------ */ .bn-i, .bn-i-xs, .bn-i-sm, .bn-i-md, .bn-i-lg, .bn-i-xl { display: inline-block; flex: 0 0 auto; vertical-align: -0.15em; stroke-width: 1.75; overflow: visible; } .bn-i-xs { width: 0.8125rem; height: 0.8125rem; } .bn-i-sm { width: 0.875rem; height: 0.875rem; } .bn-i { width: 1rem; height: 1rem; } .bn-i-md { width: 1.125rem; height: 1.125rem; } .bn-i-lg { width: 1.25rem; height: 1.25rem; } .bn-i-xl { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; } /* An icon in a tinted rounded square, as used by panel headings, empty states and modal titles. This is the single most reference-like element in the refresh: it is what turns a row of text labels into a scannable list. The five tones are a complete set on purpose, even though `success` has no call site yet — the same reasoning as the chart ramp at the top of this file. A semantic ramp with a hole in it is a trap: the next person needing a green one writes an inline style instead of finding out the class was simply never added. */ .bn-i-badge { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--bn-radius-sm); background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); } .bn-i-badge-lg { width: 2.75rem; height: 2.75rem; border-radius: var(--bn-radius); } .bn-i-badge-primary { background-color: var(--bn-fill-primary); color: var(--bn-on-primary); } .bn-i-badge-success { background-color: var(--bn-fill-success); color: var(--bn-on-success); } .bn-i-badge-warning { background-color: var(--bn-fill-warning); color: var(--bn-on-warning); } .bn-i-badge-danger { background-color: var(--bn-fill-danger); color: var(--bn-on-danger); } .bn-i-badge-info { background-color: var(--bn-fill-info); color: var(--bn-on-info); } /* --------------------------------------------------------------------------- * Component geometry the Theme tab does not expose * ------------------------------------------------------------------------ */ /* Buttons carry icons almost everywhere now, so the flex row and the gap belong on .btn itself rather than being re-declared per call site. inline-flex on a button also fixes the half-pixel baseline drift an inline svg used to cause. */ .btn { --bs-btn-padding-x: 0.9375rem; --bs-btn-padding-y: 0.5rem; --bs-btn-font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; white-space: nowrap; } .btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.3125rem; gap: 0.375rem; } .btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: 0.6875rem; --bs-btn-font-size: 0.9375rem; } /* A link-button in a row of them ("Edit", "Retire") should not inherit the flex gap as extra width when it has no icon. */ .btn-link { gap: 0.3125rem; } .card { --bs-card-spacer-x: var(--bn-pad); --bs-card-spacer-y: var(--bn-pad); --bs-card-cap-padding-y: 1.125rem; --bs-card-cap-bg: transparent; --bs-card-border-radius: var(--bn-radius-card); --bs-card-inner-border-radius: calc(var(--bn-radius-card) - 1px); } /* Every text input, textarea and with no size class, and an svg with no width/height falls back to the 300×150 replaced-element default, which is a spectacular way to break a filter bar. */ .bn-search > i[data-lucide], .bn-search > svg { position: absolute; left: 0.8125rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; stroke-width: 1.75; color: var(--bs-tertiary-color); pointer-events: none; } .bn-search input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.375rem; border: 1px solid transparent; border-radius: var(--bn-radius-sm); background-color: var(--bs-secondary-bg); color: var(--bs-body-color); } .bn-search input::placeholder { color: var(--bs-tertiary-color); } .bn-search input:disabled { cursor: not-allowed; color: var(--bs-tertiary-color); } .bn-search input:focus { outline: 0; background-color: var(--bn-surface); border-color: var(--bs-border-color); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .bn-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; } /* A BARE ICON BUTTON — the topbar's whole vocabulary now, and the one shape three different controls share: the sidebar collapse, global search and the colour mode. * * No fill and no outline at rest, so an empty bar reads as empty; a pointer * gets --bn-nav-hover and primary ink, which is the same answer a nav link and * a user button give, and one step quieter than a .btn would be. That * consistency is the point of it being a class rather than three variants: the * bar holds one filled button, `New`, and everything else in it is an icon * that lights up when pointed at. * * 2.25rem square, so the 1rem glyph inside has a real hit area — the same * reasoning as the reorder chevrons in Settings. The gap between them is * tighter than the old 0.75rem because these read as one cluster of chrome * rather than as three separate controls. */ .bn-icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; padding: 0; border: 1px solid transparent; border-radius: var(--bn-radius-sm); background-color: transparent; color: var(--bs-secondary-color); cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .bn-icon-btn:hover { background-color: var(--bn-nav-hover); color: var(--bn-on-primary); } .bn-icon-btn:focus-visible { outline: 0; border-color: var(--bs-primary); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } /* Each icon is wrapped in a span rather than being hidden directly, for the reason written up at the theme switch: Lucide REPLACES the with an it builds itself, so a rule written against the placeholder stops matching the moment the library runs. The span is not touched by any of that. */ .bn-icon-btn > span { display: grid; } /* Which glyph the collapse button shows. Scoped through .bn-icon-btn rather than written as a bare attribute selector, because `.bn-icon-btn > span` above outranks a lone `[data-bn-nav-icon]` and would leave both icons on screen — which is exactly what it did. Same shape and same reason as the theme switch's pair further down. */ .bn-icon-btn [data-bn-nav-icon="collapsed"] { display: none; } :root[data-bn-nav="collapsed"] .bn-icon-btn [data-bn-nav-icon="expanded"] { display: none; } :root[data-bn-nav="collapsed"] .bn-icon-btn [data-bn-nav-icon="collapsed"] { display: grid; } /* --------------------------------------------------------------------------- * Avatars * ------------------------------------------------------------------------ */ .bn-avatar { width: 32px; height: 32px; border-radius: 5px; background-color: var(--bs-primary); /* One of the two literal #fff values in this file, and it is deliberate: this is ink ON a brand fill, not a surface. `--bs-primary` is a theme colour and does not move with the colour mode, so neither should the initials on top of it. The other is the date picker's selected day, for the same reason. */ color: #fff; display: inline-grid; place-items: center; font-size: 0.75rem; font-weight: 600; line-height: 1; flex: 0 0 auto; overflow: hidden; user-select: none; position: relative; } .bn-avatar img { position: absolute; inset: auto; border-radius: 3px; width: 90%; height: 90%; object-fit: cover; } /* A company's favicon, laid OVER its initials rather than instead of them — the image is the only child that is positioned, so `onerror="this.remove()"` uncovers the initials with no second code path and no layout shift. Which is also why this must stay absolutely positioned: as a flow child it would push the initials out of the grid cell instead of covering them. `contain`, not `cover`: a favicon is a whole mark, and cropping it to fill the box cuts the corners off a square logo. THE MARK IS THE AVATAR — there is no tile under it. It used to sit on a white circle with a hairline ring and 8% padding, which meant a logo drawn to the edge of its own canvas met a round mask and lost its corners: clipped on every company whose favicon is a filled square, which is most of them. So an avatar that HAS an icon drops the fill, the ring, the padding and the radius and simply shows the mark. An avatar without one is untouched — the tinted circle with initials is still the right answer when there is nothing to show. The switch is `:has()` rather than a class the server writes, and that is the whole reason it stays honest: `onerror="this.remove()"` takes the image out of the DOM, the selector stops matching in the same breath, and the circle comes back with the initials. A class on the wrapper would have to be removed by the same handler — a second code path for the failure case, which is exactly what the absolutely-positioned image was designed to avoid. */ .bn-avatar-favicon { object-fit: contain; } .bn-avatar:has(.bn-avatar-favicon) { background-color: var(--bs-tertiary-bg); border-radius: 4px; /* The initials are still underneath, and a favicon that is not square lets them show through the letterbox. Making them transparent hides them without removing them, so the `onerror` path still has something to uncover. */ color: transparent; } .bn-avatar-sm { width: 24px; height: 24px; font-size: 0.625rem; } /* For a dense list of them — a filter menu's forty companies, where 24px rows turn a panel into a scroll. `bn-avatar-sm` is still the list-page size. */ .bn-avatar-xs { width: 18px; height: 18px; font-size: 0.5rem; } .bn-avatar-lg { width: 44px; height: 44px; font-size: 0.9375rem; } .bn-avatar-muted { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); } /* Overlapping stack with a +N counter, used on kanban cards. */ .bn-avatar-stack { display: inline-flex; align-items: center; } .bn-avatar-stack > * { box-shadow: 0 0 0 2px var(--bn-surface); } .bn-avatar-stack > * + * { margin-left: -0.5rem; } /* --------------------------------------------------------------------------- * User menu * ------------------------------------------------------------------------ */ /* The user block at the foot of the sidebar. It is a full-width row rather than the pill it was in the topbar: down here it has a panel to fill, and a pill floating in a 264px-wide footer looks like it came loose. */ /* Same as .bn-nav-link's height and for the same reason: a name over an email address is 2.5px taller than the avatar beside it, so this button is one height with the words and another without, and the fold has to walk between them. 3.25rem is the first step of the 0.25rem rhythm that clears the two-line block. */ .bn-user-btn { display: flex; align-items: center; height: 3.25rem; gap: 0.625rem; width: 100%; padding: 0.5rem; border: 1px solid transparent; border-radius: var(--bn-radius-sm); background: none; color: var(--bs-body-color); text-align: left; } .bn-user-btn:hover, .bn-user-btn[aria-expanded="true"] { background-color: var(--bn-nav-hover); } .bn-user-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .bn-user-name { font-weight: 500; line-height: 1.3; color: var(--bs-emphasis-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-user-role { font-size: 0.6875rem; color: var(--bs-tertiary-color); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-user-caret { color: var(--bs-tertiary-color); } /* Between .bn-avatar-sm and the default, because it stands beside two lines of text rather than one. Not a fourth avatar size — nothing else needs it. */ .bn-user-btn .bn-avatar { width: 1.875rem; height: 1.875rem; font-size: 0.6875rem; } .bn-user-menu { width: calc(var(--bn-sidebar-w) - 1.5rem); margin-bottom: 0.375rem; } .bn-user-menu-head { padding: 0.5rem 0.75rem 0.625rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--bs-border-color); } .bn-user-menu-name { font-weight: 500; color: var(--bs-emphasis-color); } .bn-user-menu-mail { font-size: 0.75rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-menu { --bs-dropdown-border-color: var(--bs-border-color); --bs-dropdown-border-radius: var(--bn-radius); --bs-dropdown-padding-y: 0.375rem; --bs-dropdown-padding-x: 0.375rem; --bs-dropdown-item-padding-x: 0.625rem; --bs-dropdown-item-padding-y: 0.4375rem; --bs-dropdown-link-active-bg: var(--bs-tertiary-bg); --bs-dropdown-link-active-color: var(--bs-emphasis-color); box-shadow: var(--bn-lift-lg); } /* Every item in every menu in the app carries an icon now, so the row is a flex line here rather than at each of the call sites. */ .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 0.5rem; border-radius: var(--bn-radius-sm); } .dropdown-menu .dropdown-item .bn-i-sm, .dropdown-menu .dropdown-item .bn-i { color: var(--bs-tertiary-color); } .dropdown-menu .dropdown-item:hover .bn-i-sm, .dropdown-menu .dropdown-item:hover .bn-i { color: var(--bs-secondary-color); } .dropdown-menu .dropdown-item.text-danger .bn-i-sm { color: inherit; } .dropdown-divider { margin: 0.375rem 0.25rem; } /* --------------------------------------------------------------------------- * Segmented control — board / table toggle * ------------------------------------------------------------------------ */ .bn-segmented { display: inline-flex; gap: 0.125rem; padding: 0.25rem; border-radius: var(--bn-radius); background-color: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); } .bn-segmented button, .bn-segmented a { display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.75rem; border: 1px solid transparent; border-radius: var(--bn-radius-sm); background: none; color: var(--bs-secondary-color); font-weight: 500; text-decoration: none; white-space: nowrap; } .bn-segmented button:hover, .bn-segmented a:hover { color: var(--bs-emphasis-color); } .bn-segmented .active { background-color: var(--bn-surface); border-color: var(--bs-border-color); color: var(--bs-emphasis-color); } .bn-segmented .bn-i-sm, .bn-segmented .bn-i-xs { color: var(--bs-tertiary-color); } .bn-segmented .active .bn-i-sm, .bn-segmented .active .bn-i-xs { color: var(--bs-primary); } /* --------------------------------------------------------------------------- * Kanban * ------------------------------------------------------------------------ */ /* THE BOARD'S HORIZONTAL SCROLLBAR IS ABOVE THE CARDS, NOT UNDER THEM. * * There is no property that says which edge a scrollbar is drawn on — it is * always the end edge of the scroll container's own axes. So the scroller is * flipped on the Y axis and its single child is flipped back, which leaves the * layout, the text and the pointer coordinates exactly where they were and * moves only the one thing that is painted in the container's own coordinate * space: the scrollbar. Two declarations, no JavaScript, and nothing to keep in * sync with a proxy element. * * It is worth the trick because of where the board sits. Seven columns run to * the bottom of the viewport and past it, so a scrollbar on the board's bottom * edge is off screen exactly when it has most to say — you cannot see that * there are more stages to the right without first scrolling the page down past * every card. Above the columns it is next to their heads, which is where the * question "how many stages are there" is actually asked. * * `.bn-board` keeps its name and its flex row, so every selector, every script * and every assertion that reaches for it is untouched; the wrapper is new and * owns only the scrolling. * * WHAT THE FLIP DOES NOT BREAK, checked rather than assumed: a transform * changes paint, not layout, so the columns' own heights, their max-height and * their internal scrollbars are unaffected — a column's scrollbar belongs to * `.bn-board-cards`, which is inside the second flip and therefore upright. HTML * drag-and-drop hit-testing goes through the same transform as the pointer, so * a card still drops where it looks like it drops. Nothing on the board is * `position: sticky`, which is the one thing a transformed ancestor would * genuinely break. */ .bn-board-scroll { overflow-x: auto; transform: scaleY(-1); /* Reads as the gap ABOVE the columns once flipped: scrollbar, then this, then the column heads. */ padding-bottom: 0.625rem; } .bn-board { display: flex; gap: 1rem; align-items: flex-start; transform: scaleY(-1); } /* Wider columns with a real header. 300px was enough for a title and a value and nothing else, which is why every card's footer wrapped onto three lines. The height budget is `--bn-board-col-max` — see the token for why it is deliberately taller than the space visible under the board. */ .bn-board-col { flex: 0 0 320px; display: flex; flex-direction: column; max-height: var(--bn-board-col-max); border-radius: var(--bn-radius); background-color: var(--bn-surface); } /* The column head reads as a header rather than as the first row of the list: its own background, its own bottom rule, and the stage colour, name, count and total on one line. The reference's columns are labelled exactly this way. */ .bn-board-col-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem 0 0.875rem; flex: 0 0 auto; border-radius: calc(var(--bn-radius) - 1px) calc(var(--bn-radius) - 1px) 0 0; } .bn-board-col-title { font-weight: 600; color: var(--bs-emphasis-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bn-board-col-total { margin-left: auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); white-space: nowrap; } /* Small colour chip carrying the stage colour from deal_stages.color. */ /* INLINE-BLOCK, not inline. A width and a height do nothing to an inline non-replaced element, so on the boards this only ever worked because its parent is a flex container and a flex item is blockified — and in a table cell or a
, where there is no flex parent, the chip silently collapsed to nothing. Every list page's Stage column was missing its colour. */ .bn-stage-dot { display: inline-block; vertical-align: 0.05em; width: 8px; height: 8px; border-radius: 999px; background-color: var(--bs-secondary-color); flex: 0 0 auto; } .bn-board-cards { flex: 1 1 auto; overflow-y: auto; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.625rem; min-height: 4.5rem; } /* An empty column says so. A 4.5rem blank was indistinguishable from a column still loading, and on a filtered board that is the difference between "no deals here" and "the filter matched nothing". IT IS RENDERED ON EVERY COLUMN AND HIDDEN BY `:has()`, rather than rendered only on the columns that start empty. Dragging is what makes a column empty or full, and the drag handler moves one node between two parents — it does not re-render either column, so a server-decided empty state was correct until the first drop and then wrong until a refresh: drag the last card out of a stage and it stayed blank with nothing saying so, drop a card into an empty one and "Nothing at this stage" sat above it. The markup is the switch, the same call `fmt.avatar`'s favicon makes. The alternative is the drag handler creating and destroying this element, which means building markup containing a Lucide icon in JavaScript — the runtime icon failure CLAUDE.md warns about — and doing it twice, once per board, to keep the two pages' delegated handlers apart. A selector costs neither. */ .bn-board-cards:has(.bn-card) .bn-board-empty { display: none; } .bn-board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 1.25rem 0.75rem; border: 1px dashed var(--bs-border-color); border-radius: var(--bn-radius-sm); color: var(--bs-tertiary-color); font-size: 0.75rem; text-align: center; margin: 0; } /* A board card sits INSIDE a column that is the same --bn-surface tone, so without its own edge a card is visually indistinguishable from the column it is in — spacing is the only thing that reads as "a card" at all. The border is what the record-page panel version of .bn-card was already missing too (compare .bn-board-col, .bn-filterbar and .bn-tile, which all pair a surface background with a border rather than relying on the background step alone). */ .bn-card { display: block; padding: 0.875rem; border-radius: var(--bn-radius); background-color: var(--bn-surface); color: inherit; text-decoration: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .bn-card:hover { color: inherit; } .bn-card-title { font-weight: 600; color: var(--bs-emphasis-color); margin-bottom: 0.125rem; } .bn-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--bs-secondary-color); } .bn-card-value { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--bs-emphasis-color); font-variant-numeric: tabular-nums; } /* Drop target while a card is being dragged over a column. */ .bn-board-cards.bn-drop-active { outline: 2px dashed var(--bs-primary); outline-offset: -4px; border-radius: var(--bn-radius-sm); background-color: var(--bn-wash); } .bn-card.bn-dragging { opacity: 0.5; } /* --------------------------------------------------------------------------- * Tables * * One block, every table in the app: the five list pages and the eight smaller * ones on the record pages. They are the last surface that still read as * Bootstrap — a bordered card, a filled grey header stripe, 14px rows on * 0.875rem/1.25rem padding, a neutral hover and a primary link in every cell. * The rest of the app moved on (the queue rows, the filter bar, the dashboard * tiles); this is the same language applied here. * * `overflow-x: auto`, NOT `overflow: hidden`. The hidden was there to clip the * table's square corners to the card's round ones, which a scroll container * does just as well — and hidden meant a table wider than its card was CUT OFF * rather than scrollable. A data table should scroll; it should never lose a * column. Setting overflow-x also makes overflow-y `auto`, which is harmless: * these cards are as tall as their content and never scroll vertically. * * THE CARD HAS NO BORDER. Its fill is --bn-surface against a grey canvas, which * is the same thing that makes a queue row read as its own block, and the same * reason My day's task list dropped the card it used to sit in. An outline * around a shape that is already a different tone from the page is ink spent * saying what the tone said. * ------------------------------------------------------------------------ */ .bn-table-card { background-color: var(--bn-surface); border-radius: var(--bn-radius-card); overflow-x: auto; } .bn-table-card > .table { /* The cells paint their own background (the hover rule below is a plain background-color, not .table-hover's inset box-shadow), so the table's own fill has to be out of the way or it would sit over the card's. */ --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); margin-bottom: 0; font-size: 0.8125rem; } /* Sentence case, and no fill. An uppercase tracked-out header row was already gone; what is gone now is the grey stripe underneath it, which drew a band across the top of every list page to say something the weight, the tone and the rule under it were already saying three times over. */ .bn-table-card > .table > thead th { background-color: transparent; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.75rem; font-weight: 500; white-space: nowrap; } /* THE HEADER ROW CARRIES NO ICONS, on purpose. The icons in a table belong on the DATA, because that is what the eye scans down. Seven of them across the header instead would label columns that their own words already label, and put the densest row on the page at the top of every list. The caret a sortable header carries is not an exception: it is the control's own state, not a label for the column. */ /* COMPACT. 0.875rem/1.25rem on a two-line row made a company list of fifteen rows a full screen and a half; this is the queue's density, which is the thing these pages are read beside. The first and last cells keep a wider gutter so the content is not flush against the card's rounded corner. */ .bn-table-card > .table > :not(caption) > * > * { padding: 0.5rem 0.75rem; } .bn-table-card > .table > :not(caption) > * > *:first-child { padding-left: 1rem; } .bn-table-card > .table > :not(caption) > * > *:last-child { padding-right: 1rem; } /* A row rule at full strength on a 0.5rem row is a grid; at half it is a guide. The last one goes entirely — the card's own edge is the end of the table. */ .bn-table-card > .table > tbody > tr > * { border-bottom-color: color-mix(in srgb, var(--bs-border-color) 55%, transparent); } .bn-table-card > .table > tbody > tr:last-child > * { border-bottom-width: 0; } /* ROWS ARE ALMOST ALWAYS LINKS, and the hover is the same answer the dashboard tiles give: --bn-surface-hover, primary mixed into the surface itself, rather than the flat --bs-secondary-bg it was. Three surfaces in the app used to answer a pointer with a neutral grey — the nav, the tiles and this — and this is the last of them. Transitioned, which is cheap between two flat opaque colours and would not be against a transparent wash. */ .bn-table-card > .table > tbody > tr > * { transition: background-color 140ms ease; } .bn-table-card > .table > tbody > tr:hover > * { background-color: var(--bn-surface-hover); } /* A LINK IN A CELL IS NOT A LINK-COLOURED THING. A domain, an email address, a phone number and a company name were all rendering in --bs-primary, so a companies list was a column of indigo down the middle of the page and the one thing that genuinely wanted the eye — the row title — had no way to say so. Body ink, and the underline on hover is what says it is a link. `:not(.btn)` keeps the retainer row's own controls out of it. */ .bn-table-card a:not(.btn) { color: inherit; text-decoration: none; } /* `.bn-row-link` is excluded because it is a whole two-line cell — an avatar, a title and a sub-line — and text-decoration set on it would run under every word in all three. It has its own rule, further down, that underlines the title alone. (The avatar itself is safe either way: it is `inline-grid`, an atomic inline-level box, which a decoration does not draw across.) */ .bn-table-card a:not(.btn):not(.bn-row-link):hover { color: var(--bs-emphasis-color); text-decoration: underline; text-underline-offset: 0.15em; } /* --- A sortable header --------------------------------------------------- */ /* PRESSING THE HEADER IS THE SORT, and it is an for the same reason every option in the filter bar is one: choosing an order IS the navigation, so the table cannot reach an order the URL disagrees with, there is no client-side state to hold, and the whole thing survives a dmxRouting view swap with nothing to rebind. See views/partials/table-head.ejs. The negative margin lets the hit area have padding without the label moving off the column's own left edge. */ .bn-table-card .bn-th-sort { display: inline-flex; align-items: center; gap: 0.25rem; margin: -0.1875rem -0.375rem; padding: 0.1875rem 0.375rem; border-radius: var(--bn-radius-sm); color: inherit; text-decoration: none; transition: color 140ms ease, background-color 140ms ease; } .bn-table-card .bn-th-sort:hover { background-color: var(--bn-canvas); color: var(--bs-emphasis-color); text-decoration: none; } /* The caret is invisible until the column is either pointed at or in use, so a six-column header is six words rather than six words and six arrows. On hover it shows the direction the press would GIVE, which is the only useful thing it can say before it is the sorted column. */ .bn-th-caret { opacity: 0; transition: opacity 140ms ease; } .bn-table-card .bn-th-sort:hover .bn-th-caret { opacity: 0.55; } .bn-table-card > .table > thead th[aria-sort] { color: var(--bs-emphasis-color); font-weight: 600; } .bn-table-card > .table > thead th[aria-sort] .bn-th-caret { opacity: 1; } .bn-num { font-variant-numeric: tabular-nums; text-align: right; } /* --------------------------------------------------------------------------- * Status pills and empty states * ------------------------------------------------------------------------ */ .bn-pill { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.125rem 0.4375rem; border-radius: var(--bn-radius-pill); background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: 0.75rem; font-weight: 500; line-height: 1.35; white-space: nowrap; } /* A pill's icon is the status mark — a dot, a check, a warning triangle — and it inherits the pill's tone rather than being tinted separately. */ .bn-pill .bn-i-xs { stroke-width: 2; } .bn-pill-success { background-color: var(--bn-fill-success); color: var(--bn-on-success); } .bn-pill-warning { background-color: var(--bn-fill-warning); color: var(--bn-on-warning); } .bn-pill-danger { background-color: var(--bn-fill-danger); color: var(--bn-on-danger); } /* A pill with its label dropped — My day's priority column, where the row has no room for the word. Equal padding turns the oval into a small square, so a bare glyph reads as a mark rather than a badge that lost its text. */ .bn-pill-icon { padding: 0.25rem; line-height: 1; } /* An empty state is now an icon, a heading and a sentence, centred in a column narrow enough to read. It used to be two lines of centred text in a 3rem-tall band, which read as a rendering failure as often as it read as "nothing here" — and there are a lot of them: every list, every tab, every settings panel. */ .bn-empty { display: flex; flex-direction: column; align-items: center; padding: 3.5rem 1.5rem; text-align: center; color: var(--bs-secondary-color); } .bn-empty > .bn-i-badge, .bn-empty > .bn-i-badge-lg { margin-bottom: 1rem; } .bn-empty h2 { font-size: 1rem; color: var(--bs-emphasis-color); margin-bottom: 0.375rem; } .bn-empty p { max-width: 46ch; margin-left: auto; margin-right: auto; font-size: 0.8125rem; } /* --------------------------------------------------------------------------- * Auth layout * ------------------------------------------------------------------------ */ .bn-auth { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background-color: var(--bn-canvas); } .bn-auth-card { width: 100%; max-width: 400px; padding: 2.5rem; background-color: var(--bn-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bn-radius-card); box-shadow: var(--bn-lift-lg); } .bn-auth-card h1 { font-size: 1.375rem; margin-bottom: 0.375rem; } /* The brand mark above the title, so the sign-in card is recognisably the same product as the shell behind it. */ .bn-auth-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.25rem; border-radius: var(--bn-radius); background-color: var(--bn-mark-bg); color: var(--bn-mark-fg); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; } /* --------------------------------------------------------------------------- * Records — Phase 2 * * Everything below belongs to the companies and contacts pages and the four * partials they share (record-header, activity-timeline, task-list, file-list). * Deals and projects reuse all of it in Phases 3 and 4, so it is written * against the partials rather than against either page. * ------------------------------------------------------------------------ */ /* Avatar tints. Six hues assigned deterministically from a name by fmt.tint(), so the same person is the same colour on every page. Kept away from success/warning/danger, which carry meaning elsewhere. */ .bn-tint-0 { background-color: var(--bn-tint-indigo); color: var(--bn-hue-indigo); } .bn-tint-1 { background-color: var(--bn-tint-emerald); color: var(--bn-hue-emerald); } .bn-tint-2 { background-color: var(--bn-tint-amber); color: var(--bn-hue-amber); } .bn-tint-3 { background-color: var(--bn-tint-fuchsia); color: var(--bn-hue-fuchsia); } .bn-tint-4 { background-color: var(--bn-tint-sky); color: var(--bn-hue-sky); } .bn-tint-5 { background-color: var(--bn-tint-rose); color: var(--bn-hue-rose); } /* Kept as an alias for the icon size classes above — .bn-inline-icon predates them and is still the name a dozen call sites use for "an icon on this line of text". New markup should reach for .bn-i-sm directly. */ .bn-inline-icon { display: inline-block; width: 0.875rem; height: 0.875rem; vertical-align: -0.15em; stroke-width: 1.75; flex: 0 0 auto; } /* --- Filter bar ---------------------------------------------------------- * * Emitted by views/partials/filter-bar.ejs — one component on six list pages. * The markup notes explain what it replaced and why; this is what the shapes * are for. * * The bar is a surface rather than a row of controls floating on the canvas: * on a list page it is the second thing you look at, and with no edges at all * a select and the table's first column used to line up by accident. * * EVERY CONTROL IN IT IS 2.125rem TALL. Trigger, segmented group, search * button and reset link share one height, so the row has a single baseline no * matter which mix of controls a page asks for — and the bar keeps its own * height when search expands, which is the one animation here that would * otherwise move the whole table under it. * ------------------------------------------------------------------------ */ .bn-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; margin-bottom: var(--bn-stack-sm); background-color: var(--bn-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bn-radius); } /* One height, one radius, one hover for everything that sits in the bar. */ .bn-filterbar .bn-fb-trigger, .bn-filterbar .bn-fb-seg, .bn-filterbar .bn-fb-search, .bn-filterbar .bn-fb-reset { height: 2.125rem; border-radius: var(--bn-radius-sm); } /* --- Search: a button that becomes a field ------------------------------- * * Search is the rarest control on these pages and had the widest seat. It is * an icon button that grows into a field, and it renders ALREADY OPEN when * there is a query in the URL — the one case where it is carrying information * and hiding it would leave a short list with no visible reason. * * The transition is on `width`, which is normally the wrong thing to animate; * it is right here because the element is a fixed-width flex item either way, * so nothing reflows except this one box and its neighbours slide. `max-width` * would need a magic number and would ease wrongly at both ends. */ .bn-fb-search { position: relative; display: flex; align-items: center; width: 2.125rem; background-color: transparent; border: 1px solid transparent; transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease, border-color 160ms ease; } .bn-fb-search.is-open { width: min(22rem, 100%); flex: 0 1 22rem; background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); } .bn-fb-search:focus-within { border-color: var(--bs-border-color); box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); } .bn-fb-search-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: var(--bn-radius-sm); background-color: transparent; color: var(--bs-secondary-color); transition: background-color 160ms ease, color 160ms ease; } .bn-fb-search-btn:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } /* Once the field is open the magnifier stops being a button to the eye and becomes the field's own affordance — same glyph, no seat of its own. */ .bn-fb-search.is-open .bn-fb-search-btn { background-color: transparent; color: var(--bs-tertiary-color); } .bn-fb-search-input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 0 0.25rem; border: 0; background: none; color: var(--bs-body-color); opacity: 0; transition: opacity 140ms ease; } .bn-fb-search.is-open .bn-fb-search-input { opacity: 1; transition: opacity 180ms ease 80ms; } .bn-fb-search-input:focus { outline: 0; } .bn-fb-search-input::placeholder { color: var(--bs-tertiary-color); } /* Chrome's own clear affordance is a grey glyph that ignores the theme and, more to the point, clears the FIELD rather than the filter — the list would still be narrowed. The link beside it clears both. */ .bn-fb-search-input::-webkit-search-cancel-button { display: none; } .bn-fb-search-clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-right: 0.25rem; border-radius: 50%; color: var(--bs-tertiary-color); text-decoration: none; } .bn-fb-search-clear:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); } /* --- Menu ---------------------------------------------------------------- * * A
and a panel of links, which is what makes a filter apply on * click with no script: the option IS the navigation. It also means the panel * survives a dmxRouting view swap with nothing to rebind, the same reason * fmt.fields' empty-field disclosure is a
. * * The open animation is a keyframe, not a transition. A
goes from * `display: none` to laid out in one frame, and there is no interpolable * "from" for a transition to start at. */ .bn-fb-menu { position: relative; } .bn-fb-menu > summary { list-style: none; cursor: pointer; } .bn-fb-menu > summary::-webkit-details-marker { display: none; } .bn-fb-menu > summary::marker { content: ""; } .bn-fb-trigger { display: inline-flex; align-items: center; gap: 0.4375rem; max-width: 15rem; padding: 0 0.625rem; border: 1px solid var(--bs-border-color); background-color: var(--bn-surface); color: var(--bs-body-color); font-size: 0.875rem; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .bn-fb-trigger:hover { border-color: var(--bn-border-hover); background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); } .bn-fb-trigger > .bn-i-sm { color: var(--bs-tertiary-color); } /* The quiet half of "Sort Last activity". Without it the trigger reads as a value with no subject, which is fine for "Any status" and useless for a sort key that happens to be called Name. */ .bn-fb-key { color: var(--bs-tertiary-color); } .bn-fb-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bn-fb-caret { margin-left: auto; color: var(--bs-tertiary-color); transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); } .bn-fb-menu[open] > summary > .bn-fb-caret { transform: rotate(180deg); } .bn-fb-menu[open] > .bn-fb-trigger, .bn-fb-menu[open] > summary.bn-fb-trigger { border-color: var(--bn-border-hover); background-color: var(--bs-secondary-bg); color: var(--bs-emphasis-color); } /* A filter that is DOING something says so from across the page — the whole reason the bar can drop the Apply button and the row of six identical grey selects it used to be. */ .bn-fb-menu.is-on > .bn-fb-trigger { border-color: color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color)); background-color: color-mix(in srgb, var(--bs-primary) 8%, var(--bn-surface)); color: var(--bs-emphasis-color); font-weight: 500; } .bn-fb-menu.is-on > .bn-fb-trigger > .bn-i-sm { color: var(--bs-primary); } /* Above the sticky topbar (1020) and below Bootstrap's modal backdrop (1040), because the filter bar sits close enough to the top of a long list that a few lines of scroll put an open panel behind the chrome. */ .bn-fb-panel { position: absolute; z-index: 1030; top: calc(100% + 0.375rem); left: 0; min-width: 100%; max-width: 20rem; width: max-content; padding: 0.3125rem; background-color: var(--bn-surface); border: 1px solid var(--bs-border-color); border-radius: var(--bn-radius); box-shadow: var(--bn-lift-lg); animation: bn-fb-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* A panel opening near the right edge of the content area would otherwise be clipped by the viewport; the last two controls in a bar are the sort menu and the reset, and the sort menu is the one that reaches furthest. */ .bn-fb-menu:last-of-type .bn-fb-panel { left: auto; right: 0; } @keyframes bn-fb-in { from { opacity: 0; transform: translateY(-0.375rem) scale(0.98); } to { opacity: 1; transform: none; } } .bn-fb-opts { display: flex; flex-direction: column; max-height: 17rem; overflow-y: auto; } /* Reused verbatim by the form combobox below (.bn-sel-menu) for its panel and options — same markup classes, not a duplicate ruleset. Its option is an here and a