/* * theme-default.css — Influex Default Theme (CSS Catalog) * * THIS FILE IS THE CATALOG. Every --influex-* variable consumed by * wwwroot/css/influex.css is defined here, grouped by UI section. To rebrand * Influex or build a new theme, copy this file to theme-{name}.css and edit * the values. Do NOT hunt through influex.css to change colours — every * colour, font, sizing token referenced there resolves to a variable below. * * Design system: see /design.md at the repo root for the visual rationale, * typography scale, shadow-as-border philosophy, and palette reasoning. This * file is the machine-readable form of that doc. * * RULES (see CLAUDE.md "CSS Naming & Theming"): * 1. Every variable defined here MUST also be defined in every sibling * theme file (theme-dark.css, etc). Missing variables fall back to the * browser default and break the UI. * 2. Section order in this file mirrors the order in theme-dark.css. * Keep them in lockstep so a side-by-side diff is meaningful. * 3. Never reference colour literals in influex.css — promote them to * variables here. * * Section index: * 1. Foundation — page bg, surface tones, neutral scale * 2. Typography — font families, text colours, weight + tracking scale * 3. Spacing & layout — paddings, max-widths, sizing tokens * 4. Radii — corner radius scale * 5. Shadows — shadow-as-border + multi-layer card stack * 6. Motion — transition timings * 7. Focus ring — keyboard focus indicators * 8. Brand / primary — primary accent + hover * 9. Navigation — top nav bar * 10. Cards — brand / campaign / product card surfaces * 11. Status badges — campaign-status pill colours * 12. Forms — input border + focus * 13. Buttons — primary, secondary, google, signout * 14. Chips / tags — goal / phrase / category lists * 15. Entity thumbs — header avatars + form previews * 16. Settings page — settings tabs surface * 17. Login page — login surface + logo size */ :root { /* ═══════════════════════════════════════════════════════════════════════ * 1. Foundation * * Achromatic neutral scale anchored on near-black (#171717) and near-white * (#fafafa). The page background is the near-white tone — the gallery * feel — and card surfaces step up to pure white with shadow-as-border * separation. * * --influex-gray-* are the raw neutral steps; downstream tokens * reference them where the role matters more than the exact value. * ═══════════════════════════════════════════════════════════════════════ */ --influex-gray-1000: #171717; /* near-black, primary text */ --influex-gray-700: #4d4d4d; /* body copy */ --influex-gray-500: #666666; /* secondary / captions */ --influex-gray-400: #808080; /* muted / placeholders */ --influex-gray-200: #ebebeb; /* ring-border tone, dividers */ --influex-gray-50: #fafafa; /* inner-glow ring, page bg */ --influex-bg: #fafafa; --influex-surface: #ffffff; --influex-surface-elevated: #ffffff; --influex-surface-border: var(--influex-gray-200); /* ═══════════════════════════════════════════════════════════════════════ * 2. Typography * * System-font stack — see /design.md §3 for rationale (no CDN dependency, * no FOUT). Negative letter-spacing tokens mirror the heading scale. * "liga" enabled globally on body via influex.css. * * --influex-text-primary is body copy and headings. -secondary is for * supporting metadata (subtitles, captions). -muted is for de-emphasised * UI (footers, timestamps, empty-state copy). All three must hold AA * contrast against --influex-bg AND --influex-card-bg. * ═══════════════════════════════════════════════════════════════════════ */ --influex-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --influex-font-family-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --influex-text-primary: var(--influex-gray-1000); --influex-text-secondary: var(--influex-gray-700); --influex-text-muted: var(--influex-gray-400); /* Heading scale — matches /design.md §3 hierarchy table. */ --influex-fs-display: 3.00rem; /* 48px — login splash */ --influex-fs-h1: 2.00rem; /* 32px — list page H1 */ --influex-fs-h2: 1.50rem; /* 24px — section heading */ --influex-fs-card-title: 1.00rem; /* 16px — card title (semibold) */ --influex-fs-body: 0.9375rem; /* 15px — body */ --influex-fs-ui: 0.875rem; /* 14px — buttons, nav, labels */ --influex-fs-caption: 0.75rem; /* 12px — meta, timestamps */ --influex-tracking-display: -2.4px; --influex-tracking-h1: -1.28px; --influex-tracking-h2: -0.96px; --influex-tracking-card: -0.32px; --influex-tracking-normal: 0; --influex-fw-regular: 400; --influex-fw-medium: 500; --influex-fw-semibold: 600; /* ═══════════════════════════════════════════════════════════════════════ * 3. Spacing & layout * * Page-level container caps. Used by .page-content padding and the form * containers / settings page max-widths. * ═══════════════════════════════════════════════════════════════════════ */ --influex-content-padding: 1.5rem; --influex-form-container-max: 640px; --influex-form-container-wide-max: 720px; --influex-settings-max-width: 960px; /* ═══════════════════════════════════════════════════════════════════════ * 4. Radii * * Functional scale — see /design.md §5 "Border radius scale". * 6px buttons, 8px cards, 12px image cards, 9999px pills. * ═══════════════════════════════════════════════════════════════════════ */ --influex-radius-xs: 4px; --influex-radius-sm: 8px; /* cards, list items, entity thumbs */ --influex-radius-md: 12px; /* image-led cards, login surface */ --influex-radius-lg: 16px; /* future-use — large hero cards */ --influex-radius-btn: 6px; /* buttons */ --influex-radius-pill: 9999px; /* badges, chips, tags */ /* ═══════════════════════════════════════════════════════════════════════ * 5. Shadows * * Shadow-as-border philosophy: replace CSS `border:` on custom surfaces * with a zero-offset, zero-blur, 1px-spread shadow. See /design.md §6 * "Depth & elevation". * * ring — default surface ring (Level 1) * ring-light — lighter ring for tabs / image containers (Level 1b) * subtle — minimal lift (Level 2) * ambient — far-distance ambient blur (Level 3 contributor) * inner-glow — inner highlight that completes the multi-layer stack * * shadow-card — Level 2 default card (ring + subtle) * shadow-card-full — Level 3 hovered/featured card (full stack) * shadow-card-hover — alias used at :hover state * ═══════════════════════════════════════════════════════════════════════ */ --influex-shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.08); --influex-shadow-ring-light: 0 0 0 1px var(--influex-gray-200); --influex-shadow-subtle: 0 2px 2px rgba(0, 0, 0, 0.04); --influex-shadow-ambient: 0 8px 8px -8px rgba(0, 0, 0, 0.04); --influex-shadow-inner-glow: inset 0 0 0 1px var(--influex-gray-50); --influex-shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.04); --influex-shadow-card-full: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.04), 0 8px 8px -8px rgba(0, 0, 0, 0.04), inset 0 0 0 1px var(--influex-gray-50); --influex-shadow-card-hover: var(--influex-shadow-card-full); /* Legacy aliases — kept for any influex.css consumer that still references the older names. Resolve to the new tokens. */ --influex-card-shadow: var(--influex-shadow-card); --influex-card-hover-shadow: var(--influex-shadow-card-hover); /* ═══════════════════════════════════════════════════════════════════════ * 6. Motion * * Default transition timing for hover / state changes. Components honour * prefers-reduced-motion via a wrapping @media query in influex.css. * ═══════════════════════════════════════════════════════════════════════ */ --influex-transition-fast: .15s ease; --influex-transition-med: .25s ease; /* ═══════════════════════════════════════════════════════════════════════ * 7. Focus ring * * Saturated blue, deliberately distinct from the brand accent — focus is * an accessibility primitive that should never depend on the brand colour. * /design.md §6 "Depth & elevation" Level 4. * ═══════════════════════════════════════════════════════════════════════ */ --influex-focus-ring-color: hsla(212, 100%, 48%, 1); --influex-focus-ring-offset: 2px; --influex-focus-ring-width: 2px; /* ═══════════════════════════════════════════════════════════════════════ * 8. Brand / primary * * Single brand accent — Influex Indigo. Reserved for primary CTAs, nav * active state, and the brand wordmark. /design.md §2 "Brand accent". * ═══════════════════════════════════════════════════════════════════════ */ --influex-primary: #6C63FF; --influex-primary-hover: #574fd6; --influex-primary-text: #ffffff; --influex-accent: #FF6584; /* future-use; reserved for highlight UI */ /* ═══════════════════════════════════════════════════════════════════════ * 9. Navigation * * White sticky nav. Active link uses the brand Indigo at semibold weight; * inactive links sit at medium weight with the secondary text colour. * Bottom edge uses the ring-border shadow technique, not a CSS border. * ═══════════════════════════════════════════════════════════════════════ */ --influex-nav-bg: #ffffff; --influex-nav-border: var(--influex-gray-200); --influex-nav-text: var(--influex-gray-700); --influex-nav-link-active: var(--influex-primary); --influex-nav-logo-size: 32px; /* ═══════════════════════════════════════════════════════════════════════ * 10. Cards * * Used by .brand-card, .campaign-card, .product-card. Card surface is * pure white over the near-white page bg; separation is the ring shadow, * not a border. Thumbnail bg is a tinted placeholder colour that holds * the muted Influex logo glyph (0.2 opacity). * ═══════════════════════════════════════════════════════════════════════ */ --influex-card-bg: var(--influex-surface); --influex-card-border: var(--influex-gray-200); --influex-card-radius: var(--influex-radius-md); --influex-card-thumb-height: 160px; --influex-card-thumb-bg: var(--influex-gray-50); --influex-card-overflow-bg: rgba(23, 23, 23, .55); --influex-card-overflow-text: #ffffff; --influex-card-placeholder-icon-size: 56px; --influex-product-thumb-height: 140px; --influex-product-placeholder-icon-size: 48px; /* ═══════════════════════════════════════════════════════════════════════ * 11. Status badges * * Per-status palette consumed by .status-badge--{draft,active,completed, * archived}. Each badge needs a tinted bg + matching text colour with * AA contrast. Draft and Archived intentionally share the same neutral * palette — they differ in semantics, not visual emphasis. Preserved * unchanged from the previous palette — these carry meaning. * ═══════════════════════════════════════════════════════════════════════ */ --influex-status-draft-bg: #f3f4f6; --influex-status-draft-text: #6b7280; --influex-status-active-bg: #d1fae5; --influex-status-active-text: #065f46; --influex-status-completed-bg: #dbeafe; --influex-status-completed-text: #1e40af; --influex-status-archived-bg: #f3f4f6; --influex-status-archived-text: #6b7280; /* ═══════════════════════════════════════════════════════════════════════ * 12. Forms * * Input border + focus colour. Currently future-use placeholders — the * form controls render via Bootstrap defaults until a later stage adds * BEM .form-control--influex styling that consumes these vars. * ═══════════════════════════════════════════════════════════════════════ */ --influex-input-border: var(--influex-gray-200); /* future-use */ --influex-input-focus: var(--influex-focus-ring-color); /* ═══════════════════════════════════════════════════════════════════════ * 13. Buttons * * Three button surfaces: primary (.btn-primary override, Indigo), google * (login page sign-in button, ring-bordered white), signout (top-right of * nav bar, ghost). Padding/radius are theme-agnostic but exposed so a * future theme could differ. * ═══════════════════════════════════════════════════════════════════════ */ --influex-btn-radius: var(--influex-radius-btn); --influex-btn-padding-y: .5rem; --influex-btn-padding-x: 1rem; --influex-btn-primary-bg: var(--influex-primary); --influex-btn-primary-hover: var(--influex-primary-hover); --influex-btn-primary-text: var(--influex-primary-text); --influex-btn-google-bg: #ffffff; --influex-btn-google-text: var(--influex-text-primary); --influex-btn-google-border: var(--influex-gray-200); --influex-btn-signout-bg: transparent; --influex-btn-signout-text: var(--influex-text-secondary); --influex-btn-signout-border: var(--influex-gray-200); /* ═══════════════════════════════════════════════════════════════════════ * 14. Chips / tags * * Used by .goal-list, .phrase-list, .category-list. Pill-shaped chips * that wrap onto multiple rows. Chip text colour resolves to * --influex-text-primary so it inherits typography rules. * ═══════════════════════════════════════════════════════════════════════ */ --influex-chip-bg: #f5f5f5; --influex-chip-border: var(--influex-gray-200); --influex-chip-gap: .5rem; /* ═══════════════════════════════════════════════════════════════════════ * 15. Entity thumbnails * * Header avatar block (Brand / Campaign / Product detail pages) and * the "current image" preview inside Create/Edit fieldsets. The * placeholder modifier renders a muted Influex logo over the thumb-bg. * ═══════════════════════════════════════════════════════════════════════ */ --influex-entity-thumb-size: 64px; --influex-entity-thumb-icon-size: 36px; --influex-entity-thumb-preview-max: 160px; --influex-empty-icon-size: 80px; /* ═══════════════════════════════════════════════════════════════════════ * 16. Settings page * * Tabbed surface for /Settings. The tab content area sits on the white * card surface with a ring shadow. * ═══════════════════════════════════════════════════════════════════════ */ --influex-settings-tab-bg: #ffffff; /* ═══════════════════════════════════════════════════════════════════════ * 17. Login page * * The unauthenticated landing page. -login-bg is currently the same as * the main page bg; kept separate so a future "marketing" theme can * differentiate without affecting the authenticated app shell. * ═══════════════════════════════════════════════════════════════════════ */ --influex-login-bg: var(--influex-bg); --influex-login-logo-width: 140px; }