From 84d474e6123b9f3cdff038ac496fff54ec9ad3a5 Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 14:46:07 -0400 Subject: [PATCH 1/8] add developer, editor, and white glove pricing tiers Replace the single itemized $14/mo panel with three tiers: Developer ($5), Editor ($15), and White Glove ($150). Same simple pricing, aimed at three buckets of users rather than one. - [pricing.items] becomes [pricing.tiers]; each tier carries its own price, feature list, and CTA - Editor is highlighted with the existing glow treatment instead of a "most popular" badge, so the page still has exactly one glowing panel - White Glove links to hi@archival.dev rather than self-serve signup - removes the accordion, which bound click to a plain div and was unreachable by keyboard - drops ~105 lines of dead .pricing-card CSS left over from an earlier card-based design, plus the retired breakdown/item/total rules Developer and White Glove feature lists are placeholder copy and deliberately carry no bandwidth, storage, or other specific commitments yet. --- archival_objects.toml | 15 +- objects/pricing.toml | 98 +++++----- pages/pricing.liquid | 227 ++++++++-------------- style/main.css | 430 ++++++++++++------------------------------ 4 files changed, 255 insertions(+), 515 deletions(-) diff --git a/archival_objects.toml b/archival_objects.toml index 751c457..1fb420e 100644 --- a/archival_objects.toml +++ b/archival_objects.toml @@ -27,19 +27,18 @@ poster = "string" title_line_1 = "string" title_line_2 = "string" tagline = "string" -total_label = "string" -total_price = "string" -total_term = "string" -cta_label = "string" -cta_url = "string" -[pricing.items] +[pricing.tiers] icon = "string" name = "string" -description = "string" +audience = "string" price = "string" +term = "string" slug = "string" -content = "markdown" +features = "markdown" +cta_label = "string" +cta_url = "string" +featured = "boolean" [manifesto] title = "string" diff --git a/objects/pricing.toml b/objects/pricing.toml index 73003de..fd9a597 100644 --- a/objects/pricing.toml +++ b/objects/pricing.toml @@ -1,56 +1,62 @@ title_line_1 = "priced for" title_line_2 = "everyone" tagline = "No hidden charges. Just straightforward, simple pricing." -total_label = "Total monthly cost" -total_price = "$14" -total_term = "/month" -cta_label = "Get Started" -cta_url = "https://editor.archival.dev/new" -[[items]] -icon = "cube" -name = "Complete Website" -description = "Custom design & hosting" -price = "Included" -slug = "complete-website" -content = """ -Get a fully-featured website tailored to your needs. Our complete website package includes: +# PLACEHOLDER CONTENT — the Developer and White Glove tiers below use +# provisional copy. Deliberately no bandwidth/storage numbers or other +# specific commitments until those are decided. Editor carries the real +# details from the previous single-price plan. -- Fully customizable template designed by our professional design team -- Responsive layout that works perfectly on all devices -- Fast, reliable hosting with 99.9% uptime guarantee -- Site editor to easily update your website's content -- Optimized performance for lightning-fast page loads +[[tiers]] +icon = "terminal" +name = "Developer" +audience = "Hosting, and nothing you don't need" +price = "$5" +term = "/mo" +slug = "developer" +featured = false +cta_label = "Get Started" +cta_url = "https://editor.archival.dev/new" +features = """ +- Deploy straight from your repository +- Free SSL, renewed automatically +- Global CDN +- Bring your own domain +- Full access to the command line tools """ -[[items]] -icon = "globe" -name = "Your Domain" -description = "Free SSL & no setup fees" -price = "Included" -slug = "your-domain" -content = """ -Your custom domain comes fully configured and secure from day one: - -- Free custom domain registration for first year ($35 limit) -- Free SSL certificate for secure HTTPS connections -- Automatic certificate renewal - never worry about expiration -- Zero setup fees or hidden charges -- DNS management included with simple configuration +[[tiers]] +icon = "pencil" +name = "Editor" +audience = "Hosting plus the visual site editor" +price = "$15" +term = "/mo" +slug = "editor" +featured = true +cta_label = "Get Started" +cta_url = "https://editor.archival.dev/new" +features = """ +- Everything in Developer +- Visual site editor for everyday content changes +- Custom domain registered free for the first year ($35 limit) +- 100GB bandwidth per month, 10GB storage +- Daily backups """ -[[items]] -icon = "clock" -name = "Generous Limits" -description = "High bandwidth & storage" -price = "Included" -slug = "generous-limits" -content = """ -Built for growth with resources that scale with your success: - -- 100GB bandwidth per month - plenty for most websites -- 10GB storage space for your content and assets -- Unlimited page views and visitors -- CDN acceleration for global content delivery -- Daily backups to keep your data safe +[[tiers]] +icon = "star" +name = "White Glove" +audience = "We design it, build it, and keep it running" +price = "$150" +term = "/mo" +slug = "white-glove" +featured = false +cta_label = "Talk to us" +cta_url = "mailto:hi@archival.dev" +features = """ +- Everything in Editor +- A site designed for you by our team +- We migrate your existing content +- Ongoing changes handled for you +- Direct line to us when you need it """ diff --git a/pages/pricing.liquid b/pages/pricing.liquid index 4a5d3db..27a6355 100644 --- a/pages/pricing.liquid +++ b/pages/pricing.liquid @@ -15,133 +15,91 @@

{{ pricing.tagline }}

-
-
+
+ {% for tier in pricing.tiers %} +
+ {% if tier.featured %}
-
-
- {% for item in pricing.items %} -
-
-
- {% case item.icon %} - {% when "cube" %} - - - - - - {% when "globe" %} - - - - - - {% when "clock" %} - - - - - {% endcase %} -
-
-
{{ item.name }}
-
{{ item.description }}
-
-
{{ item.price }}
-
- - - -
-
-
-
- {{ item.content }} -
-
-
- {% endfor %} + {% endif %} +
+
+ {% case tier.icon %} + {% when "terminal" %} + + + + + {% when "pencil" %} + + + + + {% when "star" %} + + + + {% endcase %}
-
-
{{ pricing.total_label }}
-
- {{ pricing.total_price }} - {{ pricing.total_term }} -
+

{{ tier.name }}

+

{{ tier.audience }}

+ +
+ {{ tier.price }} + {{ tier.term }}
- {{ pricing.cta_label }} +
{{ tier.features }}
+ + {{ tier.cta_label }}
+ {% endfor %}
@@ -383,32 +341,3 @@ }); })(); - - \ No newline at end of file diff --git a/style/main.css b/style/main.css index 81aaccd..ab3b238 100644 --- a/style/main.css +++ b/style/main.css @@ -301,137 +301,50 @@ h1.pricing-title { margin: 1.5rem 0 0; } -.pricing-card-frame { +/* Pricing tiers */ +.pricing-tiers { position: relative; - width: fit-content; - max-width: 100%; - display: inline-flex; - justify-content: center; - align-items: center; - margin: 4rem auto; -} - -.pricing-card-frame .glowverlay { z-index: 1; - border-radius: 1.5rem 1.5rem 1rem 1rem; -} - -.pricing-card { - position: relative; - z-index: 2; width: 100%; - max-width: 18rem; - padding: 2rem 2.25rem 1.75rem; - border-radius: 1.5rem 1.5rem 1rem 1rem; - border: 1px solid var(--color-transparent-border); - background: rgba(20, 20, 20, 0.9); - box-shadow: var(--style-double-border); - backdrop-filter: blur(8px); -} - -.pricing-price { - display: flex; - align-items: baseline; - justify-content: flex-start; - gap: 0.15rem; - margin: 0 0 1.75rem; - font-weight: 700; -} - -.pricing-price-amount { - font-size: 4.5rem; - line-height: 1; - color: var(--color-secondary-interactive); - font-weight: 800; -} - -.pricing-price-term { - font-size: 1.75rem; - font-weight: 700; - color: var(--color-typography-secondary); - padding-bottom: 0.25rem; -} - -.pricing-meta { - margin: 0 0 1rem; - color: var(--color-typography-secondary); - text-transform: capitalize; - letter-spacing: 0.02em; - font-size: 0.9rem; - text-align: left; -} - -.pricing-list { - list-style: none; - padding: 0; - margin: 0 0 1.5rem; - display: flex; - flex-direction: column; - gap: 0.6rem; - text-align: left; - color: rgba(255, 255, 255, 0.95); - font-size: 0.95rem; - font-weight: 500; -} - -.pricing-list li { - display: flex; - align-items: center; + max-width: 68rem; + /* Breathing room above the group and before the wave below. Uneven + because the hero's gap above is 4rem while its padding below is + 10rem, and the featured tier's overhang eats 1.25rem of each. */ + margin: 3rem auto 2rem; + display: grid; + grid-template-columns: 1fr 1.08fr 1fr; + align-items: stretch; + gap: 1.5rem; } -.pricing-check { +.pricing-tier { position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - width: 1rem; - height: 1rem; - border: 1.5px solid rgba(255, 255, 255, 0.5); - border-radius: 999px; - margin-right: 0.6rem; - flex-shrink: 0; -} - -.pricing-check::after { - content: ""; - width: 0.3rem; - height: 0.5rem; - border-right: 1.5px solid rgba(255, 255, 255, 0.8); - border-bottom: 1.5px solid rgba(255, 255, 255, 0.8); - transform: rotate(45deg); - margin-top: -0.1rem; + display: flex; } -.pricing-cta { - width: 100%; +/* The featured tier reads larger via grid geometry rather than a + transform, which would resample its text and glow edge. */ +.pricing-tier-featured { + margin: -1.25rem 0; } -/* New pricing breakdown styles */ -.pricing-breakdown-container { - position: relative; - width: 100%; - max-width: 42rem; - margin: 0 auto; -} - -.pricing-breakdown { - position: relative; - width: 100%; - display: inline-flex; - justify-content: center; - align-items: center; +.pricing-tier-featured .pricing-tier-content { + padding: 2.5rem 2.25rem; } -.pricing-breakdown .glowverlay { +.pricing-tier .glowverlay { z-index: 1; border-radius: 1.5rem; } -.pricing-breakdown-content { +.pricing-tier-content { position: relative; z-index: 2; + display: flex; + flex-direction: column; width: 100%; - padding: 2.5rem; + padding: 2rem; + text-align: left; border-radius: 1.5rem; border: 1px solid var(--color-transparent-border); background: rgba(20, 20, 20, 0.9); @@ -439,56 +352,11 @@ h1.pricing-title { backdrop-filter: blur(8px); } -.pricing-breakdown-header { - margin-bottom: 2rem; - text-align: center; -} - -.pricing-breakdown-title { - font-size: 1.5rem; - font-weight: 700; - color: var(--color-typography-primary); - margin: 0; -} - -.pricing-items { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 2rem; -} - -.pricing-item { - display: flex; - flex-direction: column; - border-radius: 0.75rem; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); - transition: all 0.3s ease; - overflow: hidden; -} - -.pricing-item-expandable { - cursor: pointer; -} - -.pricing-item-content { - display: flex; - align-items: center; - gap: 1.25rem; - padding: 1.25rem; -} - -.pricing-item:hover { - background: rgba(255, 255, 255, 0.05); - border-color: rgba(255, 255, 255, 0.12); - transform: translateX(4px); -} - -.pricing-item-icon { +.pricing-tier-icon { flex-shrink: 0; width: 3rem; height: 3rem; + margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: center; @@ -501,109 +369,64 @@ h1.pricing-title { color: var(--color-secondary-interactive); } -.pricing-item-details { - flex: 1; - min-width: 0; - text-align: left; -} - -.pricing-item-name { - font-size: 1.05rem; - font-weight: 600; +.pricing-tier-name { + font-size: 1.25rem; + font-weight: 700; + line-height: 1.2; color: var(--color-typography-primary); - margin-bottom: 0.15rem; - text-align: left; + margin: 0; } -.pricing-item-desc { +.pricing-tier-audience { font-size: 0.875rem; + line-height: 1.5; color: var(--color-typography-secondary); - text-align: left; + margin: 0.35rem 0 0; } -.pricing-item-price { - flex-shrink: 0; - font-size: 0.95rem; - font-weight: 600; - color: var(--color-secondary-interactive); - padding: 0.4rem 0.85rem; - border-radius: 0.375rem; - background: rgba(6, 214, 160, 0.1); -} - -.pricing-item-chevron { - flex-shrink: 0; +.pricing-tier-price { display: flex; - align-items: center; - justify-content: center; - width: 2rem; - height: 2rem; - margin-left: 0.5rem; - color: var(--color-typography-secondary); - transition: - transform 0.3s ease, - color 0.3s ease; -} - -.pricing-item-expandable:hover .pricing-item-chevron { - color: var(--color-secondary-interactive); + align-items: baseline; + gap: 0.25rem; + margin: 1.5rem 0; + padding-bottom: 1.5rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); } -.pricing-item-expandable.expanded .pricing-item-chevron { - transform: rotate(180deg); +.pricing-tier-price-amount { + font-size: 3rem; + font-weight: 800; + line-height: 1; color: var(--color-secondary-interactive); } -.pricing-item-expanded { - max-height: 0; - overflow: hidden; - transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); -} - -.pricing-item-expandable.expanded .pricing-item-expanded { - max-height: 500px; +.pricing-tier-price-term { + font-size: 1.1rem; + font-weight: 600; + color: var(--color-typography-secondary); } -.pricing-item-expanded-content { - margin-top: 1rem; - text-align: left; - padding: 0 1.25rem 1.5rem 1.25rem; - color: var(--color-typography-secondary); +.pricing-tier-features { + flex: 1; + margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.6; - animation: fadeIn 0.3s ease-in-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.pricing-item-expanded-content p { - margin: 0 0 1rem 0; - font-weight: 500; - color: rgba(255, 255, 255, 0.85); + color: var(--color-typography-secondary); } -.pricing-item-expanded-content ul { +.pricing-tier-features ul { margin: 0; padding-left: 1.5rem; list-style: none; } -.pricing-item-expanded-content li { +.pricing-tier-features li { position: relative; margin-bottom: 0.6rem; padding-left: 0.5rem; } -.pricing-item-expanded-content li::before { +.pricing-tier-features li::before { content: "•"; position: absolute; left: -1rem; @@ -611,44 +434,68 @@ h1.pricing-title { font-weight: bold; } -.pricing-total { +/* Descendant selector so these win over .primary-cta, which is + defined later in this file at equal class specificity. */ +.pricing-tier .pricing-cta { + width: 100%; + min-height: 44px; display: flex; align-items: center; - justify-content: space-between; - padding: 1.5rem; - margin-bottom: 2rem; - border-radius: 0.75rem; - background: linear-gradient( - 135deg, - rgba(239, 71, 111, 0.08), - rgba(6, 214, 160, 0.08) - ); - border: 1px solid rgba(255, 255, 255, 0.12); + justify-content: center; } -.pricing-total-label { - font-size: 1.1rem; - font-weight: 600; +.pricing-cta-secondary { + font-size: 1rem; + font-weight: 700; + text-align: center; + border-radius: 0.5rem; + padding: 0.5rem 1.5rem; color: var(--color-typography-primary); + background: rgba(255, 255, 255, 0.06); + border: 1px solid var(--color-transparent-border); + box-shadow: var(--style-double-border); + transition: + background-color 0.2s ease-in-out, + border-color 0.2s ease-in-out, + transform 0.1s ease-in-out; } -.pricing-total-amount { - display: flex; - align-items: baseline; - gap: 0.25rem; +.pricing-cta-secondary:hover { + background: rgba(255, 255, 255, 0.1); + border-color: rgba(255, 255, 255, 0.35); } -.pricing-total-price { - font-size: 3rem; - font-weight: 800; - line-height: 1; - color: var(--color-secondary-interactive); +.pricing-cta-secondary:active { + transform: scale(0.95); } -.pricing-total-term { - font-size: 1.25rem; - font-weight: 600; - color: var(--color-typography-secondary); +@media (max-width: 900px) { + .pricing-tiers { + grid-template-columns: 1fr; + max-width: 32rem; + gap: 2rem; + margin: 1.5rem auto 1rem; + } + + /* Stacked: no column to widen and no neighbours to rise above. */ + .pricing-tier-featured { + margin: 0; + } + + .pricing-tier-featured .pricing-tier-content { + padding: 2rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .pricing-cta-secondary { + transition: none; + } + + .pricing-tier .glowverlay, + .pricing-tier-featured.glow-container:before { + animation: none; + } } .glow-container { @@ -1665,81 +1512,40 @@ h1.pricing-title { gap: 3rem; } - .pricing-card { - padding: 2rem 1.5rem; - } - - .pricing-price-amount { - font-size: 3rem; - } - - .pricing-breakdown-content { + .pricing-tier-content { padding: 1.75rem; } - .pricing-breakdown-title { - font-size: 1.25rem; - } - - .pricing-item-content { - padding: 1rem; - gap: 0.75rem; - } - - .pricing-item-icon { + .pricing-tier-icon { width: 2.5rem; height: 2.5rem; } - .pricing-item-icon svg { + .pricing-tier-icon svg { width: 20px; height: 20px; } - .pricing-item-name { - font-size: 0.95rem; + .pricing-tier-name { + font-size: 1.15rem; } - .pricing-item-desc { + .pricing-tier-audience { font-size: 0.8rem; } - .pricing-item-price { - font-size: 0.85rem; - padding: 0.35rem 0.7rem; - } - - .pricing-item-chevron { - width: 1.5rem; - height: 1.5rem; - margin-left: 0.25rem; + .pricing-tier-price-amount { + font-size: 2.5rem; } - .pricing-item-chevron svg { - width: 14px; - height: 14px; + .pricing-tier-price-term { + font-size: 1rem; } - .pricing-item-expanded-content { - padding: 0 1rem 1.25rem 1rem; + .pricing-tier-features { font-size: 0.875rem; } - .pricing-total { - flex-direction: column; - align-items: flex-start; - gap: 0.75rem; - padding: 1.25rem; - } - - .pricing-total-price { - font-size: 2.5rem; - } - - .pricing-total-term { - font-size: 1.1rem; - } - .connect-grid { margin: 1.5rem auto; max-width: 26.75rem; From af63061d180ce940333c3207498de904c0f38d9f Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 16:30:55 -0400 Subject: [PATCH 2/8] use a diamond icon for the white glove tier MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Swaps the star for a diamond. The supplied artwork is a filled shape rather than a stroked outline like the terminal and pencil icons, so fill is set to currentColor to inherit the container's teal, and the stroke attributes are dropped — the path already describes its own facet lines and stroking them would fill the shape in. The artwork also runs edge to edge of its 24pt box while the other two inset to ~2pt, so the viewBox is padded to -2 -2 28 28 to match their optical size. --- objects/pricing.toml | 2 +- pages/pricing.liquid | 17 ++++++++++------- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/objects/pricing.toml b/objects/pricing.toml index fd9a597..7cca98b 100644 --- a/objects/pricing.toml +++ b/objects/pricing.toml @@ -44,7 +44,7 @@ features = """ """ [[tiers]] -icon = "star" +icon = "diamond" name = "White Glove" audience = "We design it, build it, and keep it running" price = "$150" diff --git a/pages/pricing.liquid b/pages/pricing.liquid index 27a6355..137a1f0 100644 --- a/pages/pricing.liquid +++ b/pages/pricing.liquid @@ -66,19 +66,22 @@ stroke-linecap="round" stroke-linejoin="round" /> - {% when "star" %} + {% when "diamond" %} + {% comment %} + Filled icon, unlike the stroked terminal/pencil above. The + artwork runs edge to edge of its 24pt box while those inset + to ~2pt, so the viewBox is padded to -2 -2 28 28 to match + their optical size. + {% endcomment %} + d="M4.58312 0.325682L0.124411 7.53176C-0.0567843 7.82421 -0.0379891 8.2627 0.167283 8.5326L11.4855 23.7454C11.7421 24.0849 12.2579 24.0849 12.5145 23.7454L23.8327 8.5326C24.038 8.2627 24.0568 7.82421 23.8756 7.53176L19.4169 0.325682C19.2888 0.123191 19.0751 -0.00155446 18.8595 0.000407193H5.14045C4.89883 -0.00880058 4.69678 0.139324 4.58312 0.325682ZM6.11581 1.60176H10.6388L7.61634 6.39332L6.11581 1.60176ZM13.3612 1.60176H17.8842L16.3837 6.39332L13.3612 1.60176ZM12 2.16471L15.194 7.20649H8.81676L12 2.16471ZM4.93679 2.4775L6.41592 7.20649H2.01079L4.93679 2.4775ZM19.0632 2.4775L21.9892 7.20649H17.5841L19.0632 2.4775ZM2.18227 8.80784H6.90891L10.3173 19.742L2.18227 8.80784ZM8.36657 8.80784H15.6441L12 20.4802L8.36657 8.80784ZM17.0911 8.80784H21.8177L13.6827 19.742L17.0911 8.80784Z" + fill="currentColor" /> {% endcase %}
From aa137650db8eb17ed203746eab2758673346ec23 Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 16:49:31 -0400 Subject: [PATCH 3/8] update pricing copy for tiers The llms.txt pricing section still said $14 was "the whole price: no tiers", which contradicted the new /pricing page. Rewritten around the three plans, keeping Editor's real bandwidth and storage figures and describing Developer only as hosting, since its feature list is still placeholder. Also updates the mock settings panel on the product tour, which showed a bare $14/mo, to name the plan as well: Editor - $15/mo. --- objects/home.toml | 2 +- pages/product.liquid | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/objects/home.toml b/objects/home.toml index c6a8c81..8f913f0 100644 --- a/objects/home.toml +++ b/objects/home.toml @@ -12,7 +12,7 @@ pricing_title = "Pricing" pricing_content = """ Archival is run by a tiny team with a goal of staying small. -The Archival editor — hosting, custom domains, DNS, and large file uploads — is $14 a month. That is the whole price: no tiers, no hidden charges. Hosted sites include 100GB of bandwidth and 10GB of storage per month. +There are three plans, priced for what you actually need. Hosting on its own is $5 a month. The Archival editor — hosting, custom domains, DNS, and large file uploads — is $15 a month, and includes 100GB of bandwidth and 10GB of storage. If you would rather we designed the site and ran it for you, that is $150 a month. No hidden charges on any of them. Archival itself is open source. The `archival` CLI is free to use and always will be, and you can build archival sites and host them yourself, or deploy them to platforms like Vercel, Netlify, or any static host. diff --git a/pages/product.liquid b/pages/product.liquid index 91e71c1..9b228df 100644 --- a/pages/product.liquid +++ b/pages/product.liquid @@ -346,7 +346,7 @@
Plan - $14/mo + Editor · $15/mo
GitHub From 5173b7df53243e52d515d292e55edbf0effef7c9 Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 16:54:47 -0400 Subject: [PATCH 4/8] fix contact section wrapping below 1328px Unrelated to the pricing work, bundled at Alex's request. .contact-container is capped at max-width: 30rem, and Tailwind's preflight makes it border-box, so the 4rem horizontal padding added at <=1328px was subtracted from that cap rather than sitting outside it. That left 22rem of usable content and wrapped "Connect With Us" onto two lines. Above 1328px there is no padding, which is why the break only appeared below it. Sets box-sizing: content-box so the 30rem is content width at every breakpoint. The fix goes in the nested .lower-container rule because that block ships as native CSS nesting and so outranks the bare .contact-container selectors in the media queries. --- style/main.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/main.css b/style/main.css index ab3b238..8605001 100644 --- a/style/main.css +++ b/style/main.css @@ -853,6 +853,12 @@ h1.pricing-title { .contact-container { margin: 0 auto; max-width: 30rem; + /* Tailwind's preflight makes this border-box globally, so the + horizontal padding added at <=1328px was being subtracted from + the 30rem instead of sitting outside it — leaving 22rem of + content and wrapping the section title. content-box keeps 30rem + of actual content at every breakpoint. */ + box-sizing: content-box; } } From 1b7295f0933724ab9d51a8f4caae801858a1941f Mon Sep 17 00:00:00 2001 From: Jesse Ditson Date: Wed, 12 Aug 2026 14:42:36 -0700 Subject: [PATCH 5/8] Copy pass on pricing.toml --- objects/pricing.toml | 45 ++++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/objects/pricing.toml b/objects/pricing.toml index 7cca98b..5c14e72 100644 --- a/objects/pricing.toml +++ b/objects/pricing.toml @@ -2,15 +2,10 @@ title_line_1 = "priced for" title_line_2 = "everyone" tagline = "No hidden charges. Just straightforward, simple pricing." -# PLACEHOLDER CONTENT — the Developer and White Glove tiers below use -# provisional copy. Deliberately no bandwidth/storage numbers or other -# specific commitments until those are decided. Editor carries the real -# details from the previous single-price plan. - [[tiers]] icon = "terminal" name = "Developer" -audience = "Hosting, and nothing you don't need" +audience = "Build cool websites, we'll handle the rest" price = "$5" term = "/mo" slug = "developer" @@ -18,17 +13,20 @@ featured = false cta_label = "Get Started" cta_url = "https://editor.archival.dev/new" features = """ -- Deploy straight from your repository -- Free SSL, renewed automatically -- Global CDN -- Bring your own domain -- Full access to the command line tools +- Build anything with Archival +- No centralized platform infrastructure +- Continuous Deployment from a Github repo +- Virtually unlimited traffic +- Large asset uploads (10GB storage included) +- Serverless Carriers included +- Global CDN & Edge Caching +- DNS management & automatic domain mapping """ [[tiers]] icon = "pencil" name = "Editor" -audience = "Hosting plus the visual site editor" +audience = "Professional features, edit from anywhere" price = "$15" term = "/mo" slug = "editor" @@ -37,26 +35,29 @@ cta_label = "Get Started" cta_url = "https://editor.archival.dev/new" features = """ - Everything in Developer -- Visual site editor for everyday content changes -- Custom domain registered free for the first year ($35 limit) -- 100GB bandwidth per month, 10GB storage -- Daily backups +- Per-site content editor usable usable from everywhere +- Custom editors and editor configuration +- Yearly domain renewal (registered with us, limit $40/yr) +- Granular edit history +- AI-assisted automatic site updates +- All our roadmap features, forever """ [[tiers]] icon = "diamond" name = "White Glove" -audience = "We design it, build it, and keep it running" +audience = "Focus on your business, we'll make sure your website is always up to date" price = "$150" term = "/mo" slug = "white-glove" featured = false cta_label = "Talk to us" -cta_url = "mailto:hi@archival.dev" +cta_url = "mailto:white-glove@archival.dev" features = """ - Everything in Editor -- A site designed for you by our team -- We migrate your existing content -- Ongoing changes handled for you -- Direct line to us when you need it +- Beautiful templates, customized for your business +- Dedicated Site Representative +- 100 included content or visual changes per month +- Special pricing on our network of designers & developers for rich feature & design changes +- Just email us what you want and a real human will handle it """ From f3d23ccfb4bfba2c503e9c9c6ab37997e8af54a8 Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 18:00:16 -0400 Subject: [PATCH 6/8] align pricing tier content across the three panels Jesse's copy gave White Glove a two-line audience while the other two fit on one, which pushed its price and feature list out of line. The featured tier was also offset independently: its box grows 1.25rem in each direction via the negative margin, but its padding had only grown 0.5rem, so its content rode high at the top and its CTA sat low at the bottom. - featured vertical padding is now 3.25rem, the base 2rem plus the 1.25rem overhang, so the two cancel exactly and the content area matches its neighbours while the box stays larger - .pricing-tier-audience reserves two lines (3em at the 1.5 line-height) so a wrapping audience no longer displaces what follows it, with a three-line reserve between 901px and 1328px where the columns narrow, and no reserve once the tiers stack - CTAs then align on their own, since .pricing-tier-features is flex: 1 inside content boxes that now share a top and a bottom Also evens the featured tier's inset to 3.25rem on all four sides and widens its column from 1.08fr to 1.18fr to pay for it. Without the wider column the extra horizontal padding would have left it 13px narrower than its neighbours instead of 19px wider. --- style/main.css | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/style/main.css b/style/main.css index 8605001..e88442d 100644 --- a/style/main.css +++ b/style/main.css @@ -312,7 +312,10 @@ h1.pricing-title { 10rem, and the featured tier's overhang eats 1.25rem of each. */ margin: 3rem auto 2rem; display: grid; - grid-template-columns: 1fr 1.08fr 1fr; + /* 1.18 rather than 1.08: the featured tier pads 3.25rem on every side + against the others' 2rem, so it needs the extra column width to keep + more usable text width than its neighbours, not less. */ + grid-template-columns: 1fr 1.18fr 1fr; align-items: stretch; gap: 1.5rem; } @@ -328,8 +331,14 @@ h1.pricing-title { margin: -1.25rem 0; } +/* 3.25rem is the base 2rem plus the 1.25rem this panel overhangs. The + vertical value is load-bearing: without it the extra height shifts the + content out of line with the neighbours — riding high at the top, CTA + sitting low at the bottom. The horizontal value simply matches it so + the inset reads even on all four sides; the column above is widened to + pay for it. The box grows; the content area does not. */ .pricing-tier-featured .pricing-tier-content { - padding: 2.5rem 2.25rem; + padding: 3.25rem; } .pricing-tier .glowverlay { @@ -382,6 +391,11 @@ h1.pricing-title { line-height: 1.5; color: var(--color-typography-secondary); margin: 0.35rem 0 0; + /* Reserve two lines so a tier whose audience wraps doesn't push its + price and feature list below the others. 3em = 2 lines at the + 1.5 line-height above, and em keeps it correct as the font-size + changes across breakpoints. */ + min-height: 3em; } .pricing-tier-price { @@ -485,6 +499,20 @@ h1.pricing-title { .pricing-tier-featured .pricing-tier-content { padding: 2rem; } + + /* Stacked, so there is nothing to align against — the reserved second + line would just be a gap under the one-line audiences. */ + .pricing-tier-audience { + min-height: 0; + } +} + +/* Still three across here, but the columns are narrow enough that the + longest audience wraps to three lines rather than two. */ +@media (min-width: 901px) and (max-width: 1328px) { + .pricing-tier-audience { + min-height: 4.5em; + } } @media (prefers-reduced-motion: reduce) { From 6261d8aaa33ec68a30e1e2d4909c70f1ab868319 Mon Sep 17 00:00:00 2001 From: Alexander King Date: Wed, 12 Aug 2026 18:04:33 -0400 Subject: [PATCH 7/8] fix pricing copy typo and align llms.txt with the real tiers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - drops a duplicated word in the Editor feature list ("usable usable") - llms.txt claimed the $15 plan "includes 100GB of bandwidth", which contradicts the Developer tier's "virtually unlimited traffic" now that the real feature lists are in. Rewritten from the actual tier content and the plans are named, since this file is read by LLMs and the names are how people will ask about them. - the closing paragraph offered "hiring the archival team to build something custom" at pricing@archival.dev, which now competes with White Glove and its own white-glove@archival.dev address. Reworded so pricing@ covers what the three plans don't — custom work beyond White Glove, or hosting at volume. --- objects/home.toml | 4 ++-- objects/pricing.toml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/objects/home.toml b/objects/home.toml index 8f913f0..4e18292 100644 --- a/objects/home.toml +++ b/objects/home.toml @@ -12,11 +12,11 @@ pricing_title = "Pricing" pricing_content = """ Archival is run by a tiny team with a goal of staying small. -There are three plans, priced for what you actually need. Hosting on its own is $5 a month. The Archival editor — hosting, custom domains, DNS, and large file uploads — is $15 a month, and includes 100GB of bandwidth and 10GB of storage. If you would rather we designed the site and ran it for you, that is $150 a month. No hidden charges on any of them. +There are three plans, priced for what you actually need. Developer is $5 a month: continuous deployment from a GitHub repo, virtually unlimited traffic, 10GB of asset storage, a global CDN, and DNS management. Editor is $15 a month and adds the per-site content editor, custom editor configuration, granular edit history, and yearly domain renewal. White Glove is $150 a month, where we build the site from a template customized for you and a real person handles your changes. No hidden charges on any of them. Archival itself is open source. The `archival` CLI is free to use and always will be, and you can build archival sites and host them yourself, or deploy them to platforms like Vercel, Netlify, or any static host. -If you're interested in hiring the archival team to build something custom for you, host a large number of sites on archival, or otherwise find our pricing model imperfect for your use case, reach out to [pricing@archival.dev](mailto:pricing@archival.dev) and we'll get you what you need! +If you need more than the three plans cover — a custom build beyond what White Glove handles, hosting a large number of sites, or a use case our pricing model doesn't fit — reach out to [pricing@archival.dev](mailto:pricing@archival.dev) and we'll get you what you need! """ discord_url = "https://discord.gg/Q9Cj6bWTbW" diff --git a/objects/pricing.toml b/objects/pricing.toml index 5c14e72..f97f293 100644 --- a/objects/pricing.toml +++ b/objects/pricing.toml @@ -35,7 +35,7 @@ cta_label = "Get Started" cta_url = "https://editor.archival.dev/new" features = """ - Everything in Developer -- Per-site content editor usable usable from everywhere +- Per-site content editor usable from everywhere - Custom editors and editor configuration - Yearly domain renewal (registered with us, limit $40/yr) - Granular edit history From 0d0ba3aa582676ec3f0f3a722327e639def6b974 Mon Sep 17 00:00:00 2001 From: Jesse Ditson Date: Sun, 16 Aug 2026 16:45:11 -0700 Subject: [PATCH 8/8] update home copy --- objects/home.toml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/objects/home.toml b/objects/home.toml index 4e18292..a980984 100644 --- a/objects/home.toml +++ b/objects/home.toml @@ -10,13 +10,11 @@ videos_title = "Show Me How It Works" contact_title = "Connect With Us" pricing_title = "Pricing" pricing_content = """ -Archival is run by a tiny team with a goal of staying small. - -There are three plans, priced for what you actually need. Developer is $5 a month: continuous deployment from a GitHub repo, virtually unlimited traffic, 10GB of asset storage, a global CDN, and DNS management. Editor is $15 a month and adds the per-site content editor, custom editor configuration, granular edit history, and yearly domain renewal. White Glove is $150 a month, where we build the site from a template customized for you and a real person handles your changes. No hidden charges on any of them. +Archival is run by a tiny team with a goal of staying small. No loss leadership, no enshittification, no investors. When you deploy your site with Archival, you own everything and we make sure it stays online easily and for less than our data-hungry competitors. Archival itself is open source. The `archival` CLI is free to use and always will be, and you can build archival sites and host them yourself, or deploy them to platforms like Vercel, Netlify, or any static host. -If you need more than the three plans cover — a custom build beyond what White Glove handles, hosting a large number of sites, or a use case our pricing model doesn't fit — reach out to [pricing@archival.dev](mailto:pricing@archival.dev) and we'll get you what you need! +If you're interested in hiring our team to build something custom for you, host a large number of sites on archival, or otherwise find our pricing model imperfect for your use case, reach out to [pricing@archival.dev](mailto:pricing@archival.dev) and we'll get you what you need! """ discord_url = "https://discord.gg/Q9Cj6bWTbW"