/* ============================================================================ STUDIO OBSIDIAN — DESIGN TOKENS Version 1.1.0 · Updated 2026-04-23 ---------------------------------------------------------------------------- The single source of truth for the Mix-IP design system. Every color, size, radius, shadow, and motion value lives here. Components must never hardcode values — always reference a token. Naming convention: --bg-* surfaces / backgrounds --border-* borders and dividers --text-* text colors --accent-* the one accent (swappable via [data-accent]) --brand-* marketing brand primary (88Forge orange — Approved 2026-04-24) Legacy Mix-IP purple available via [data-brand="legacy-purple"] --st-project-* Project Production Status colors --st-pitch-* Pitch Status colors (creator submission lifecycle) --st-brief-* Brief Status colors (opportunity/contracting lifecycle) --st-shoot-* Shoot Status colors (physical production phases) --st-pay-* Payment Status colors --success/warning/danger/info semantic feedback --font-* font families --fs-* font sizes --fw-* font weights --lh-* line heights --ls-* letter spacing --sp-* spacing scale --r-* border radius --shadow-* elevation --ease-* motion curves --dur-* motion durations --avatar-* avatar sizes --z-* z-index scale --bp-* breakpoints (reference only; use in @media) Status color rule: within a single enum, every status MUST have a unique color. Across enums, statuses with the same semantic meaning MAY share a color (e.g. "Approved" and "Paid" both green). Font strategy: Self-hosted woff2 files are the primary source (./fonts/). local() checks if the font is already installed on the device. Google Fonts CDN is NOT used — Jonathan self-hosts in production. Font files live in mixip-website-kit-output/fonts/ — paths here are relative to THIS CSS file, so they resolve correctly regardless of where the importing HTML page lives in the directory tree. ============================================================================ */ /* ── Self-hosted fonts ────────────────────────────────────────────────────── */ /* Host Grotesk — variable (300–800), upright */ @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: local('Host Grotesk'), url('./fonts/HostGrotesk-variable.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Host Grotesk — variable (300–800), italic */ @font-face { font-family: 'Host Grotesk'; font-style: italic; font-weight: 300 800; font-display: swap; src: local('Host Grotesk Italic'), url('./fonts/HostGrotesk-variable-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* JetBrains Mono — weight 400 (regular) */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: local('JetBrains Mono'), url('./fonts/JetBrainsMono-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* JetBrains Mono — weight 500 (medium) — same file, browser selects weight */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: local('JetBrains Mono Medium'), url('./fonts/JetBrainsMono-regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* JetBrains Mono — weight 700 (bold) */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: local('JetBrains Mono Bold'), url('./fonts/JetBrainsMono-bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ======================================================================== BACKGROUNDS — tonal layering (Frame.io-style subtle steps) ======================================================================== */ --bg-rail: #07080a; /* darkest: left rail */ --bg-canvas: #09090c; /* main content area */ --bg-chrome: #0c0d11; /* sidebars + right panel */ --bg-card: #11131a; /* card surfaces (elevated over canvas) */ --bg-raised: #171923; /* dropdowns, modals, floating panels */ --bg-hover: #1c1f2a; /* hover state on interactive elements */ --bg-active: #232732; /* active/pressed state */ --bg-overlay: rgba(7, 8, 10, 0.75); /* modal backdrops */ /* -------------------------------------------------------------------------- GLASS CARD SURFACES — Apple HIG-aligned (vibrancy / material). Use these on mockup cards, device frames, deep-dive cards, and any surface where the canvas atmosphere should read through the chrome. Pair with --blur-card on the same element for the system-blur effect. DESIGN RULE: never use var(--text-tertiary) for text on a glass card — contrast against the wash is too low to be legible. Use --text-secondary or brighter (--text-primary, --ptapp-accent-hi, --v88-accent-hi, etc.). -------------------------------------------------------------------------- */ --bg-card-glass: color-mix(in srgb, var(--bg-card) 55%, transparent); /* default glass */ --bg-card-glass-soft: color-mix(in srgb, var(--bg-card) 10%, transparent); /* extra-light, e.g. diagram-only cards */ --blur-card: blur(14px) saturate(1.10); /* default backdrop */ --blur-card-strong: blur(18px) saturate(1.15); /* hero device frames, headline mockups */ /* ======================================================================== BORDERS — hairlines, graded ======================================================================== */ --border: #1a1d24; /* default hairline between regions / cards */ --border-soft: #141720; /* subtler internal dividers */ --border-strong: #262a34; /* emphasized borders (inputs, strong lines) */ --border-focus: var(--accent); /* ======================================================================== TEXT — hierarchy ======================================================================== */ --text-primary: #ededec; /* headings, primary content */ --text-secondary: #8a8d96; /* secondary labels, meta */ --text-tertiary: #53555e; /* captions, hints, meta-meta */ --text-disabled: #3a3c44; /* disabled states */ --text-inverted: #0a0b0e; /* text on accent backgrounds */ /* ======================================================================== ACCENT — the one accent color (default: Steel Blue) Override via
etc. ======================================================================== */ --accent: #6d8fb8; /* default: Steel Blue */ --accent-hi: #8aa4c7; /* hover on accent surfaces */ --accent-lo: #4d6d94; /* pressed / deeper */ --accent-dim: rgba(109, 143, 184, 0.13); /* subtle background fill */ --accent-glow: rgba(109, 143, 184, 0.22); /* shadow / glow */ --accent-fg: #f0f4fb; /* text on accent bg when light */ --accent-ink: #0a111c; /* text on accent bg when dark */ /* ======================================================================== PROJECT STATUS — 9 unique colors ======================================================================== */ --st-project-draft: #8a93a3; --st-project-draft-bg: rgba(138, 147, 163, 0.12); --st-project-preprod: #5db8d4; --st-project-preprod-bg: rgba(93, 184, 212, 0.12); --st-project-inprod: #f5b547; --st-project-inprod-bg: rgba(245, 181, 71, 0.12); --st-project-review: #f0823d; --st-project-review-bg: rgba(240, 130, 61, 0.12); --st-project-approved: #6bbf8e; --st-project-approved-bg: rgba(107, 191, 142, 0.12); --st-project-delivered: #a87dc4; --st-project-delivered-bg: rgba(168, 125, 196, 0.12); --st-project-archived: #5a5f6a; --st-project-archived-bg: rgba(90, 95, 106, 0.12); --st-project-payment-pending: #ef7a6d; --st-project-payment-pending-bg: rgba(239, 122, 109, 0.12); --st-project-showcase: #e85c9f; --st-project-showcase-bg: rgba(232, 92, 159, 0.12); /* ======================================================================== BRIEF STATUS — 8 unique colors (opportunity/contracting lifecycle) ======================================================================== */ --st-brief-draft: #8a93a3; --st-brief-draft-bg: rgba(138, 147, 163, 0.12); --st-brief-open: #6bbf8e; --st-brief-open-bg: rgba(107, 191, 142, 0.12); --st-brief-in-review: #f5b547; --st-brief-in-review-bg: rgba(245, 181, 71, 0.12); --st-brief-contracting: #a87dc4; --st-brief-contracting-bg: rgba(168, 125, 196, 0.12); --st-brief-active: #6d8fb8; --st-brief-active-bg: rgba(109, 143, 184, 0.12); --st-brief-completed: #5a5f6a; --st-brief-completed-bg: rgba(90, 95, 106, 0.12); --st-brief-paid-out: #c9a572; --st-brief-paid-out-bg: rgba(201, 165, 114, 0.12); --st-brief-cancelled: #ef5a5a; --st-brief-cancelled-bg: rgba(239, 90, 90, 0.12); /* ======================================================================== APPLICATION STATUS — 6 unique colors (creator-side application lifecycle across the Opportunities marketplace). Mirrors the --st-brief-* pattern. Added 2026-04-27 for features-opportunities.html. ======================================================================== */ --st-app-applied: #6d8fb8; /* steel — in-flight, awaiting decision */ --st-app-applied-bg: rgba(109, 143, 184, 0.12); --st-app-saved: #8a93a3; /* gray — bookmarked, not yet applied */ --st-app-saved-bg: rgba(138, 147, 163, 0.12); --st-app-invited: #9b7ad6; /* violet — studio reached out privately */ --st-app-invited-bg: rgba(155, 122, 214, 0.12); --st-app-shortlisted: #f5b547; /* amber — advanced into a brief shortlist */ --st-app-shortlisted-bg: rgba(245, 181, 71, 0.12); --st-app-declined: #ef5a5a; /* red — turned down (either side) */ --st-app-declined-bg: rgba(239, 90, 90, 0.12); --st-app-withdrawn: #5a5f6a; /* dim gray — creator pulled application */ --st-app-withdrawn-bg: rgba(90, 95, 106, 0.12); /* ======================================================================== RIGHTS STATUS — 9 unique colors (IP Registry licensing / transfer / dispute / inheritance lifecycle). Distinct from --st-brief-* / --st-app-* / --st-shoot-* enums. Transferred uses warm stone (locked 2026-04-27) to avoid collision with Pro Transfer App's --ptapp-accent cool-slate when both pills sit side-by-side on a registration-record provenance row. Added 2026-04-27 for features-ip-registry.html. ======================================================================== */ --st-rights-registered: #7BA866; /* sage green — active, on-chain, owned */ --st-rights-registered-bg: rgba(123, 168, 102, 0.12); --st-rights-licensed: #2C9F8F; /* teal — license issued, in force */ --st-rights-licensed-bg: rgba(44, 159, 143, 0.12); --st-rights-sub-licensed: #A88FCC; /* pale violet — license has been sublicensed */ --st-rights-sub-licensed-bg: rgba(168, 143, 204, 0.12); --st-rights-encumbered: #B86B3A; /* sienna — lien / pledge / security interest */ --st-rights-encumbered-bg: rgba(184, 107, 58, 0.12); --st-rights-disputed: #E89647; /* warm amber — claim challenged */ --st-rights-disputed-bg: rgba(232, 150, 71, 0.12); --st-rights-expired: #6A6F7A; /* dim gray — license or term ended */ --st-rights-expired-bg: rgba(106, 111, 122, 0.12); --st-rights-transferred: #78716C; /* warm stone — ownership moved (Pro Transfer App collision avoided) */ --st-rights-transferred-bg: rgba(120, 113, 108, 0.12); --st-rights-transferred-deep: #57534E; /* deep stone variant — emphasis / borders */ --st-rights-inherited: #C66B9F; /* magenta — passed to estate or heir */ --st-rights-inherited-bg: rgba(198, 107, 159, 0.12); --st-rights-public-domain: #A0A4AC; /* pale gray — released to public domain */ --st-rights-public-domain-bg: rgba(160, 164, 172, 0.12); /* ======================================================================== SHOOT STATUS — 11 unique colors (physical production phases) Every status is visually distinct — no more collisions. ======================================================================== */ --st-shoot-planning: #f5b547; /* amber — initial setup */ --st-shoot-planning-bg: rgba(245, 181, 71, 0.12); --st-shoot-scouting: #c98852; /* sienna — on the move */ --st-shoot-scouting-bg: rgba(201, 136, 82, 0.12); --st-shoot-crewing: #9b7ad6; /* violet — team building */ --st-shoot-crewing-bg: rgba(155, 122, 214, 0.12); --st-shoot-confirmed: #6d8fb8; /* steel — locked in */ --st-shoot-confirmed-bg: rgba(109, 143, 184, 0.12); --st-shoot-in-progress: #4ad8ff; /* cyan — actively shooting */ --st-shoot-in-progress-bg: rgba(74, 216, 255, 0.12); --st-shoot-wrapped: #7ca895; /* sage — filming done */ --st-shoot-wrapped-bg: rgba(124, 168, 149, 0.12); --st-shoot-in-post: #d07ab8; /* magenta — creative phase */ --st-shoot-in-post-bg: rgba(208, 122, 184, 0.12); --st-shoot-delivered: #5db8a8; /* teal — handoff */ --st-shoot-delivered-bg: rgba(93, 184, 168, 0.12); --st-shoot-approved: #6bbf8e; /* green — client approved */ --st-shoot-approved-bg: rgba(107, 191, 142, 0.12); --st-shoot-paid-out: #c9a572; /* gold — money moved */ --st-shoot-paid-out-bg: rgba(201, 165, 114, 0.12); --st-shoot-cancelled: #ef5a5a; /* red — bad end */ --st-shoot-cancelled-bg: rgba(239, 90, 90, 0.12); /* ======================================================================== PITCH STATUS — 4 unique colors (creator submission lifecycle) ======================================================================== */ --st-pitch-draft: #8a93a3; /* gray — not yet ready */ --st-pitch-draft-bg: rgba(138, 147, 163, 0.12); --st-pitch-ready: #6bbf8e; /* green — ready to submit */ --st-pitch-ready-bg: rgba(107, 191, 142, 0.12); --st-pitch-pitched: #9b7ad6; /* violet — submitted to brief */ --st-pitch-pitched-bg: rgba(155, 122, 214, 0.12); --st-pitch-archived: #5a5f6a; /* dim gray — archived */ --st-pitch-archived-bg: rgba(90, 95, 106, 0.12); /* ======================================================================== FOLDER PERMISSION — 3 unique colors (maps to folders.permission enum) Derived from shared/schema.ts `permission: 'can_edit' | 'can_view' | 'no_access'` ======================================================================== */ --st-permission-edit: #7ca895; /* sage — quiet affirmative for edit access */ --st-permission-edit-bg: rgba(124, 168, 149, 0.12); --st-permission-view: #8a93a3; /* neutral gray — informational, view-only */ --st-permission-view-bg: rgba(138, 147, 163, 0.12); --st-permission-none: #5a5f6a; /* dim gray — rare (no-access folders typically hidden) */ --st-permission-none-bg: rgba(90, 95, 106, 0.12); /* ======================================================================== PAYMENT STATUS — v1 (4 unique colors, legacy compat) Semantic: same as Approved/Pending/Cancelled/Processing patterns elsewhere Referenced by landing.html (--st-pay-paid). Keep names + values stable. ======================================================================== */ --st-pay-processing: #4ad8ff; /* cyan — in-flight, actively working */ --st-pay-processing-bg: rgba(74, 216, 255, 0.12); --st-pay-pending: #f5b547; /* amber — waiting */ --st-pay-pending-bg: rgba(245, 181, 71, 0.12); --st-pay-failed: #ef5a5a; /* red — error state */ --st-pay-failed-bg: rgba(239, 90, 90, 0.12); --st-pay-paid: #6bbf8e; /* green — success */ --st-pay-paid-bg: rgba(107, 191, 142, 0.12); /* ======================================================================== PAYMENT STATUS — v2 extended taxonomy (added 2026-04-28 for features-payments.html). Eight new statuses covering the full execution-and-settlement lifecycle: scheduled → authorized → in-transit → settled, plus refunded / in-escrow / disputed / reconciled. Naming distinct from v1 to avoid breaking landing.html. v1 tokens remain valid. Within this v2 enum every status carries a unique color; across enums, statuses with the same semantic meaning may share (e.g. pay-disputed and rights-disputed both warm amber by design). ======================================================================== */ --st-pay-scheduled: #B19BE0; /* pale violet — slot reserved, not yet authorized */ --st-pay-scheduled-bg: rgba(177, 155, 224, 0.12); --st-pay-authorized: #8FB58A; /* sage — funds reserved, ready to dispatch */ --st-pay-authorized-bg: rgba(143, 181, 138, 0.12); --st-pay-in-transit: #7AA8D6; /* pale blue — dispatched, settling on rails */ --st-pay-in-transit-bg: rgba(122, 168, 214, 0.12); --st-pay-settled: #B5B566; /* green-gold — cleared, on-chain receipt issued */ --st-pay-settled-bg: rgba(181, 181, 102, 0.12); --st-pay-refunded: #7A7E88; /* mid neutral gray — reversed */ --st-pay-refunded-bg: rgba(122, 126, 136, 0.12); --st-pay-in-escrow: #C2855E; /* sienna — locked pending milestone or condition */ --st-pay-in-escrow-bg: rgba(194, 133, 94, 0.12); --st-pay-disputed: #E89647; /* warm amber — challenged (shares hue with rights-disputed) */ --st-pay-disputed-bg: rgba(232, 150, 71, 0.12); --st-pay-reconciled: #5A5F6A; /* dim slate — books closed, period sealed */ --st-pay-reconciled-bg: rgba(90, 95, 106, 0.12); /* ======================================================================== SEMANTIC FEEDBACK — use for toasts, inline alerts, validation ======================================================================== */ --success: #6bbf8e; --success-bg: rgba(107, 191, 142, 0.12); --warning: #f5b547; --warning-bg: rgba(245, 181, 71, 0.12); --danger: #ef5a5a; --danger-bg: rgba(239, 90, 90, 0.12); --info: #6d8fb8; --info-bg: rgba(109, 143, 184, 0.12); /* ======================================================================== TYPOGRAPHY ======================================================================== */ /* Font families */ --font-display: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Font size scale — fixed, no arbitrary values between */ --fs-9: 9px; /* tiny captions, corner badges */ --fs-10: 10px; /* UPPERCASE labels, meta */ --fs-11: 11px; /* small meta, sub-labels */ --fs-12: 12px; /* secondary body, small buttons */ --fs-13: 13px; /* body text, default button */ --fs-14: 14px; /* body text large */ --fs-15: 15px; /* card titles large */ --fs-17: 17px; /* section headings */ --fs-19: 19px; /* sidebar titles */ --fs-22: 22px; /* page titles */ --fs-28: 28px; /* hero numbers */ --fs-36: 36px; /* display hero */ /* Font weights (Host Grotesk is variable 300–800) */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.4; --lh-relaxed: 1.55; --lh-loose: 1.7; /* Letter spacing */ --ls-tighter: -0.025em; --ls-tight: -0.015em; --ls-snug: -0.005em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.14em; --ls-widest: 0.22em; /* ======================================================================== SPACING SCALE — fixed, use these values only ======================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* ======================================================================== RADIUS ======================================================================== */ --r-xs: 4px; /* inputs, chips, small buttons */ --r-sm: 6px; /* medium buttons, list items, small cards */ --r: 8px; /* default cards */ --r-lg: 12px; /* modals, panels */ --r-xl: 16px; /* hero cards */ --r-full: 999px; /* pills, circular avatars, toggle switches */ /* ======================================================================== SHADOWS — elevation presets ======================================================================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 28px -14px rgba(0, 0, 0, 0.7); --shadow-xl: 0 24px 48px -20px rgba(0, 0, 0, 0.75); --shadow-card-hover: 0 16px 40px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-dim); --shadow-folder: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-dropdown: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05); --shadow-modal: 0 40px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06); /* ======================================================================== MOTION ======================================================================== */ --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-micro: 150ms; --dur-normal: 200ms; --dur-slow: 300ms; --dur-slower: 500ms; /* ======================================================================== AVATAR SIZES ======================================================================== */ --avatar-xs: 18px; /* inline with text, meta rows */ --avatar-sm: 22px; /* creator rows, collaborator stacks */ --avatar-md: 28px; /* sidebar items, compact headers */ --avatar-lg: 36px; /* rail avatar, panel headers */ --avatar-xl: 48px; /* detail cards, profile summaries */ --avatar-2xl: 64px; /* profile/settings hero */ /* ======================================================================== Z-INDEX SCALE ======================================================================== */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal: 400; --z-popover: 500; --z-tooltip: 600; --z-toast: 700; /* ======================================================================== BREAKPOINTS (reference only — use in CSS @media queries) ======================================================================== */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; } /* ============================================================================ ACCENT VARIANTS — hot-swappable Override the default by setting data-accent="sage" etc. on a parent element. ============================================================================ */ [data-accent="steel"] { --accent: #6d8fb8; --accent-hi: #8aa4c7; --accent-lo: #4d6d94; --accent-dim: rgba(109, 143, 184, 0.13); --accent-glow: rgba(109, 143, 184, 0.22); --accent-fg: #f0f4fb; --accent-ink: #0a111c; } [data-accent="sage"] { --accent: #7ca895; --accent-hi: #95bcab; --accent-lo: #5a8674; --accent-dim: rgba(124, 168, 149, 0.13); --accent-glow: rgba(124, 168, 149, 0.22); --accent-fg: #f1f6f4; --accent-ink: #0b1712; } [data-accent="clay"] { --accent: #c47a5f; --accent-hi: #d4947c; --accent-lo: #a25d44; --accent-dim: rgba(196, 122, 95, 0.13); --accent-glow: rgba(196, 122, 95, 0.22); --accent-fg: #fbf3ef; --accent-ink: #1a0d08; } [data-accent="gold"] { --accent: #c9a572; --accent-hi: #dbbc8d; --accent-lo: #9f7f4f; --accent-dim: rgba(201, 165, 114, 0.13); --accent-glow: rgba(201, 165, 114, 0.22); --accent-fg: #faf5ea; --accent-ink: #1a1408; } /* ============================================================================ MARKETING BRAND — 88Forge primary palette ---------------------------------------------------------------------------- APPROVED 2026-04-24 by Jonathan + Cory. 88Forge replaces the prior Mix-IP marketing purple as the production brand identity for all marketing pages (landing, features, pricing, about, use-cases). Two layers: 1. Brand identity — `--brand*` tokens (orange + supporting tones). Drive accent surfaces, CTAs, gradients, and atmospheric washes. 2. Marketing surfaces — `html[data-site="marketing"]` scope swaps the `--bg-*` / `--border-*` tokens to the 88Forge dark palette (#1A1F24 canvas, #33353A card, #060A0D rail, #415057 strong border). App pages don't set [data-site] so their `:root` Studio Obsidian surfaces stay intact. Future platform reskin: lift those overrides into `:root` and delete the marketing scope block. Legacy Mix-IP purple is preserved as a `[data-brand="legacy-purple"]` overlay (below) for reference and A/B comparison via landing-theme-preview.html. To retire it, delete the overlay block and the preview file. ============================================================================ */ :root { /* — Brand identity — */ --brand: #C5630C; /* 88Forge base orange */ --brand-hi: #E2741A; /* hover — base lifted ~12% L */ --brand-lo: #9A5520; /* pressed / gradient end — burnt copper, toned down for cinematic gradients */ --brand-dim: rgba(197, 99, 12, 0.14); /* subtle fill */ --brand-glo: rgba(197, 99, 12, 0.24); /* glow / shadow tint */ --brand-ink: #ffffff; /* text on brand CTAs — AA at large sizes (~5.0:1); revisit for small body if Cory flags */ /* — 88Forge supporting palette — */ --brand-warm: #A47F6F; /* warm tan — gradient ends, illustration accents */ --brand-slate: #415057; /* slate blue-grey — strong borders, dividers */ --brand-surface-mid: #33353A; /* gunmetal — card surfaces */ --brand-surface-base: #1A1F24; /* near-black cool — main canvas */ --brand-surface-deep: #060A0D; /* deepest black — rail, footer ground */ /* — Atmospheric washes (warm, brand-cohesive — multiplied over the hero duotone and final-cta wash to give the page 88Forge's warm cinematic cast) — */ /* Alphas tuned to match the visual weight the original Mix-IP purple multiply had at 0.32 / 0.42, but with the orange hue. */ --brand-haze: rgba(197, 99, 12, 0.32); /* warm orange highlight haze */ --brand-haze-deep: rgba(110, 50, 5, 0.42); /* deep burnt-amber shadow haze */ } /* ============================================================================ PRO TRANSFER APP — sub-brand accent (Steel) — added 2026-04-27 Used by: · pro-transfer.html full page surface (atmospheric wash, hero accent cards, "Resumed at byte X" callouts, final-CTA gradient, Apps-dropdown chrome) · features-ip-registry.html "Verified by Pro Transfer App" companion pill on registration-record cards and license-issuance provenance rows (paired with brand-orange "On-chain" pill — see PRO_TRANSFER_INCORPORATION_PLAN §1 + HANDOFF_FEATURES_IP_REGISTRY § "Pro Transfer App hooks") · shared/marketing-nav.html Apps dropdown card chrome (steel left-border, eyebrow + platform-pill accents) Steel is achromatic / cool-slate — intentionally distinct from the five chromatic feature accents (purple/teal/amber/green/blue) and from the 88Forge brand orange. Reads as security/infrastructure (Stripe security pages, GitHub security tab, Cloudflare product chrome all sit here). Collision resolution (locked 2026-04-27): the IPR `--st-rights-transferred` status was originally proposed in the same cool-slate range. Resolved by shifting Transferred to warm stone (#78716C surface, #57534E deep) so Pro Transfer App's verified pill and a Transferred status pill never compete for the same hue when paired on an IPR provenance row. ============================================================================ */ :root { --ptapp-accent: #64748B; /* steel — primary */ --ptapp-accent-hi: #94A3B8; /* lighter steel — hover, eyebrow text */ --ptapp-accent-lo: #334155; /* deep slate — borders, depth */ --ptapp-accent-dim: rgba(100, 116, 139, 0.14); /* subtle fill (pill bg, card bg) */ --ptapp-accent-glo: rgba(100, 116, 139, 0.22); /* glow / pill border */ --ptapp-accent-haze: rgba(100, 116, 139, 0.30); /* atmospheric wash (hero ::before) */ --ptapp-accent-haze-deep: rgba(50, 65, 85, 0.42); /* atmospheric wash (deep shadow) */ --ptapp-accent-ink: #ffffff; /* text on steel fills */ } /* ============================================================================ MARKETING SURFACES — applied only when html[data-site="marketing"] App pages don't set [data-site] so their :root Studio Obsidian surfaces stay untouched. When the platform reskin lands, lift these overrides into :root and delete this block. ============================================================================ */ html[data-site="marketing"] { /* Surfaces — 88Forge dark palette */ --bg-rail: var(--brand-surface-deep); /* #060A0D */ --bg-canvas: var(--brand-surface-base); /* #1A1F24 */ --bg-chrome: var(--brand-surface-base); /* #1A1F24 */ --bg-card: var(--brand-surface-mid); /* #33353A */ --bg-raised: var(--brand-surface-mid); /* #33353A */ --bg-hover: #2a2c32; /* between mid and base */ --bg-active: #3e4046; /* slightly lifted */ /* Borders */ --border: #2a2d33; --border-soft: #1f2228; --border-strong: var(--brand-slate); /* #415057 */ --border-focus: var(--brand); /* On marketing pages, the "accent" IS the brand. */ --accent: var(--brand); --accent-hi: var(--brand-hi); --accent-lo: var(--brand-lo); --accent-dim: var(--brand-dim); --accent-glow: var(--brand-glo); --accent-ink: var(--brand-ink); } /* ============================================================================ LEGACY MIX-IP PURPLE — preserved as a [data-brand="legacy-purple"] overlay Wired into landing-theme-preview.html for reference / A/B against the prior brand. Production marketing pages do NOT set [data-brand]; they inherit the 88Forge values above. ============================================================================ */ [data-brand="legacy-purple"] { --brand: #8B5CF6; /* Mix-IP purple */ --brand-hi: #9d6ff8; --brand-lo: #7141e2; --brand-dim: rgba(139, 92, 246, 0.12); --brand-glo: rgba(139, 92, 246, 0.22); --brand-ink: #ffffff; } /* ============================================================================ LIGHT MODE — active; toggle with [data-theme="light"] on Based on Jonathan's Studio Obsidian light mode reference (appearance-mw-nav.html) and the Mix-IP UI screenshots (April 2026). Priority: DARK is the default for all Mix-IP pages. Light is secondary — supported for completeness and user OS preference. ============================================================================ */ [data-theme="light"] { /* Backgrounds — inverted tonal stack (lightest = canvas, darkest = card raised) */ --bg-rail: #ececef; /* outer shell / page body (per Jonathan's ref) */ --bg-canvas: #fafbfc; /* main content area */ --bg-chrome: #ffffff; /* sidebars, nav, right panel */ --bg-card: #ffffff; /* card surfaces */ --bg-raised: #f7f8fa; /* dropdowns, modals, floating panels */ --bg-hover: #f0f1f4; /* hover state */ --bg-active: #e6e8ec; /* active / pressed state */ --bg-overlay: rgba(15, 16, 20, 0.45); /* modal backdrops — darker for contrast */ /* Borders */ --border: #e6e8ec; --border-soft: #f0f1f4; --border-strong: #d1d5db; --border-focus: var(--accent); /* Text */ --text-primary: #0a0b0e; --text-secondary: #4a4d55; --text-tertiary: #8a8d96; --text-disabled: #c4c7cc; --text-inverted: #ffffff; /* Shadows — lighter, cooler for light mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 28px -14px rgba(0, 0, 0, 0.12); --shadow-xl: 0 24px 48px -20px rgba(0, 0, 0, 0.14); --shadow-card-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--accent-dim); --shadow-folder: 0 8px 20px -8px rgba(0, 0, 0, 0.10), 0 1px 0 rgba(0, 0, 0, 0.04) inset; --shadow-dropdown: 0 8px 32px -4px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06); --shadow-modal: 0 24px 60px -10px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06); /* Marketing brand — opacity tweaks for light backgrounds */ --brand-dim: rgba(197, 99, 12, 0.10); /* slightly lower opacity on white */ --brand-glo: rgba(197, 99, 12, 0.18); }