/* =============================================================================
folio-theme.css — The Folio visual system, portable edition.
A single drop-in stylesheet that gives any web app the Folio look:
Sage-green brand, warm-cool neutrals, Inter / JetBrains Mono / Instrument Serif,
compact density, light + dark.
This file is FRAMEWORK-AGNOSTIC. No MudBlazor, no Bootstrap, no Tailwind
dependencies. It defines:
1. Google Fonts import for the three Folio typefaces
2. Design tokens as CSS custom properties (--folio-*)
3. A small base layer (html/body defaults)
4. Utility classes (.f-btn, .f-card, .f-chip, .f-tag, .f-input, .stat, etc.)
5. Dark-mode token overrides (opt-in via .theme-dark class on a root element)
HOW TO USE
----------
1. Drop this file into your project (e.g. /public/folio-theme.css, /wwwroot/folio-theme.css,
/src/styles/folio-theme.css — whatever the host framework calls "static assets").
2. Add ONE link in your root layout, AFTER any framework CSS (Bootstrap, Material, etc.)
and BEFORE your own component styles, so the framework can be overridden and your
components can override Folio:
to opt into dark mode.
Or apply .theme-dark to for global dark mode.
4. Build using the utility classes (.f-card, .stat, .f-btn primary, etc.) or
reference tokens directly: color: var(--folio-brand-600).
ADAPTING TO YOUR UI FRAMEWORK
-----------------------------
The Folio tokens are framework-neutral. To make framework components
(Material, Bootstrap, Chakra, Ant, etc.) pick up the look:
- Map framework variables to Folio tokens. E.g. Bootstrap:
--bs-primary: var(--folio-brand-600);
--bs-body-bg: var(--folio-bg);
--bs-body-color: var(--folio-fg);
- Material UI / MUI: pass tokens into your theme provider.
- Tailwind: extend the theme in tailwind.config.js by reading custom props.
See README/handoff doc for a per-framework mapping cheat sheet.
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
/* =============================================================================
1 — Design tokens (the source of truth)
============================================================================= */
:root {
/* ─── Type ──────────────────────────────────────────────────────── */
--folio-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--folio-font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Display face: the CTR/NY site is Inter-only with heavy display
weights, so "serif" display slots render as bold Inter. */
--folio-font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
/* ─── Brand: CTR/NY Navy (matches new.ctrny.com ctr-modern.css) ── */
--folio-brand-50: #EDF2F8;
--folio-brand-100: #DAE4EE;
--folio-brand-200: #B4C7DA;
--folio-brand-300: #7E9AB8;
--folio-brand-400: #3D5366;
--folio-brand-500: #2D4154;
--folio-brand-600: #1F3245;
--folio-brand-700: #162534; /* primary brand navy */
--folio-brand-800: #0F1C2B;
--folio-brand-900: #0A131E;
/* ─── Accent: CTR/NY Red (CTAs / primary actions) ──────────────── */
--folio-accent-400: #FF4D57;
--folio-accent-500: #F82D39;
--folio-accent-600: #BC141E;
--folio-accent-700: #A8101A;
/* ─── Surfaces & lines (slate neutrals from the site) ──────────── */
--folio-bg: #F6F8FA; /* page background */
--folio-bg-elev: #FBFCFD; /* elevated panels (nav drawer, table headers) */
--folio-surface: #FFFFFF; /* cards, modals */
--folio-surface-2: #F1F5F9; /* hover backgrounds, subtle wells */
--folio-surface-3: #E9EEF4; /* depressed wells */
--folio-border: #E8EDF2; /* hairline borders */
--folio-border-strong: #CBD5E1; /* visible borders (input idle) */
--folio-divider: #EEF2F6; /* between-row dividers */
/* ─── Text ─────────────────────────────────────────────────────── */
--folio-fg: #1B2733; /* primary body */
--folio-fg-strong: #0D1622; /* headings, hero numbers */
--folio-fg-muted: #64748B; /* secondary copy */
--folio-fg-faint: #94A3B8; /* placeholders, hints */
/* ─── Semantic ─────────────────────────────────────────────────── */
--folio-positive: #16A34A;
--folio-positive-bg: #E7F6EC;
--folio-danger: #DC2626;
--folio-danger-bg: #FCEAEA;
--folio-warning: #D97706;
--folio-warning-bg: #FDF1DF;
--folio-info: #2F8FE6;
--folio-info-bg: #E3F1FC;
/* ─── Shadows (layered, soft on purpose) ───────────────────────── */
--folio-shadow-xs: 0 1px 2px rgba(16, 30, 46, 0.05);
--folio-shadow-sm: 0 1px 2px rgba(16, 30, 46, 0.05), 0 4px 12px rgba(16, 30, 46, 0.04);
--folio-shadow-md: 0 2px 4px rgba(16, 30, 46, 0.06), 0 8px 20px -2px rgba(16, 30, 46, 0.08);
--folio-shadow-lg: 0 8px 24px -6px rgba(16, 30, 46, 0.14), 0 24px 56px -12px rgba(16, 30, 46, 0.18);
--folio-focus: 0 0 0 3px rgba(47, 143, 230, 0.25);
/* ─── Radii ────────────────────────────────────────────────────── */
--folio-radius-xs: 4px;
--folio-radius-sm: 6px;
--folio-radius-md: 8px;
--folio-radius-lg: 14px;
--folio-radius-xl: 16px;
/* ─── Spacing scale (8px grid) ─────────────────────────────────── */
--folio-space-1: 4px;
--folio-space-2: 8px;
--folio-space-3: 12px;
--folio-space-4: 16px;
--folio-space-5: 20px;
--folio-space-6: 24px;
--folio-space-8: 32px;
}
/* =============================================================================
1b — Dark mode
Opt in by adding .theme-dark to (or any ancestor of the area you want
dark). Folio's dark mode is near-black with lifted sage, not navy.
============================================================================= */
.theme-dark,
body.theme-dark,
body.mud-theme-dark, /* Blazor / MudBlazor compatibility */
[data-theme="dark"] {
--folio-brand-50: #0A131E;
--folio-brand-100: #0F1C2B;
--folio-brand-200: #162534;
--folio-brand-300: #1F3245;
--folio-brand-400: #2D4154;
--folio-brand-500: #3D5366;
--folio-brand-600: #7E9AB8; /* lifted navy — usable on dark surfaces */
--folio-brand-700: #B4C7DA;
--folio-brand-800: #DAE4EE;
--folio-brand-900: #EDF2F8;
--folio-bg: #0A131E;
--folio-bg-elev: #0F1C2B;
--folio-surface: #12202E;
--folio-surface-2: #182838;
--folio-surface-3: #1F3245;
--folio-border: #223243;
--folio-border-strong: #2E425A;
--folio-divider: #182838;
--folio-fg: #E5EAF0;
--folio-fg-strong: #FFFFFF;
--folio-fg-muted: #94A3B8;
--folio-fg-faint: #64748B;
--folio-positive: #4ADE80;
--folio-positive-bg: #0A2018;
--folio-danger: #F87171;
--folio-danger-bg: #2A1110;
--folio-warning: #FBBF24;
--folio-warning-bg: #2A1E0A;
--folio-info: #38BDF8;
--folio-info-bg: #0A1C2A;
--folio-shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
--folio-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
--folio-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
--folio-shadow-lg: 0 16px 36px -10px rgba(0, 0, 0, 0.65), 0 6px 12px -4px rgba(0, 0, 0, 0.45);
--folio-focus: 0 0 0 3px rgba(126, 154, 184, 0.28);
}
/* =============================================================================
2 — Base
Sets the page font, smoothing, and background. Safe to override per-page.
============================================================================= */
html, body {
font-family: var(--folio-font-sans);
font-feature-settings: 'cv11', 'ss01', 'ss03';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--folio-bg);
color: var(--folio-fg);
font-size: 14px;
line-height: 1.5;
}
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--folio-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
/* =============================================================================
3 — Typography utilities
============================================================================= */
.f-mono, .mono { font-family: var(--folio-font-mono); font-feature-settings: 'tnum'; }
.f-num, .num { font-family: var(--folio-font-mono); font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }
.f-serif, .serif { font-family: var(--folio-font-serif); }
.f-overline {
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--folio-fg-muted);
}
.f-h1 { font-size: 1.75rem; font-weight: 600; color: var(--folio-fg-strong); letter-spacing: -0.02em; line-height: 1.2; }
.f-h2 { font-size: 1.5rem; font-weight: 600; color: var(--folio-fg-strong); letter-spacing: -0.02em; line-height: 1.25; }
.f-h3 { font-size: 1.25rem; font-weight: 600; color: var(--folio-fg-strong); letter-spacing: -0.015em; line-height: 1.3; }
.f-h4 { font-size: 1rem; font-weight: 600; color: var(--folio-fg-strong); line-height: 1.35; }
.f-display { font-family: var(--folio-font-serif); font-size: 2.75rem; line-height: 1.1; color: var(--folio-fg-strong); letter-spacing: -0.02em; }
.text-strong { color: var(--folio-fg-strong) !important; }
.text-default { color: var(--folio-fg) !important; }
.text-muted { color: var(--folio-fg-muted) !important; }
.text-faint { color: var(--folio-fg-faint) !important; }
.text-brand { color: var(--folio-brand-600) !important; }
.text-positive { color: var(--folio-positive) !important; }
.text-danger { color: var(--folio-danger) !important; }
.text-warning { color: var(--folio-warning) !important; }
.text-info { color: var(--folio-info) !important; }
/* =============================================================================
4 — Cards / surfaces
============================================================================= */
.f-card {
background: var(--folio-surface);
border: 1px solid var(--folio-border);
border-radius: var(--folio-radius-lg);
box-shadow: var(--folio-shadow-xs);
}
.f-card-hover {
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.f-card-hover:hover {
border-color: var(--folio-border-strong);
box-shadow: var(--folio-shadow-md);
}
/* =============================================================================
5 — Buttons
Use: …
…
Folio
FolioCRM
============================================================================= */
.folio-wordmark {
font-family: var(--folio-font-sans);
font-weight: 600;
letter-spacing: -0.025em;
color: currentColor;
line-height: 1;
display: inline-flex; align-items: baseline; gap: 6px;
}
.folio-wordmark small {
font-weight: 400; font-size: 0.62em; opacity: 0.62;
letter-spacing: 0; text-transform: lowercase;
}
/* =============================================================================
14 — Optional framework bridges
Map common framework variables to Folio tokens. Comment out the blocks you
don't need.
============================================================================= */
/* Bootstrap 5 — uncomment to apply */
/*
:root {
--bs-primary: var(--folio-brand-600);
--bs-body-bg: var(--folio-bg);
--bs-body-color: var(--folio-fg);
--bs-border-color: var(--folio-border);
--bs-success: var(--folio-positive);
--bs-danger: var(--folio-danger);
--bs-warning: var(--folio-warning);
--bs-info: var(--folio-info);
--bs-font-sans-serif: var(--folio-font-sans);
--bs-font-monospace: var(--folio-font-mono);
}
*/
/* MUI / Material UI — extend in your theme provider, not here. See README. */
/* =============================================================================
15 — Print
============================================================================= */
@media print {
.page-header,
.no-print { display: none !important; }
.f-card { box-shadow: none !important; border: none !important; padding: 0 !important; }
}