Documentation

Triba portal embed

The portal bundle (portal.js) mounts <triba-portal>: magic-link sign-in and the signed-in member experience.

Add it to your page

Load the module script with your Concord API key via the triba-key query param, or set data-api-key on the element.
Place <triba-portal></triba-portal> where the widget should render.

index.html

<script
  type="module"
  src="https://cdn.triba.tech/latest/portal.js?triba-key=YOUR_TRIBA_KEY"
></script>
<triba-portal></triba-portal>

Customize with CSS variables

Set custom properties on triba-portal (or on :root for shared defaults). They inherit into the inner root.

--triba-* — fonts and brand colours (shared with other Triba embeds).
--portal-* — portal shell only (page background, header bar, hero overlay gradient, header text).

Defaults are declared with :where(triba-portal) (low specificity), so a normal triba-portal { … } rule overrides them without !important.

1. Scoping: `:root` vs `triba-portal`

Use :root when every Triba widget on the page should share the same --triba-* values. Use triba-portal { … } to theme only this portal or to override :root for one instance. Shell tokens such as --portal-bg, --portal-header-bg, and hero gradient tokens only affect the portal; define them on triba-portal unless you deliberately set them on :root for multiple portals.

:root — one global --triba-* baseline for the site or page.
triba-portal — overrides and portal-only --portal-* for a single embed.

scoping.css

/* Shared with other Triba embeds on the page */
:root {
  --triba-font-family: "DM Sans", system-ui, sans-serif;
  --triba-primary: #0f766e;
}

/* This portal only */
triba-portal {
  --triba-font-size: 18px;
  --portal-bg: #1c1917;
  --portal-header-bg: #134e4a;
  --portal-hero-gradient-accent: #0d9488;
  --portal-hero-gradient-strength: 30%;
}

2. Colour

Variable	Purpose
`--triba-primary`	Brand accent (primary buttons, accents, highlights, sign-in card accent bar and input focus). Default `#000000`. Same as other Triba widgets.
`--triba-on-primary`, `--triba-on-primary-rgb`	Text on primary surfaces; RGB used where shadows need it.
`--portal-bg`	Page canvas: sign-in, outer embed fill, and signed-in content column (trip list). Default `#f2f1ef`. Open-trip detail view uses a white content surface via CSS; the hero still respects this token where applied.
`--portal-header-bg`	Signed-in top bar only. Default `#000000`. Independent of `--portal-bg`.
`--portal-hero-gradient-accent`, `--portal-hero-gradient-strength`	Signed-in experience hero: tint over the photo on `.triba-portal-dash__hero-editorial-gradient`. Accent defaults to `var(--triba-primary)`; strength is a percentage for `color-mix` (default `22%`).
`--portal-trips-heading-fg`, `--portal-trips-muted-fg`	Optional overrides for the trip list / empty-state title and supporting text. If unset, the embed picks light or dark text from the page background luminance (see also `data-trips-typography`).
`data-trips-typography`	Set to `manual` on `triba-portal` to skip automatic trip-list text colours (use your own CSS tokens only).

3. Typography (`--triba-*`)

Variable	Purpose
`--triba-font`	Optional root `font` shorthand; otherwise longhands below apply.
`--triba-font-style`, `--triba-font-weight`, `--triba-font-size`, `--triba-line-height`, `--triba-font-family`	Root typography (including the signed-in header bar, which uses `--triba-font-family`).
`--triba-letter-spacing`, `--triba-font-variant`, `--triba-font-feature-settings`	Root OpenType / spacing.

Per element

Headings: --triba-font-h1 … --triba-font-h6 shorthands, or --triba-hN-font-* longhands (N = 1–6). Other tags: --triba-font-p, --triba-font-label, --triba-font-input, --triba-font-button (each with matching --triba-*-font-* longhands).

Element	Tokens
`h1`–`h6`	`--triba-font-hN` or `--triba-hN-font-{family,size,weight,line-height}`; optional `--triba-h1-letter-spacing`
`p`	`--triba-font-p` or `--triba-p-font-{family,size,weight,line-height}`
`label`	`--triba-font-label` or `--triba-label-font-{family,size,weight,line-height}`
`input`, `textarea`, `select`	`--triba-font-input` or `--triba-input-font-{family,size,weight,line-height}`
`button`	`--triba-font-button` or `--triba-button-font-{family,size,weight,line-height}`

portal-typography.css

triba-portal {
  --triba-font-family: "DM Sans", system-ui, sans-serif;
  --triba-font-size: 17px;
  --triba-line-height: 1.55;

  --triba-h1-font-family: "Space Grotesk", sans-serif;
  --triba-h1-font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  --triba-h1-font-weight: 700;

  --triba-font-button: 700 1rem/1.2 "Space Grotesk", sans-serif;
}

HTML attributes

Attribute	Purpose
`data-api-key`	Concord API key (`x-api-key`). Omit if the script URL includes `triba-key`.
`data-router-basename`	Prefix for hash routes (default `/triba-portal`). Use when another script shares `location.hash`.

Routing

After sign-in, navigation uses only the URL hash; the host path does not change. Examples: #/triba-portal (home) and #/triba-portal/experience/<booking-id>. If that clashes with another router, set data-router-basename or load the embed in an iframe / on a page without competing hash routes.

Live theme

Tweaks apply as inline CSS on <triba-portal> — same tokens as in the docs.

Brand

Primary accent--triba-primary

#fcb124

Manual text on primary--triba-on-primary

auto

Shell & background

Page background--portal-bg

#2a2927

Header bar--portal-header-bg

#444444

Manual header text--portal-header-fg

auto

Signed-in hero overlay

Gradient accent--portal-hero-gradient-accent

#fcb124

Tint strength--portal-hero-gradient-strength

28%

Typography

Base font size--triba-font-size

16px

Body / UI font--triba-font-family

Heading (H1) font--triba-h1-font-family