/* ========================================================================== Stella Source Design System — Colors & Type Tokens Sourced from /Stella Source UI Kit.fig (Stella-Source page) ========================================================================== */ /* ----- Brand font: Inter (variable, local) ----- Uploaded to /fonts/ — referenced from any card/page via this stylesheet. Variable axes: `opsz` 14–32, `wght` 100–900. */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"), url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ----- Brand / Blues ----- Canonical names from the Stella Source color palette. */ --ss-primary-blue: #336DAE; /* Primary Blue — links, tab underline, chip text, CTA */ --ss-dark-navy: #1F4168; /* Dark Navy — footer, darkest brand surface */ --ss-sky-blue: #7099C6; /* Sky Blue — secondary blue accent */ --ss-light-blue: #EBF0FA; /* Light Blue — tinted bg, info banners, sidenav */ --ss-pale-blue: #F8FAFE; /* Pale Blue — near-white blue wash */ /* ----- Graphites / Neutrals ----- */ --ss-graphite: #222222; /* Graphite — densest text */ --ss-charcoal: #4D4D4D; /* Charcoal — primary text */ --ss-shadow: #777777; /* Shadow — secondary text */ --ss-smoke: #9F9F9F; /* Smoke — tertiary text */ --ss-medium-gray: #C6C6C6; /* Medium Gray— borders, disabled */ --ss-light-gray: #E6E6E6; /* Light Gray — dividers */ --ss-pale-gray: #F5F5F5; /* Pale Gray — subtle bg */ --ss-white: #FFFFFF; --ss-black: #000000; /* ----- Accent — Electric Cobalt (light surfaces) ----- v2 brand refresh: the accent moved from SecturaFAB orange (#FF7600) to electric cobalt. On dark-navy surfaces (.callout, .cta-strip, .bg-navy, .lever, .mission-card, .openings-card, .bsec.dark, .site-footer) site.css remaps --ss-accent onto the chartreuse below so contrast holds against navy. Components reference --ss-accent directly; legacy --ss-orange aliases stay for back-compat. */ --ss-accent: #1F5BE8; /* Cobalt — primary accent */ --ss-accent-dark: #1542B0; /* Cobalt Dark — pressed / active */ --ss-accent-light: #4C7BEF; /* Cobalt Light — hover / soft accent */ --ss-orange: var(--ss-accent); /* legacy alias */ --ss-dark-orange: var(--ss-accent-dark); /* legacy alias */ --ss-light-orange: var(--ss-accent-light); /* legacy alias */ /* ----- Accent — Hi-Vis Chartreuse (dark surfaces) ----- Applied automatically by site.css when an element appears inside a dark-navy surface. Don't reference these directly. */ --ss-chartreuse: #CCDC29; --ss-chartreuse-dark: #A8B819; --ss-chartreuse-light: #DCE85A; /* ----- Yellows ----- */ --ss-light-yellow: #FFFDEB; /* Light Yellow — soft background */ --ss-highlighter-yellow: #EAF765; /* Highlighter Yellow — callout / highlight */ --ss-warning-yellow: #FFB75D; /* Warning Yellow — warning */ /* ----- Semantic ----- */ --ss-error-red: #BC3D39; /* Error Red */ --ss-success-green: #108A53; /* Success Green */ /* ----- Semantic aliases (fg / bg / border) ----- */ --fg-primary: var(--ss-charcoal); --fg-secondary: var(--ss-shadow); --fg-muted: var(--ss-smoke); --fg-disabled: var(--ss-medium-gray); --fg-link: var(--ss-primary-blue); --fg-brand: var(--ss-dark-navy); --fg-accent: var(--ss-accent); --fg-on-accent: var(--ss-white); --bg-app: var(--ss-white); --bg-subtle: var(--ss-pale-gray); --bg-tint: var(--ss-light-blue); --bg-tint-faint: var(--ss-pale-blue); --border-default: var(--ss-medium-gray); --border-strong: var(--ss-shadow); --border-brand: var(--ss-primary-blue); /* ----- Legacy aliases (kept so existing cards/kit keep rendering) ----- */ --ss-blue-900: var(--ss-dark-navy); --ss-blue-700: var(--ss-primary-blue); --ss-blue-500: var(--ss-primary-blue); --ss-blue-400: var(--ss-sky-blue); --ss-blue-200: var(--ss-light-blue); --ss-blue-100: var(--ss-pale-blue); --ss-blue-chip: var(--ss-light-blue); --ss-cta-blue: var(--ss-primary-blue); --ss-orange-700: var(--ss-dark-orange); --ss-orange-500: var(--ss-orange); --ss-orange-400: var(--ss-orange); --ss-orange-300: var(--ss-light-orange); --ss-graphite-900: var(--ss-graphite); --ss-graphite-800: var(--ss-charcoal); --ss-graphite-700: #464F60; --ss-graphite-600: var(--ss-shadow); --ss-graphite-500: var(--ss-smoke); --ss-graphite-400: var(--ss-medium-gray); --ss-graphite-300: var(--ss-light-gray); --ss-graphite-200: var(--ss-light-gray); --ss-graphite-100: var(--ss-pale-gray); --ss-graphite-50: #F8F8F8; --ss-success: var(--ss-success-green); --ss-success-fg: var(--ss-success-green); --ss-success-bg: #E1FCEF; --ss-error: var(--ss-error-red); --ss-error-stroke: #EC080F; --ss-warning: var(--ss-warning-yellow); --ss-info-bg: var(--ss-light-blue); --ss-metal-gold: #AD8955; --ss-sage: #6E8778; /* ----- Shadows (from components) ----- */ --shadow-toggle: 0 3px 1px rgba(0,0,0,0.10), 0 1px 1px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.15); --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(152,161,178,0.10), 0 2px 4px rgba(17,24,38,0.15); --shadow-focus-error: 0 0 2px rgb(236,8,15); /* ----- Radius ----- */ --radius-xs: 3px; /* checkbox */ --radius-sm: 4px; /* chip, tag */ --radius-md: 5px; /* buttons, inputs-outer, alerts */ --radius-lg: 10px; /* FAB */ --radius-pill: 999px; /* ----- Spacing (8-pt-ish; observed) ----- */ --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; /* ----- Type system ----- */ --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif; /* Inter is the ONLY font in the system. The vars below exist as aliases so legacy references keep compiling, but they all resolve to Inter. */ --font-display-playful: var(--font-sans); --font-rounded: var(--font-sans); /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extrabold:800; /* Scale (observed: 12, 14, 16, 18, 20, 28, 32, 40, 70) */ --fs-micro: 10px; /* badge number */ --fs-xs: 12px; /* captions, chip, tag, label */ --fs-sm: 14px; /* body, button, tab */ --fs-md: 16px; /* body-lg, alert copy */ --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 28px; /* H2 */ --fs-3xl: 32px; /* H1 */ --fs-4xl: 40px; /* display */ --fs-hero: 70px; /* marketing hero */ } /* ----- Semantic type classes ----- */ .ss-h1 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-3xl); line-height: 1.1; color: var(--fg-primary); letter-spacing: -0.01em; } .ss-h2 { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.15; color: var(--fg-primary); } .ss-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xl); line-height: 1.2; color: var(--fg-primary); } .ss-hero { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-hero); line-height: 1.05; color: var(--fg-primary); letter-spacing: -0.02em; } .ss-body { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-md); line-height: 1.5; color: var(--fg-primary); } .ss-body-sm { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); line-height: 1.45; color: var(--fg-primary); } .ss-label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); line-height: 1; color: var(--fg-primary); } .ss-label-strong { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xs); line-height: 1; color: var(--fg-primary); letter-spacing: 0.02em; } .ss-button { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-sm); line-height: 1; letter-spacing: 0; } .ss-placeholder { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-sm); color: var(--fg-secondary); } .ss-tooltip { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-xs); color: var(--fg-primary); } .ss-link { color: var(--fg-link); text-decoration: none; font-weight: 500; } .ss-link:hover { text-decoration: underline; } /* Base reset that most cards use */ .ss-reset * { box-sizing: border-box; }