/* ========================================================================== SimplSolutions Design System — colors_and_type.css Veteran-owned managed IT · automation · consulting Brand voice: calm authority. Visual: warm surface, teal accent, glass. ========================================================================== */ /* Geist + Geist Mono — primary stack. Geist is a clean, low-contrast geometric grotesque suitable for both UI and display weights. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap'); :root { /* ===== Brand =========================================================== */ --ss-teal: #30A8A8; /* primary, sampled from logo */ --ss-teal-deep: #1E6D6D; /* hover, deep headings on light */ --ss-teal-ink: #114747; /* pressed state, ink on teal surfaces */ --ss-teal-soft: #C5E4E2; /* chips, fills, subtle dividers */ --ss-teal-wash: #EAF5F4; /* subtle backgrounds, focus rings */ /* ===== Warm surface system ============================================ */ --ss-sand: #EFE3CC; /* default page surface (warm) */ --ss-sand-deep: #E5D6B8; /* alt surface, section dividers */ --ss-paper: #FBF6EC; /* cards, panels on sand */ --ss-paper-bright: #FFFCF5; /* highest light surface (use sparingly) */ /* ===== Ink (dark frame + text) ======================================== */ --ss-ink: #191B1F; /* body copy on light, near-black */ --ss-ink-2: #3A4046; /* secondary copy */ --ss-ink-mute: #6F7368; /* meta, captions, disabled */ --ss-slate: #1B252B; /* dark frame / sidebar / status bar */ --ss-slate-2: #2A3940; /* dark surface raised */ /* ===== Hairlines & dividers =========================================== */ --ss-line: #DCD2BD; /* default border on warm surfaces */ --ss-line-strong: #BCB098; --ss-line-ink: rgba(25,27,31,0.10); /* ===== Status (used sparingly, never as large fills) ================== */ --ss-success: #3D8F61; --ss-warn: #C28A3B; --ss-danger: #B5443B; --ss-info: var(--ss-teal-deep); /* ===== Veteran accent (use very sparingly, e.g. service badges) ======= */ --ss-olive: #637153; /* ===== Glass (the signature SimplSolutions surface) ================== Glass surfaces sit ON the sand. They are NOT decorative — they are functional separation. Always pair with backdrop-filter and a subtle 1px inner border for the rim-light effect. */ --ss-glass-bg: rgba(251, 246, 236, 0.62); --ss-glass-bg-strong:rgba(251, 246, 236, 0.82); --ss-glass-bg-dark: rgba(27, 37, 43, 0.55); --ss-glass-rim: rgba(255, 255, 255, 0.55); --ss-glass-rim-dark: rgba(255, 255, 255, 0.10); --ss-glass-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 0 0 1px rgba(25,27,31,0.06), 0 18px 40px -16px rgba(31,42,48,0.18); --ss-glass-blur: saturate(140%) blur(18px); --ss-glass-blur-sm: saturate(130%) blur(10px); /* ===== Semantic roles (reach for these in components) ================ */ --ss-bg: var(--ss-sand); --ss-bg-alt: var(--ss-paper); --ss-fg: var(--ss-ink); --ss-fg-2: var(--ss-ink-2); --ss-fg-muted: var(--ss-ink-mute); --ss-fg-inverse: var(--ss-paper-bright); --ss-accent: var(--ss-teal); --ss-accent-deep: var(--ss-teal-deep); --ss-border: var(--ss-line); --ss-focus-ring: 0 0 0 3px var(--ss-teal-wash), 0 0 0 4px var(--ss-teal); /* ===== Typography ===================================================== */ --ss-font: 'Geist', 'Inter', system-ui, -apple-system, sans-serif; --ss-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ss-font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; /* Display scale (sans, tight) */ --ss-fs-display: clamp(56px, 8vw, 112px); /* hero, marketing */ --ss-fs-h1: clamp(36px, 4.4vw, 56px); --ss-fs-h2: clamp(28px, 3vw, 40px); --ss-fs-h3: clamp(22px, 2.2vw, 28px); --ss-fs-h4: 18px; --ss-fs-h5: 16px; /* Body scale */ --ss-fs-lead: 20px; /* intro paragraphs */ --ss-fs-body: 15px; --ss-fs-body-sm: 14px; --ss-fs-caption: 13px; /* Mono / label scale (always uppercase, tracked) */ --ss-fs-eyebrow: 12px; /* SECTION / TAG labels */ --ss-fs-meta: 11px; /* metadata, status pills, table headers */ --ss-fs-micro: 10px; /* timestamps, helper meta */ --ss-ls-display: -0.02em; --ss-ls-tight: -0.015em; --ss-ls-body: -0.005em; --ss-ls-eyebrow: 0.14em; --ss-ls-meta: 0.10em; --ss-ls-micro: 0.08em; --ss-lh-display: 0.95; --ss-lh-tight: 1.1; --ss-lh-snug: 1.25; --ss-lh-body: 1.55; --ss-lh-loose: 1.7; --ss-fw-light: 300; --ss-fw-reg: 400; --ss-fw-med: 500; --ss-fw-semi: 600; --ss-fw-bold: 700; --ss-fw-black: 800; /* ===== Spacing (4px base) ============================================ */ --ss-1: 4px; --ss-2: 8px; --ss-3: 12px; --ss-4: 16px; --ss-5: 20px; --ss-6: 24px; --ss-7: 32px; --ss-8: 40px; --ss-9: 56px; --ss-10: 72px; --ss-11: 96px; --ss-12: 128px; /* ===== Radii (architectural — prefer 6/12) =========================== */ --ss-r-xs: 4px; --ss-r-sm: 6px; /* default for inputs, chips, small buttons */ --ss-r-md: 10px; /* buttons, dense cards */ --ss-r-lg: 14px; /* cards, panels */ --ss-r-xl: 20px; /* modals, glass sheets */ --ss-r-2xl: 28px; /* hero containers */ --ss-r-pill: 999px; /* ===== Shadows (no glow, no neon — soft, low, warm) ================== */ --ss-shadow-1: 0 1px 0 rgba(25,27,31,0.04), 0 1px 2px rgba(25,27,31,0.04); --ss-shadow-2: 0 1px 0 rgba(25,27,31,0.04), 0 6px 14px -4px rgba(31,42,48,0.10); --ss-shadow-3: 0 1px 0 rgba(25,27,31,0.04), 0 14px 32px -10px rgba(31,42,48,0.14); --ss-shadow-4: 0 2px 0 rgba(25,27,31,0.04), 0 24px 60px -16px rgba(31,42,48,0.22); /* ===== Motion ======================================================== */ --ss-ease-out: cubic-bezier(.22,.61,.36,1); --ss-ease-inout: cubic-bezier(.45,.05,.55,.95); --ss-ease-spring: cubic-bezier(.34,1.42,.64,1); --ss-dur-fast: 140ms; --ss-dur: 220ms; --ss-dur-panel: 440ms; } /* ===== Base ============================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--ss-font); font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); color: var(--ss-fg); background: var(--ss-bg); letter-spacing: var(--ss-ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } /* ===== Type utility classes ============================================ */ .ss-display { font-family: var(--ss-font); font-size: var(--ss-fs-display); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-display); letter-spacing: var(--ss-ls-display); } .ss-h1 { font-family: var(--ss-font); font-size: var(--ss-fs-h1); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-tight); letter-spacing: var(--ss-ls-tight); } .ss-h2 { font-family: var(--ss-font); font-size: var(--ss-fs-h2); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-tight); letter-spacing: var(--ss-ls-tight); } .ss-h3 { font-family: var(--ss-font); font-size: var(--ss-fs-h3); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-snug); letter-spacing: var(--ss-ls-tight); } .ss-h4 { font-family: var(--ss-font); font-size: var(--ss-fs-h4); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-snug); } .ss-h5 { font-family: var(--ss-font); font-size: var(--ss-fs-h5); font-weight: var(--ss-fw-semi); line-height: var(--ss-lh-snug); } .ss-lead { font-size: var(--ss-fs-lead); line-height: var(--ss-lh-snug); color: var(--ss-fg-2); font-weight: var(--ss-fw-reg); } .ss-body { font-size: var(--ss-fs-body); line-height: var(--ss-lh-body); color: var(--ss-fg); } .ss-body-sm { font-size: var(--ss-fs-body-sm); line-height: var(--ss-lh-body); color: var(--ss-fg-2); } .ss-caption { font-size: var(--ss-fs-caption); line-height: var(--ss-lh-snug); color: var(--ss-fg-muted); } .ss-eyebrow { font-family: var(--ss-font-mono); font-size: var(--ss-fs-eyebrow); font-weight: var(--ss-fw-med); letter-spacing: var(--ss-ls-eyebrow); text-transform: uppercase; color: var(--ss-fg-muted); } .ss-meta { font-family: var(--ss-font-mono); font-size: var(--ss-fs-meta); font-weight: var(--ss-fw-med); letter-spacing: var(--ss-ls-meta); text-transform: uppercase; color: var(--ss-fg-muted); } .ss-micro { font-family: var(--ss-font-mono); font-size: var(--ss-fs-micro); font-weight: var(--ss-fw-med); letter-spacing: var(--ss-ls-micro); text-transform: uppercase; color: var(--ss-fg-muted); } .ss-mono { font-family: var(--ss-font-mono); } .ss-serif { font-family: var(--ss-font-serif); font-feature-settings: "ss01"; } /* ===== Glass surface helper ============================================ */ .ss-glass { background: var(--ss-glass-bg); backdrop-filter: var(--ss-glass-blur); -webkit-backdrop-filter: var(--ss-glass-blur); border: 1px solid var(--ss-glass-rim); box-shadow: var(--ss-glass-shadow); border-radius: var(--ss-r-lg); } .ss-glass-dark { background: var(--ss-glass-bg-dark); backdrop-filter: var(--ss-glass-blur); -webkit-backdrop-filter: var(--ss-glass-blur); border: 1px solid var(--ss-glass-rim-dark); color: var(--ss-fg-inverse); border-radius: var(--ss-r-lg); } /* ===== Status dot ====================================================== */ @keyframes ss-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } .ss-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-success); animation: ss-pulse 2.4s var(--ss-ease-inout) infinite; display: inline-block; } .ss-dot--idle { background: var(--ss-ink-mute); animation: none; } .ss-dot--warn { background: var(--ss-warn); } .ss-dot--danger { background: var(--ss-danger); }