/* ============================================================
BIFROST DESIGN SYSTEM — Foundation stylesheet
colors_and_type.css · the single source of truth
(Bifrost delivers infrastructure-grade critical integrations. Re-skinned from
the Techneaux system: navy + the Bifrost spectrum replace the
orange accent; structure, type scale, spacing, components are
inherited. Variable/class prefix stays --tx-/.tx- so every
template re-skins automatically.)
------------------------------------------------------------
Link this one file and you have the whole system: brand
colors, the type system, spacing, radii, shadows, and a set
of semantic helper classes. Works in light and dark.
TYPE ROLES (from the Techneaux brand spec):
• Inter Tight Black → big emphasis: slide/hero titles,
large stat numbers. Narrow + heavy.
• Montserrat → section titles, eyebrows, labels,
kickers, buttons. Always the
fallback for Inter Tight.
• Open Sans → body copy and UI text.
IMPORTANT — Inter Tight availability:
Inter Tight is frequently NOT installed in Office / Canva /
a user's OS. Every display stack therefore falls back to
Montserrat, which is wider but visually compatible. In HTML
we load Inter Tight from Google Fonts so it renders; when a
downstream tool lacks it, Montserrat carries the weight.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,400..900;1,400..900&family=Alegreya+Sans+SC:wght@400;500;700;800;900&family=Azeret+Mono:wght@100..900&display=swap');
/* Local self-hosted fonts (variable .ttf) — all three families render offline,
in Office/Canva exports, and in locked-down environments with no Google Fonts.
The Google @import above stays as a redundant online source. */
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:local('Montserrat'),url('./fonts/Montserrat-Regular.ttf') format('truetype');}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:local('Montserrat Medium'),url('./fonts/Montserrat-Medium.ttf') format('truetype');}
@font-face{font-family:'Montserrat';font-weight:600;font-style:normal;font-display:swap;src:local('Montserrat SemiBold'),url('./fonts/Montserrat-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Montserrat';font-weight:700;font-style:normal;font-display:swap;src:local('Montserrat Bold'),url('./fonts/Montserrat-Bold.ttf') format('truetype');}
@font-face{font-family:'Montserrat';font-weight:800;font-style:normal;font-display:swap;src:local('Montserrat ExtraBold'),url('./fonts/Montserrat-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Montserrat';font-weight:900;font-style:normal;font-display:swap;src:local('Montserrat Black'),url('./fonts/Montserrat-Black.ttf') format('truetype');}
/* Inter Tight — variable (covers 100–900); one file each for roman + italic. */
@font-face{font-family:'Inter Tight';font-weight:100 900;font-style:normal;font-display:swap;src:local('Inter Tight'),url('./fonts/InterTight-Variable.ttf') format('truetype');}
@font-face{font-family:'Inter Tight';font-weight:100 900;font-style:italic;font-display:swap;src:local('Inter Tight'),url('./fonts/InterTight-Italic-Variable.ttf') format('truetype');}
/* Open Sans — variable (covers 300–800); one file each for roman + italic. */
@font-face{font-family:'Open Sans';font-weight:300 800;font-style:normal;font-display:swap;src:local('Open Sans'),url('./fonts/OpenSans-Variable.ttf') format('truetype');}
@font-face{font-family:'Open Sans';font-weight:300 800;font-style:italic;font-display:swap;src:local('Open Sans'),url('./fonts/OpenSans-Italic-Variable.ttf') format('truetype');}
/* Alegreya Sans SC — logo-echo small-caps face for eyebrows/kickers (--font-eyebrow). Self-hosted for offline + Office/Canva export parity. */
@font-face{font-family:'Alegreya Sans SC';font-weight:400;font-style:normal;font-display:swap;src:local('Alegreya Sans SC'),url('./fonts/AlegreyaSansSC-Regular.ttf') format('truetype');}
@font-face{font-family:'Alegreya Sans SC';font-weight:500;font-style:normal;font-display:swap;src:local('Alegreya Sans SC Medium'),url('./fonts/AlegreyaSansSC-Medium.ttf') format('truetype');}
@font-face{font-family:'Alegreya Sans SC';font-weight:700;font-style:normal;font-display:swap;src:local('Alegreya Sans SC Bold'),url('./fonts/AlegreyaSansSC-Bold.ttf') format('truetype');}
@font-face{font-family:'Alegreya Sans SC';font-weight:800;font-style:normal;font-display:swap;src:local('Alegreya Sans SC ExtraBold'),url('./fonts/AlegreyaSansSC-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'Alegreya Sans SC';font-weight:900;font-style:normal;font-display:swap;src:local('Alegreya Sans SC Black'),url('./fonts/AlegreyaSansSC-Black.ttf') format('truetype');}
/* Azeret Mono, variable (100–900). The ONLY approved mono face, shared with
Techneaux. Deliberately not JetBrains Mono / IBM Plex Mono / Roboto Mono /
Space Mono / Source Code Pro: those read as generic AI-generated output.
Squared terminals and a slightly condensed width read like panel labeling and
instrumentation, which is exactly right for SCADA and telemetry work. */
@font-face{font-family:'Azeret Mono';font-weight:100 900;font-style:normal;font-display:swap;src:local('Azeret Mono'),url('./fonts/AzeretMono-Variable.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Azeret Mono';font-weight:100 900;font-style:normal;font-display:swap;src:local('Azeret Mono'),url('./fonts/AzeretMono-Variable-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
:root {
/* ========================================================
BRAND COLORS (exact values sampled from the Bifrost marks)
--------------------------------------------------------
Accent = Bifrost VIOLET (used sparingly, the orange's role).
The signature device is the BIFROST SPECTRUM gradient
(rose -> orchid -> violet) — see --bf-spectrum below.
The --tx-orange* names are kept ONLY so inherited components
resolve; their values are now Bifrost violet.
-------------------------------------------------------- */
--tx-orange: #8257A4; /* @kind color */ /* Bifrost violet (accent) */
--tx-orange-hover: #6E477F; /* @kind color */
--tx-orange-press: #5C3A6B; /* @kind color */
--tx-orange-tint: rgba(130,87,164,0.12); /* @kind color */
/* Bifrost spectrum — the signature gradient device. */
--bf-rose: #D2749E; /* @kind color */
--bf-orchid: #A360A6; /* @kind color */
--bf-violet: #8257A4; /* @kind color */
--bf-navy: #20204A; /* @kind color */ /* primary brand navy (wordmark + Sleipnir body) */
--bf-navy-deep: #14132C; /* @kind color */ /* dark-theme ground (deeper than brand navy) */
--bf-spectrum: linear-gradient(90deg, #D2749E 0%, #A360A6 52%, #8257A4 100%); /* @kind other */
--bf-spectrum-v: linear-gradient(180deg, #D2749E 0%, #A360A6 52%, #8257A4 100%); /* @kind other */
--bf-spectrum-navy: linear-gradient(90deg, #D2749E 0%, #A360A6 34%, #8257A4 64%, #20204A 100%); /* @kind other */
--tx-ink: #20204A; /* @kind color */ /* Bifrost navy — the ink */
--tx-graphite: #2A2856; /* @kind color */
--tx-slate: #211E47; /* @kind color */
--tx-grey: #84839A; /* @kind color */ /* cool neutral grey */
--tx-grey-light: #BFBECE; /* @kind color */
--tx-fog: #3A3766; /* @kind color */
--tx-cloud: #EEEDF4; /* @kind color */ /* cool light surface */
--tx-line: #E4E3EC; /* @kind color */
--tx-line-dark: #34325E; /* @kind color */
--tx-line-dark-2: #2C2A52; /* @kind color */
--tx-white: #FFFFFF; /* @kind color */
/* Status — sparing use, never competes with orange */
--status-success: #2F8A4E; /* @kind color */
--status-warning: #D89A17; /* @kind color */
--status-danger: #C23B3B; /* @kind color */
--status-info: #3C57C6; /* @kind color */
/* ========================================================
SEMANTIC TOKENS — LIGHT THEME (default)
Override the same names under [data-theme="dark"].
-------------------------------------------------------- */
--bg: var(--tx-white); /* @kind color */
--surface: var(--tx-cloud); /* @kind color */
--surface-2: var(--tx-white); /* @kind color */
--band: var(--tx-ink); /* @kind color */
--fg: var(--tx-ink); /* @kind color */
--fg-secondary: var(--tx-fog); /* @kind color */
--fg-muted: var(--tx-grey); /* @kind color */
--fg-on-band: var(--tx-white); /* @kind color */
--fg-on-band-2: var(--tx-grey-light); /* @kind color */
--border: var(--tx-line); /* @kind color */
--border-strong: var(--tx-grey-light); /* @kind color */
--accent: var(--tx-orange); /* @kind color */
--accent-fg: var(--tx-white); /* @kind color */
/* ========================================================
TYPE — families
-------------------------------------------------------- */
--font-hero: 'Inter Tight', 'Montserrat', 'Arial Narrow', sans-serif; /* @kind font */
--font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* @kind font */
--font-body: 'Open Sans', 'Segoe UI', Roboto, system-ui, sans-serif; /* @kind font */
--font-mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* @kind font */
--font-eyebrow: 'Alegreya Sans SC', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* @kind font */ /* logo-echo small-caps face — eyebrows & kickers only */
/* ========================================================
TYPE — scale
-------------------------------------------------------- */
--fs-11: 0.6875rem;
--fs-12: 0.75rem;
--fs-13: 0.8125rem;
--fs-14: 0.875rem;
--fs-16: 1rem;
--fs-18: 1.125rem;
--fs-20: 1.25rem;
--fs-24: 1.5rem;
--fs-28: 1.75rem;
--fs-32: 2rem;
--fs-40: 2.5rem;
--fs-48: 3rem;
--fs-60: 3.75rem;
--fs-72: 4.5rem;
--fs-96: 6rem;
--fs-128: 8rem;
--lh-tight: 1.02; /* @kind font */
--lh-snug: 1.12; /* @kind font */
--lh-normal: 1.46; /* @kind font */
--lh-relaxed: 1.55; /* @kind font */
--tracking-tight: -0.012em; /* @kind font */
--tracking-normal: 0; /* @kind font */
--tracking-label: 0.10em; /* @kind font */
--tracking-eyebrow:0.16em; /* @kind font */
--tracking-kicker: 0.22em; /* @kind font */
/* ========================================================
SPACING
-------------------------------------------------------- */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
--s-20: 80px; --s-24: 96px;
/* ========================================================
RADII
-------------------------------------------------------- */
--radius-sm: 4px;
--radius-md: 6px; /* cards */
--radius-lg: 7px; /* bands, callouts */
--radius-xl: 12px;
--radius-pill: 9999px;
/* ========================================================
SHADOWS (low, soft — never heavy)
-------------------------------------------------------- */
--shadow-xs: 0 1px 2px rgba(17,18,20,0.06);
--shadow-sm: 0 1px 3px rgba(17,18,20,0.08), 0 1px 2px rgba(17,18,20,0.04);
--shadow-md: 0 4px 12px rgba(17,18,20,0.08), 0 2px 4px rgba(17,18,20,0.04);
--shadow-lg: 0 14px 36px rgba(17,18,20,0.14), 0 4px 8px rgba(17,18,20,0.06);
--shadow-brand: 0 10px 28px rgba(130,87,164,0.30);
--focus-ring: 0 0 0 3px rgba(130,87,164,0.38); /* @kind shadow */
/* Motion */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
}
/* ============================================================
DARK THEME
Apply via or ,
or wrap any subtree in [data-theme="dark"].
============================================================ */
[data-theme="dark"] {
--bg: var(--bf-navy-deep);
--surface: var(--tx-slate);
--surface-2: var(--tx-graphite);
--band: var(--tx-graphite);
--fg: var(--tx-white);
--fg-secondary: var(--tx-grey-light);
--fg-muted: var(--tx-grey);
--fg-on-band: var(--tx-white);
--fg-on-band-2: var(--tx-grey-light);
--border: var(--tx-line-dark);
--border-strong: var(--tx-line-dark);
--accent: #AE82CE; /* brightened violet — legible on deep navy */
--accent-fg: var(--bf-navy); /* navy label on the lighter-violet button */
}
/* ============================================================
BASE
============================================================ */
html {
font-family: var(--font-body);
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ============================================================
SEMANTIC TYPE CLASSES
Use these, or copy their declarations inline.
============================================================ */
/* Hero / slide title — Inter Tight Black, UPPERCASE (the default for headings). */
.tx-hero {
font-family: var(--font-hero);
font-weight: 900;
font-size: clamp(2.5rem, 6vw, var(--fs-96));
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
text-transform: uppercase;
color: var(--fg);
}
/* Title — Inter Tight Black, H2 / sub-headline scale. CASE BY CASE: unlike
.tx-hero (H1, almost always ALL CAPS), an H2 is sentence case by default —
add .tx-caps when an H2 genuinely wants all caps. */
.tx-title {
font-family: var(--font-hero);
font-weight: 900;
font-size: var(--fs-32);
line-height: 1.05;
letter-spacing: var(--tracking-tight);
color: var(--fg);
}
/* Casing modifiers: .tx-caps forces all caps; .tx-mixedcase forces sentence case. */
.tx-caps { text-transform: uppercase; }
.tx-hero.tx-mixedcase, .tx-title.tx-mixedcase { text-transform: none; }
/* Section title — Montserrat Bold, uppercase. The workhorse header. */
.tx-section {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-13);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--fg);
}
/* Eyebrow — Alegreya Sans SC caps above a title (logo-echo face). */
.tx-eyebrow {
font-family: var(--font-eyebrow);
font-weight: 800;
font-size: var(--fs-12);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--accent);
}
/* Kicker — tiny tracked Alegreya Sans SC label (mast head, footers, logo-echo face). */
.tx-kicker {
font-family: var(--font-eyebrow);
font-weight: 800;
font-size: var(--fs-11);
letter-spacing: var(--tracking-kicker);
text-transform: uppercase;
color: var(--accent);
}
/* Card key — orange Montserrat label inside a card. */
.tx-key {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-12);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--accent);
}
/* Label — neutral Montserrat caps. */
.tx-label {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-12);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--fg-muted);
}
/* Lede — large intro paragraph. */
.tx-lede {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-18);
line-height: var(--lh-relaxed);
color: var(--fg-secondary);
}
/* Sub-question — muted display lead-in line above a single-line headline
(used inside .tx-bracket-head.is-single). */
.tx-subq {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-18);
color: var(--fg-muted);
}
/* Body */
.tx-body, .tx-prose p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--fs-16);
line-height: var(--lh-relaxed);
color: var(--fg-secondary);
}
.tx-body-sm {
font-family: var(--font-body);
font-size: var(--fs-14);
line-height: var(--lh-normal);
color: var(--fg-secondary);
}
.tx-caption {
font-family: var(--font-body);
font-size: var(--fs-12);
line-height: var(--lh-normal);
color: var(--fg-muted);
}
/* Big stat number — Inter Tight Black, orange. */
.tx-stat {
font-family: var(--font-hero);
font-weight: 900;
font-size: var(--fs-40);
line-height: 1;
color: var(--accent);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Mono — DATA voice only: code, hex values, metric keys, spec categories,
tabular meta. Do NOT use mono for human contact info (emails, names, phone)
or body text — those read as an "AI terminal" tell. Contacts use Open Sans. */
.tx-mono {
font-family: var(--font-mono);
font-size: var(--fs-13);
color: var(--fg-muted);
}
/* ============================================================
SIGNATURE ELEMENTS
============================================================ */
/* The rule that tops every document. In Bifrost it carries the SPECTRUM
(the signature device). Use .tx-toprule--solid for a plain
violet rule where the gradient would be too loud. */
.tx-toprule { height: 4px; background: var(--bf-spectrum); border-radius: 2px; }
.tx-toprule--solid { background: var(--accent); }
/* ── Bracket devices ─────────────────────────────────────────
X-derived brackets (the X-mark split at its seam, rotated). The
signature Techneaux framing device. Mirror the pair: left bracket
is grey-top/orange-bottom, right is orange-top/grey-bottom.
Files: assets/brand/bracket-left.png · bracket-right.png
------------------------------------------------------------ */
/* Heading anchor — bracket sized by headline LINE COUNT, vertically centered,
aspect ratio preserved. The signature replacement for a floating eyebrow.
.tx-brk is an ![]()
(not a background) so width follows the bracket's natural
aspect; height is set per case and never stretched/distorted. The bracket is
never recolored (grey-top / orange-bottom), always a LEFT-side anchor, never
placed inline inside the headline text. The eyebrow (.tx-eyebrow) stays ABOVE
this row, unbracketed.
Rule A — multi-line headline → .is-multiline (bracket ≈ 2 headline line-heights):
…
Two or three line headline…
Rule B — single-line headline WITH a sub-question → .is-single (bracket spans
the sub-question + headline; headline drops a step and goes nowrap):
…
Sub-question lead-in?
Single-line answer.
Rule C — single line + no sub-question: anchor eyebrow + headline as the two-line
block per Rule B. No eyebrow either: use Rule A (bracket ≈ 2 line-heights). */
.tx-bracket-head { display: flex; gap: 14px; align-items: center; }
.tx-bracket-head .tx-brk { flex: none; width: auto; } /* height set per case */
.tx-bracket-head.is-multiline .tx-brk { height: 0.86in; } /* ~2 headline line-heights */
.tx-bracket-head.is-single .tx-brk { height: 0.64in; } /* spans sub-question + headline */
.tx-bracket-head.is-single .tx-hcol { display: flex; flex-direction: column; min-width: 0; }
.tx-bracket-head.is-single .tx-subq { margin: 0 0 5px; }
.tx-bracket-head.is-single .tx-hero { font-size: 28pt; line-height: 1.0; white-space: nowrap; }
/* Pull-quote / standout statement — flanked by the spectrum rule.
Bifrost note: the Techneaux X-derived bracket PNGs are NOT part of this
system (the triple chevron is the Bifrost framing device), so this device
uses a spectrum bar instead of the bracket art. */
.tx-bracket-quote { display: inline-flex; align-items: center; gap: 28px; }
.tx-bracket-quote::before, .tx-bracket-quote::after {
content: ""; flex: none; align-self: stretch; width: 4px; min-height: 96px;
background: var(--bf-spectrum-vert, linear-gradient(180deg, #D2749E, #A360A6, #8257A4));
}
/* Full-column orange rule under a section title — spans the column width so
two-or-more side-by-side sections stay aligned (not title-width). */
.tx-underline { display: block; width: 100%; height: 1.5px; background: var(--accent); }
/* Chevron list marker (▸) — the PREFERRED / DEFAULT bullet style for any list
in this system. Use .tx-arrows for bullets unless a list must nest or a
chevron would read wrong. */
.tx-arrows { list-style: none; padding: 0; margin: 0; }
.tx-arrows li {
position: relative; padding-left: 22px;
font-family: var(--font-body); font-size: var(--fs-16);
line-height: var(--lh-relaxed); color: var(--fg-secondary);
margin-bottom: 10px;
}
.tx-arrows li::before {
content: "\25B8"; position: absolute; left: 0; top: 0;
color: var(--accent); font-size: 0.9em;
}
/* Card */
.tx-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--s-4);
}
/* ── Comparison: quiet cards ─────────────────────────────────
Side-by-side option cards. The recommended one is marked only by
the orange top bar + a small pill — no glow, no full colored frame
(avoids the SaaS pricing-tier look). */
.tx-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tx-compare .tx-compare-col {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); overflow: hidden; padding: 18px 22px;
}
/* Top accent on the pick column: a clipped ::before bar (not border-top), so its
corners follow the card radius instead of overshooting. Matches .tx-card-accent. */
.tx-compare .tx-compare-col.is-pick::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--accent);
}
.tx-compare .tx-compare-tagrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 4px; }
.tx-compare .tx-compare-k {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
white-space: nowrap;
}
.tx-compare .tx-compare-pill {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
background: var(--tx-orange-tint); padding: 2px 7px; border-radius: var(--radius-pill);
}
.tx-compare .tx-compare-h {
font-family: var(--font-hero); font-weight: 800; font-size: var(--fs-20);
text-transform: uppercase; color: var(--fg); margin: 2px 0 12px;
}
/* ── Comparison: spec table (engineering datasheet) ──────────
Left column = capability categories (row labels); the two right
columns = option cards, visibly separated by gap columns. The
recommended option carries the orange top bar. Reads as a spec
sheet, not a pricing block. Build with gap columns:
[cap] [gap] [opt] [gap] [opt]. */
.tx-spec { width: 100%; border-collapse: separate; border-spacing: 0; }
.tx-spec th, .tx-spec td { padding: 12px 16px; text-align: left; vertical-align: middle; }
.tx-spec .tx-spec-gap { width: 18px; padding: 0; background: none; border: 0; }
.tx-spec .tx-spec-caph {
font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.tx-spec .tx-spec-cap {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12);
letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg);
border-bottom: 1px solid var(--border);
}
/* Non-pick option columns are borderless (row rules only) — keeps the table
light/editorial. Only the recommended (.is-pick) column gets the card box. */
.tx-spec thead th.tx-spec-opt {
border-bottom: 1px solid var(--border);
}
.tx-spec thead th.tx-spec-opt .tx-spec-tag {
display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px;
}
.tx-spec thead th.tx-spec-opt .tx-spec-nm {
font-family: var(--font-hero); font-weight: 800; font-size: var(--fs-18);
text-transform: uppercase; color: var(--fg);
}
.tx-spec thead th.is-pick .tx-spec-tag { color: var(--accent); }
.tx-spec td.tx-spec-val {
font-size: var(--fs-13); color: var(--fg-secondary);
border-bottom: 1px solid var(--border);
}
/* Recommended column: the only one boxed (top bar + side borders + fill). The
accent bar is a clipped ::before so its corners follow the box radius (not a
border-top that overshoots). overflow:hidden clips it to the rounded top. */
.tx-spec thead th.is-pick {
position: relative; overflow: hidden;
background: var(--surface); border: 1px solid var(--border); border-bottom: 0;
border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md);
}
.tx-spec thead th.is-pick::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--accent);
}
.tx-spec td.tx-spec-val.is-pick {
color: var(--fg); font-weight: 600; background: var(--surface);
border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
.tx-spec tbody tr:last-child td.tx-spec-val {
border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
}
/* ── Metric tiles (dashboard language) ───────────────────────
The Techneaux replacement for a "stat band": KPI tiles in a
grid, each with a 3px orange top bar, a mono key, a big value
(orange unit), and a supporting meta line. Reads like an
analytics/SCADA dashboard, works light + dark. Optional add-ons
(sparkline, segmented bar, gauge, status dot) are layout-level,
not required — the bare tile is the universal default.
------------------------------------------------------------ */
.tx-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tx-metric {
background: var(--surface); border: 1px solid var(--border);
border-top: 3px solid var(--accent); border-radius: var(--radius-md);
padding: 15px 16px 14px;
}
.tx-metric .tx-metric-k {
font-family: var(--font-mono); font-size: var(--fs-11);
letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted);
}
.tx-metric .tx-metric-v {
font-family: var(--font-hero); font-weight: 900; font-size: var(--fs-40);
line-height: 1; color: var(--fg); margin-top: 12px;
}
.tx-metric .tx-metric-v .tx-unit { font-size: 0.38em; color: var(--accent); margin-left: 2px; }
.tx-metric .tx-metric-meta { font-size: var(--fs-12); color: var(--fg-secondary); margin-top: 9px; }
/* The meta line and chip are OPTIONAL — omit them on tiles where a supporting
note adds nothing. Don't force a uniform key/value/meta shape across a row. */
.tx-metric .tx-metric-chip {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
color: var(--accent); background: var(--tx-orange-tint);
padding: 2px 7px; border-radius: var(--radius-pill); margin-right: 6px;
}
/* ── Data-flow / architecture node ───────────────────────────
A node in an architecture or data-flow diagram (e.g. "your env →
collector → package → analyzer → report"). Group nodes into a
zone (.tx-zone) labeled with a dot + caps title.
ONE-PILL RULE — the node header carries exactly ONE pill: the
location tag on the RIGHT (.tx-node-loc, e.g. YOUR ENV / TECHNEAUX).
The type label on the LEFT (.tx-node-type, e.g. SOURCE / PROCESS /
OUTPUT) is PLAIN caps text, never a pill or button. Do NOT render
two pills/buttons in a node header (the "double-button" look). The
single right-aligned location tag is the signature. */
.tx-zone {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 10px 16px 12px;
}
.tx-zone-label {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
margin-bottom: 9px; display: flex; align-items: center; gap: 7px;
}
.tx-zone-label .tx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-muted); }
.tx-zone.is-tcx .tx-zone-label { color: var(--accent); }
.tx-zone.is-tcx .tx-zone-label .tx-dot { background: var(--accent); }
.tx-node {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: 8px 14px;
}
.tx-node.is-store { border-style: dashed; }
.tx-node-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
/* LEFT: plain caps text — NOT a pill. */
.tx-node-type {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.13em; text-transform: uppercase; color: var(--fg-muted);
}
/* RIGHT: the one pill. Neutral by default, .is-tcx for the orange (Techneaux) tag. */
.tx-node-loc {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-secondary);
background: var(--surface-2); border-radius: var(--radius-pill); padding: 2px 9px; white-space: nowrap;
}
.tx-node-loc.is-tcx { color: var(--accent); background: var(--tx-orange-tint); }
.tx-node-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); color: var(--fg); margin-bottom: 2px; }
.tx-node-sub { font-size: var(--fs-13); color: var(--fg-secondary); line-height: 1.32; }
.tx-node-note { font-size: var(--fs-12); color: var(--fg-muted); margin-top: 3px; line-height: 1.28; }
/* Vertical connector between nodes, with an optional centered caption. */
.tx-conn { position: relative; height: 22px; text-align: center; }
.tx-conn::before { content: ''; position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px solid var(--accent); transform: translateX(-1px); }
.tx-conn .tx-conn-label { position: relative; top: 5px; background: var(--surface); padding: 2px 10px; font-size: var(--fs-12); color: var(--fg-muted); }
/* ── Figures row (big numbers, no container) ─────────────────
The lightweight alternative to metric tiles: large orange Inter Tight
numbers with caps labels, separated by thin rules, sitting directly on
the page (NO band, NO boxes). Use for a few punchy headline numbers where
tiles would over-structure them. Tiles (.tx-metrics) remain the choice
when each figure needs its own labeled card / supporting note. */
.tx-figures { display: flex; }
.tx-figures .tx-fig { flex: 1; padding: 0 24px; }
.tx-figures .tx-fig:first-child { padding-left: 0; }
.tx-figures .tx-fig + .tx-fig { border-left: 1px solid var(--border); }
.tx-figures .tx-fig-n {
font-family: var(--font-hero); font-weight: 900; font-size: var(--fs-48);
line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
}
.tx-figures .tx-fig-n .tx-unit { font-size: 0.5em; }
.tx-figures .tx-fig-l {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-11);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted);
margin-top: 9px; line-height: 1.35;
}
/* ── Accent-bar cards (left orange rule) ─────────────────────
Cards marked by a left orange bar instead of a top bar — for a grid of
short labeled outcomes/features (e.g. "what it makes visible"). The key
is orange Montserrat caps; body is Open Sans. */
.tx-cards-accent { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-card-accent {
position: relative; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-md); overflow: hidden; /* clips the bar to the card's rounded corners */
padding: 14px 16px 14px 19px;
}
/* Accent bar as a clipped child, NOT a border-left: a straight border square-clips
at the radius and pokes past the corner. overflow:hidden + a full-height ::before
makes the bar's outer (top-left / bottom-left) corners follow the card radius
while the inner edge stays straight, matching the brand reference. */
.tx-card-accent::before {
content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
background: var(--accent);
}
.tx-card-accent .tx-card-accent-k {
font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px;
}
.tx-card-accent .tx-card-accent-b {
font-family: var(--font-body); font-size: var(--fs-13); line-height: 1.5; color: var(--fg-secondary);
}
/* ── Section rhythm ──────────────────────────────────────────
Stacked sections should breathe. Prefer generous vertical space between
a section and the next over leaving dead space at the bottom of a page.
.tx-section-gap is the standard separation; bump it when a page has room. */
.tx-section-gap { margin-top: var(--s-16); }
.tx-section-gap--lg { margin-top: var(--s-20); }
/* Buttons */
.tx-btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 700;
font-size: var(--fs-13); letter-spacing: 0.08em; text-transform: uppercase;
border: 1px solid transparent; border-radius: var(--radius-md);
padding: 12px 20px; cursor: pointer;
transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.tx-btn--primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.tx-btn--primary:hover { background: var(--tx-orange-hover); }
.tx-btn--primary:active { background: var(--tx-orange-press); }
.tx-btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.tx-btn--secondary:hover { border-color: var(--fg); }
.tx-btn--ghost { background: transparent; color: var(--accent); }
.tx-btn--ghost:hover { background: var(--tx-orange-tint); }
.tx-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ============================================================
BIFROST SPECTRUM — signature device helpers
The Bifrost spectrum: a rose -> orchid -> violet
gradient. Use it as the top rule, a section underline, a
gradient headline keyword, or a chip. Use sparingly: one
spectrum gesture per view, then let navy + neutrals work.
============================================================ */
/* Full-width spectrum rule (thicker, standalone divider / band topper). */
.bf-rule { display:block; width:100%; height:5px; background: var(--bf-spectrum); border-radius:3px; }
.bf-rule--v { width:5px; height:100%; background: var(--bf-spectrum-v); }
/* Spectrum underline under a section title (the hero alternative to .tx-underline). */
.bf-underline { display:block; width:100%; height:3px; background: var(--bf-spectrum); }
/* Gradient headline keyword — clip the spectrum into the glyphs. Use on ONE
word of a hero, never a whole headline or body text. */
.bf-word {
background: var(--bf-spectrum);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* On dark grounds shift the gradient lighter so the clipped text stays legible. */
[data-theme="dark"] .bf-word {
background: linear-gradient(90deg, #E58FB4 0%, #BE83C4 52%, #AE82CE 100%);
-webkit-background-clip: text; background-clip: text;
}
/* Spectrum chip / tag. */
.bf-chip {
display:inline-flex; align-items:center; gap:6px;
font-family: var(--font-display); font-weight:700; font-size: var(--fs-11);
letter-spacing:0.12em; text-transform:uppercase; color: var(--tx-white);
background: var(--bf-spectrum); padding:3px 10px; border-radius: var(--radius-pill);
}
/* Spectrum dot — small node accent (data-flow, list markers, legends). */
.bf-dot { width:9px; height:9px; border-radius:50%; background: var(--bf-spectrum); display:inline-block; }
/* Brand navy band (the Bifrost equivalent of an ink band). */
.bf-band-navy { background: var(--bf-navy); color: var(--tx-white); }
/* Logo aspect-lock — never stretch a Bifrost mark. Height-only sizing. */
.bf-logo { width:auto; object-fit:contain; display:block; }