/* ============================================================================ robla-tokens.css - the app's semantic layer, mapped onto the design system ---------------------------------------------------------------------------- THE SOURCE OF TRUTH IS CLAUDE DESIGN. The project is "robla.fit Design System"; its files are copied verbatim into public/css/ds/ and this file never restates one of their values. The archived ROBLA-DESIGN repo is NOT the source - its robla-tokens.json still carries the retired W1 "consulting room" direction (light stone, brass, Cabin/Spectral) and reading it will produce the wrong brand. Every name below is a var() reference. There are four literals in this file and each one is flagged with WHY the design system has no name for it. FIVE STRUCTURAL DIFFERENCES from the Sestala layer this app was ported from. They are decisions of Robla's design system, not preferences: 1. DARK IS THE PAGE. Sestala is light-first and drops dark bands for contrast. Robla's page is #0A0A0A and its [data-theme="inverse"] is a PRINT exception, explicitly "not a user-facing light mode". So the register switch is inverted: the base register is dark, and the contrast band is the RAISED surface, per the system's own elevation rule - "on a near-black page a drop shadow is invisible, so elevation is a lighter surface plus a hairline". 2. THREE FAMILIES, NOT TWO. Sestala sets headings and body in one face. Robla splits them: Archivo (display, uppercase, 800) for headings, Instrument Sans for running copy, IBM Plex Mono for every label, unit and figure - because Archivo is not tabular. --rbl-font-display is therefore the HEADING face only; prose takes --rbl-font-body. Writing --rbl-font-display on a paragraph sets it in condensed caps. 3. CORNERS ARE ROUNDED. Sestala has two radii, 0 and 3, and never a pill. Robla runs 2/4/8/12/16/24 with cards at 12 and controls at 4. 4. COPPER IS THE ACTION. Sestala's action is near-black ink on sand and its accent may never be a letter. Robla's copper IS the action fill and IS accent text. Sestala's field rule does not transfer. 5. HEADINGS ARE HEAVY. Sestala prohibits 700 and above. Robla sets display at 800 uppercase and headings at 600-700. ============================================================================ */ @import "ds/colors.css"; @import "ds/typography.css"; @import "ds/spacing.css"; @import "ds/shape.css"; @import "ds/motion.css"; @import "../fonts/faces.css"; :root { /* --- Ground ramp. Read as the system's stone-*: dark, because the page is - */ --rbl-stone-50: var(--stone-50); --rbl-stone-100: var(--stone-100); --rbl-stone-200: var(--stone-200); --rbl-stone-300: var(--stone-300); --rbl-stone-400: var(--stone-400); --rbl-stone-500: var(--stone-500); /* --- Ink ramp ----------------------------------------------------------- */ --rbl-umber-900: var(--umber-900); --rbl-umber-800: var(--umber-800); --rbl-umber-600: var(--umber-600); --rbl-umber-500: var(--umber-500); --rbl-umber-400: var(--umber-400); /* --- Copper: the accent, and the only one -------------------------------- */ --rbl-copper-50: var(--coral-50); --rbl-copper-300: var(--coral-300); --rbl-copper-400: var(--coral-400); --rbl-copper-500: var(--coral-500); --rbl-copper-600: var(--coral-600); --rbl-copper-700: var(--coral-700); --rbl-copper-800: var(--coral-800); --rbl-copper: var(--coral-700); /* --- Roles: planes ------------------------------------------------------- */ --rbl-paper: var(--surface-page); --rbl-panel: var(--surface-card); --rbl-raised: var(--surface-raised); --rbl-inset: var(--surface-sunken); --rbl-well: var(--surface-sunken); --rbl-desk: var(--surface-sunken); --rbl-glass: var(--surface-glass); /* --- Roles: ink ---------------------------------------------------------- */ --rbl-ink: var(--text-display); --rbl-ink-2: var(--text-body); --rbl-mute: var(--text-muted); --rbl-mute-2: var(--text-muted); --rbl-faint: var(--text-subtle); --rbl-link: var(--text-accent); /* --- Roles: structure ---------------------------------------------------- */ --rbl-line: var(--line-hairline); --rbl-line-strong: var(--line-strong); /* --- Roles: meaning ------------------------------------------------------ */ /* Caution is not a second hue in this system: copper plus a 45-degree hatch. Anything painting --rbl-attention as a fill should also carry --rbl-hatch. */ --rbl-signal: var(--text-accent); --rbl-attention: var(--status-warn); --rbl-success: var(--status-support); --rbl-error: var(--status-stop); --rbl-signal-bg: var(--surface-accent); --rbl-attention-bg: var(--status-warn-bg); --rbl-success-bg: var(--status-support-bg); --rbl-error-bg: var(--status-stop-bg); --rbl-hatch: var(--hatch-warn); /* --- Roles: action and focus -------------------------------------------- */ /* Copper fill, near-black ink. This is the inversion from Sestala, where the action is ink-on-sand and the accent is forbidden on anything small. */ --rbl-action: var(--surface-accent-strong); --rbl-action-ink: var(--text-on-accent); --rbl-focus: var(--focus-ring); --rbl-ring: var(--ring-accent); --rbl-ring-stop: var(--ring-stop); /* --- Interaction. On a dark ground hover LIGHTENS, per colors.css -------- */ --rbl-paper-hover: var(--stone-50); --rbl-paper-pressed: var(--stone-300); --rbl-panel-hover: var(--stone-50); --rbl-panel-pressed: var(--stone-300); --rbl-raised-hover: var(--stone-300); --rbl-raised-pressed: var(--stone-400); --rbl-inset-hover: var(--stone-100); --rbl-inset-pressed: var(--stone-50); --rbl-copper-hover: var(--coral-800); --rbl-copper-pressed: var(--coral-500); --rbl-action-hover: var(--coral-800); --rbl-action-pressed: var(--coral-500); --rbl-disabled-opacity: var(--state-disabled-opacity); --rbl-press-scale: var(--press-scale); --rbl-lift-y: var(--lift-y); /* --- Scrim -------------------------------------------------------------- */ --rbl-scrim: var(--surface-glass); --rbl-scrim-bottom: var(--scrim-bottom); --rbl-scrim-left: var(--scrim-left); --rbl-blur-panel: var(--blur-panel); /* --- Type: three families ----------------------------------------------- */ /* --rbl-font-display is the HEADING face and it is uppercase at 800. Prose takes --rbl-font-body. See structural difference 2 in the header. */ --rbl-font-display: var(--font-display); --rbl-font-body: var(--font-sans); --rbl-font-data: var(--font-numeric); /* The UI face. Mono carries labels, units and figures, and in this system every one of those is UPPERCASE. Sentence-case control text - buttons, chips, inputs, nav - was a humanist sans in the layer this was ported from; left on mono it reads like source code rather than an interface. */ --rbl-font-ui: var(--font-sans); /* --- Type: the ladder, mapped onto the system's scale ------------------- Robla's ramp is 11/12/13/15/17/20/25/31/39/52/68/92/124 with line height as a RATIO, not a px value. Each Sestala step below resolves to its nearest Robla size. Two Sestala steps collapse onto one Robla size (headline onto 31, body-l onto 17) - they were already deprecated. */ --rbl-type-signage-size: var(--size-6xl); --rbl-type-signage-line: var(--lh-tight); --rbl-type-signage-track: var(--track-display); --rbl-type-hero-size: var(--size-5xl); --rbl-type-hero-line: var(--lh-tight); --rbl-type-hero-track: var(--track-display); --rbl-type-display-size: var(--size-4xl); --rbl-type-display-line: var(--lh-tight); --rbl-type-display-track: var(--track-display); --rbl-type-title-size: var(--size-3xl); --rbl-type-title-line: var(--lh-snug); --rbl-type-title-track: var(--track-display); --rbl-type-headline-size: var(--size-2xl); --rbl-type-headline-line: var(--lh-snug); --rbl-type-headline-track: var(--track-heading); --rbl-type-section-size: var(--size-xl); --rbl-type-section-line: var(--lh-heading); --rbl-type-section-track: var(--track-heading); --rbl-type-subhead-size: var(--size-xl); --rbl-type-subhead-line: var(--lh-heading); --rbl-type-subhead-track: var(--track-heading); --rbl-type-lead-size: var(--size-lg); --rbl-type-lead-line: var(--lh-heading); --rbl-type-lead-track: var(--track-normal); --rbl-type-body-l-size: var(--size-md); --rbl-type-body-l-line: var(--lh-loose); --rbl-type-body-l-track: var(--track-normal); --rbl-type-body-size: var(--size-md); --rbl-type-body-line: var(--lh-body); --rbl-type-body-track: var(--track-normal); --rbl-type-body-s-size: var(--size-sm); --rbl-type-body-s-line: var(--lh-body); --rbl-type-body-s-track: var(--track-normal); --rbl-type-data-size: var(--size-xs); --rbl-type-data-line: var(--lh-body); --rbl-type-data-track: var(--track-normal); --rbl-type-label-size: var(--size-2xs); --rbl-type-label-line: var(--lh-body); --rbl-type-label-track: var(--track-label); --rbl-type-micro-size: var(--size-3xs); --rbl-type-micro-line: var(--lh-body); --rbl-type-micro-track: var(--track-label); --rbl-type-hero: var(--rbl-type-hero-size); /* --- Type: the mobile step-down ----------------------------------------- Sestala's ramp is a 400-weight humanist and its display sizes survive a narrow column. Robla's is Archivo 800 in UPPERCASE, which sets far wider per character: the display step at 52px wrapped the landing headline onto five lines at 375px. The big steps therefore drop one rung below the tablet breakpoint. Body and label steps are untouched - they are already at the system's floor. */ /* --- Type: the wordmark ------------------------------------------------- */ /* ROBLA in Archivo 700 tracked open over a copper rule carrying the descriptor. Superseded the robla.fit lock-up on 23 Aug 2026. */ --rbl-track-wordmark: var(--track-wordmark); --rbl-track-descriptor: var(--track-descriptor); --rbl-track-descriptor-stacked: var(--track-descriptor-stacked); --rbl-tile-field: var(--tile-field); --rbl-tile-ink: var(--tile-ink); --rbl-tile-letter-ratio: var(--tile-letter-ratio); --rbl-tile-radius-ratio: var(--tile-radius-ratio); /* --- Type: weights. Display is 800; Robla's 700 ceiling does not apply - */ --rbl-weight-display-regular: var(--weight-bold); --rbl-weight-display-medium: var(--weight-black); --rbl-weight-data-regular: var(--weight-regular); --rbl-weight-data-medium: var(--weight-medium); --rbl-weight-data-semibold: var(--weight-semibold); /* --- Type: measure ------------------------------------------------------ */ --rbl-measure-lead: var(--measure-narrow); --rbl-measure-body-l: var(--measure-body); --rbl-measure-body: var(--measure-body); --rbl-measure-body-s: var(--measure-body); --rbl-measure-data: var(--measure-narrow); --rbl-measure-label: var(--measure-narrow); --rbl-measure-kiosk: var(--measure-wide); --rbl-measure-kiosk-attract: var(--measure-wide); /* --- Type: floors ------------------------------------------------------- */ /* LITERAL 1 of 4. The system states no minimum type size; these are the app's own accessibility floors, carried over unchanged because they are legibility facts rather than brand values. */ --rbl-floor-screen: 11px; --rbl-floor-input: 16px; --rbl-floor-kiosk: 20px; --rbl-floor-kiosk-on-table: 48px; --rbl-floor-stop-rest: 48px; --rbl-floor-stop-active: 36px; --rbl-floor-print: 6pt; /* --- Cap ratios and viewing distances ----------------------------------- */ /* LITERAL 2 of 4. Metrics of the faces themselves, measured not chosen. Archivo and IBM Plex Mono, replacing Alegreya Sans and IBM Plex Sans. */ --rbl-cap-display: 0.730; --rbl-cap-data: 0.698; --rbl-cap-wordmark: 0.730; --rbl-dist-glance: 150; --rbl-dist-continuous: 200; --rbl-dist-reference: 280; /* --- Space: the system's 16-step scale ---------------------------------- */ --rbl-space-0: var(--space-0); --rbl-space-4: var(--space-2); --rbl-space-8: var(--space-3); --rbl-space-12: var(--space-4); --rbl-space-16: var(--space-5); --rbl-space-24: var(--space-7); --rbl-space-32: var(--space-8); --rbl-space-48: var(--space-10); --rbl-space-64: var(--space-11); --rbl-space-96: var(--space-13); --rbl-space-128: var(--space-14); --rbl-space-160: var(--space-15); --rbl-lattice: var(--space-2); --rbl-rhythm: var(--space-7); --rbl-section-y: var(--section-y-mobile); --rbl-section-y-desktop: var(--section-y-desktop); /* --- Breakpoints -------------------------------------------------------- */ /* LITERAL 3 of 4. The system's spacing file names gutters per breakpoint but not the breakpoints themselves, so the app's own carry over. */ --rbl-bp-s: 600px; --rbl-bp-m: 1024px; --rbl-bp-l: 1440px; /* --- Grid: gutter and margin ------------------------------------------- */ --rbl-gutter-xs: var(--gutter-mobile); --rbl-gutter-s: var(--gutter-mobile); --rbl-gutter-m: var(--gutter-tablet); --rbl-gutter-l: var(--gutter-desktop); --rbl-gutter-kiosk: var(--gutter-desktop); --rbl-gutter-operator: var(--gutter-mobile); --rbl-margin-xs: var(--gutter-mobile); --rbl-margin-s: var(--gutter-tablet); --rbl-margin-m: var(--gutter-desktop); --rbl-margin-kiosk: var(--gutter-desktop); --rbl-margin-operator: var(--gutter-tablet); /* --- Containers -------------------------------------------------------- */ --rbl-container-l: var(--container-max); --rbl-container-operator: var(--container-max); --rbl-prose-measure: var(--container-text); --rbl-panel-min: 280px; /* LITERAL 4 of 4: a layout minimum, not a brand value */ --rbl-container-col-l: var(--space-12); /* --- Surfaces: kiosk and operator -------------------------------------- */ --rbl-kiosk-w: 1280px; --rbl-kiosk-h: 720px; --rbl-kiosk-header: var(--space-13); --rbl-kiosk-stop-band: 240px; --rbl-kiosk-safe: var(--space-5); --rbl-rail-w: 240px; --rbl-operator-header: var(--control-h-lg); --rbl-toast-w: 400px; /* --- Padding and row heights ------------------------------------------- */ --rbl-pad-panel-hosted: var(--space-8); --rbl-pad-panel-session: var(--space-8); --rbl-pad-panel-operator: var(--space-5); --rbl-row-hosted: var(--control-h-lg); --rbl-row-session: var(--space-12); --rbl-row-operator: var(--space-8); /* --- The control ladder. The system publishes three heights ------------- */ --rbl-ctl-h-session: var(--space-12); --rbl-ctl-pad-x-session: var(--space-8); --rbl-ctl-h-l: var(--control-h-lg); --rbl-ctl-pad-x-l: var(--space-8); --rbl-ctl-h-m: var(--control-h-md); --rbl-ctl-pad-x-m: var(--space-7); --rbl-ctl-h-s: var(--control-h-sm); --rbl-ctl-pad-x-s: var(--space-5); --rbl-ctl-h-xs: var(--control-h-sm); --rbl-ctl-pad-x-xs: var(--space-4); /* --- Targets ----------------------------------------------------------- */ --rbl-target-pointer-floor: var(--space-7); --rbl-target-pointer: var(--space-8); --rbl-target-touch: var(--tap-min); --rbl-target-reach: var(--space-12); --rbl-stop-kiosk-w: 280px; --rbl-stop-kiosk-h: 176px; --rbl-stop-min-w: 136px; --rbl-stop-min-h: var(--space-12); --rbl-stop-phone: 120px; --rbl-dot: var(--space-3); /* --- Radius. Rounded, unlike Robla's two square steps ---------------- */ --rbl-radius-0: 0; --rbl-radius-2: var(--radius-xs); --rbl-radius-3: var(--radius-control); --rbl-radius-card: var(--radius-card); --rbl-radius-media: var(--radius-media); --rbl-radius-control: var(--radius-control); --rbl-radius-full: var(--radius-full); /* --- Border ------------------------------------------------------------ */ --rbl-border-hair: var(--border-hair) solid var(--rbl-line); --rbl-border-hair-dark: var(--border-hair) solid var(--rbl-line); --rbl-border-interactive: var(--border-hair) solid var(--rbl-line-strong); --rbl-border-strong: var(--border-thick) solid var(--rbl-ink); --rbl-border-edge-active: var(--border-thick) solid var(--rbl-copper); --rbl-border-medium: var(--border-medium); /* --- Focus ------------------------------------------------------------- */ --rbl-focus-width: 2px; --rbl-focus-offset: 2px; --rbl-focus-offset-stop: 3px; --rbl-focus-radius-delta: var(--radius-xs); /* --- Elevation. A lighter surface plus a hairline; shadows only float --- */ --rbl-shadow-overlay: var(--shadow-md); --rbl-shadow-xs: var(--shadow-xs); --rbl-shadow-sm: var(--shadow-sm); --rbl-shadow-lg: var(--shadow-lg); --rbl-shadow-accent: var(--shadow-accent); --rbl-shadow-inset-hair: var(--shadow-inset-hair); /* --- Z scale ----------------------------------------------------------- */ --rbl-z-base: 0; --rbl-z-raised: 10; --rbl-z-dropdown: 20; --rbl-z-drawer: 30; --rbl-z-scrim: 40; --rbl-z-modal: 50; --rbl-z-toast: 60; --rbl-z-stop: 900; /* --- Motion: five durations, three curves ------------------------------ */ --rbl-dur-0: 0ms; --rbl-dur-1: var(--dur-instant); --rbl-dur-2: var(--dur-fast); --rbl-dur-3: var(--dur-base); --rbl-dur-4: var(--dur-slow); --rbl-dur-attention: var(--dur-slower); --rbl-ease-out: var(--ease-out); --rbl-ease-in: var(--ease-in-out); --rbl-ease-move: var(--ease-in-out); --rbl-ease-entry: var(--ease-entry); --rbl-ease-linear: linear; --rbl-transition-control: var(--transition-control); /* --- Thresholds. Interaction timings, not brand values ----------------- */ --rbl-thresh-ack: 100ms; --rbl-thresh-stale: 300ms; --rbl-thresh-repeat: 350ms; --rbl-thresh-busy: 400ms; --rbl-thresh-tooltip: 400ms; --rbl-thresh-confirm: 900ms; --rbl-thresh-drop: 1000ms; --rbl-thresh-stop-escalate: 1000ms; --rbl-thresh-relock: 1500ms; --rbl-thresh-count: 2000ms; --rbl-thresh-command-fail: 2000ms; --rbl-thresh-pause: 3000ms; /* --- Icons. Geometry, carried over unchanged --------------------------- */ --rbl-icon-grid-micro: 16; --rbl-icon-grid-standard: 24; --rbl-icon-grid-display: 48; --rbl-icon-trim: 2; --rbl-icon-stroke-micro: 1.5; --rbl-icon-stroke-standard: 2; --rbl-icon-stroke-display: 3; --rbl-icon-radius-micro: 1px; --rbl-icon-radius-standard: 1.5px; --rbl-icon-radius-display: 3px; --rbl-icon-radius-physical: 0; --rbl-icon-linecap: round; --rbl-icon-linejoin: round; --rbl-icon-miterlimit: 4; --rbl-icon-size-16: 16px; --rbl-icon-size-24: 24px; --rbl-icon-size-32: 32px; --rbl-icon-size-48: 48px; --rbl-icon-size-64: 64px; --rbl-icon-size-96: 96px; /* --- The impulse scale. Robla's own, with no Robla equivalent -------- Teal at the low end, deep copper at maximum. The member surface reads it; the funnel does not. */ --rbl-intensity-1: var(--intensity-1); --rbl-intensity-2: var(--intensity-2); --rbl-intensity-3: var(--intensity-3); --rbl-intensity-4: var(--intensity-4); --rbl-intensity-5: var(--intensity-5); --rbl-intensity-6: var(--intensity-6); --rbl-intensity-7: var(--intensity-7); --rbl-intensity-8: var(--intensity-8); --rbl-intensity-off: var(--intensity-off); /* --- Kiosk display luminance, cd/m2 ------------------------------------ */ --rbl-kiosk-lum-hosted: 250; --rbl-kiosk-lum-session: 160; --rbl-kiosk-lum-idle: 120; --rbl-kiosk-lum-floor: 80; } /* ============================================================================ The raised register. Robla's [data-rbl-ground="raised"] inverted a light page to a dark band for contrast. Robla's page is already dark, so the contrast band is the RAISED surface - the system's own elevation rule. A view declares one register on a surface root, never per component. ============================================================================ */ /* The mobile step-down declared above. Uppercase Archivo 800 sets much wider per character than the humanist it replaces, so the display steps drop one rung on a phone. */ @media (max-width: 767px) { :root { --rbl-type-signage-size: var(--size-4xl); --rbl-type-hero-size: var(--size-3xl); --rbl-type-display-size: var(--size-2xl); --rbl-type-title-size: var(--size-xl); --rbl-type-headline-size: var(--size-lg); --rbl-type-section-size: var(--size-lg); --rbl-type-subhead-size: var(--size-lg); } } [data-rbl-ground="raised"] { --rbl-paper: var(--surface-raised); --rbl-panel: var(--surface-raised); --rbl-raised: var(--stone-300); --rbl-inset: var(--surface-card); --rbl-well: var(--surface-page); --rbl-desk: var(--surface-page); color: var(--rbl-ink); } /* The daylight register: print, window graphics, contracts, the closing slate. A print exception, NOT a user-facing light mode - the system says so. Set data-theme="inverse" alongside it so the design system's own ramps flip. */ [data-rbl-ground="inverse"] { --rbl-paper: var(--surface-page); --rbl-panel: var(--surface-card); --rbl-raised: var(--surface-raised); /* The whole alias layer re-declares here (25 Aug 2026): a custom property resolves its var() references where it is DEFINED, so the :root aliases carry the dark values into this scope even after the base ramps flip. Found white-on-paper on the bank plan's document preview - the first surface to put running text on the daylight register. */ --rbl-inset: var(--surface-sunken); --rbl-ink: var(--text-display); --rbl-ink-2: var(--text-body); --rbl-mute: var(--text-muted); --rbl-mute-2: var(--text-muted); --rbl-faint: var(--text-subtle); --rbl-link: var(--text-accent); --rbl-signal: var(--text-accent); --rbl-signal-bg: var(--surface-accent); --rbl-line: var(--line-hairline); --rbl-line-strong: var(--line-strong); --rbl-attention: var(--status-warn); --rbl-attention-bg: var(--status-warn-bg); --rbl-success: var(--status-support); --rbl-success-bg: var(--status-support-bg); --rbl-error: var(--status-stop); --rbl-error-bg: var(--status-stop-bg); --rbl-action: var(--surface-accent-strong); --rbl-action-ink: var(--text-on-accent); color: var(--rbl-ink); } /* ============================================================================ The floor: what every surface owes. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--rbl-paper); color: var(--rbl-ink-2); font-family: var(--rbl-font-body); font-size: var(--rbl-type-body-size); line-height: var(--rbl-type-body-line); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; text-wrap: pretty; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } /* Headings take the display face. h1 and h2 are uppercase at 800; h3 and h4 are sentence case at 600, per the design system's base layer. */ h1, h2 { font-family: var(--rbl-font-display); font-weight: var(--weight-black); text-transform: uppercase; letter-spacing: var(--track-display); line-height: var(--lh-tight); color: var(--rbl-ink); margin: 0; } h3, h4 { font-family: var(--rbl-font-display); font-weight: var(--weight-semibold); letter-spacing: var(--track-heading); line-height: var(--lh-heading); color: var(--rbl-ink); margin: 0; } p { margin: 0; } a { color: var(--rbl-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--rbl-link) 38%, transparent); text-underline-offset: 3px; transition: color var(--rbl-dur-2) var(--rbl-ease-out); } a:hover { color: var(--rbl-copper-300); text-decoration-color: currentColor; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: var(--rbl-focus-width) solid var(--rbl-focus); outline-offset: var(--rbl-focus-offset); border-radius: var(--rbl-radius-2); } ::selection { background: var(--rbl-copper); color: var(--rbl-action-ink); } [disabled], [aria-disabled="true"], .is-disabled { opacity: var(--rbl-disabled-opacity); cursor: not-allowed; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } /* Mono carries every label, unit and figure - Archivo is not tabular. */ code, kbd, samp, pre { font-family: var(--rbl-font-data); } code { background: var(--rbl-raised); border: var(--rbl-border-hair); border-radius: var(--rbl-radius-2); padding: 0 var(--rbl-space-4); } .r-label { font-family: var(--rbl-font-data); font-size: var(--rbl-type-label-size); font-weight: var(--rbl-weight-data-medium); letter-spacing: var(--rbl-type-label-track); text-transform: uppercase; color: var(--rbl-mute); } .r-figure { font-family: var(--rbl-font-data); font-weight: var(--rbl-weight-data-semibold); letter-spacing: 0; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; } .r-hatch { background-image: var(--rbl-hatch); } .r-hairline { border: 0; border-top: var(--rbl-border-hair); margin: 0; } /* ---------- The wordmark ---------- ROBLA in Archivo 800 on optical tracking, over a copper rule that flexes to the measure: rule + gap + descriptor equal the word's exact width, so the lock-up always closes as a rectangle. The descriptor is Archivo 500 - one family with the word; mono stays with figures, units and labels. The 23 Aug 2026 letterform revision, applied here 24 Aug 2026. The earlier robla.fit lock-up stays superseded: the mark on file is Robla, a domain survives neither embroidery nor an 18px icon, and the name has to be sayable. robla.fit stays the address, not the logo. EVERY measure derives from --wm-size, so call sites differ by one number. Set live in type because that is how the lock-up is constructed, not because artwork is forbidden: the mark was filed as an EUTM word mark on 22 Aug 2026, classes 41 and 35. Mobile opens the tracking one step (optical: tracking opens as the size shrinks) and takes the rule-only step of the reduction ladder rather than shrinking the descriptor below legibility. */ .wm { --wm-size: 34px; display: inline-flex; flex-direction: column; gap: calc(var(--wm-size) * var(--wordmark-gap-ratio)); text-decoration: none; flex: 0 0 auto; } .wm__name { font-family: var(--wordmark-family); font-weight: var(--wordmark-weight); font-size: var(--wm-size); line-height: 1; letter-spacing: var(--track-wordmark); text-transform: var(--wordmark-transform); color: var(--text-display); } .wm__sig { display: flex; align-items: center; gap: calc(var(--wm-size) * var(--wordmark-sig-gap-ratio)); } .wm__bar { height: var(--wordmark-rule-weight); flex: 1 1 auto; min-width: calc(var(--wm-size) * 0.5); background: var(--coral-700); } .wm__desc { font-family: var(--wordmark-desc-family); font-weight: var(--wordmark-desc-weight); font-size: calc(var(--wm-size) * var(--wordmark-desc-ratio)); line-height: 1; letter-spacing: var(--track-descriptor); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; } .wm:hover .wm__desc { color: var(--text-body); } .wm--ft { --wm-size: 40px; } /* The descriptor needs roughly 10px to stay readable; below a 20px wordmark the descriptor goes rather than shrinking illegibly. Optical tracking opens one step below 30px, and the rule drops to 1.5px below a 24px wordmark. */ @media (max-width: 520px) { .wm { --wm-size: 26px; --track-wordmark: var(--track-wordmark-mid); } /* The full lock-up stays visible on a phone (CEO, 24 Aug 2026): the descriptor takes a 10px legibility floor instead of dropping, and the flexed rule keeps the construction closing as a rectangle. */ .wm__desc { font-size: max(calc(var(--wm-size) * var(--wordmark-desc-ratio)), 10px); } } /* Tabular wherever a value can change. A timer that reflows while counting is a defect. */ [data-rbl-figures="tabular"] { font-variant-numeric: tabular-nums; } /* Column priority: the breakpoint drops columns BY PRIORITY, never by position. CP1 is present at 320px and never drops. */ [data-rbl-cp-detail] { display: none; } @media (max-width: 1439px) { [data-rbl-cp="3"] { display: none; } } @media (max-width: 1279px) { [data-rbl-cp="2"] { display: none; } [data-rbl-cp-detail] { display: table-row; } } [data-btn] { transition: var(--rbl-transition-control); } [data-btn="primary"]:hover { background: var(--rbl-action-hover); } [data-btn="primary"]:active { background: var(--rbl-action-pressed); } [data-btn="secondary"]:hover { background: var(--rbl-panel-hover); } [data-btn="secondary"]:active { background: var(--rbl-panel-pressed); } [data-hv="nav"]:hover { color: var(--rbl-ink); } [data-hv="send"]:hover { color: var(--rbl-ink); border-color: var(--rbl-line-strong); } [data-hv="emil-card"]:hover { border-color: var(--rbl-line-strong); } @keyframes rise { to { opacity: 1; transform: none; } } @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes tdot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @keyframes cpulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.92); opacity: .6; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; } [data-convo] i, [data-convo] span, [data-busy-face] { animation: none; } } @media (max-width: 899px) { [data-shell] { grid-template-columns: minmax(0, 1fr) !important; } [data-shell] aside { order: 2; } [data-shell] [data-main] { order: 1; } } @media (min-width: 900px) { [data-shell] { grid-template-columns: 260px minmax(0, 1fr); } }