/* design-base.css * * Reusable utility classes + font defaults built ON TOP of the tokens in * design-tokens.css. Hand-edit this file (not design-tokens.css). * * Usage from any template (after including partials/design_head.html): * * ... * * Pulls duplication out of 36 templates that each had their own * `* { box-sizing:border-box; font-family: 'Poppins'; ... }` + * `body { background: linear-gradient(135deg, #0a0a1a ...); ... }`. */ /* Minimal reset — scoped to elements under an ancestor with .ds-reset so pages can opt in. Historically each template inlined `* { ... }` globally which fought with third-party widgets (Tawk.to, Plotly). */ .ds-reset * { box-sizing: border-box; } .ds-reset { margin: 0; padding: 0; font-family: "Poppins", "Helvetica Neue", Arial, sans-serif; color: var(--text-primary); } /* Full-page brand body gradient. Drop on to replace `background: linear-gradient(135deg, #0a0a1a ... #16213e)` inline. */ .ds-surface { background: var(--surface-body-gradient); min-height: 100vh; color: var(--text-primary); } /* Common brand gradient — for buttons, accents, wordmarks. */ .ds-gradient-text { background: var(--brand-gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ds-gradient-bg { background: var(--brand-gradient-primary); color: var(--text-primary); } /* Risk tier helpers — read from the tokens so tier colors stay in sync. */ .ds-risk-low { color: var(--risk-low); } .ds-risk-elevated { color: var(--risk-elevated); } .ds-risk-high { color: var(--risk-high); }