/* ========================================================================== Floboard — a project tracker you can stand up and present from. Three type roles carry the whole idea: mono for machine facts (dates, ids, counts), sans for interface, serif for the human words you read aloud. Amber appears in exactly one situation: "now", and the line where the last standup ended. ========================================================================== */ /* * The dark palette, and the default. * * `.deck` is in the selector rather than inheriting, and that is the whole * mechanism that keeps the standup deck dark in a light Floboard: a custom * property declared on the element itself beats one inherited from , * whatever the selector on looks like. The deck is a surface you put * on a wall in a dim room, and the amber is only legible against dark, so it * does not follow the app. */ :root, .deck { --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Avenir Next", Avenir, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --ink-900: #0f1420; --ink-850: #121927; --ink-800: #151d2b; --ink-700: #1b2434; --ink-600: #222d40; --ink-500: #2b3850; --rule: #263149; --rule-soft: #1e2739; --rule-strong: #3a4761; --text: #e7eaf1; --text-dim: #94a1b9; --text-faint: #64728d; --signal: #ffb020; --signal-dim: #7a5510; /* * Amber does two different jobs, and only one of them survives a white * background. As a fill — the primary button, the selected tool — it is the * brand and stays #ffb020 in both themes, with dark ink on it. As small * text it has to darken on light, or it is unreadable. So `--signal` is the * one that moves and `--signal-fill` is the one that does not. */ --signal-fill: #ffb020; --t-update: #6aa9ff; --t-client: #ff8f6b; --t-decision: #b79bff; --t-blocker: #ff6b6b; --t-risk: #ffc861; --t-demo: #4fd1c5; --t-note: #94a3b8; --t-activity: #5d6b85; --ok: #4ade80; --warn: #ffc861; --danger: #ff6b6b; /* * Colours that sit *on top of* another surface rather than replacing it — * a hover lift, a backdrop, a tint that says "selected". They were written * inline as `rgba(255,255,255,.03)` and friends, which reads as white only * because the surface under it is dark. Naming them is what lets the value * change with the surface instead of assuming one. */ --wash: rgba(255, 255, 255, .03); --backdrop: rgba(6, 9, 15, .7); --veil: rgba(7, 10, 17, .78); --panel-veil: rgba(15, 20, 32, .8); --scroll-thumb: #26314a; --scroll-thumb-hover: #33415f; --canvas-dot: #26314a; --shadow-lip: rgba(0, 0, 0, .25); /* Body copy, a shade off --text so a long note reads softer than a label. */ --text-prose: #d6dbe6; /* An accent at tint weight: same hue, light enough to sit under text. */ --signal-wash: rgba(255, 176, 32, .06); --signal-wash-strong: rgba(255, 176, 32, .16); --signal-ring: rgba(255, 176, 32, .16); --signal-bright: #ffc247; --ok-wash: rgba(74, 222, 128, .05); --warn-wash: rgba(255, 200, 97, .07); --warn-text: #ffe2ac; --danger-wash: rgba(255, 107, 107, .08); --danger-wash-strong: rgba(255, 107, 107, .16); --danger-solid: #3a1c22; --danger-text: #ffb4b4; --t-update-edge: #24425f; /* * Ink for text that sits on a filled accent. These do not move between * themes: an amber button is amber in both, so what reads on it is the same * either way. They are named rather than left inline so that the light * palette below is obviously complete — nothing missing, just nothing to say. */ --on-signal: #241701; --on-color: #0f1420; --on-note: #1a1f2b; /* The exception: a type chip is filled with --t-*, and those *do* darken on light, so what reads on them flips from dark ink to white. */ --on-type: #0f1420; /* Dark mode uses a stored colour exactly as it was chosen. See .status-pill. */ --pill-ink: 0%; --r1: 3px; --r2: 6px; --r3: 10px; --r4: 16px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 18px 50px rgba(0,0,0,.55); --topbar-h: 52px; --tabs-h: 42px; /* Stacking order, low to high: menus sit over content, the deck and the walkthrough cover the app, a dialog covers those, toasts cover everything. */ --z-menu: 60; --z-deck: 150; --z-tour: 180; --z-dialog: 300; --z-picker: 320; --z-toast: 400; color-scheme: dark; } /* * The rule above gives .deck the dark *tokens*, which is not by itself enough. * Custom properties inherit unresolved, so anything inside the deck that says * `var(--text)` gets the dark value — but `color` inherits already computed, * and body computed it from whichever theme the app is in. In a light * Floboard the deck was therefore drawing near-black ink on its own dark * ground: 1.06:1, which is invisible rather than merely dim. * * So the deck restates the properties it inherits rather than reads. `color` * is the only one that differs between the themes; the rest of what body sets * is the same either way. */ .deck { color: var(--text); /* The deck is read from across a room rather than at arm's length, so its secondary text — the list a card is in, who has it, the date — steps up from 3.8:1 to 5.4:1. Everything on this surface is meant to be legible to the person furthest from the screen. */ --text-faint: #7e8ba4; } /* * The light palette. * * Not an inversion. Two things do not survive being flipped, and they are the * two the dark theme is built on: * * The surfaces do not simply reverse. In the dark theme a panel is *lighter* * than the page, so raising a surface means adding light. On white there is no * light left to add, so the page becomes the grey one and panels become white * — and hover, which lifts in the dark, presses in on light. * * The accents cannot keep their values. Every one of them is used as small * text somewhere: #ffb020 on white is about 1.9:1, #4ade80 is worse. So each * accent darkens to the point where it reads as text, and the two places an * accent is a *fill* with ink on top use --signal-fill and --on-type instead. * The hue is kept in every case, so a blocker is still red and an update is * still blue — they just stop being colours for a dark room. * * The washes go the other way: a tint that shows at 6% over near-black needs * roughly twice that to show at all over white. * * It hangs off `data-theme` rather than `prefers-color-scheme` so that it is * written once. `theme.js` resolves the operating system's preference to a * concrete value before the first paint and stamps it here, which is also * what lets somebody override it — see that file for why it is a plain * script in rather than a module. */ :root[data-theme="light"] { --ink-900: #f4f6fa; --ink-850: #ffffff; --ink-800: #ffffff; --ink-700: #eef1f6; --ink-600: #e3e8f0; --ink-500: #d5dce7; --rule: #dbe1ea; --rule-soft: #eaeef4; --rule-strong: #b3bece; --text: #141a26; --text-dim: #55617a; --text-faint: #7a8598; --text-prose: #2b3549; --signal: #9a6300; --signal-dim: #e8c98a; --t-update: #1d4ed8; --t-client: #c2410c; --t-decision: #6d28d9; --t-blocker: #c92a2a; --t-risk: #a16207; --t-demo: #0f766e; --t-note: #475569; --t-activity: #64748b; --ok: #15803d; --warn: #a16207; --danger: #c92a2a; --wash: rgba(15, 20, 32, .04); --backdrop: rgba(15, 20, 32, .45); --veil: rgba(15, 20, 32, .55); --panel-veil: rgba(255, 255, 255, .88); --scroll-thumb: #c6cedb; --scroll-thumb-hover: #aab5c6; --canvas-dot: #d2d9e4; --shadow-lip: rgba(15, 20, 32, .10); --signal-wash: rgba(255, 176, 32, .16); --signal-wash-strong: rgba(255, 176, 32, .30); --signal-ring: rgba(255, 176, 32, .38); --ok-wash: rgba(21, 128, 61, .07); --warn-wash: rgba(161, 98, 7, .09); --warn-text: #7c4a03; --danger-wash: rgba(201, 42, 42, .07); --danger-wash-strong: rgba(201, 42, 42, .13); --danger-solid: #fdecec; --danger-text: #a31515; --t-update-edge: #b9cdea; --on-type: #ffffff; /* How far a stored colour is taken towards ink before it is used as text. 0% would be the colour as chosen, which is what dark mode wants. */ --pill-ink: 58%; /* A shadow on white is a soft grey, not a black one at lower opacity. */ --shadow-1: 0 1px 2px rgba(15, 20, 32, .06); --shadow-2: 0 6px 20px rgba(15, 20, 32, .10); --shadow-3: 0 18px 50px rgba(15, 20, 32, .16); color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--ink-900); color: var(--text); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; } a { color: var(--t-update); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r1); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--ink-900); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } /* --- typographic roles ---------------------------------------------------- */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); } .prose { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--text-prose); white-space: pre-wrap; overflow-wrap: anywhere; } /* --- shell ---------------------------------------------------------------- */ #app { display: flex; flex-direction: column; height: 100%; } /* * The chrome is the one part of Floboard that cannot scroll: `body` is * `overflow: hidden`, and the topbar sits outside the scrolling view. So * anything that overflows this row is unreachable rather than scrolled to — * which is how the account chip, last in the row, used to take the whole * account menu off the side of a narrow window with it. * * It wraps instead. A second row is a worse layout than one row; a sign-out * button nobody can reach is not a layout at all. `--topbar-h` becomes a * minimum rather than a height, so a window wide enough for one row looks * exactly as it did. */ .topbar { min-height: var(--topbar-h); flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); /* Small enough that one row still measures exactly --topbar-h: the tallest thing in the row is a 39px button, and 39 + 8 is under 52. */ padding: var(--s1) var(--s4); background: var(--ink-850); border-bottom: 1px solid var(--rule); } .brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-ring); } .topbar .spacer { flex: 1; } .today { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: .06em; white-space: nowrap; } /* project switcher */ /* `min-width: 0` at every level of the nesting, or the ellipsis on .name never engages: a flex item's default minimum is its content, so a long organisation name pushes the row wider instead of being truncated. */ .switcher { position: relative; min-width: 0; } .switcher > button { display: flex; align-items: center; gap: 8px; max-width: 300px; min-width: 0; padding: 6px 10px; background: var(--ink-700); border: 1px solid var(--rule); border-radius: var(--r2); cursor: pointer; } .switcher > button:hover { background: var(--ink-600); } .switcher .swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; } .switcher .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .switcher .caret { color: var(--text-faint); } .menu { position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0; min-width: 280px; max-height: 60vh; overflow: auto; background: var(--ink-800); border: 1px solid var(--rule-strong); border-radius: var(--r3); box-shadow: var(--shadow-3); padding: var(--s1); } .menu[hidden] { display: none; } .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: var(--r2); text-align: left; cursor: pointer; } .menu button:hover { background: var(--ink-600); } .menu .sep { height: 1px; background: var(--rule); margin: var(--s1) 0; } .menu .meta { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); } /* search */ /* 260px when there is room, down to 150px when there is not, and onto its own row below that — rather than a fixed width that shoves the account chip off the edge. */ .search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 260px; min-width: 150px; padding: 6px 10px; background: var(--ink-800); border: 1px solid var(--rule); border-radius: var(--r2); color: var(--text-faint); } .search:focus-within { border-color: var(--rule-strong); background: var(--ink-700); } .search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); min-width: 0; } .search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); border: 1px solid var(--rule); border-radius: var(--r1); padding: 1px 4px; } /* --- tabs ----------------------------------------------------------------- */ /* * Seven tabs do not fit a phone, and this row cannot wrap the way the topbar * does without pushing the board off the bottom of the screen. So it scrolls * sideways instead, and `renderTabs` brings the current tab into view — a link * straight to Audit should not land on a row scrolled to Board. * * The scrollbar is hidden deliberately: the shared one is 10px, which is a * quarter of a 42px row given over to chrome that a swipe or a trackpad does * not need. */ .tabs { height: var(--tabs-h); flex: 0 0 auto; display: flex; align-items: stretch; gap: 2px; padding: 0 var(--s4); background: var(--ink-850); border-bottom: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 13px; cursor: pointer; white-space: nowrap; } .tab:hover { color: var(--text); background: var(--wash); } .tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--signal); } .tab .count { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); background: var(--ink-700); border-radius: 20px; padding: 1px 6px; } /* --- narrow windows -------------------------------------------------------- */ /* * Ornament goes before controls do. Everything dropped here is something the * screen already says another way — the date is in the feed, the keyboard hint * is for people with a keyboard, the role under a name is in the account menu * a tap away. Nothing that does something is ever hidden; the topbar wraps. * * The full row measures about 1330px, so the first two go early — a 1280px * laptop should still see one row rather than two. */ @media (max-width: 1280px) { .search kbd { display: none; } .topbar .today { display: none; } } @media (max-width: 1100px) { .topbar .account .who { display: none; } } @media (max-width: 620px) { .topbar { gap: var(--s2) var(--s3); padding: var(--s1) var(--s3); } /* The tabs row keeps a home link, so the brand is decoration here. */ .topbar .brand { display: none; } .tabs { padding: 0 var(--s3); } } /* * Below this the search box cannot share a row with anything and still be wide * enough to type into, so it takes one of its own — ordered last, so the * buttons stay together above it. Doing this any earlier costs a row rather * than saving one. */ @media (max-width: 520px) { .topbar .search { order: 1; flex: 1 1 100%; min-width: 0; } } /* --- view container ------------------------------------------------------- */ #view { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; } .scroll { height: 100%; overflow: auto; } .pad { padding: var(--s5) var(--s6) var(--s7); } .narrow { max-width: 960px; margin: 0 auto; } /* --- buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: var(--ink-700); border: 1px solid var(--rule); border-radius: var(--r2); color: var(--text); cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--ink-600); border-color: var(--rule-strong); } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: .5; cursor: default; } .btn-primary { background: var(--signal-fill); border-color: var(--signal-fill); color: var(--on-signal); font-weight: 600; } .btn-primary:hover { background: var(--signal-bright); border-color: var(--signal-bright); } .btn-ghost { background: none; border-color: transparent; color: var(--text-dim); } .btn-ghost:hover { background: var(--ink-700); color: var(--text); } .btn-sm { padding: 4px 9px; font-size: 12px; } .btn-danger:hover { background: var(--danger-solid); border-color: var(--danger); color: var(--danger-text); } /* --- forms ---------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); } .input, .textarea, .select { width: 100%; padding: 8px 10px; background: var(--ink-800); border: 1px solid var(--rule); border-radius: var(--r2); outline: none; } .input:focus, .textarea:focus, .select:focus { border-color: var(--rule-strong); background: var(--ink-700); } .textarea { resize: vertical; min-height: 90px; font-family: var(--font-serif); font-size: 15px; line-height: 1.55; } .select { appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%), linear-gradient(135deg, var(--text-faint) 50%, transparent 50%); background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .row { display: flex; gap: var(--s3); flex-wrap: wrap; } .row > * { min-width: 0; } .grow { flex: 1; } /* --- type chips ----------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; border: 1px solid currentColor; white-space: nowrap; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .chip.update { color: var(--t-update); } .chip.client { color: var(--t-client); } .chip.decision { color: var(--t-decision); } .chip.blocker { color: var(--t-blocker); } .chip.risk { color: var(--t-risk); } .chip.demo { color: var(--t-demo); } .chip.note { color: var(--t-note); } .chip.activity { color: var(--t-activity); } /* --- misc ----------------------------------------------------------------- */ .empty { border: 1px dashed var(--rule); border-radius: var(--r3); padding: var(--s6); text-align: center; color: var(--text-dim); } .empty h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); font-weight: 600; } .empty p { margin: 0 0 var(--s4); font-size: 13px; } .section-head { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s4); } .section-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .toast-stack { position: fixed; z-index: var(--z-toast); right: var(--s5); bottom: var(--s5); display: flex; flex-direction: column; gap: var(--s2); } .toast { background: var(--ink-700); border: 1px solid var(--rule-strong); border-left: 3px solid var(--signal); border-radius: var(--r2); padding: 10px 14px; box-shadow: var(--shadow-2); max-width: 380px; animation: rise .18s ease-out; } .toast.error { border-left-color: var(--danger); } @keyframes rise { from { opacity: 0; transform: translateY(6px); } } /* --- dialog --------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--backdrop); display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--s4) var(--s4); overflow: auto; } .dialog { width: 100%; max-width: 620px; background: var(--ink-800); border: 1px solid var(--rule-strong); border-radius: var(--r4); box-shadow: var(--shadow-3); animation: rise .16s ease-out; } .dialog.wide { max-width: 860px; } .dialog header { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule); } .dialog header h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; } .dialog .body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); } .dialog footer { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* --- command palette ------------------------------------------------------- */ .palette-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 16px; background: none; border: 0; text-align: left; cursor: pointer; } .palette-row:hover, .palette-row:focus-visible { background: var(--ink-700); } /* --- projects home --------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); } .project-card { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4) var(--s4) var(--s3); background: var(--ink-800); border: 1px solid var(--rule); border-radius: var(--r3); overflow: hidden; transition: border-color .12s, transform .12s; } .project-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); } .project-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--spine, var(--rule-strong)); } .project-card h3 { margin: 0; font-size: 15px; font-weight: 600; } .project-card h3 a { color: var(--text); } .project-card .client { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .project-card .stats { display: flex; gap: var(--s4); font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); } .project-card .stats b { color: var(--text); font-weight: 600; } .project-card .actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: var(--s2); border-top: 1px solid var(--rule-soft); } .swatch-btn { width: 22px; height: 22px; border-radius: var(--r2); border: 2px solid transparent; cursor: pointer; padding: 0; } .swatch-btn.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--ink-800); }