/* ========================================================================= TAB M Solutions - shared brand identity layer ========================================================================= Canonical source of truth for the pieces that should look IDENTICAL across every internal TAB M tool: the header bar, the logo mark, and the footer brand line. Everything else (colors for tables/buttons/chips, page layout, fonts sizes elsewhere on the page, etc.) is deliberately NOT here - each tool keeps its own stylesheet and its own personality ("a technical template based on this, with deviations" - that's the point). This file only owns the few square inches where TAB M's name and colors actually appear as a brand mark. Self-contained on purpose: every value below is a literal, not a reference to a project's own CSS custom properties. That way this file can be dropped into any project's static/ folder and just work, without requiring that project to rename or restructure its own :root tokens to match. HOW TO USE ---------- 1. Copy this file (and logo.png, in this same directory) into the project's static assets - see sync.sh, which does this for you: ./sync.sh /path/to/project/static 2. Link it in the page , BEFORE the project's own stylesheet: 3. Use this markup for the header:
TAB M Product Name ... (anything else - nav, page title, etc. - is unstyled by this file and left entirely to the project's own CSS)
...
4. And this for the footer brand line (optional): TAB M TAB M Solutions HOW TO UPDATE ------------- Edit THIS file (and/or logo.png), then re-run sync.sh for every project that uses it, then redeploy each one individually - there is no automatic propagation, this is a copy, not a live include. See README.md for the current list of projects using this file. Origin: extracted 2026-08-14 after broadcast-tig-stack's "Tab M NET-OPS" header was hand-matched to jetbuilt-dashboard's "Project Purchasing" header and drifted on the first pass (a CSS-drawn approximation of the logo instead of the real file, rem-scaled header padding instead of fixed px, a self-hosted font file instead of the same Google Fonts source) - this file exists so that kind of drift can't happen again on the pieces it owns. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&display=swap'); /* ---------- identity bar ---------- */ /* Fixed px throughout, deliberately - this bar should look identical across every TAB M tool regardless of that tool's own base font size (some tools intentionally run a larger root font-size for their own content; this bar should never scale along with that). */ .topbar, header.tabm-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 3px solid #cc3627; background: #0b1019; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { height: 26px; width: auto; display: block; flex-shrink: 0; } .brand-name { font-family: 'Roboto', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; color: #fff; } .brand-name .thin { font-weight: 400; opacity: 0.7; } /* ---------- footer brand line ---------- */ .fw-brand { display: flex; align-items: center; gap: 6px; } .fw-brand img { height: 14px; width: auto; display: block; }