/* ============================================================================ * BulkGuru Design System — bundled for the public marketing site. * * Compiled from claude.ai/design project "BulkGuru Design System" * (7ff74a27-19fe-42d9-b932-9ce5c5ec6c32) via the "BulkGuru Website" project's * styles.css @import chain, concatenated into one file so the site loads one * stylesheet instead of fourteen sequential @import requests — this site is * mobile-first and expected to run on 4G (see bulkguru-website-brief.md §6). * * Font loading is handled separately by a in each page's , not * here — tokens/fonts.css (Google Fonts @import) is deliberately excluded to * avoid loading the same fonts twice. Everything else is unmodified from * source; re-run this concatenation if the design system project changes * rather than hand-editing sections here. * * Order matches the original styles.css import order exactly — later rules * depend on custom properties defined earlier. * ========================================================================= */ /* ---- tokens/colors.css --------------------------------------------------- */ :root { /* ── Base: warm neutral ink scale ───────────────────────────── Never pure black. Everything is pulled a few degrees warm so screens feel printed rather than screen-lit. */ --ink-900: #141311; --ink-800: #26231F; --ink-700: #3A3733; --ink-600: #524D46; --ink-500: #6B655D; --ink-400: #8E877D; --ink-300: #C9C2B8; --ink-200: #E3DED6; --ink-100: #F0ECE6; --ink-050: #F7F5F1; --paper: #FFFFFF; /* ── Base: Clay (primary) ──────────────────────────────────── The ownable colour. Clay/brick/jute — deliberately not blue. */ --clay-700: #6E2D16; --clay-600: #8A3C21; --clay-500: #B4522F; --clay-400: #CE7B5B; --clay-300: #E3AC94; --clay-200: #F2D6C8; --clay-100: #F7EAE3; --clay-050: #FDF7F4; /* ── Base: status ────────────────────────────────────────────*/ --green-600: #14603F; --green-500: #1F6B4A; --green-100: #E4EFE9; --amber-600: #8A5E08; --amber-500: #A8730C; --amber-100: #FAEFD6; --red-600: #911D17; --red-500: #B3261E; --red-100: #FBE7E5; --slate-600: #234B63; --slate-500: #2E5C77; --slate-100: #E7EEF3; /* ── Semantic: text ─────────────────────────────────────────*/ --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-muted: var(--ink-400); --text-inverse: var(--paper); --text-brand: var(--clay-500); --text-brand-strong: var(--clay-600); --text-link: var(--clay-600); --text-link-hover: var(--clay-700); --text-success: var(--green-600); --text-warning: var(--amber-600); --text-danger: var(--red-600); --text-info: var(--slate-600); /* ── Semantic: surfaces ─────────────────────────────────────*/ --surface-page: var(--paper); --surface-page-alt: var(--ink-050); --surface-card: var(--paper); --surface-sunken: var(--ink-100); --surface-inverse: var(--ink-900); --surface-brand: var(--clay-500); --surface-brand-hover: var(--clay-600); --surface-brand-active: var(--clay-700); --surface-brand-tint: var(--clay-100); --surface-brand-tint-hover: var(--clay-200); --surface-success-tint: var(--green-100); --surface-warning-tint: var(--amber-100); --surface-danger-tint: var(--red-100); --surface-info-tint: var(--slate-100); --surface-disabled: var(--ink-100); /* ── Semantic: lines ──────────────────────────────────────── Hairlines carry the structure in this system; shadow is the exception, not the rule. */ --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-inverse: rgba(255, 255, 255, 0.16); --border-brand: var(--clay-500); --border-focus: var(--clay-500); --ring-focus: 0 0 0 3px rgba(180, 82, 47, 0.28); --ring-danger: 0 0 0 3px rgba(179, 38, 30, 0.24); } /* ---- tokens/typography.css ------------------------------------------------ */ :root { --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Weights actually used. 400 and 700 carry the wordmark; 500/600 carry UI. */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Display — tight tracking, medium weight, never bold-and-huge together */ --type-display-1-size: 56px; --type-display-1-line: 1.02; --type-display-1-track: -0.035em; --type-display-2-size: 40px; --type-display-2-line: 1.06; --type-display-2-track: -0.03em; /* Headings */ --type-h1-size: 32px; --type-h1-line: 1.15; --type-h1-track: -0.025em; --type-h2-size: 24px; --type-h2-line: 1.25; --type-h2-track: -0.02em; --type-h3-size: 19px; --type-h3-line: 1.35; --type-h3-track: -0.015em; --type-h4-size: 16px; --type-h4-line: 1.4; --type-h4-track: -0.01em; /* Body */ --type-body-lg-size: 17px; --type-body-lg-line: 1.6; --type-body-size: 15px; --type-body-line: 1.6; --type-body-sm-size: 13px; --type-body-sm-line: 1.55; /* UI + data */ --type-label-size: 13px; --type-label-line: 1.2; --type-label-track: 0; --type-eyebrow-size: 11px; --type-eyebrow-line: 1.2; --type-eyebrow-track: 0.16em; --type-mono-size: 13px; --type-mono-line: 1.45; --type-mono-track: 0; --type-mono-sm-size: 11px; --type-mono-sm-track: 0.06em; /* The wordmark lockup */ --wordmark-track: -0.035em; --wordmark-weight-bulk: 400; --wordmark-weight-guru: 700; } /* ---- tokens/spacing.css ---------------------------------------------------- */ :root { /* 4px base. 2px exists only for hairline nudges inside controls. */ --space-0: 0; --space-05: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Layout */ --page-max: 1280px; --page-gutter: 24px; --page-gutter-lg: 48px; --section-y: 96px; --section-y-sm: 64px; --app-header-h: 56px; --app-sidebar-w: 232px; --control-h-sm: 30px; --control-h: 38px; --control-h-lg: 46px; --tap-min: 44px; } /* ---- tokens/surfaces.css ---------------------------------------------------- */ :root { /* Radii — institutional, close to square. Nothing is a pill except status chips, and the app icon is the only heavily rounded shape. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 10px; --radius-icon: 22%; --radius-pill: 999px; --border-width: 1px; --border-width-strong: 1.5px; /* Shadows are quiet and warm-tinted; borders do the real work. */ --shadow-none: none; --shadow-1: 0 1px 2px rgba(20, 19, 17, 0.06); --shadow-2: 0 4px 16px -4px rgba(20, 19, 17, 0.12); --shadow-3: 0 24px 64px -16px rgba(20, 19, 17, 0.24); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08); --overlay-scrim: rgba(20, 19, 17, 0.44); --overlay-blur: 2px; } /* ---- tokens/motion.css ------------------------------------------------------ */ :root { /* Short and flat. No bounce, no spring, no scale-on-press: a procurement tool should feel instant, not playful. */ --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 240ms; --dur-page: 320ms; --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.6, 0, 0.4, 1); --transition-control: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-page: 0ms; } } /* ---- base.css --------------------------------------------------------------- */ /* Element defaults. Consumers get sane type and colour by linking this file. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure { margin: 0; } h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); font-weight: var(--weight-semibold); } h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); font-weight: var(--weight-semibold); } h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); } h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); } p { text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--clay-300); transition: var(--transition-control); } a:hover { color: var(--text-link-hover); border-bottom-color: var(--clay-500); } /* All quantities, prices, SKUs and dates are tabular. Non-negotiable: numbers in a procurement UI are read in columns. */ .num, td.num, .bgu-mono { font-variant-numeric: tabular-nums; } ::selection { background: var(--clay-200); color: var(--ink-900); } :focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); } /* ── Type utilities ─────────────────────────────────────────── */ .bgu-display-1 { font-size: var(--type-display-1-size); line-height: var(--type-display-1-line); letter-spacing: var(--type-display-1-track); font-weight: var(--weight-medium); } .bgu-display-2 { font-size: var(--type-display-2-size); line-height: var(--type-display-2-line); letter-spacing: var(--type-display-2-track); font-weight: var(--weight-medium); } .bgu-body-lg { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); } .bgu-body { font-size: var(--type-body-size); line-height: var(--type-body-line); } .bgu-body-sm { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); } .bgu-label { font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--weight-semibold); } .bgu-eyebrow { font-family: var(--font-mono); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-line); letter-spacing: var(--type-eyebrow-track); text-transform: uppercase; color: var(--text-secondary); } .bgu-mono { font-family: var(--font-mono); font-size: var(--type-mono-size); line-height: var(--type-mono-line); } .bgu-mono-sm { font-family: var(--font-mono); font-size: var(--type-mono-sm-size); letter-spacing: var(--type-mono-sm-track); } .bgu-secondary { color: var(--text-secondary); } .bgu-muted { color: var(--text-muted); } /* ---- components/brand/brand.css --------------------------------------------- */ /* ── Wordmark ──────────────────────────────────────────────── One word, two weights: Bulk 400 in ink, Guru 700 in clay. Never re-space, re-weight, or add a space between the words. */ .bgu-wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-sans); letter-spacing: var(--wordmark-track); line-height: 1; white-space: nowrap; color: var(--text-primary); border-bottom: none; } .bgu-wordmark__bulk { font-weight: var(--wordmark-weight-bulk); } .bgu-wordmark__guru { font-weight: var(--wordmark-weight-guru); color: var(--text-brand); } /* Reversed: on ink or on clay, Guru lifts to a tint so the split survives. */ .bgu-wordmark--inverse { color: var(--paper); } .bgu-wordmark--inverse .bgu-wordmark__guru { color: var(--clay-400); } .bgu-wordmark--on-brand { color: var(--paper); } .bgu-wordmark--on-brand .bgu-wordmark__guru { color: var(--clay-100); } /* One-colour fallback for fax, embroidery, single-plate print, engraving. */ .bgu-wordmark--mono .bgu-wordmark__guru { color: inherit; } .bgu-wordmark--sm { font-size: 15px; } .bgu-wordmark--md { font-size: 20px; } .bgu-wordmark--lg { font-size: 28px; } .bgu-wordmark--xl { font-size: 40px; } /* Below 14px the tracking has to open up or the k/G collide. */ .bgu-wordmark--xs { font-size: 13px; letter-spacing: -0.02em; } /* ── App icon ────────────────────────────────────────────────*/ .bgu-appicon { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-brand); color: var(--paper); border-radius: var(--radius-icon); font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: -0.04em; line-height: 1; overflow: hidden; } .bgu-appicon--ink { background: var(--ink-900); color: var(--clay-400); } .bgu-appicon--tint { background: var(--clay-100); color: var(--clay-600); } /* ── Icon (Lucide, inline SVG so it inherits currentColor) ───*/ .bgu-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; color: inherit; } .bgu-icon svg { display: block; width: 100%; height: 100%; } .bgu-icon--sm { width: 16px; height: 16px; } .bgu-icon--lg { width: 24px; height: 24px; } /* ---- components/controls/controls.css --------------------------------------- */ /* ── Button ────────────────────────────────────────────────── Square-ish, dense, label-forward. Hover darkens; press darkens further. Nothing scales, nothing bounces. */ .bgu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); border: var(--border-width) solid transparent; border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--weight-semibold); letter-spacing: 0; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: var(--transition-control); -webkit-appearance: none; appearance: none; } .bgu-btn:focus-visible { box-shadow: var(--ring-focus); } .bgu-btn:disabled, .bgu-btn[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-disabled); border-color: transparent; color: var(--text-muted); box-shadow: none; } .bgu-btn--primary { background: var(--surface-brand); color: var(--text-inverse); } .bgu-btn--primary:hover:not(:disabled) { background: var(--surface-brand-hover); } .bgu-btn--primary:active:not(:disabled) { background: var(--surface-brand-active); } .bgu-btn--secondary { background: var(--paper); color: var(--text-primary); border-color: var(--border-strong); } .bgu-btn--secondary:hover:not(:disabled) { background: var(--ink-050); border-color: var(--ink-400); } .bgu-btn--secondary:active:not(:disabled) { background: var(--ink-100); } .bgu-btn--ink { background: var(--surface-inverse); color: var(--text-inverse); } .bgu-btn--ink:hover:not(:disabled) { background: var(--ink-800); } .bgu-btn--ink:active:not(:disabled) { background: var(--ink-700); } .bgu-btn--ghost { background: transparent; color: var(--text-brand-strong); } .bgu-btn--ghost:hover:not(:disabled) { background: var(--surface-brand-tint); } .bgu-btn--ghost:active:not(:disabled) { background: var(--surface-brand-tint-hover); } .bgu-btn--danger { background: var(--red-500); color: var(--text-inverse); } .bgu-btn--danger:hover:not(:disabled) { background: var(--red-600); } .bgu-btn--sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: 12px; } .bgu-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: 15px; } .bgu-btn--block { width: 100%; } /* ── Icon button ─────────────────────────────────────────────*/ .bgu-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); padding: 0; border: var(--border-width) solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; transition: var(--transition-control); } .bgu-iconbtn:hover { background: var(--ink-100); color: var(--text-primary); } .bgu-iconbtn:active { background: var(--ink-200); } .bgu-iconbtn:focus-visible { box-shadow: var(--ring-focus); } .bgu-iconbtn--outline { border-color: var(--border-default); background: var(--paper); } .bgu-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); } /* ── Quantity stepper (bulk-specific) ───────────────────────*/ .bgu-qty { display: inline-flex; align-items: stretch; height: var(--control-h); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; } .bgu-qty__btn { width: 34px; border: none; background: var(--paper); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition-control); } .bgu-qty__btn:hover:not(:disabled) { background: var(--ink-100); } .bgu-qty__btn:disabled { color: var(--ink-300); cursor: not-allowed; } .bgu-qty__field { width: 68px; border: none; border-left: var(--border-width) solid var(--border-default); border-right: var(--border-width) solid var(--border-default); text-align: center; font-family: var(--font-mono); font-size: var(--type-mono-size); font-variant-numeric: tabular-nums; color: var(--text-primary); background: var(--paper); } .bgu-qty__field:focus { outline: none; background: var(--clay-050); } .bgu-qty__unit { display: flex; align-items: center; padding: 0 var(--space-3); background: var(--ink-050); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } /* ---- components/forms/forms.css ---------------------------------------------- */ .bgu-field { display: flex; flex-direction: column; gap: var(--space-2); } .bgu-field__label { font-size: var(--type-label-size); font-weight: var(--weight-semibold); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); } .bgu-field__req { color: var(--clay-500); } .bgu-field__hint { font-size: var(--type-body-sm-size); color: var(--text-secondary); } .bgu-field__error { font-size: var(--type-body-sm-size); color: var(--text-danger); } .bgu-input, .bgu-select, .bgu-textarea { width: 100%; height: var(--control-h); padding: 0 var(--space-3); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-md); background: var(--paper); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--type-body-size); transition: var(--transition-control); -webkit-appearance: none; appearance: none; } .bgu-textarea { height: auto; min-height: 96px; padding: var(--space-3); line-height: 1.55; resize: vertical; } .bgu-input::placeholder, .bgu-textarea::placeholder { color: var(--text-muted); } .bgu-input:hover, .bgu-select:hover, .bgu-textarea:hover { border-color: var(--ink-400); } .bgu-input:focus, .bgu-select:focus, .bgu-textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring-focus); } .bgu-input:disabled, .bgu-select:disabled { background: var(--surface-disabled); color: var(--text-muted); border-color: var(--border-default); cursor: not-allowed; } .bgu-input--invalid, .bgu-select--invalid { border-color: var(--red-500); } .bgu-input--invalid:focus { box-shadow: var(--ring-danger); } .bgu-input--mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .bgu-input--sm { height: var(--control-h-sm); font-size: var(--type-body-sm-size); } .bgu-select { padding-right: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } /* Prefix/suffix affixes — used constantly for ₹, /kg, GSTIN, HSN */ .bgu-inputgroup { display: flex; align-items: stretch; } .bgu-inputgroup .bgu-input { border-radius: 0; } .bgu-inputgroup > :first-child { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); } .bgu-inputgroup > :last-child { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .bgu-affix { display: flex; align-items: center; padding: 0 var(--space-3); border: var(--border-width) solid var(--border-strong); background: var(--ink-050); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--type-mono-size); white-space: nowrap; } .bgu-affix + .bgu-input { border-left: none; } .bgu-input + .bgu-affix { border-left: none; } /* ── Checkbox / radio ───────────────────────────────────────*/ .bgu-check { display: inline-flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; } .bgu-check__box { flex: none; width: 17px; height: 17px; margin-top: 1px; border: var(--border-width-strong) solid var(--border-strong); border-radius: var(--radius-xs); background: var(--paper); display: flex; align-items: center; justify-content: center; transition: var(--transition-control); } .bgu-check__box--radio { border-radius: var(--radius-pill); } .bgu-check:hover .bgu-check__box { border-color: var(--clay-500); } .bgu-check__box--on { background: var(--surface-brand); border-color: var(--surface-brand); color: var(--paper); } .bgu-check__box--radio.bgu-check__box--on { background: var(--paper); border-color: var(--clay-500); } .bgu-check__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--clay-500); } .bgu-check__label { font-size: var(--type-body-size); color: var(--text-primary); line-height: 1.35; } .bgu-check--disabled { cursor: not-allowed; } .bgu-check--disabled .bgu-check__box { background: var(--surface-disabled); border-color: var(--border-default); } .bgu-check--disabled .bgu-check__label { color: var(--text-muted); } /* ── Switch ─────────────────────────────────────────────────*/ .bgu-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; } .bgu-switch__track { width: 38px; height: 22px; padding: 2px; border-radius: var(--radius-pill); background: var(--ink-300); transition: background-color var(--dur-fast) var(--ease-standard); } .bgu-switch__track--on { background: var(--surface-brand); } .bgu-switch__knob { width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-1); transform: translateX(0); transition: transform var(--dur-fast) var(--ease-standard); } .bgu-switch__track--on .bgu-switch__knob { transform: translateX(16px); } /* ---- components/data/data.css ------------------------------------------------ */ /* ── Badge (status) ─────────────────────────────────────────*/ .bgu-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .bgu-badge__dot { width: 5px; height: 5px; border-radius: var(--radius-pill); background: currentColor; } .bgu-badge--neutral { background: var(--ink-100); color: var(--ink-600); } .bgu-badge--brand { background: var(--surface-brand-tint); color: var(--clay-700); } .bgu-badge--success { background: var(--surface-success-tint); color: var(--text-success); } .bgu-badge--warning { background: var(--surface-warning-tint); color: var(--text-warning); } .bgu-badge--danger { background: var(--surface-danger-tint); color: var(--text-danger); } .bgu-badge--info { background: var(--surface-info-tint); color: var(--text-info); } /* ── Tag (filters, categories, removable) ───────────────────*/ .bgu-tag { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-3); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm); background: var(--paper); font-size: var(--type-body-sm-size); color: var(--text-primary); } .bgu-tag--selected { border-color: var(--clay-500); background: var(--surface-brand-tint); color: var(--clay-700); } .bgu-tag__x { display: inline-flex; cursor: pointer; color: var(--text-muted); } .bgu-tag__x:hover { color: var(--text-primary); } /* ── Data table ───────────────────────────────────────────── The workhorse of the app: hairlines, no zebra, tabular numerals, numbers right-aligned, header in mono caps. */ .bgu-table { width: 100%; border-collapse: collapse; font-size: var(--type-body-sm-size); } .bgu-table th { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-width) solid var(--border-strong); background: var(--ink-050); font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-regular); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .bgu-table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--border-subtle); color: var(--text-primary); vertical-align: middle; } .bgu-table tbody tr:hover td { background: var(--clay-050); } .bgu-table .bgu-num, .bgu-table th.bgu-num { text-align: right; font-variant-numeric: tabular-nums; } .bgu-table__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .bgu-table--compact td { padding: var(--space-2) var(--space-3); } /* ── Stat / metric ──────────────────────────────────────────*/ .bgu-stat { display: flex; flex-direction: column; gap: var(--space-1); } .bgu-stat__value { font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; } .bgu-stat__delta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } .bgu-stat__delta--up { color: var(--text-success); } .bgu-stat__delta--down { color: var(--text-danger); } /* ── Price block ────────────────────────────────────────────*/ .bgu-price { display: flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; } .bgu-price__cur { font-size: 15px; color: var(--text-secondary); } .bgu-price__val { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.02em; } .bgu-price__unit { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-secondary); } .bgu-price__strike { font-size: 13px; color: var(--text-muted); text-decoration: line-through; } /* ---- components/surfaces/surfaces.css ----------------------------------------- */ /* ── Card ─────────────────────────────────────────────────── Hairline border, 6px radius, no shadow at rest. Shadow only appears on things that float (dialog, dropdown, tooltip). */ .bgu-card { background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; } .bgu-card--flat { border-radius: var(--radius-md); } .bgu-card--sunken { background: var(--surface-page-alt); } .bgu-card--interactive { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } .bgu-card--interactive:hover { border-color: var(--ink-400); box-shadow: var(--shadow-1); } .bgu-card--brand { border-color: var(--clay-300); background: var(--clay-050); } .bgu-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-bottom: var(--border-width) solid var(--border-subtle); } .bgu-card__title { font-size: var(--type-h4-size); font-weight: var(--weight-semibold); letter-spacing: -0.01em; } .bgu-card__body { padding: var(--space-4); } .bgu-card__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--border-subtle); background: var(--ink-050); } /* ── Dialog ─────────────────────────────────────────────────*/ .bgu-scrim { position: fixed; inset: 0; background: var(--overlay-scrim); backdrop-filter: blur(var(--overlay-blur)); display: flex; align-items: center; justify-content: center; padding: var(--space-6); z-index: 100; } .bgu-dialog { width: 100%; max-width: 480px; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); overflow: hidden; } .bgu-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); } .bgu-dialog__title { font-size: var(--type-h3-size); font-weight: var(--weight-semibold); letter-spacing: -0.015em; } .bgu-dialog__body { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); } .bgu-dialog__footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: var(--border-width) solid var(--border-subtle); background: var(--ink-050); } /* ── Tooltip ────────────────────────────────────────────────*/ .bgu-tooltip { display: inline-block; max-width: 260px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--ink-900); color: var(--paper); font-size: var(--type-body-sm-size); line-height: 1.45; box-shadow: var(--shadow-2); } .bgu-tooltip__key { font-family: var(--font-mono); color: var(--clay-300); } /* ── Divider ────────────────────────────────────────────────*/ .bgu-divider { height: 1px; background: var(--border-default); border: none; } .bgu-divider--strong { background: var(--border-strong); } /* ---- components/feedback/feedback.css ----------------------------------------- */ /* ── Banner ───────────────────────────────────────────────── Left edge is a full-height 3px rule in the status colour — the only place the system uses an edge accent. */ .bgu-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border-default); border-left-width: 3px; border-radius: var(--radius-md); background: var(--paper); font-size: var(--type-body-sm-size); line-height: 1.5; } .bgu-banner__title { font-weight: var(--weight-semibold); font-size: var(--type-label-size); margin-bottom: 2px; } .bgu-banner__body { color: var(--text-secondary); } .bgu-banner--info { border-left-color: var(--slate-500); background: var(--surface-info-tint); border-color: var(--slate-100); } .bgu-banner--success { border-left-color: var(--green-500); background: var(--surface-success-tint); border-color: var(--green-100); } .bgu-banner--warning { border-left-color: var(--amber-500); background: var(--surface-warning-tint); border-color: var(--amber-100); } .bgu-banner--danger { border-left-color: var(--red-500); background: var(--surface-danger-tint); border-color: var(--red-100); } .bgu-banner--brand { border-left-color: var(--clay-500); background: var(--clay-100); border-color: var(--clay-200); } /* ── Empty state ────────────────────────────────────────────*/ .bgu-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-6); text-align: center; border: var(--border-width) dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--ink-050); } .bgu-empty__title { font-size: var(--type-h4-size); font-weight: var(--weight-semibold); } .bgu-empty__body { font-size: var(--type-body-sm-size); color: var(--text-secondary); max-width: 44ch; } /* ── Progress / lead-time bar ───────────────────────────────*/ .bgu-progress { height: 4px; border-radius: var(--radius-pill); background: var(--ink-200); overflow: hidden; } .bgu-progress__fill { height: 100%; background: var(--surface-brand); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-standard); } /* ── Skeleton ───────────────────────────────────────────────*/ .bgu-skeleton { background: var(--ink-100); border-radius: var(--radius-sm); animation: bgu-pulse 1.4s var(--ease-standard) infinite; } @keyframes bgu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ---- components/navigation/navigation.css -------------------------------------- */ /* ── Tabs ─────────────────────────────────────────────────── Underline sits on the same hairline as the content below it. */ .bgu-tabs { display: flex; align-items: stretch; gap: var(--space-5); border-bottom: var(--border-width) solid var(--border-default); } .bgu-tab { position: relative; padding: var(--space-3) 0; border: none; background: none; font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--weight-medium); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: color var(--dur-fast) var(--ease-standard); } .bgu-tab:hover { color: var(--text-primary); } .bgu-tab--active { color: var(--text-primary); font-weight: var(--weight-semibold); } .bgu-tab--active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--surface-brand); } .bgu-tab__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } /* ── Breadcrumb ─────────────────────────────────────────────*/ .bgu-crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--type-body-sm-size); } .bgu-crumbs a { color: var(--text-secondary); border-bottom: none; } .bgu-crumbs a:hover { color: var(--text-primary); } .bgu-crumbs__sep { color: var(--ink-300); } .bgu-crumbs__current { color: var(--text-primary); font-weight: var(--weight-medium); } /* ── Side nav ───────────────────────────────────────────────*/ .bgu-nav { display: flex; flex-direction: column; gap: 1px; } .bgu-nav__section { padding: var(--space-4) var(--space-3) var(--space-2); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .bgu-navitem { display: flex; align-items: center; gap: var(--space-3); height: 34px; padding: 0 var(--space-3); border: none; border-radius: var(--radius-md); background: none; font-family: var(--font-sans); font-size: var(--type-label-size); font-weight: var(--weight-medium); color: var(--text-secondary); text-align: left; cursor: pointer; transition: var(--transition-control); } .bgu-navitem:hover { background: var(--ink-100); color: var(--text-primary); } .bgu-navitem--active { background: var(--surface-brand-tint); color: var(--clay-700); font-weight: var(--weight-semibold); } .bgu-navitem__badge { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .bgu-navitem--active .bgu-navitem__badge { color: var(--clay-600); } /* ── App header ─────────────────────────────────────────────*/ .bgu-appbar { display: flex; align-items: center; gap: var(--space-5); height: var(--app-header-h); padding: 0 var(--space-4); border-bottom: var(--border-width) solid var(--border-default); background: var(--paper); } /* --------------------------------------------------------------------------- * Marketing-site amendments — bulkguru-website-brief.md §2.8, binding for * this site only (the app keeps its own, denser control sizing). * ------------------------------------------------------------------------ */ /* §2.8.7 — 48px minimum tap target on this site, vs the app's 30–38px. */ .bgu-btn { min-height: 48px; } .bgu-btn--sm { min-height: 44px; } /* §2.3 — marketing site runs 17px body / 96px section rhythm, not the app's 13px-table density. Section wrapper classes used by site pages: */ .site-section { padding: var(--section-y) var(--page-gutter-lg); } .site-section--sm { padding: var(--section-y-sm) var(--page-gutter-lg); } .site-wrap { max-width: var(--page-max); margin: 0 auto; }