Skip to main content

max / makenotwork

server: cost-allocation widget styles + economics doc link CSS for the "Where your tier fee goes" widget on /pricing (stacked horizontal bars per tier, hover tooltips via title=, responsive layout). Six segment colors. economics.md links to the widget anchor for the full breakdown. Widget HTML was committed separately in cef4b54.
Author: Max Johnson <me@maxj.phd> · 2026-06-01 06:18 UTC
Signed with PGP, not checked
Commit: ce818a8b8f89410200ce314ae68c0f912c674386
Parent: b7b2bd5
2 files changed, +66 insertions, -0 deletions
M server/static/style.css +64
@@ -10895,3 +10895,67 @@
10895 10895 .synckit-gauge-value { color: var(--text-muted, #777); }
10896 10896 .synckit-gauge-fill--warn { background: var(--warning); }
10897 10897 .synckit-gauge-fill--danger { background: var(--danger); }
10898 +
10899 + /* Cost-allocation widget on /pricing — "Where your tier fee goes". */
10900 + .cost-allocation { margin-top: 0.5rem; }
10901 + .cost-allocation-intro {
10902 + font-size: 0.95rem;
10903 + opacity: 0.85;
10904 + margin-bottom: 1.5rem;
10905 + max-width: 60ch;
10906 + }
10907 + .cost-row {
10908 + display: grid;
10909 + grid-template-columns: 12rem 1fr;
10910 + gap: 1rem;
10911 + align-items: center;
10912 + margin-bottom: 1rem;
10913 + }
10914 + .cost-row-label {
10915 + font-family: var(--font-mono);
10916 + font-size: 0.9rem;
10917 + }
10918 + .cost-row-label strong { font-family: var(--font-heading); font-size: 1.05rem; display: block; }
10919 + .cost-bar {
10920 + display: flex;
10921 + height: 2.25rem;
10922 + border-radius: 4px;
10923 + overflow: hidden;
10924 + border: 1px solid var(--border, rgba(0,0,0,0.12));
10925 + }
10926 + .cost-bar-seg {
10927 + display: flex;
10928 + align-items: center;
10929 + justify-content: center;
10930 + font-family: var(--font-mono);
10931 + font-size: 0.75rem;
10932 + color: #fff;
10933 + cursor: help;
10934 + padding: 0 0.25rem;
10935 + overflow: hidden;
10936 + white-space: nowrap;
10937 + }
10938 + .cost-bar-seg-stripe { background: #5b6f8a; }
10939 + .cost-bar-seg-storage { background: #7d8c5e; }
10940 + .cost-bar-seg-support { background: #8b6b4a; }
10941 + .cost-bar-seg-engineering { background: #6b4a8b; }
10942 + .cost-bar-seg-reserves { background: #4a6b8b; }
10943 + .cost-bar-seg-earnback { background: #8b8b4a; }
10944 + .cost-legend {
10945 + display: flex;
10946 + flex-wrap: wrap;
10947 + gap: 0.5rem 1.25rem;
10948 + margin-top: 1.5rem;
10949 + font-size: 0.85rem;
10950 + }
10951 + .cost-legend-item { display: flex; align-items: center; gap: 0.4rem; }
10952 + .cost-legend-swatch {
10953 + display: inline-block;
10954 + width: 0.85rem;
10955 + height: 0.85rem;
10956 + border-radius: 2px;
10957 + }
10958 + @media (max-width: 640px) {
10959 + .cost-row { grid-template-columns: 1fr; gap: 0.4rem; }
10960 + .cost-bar-seg { font-size: 0; }
10961 + }
M server/site-docs/public/about/economics.md +2
@@ -22,6 +22,8 @@
22 22
23 23 **Returned to creators.** Surplus beyond what cost-to-deliver and platform overhead require is earmarked to come back to you as earn-back credit. We've committed to launching that program no later than 2027-01-01.
24 24
25 + See the full breakdown on the [pricing page](/pricing#cost-allocation) — every tier fee broken into Stripe processing, storage, human support time, product engineering, reserves, and earn-back surplus.
26 +
25 27 No surplus goes to investors, shareholders, dividends, executive bonuses, paid acquisition, or marketing spend. We have none of those things.
26 28
27 29 ---