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/home.toml b/objects/home.toml index c6a8c81..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. - -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. +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'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'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" diff --git a/objects/pricing.toml b/objects/pricing.toml index 73003de..f97f293 100644 --- a/objects/pricing.toml +++ b/objects/pricing.toml @@ -1,56 +1,63 @@ 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" + +[[tiers]] +icon = "terminal" +name = "Developer" +audience = "Build cool websites, we'll handle the rest" +price = "$5" +term = "/mo" +slug = "developer" +featured = false 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: - -- 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 +features = """ +- 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 """ -[[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 = "Professional features, edit from anywhere" +price = "$15" +term = "/mo" +slug = "editor" +featured = true +cta_label = "Get Started" +cta_url = "https://editor.archival.dev/new" +features = """ +- Everything in Developer +- Per-site content editor 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 """ -[[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 = "diamond" +name = "White Glove" +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:white-glove@archival.dev" +features = """ +- Everything in Editor +- 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 """ diff --git a/pages/pricing.liquid b/pages/pricing.liquid index 90ba9bc..2edf38d 100644 --- a/pages/pricing.liquid +++ b/pages/pricing.liquid @@ -17,139 +17,101 @@

{{ pricing.tagline }}

-
-
-
-
-
- {% for item in pricing.items %} -
-
-
- {% case item.icon %} - {% when "cube" %} - - - - - - {% when "globe" %} - - - - - - {% when "clock" %} - - - - - {% endcase %} -
-
-
{{ item.name }}
-
{{ item.description }}
-
-
{{ item.price }}
-
- - - -
-
-
-
- {{ item.content }} -
-
-
- {% endfor %} -
+
+ {% for tier in pricing.tiers %} + + {% endfor %}
@@ -397,32 +359,3 @@ }); })(); - - diff --git a/pages/product.liquid b/pages/product.liquid index 5dadb6f..4747c76 100644 --- a/pages/product.liquid +++ b/pages/product.liquid @@ -404,7 +404,7 @@
Plan - $14/mo + Editor · $15/mo
GitHub diff --git a/style/main.css b/style/main.css index 81aaccd..e88442d 100644 --- a/style/main.css +++ b/style/main.css @@ -301,137 +301,59 @@ 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; + /* 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; } -.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; -} - -.pricing-cta { - width: 100%; + display: flex; } -/* New pricing breakdown styles */ -.pricing-breakdown-container { - position: relative; - width: 100%; - max-width: 42rem; - margin: 0 auto; +/* 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; } -.pricing-breakdown { - position: relative; - width: 100%; - display: inline-flex; - justify-content: center; - align-items: center; +/* 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: 3.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 +361,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 +378,69 @@ 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; -} - -.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); + 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-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 +448,82 @@ 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; + } + + /* 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) { + .pricing-cta-secondary { + transition: none; + } + + .pricing-tier .glowverlay, + .pricing-tier-featured.glow-container:before { + animation: none; + } } .glow-container { @@ -1006,6 +881,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; } } @@ -1665,81 +1546,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;