/* ============================================================ Rulebase — accent colour trial. ------------------------------------------------------------ Six variants, switched by `data-accent` on . Everything here is additive: with `data-accent="none"` the pages render exactly as before, so the baseline stays honest. The two source colours are Rulebase's own unused tokens: --orange #D85210 hue ~20° contrast on greige 3.5:1 --red #CC3542 hue ~355° contrast on greige 4.3:1 midpoint #D24429 hue ~10° contrast on greige 3.9:1 All three clear WCAG AA for large text and UI components (3:1) and none clear it for body text (4.5:1), so the accent is used on display type, fills, rules and marks — never on running copy. ============================================================ */ :root { --rb-orange: #D85210; --rb-red: #CC3542; --rb-vermillion: #D24429; --rb-gradient: linear-gradient(90deg, #CC3542 0%, #D85210 100%); /* Resolved per variant below. */ --rb-a: var(--c-ink); /* the accent fill */ --rb-a-crit: var(--c-ink); /* second step, only in `scale` */ --rb-mark-sweep: none; /* underline band behind emphasis */ } /* ---------------------------------------------------------- */ /* Variant definitions */ /* ---------------------------------------------------------- */ :root[data-accent='orange'] { --rb-a: var(--rb-orange); --rb-a-crit: var(--rb-orange); } :root[data-accent='vermillion'] { --rb-a: var(--rb-vermillion); --rb-a-crit: var(--rb-vermillion); } :root[data-accent='scale'] { --rb-a: var(--rb-orange); --rb-a-crit: var(--rb-red); } :root[data-accent='gradient'], :root[data-accent='gradient-text'] { --rb-a: var(--rb-vermillion); --rb-a-crit: var(--rb-red); } /* ---------------------------------------------------------- */ /* Emphasis mark */ /* ------------------------------------------------------------ `none` keeps the serif italic swap, which is what Rulebase actually does. Every other variant switches to a Distrify style underline sweep, sized in em so it tracks the type. */ .rb-mark { font-family: inherit; font-style: inherit; background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.16em; padding-bottom: 0.04em; } :root[data-accent='none'] .rb-mark { font-family: 'STK Bureau Serif', Georgia, serif; font-style: italic; background-image: none; } :root[data-accent='orange'] .rb-mark { background-image: linear-gradient(var(--rb-orange), var(--rb-orange)); } :root[data-accent='vermillion'] .rb-mark { background-image: linear-gradient(var(--rb-vermillion), var(--rb-vermillion)); } :root[data-accent='scale'] .rb-mark { background-image: linear-gradient(var(--rb-orange), var(--rb-orange)); } /* The sweep you asked about: red on the left running to orange. --t0/--t1 are set per word by the reveal script, so each word renders its own slice of one continuous ramp. Words outside a split headline just fall back to the full ramp. */ :root[data-accent='gradient'] .rb-mark { background-image: linear-gradient(90deg, color-mix(in oklab, var(--rb-red) calc((1 - var(--t0, 0)) * 100%), var(--rb-orange)), color-mix(in oklab, var(--rb-red) calc((1 - var(--t1, 1)) * 100%), var(--rb-orange))); } /* Same gradient, but filling the glyphs instead of sitting under them. Only safe on display sizes — see the contrast note at the top of this file. */ :root[data-accent='gradient-text'] .rb-mark { background-image: linear-gradient(90deg, color-mix(in oklab, var(--rb-red) calc((1 - var(--t0, 0)) * 100%), var(--rb-orange)), color-mix(in oklab, var(--rb-red) calc((1 - var(--t1, 1)) * 100%), var(--rb-orange))); background-size: 100% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0; } /* The existing pull-quote emphasis follows the same rules, so the two never disagree on the same page. */ :root:not([data-accent='none']) .rb-serif { font-family: inherit; font-style: normal; background-image: var(--rb-mark-img, linear-gradient(var(--rb-a), var(--rb-a))); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.16em; } :root[data-accent='gradient'] .rb-serif, :root[data-accent='gradient-text'] .rb-serif { --rb-mark-img: var(--rb-gradient); } /* ---------------------------------------------------------- */ /* Where the accent is actually spent */ /* ------------------------------------------------------------ Deliberately a short list. Rulebase's character is restraint, so the accent gets status, active state and data emphasis — and stays off the primary button, which is doing the work of making the page read editorial rather than SaaS. */ /* Status: Live */ :root:not([data-accent='none']) .rb-ch-pill-live { background: var(--rb-a); color: #FFFFFF; } /* Second step of the scale variant: what is not live yet. */ :root[data-accent='scale'] .rb-ch-pill-soon { border-color: var(--rb-a-crit); color: var(--rb-a-crit); } /* Active tab */ :root:not([data-accent='none']) .rb-feature-tab[aria-selected='true'] { border-bottom-color: var(--rb-a); } /* Data emphasis: the current bar and nothing else. Ramping the whole series tinted the entire chart, which reads as a colour scheme rather than as a highlight. */ :root:not([data-accent='none']) .rb-chart span.hi { background: var(--rb-a); opacity: 1; } /* Flow diagram (channels page) */ :root:not([data-accent='none']) .rb-flow { --fl-pulse: var(--rb-a); --fl-accent: var(--rb-a); --fl-route: color-mix(in srgb, var(--rb-a) 55%, transparent); --fl-halo-glow: color-mix(in srgb, var(--rb-a) 20%, transparent); --fl-payload-bg: color-mix(in srgb, var(--rb-a) 14%, transparent); } :root:not([data-accent='none']) .rb-flow .fl-hub-mark i { background: var(--rb-a); } @media (prefers-reduced-motion: no-preference) { .rb-mark { transition: background-size 200ms var(--ease); } } /* ============================================================ Gradient variants — where the ramp is allowed ------------------------------------------------------------ The accent answers three questions and nothing else: 1 What is the claim? one short phrase per headline 2 What is live now? status, active state, the pulse 3 Which number counts? the proof figures, not every KPI Everything structural — icons, section counters, progress bars, the logo dot, chart bars that are not the current one — stays ink. An earlier pass tinted all of those at once and the page stopped reading as greige with an accent and started reading as a red page. ============================================================ */ :root[data-accent='gradient'], :root[data-accent='gradient-text'] { /* One ramp, reused. `--t0`/`--t1` default to the full sweep; marked words override them per word so a phrase reads as one continuous gradient across a line break. */ --rb-ramp: linear-gradient(90deg, color-mix(in oklab, var(--rb-red) calc((1 - var(--t0, 0)) * 100%), var(--rb-orange)), color-mix(in oklab, var(--rb-red) calc((1 - var(--t1, 1)) * 100%), var(--rb-orange))); } /* -- 3. The numbers that count ------------------------------ The two proof figures and the one headline metric. KPI tiles are excluded on purpose: seven tinted numbers in a row is a readout, not a highlight. */ :root[data-accent='gradient-text'] .rb-stat-n, :root[data-accent='gradient-text'] .rb-figure { background-image: var(--rb-ramp); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-accent='gradient'] .rb-stat-n, :root[data-accent='gradient'] .rb-figure { background-image: var(--rb-ramp); background-repeat: no-repeat; background-position: 0 96%; background-size: 100% 0.12em; } /* -- 2. What is live ---------------------------------------- Small surfaces take the flat midpoint. A ramp across 11px of pill or a two-letter monogram shows nothing but a muddier colour, so it is not worth the complication. */ :root[data-accent='gradient'] .rb-ch-pill-live, :root[data-accent='gradient-text'] .rb-ch-pill-live { background: var(--rb-vermillion); } /* Only the channels that are actually connected. A glance down the directory then tells you what is live without reading a single pill — which is the accent doing real work rather than decorating. The tile keeps its warm fill. */ :root[data-accent='gradient'] .rb-ch-card:has(.rb-ch-pill-live) .rb-ch-mark, :root[data-accent='gradient-text'] .rb-ch-card:has(.rb-ch-pill-live) .rb-ch-mark { color: var(--rb-vermillion); } /* The travelling pulse is the one moving thing on the page, so it earns the full ramp: the request visibly warms up as it crosses to the connector. */ :root[data-accent='gradient'] .rb-flow, :root[data-accent='gradient-text'] .rb-flow { --fl-pulse-from: var(--rb-red); --fl-pulse-to: var(--rb-orange); } :root[data-accent='gradient'] .rb-flow .fl-pulse, :root[data-accent='gradient-text'] .rb-flow .fl-pulse { stroke: url(#fl-pulse-ramp); }