/* HyperClank's half of the two brands that share one component library. The values are scoped to * the .brand-hyperclank class layouts/hyperclank.html.erb puts on , and custom properties * inherit, so every .c-, .o- and .u- rule rendered inside that scope resolves them without a * component rule being duplicated or overridden — which is why the override is a role and never a * component: a `.brand-hyperclank .c-panel` rule would be a second copy of a component to keep in * step, and a colour this brand needs that has no role yet is added to 01-settings/_semantic.css * for both brands. * * No selector here matches outside .brand-hyperclank, so nothing in this file can move a pixel of * gantry.software. */ .brand-hyperclank { /* The accents change places: green leads here where amber leads on Gantry, and amber drops to attention and states, never the link colour. Grounds, strokes and text roles are left out of this block rather than restated — :root's values inherit into the scope. */ --accent: var(--green); --accent-bright: color-mix(in oklab, var(--green) 55%, white); --accent-soft: color-mix(in oklab, var(--green) 14%, var(--surface)); --warn: var(--amber); /* The company site reads as pages rather than as a terminal, so the type and space roles below run larger and airier than the product site's cell rhythm. */ --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.2rem); --text-3xl: clamp(2.3rem, 1.5rem + 3.2vw, 3rem); --lh-cell: 1.6; --tracking-label: 0.18em; --space-xl: 3rem; --space-2xl: 5rem; --gap-stack: var(--space-lg); --gutter-page: clamp(1rem, 4vw, 3rem); --measure: 68ch; --shell-max: 104ch; /* --bar-h is left at :root's: both brands' chrome is the same one-cell bar at the same height, and the extra room on this one is in the page body rather than in the frame around it. */ background: var(--surface); color: var(--text); }