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.
2 files changed,
+66 insertions,
-0 deletions
| 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 |
|
---
|
| 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 |
+ |
}
|