/* ============================================================= ENTRECORE — colors & type tokens The native intelligence company. ============================================================= */ /* Fonts are loaded via in each page's — more reliable than CSS @import (some preview sandboxes block @import cross-origin). DM Sans is a substitute for Entrecore's bespoke display face; replace the --ec-font-display stack below when the real TTF lands. */ :root { /* ========================================================= COLOR — primitives (from Entrecore Color Guide) ========================================================= */ --ec-blue: #3064F6; /* royal / primary */ --ec-sky-blue: #35B2FF; /* secondary accent */ --ec-deep-blue: #001560; /* deep navy background */ --ec-soft-black: #181818; /* off-black surfaces */ --ec-black: #000000; --ec-white: #FFFFFF; --ec-cool-white: #EFF4FF; /* cool paper / subtle bg */ /* Derived tints (used sparingly — only for hover/press/rings). Same hues, OKLCH-tuned for harmony. */ --ec-blue-hover: #2551D6; --ec-blue-press: #1C42B3; --ec-blue-tint-08: rgba(48, 100, 246, 0.08); --ec-blue-tint-16: rgba(48, 100, 246, 0.16); --ec-sky-tint-12: rgba(53, 178, 255, 0.12); --ec-deep-tint-60: rgba(0, 21, 96, 0.60); --ec-ink-06: rgba(24, 24, 24, 0.06); --ec-ink-10: rgba(24, 24, 24, 0.10); --ec-ink-20: rgba(24, 24, 24, 0.20); --ec-ink-60: rgba(24, 24, 24, 0.60); /* Neutral scale (cool-leaning, to match Cool White) */ --ec-n-0: #FFFFFF; --ec-n-25: #F7F9FD; --ec-n-50: #EFF4FF; /* = cool white */ --ec-n-100:#E2E8F4; --ec-n-200:#C8D1E3; --ec-n-300:#A3AEC6; --ec-n-400:#7A8598; --ec-n-500:#555E70; --ec-n-600:#3A4152; --ec-n-700:#252A38; --ec-n-800:#151926; --ec-n-900:#0A0D1A; /* Semantic — light surface (default) */ --ec-bg: var(--ec-white); --ec-bg-subtle: var(--ec-cool-white); --ec-bg-muted: var(--ec-n-100); --ec-surface: var(--ec-white); --ec-surface-raised:var(--ec-white); --ec-border: var(--ec-n-100); --ec-border-strong:var(--ec-n-200); --ec-divider: var(--ec-n-100); --ec-fg: var(--ec-deep-blue); /* primary ink is navy, not black */ --ec-fg-strong: var(--ec-soft-black); --ec-fg-muted: var(--ec-n-500); --ec-fg-subtle: var(--ec-n-400); --ec-fg-on-blue: var(--ec-white); --ec-fg-on-deep: var(--ec-cool-white); --ec-accent: var(--ec-blue); --ec-accent-hover: var(--ec-blue-hover); --ec-accent-press: var(--ec-blue-press); --ec-accent-soft: var(--ec-blue-tint-08); --ec-accent-ring: var(--ec-blue-tint-16); --ec-accent-2: var(--ec-sky-blue); --ec-link: var(--ec-blue); --ec-link-hover: var(--ec-blue-hover); /* Status (kept restrained — not part of the primary palette) */ --ec-success: #1F9D64; --ec-warning: #C98A12; --ec-danger: #D64545; --ec-info: var(--ec-sky-blue); /* Focus */ --ec-focus-ring: 0 0 0 3px var(--ec-accent-ring); /* ========================================================= TYPE ========================================================= */ --ec-font-display: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --ec-font-sans: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --ec-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Scale — compact, decision-forward. Display stays lowercase. */ --ec-fs-display-2xl: 88px; --ec-lh-display-2xl: 0.98; --ec-ls-display-2xl: -0.035em; --ec-fs-display-xl: 64px; --ec-lh-display-xl: 1.02; --ec-ls-display-xl: -0.03em; --ec-fs-display-lg: 48px; --ec-lh-display-lg: 1.05; --ec-ls-display-lg: -0.025em; --ec-fs-h1: 40px; --ec-lh-h1: 1.1; --ec-ls-h1: -0.02em; --ec-fs-h2: 32px; --ec-lh-h2: 1.15; --ec-ls-h2: -0.018em; --ec-fs-h3: 24px; --ec-lh-h3: 1.25; --ec-ls-h3: -0.012em; --ec-fs-h4: 20px; --ec-lh-h4: 1.3; --ec-ls-h4: -0.008em; --ec-fs-lead: 20px; --ec-lh-lead: 1.5; --ec-fs-body: 16px; --ec-lh-body: 1.55; --ec-fs-small: 14px; --ec-lh-small: 1.5; --ec-fs-caption: 12px; --ec-lh-caption: 1.4; --ec-fs-overline: 11px; --ec-lh-overline: 1.2; --ec-ls-overline: 0.14em; --ec-fs-code: 14px; --ec-lh-code: 1.55; --ec-fw-regular: 400; --ec-fw-medium: 500; --ec-fw-semibold:600; --ec-fw-bold: 700; /* ========================================================= RADII — restrained. Entrecore favors precise geometry. ========================================================= */ --ec-radius-xs: 4px; --ec-radius-sm: 6px; --ec-radius-md: 8px; --ec-radius-lg: 12px; --ec-radius-xl: 16px; --ec-radius-2xl:24px; --ec-radius-pill: 999px; /* ========================================================= SPACING — 4px base ========================================================= */ --ec-sp-0: 0; --ec-sp-1: 4px; --ec-sp-2: 8px; --ec-sp-3: 12px; --ec-sp-4: 16px; --ec-sp-5: 20px; --ec-sp-6: 24px; --ec-sp-8: 32px; --ec-sp-10: 40px; --ec-sp-12: 48px; --ec-sp-16: 64px; --ec-sp-20: 80px; --ec-sp-24: 96px; --ec-sp-32: 128px; /* ========================================================= SHADOWS — soft, cool-tinted. Used with discipline. ========================================================= */ --ec-shadow-xs: 0 1px 2px rgba(0, 21, 96, 0.06); --ec-shadow-sm: 0 1px 2px rgba(0, 21, 96, 0.06), 0 2px 4px rgba(0, 21, 96, 0.04); --ec-shadow-md: 0 2px 4px rgba(0, 21, 96, 0.06), 0 8px 16px rgba(0, 21, 96, 0.08); --ec-shadow-lg: 0 4px 8px rgba(0, 21, 96, 0.06), 0 16px 32px rgba(0, 21, 96, 0.12); --ec-shadow-xl: 0 12px 24px rgba(0, 21, 96, 0.08), 0 32px 64px rgba(0, 21, 96, 0.16); --ec-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* ========================================================= MOTION — brisk, confident, no bounce. ========================================================= */ --ec-ease-standard: cubic-bezier(0.2, 0, 0, 1); --ec-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ec-ease-in: cubic-bezier(0.4, 0, 1, 1); --ec-dur-fast: 120ms; --ec-dur-base: 180ms; --ec-dur-slow: 260ms; --ec-dur-slower: 420ms; } /* Dark surface — swap tokens, keep the same names. */ [data-theme="deep"], .ec-on-deep { --ec-bg: var(--ec-deep-blue); --ec-bg-subtle: #00113F; --ec-bg-muted: #000F35; --ec-surface: #00113F; --ec-surface-raised:#001A6F; --ec-border: rgba(239, 244, 255, 0.10); --ec-border-strong:rgba(239, 244, 255, 0.18); --ec-divider: rgba(239, 244, 255, 0.08); --ec-fg: var(--ec-cool-white); --ec-fg-strong: var(--ec-white); --ec-fg-muted: rgba(239, 244, 255, 0.72); --ec-fg-subtle: rgba(239, 244, 255, 0.48); --ec-accent: var(--ec-sky-blue); --ec-accent-hover: #5AC0FF; --ec-accent-press: #1E9EF0; --ec-accent-soft: rgba(53, 178, 255, 0.14); --ec-accent-ring: rgba(53, 178, 255, 0.28); --ec-link: var(--ec-sky-blue); --ec-link-hover: #5AC0FF; } [data-theme="soft-black"] { --ec-bg: var(--ec-soft-black); --ec-bg-subtle: #1F1F1F; --ec-surface: #1F1F1F; --ec-surface-raised:#272727; --ec-border: rgba(255,255,255,0.08); --ec-border-strong:rgba(255,255,255,0.16); --ec-fg: var(--ec-cool-white); --ec-fg-strong: var(--ec-white); --ec-fg-muted: rgba(239,244,255,0.68); --ec-accent: var(--ec-sky-blue); --ec-link: var(--ec-sky-blue); } /* ============================================================= SEMANTIC ELEMENT STYLES Apply .ec-prose to a container, or reach directly for classes. ============================================================= */ .ec-prose, .ec-root { font-family: var(--ec-font-sans); font-size: var(--ec-fs-body); line-height: var(--ec-lh-body); color: var(--ec-fg); background: var(--ec-bg); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ec-display-2xl, .ec-h0 { font-family: var(--ec-font-display); font-size: var(--ec-fs-display-2xl); line-height: var(--ec-lh-display-2xl); letter-spacing: var(--ec-ls-display-2xl); font-weight: var(--ec-fw-medium); color: var(--ec-fg); text-wrap: balance; } .ec-display-xl { font-family: var(--ec-font-display); font-size: var(--ec-fs-display-xl); line-height: var(--ec-lh-display-xl); letter-spacing: var(--ec-ls-display-xl); font-weight: var(--ec-fw-medium); text-wrap: balance; } .ec-display-lg, h1.ec, .ec h1 { font-family: var(--ec-font-display); font-size: var(--ec-fs-display-lg); line-height: var(--ec-lh-display-lg); letter-spacing: var(--ec-ls-display-lg); font-weight: var(--ec-fw-medium); text-wrap: balance; } .ec-h1, h2.ec, .ec h2 { font-family: var(--ec-font-display); font-size: var(--ec-fs-h1); line-height: var(--ec-lh-h1); letter-spacing: var(--ec-ls-h1); font-weight: var(--ec-fw-semibold); text-wrap: balance; } .ec-h2, h3.ec, .ec h3 { font-family: var(--ec-font-display); font-size: var(--ec-fs-h2); line-height: var(--ec-lh-h2); letter-spacing: var(--ec-ls-h2); font-weight: var(--ec-fw-semibold); } .ec-h3 { font-size: var(--ec-fs-h3); line-height: var(--ec-lh-h3); letter-spacing: var(--ec-ls-h3); font-weight: var(--ec-fw-semibold); } .ec-h4 { font-size: var(--ec-fs-h4); line-height: var(--ec-lh-h4); font-weight: var(--ec-fw-semibold); } .ec-lead { font-size: var(--ec-fs-lead); line-height: var(--ec-lh-lead); color: var(--ec-fg-muted); text-wrap: pretty; } .ec-body, .ec p { font-size: var(--ec-fs-body); line-height: var(--ec-lh-body); text-wrap: pretty; } .ec-small { font-size: var(--ec-fs-small); line-height: var(--ec-lh-small); } .ec-caption { font-size: var(--ec-fs-caption); line-height: var(--ec-lh-caption); color: var(--ec-fg-muted); } .ec-overline { font-size: var(--ec-fs-overline); line-height: var(--ec-lh-overline); letter-spacing: var(--ec-ls-overline); text-transform: uppercase; font-weight: var(--ec-fw-semibold); color: var(--ec-fg-muted); } .ec-code, code.ec, .ec code, kbd.ec { font-family: var(--ec-font-mono); font-size: var(--ec-fs-code); line-height: var(--ec-lh-code); background: var(--ec-bg-subtle); border: 1px solid var(--ec-border); border-radius: var(--ec-radius-xs); padding: 1px 6px; } a.ec, .ec a { color: var(--ec-link); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--ec-link) 40%, transparent); transition: color var(--ec-dur-fast) var(--ec-ease-standard), border-color var(--ec-dur-fast) var(--ec-ease-standard); } a.ec:hover, .ec a:hover { color: var(--ec-link-hover); border-bottom-color: var(--ec-link-hover); } /* Lowercase category-term helper — per brand voice */ .ec-term { text-transform: lowercase; }