/* ============================================================ SafetySupport — Design Tokens Colors + Typography. Import this once at the top of any page. ============================================================ */ /* ---------- Webfonts ----------------------------------------- Verdana Pro Light is the working body weight per brief. The licensed Light .ttf is shipped in fonts/. Regular (400) and Bold (700) fall back to system Verdana until the corresponding files are supplied. --------------------------------------------------------- */ @font-face { font-family: "Verdana Pro"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/verdana-pro-light.ttf") format("truetype"), local("Verdana Pro Light"), local("VerdanaPro-Light"), local("Verdana"); } @font-face { font-family: "Verdana Pro"; font-weight: 400; font-style: normal; font-display: swap; src: local("Verdana Pro"), local("VerdanaPro-Regular"), local("Verdana"); } @font-face { font-family: "Verdana Pro"; font-weight: 700; font-style: normal; font-display: swap; src: local("Verdana Pro Bold"), local("VerdanaPro-Bold"), local("Verdana Bold"), local("Verdana"); } :root { /* ============================================================ COLOR — Brand Two colors. Orange does the talking, black holds the page. ============================================================ */ --ss-orange: #FF9D00; /* primary — sampled from logo */ --ss-orange-deep: #E09215; /* darker variant (figure shading) */ --ss-orange-soft: #FFB84D; /* hover / lighter tint */ --ss-orange-wash: #FFF4E0; /* tinted background */ --ss-black: #0A0A0A; /* core ink */ --ss-black-true: #000000; /* logo / pure-K applications only */ /* ---------- Neutrals (cool-warm gray, lifted toward warm) ---- */ --ss-ink-1: #0A0A0A; --ss-ink-2: #2A2A2A; --ss-ink-3: #4A4A4A; --ss-ink-4: #6E6E6E; --ss-ink-5: #9A9A9A; --ss-ink-6: #C8C8C8; --ss-ink-7: #E5E5E5; --ss-ink-8: #F2F2F2; --ss-ink-9: #F8F8F8; --ss-paper: #FFFFFF; /* ---------- Semantic — accent ------------------------------- */ --ss-accent: var(--ss-orange); --ss-accent-hover: var(--ss-orange-deep); --ss-accent-press: #C77E10; --ss-on-accent: #FFFFFF; /* ---------- Status (kept tight so brand stays minimal) ------ */ --ss-success: #2F8F4E; --ss-warning: #F5B400; --ss-danger: #D33A2C; --ss-info: #2B6CB0; /* ============================================================ FOREGROUND / BACKGROUND tokens ============================================================ */ --ss-fg-1: var(--ss-ink-1); /* primary text */ --ss-fg-2: var(--ss-ink-3); /* secondary text */ --ss-fg-3: var(--ss-ink-4); /* tertiary / captions */ --ss-fg-mute: var(--ss-ink-5); /* disabled */ --ss-fg-on-dark: #FFFFFF; --ss-bg-1: var(--ss-paper); /* canvas */ --ss-bg-2: var(--ss-ink-9); /* subtle surface */ --ss-bg-3: var(--ss-ink-8); /* deeper surface */ --ss-bg-dark: var(--ss-black); /* black panel */ --ss-line: var(--ss-ink-7); /* default border */ --ss-line-strong: var(--ss-ink-6); --ss-line-faint: var(--ss-ink-8); /* ============================================================ TYPOGRAPHY One family. Weight + size + tracking carry hierarchy. ============================================================ */ --ss-font-sans: "Verdana Pro", Verdana, "DejaVu Sans", Geneva, Tahoma, sans-serif; --ss-font-mono: "SF Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; /* weight scale — Light is the default body weight per brief */ --ss-w-light: 300; --ss-w-regular: 400; --ss-w-bold: 700; /* type scale (perfect-fourth-ish, anchored at 16px) */ --ss-t-xs: 12px; --ss-t-sm: 14px; --ss-t-base: 16px; --ss-t-md: 18px; --ss-t-lg: 22px; --ss-t-xl: 28px; --ss-t-2xl: 36px; --ss-t-3xl: 48px; --ss-t-4xl: 64px; --ss-t-display: 88px; /* leading */ --ss-lh-tight: 1.1; --ss-lh-snug: 1.25; --ss-lh-normal: 1.5; --ss-lh-loose: 1.65; /* tracking — Verdana sits wide; pull tight on display, open on caps */ --ss-track-tight: -0.01em; --ss-track-normal: 0; --ss-track-wide: 0.04em; --ss-track-caps: 0.12em; /* ============================================================ SPACING / RADII / SHADOW / MOTION ============================================================ */ --ss-s-0: 0; --ss-s-1: 4px; --ss-s-2: 8px; --ss-s-3: 12px; --ss-s-4: 16px; --ss-s-5: 24px; --ss-s-6: 32px; --ss-s-7: 48px; --ss-s-8: 64px; --ss-s-9: 96px; --ss-s-10: 128px; --ss-r-none: 0; --ss-r-sm: 2px; --ss-r-md: 4px; --ss-r-lg: 8px; --ss-r-pill: 999px; --ss-shadow-0: none; --ss-shadow-1: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04); --ss-shadow-2: 0 4px 12px rgba(10,10,10,0.08), 0 1px 2px rgba(10,10,10,0.05); --ss-shadow-3: 0 12px 32px rgba(10,10,10,0.12), 0 2px 6px rgba(10,10,10,0.06); --ss-focus-ring: 0 0 0 3px rgba(255,157,0,0.35); --ss-ease: cubic-bezier(.2,.7,.2,1); --ss-dur-fast: 120ms; --ss-dur-base: 200ms; --ss-dur-slow: 360ms; } /* ============================================================ SEMANTIC TYPE — drop-in classes / element defaults ============================================================ */ html, body { font-family: var(--ss-font-sans); font-weight: var(--ss-w-light); font-size: var(--ss-t-base); line-height: var(--ss-lh-normal); color: var(--ss-fg-1); background: var(--ss-bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, .ss-h1 { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-3xl); line-height: var(--ss-lh-tight); letter-spacing: var(--ss-track-tight); color: var(--ss-fg-1); margin: 0; } h2, .ss-h2 { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-2xl); line-height: var(--ss-lh-tight); letter-spacing: var(--ss-track-tight); color: var(--ss-fg-1); margin: 0; } h3, .ss-h3 { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-xl); line-height: var(--ss-lh-snug); color: var(--ss-fg-1); margin: 0; } h4, .ss-h4 { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-lg); line-height: var(--ss-lh-snug); color: var(--ss-fg-1); margin: 0; } .ss-display { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-display); line-height: 0.95; letter-spacing: -0.02em; color: var(--ss-fg-1); } .ss-eyebrow { font-family: var(--ss-font-sans); font-weight: var(--ss-w-bold); font-size: var(--ss-t-xs); letter-spacing: var(--ss-track-caps); text-transform: uppercase; color: var(--ss-orange); } p, .ss-p { font-weight: var(--ss-w-light); font-size: var(--ss-t-base); line-height: var(--ss-lh-normal); color: var(--ss-fg-1); margin: 0 0 var(--ss-s-4); text-wrap: pretty; } .ss-lead { font-weight: var(--ss-w-light); font-size: var(--ss-t-md); line-height: var(--ss-lh-normal); color: var(--ss-fg-2); } .ss-small, small { font-size: var(--ss-t-sm); color: var(--ss-fg-3); } .ss-caption { font-size: var(--ss-t-xs); letter-spacing: var(--ss-track-wide); color: var(--ss-fg-3); } code, .ss-mono { font-family: var(--ss-font-mono); font-size: 0.92em; } /* Accent helpers — the brand voice in two strokes */ .ss-accent-text { color: var(--ss-orange); } .ss-mark-bar { display: inline-block; width: 32px; height: 3px; background: var(--ss-orange); margin-bottom: var(--ss-s-3); }