/* ========================================================================= CROSS CONSTRUCTION DESIGN SYSTEM: TOKENS Slate-derived palette, Plus Jakarta Sans + Source Serif 4 type system. Token prefix: cc-* THEMING ------- The system runs dark-first. Add .cc-theme-light to any scope (, a
, a slide, a
) to flip semantic tokens to the light palette. The website ships dark; proposals and print typically ship light. The two themes share the raw palette, type system, spacing, radii, shadows, and motion — only the SEMANTIC roles flip. ========================================================================= */ /* ----- FONT FACES -------------------------------------------------------- */ /* Plus Jakarta Sans — the brand SANS. Display headlines (H1/H2/H3) and all UI chrome (nav, buttons, inputs, eyebrows, micro). Replaces Arbeit Pro + Arbeit Pro Contrast. 5 weights × roman+italic. */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('fonts/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype');font-weight: 800; font-style: italic; font-display: swap; } /* Source Serif 4 — the brand SERIF. Body reading text (paragraphs, lede, H4) AND the headline accent move (closing phrase set in Source Serif 4 ITALIC, slate blue — the Kaizn pattern). Replaces Gambarino. 4 weights × roman+italic. */ @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Source Serif 4'; src: url('fonts/SourceSerif4-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; font-display: swap; } /* ----- TOKENS — RAW PALETTE (theme-invariant) ---------------------------- */ :root { /* PRIMARY palette */ --cc-slate-black: #1B2226; --cc-slate: #3C4950; --cc-off-white: #F5F5F5; /* SECONDARY palette */ --cc-warm-200: #E9E8E4; --cc-warm-300: #D6D5D2; --cc-slate-blue: #6D92A5; /* TERTIARY — 6-step cool grey scale (Pantone Cool Gray C). Use for chrome, dividers, secondary ink, surface tints. The full ramp is intentional — it's the brand's neutral system. */ --cc-cool-700: #57636A; --cc-cool-500: #88939C; --cc-cool-300: #CDD2D4; --cc-cool-200: #E0E4E4; --cc-cool-100: #F0F2F2; --cc-cool-50: #F8F8F8; /* DARKEST surface (one step below slate-black, for footers/closing slide) */ --cc-near-black: #0F1416; /* TYPE families --cc-font-display Plus Jakarta Sans — H1/H2/H3 headlines --cc-font-ui Plus Jakarta Sans — nav, buttons, inputs, eyebrows, micro --cc-font-body Source Serif 4 — body reading text + H4 + lede --cc-font-accent Source Serif 4 — headline accent move (used ITALIC) */ --cc-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --cc-font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --cc-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --cc-font-accent: 'Source Serif 4', Georgia, 'Times New Roman', serif; --cc-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* TYPE sizes — brand-book spec (px), used by .cc-h1 … .cc-micro classes. The fluid clamp() values below are kept for components that opt into responsive scaling (website hero, etc). Slide / print contexts use the fixed sizes directly via .cc-h1, .cc-h2, etc. */ --cc-h1-size: 128px; --cc-h2-size: 96px; --cc-h3-size: 64px; --cc-h4-size: 48px; --cc-lede-size: 24px; --cc-body-size: 16px; --cc-micro-size: 14px; /* Fluid alternates — components reach for these when they need to scale */ --cc-h1-fluid: clamp(3rem, 8vw, 8rem); --cc-h2-fluid: clamp(2.25rem, 6vw, 6rem); --cc-h3-fluid: clamp(1.75rem, 4vw, 4rem); --cc-h4-fluid: clamp(1.5rem, 3vw, 3rem); --cc-lede-fluid: clamp(1.125rem, 1.5vw, 1.5rem); /* TYPE rhythm */ --cc-h1-tracking: -0.02em; --cc-h2-tracking: -0.015em; --cc-h3-tracking: -0.01em; --cc-h1-leading: 0.95; --cc-h2-leading: 1.0; --cc-h3-leading: 1.05; --cc-body-leading: 1.6; /* SPACING (rem-based) */ --cc-space-xs: 0.5rem; --cc-space-sm: 0.75rem; --cc-space-md: 1.5rem; --cc-space-lg: 2rem; --cc-space-xl: 4rem; --cc-space-2xl: 6rem; --cc-space-3xl: 8rem; /* RADII Every corner square. */ --cc-radius-none: 0; --cc-radius-sm: 0; /* SHADOWS */ --cc-shadow-modal: 0 12px 32px -16px rgba(27, 34, 38, 0.18); /* MOTION */ --cc-transition-fast: 0.2s ease; /* LOGO SIZES */ --cc-logo-sm: 24px; --cc-logo-md: 40px; --cc-logo-lg: 64px; /* LAYOUT */ --cc-content-max: 1280px; --cc-gutter: 32px; --cc-gutter-mobile: 16px; } /* ----- SEMANTIC TOKENS · DARK THEME (the unmarked default) --------------- Every semantic token used by components is declared here. Light theme below redeclares the same list. If you add a new semantic token, add it to BOTH blocks so theme parity stays mechanical. */ :root, .cc-theme-dark { /* surfaces */ --cc-bg: var(--cc-slate-black); --cc-bg-card: var(--cc-slate); --cc-bg-deep: var(--cc-near-black); --cc-bg-inverse: var(--cc-off-white); /* ink */ --cc-text: var(--cc-off-white); --cc-text-muted: var(--cc-cool-500); --cc-text-faint: var(--cc-cool-700); --cc-text-disabled: var(--cc-cool-700); --cc-text-inverse: var(--cc-slate-black); /* line work */ --cc-hairline: var(--cc-cool-500); --cc-hairline-strong: var(--cc-cool-500); --cc-input-border: var(--cc-cool-700); /* links + accent */ --cc-accent: var(--cc-slate-blue); --cc-link: var(--cc-slate-blue); --cc-link-hover: var(--cc-off-white); /* buttons */ --cc-button-bg: var(--cc-off-white); --cc-button-bg-hover: var(--cc-slate-blue); --cc-button-text: var(--cc-slate-black); --cc-button-text-hover:var(--cc-off-white); /* lockup variant to use against this theme's surfaces */ --cc-logo-variant: 'light'; /* read by JS that swaps logo src */ } /* ----- SEMANTIC TOKENS · LIGHT THEME ------------------------------------- */ .cc-theme-light { /* surfaces */ --cc-bg: var(--cc-off-white); --cc-bg-card: var(--cc-warm-200); --cc-bg-deep: var(--cc-warm-300); --cc-bg-inverse: var(--cc-slate-black); /* ink */ --cc-text: var(--cc-slate-black); --cc-text-muted: var(--cc-cool-700); --cc-text-faint: var(--cc-cool-500); --cc-text-disabled: var(--cc-cool-500); --cc-text-inverse: var(--cc-off-white); /* line work */ --cc-hairline: var(--cc-warm-300); --cc-hairline-strong: var(--cc-cool-500); --cc-input-border: var(--cc-cool-500); /* links + accent */ --cc-accent: var(--cc-slate-blue); --cc-link: var(--cc-slate-blue); --cc-link-hover: var(--cc-slate-black); /* buttons */ --cc-button-bg: var(--cc-slate); --cc-button-bg-hover: var(--cc-slate-black); --cc-button-text: var(--cc-off-white); --cc-button-text-hover:var(--cc-off-white); /* lockup variant */ --cc-logo-variant: 'brand'; } /* When a light scope is nested in dark (or vice versa), make sure background and ink actually paint on that element so the local theme is visible without each component having to remember to set them. */ .cc-theme-light, .cc-theme-dark { background: var(--cc-bg); color: var(--cc-text); } /* ----- BASE ELEMENT STYLES ----------------------------------------------- */ html { background: var(--cc-bg); color: var(--cc-text); font-family: var(--cc-font-body); font-size: var(--cc-body-size); line-height: var(--cc-body-leading); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .cc-h1 { font-family: var(--cc-font-display); font-weight: 600; font-size: var(--cc-h1-size); line-height: var(--cc-h1-leading); letter-spacing: var(--cc-h1-tracking); color: var(--cc-text); margin: 0 0 var(--cc-space-md); } h2, .cc-h2 { font-family: var(--cc-font-display); font-weight: 500; font-size: var(--cc-h2-size); line-height: var(--cc-h2-leading); letter-spacing: var(--cc-h2-tracking); color: var(--cc-text); margin: 0 0 var(--cc-space-md); } h3, .cc-h3 { font-family: var(--cc-font-display); font-weight: 500; font-size: var(--cc-h3-size); line-height: var(--cc-h3-leading); letter-spacing: var(--cc-h3-tracking); color: var(--cc-text); margin: 0 0 var(--cc-space-sm); } h4, .cc-h4 { font-family: var(--cc-font-accent); font-weight: 400; font-size: var(--cc-h4-size); line-height: 1.15; color: var(--cc-text); margin: 0 0 var(--cc-space-sm); } .cc-lede { font-family: var(--cc-font-accent); font-weight: 400; font-size: var(--cc-lede-size); line-height: 1.4; color: var(--cc-text); } .cc-micro { font-family: var(--cc-font-ui); font-size: var(--cc-micro-size); color: var(--cc-text-muted); } /* THE ACCENT MOVE: closing phrase of a Plus Jakarta headline set in Source Serif 4 ITALIC, slate-blue (the Kaizn pattern). */ .cc-accent { font-family: var(--cc-font-accent); font-weight: 400; font-style: italic; color: var(--cc-accent); letter-spacing: 0; } a { color: var(--cc-link); text-decoration: none; border-bottom: 1px solid currentColor; /* No color transition: Chrome won't repaint var(--cc-link) when the custom property flips on a theme swap. Instant hover is on-brand anyway. */ } a:hover { color: var(--cc-link-hover); } button, .cc-button { font-family: var(--cc-font-ui); font-weight: 600; font-size: var(--cc-body-size); background-color: var(--cc-button-bg); color: var(--cc-button-text); border: none; border-radius: var(--cc-radius-sm); padding: 14px 28px; cursor: pointer; /* No transition on themed properties (background-color, color). Opacity only. */ transition: opacity var(--cc-transition-fast); } button:hover, .cc-button:hover { background-color: var(--cc-button-bg-hover); color: var(--cc-button-text-hover); } button:active, .cc-button:active { opacity: 0.85; } input, textarea, select { font-family: var(--cc-font-ui); font-size: var(--cc-body-size); background: transparent; color: var(--cc-text); border: 1px solid var(--cc-input-border); border-radius: var(--cc-radius-sm); padding: 12px 16px; } input::placeholder, textarea::placeholder { color: var(--cc-text-faint); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--cc-slate-blue); } hr { border: none; border-top: 1px solid var(--cc-hairline); margin: var(--cc-space-lg) 0; }