/* * jambit brand stylesheet — internal demo UI * --------------------------------------------------------------------------- * Generated: 2026-08-07 * * Sources fetched (live, via curl/WebFetch on generation date): * - https://www.jambit.com (homepage HTML) * - https://www.jambit.com/en/ (EN homepage) * - https://www.jambit.com/site/assets/font/fonts.css (font-face defs) * - https://www.jambit.com/site/templates/dist/assets/app..css * (main compiled stylesheet) * - https://www.jambit.com/site/templates/images/jambit-logo.svg * (header logo, source of truth * for the two brand colors below) * * Confidence key: OBSERVED = value pulled directly from live CSS/SVG/HTML. * INFERRED = not stated verbatim on the site; chosen to be * consistent with observed values and general style. * * Wordmark note: the task brief assumed "jambit." (lowercase, trailing period). * Verified against the live site: the logo , , and footer * copyright ("jambit GmbH") all use lowercase "jambit" with NO trailing * period anywhere the name appears as a name (periods only occur as normal * sentence punctuation). The .brand-wordmark class below renders "jambit" * WITHOUT a period, per that evidence — the bracketed instruction to verify * before adding the period was honored by not adding it. */ :root { /* --- Core palette ------------------------------------------------------ */ /* OBSERVED: #EF7D00 appears 61x in the main compiled stylesheet and is one of two fill colors in the header logo SVG (the other being the wordmark ink). Used for links, CTAs, active nav states, and the brand icon. */ --brand-primary: #ef7d00; --brand-primary-hover: #d66f00; /* INFERRED: ~10% darkened for hover/active, no hover-state color exposed in static CSS extraction */ /* OBSERVED: same orange is the only strong accent color found; site does not use a second distinct accent hue. Reusing primary as accent avoids inventing a color the brand doesn't have. */ --brand-accent: #ef7d00; --brand-accent-hover: #d66f00; /* INFERRED, mirrors --brand-primary-hover */ /* OBSERVED: #fafafa is the dominant background color (51 occurrences), paired with #ffffff card/surface panels. Site is light-themed throughout — no dark-mode variant found. */ --brand-bg: #fafafa; --brand-surface: #ffffff; /* OBSERVED: #3c3c3b is the dominant text/ink color (52 occurrences) and matches the near-black fill (#333) used for the wordmark letterforms in the logo SVG — a warm charcoal rather than pure black. */ --brand-text: #3c3c3b; /* OBSERVED: #898989 is the most common secondary/muted text grey (19 occurrences); #6c6c6c and #555 appear as minor variants in the same compiled stylesheet. */ --brand-text-muted: #898989; /* OBSERVED: #ebebeb and #dedede are the two hairline/divider greys used around nav items and panel edges; #ebebeb is the more frequent (17 occurrences) so it's used as the default border. */ --brand-border: #ebebeb; --brand-border-strong: #dedede; /* OBSERVED, secondary divider grey (9 occurrences) */ /* --- Typography --------------------------------------------------------- OBSERVED: fonts.css ships @font-face definitions for "Open Sans" (400, 600, plus italics) and the compiled stylesheet's body font-family stack is verbatim "open sans, myriad pro, neue helvetica, helvetica, sans-serif". Per task constraint, no @font-face/@import is added here (no network access to font files from this page) — system-font fallbacks are used instead so the stack degrades gracefully to a native sans-serif when Open Sans isn't installed locally. */ --brand-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --brand-font-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; /* OBSERVED in compiled CSS */ /* --- Shape / spacing ---------------------------------------------------- INFERRED (moderate confidence): the live site mixes many border-radius values (0.5rem, 1rem, 2rem, 2px–4px, 50% for circular avatars/icons) depending on component, with no single canonical token exposed. 0.5rem is chosen as a general-purpose default seen verbatim in the source CSS and consistent with the site's soft-but-not-pill-shaped card/button corners; use --brand-radius-pill for the rounder nav/button treatments also observed (1rem–2rem) and --brand-radius-circle for avatars/icons. */ --brand-radius: 0.5rem; --brand-radius-pill: 2rem; /* OBSERVED value, used on pill-shaped buttons/badges */ --brand-radius-circle: 50%; /* OBSERVED, used for avatar/icon circles */ /* INFERRED: not exposed as a token on the live site; derived to match the generous whitespace/"clean, minimal, flat" visual style described by the fetched pages. */ --brand-space-xs: 0.25rem; --brand-space-sm: 0.5rem; --brand-space-md: 1rem; --brand-space-lg: 2rem; --brand-space-xl: 3rem; /* INFERRED: subtle shadow consistent with the flat, low-elevation card style observed on the site (no elevated/skeuomorphic shadows found). */ --brand-shadow: 0 1px 3px rgba(60, 60, 59, 0.08); } /* --- Wordmark ------------------------------------------------------------ */ .brand-wordmark { font-family: var(--brand-font); font-weight: 600; /* OBSERVED: Open Sans 600 (SemiBold) is one of the two weights shipped in fonts.css, used for header-level emphasis */ font-style: normal; color: var(--brand-text); letter-spacing: -0.01em; /* INFERRED: slight tightening for a wordmark-scale treatment; not measurable from static CSS */ text-transform: lowercase; /* OBSERVED: brand name is always rendered lowercase (logo alt text, <title>, footer copyright all use "jambit") */ } .brand-wordmark::after { /* OBSERVED: the header logo SVG uses --brand-primary (#EF7D00) as its second fill color alongside the dark wordmark ink; this dot echoes that two-color treatment without asserting a literal trailing period is part of the name (see file header note — no period found in real usage). */ content: ""; display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; border-radius: var(--brand-radius-circle); background: var(--brand-accent); vertical-align: baseline; }