/* Trek design tokens * ------------------------------------------------------------------ * Single source of colour, spacing, radius, type, shadow and chart values for the * model system. Naming follows the Brand and Design System: --trek- prefix, grouped * as color-brand, color-neutral, color-state, color-dataviz, color-semantic, space, * radius, font, shadow, chart. * * Use SEMANTIC tokens in app UI, for example --trek-color-semantic-text, so a theme * change flows through. Use raw brand tokens only when you need that exact colour * regardless of theme. * * Light only. The dark palette was removed; see the note at the end of this file. * * ASCII only, per the firm writing rules. Non-ASCII in deployed CSS and JS breaks * silently. * ------------------------------------------------------------------ */ :root { /* ---- brand ---- */ --trek-color-brand-navy: #18344B; --trek-color-brand-navy-dark: #0F2334; --trek-color-brand-orange: #F7941E; --trek-color-brand-orange-light: #F9A544; /* ---- neutrals ---- */ --trek-color-neutral-white: #FFFFFF; --trek-color-neutral-light-blue: #DFEAF2; --trek-color-neutral-panel: #F2F5F7; --trek-color-neutral-light-gray: #E2E2E2; --trek-color-neutral-mid-gray: #8D9092; --trek-color-neutral-dark-gray: #58595B; /* ---- state ---- * Three distinct meanings that must never be swapped. Warning amber means review * this. Danger red means something is wrong. Brand orange is a UI accent with no * status meaning, which is why it never appears here. */ --trek-color-state-success: #2E7D46; --trek-color-state-success-bg: #E4F1E8; --trek-color-state-warning: #9A5B00; --trek-color-state-warning-bg: #FBEFDA; --trek-color-state-danger: #B3261E; --trek-color-state-danger-bg: #F7E3E1; /* ---- data visualisation ---- * Eight categorical colours harmonised inside the navy and orange family. Use the * first N for an N-series chart, in order, so a two-series chart gets the most * separated pair. Each has a dark-theme shade further down, so a series keeps its * identity on white or on navy. * * Not for sequential or diverging data. One measure from low to high needs a * single-hue ramp instead. */ --trek-color-dataviz-1: #2F669D; /* navy blue */ --trek-color-dataviz-2: #9D752F; /* amber */ --trek-color-dataviz-3: #2F929D; /* teal */ --trek-color-dataviz-4: #9D2F41; /* rose */ --trek-color-dataviz-5: #2F389D; /* indigo */ --trek-color-dataviz-6: #9D922F; /* gold */ --trek-color-dataviz-7: #752F9D; /* violet */ --trek-color-dataviz-8: #2F9D7E; /* sea green */ /* ---- semantic: light ---- */ --trek-color-semantic-heading: #18344B; --trek-color-semantic-text: #58595B; --trek-color-semantic-text-muted: #8D9092; --trek-color-semantic-text-on-dark: #FFFFFF; --trek-color-semantic-surface: #FFFFFF; --trek-color-semantic-surface-sunken: #F2F5F7; --trek-color-semantic-surface-inverse: #18344B; --trek-color-semantic-border: #E2E2E2; --trek-color-semantic-border-strong: #9FB2C0; --trek-color-semantic-link: #18344B; --trek-color-semantic-accent: #F7941E; --trek-color-semantic-focus: #F7941E; /* ---- spacing ---- */ --trek-space-0: 0; --trek-space-1: 4px; --trek-space-2: 8px; --trek-space-3: 12px; --trek-space-4: 16px; --trek-space-5: 24px; --trek-space-6: 32px; --trek-space-7: 48px; --trek-space-8: 64px; /* ---- radius ---- */ --trek-radius-sm: 6px; --trek-radius-md: 8px; --trek-radius-lg: 10px; --trek-radius-pill: 20px; /* ---- type ---- * Montserrat for headings, Inter for body and UI, Consolas for code. The fallbacks * matter: if the webfonts do not load on the intranet, the stack below degrades to a * close system equivalent rather than to a serif. */ --trek-font-family-heading: 'Montserrat', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; --trek-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --trek-font-family-mono: 'Consolas', ui-monospace, 'SF Mono', Menlo, monospace; --trek-font-size-display: 38px; --trek-font-size-h2: 28px; --trek-font-size-h3: 19px; --trek-font-size-body: 16px; --trek-font-size-small: 14px; --trek-font-size-label: 13px; --trek-font-weight-regular: 400; --trek-font-weight-medium: 500; --trek-font-weight-semibold: 600; --trek-font-weight-bold: 700; --trek-font-leading-tight: 1.25; --trek-font-leading-body: 1.55; /* ---- shadow ---- */ --trek-shadow-card: 0 1px 3px rgba(24, 52, 75, 0.08); --trek-shadow-lg: 0 6px 20px rgba(24, 52, 75, 0.14); /* ---- chart ---- * The chart rules expressed as tokens so every chart obeys them without each * component remembering to. Line weight matches the icon stroke. Donut cutout and * radar fill are fixed by the guide. One tooltip style across all charts. */ --trek-chart-line-width: 2px; --trek-chart-donut-cutout: 62%; --trek-chart-radar-fill-opacity: 0.12; --trek-chart-grid: #E2E2E2; --trek-chart-axis: #8D9092; --trek-chart-area-opacity: 0.08; --trek-chart-tooltip-bg: #18344B; --trek-chart-tooltip-text: #FFFFFF; --trek-chart-tooltip-radius: 8px; --trek-chart-point-radius: 0; --trek-chart-point-radius-hover: 4px; } /* ------------------------------------------------------------------ * Self-hosted webfonts. * * Local paths, not fonts.googleapis.com, because the guide says not to depend on a * remote CDN in production and the intranet may have no outbound access. Drop the six * woff2 files into a fonts/ folder beside this stylesheet. Until they are there the * fallback stack renders a close system equivalent, so nothing breaks. * ------------------------------------------------------------------ */ /* Self-hosted, per the brand guide: no external font CDN, so nothing leaks a request to a third party and nothing breaks when one is unreachable. Files come from the @fontsource packages, which are the Google Fonts originals repackaged for npm under the SIL Open Font License. Latin subset only, which is what keeps each file under 25 KB. Montserrat 500 and Inter 500 are deliberately absent. Only the weights actually used are shipped, because an unused font file is a download nobody benefits from. Montserrat 600 and 700 cover headings; Inter 400, 500 and 600 cover body, UI and emphasis. */ @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/montserrat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ------------------------------------------------------------------ * Shared primitives, matching the component specs so a button looks the same in the * admin console and on the intranet. * ------------------------------------------------------------------ */ .trek-btn { font-family: var(--trek-font-family-body); font-size: var(--trek-font-size-small); font-weight: var(--trek-font-weight-semibold); padding: 10px 20px; min-height: 40px; border-radius: var(--trek-radius-md); border: 2px solid transparent; cursor: pointer; background: var(--trek-color-semantic-surface); color: var(--trek-color-semantic-heading); } .trek-btn--primary { background: var(--trek-color-brand-navy); color: var(--trek-color-semantic-text-on-dark); } .trek-btn--primary:hover:not(:disabled) { background: var(--trek-color-brand-navy-dark); } .trek-btn--secondary { background: var(--trek-color-neutral-white); color: var(--trek-color-brand-navy); border-color: var(--trek-color-brand-navy); } .trek-btn--accent { background: var(--trek-color-brand-orange); color: var(--trek-color-semantic-text-on-dark); } .trek-btn:disabled, .trek-btn--disabled { background: var(--trek-color-neutral-light-gray); color: var(--trek-color-neutral-mid-gray); cursor: not-allowed; } .trek-badge { display: inline-block; padding: 3px 10px; border-radius: var(--trek-radius-pill); font-size: 12px; font-weight: var(--trek-font-weight-semibold); } .trek-badge--navy { background: var(--trek-color-brand-navy); color: #FFFFFF; } .trek-badge--ok { background: var(--trek-color-state-success-bg); color: var(--trek-color-state-success); } .trek-badge--warn { background: var(--trek-color-state-warning-bg); color: var(--trek-color-state-warning); } .trek-badge--danger { background: var(--trek-color-state-danger-bg); color: var(--trek-color-state-danger); } .trek-badge--quiet { background: var(--trek-color-neutral-panel); color: var(--trek-color-semantic-text); } .trek-card { background: var(--trek-color-semantic-surface); border: 1px solid var(--trek-color-semantic-border); border-radius: var(--trek-radius-lg); padding: 18px; box-shadow: var(--trek-shadow-card); } .trek-input { font-family: var(--trek-font-family-body); font-size: var(--trek-font-size-small); padding: 9px 12px; border: 1px solid var(--trek-color-semantic-border); border-radius: var(--trek-radius-md); background: var(--trek-color-semantic-surface); color: var(--trek-color-semantic-text); } /* Focus ring, scoped deliberately. * * A visible focus state is required and this is the orange ring the guide specifies. * The selectors are limited to Trek primitives and to anything inside a .trek-scope * container, because this stylesheet is loaded inside WordPress alongside a theme and * other plugins. An unscoped rule here would repaint the focus ring on every form and * link across the whole site, which is not this file's business. * * Standalone apps that own their whole page, such as the admin console, add the global * rule in their own stylesheet. */ .trek-input:focus, .trek-btn:focus-visible, .trek-scope a:focus-visible, .trek-scope select:focus, .trek-scope input:focus, .trek-scope textarea:focus, .trek-scope button:focus-visible { outline: 2px solid var(--trek-color-semantic-focus); outline-offset: 1px; border-color: var(--trek-color-semantic-focus); } .trek-callout { border-left: 6px solid var(--trek-color-brand-orange); border-radius: 0 var(--trek-radius-md) var(--trek-radius-md) 0; padding: 15px 20px; margin: 14px 0; font-size: var(--trek-font-size-small); background: var(--trek-color-semantic-surface-sunken); } .trek-callout--warning { border-left-color: var(--trek-color-state-warning); background: var(--trek-color-state-warning-bg); } .trek-callout--danger { border-left-color: var(--trek-color-state-danger); background: var(--trek-color-state-danger-bg); } .trek-callout__label { font-family: var(--trek-font-family-heading); font-weight: var(--trek-font-weight-bold); display: block; margin-bottom: 4px; } /* Logo minimums: 42px in navigation, 44px in footers. */ .trek-logo--nav { height: 42px; width: auto; display: block; } .trek-logo--footer { height: 44px; width: auto; display: block; } /* One tooltip style across all charts, shared by Chart.js and uPlot. */ .trek-chart-tooltip { position: absolute; pointer-events: none; background: var(--trek-chart-tooltip-bg); color: var(--trek-chart-tooltip-text); border-radius: var(--trek-chart-tooltip-radius); padding: 8px 12px; font-family: var(--trek-font-family-body); font-size: var(--trek-font-size-label); line-height: 1.45; box-shadow: var(--trek-shadow-lg); z-index: 10; white-space: nowrap; } .trek-chart-tooltip__value { font-family: var(--trek-font-family-mono); font-variant-numeric: tabular-nums; } /* * DARK MODE IS NOT SUPPORTED, and the palette that half-implemented it has been removed. * * It redefined the SEMANTIC tokens but not the BRAND ones, so --trek-color-brand-navy stayed * navy while the surface behind it turned navy. Model codes, fee and strategist labels and * button text all rendered invisible. The filter pills were worse: they carry literal hex * inline to beat Elementor's theme, so they could not respond to a theme at all. * * The code is gone rather than merely disabled. A half-finished dark palette sitting behind an * attribute is something that gets re-enabled by accident, and the failure mode is a performance * page with unreadable figures. * * If it is ever wanted properly, it needs dark equivalents for the BRAND tokens as well, and the * pills need to stop carrying inline hex. That is a deliberate piece of work, not a media query. */