:root {
/* ============================================================================
TradePortal tenant theme — ACTIVE values for this site.
Every variable the application actually supports is listed below. Uncomment
and set any you wish to override; the comment after each shows the app's
default (used when the line is absent). A fully-worked template with example
values lives alongside this file in theme-example.css — the two are kept in
sync, so the set of options here matches the template exactly.
============================================================================ */
/* --- Masthead (top nav bar) ------------------------------------------------ */
--theme-color-masthead-bg: #efb042; /* nav bar background — default #efb042 */
--theme-color-masthead-text: #000; /* nav bar icons & text — default #000 */
/* --- Page ------------------------------------------------------------------ */
--theme-color-body-bg: #f9fafb; /* page background — default #f1f5f9 */
/* --- Primary buttons (Sign In, Add to Cart…) ------------------------------- */
--theme-color-primary-button-bg: #004677; /* default #004677 */
--theme-color-primary-button-text: #ffffff; /* default #ffffff */
/* --theme-color-primary-button-bg-hover: #003a63; OPTIONAL — app auto-darkens bg ~15% if unset */
/* Legacy aliases — still honoured as the fallback for the primary button and
for the primary-interaction colour token. Prefer the --primary-button-*
names above; these are kept only for backward compatibility. */
--theme-color-primary-interaction-bg: #004677;
--theme-color-primary-interaction-text: #ffffff;
/* --- Secondary buttons ----------------------------------------------------- */
/* --theme-color-secondary-button-bg: #6b7280; */
/* --theme-color-secondary-button-text: #ffffff; */
/* --theme-color-secondary-button-bg-hover: #565d68; OPTIONAL — app auto-darkens bg ~15% if unset */
/* --- Hyperlinks ------------------------------------------------------------ */
/* Base link colour. The hover shade is fixed at #005a8a and is not themeable. */
/* --theme-color-secondary-interaction-hyperlink: #006ca7; */
/* --- Gray scale (ONLY these shades are wired to the theme) ----------------- */
/* --theme-color-gray-200: #e5e7eb; */
/* --theme-color-gray-300: #d1d5db; */
/* --theme-color-gray-500: #6b7280; */
/* --theme-color-gray-600: #4b5563; */
/* --theme-color-gray-700: #374151; */
/* --- Red scale (50–900) ---------------------------------------------------- */
/* --theme-color-red-50: #fef5f4; */
/* --theme-color-red-100: #fee5e2; */
/* --theme-color-red-200: #fcc5be; */
/* --theme-color-red-300: #f99d92; */
/* --theme-color-red-400: #f26754; */
/* --theme-color-red-500: #cd442c; */
/* --theme-color-red-600: #b93a24; */
/* --theme-color-red-700: #9a2e1d; */
/* --theme-color-red-800: #7f271a; */
/* --theme-color-red-900: #6a2419; */
/* --- Green scale (50–900) -------------------------------------------------- */
/* --theme-color-green-50: #f4fbf1; */
/* --theme-color-green-100: #e5f6df; */
/* --theme-color-green-200: #c9ecbd; */
/* --theme-color-green-300: #9cdb85; */
/* --theme-color-green-400: #6fb544; */
/* --theme-color-green-500: #5a9937; */
/* --theme-color-green-600: #477c2b; */
/* --theme-color-green-700: #386022; */
/* --theme-color-green-800: #2d4d1c; */
/* --theme-color-green-900: #253f18; */
/* --- Login image ----------------------------------------------------------- */
--theme-login-image-background-position: center; /* default center */
/* --- Logo --------------------------------------------------------------------
The app ships a built-in Trade Portal logo (auto light/dark by masthead colour).
To use your own, drop ONE of these onto your deployment — no rebuild needed:
public/theme/logo.svg (preferred — crisp at any size)
public/theme/logo.png
public/theme/logo.gif
It is picked up in that priority order; if none is present the built-in logo shows.
Your file fully replaces the built-in logo (mark + wordmark + colours + font).
FONT GUIDELINE — important for SVG logos:
Your logo is loaded as an , which cannot use web fonts. So any text in it
must be self-contained:
• PNG / GIF .................. font is baked into the image — anything works.
• SVG with text OUTLINED ..... convert the wordmark to vector paths (e.g.
"Convert to outlines" in your design tool).
Crisp at any size, renders exactly. RECOMMENDED.
• SVG with live ....... AVOID — it falls back to a system font unless
that exact font is installed on the viewer's
device. Outline the text instead.
(Note: the app UI font, Inter, is separate and is not changed by your logo.)
App / browser icons can likewise be overridden without a rebuild by dropping
same-named files into the web root (alongside index.html):
favicon.ico
apple-touch-icon-180x180.png
pwa-64x64.png pwa-192x192.png pwa-512x512.png maskable-icon-512x512.png
(favicon & apple-touch apply immediately; an already-installed PWA's home-screen
icon only refreshes on reinstall.)
Logo visibility on dark masthead backgrounds
If your logo has dark elements that disappear on a dark masthead, use one or
both of these. All default to a no-op (transparent / 0 / none).
Option A — white pill/badge behind the logo:
--theme-logo-bg: #ffffff;
--theme-logo-padding: 4px 10px;
--theme-logo-border-radius: 8px;
Option B — white outline glow around the logo pixels (no box):
--theme-logo-filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white)
drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white);
*/
}
/* ----------------------------------------------------------------------------
Semantic CSS targeting hooks
Stable class names for styling specific masthead zones. All Tailwind utility
classes remain in place — these classes are additive.
.masthead Root