/* ============================================================================ CONSULTRAN DESIGN SYSTEM — Colors & Type ---------------------------------------------------------------------------- A modernized brand foundation for Consultran, LLC — Minnesota motor-carrier compliance since 1973. The system keeps the inherited equity (the rust infinity mark, the heritage, the "non-compliance is too expensive" voice) and rebuilds everything around it: clean warm-neutral surfaces, a confident grotesque display face, and a mono face for the filing numbers, deadlines, and DOT/MC identifiers this business lives in. FONT NOTE: the legacy site used system Arial only — it shipped no webfonts. Every typeface below is a NEW design recommendation, loaded from Google Fonts. If you have licensed brand fonts you'd rather use, swap the @import and the --font-* vars and the rest of the system follows. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* --------------------------------------------------------------------- BRAND — Rust / Brick Red Sampled directly from the Consultran infinity mark (#A0280E avg). The signature color. Used for primary actions, the mark, key accents. --------------------------------------------------------------------- */ --rust-900: #6E1A09; /* deepest — text on sand, pressed states */ --rust-800: #8A2110; /* pressed / active */ --rust-700: #A0280E; /* ★ PRIMARY brand red (logo-sampled) */ --rust-600: #BA3A1C; /* hover / lighter interactive */ --rust-500: #CF5230; /* bright accent, focus glow */ --rust-200: #F0CBBE; /* tint borders */ --rust-100: #F8E5DD; /* tint fill (badges, callouts) */ --rust-050: #FCF2EC; /* faintest wash background */ /* --------------------------------------------------------------------- INK / NEUTRALS — warm asphalt grays (not pure gray; faint warm cast so they sit comfortably with the rust and sand). --------------------------------------------------------------------- */ --ink-900: #1C1A18; /* headings, max-contrast text */ --ink-800: #2A2622; /* dark UI surfaces, footer */ --ink-700: #3C3631; /* body on light when extra weight wanted */ --ink-600: #564E47; /* default body text */ --ink-500: #756B61; /* secondary text, captions */ --ink-400: #9A9087; /* muted / placeholder */ --ink-300: #C2B9AE; /* disabled text */ --line: #E4DDD2; /* hairline borders, dividers */ --line-strong: #D2C9BC;/* stronger borders, input outlines */ /* --------------------------------------------------------------------- SURFACES — warm whites + heritage sand (the refined descendant of the old #CFC3A0 khaki, cleaned up and desaturated for use as section bg). --------------------------------------------------------------------- */ --paper: #FBFAF7; /* page background, warm white */ --surface: #FFFFFF; /* cards, panels */ --sand-100:#F3EEE3; /* alternating section background */ --sand-200:#E9E1D1; /* deeper sand band, table headers */ --asphalt: #211F1C; /* dark inverted sections / footer (warm black) */ --asphalt-700: #34302B;/* raised surface on dark */ /* --------------------------------------------------------------------- SEMANTIC — compliance-flavored. Consultran's whole job is statuses: compliant / due soon / overdue. These map to that mental model. --------------------------------------------------------------------- */ --success-700:#1F6442; --success:#2E7D52; --success-100:#DCEEE3; /* compliant, filed */ --warning-700:#9A5E06; --warning:#C77A0A; --warning-100:#FaeEd6; /* deadline approaching */ --danger-700: #93180D; --danger: #C0291C; --danger-100: #F8DAD5; /* overdue / penalty */ --info-700: #235273; --info: #2F6B8F; --info-100: #DCEAF1; /* informational / links */ /* --------------------------------------------------------------------- TYPE FAMILIES --------------------------------------------------------------------- */ --font-display: 'Archivo', 'Arial Narrow', sans-serif; /* headlines, hero */ --font-sans: 'IBM Plex Sans', Arial, Helvetica, sans-serif; /* body, UI */ --font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* data, IDs, $$ */ /* --------------------------------------------------------------------- TYPE SCALE — major-third-ish, tuned for a content/SEO-heavy site that needs to stay readable at length. --------------------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px — legal, captions */ --text-sm: 0.875rem; /* 14px — meta, labels */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead body */ --text-lg: 1.375rem; /* 22px — h3 / card titles */ --text-xl: 1.75rem; /* 28px — h2 */ --text-2xl: 2.25rem; /* 36px — h1 (interior) */ --text-3xl: 3rem; /* 48px — page hero */ --text-4xl: 4rem; /* 64px — big marketing hero */ --leading-tight: 1.12; --leading-snug: 1.3; --leading-body: 1.65; --tracking-tight: -0.02em; --tracking-flat: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* uppercase eyebrows / labels */ /* --------------------------------------------------------------------- RADII / SHADOW / SPACING — see VISUAL FOUNDATIONS in README --------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(28,26,24,0.06), 0 1px 3px rgba(28,26,24,0.05); --shadow-md: 0 2px 4px rgba(28,26,24,0.06), 0 6px 16px rgba(28,26,24,0.08); --shadow-lg: 0 10px 30px rgba(28,26,24,0.12), 0 2px 8px rgba(28,26,24,0.06); --shadow-focus: 0 0 0 3px var(--rust-200); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --container: 1120px; /* max content width */ } /* ============================================================================ SEMANTIC TYPE — apply these classes or copy the rules into components. ========================================================================= */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--rust-700); } .ds-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink-900); } .ds-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--ink-900); } .ds-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--ink-900); } .ds-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-body); color: var(--ink-600); } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-body); color: var(--ink-600); text-wrap: pretty; } .ds-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--ink-500); } .ds-data { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-base); letter-spacing: var(--tracking-flat); color: var(--ink-900); font-variant-numeric: tabular-nums; } .ds-label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--ink-700); }