/* InsightKit dashboard theme and layout, on top of Basecoat (shadcn/ui as plain CSS — see basecoat/README.md), styled with the Graphite design system (graphite-design-system/ in the repository root). Four rules for this file: 1. Components come from Basecoat: .btn, .card, .badge, .alert, .table, .field, .input, .dialog, .dropdown-menu, .sidebar, .breadcrumb, .empty. Their Graphite shape (pills, no shadows) is set in the "Graphite shape" block below, inside @layer components. Basecoat's rules sit in CSS layers, and any unlayered rule in this file beats them regardless of specificity — so a generic unlayered rule (button, table, .btn …) silently replaces shadcn's. Keep component overrides in the layer. 2. This file holds the theme, the page layout (Basecoat ships no layout utilities), and the few things that are InsightKit's own: request status (Ch. 12 §3), "soon" placeholders, app avatars, vote counts. 3. Colours are tokens. Nothing here names a hex value except the theme blocks below and the avatar greys. 4. Graphite is monochrome. The only hue is the InsightKit orange, and it is used for the logo only (--logo-accent). Green is the "live" dot and red is destructive; nothing else has a colour. Meaning is carried by text, weight and fill, never by colour alone. */ /* ---- font ---------------------------------------------------------------- */ /* Geist, variable 100–900, served from this binary (fonts/Geist-OFL.txt). Named "Geist Sans" because Basecoat's --font-sans already asks for it. */ @font-face { font-family: "Geist Sans"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* ---- theme ---------------------------------------------------------------- */ /* Graphite tokens, mapped onto the shadcn names Basecoat reads. background → surface → surface-muted are the fill steps that separate things; there are no shadows. */ :root { --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif; --default-font-family: var(--font-sans); /* --radius-xl (cards) = radius + 4px = Graphite's radius-card, 18px. */ --radius: 14px; --radius-full: 9999px; --background: #efefef; --foreground: #232323; --card: #ffffff; --card-foreground: #232323; --popover: #ffffff; --popover-foreground: #232323; --primary: #232323; --primary-foreground: #efefef; --secondary: #f5f5f5; --secondary-foreground: #000000; --muted: #f5f5f5; --muted-foreground: #707070; --accent: #f5f5f5; --accent-foreground: #232323; --destructive: #e40014; --border: #e5e5e5; --input: #dcdcdc; --ring: #a1a1a1; --sidebar: #efefef; --sidebar-foreground: #232323; --sidebar-primary: #232323; --sidebar-primary-foreground: #efefef; --sidebar-accent: #ffffff; --sidebar-accent-foreground: #000000; --sidebar-border: #e5e5e5; --sidebar-ring: #a1a1a1; /* Graphite's own names. */ --foreground-strong: #000000; --logo: #b4b4b4; --success: #1daf61; --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--foreground); /* The InsightKit orange. The logo only: the "Kit" of the wordmark in the sidebar and on the sign-in page. Do not use it for anything else. */ --logo-accent: #b45309; /* App roles, all monochrome now. --brand used to be the orange for links and counts; it is kept as a name so older inline styles still work. */ --brand: var(--foreground-strong); --status-blue: var(--foreground); --status-green: var(--success); --status-red: var(--destructive); --soon: var(--muted-foreground); } .dark { /* Graphite's dark theme: grey, not black (also Ch. 12 §3). */ --background: #232323; --foreground: #efefef; --card: #313131; --card-foreground: #efefef; --popover: #313131; --popover-foreground: #efefef; --primary: #efefef; --primary-foreground: #232323; --secondary: #3a3a3a; --secondary-foreground: #efefef; --muted: #2e2e2e; --muted-foreground: #9d9d9d; --accent: #3a3a3a; --accent-foreground: #efefef; /* Graphite's red is for light grounds: #e40014 on the dark card #313131 is 2.67:1. This lighter red is 4.88:1 there and 5.89:1 on #232323. */ --destructive: #ff7176; --border: #3a3a3a; --input: #474747; --ring: #707070; --sidebar: #232323; --sidebar-foreground: #efefef; --sidebar-primary: #efefef; --sidebar-primary-foreground: #232323; --sidebar-accent: #313131; --sidebar-accent-foreground: #efefef; --sidebar-border: #3a3a3a; --sidebar-ring: #707070; --foreground-strong: #efefef; --logo: #5a5a5a; --logo-accent: #f0a04b; } /* The names the templates used before Basecoat, kept as aliases so older inline styles follow the theme in both modes. New code should use the shadcn names directly. */ :root { --bg: var(--background); --panel: var(--card); --raised: var(--muted); --line: var(--border); --line-soft: color-mix(in oklab, var(--border) 65%, transparent); --fg: var(--foreground); --dim: var(--muted-foreground); --faint: var(--muted-foreground); --blue: var(--status-blue); --green: var(--status-green); --red: var(--status-red); } /* ---- base ----------------------------------------------------------------- */ /* In the base layer, so Basecoat's components (a later layer) win over it: an unlayered "a { color: inherit }" would recolour every . */ @layer base { body { font-family: var(--font-sans); font-size: 14px; line-height: 1.55; font-weight: 500; background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-weight: 700; } code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } pre { background: var(--muted); border: 0; border-radius: var(--radius-lg); padding: 12px 14px; overflow-x: auto; font-size: 12.5px; line-height: 1.6; margin: 0; } } .grow { flex: 1; min-width: 0; } .hot { color: var(--foreground-strong); font-weight: 700; } .quiet { color: var(--faint); font-size: 13px; } /* A text link inside running copy. Monochrome, so the underline is what marks it as a link. */ .link { color: var(--foreground-strong); text-decoration: underline; text-decoration-color: var(--ring); text-underline-offset: 2px; } .link:hover { text-decoration-color: currentColor; } /* ---- Graphite shape ------------------------------------------------------- */ /* Same layer as Basecoat's components and loaded after them, so these win at equal specificity and Basecoat's variants still apply on top. */ @layer components { /* Anything you can press is a pill. */ .btn { border-radius: var(--radius-full); font-weight: 600; transition: background-color .3s cubic-bezier(.76,0,.24,1), color .3s cubic-bezier(.76,0,.24,1), transform .3s cubic-bezier(.76,0,.24,1); } .btn:not(:disabled):hover { transform: translateY(-1px); } .btn:active { transform: none; } .btn:focus-visible { outline: 2px solid transparent; border-color: transparent; box-shadow: var(--focus-ring); } .badge { border-radius: var(--radius-full); font-weight: 600; } /* No shadows, almost no borders: a card is a fill step above the page. */ .card { box-shadow: none; border-color: transparent; } .alert { border-radius: var(--radius-lg); } .input, .select, .textarea, input.input, select.select, textarea.textarea { border-radius: 10px; box-shadow: none; } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { box-shadow: var(--focus-ring); border-color: transparent; } /* Floating layers keep a hairline so they separate from what is under them. */ .dialog > div, [data-popover] { box-shadow: none; border: 1px solid var(--border); } .dialog > div { border-radius: var(--radius-lg); } } /* ---- frame: sidebar, top bar, app header ---------------------------------- */ .sidebar .brand { display: block; padding: 16px 16px 10px; font-weight: 700; font-size: 16px; letter-spacing: -.48px; } .sidebar .brand span { color: var(--logo-accent); } .sidebar nav > section { padding: 0 8px 12px; } .sidebar h3 { padding: 0 10px; margin: 14px 0 4px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); } .sidebar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar li > a, .sidebar li > span { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; color: var(--muted-foreground); transition: color .5s cubic-bezier(.7,0,0,1), background-color .5s cubic-bezier(.7,0,0,1); } .sidebar li > a:hover { color: var(--sidebar-foreground); } .sidebar li > a[aria-current] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 600; } .sidebar li > span.soon { color: var(--muted-foreground); border: 0; } /* Counts are small dark chips (Graphite's Tag), not coloured numbers. */ .sidebar .n, .apptabs .count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--primary); color: var(--primary-foreground); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; line-height: 1; } .sidebar .n { margin-left: auto; } .sidebar .add { justify-content: center; margin-top: 6px; border: 1px dashed var(--border); } .topbar { position: sticky; top: 0; z-index: 30; height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 8px; background: var(--background); } .topbar svg { width: 16px; height: 16px; } .iconbtn { position: relative; } .iconbtn .soon-badge { position: absolute; top: -8px; right: -10px; font-size: 8px; padding: 0 4px; background: var(--background); } .userchip { display: flex; align-items: center; gap: 9px; text-align: left; } .userchip .face { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--primary-foreground); } /* The Google profile photo (US-01 c9): cropped to the circle, never stretched. */ .userchip img.face { object-fit: cover; background: var(--muted); flex-shrink: 0; } .userchip .who { display: flex; flex-direction: column; line-height: 1.2; } .userchip .who b { font-weight: 600; font-size: 13px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .userchip .who small { color: var(--muted-foreground); font-size: 11px; font-weight: 500; } .apphead { padding: 12px 20px 0; } .apphead .breadcrumb { margin-bottom: 8px; } .apptitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .apptitle h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.78px; } .apptitle .meta { margin-left: auto; color: var(--muted-foreground); font-size: 12px; display: flex; gap: 8px; align-items: center; } /* App tabs are links to separate pages, so they are a