/* =============================================================================
BridgeERP — Design Tokens + Component Kit
File: bridge-theme.css
Owner: BridgeERP Limited
Target: BridgeERP website (Odoo 18 frontend, Bootstrap 5, FontAwesome 6)
Pairs with: calculator.html + bridge-calculator.js (same folder)
Fonts: NO external fonts, NO CDN, NO @import. Uses the face the site
already loads (Source Sans Pro) with a full system fallback stack.
---------------------------------------------------------------------------
ARCHITECTURE — three layers, everything prefixed --be-
---------------------------------------------------------------------------
1. RAW SCALE --be-brand-50..950 · --be-accent-50..950 · --be-grey-50..950
Literal hexes. Only this layer contains hex values.
2. SEMANTIC --be-bg, --be-surface, --be-text, --be-brand, --be-shadow-*, …
Maps raw stops to meaning. Dark mode re-maps ONLY this
layer; sub-brand accents re-map only the brand raw scale.
3. COMPONENTS .be-card, .be-appcard, .be-panel, .be-fab, …
Consume ONLY semantic tokens. Never a raw stop, never a hex.
---------------------------------------------------------------------------
!!! SCOPING RULE — READ BEFORE EDITING !!!
---------------------------------------------------------------------------
The legacy BridgeERP site has ~241 pages full of hardcoded hex colours. A
global dark-mode flip would wreck them. Therefore:
* TOKEN DEFINITIONS live on :root / [data-theme] / [data-accent].
They are inert — declaring a custom property paints nothing.
* EVERY VISUAL COMPONENT RULE is nested under `.be-scope`.
Legacy pages are untouched until a container opts in.
Usage:
<- stamped by boot script
…legacy markup, unaffected…
…new pricing surfaces…
…fixed FABs…
`.be-scope` paints its own background/colour, so dark mode is visually
confined to opted-in regions. Wrap a whole new page body in `.be-scope`.
---------------------------------------------------------------------------
NO `!important` IS USED ANYWHERE IN THIS FILE.
Component selectors are `.be-scope .be-x` (specificity 0,2,0), which already
outranks Bootstrap/Odoo's single-class frontend rules. If a future conflict
forces an `!important`, add a comment on the same line naming the upstream
rule it defeats.
---------------------------------------------------------------------------
SECTION INDEX
1 Raw scale — brand (BridgeERP navy)
2 Raw scale — accent (BridgeERP orange)
3 Raw scale — grey (navy-tinted neutrals)
4 Semantic layer — light (default)
5 Dark mode — [data-theme="dark"] + prefers-color-scheme
6 Sub-brand accents — [data-accent="eduprime|mfi|hms|courier"]
7 Scope base + typography
8 .be-card · .be-eyebrow · .be-badge
9 Calculator shell — .be-calc / .be-grid / .be-rail / .be-main / .be-panel
10 .be-pill (left rail)
11 .be-appcard (app picker)
12 .be-panel internals (receipt, total, base row)
13 .be-stepper · .be-toggle · .be-select · .be-savings
14 .be-btn-primary · .be-btn-ghost
15 .be-toast · .be-noscript · .be-skeleton
16 FAB kit — appearance / assistant / panel / swatches
17 Decor — aurora, grid-bg
18 Responsive — <=991.98px single column + .be-bar / .be-panel.is-mobile-bar
19 Accessibility — focus, reduced motion, forced colours, print
========================================================================== */
/* =============================================================================
1. RAW SCALE — BRAND
-----------------------------------------------------------------------------
11 stops generated around the existing BridgeERP navy #114966.
#114966 = hsl(200.5 71.4pct 23.3pct) and sits EXACTLY at brand-700 — the
shipped brand colour is preserved byte-for-byte, never "approximated".
brand-600 (#1c5c7d) is its lighter sibling; the 600/700 pair is the brand
couple used by the gradient and by hover states.
========================================================================== */
:root {
--be-brand-50: #eff6fa;
--be-brand-100: #dcecf4;
--be-brand-200: #bbdaea;
--be-brand-300: #8fbed6;
--be-brand-400: #599dc0;
--be-brand-500: #2e789e;
--be-brand-600: #1c5c7d;
--be-brand-700: #114966; /* the shipped BridgeERP navy. Do not change. */
--be-brand-800: #0d384f;
--be-brand-900: #0a2938;
--be-brand-950: #071922;
}
/* =============================================================================
2. RAW SCALE — ACCENT
-----------------------------------------------------------------------------
11 stops around the existing BridgeERP orange #f89d14 = hsl(36 94pct 52.5pct),
placed exactly at accent-500.
accent-700 (#a06103) is the "accent as TEXT" stop: #f89d14 only reaches
2.14:1 on white and must never carry text on a light surface.
========================================================================== */
:root {
--be-accent-50: #fef8ee;
--be-accent-100: #feedd5;
--be-accent-200: #fddcaa;
--be-accent-300: #fbc574;
--be-accent-400: #fab142;
--be-accent-500: #f89d14; /* the shipped BridgeERP orange. Do not change. */
--be-accent-600: #dc8604;
--be-accent-700: #a06103; /* text-safe on white: 4.99:1 */
--be-accent-800: #7f4f05;
--be-accent-900: #5d3b06;
--be-accent-950: #392405;
}
/* =============================================================================
3. RAW SCALE — GREY (navy-tinted neutrals, hue 208)
-----------------------------------------------------------------------------
Deliberately tinted toward the brand hue so greys never read "dead web grey"
beside the navy — the same trick the reference properties use (purple-tinted
ink on aminitechsolutions.com, green-tinted grey on e-Reta / PesaBridge).
Two half-stops exist purely for WCAG 1.4.11 (non-text contrast) on the
RESTING border of interactive controls:
--be-grey-450 3.28:1 on white (light-mode control borders)
--be-grey-550 3.25:1 on --be-grey-900 (dark-mode control borders)
========================================================================== */
:root {
--be-grey-50: #f7f9fb;
--be-grey-100: #f0f3f6;
--be-grey-200: #e2e7ec;
--be-grey-300: #cdd4db;
--be-grey-400: #9da9b4;
--be-grey-450: #80909d; /* a11y half-stop — control borders (light) */
--be-grey-500: #71808e;
--be-grey-550: #5f6e7b; /* a11y half-stop — control borders (dark) */
--be-grey-600: #576470;
--be-grey-700: #3e4b56;
--be-grey-800: #232c34;
--be-grey-900: #151d23;
--be-grey-950: #0b1014;
}
/* =============================================================================
4. SEMANTIC LAYER — LIGHT (default)
-----------------------------------------------------------------------------
Measured contrast (light):
text grey-900 on #fff .............. 17.05:1 AAA
muted grey-600 on #fff .............. 6.07:1 AA / AAA large
muted grey-600 on surface-2 ......... 5.45:1 AA
brand brand-700 on #fff ............. 9.68:1 AAA
brand-fg #fff on brand-700 .......... 9.68:1 AAA
accent-fg grey-950 on accent-500 .... 8.94:1 AAA
accent-ink accent-700 on #fff ....... 4.99:1 AA
border-strong grey-450 on #fff ...... 3.28:1 AA (non-text 1.4.11)
========================================================================== */
:root {
/* --- surfaces ---------------------------------------------------------- */
--be-bg: #ffffff; /* page background */
--be-surface: #ffffff; /* cards, panels — raised */
--be-surface-2: var(--be-grey-50); /* bands, inset wells — recessed */
/* --- ink --------------------------------------------------------------- */
--be-text: var(--be-grey-900);
--be-muted: var(--be-grey-600);
/* --- lines ------------------------------------------------------------- */
--be-border: var(--be-grey-200); /* static hairlines / separators */
--be-border-strong: var(--be-grey-450); /* resting border of CONTROLS */
/* --- brand ------------------------------------------------------------- */
--be-brand: var(--be-brand-700);
--be-brand-fg: #ffffff;
--be-brand-hover: var(--be-brand-800);
--be-brand-tint: var(--be-brand-50); /* selected / checked fill */
--be-brand-ink: var(--be-brand-700); /* brand used as TEXT */
/* --- accent ------------------------------------------------------------ */
--be-accent: var(--be-accent-500);
--be-accent-fg: var(--be-grey-950); /* orange needs a DARK foreground */
--be-accent-tint: var(--be-accent-50);
--be-accent-ink: var(--be-accent-700); /* accent used as TEXT */
/* --- gradients (brand couple 600 -> 800, the house 135deg) ------------- */
--be-gradient-brand: linear-gradient(135deg, var(--be-brand-600), var(--be-brand-800));
--be-gradient-hair: linear-gradient(90deg, var(--be-brand-500), var(--be-accent-500));
/* Foreground for anything painted ON the brand gradient. The gradient is a
dark navy couple in light mode and a mid navy couple in dark mode, so pure
white clears 7:1 in both — this token stays white on purpose. */
--be-on-gradient: #ffffff;
/* --- elevation (navy-tinted, the e-Reta e1..e4 ladder) ----------------- */
--be-shadow-1: 0 1px 2px rgba(7, 25, 34, .05), 0 1px 1px rgba(7, 25, 34, .04);
--be-shadow-2: 0 6px 18px -8px rgba(7, 25, 34, .16);
--be-shadow-3: 0 14px 34px -14px rgba(7, 25, 34, .22);
--be-shadow-4: 0 40px 80px -32px rgba(7, 25, 34, .34);
/* --- radii ------------------------------------------------------------- */
--be-radius-sm: 8px;
--be-radius-md: 12px;
--be-radius-lg: 14px;
--be-radius-xl: 18px; /* the .m-card radius */
--be-radius-pill: 999px;
/* --- type -------------------------------------------------------------- */
--be-font-body: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji";
--be-font-display: var(--be-font-body);
/* --- metrics ----------------------------------------------------------- */
--be-container: 1200px;
--be-gutter: 24px;
--be-sticky-top: 88px; /* clearance under the site header */
--be-tap: 44px; /* minimum touch target */
--be-ease: cubic-bezier(.22, 1, .36, 1);
--be-dur: .22s;
/* --- FAB geometry ------------------------------------------------------ */
--be-fab-inset: 20px;
--be-fab-bottom: 20px; /* raised to 92px when the mobile bar is up */
/* --- stacking (kept BELOW Bootstrap offcanvas 1045 / modal 1055) ------- */
--be-z-sticky: 5;
--be-z-bar: 1030;
--be-z-fab: 1035;
--be-z-toast: 1050;
}
/* =============================================================================
5. DARK MODE
-----------------------------------------------------------------------------
Re-maps ONLY the semantic layer. The raw scales are untouched, so a sub-brand
accent (section 6) composes with dark mode for free — 2 themes x 5 brands
= 10 skins from one component set.
Key inversions:
brand LIGHTENS to brand-300 (a dark navy on a near-black page is invisible)
brand-fg flips to brand-950 (dark ink on the now-light brand fill)
the checked / selected tint flips from brand-50 to brand-950
shadows deepen to near-opaque black
Measured contrast (dark, bg #0b1014 / surface #151d23):
text grey-50 on surface ......... 16.15:1 AAA
muted grey-400 on surface ......... 7.12:1 AAA
brand brand-300 on surface ........ 8.53:1 AAA
brand-fg brand-950 on brand-300 ... 8.97:1 AAA
accent accent-400 on bg ........... 11.32:1 AAA
accent-fg grey-950 on accent-400 .. 10.41:1 AAA
border-strong grey-550 on surface .. 3.25:1 AA (non-text 1.4.11)
NB: the block below is DUPLICATED into the prefers-color-scheme query that
follows, so "no explicit attribute" still follows the OS.
==> KEEP THE TWO BLOCKS IN SYNC. <==
========================================================================== */
[data-theme="dark"] {
--be-bg: var(--be-grey-950);
--be-surface: var(--be-grey-900);
--be-surface-2: var(--be-grey-950); /* recessed wells go DARKER in dark */
--be-text: var(--be-grey-50);
--be-muted: var(--be-grey-400);
--be-border: var(--be-grey-800);
--be-border-strong: var(--be-grey-550);
--be-brand: var(--be-brand-300);
--be-brand-fg: var(--be-brand-950);
--be-brand-hover: var(--be-brand-200);
--be-brand-tint: var(--be-brand-950);
--be-brand-ink: var(--be-brand-300);
--be-accent: var(--be-accent-400);
--be-accent-fg: var(--be-grey-950);
--be-accent-tint: var(--be-accent-950);
--be-accent-ink: var(--be-accent-300);
/* the gradient shifts up one couple so the FAB stays legible on near-black */
--be-gradient-brand: linear-gradient(135deg, var(--be-brand-500), var(--be-brand-700));
--be-shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 1px rgba(0, 0, 0, .32);
--be-shadow-2: 0 6px 18px -8px rgba(0, 0, 0, .58);
--be-shadow-3: 0 14px 34px -14px rgba(0, 0, 0, .66);
--be-shadow-4: 0 40px 80px -32px rgba(0, 0, 0, .76);
/* NB: `color-scheme: dark` is deliberately NOT set here. On :root it would
repaint the UA canvas and every native form control across all 241 legacy
pages, whose text colours are hardcoded dark hex — an instantly unreadable
site. It is applied to `.be-scope` only, in section 7. */
}
/* --- OS preference, only when no explicit attribute has been stamped ------- */
@media (prefers-color-scheme: dark) {
/* :root:not([data-theme="light"]) — an explicit light choice always wins. */
:root:not([data-theme="light"]) {
--be-bg: var(--be-grey-950);
--be-surface: var(--be-grey-900);
--be-surface-2: var(--be-grey-950);
--be-text: var(--be-grey-50);
--be-muted: var(--be-grey-400);
--be-border: var(--be-grey-800);
--be-border-strong: var(--be-grey-550);
--be-brand: var(--be-brand-300);
--be-brand-fg: var(--be-brand-950);
--be-brand-hover: var(--be-brand-200);
--be-brand-tint: var(--be-brand-950);
--be-brand-ink: var(--be-brand-300);
--be-accent: var(--be-accent-400);
--be-accent-fg: var(--be-grey-950);
--be-accent-tint: var(--be-accent-950);
--be-accent-ink: var(--be-accent-300);
--be-gradient-brand: linear-gradient(135deg, var(--be-brand-500), var(--be-brand-700));
--be-shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 1px rgba(0, 0, 0, .32);
--be-shadow-2: 0 6px 18px -8px rgba(0, 0, 0, .58);
--be-shadow-3: 0 14px 34px -14px rgba(0, 0, 0, .66);
--be-shadow-4: 0 40px 80px -32px rgba(0, 0, 0, .76);
}
}
/* =============================================================================
6. SUB-BRAND ACCENTS
-----------------------------------------------------------------------------
Set data-accent on (boot script) or on any wrapper — custom properties
inherit, so a single section can carry its own identity.
Each suite gets the SAME lightness/saturation ladder as the navy parent; only
the hue moves. That is what lets four distinct products still read as one
family: identical value structure, identical component behaviour, different
hue. Every scale keeps brand-700 above 6.5:1 on white and brand-300 above
7:1 on the dark surface, so no accent silently degrades accessibility.
eduprime hue 264 violet-indigo #3b1f65 scholarly; echoes the AminiTech
house purple (#51347B family)
mfi hue 164 jade / teal #126a53 money and growth; same family
as the PesaBridge green
hms hue 344 garnet rose #691e32 clinical care, without reusing
the error red (hue ~5)
courier hue 30 burnt amber #794818 motion / parcels (UPS-coded)
ONLY courier also re-maps --be-accent-*: an amber brand beside the amber
BridgeERP accent would collapse into one colour, so courier swaps the accent
to a cool cyan. The other three keep the shipped orange accent — violet, jade
and garnet all pair cleanly with it.
========================================================================== */
/* --- EduPrime — violet-indigo -------------------------------------------- */
[data-accent="eduprime"] {
--be-brand-50: #f4f0fa;
--be-brand-100: #e6dcf4;
--be-brand-200: #cebce9;
--be-brand-300: #b399d8;
--be-brand-400: #8b6fb7;
--be-brand-500: #644098;
--be-brand-600: #4b2c7a;
--be-brand-700: #3b1f65;
--be-brand-800: #2f1850;
--be-brand-900: #23133c;
--be-brand-950: #180e28;
}
/* --- Bridge MFI Suite — jade / teal --------------------------------------- */
[data-accent="mfi"] {
--be-brand-50: #effaf7;
--be-brand-100: #dcf4ee;
--be-brand-200: #bbeadd;
--be-brand-300: #93d7c5;
--be-brand-400: #5cc1a6;
--be-brand-500: #2fa283;
--be-brand-600: #1c8267;
--be-brand-700: #126a53;
--be-brand-800: #0e5341;
--be-brand-900: #0b3d2f;
--be-brand-950: #08261e;
}
/* --- Bridge HMS Suite — garnet rose --------------------------------------- */
[data-accent="hms"] {
--be-brand-50: #faf0f2;
--be-brand-100: #f4dce2;
--be-brand-200: #e9bcc8;
--be-brand-300: #d99bac;
--be-brand-400: #b96e82;
--be-brand-500: #9d3f58;
--be-brand-600: #7e2a41;
--be-brand-700: #691e32;
--be-brand-800: #541728;
--be-brand-900: #3f131e;
--be-brand-950: #2a0e15;
}
/* --- Bridge Courier — burnt amber (+ cyan accent, to avoid a warm collision) */
[data-accent="courier"] {
--be-brand-50: #faf5f0;
--be-brand-100: #f4e8dc;
--be-brand-200: #e9d2bc;
--be-brand-300: #dcbfa3;
--be-brand-400: #c4996e;
--be-brand-500: #ae7337;
--be-brand-600: #8f5924;
--be-brand-700: #794818;
--be-brand-800: #623b13;
--be-brand-900: #4c2e10;
--be-brand-950: #36210d;
--be-accent-50: #eefbfe;
--be-accent-100: #d5f6fe;
--be-accent-200: #aaeefd;
--be-accent-300: #74e3fb;
--be-accent-400: #42d8fa;
--be-accent-500: #35c8e9;
--be-accent-600: #10b5da;
--be-accent-700: #097790; /* text-safe on white: 5.18:1 */
--be-accent-800: #095f72;
--be-accent-900: #074654;
--be-accent-950: #052b33;
}
/* ##########################################################################
## EVERYTHING BELOW THIS LINE IS SCOPED TO .be-scope ##
## Nothing here can touch a legacy page that has not opted in. ##
########################################################################## */
/* =============================================================================
7. SCOPE BASE + TYPOGRAPHY
========================================================================== */
.be-scope {
background-color: var(--be-bg);
color: var(--be-text);
font-family: var(--be-font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* A scope that only hosts fixed overlays must not paint a background band. */
.be-scope.be-fab-layer { background-color: transparent; color: inherit; }
/* `color-scheme` is applied HERE, not on :root — see the note in section 5.
Scoped like this it darkens native scrollbars, number spinners and date
pickers inside our surfaces only, and leaves the legacy pages alone. */
[data-theme="dark"] .be-scope { color-scheme: dark; }
[data-theme="light"] .be-scope { color-scheme: light; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .be-scope { color-scheme: dark; }
}
.be-scope *,
.be-scope *::before,
.be-scope *::after { box-sizing: border-box; }
.be-scope a { color: var(--be-brand-ink); text-decoration: none; }
.be-scope a:hover { text-decoration: underline; }
.be-scope h1, .be-scope h2, .be-scope h3, .be-scope h4 {
font-family: var(--be-font-display);
color: var(--be-text);
letter-spacing: -.015em;
line-height: 1.12;
margin: 0 0 .5em;
}
.be-scope h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.3rem); font-weight: 800; }
.be-scope h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 700; }
.be-scope h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); font-weight: 700; }
.be-scope p { margin: 0 0 1rem; }
.be-scope ul, .be-scope ol { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.be-scope .be-lead { font-size: 1.075rem; color: var(--be-muted); }
.be-scope .be-muted { color: var(--be-muted); }
.be-scope .be-num,
.be-scope [data-be="total"],
.be-scope [data-be="base"] { font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------------------
SELF-MATCH NOTE. `.be-scope .be-x` is a DESCENDANT selector: it does not
match an element that carries both classes ().
Block-level components that can plausibly sit on the scope element itself
therefore also list a `.be-scope.be-x` compound. Inline components
(buttons, pills, cards…) are always descendants and need no compound.
--------------------------------------------------------------------------- */
.be-scope .be-container,
.be-scope.be-container {
width: 100%;
max-width: var(--be-container);
margin-inline: auto;
padding-inline: var(--be-gutter);
}
.be-scope .be-section,
.be-scope.be-section { padding-block: clamp(48px, 5vw, 96px); }
.be-scope .be-section.is-banded,
.be-scope.be-section.is-banded {
background-color: var(--be-surface-2);
border-block: 1px solid var(--be-border);
}
.be-scope .be-sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
border: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
/* =============================================================================
8. .be-card · .be-eyebrow · .be-badge
========================================================================== */
/* --- .be-card — the .m-card spec: surface, 1px border, radius 18, e1 shadow,
hover lift -4px with a brand-mixed border ------------------------------ */
.be-scope .be-card {
background-color: var(--be-surface);
border: 1px solid var(--be-border);
border-radius: var(--be-radius-xl); /* 18px */
box-shadow: var(--be-shadow-1);
padding: 22px;
transition: transform var(--be-dur) var(--be-ease),
box-shadow var(--be-dur) var(--be-ease),
border-color var(--be-dur) var(--be-ease),
background-color .3s var(--be-ease);
}
.be-scope .be-card.is-interactive { cursor: pointer; }
.be-scope .be-card.is-interactive:hover,
.be-scope a.be-card:hover {
transform: translateY(-4px);
box-shadow: var(--be-shadow-3);
border-color: var(--be-brand-300);
}
/* Progressive enhancement: MIX the brand into the border rather than replace
it, so the hover ring stays a hairline instead of becoming a hard rule. */
@supports (color: color-mix(in srgb, red, red)) {
.be-scope .be-card.is-interactive:hover,
.be-scope a.be-card:hover {
border-color: color-mix(in srgb, var(--be-brand) 35%, var(--be-border));
}
}
.be-scope a.be-card { display: block; color: inherit; text-decoration: none; }
.be-scope a.be-card:hover { text-decoration: none; }
.be-scope .be-card-flat { box-shadow: none; }
.be-scope .be-card-tight { padding: 16px; }
.be-scope .be-card > :last-child { margin-bottom: 0; }
/* --- .be-eyebrow — the house kicker (12px / 700 / .16em / gradient dash) --- */
.be-scope .be-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 .6rem;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--be-brand-ink);
}
.be-scope .be-eyebrow::before {
content: "";
flex: 0 0 auto;
width: 26px;
height: 2px;
border-radius: 2px;
background: var(--be-gradient-hair);
}
.be-scope .be-eyebrow.is-centered { justify-content: center; }
/* --- .be-badge ------------------------------------------------------------ */
.be-scope .be-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: var(--be-radius-pill);
background-color: var(--be-brand-tint);
color: var(--be-brand-ink);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
/* =============================================================================
9. CALCULATOR SHELL
-----------------------------------------------------------------------------
Markup contract (as shipped in calculator.html):