/* htw-style v1.2.0 · sha256 9c8b4a5a816b6e9d8c471ec0d570fc52527cf3684e071d1a3af5bad10413a460 · DO NOT EDIT: change HTW-Infra/htw-style and re-sync */ /* htw-style: htw.css. The HTW tokens and base styles, framework-agnostic. STYLE-GUIDE.md is the spec and says why each value is what it is. The tokens are copied from the HTW Design System (tokens/htw-ds-tokens.css); change a value there first. Load order: Bootstrap (if the app uses it), then this file, then htw-bootstrap.css. Element styles here sit inside :where(), so they have no specificity: they style a plain page, and any framework class still wins over them. Rules for this file: no @import, no web fonts, no url() except data:, no JavaScript. It must work under every app's strict CSP. Relative colour syntax always has a plain fallback in front of it. */ :root { --font-sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif; /* Colour: brand (DS tokens/colors.css) */ --htw-blue: #0070C0; --htw-cyan: #009FE3; --htw-cyan-mid: #0091D6; --htw-navy: #05193A; --htw-blue-100: #E6F3FC; /* --hover-tint */ --htw-blue-200: #CADFF2; --htw-ink: #171717; --htw-slate: #5A6570; --htw-neutral-50: #F4F7F9; --htw-neutral-200: #E4EBF0; --htw-neutral-300: #D3DDE4; --htw-destructive: #E7000B; /* Colour: steps derived for states, not DS tokens */ --htw-blue-600: #0063AA; /* nav tab hover */ --htw-blue-700: #005C9E; /* pressed, current nav tab, link hover */ --htw-destructive-text: #C10007; /* danger as text, and the danger button's M */ --htw-input-border: #8A96A3; /* input and checkbox boundary, 3.01:1 */ --htw-success: #157347; /* the success button's M */ --htw-warning: #FFC107; /* the warning button's M */ /* Colour: status as text, each on white or on its own tint, 4.5:1 or better (1.2.0) */ --htw-success-text: #157347; --htw-success-tint: #E8F5EC; --htw-warning-text: #8A5A00; --htw-warning-tint: #FFF4D6; --htw-destructive-tint: #FDECEC; /* text on it is --htw-destructive-text */ --htw-info-text: #00668F; --htw-info-tint: #E5F5FC; /* Colour: charts (1.2.0). Five categorical series, every pair distinct for normal vision and deuteranopes. Not the DS's --chart-*, which are a blue ramp. */ --chart-1: #009FE3; /* HTW cyan */ --chart-2: #EE6438; --chart-3: #6250D6; --chart-4: #1BAF7A; --chart-5: #DBA91B; /* Colour: divisions (HTW_Guidelines.pdf 2.7) and Cool Grey 8. Brand colours that name a division, not a chart palette: Residential and Rural look alike to deuteranopes. */ --htw-residential: #F28E00; /* Pantone 144 */ --htw-rural: #9DC430; /* Pantone 375 */ --htw-commercial: #4A2178; /* Pantone 268 */ --htw-environmental: #E50052; /* Pantone 206 */ --htw-cool-grey-8: #8E9095; --htw-commercial-light: #7A5AA8; /* a second Commercial series */ --htw-environmental-light: #F06FA0; /* a second Environmental series */ /* Shape (DS tokens/surfaces.css) */ --radius: .625rem; /* buttons */ --radius-sm: 8px; /* inputs, selects, dropdowns, nav tabs */ --radius-md: 12px; /* alerts */ --radius-lg: 16px; /* cards, panels, list groups */ --radius-full: 999px; /* badges */ /* Elevation: navy-tinted, never black */ --shadow-1: 0 1px 2px rgba(16,42,66,.10), 0 1px 3px 1px rgba(16,42,66,.06); --shadow-2: 0 1px 2px rgba(16,42,66,.10), 0 2px 6px 2px rgba(16,42,66,.07); --shadow-3: 0 1px 3px rgba(16,42,66,.10), 0 4px 8px 3px rgba(16,42,66,.07); /* Motion */ --duration-fast: 150ms; --ease-standard: cubic-bezier(.2,0,0,1); --press-shift: 1px; --focus-ring: 0 0 0 2px #fff, 0 0 0 3.5px var(--htw-cyan-mid); } /* --- Base. The page is the DS panel grey; cards and inputs are white on it. */ :where(body) { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--htw-ink); background: var(--htw-neutral-50); } :where(p, li, figcaption, .htw-card) { text-wrap: pretty; } :where(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.2; text-wrap: balance; } :where(a) { color: var(--htw-blue); text-decoration: underline; text-underline-offset: 2px; } :where(a):hover { color: var(--htw-blue-700); } :where(summary) { cursor: pointer; } /* Keyboard focus: a cyan-mid ring (3.49:1 on white), never the DS cyan (2.97:1). */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--htw-cyan-mid); outline-offset: 2px; } /* --- Tables. Header xs bold slate, hairline rows, tabular figures. */ :where(table) { border-collapse: collapse; font-variant-numeric: tabular-nums; } :where(th, td) { padding: .5rem; text-align: left; border-bottom: 1px solid var(--htw-neutral-200); } :where(thead th) { font-size: .75rem; font-weight: 700; color: var(--htw-slate); } :where(tbody tr:hover > *) { background: var(--htw-neutral-50); } .num { text-align: right; font-variant-numeric: tabular-nums; } /* --- Forms, for pages without a framework. Put the label above the field in a .htw-label; a bare