[web] Address design feedback on pricing cards (#32844)

* Add AI allowance tooltip copy and wire into plans feature comparison

Adds per-tier tooltip strings for basic, increased, and max AI
allowance. Splits the ai_allowance feature entry in the individual and
student plan configs into separate per-tier objects so each can carry
its own featureExplanation key.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Fix plans page styling: section padding, badge line-height, checkbox accent-color

- Replace padding-block shorthand with explicit start/end on
  .plans-and-pricing-section to avoid overriding the bottom spacing
- Add missing line-height to .price-plan-card-badge
- Add accent-color to .plans-educational-discount-checkbox

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Only render geo-banner-container when there is content

Previously, .geo-banner-container was always rendered even when no
banners or errors were present, which introduced an unnecessary empty
wrapper in the DOM. Also moves the payment error conditions to be
top-level siblings (removing the `if paymentError` indirection) to
make each case independently explicit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* Migrate plans page to .plans-2026 gap-based layout

Replaces .plans-new-design's per-section padding rules with a single
flex column + gap on .plans-2026, letting the layout engine handle
spacing uniformly. Removes the now-redundant .plans-and-pricing-section
padding block, .plans-cards-content padding, and
.plans-new-design-content-spacing class from the heading row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
GitOrigin-RevId: 3a112c46759419ef0bc994dfb88498fc19b18c10
This commit is contained in:
Antoine Clausse
2026-04-16 16:23:44 +02:00
committed by Copybot
parent b115edc0a5
commit b746926ba7
2 changed files with 11 additions and 24 deletions

View File

@@ -1,23 +1,9 @@
// Styles for plans_2026.pug (plans-2026-phase-1 split test).
// All rules are scoped to .plans-new-design or sub-selectors that
// only appear in plans_2026.pug, so plans.pug is unaffected.
.plans-new-design {
.plans-and-pricing-section {
padding-block: var(--spacing-09);
&:first-of-type {
padding-block-start: var(--spacing-10);
}
@include media-breakpoint-up(md) {
padding-block: var(--spacing-13);
&:first-of-type {
padding-block-start: var(--spacing-15);
}
}
}
.plans-2026 {
display: flex;
flex-direction: column;
gap: var(--spacing-14);
padding-top: calc($header-height + var(--spacing-15));
padding-bottom: var(--spacing-15);
// Period toggle switch — used only by _plans-period-toggle.pug
.plans-period-switch-wrapper {
@@ -88,10 +74,6 @@
.plans-cards-section {
background-color: var(--bg-light-primary);
.plans-cards-content {
padding-block: var(--spacing-08);
}
.plans-cards-toggles {
align-items: center;
display: flex;
@@ -244,6 +226,7 @@
border-radius: var(--border-radius-medium);
color: var(--neutral-90);
font-size: var(--font-size-03);
line-height: var(--line-height-02);
left: 50%;
padding: var(--spacing-04) var(--spacing-06);
position: absolute;
@@ -406,6 +389,7 @@
}
.plans-educational-discount-checkbox {
accent-color: var(--green-50);
background-color: var(--bg-light-primary);
border: 1px solid var(--border-primary);
border-radius: var(--border-radius-base);

View File

@@ -248,6 +248,7 @@
"back_to_your_projects": "Back to your projects",
"basic": "Basic",
"basic_ai_allowance": "Basic AI allowance",
"basic_ai_allowance_tooltip": "5 AI uses per day. Enough for the occasional nudge — fix an error, check a formula, or get unstuck when you need it most.",
"basic_compile_time": "Basic compile time",
"basic_compile_timeout": "Basic compile timeout",
"basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers",
@@ -1153,6 +1154,7 @@
"includes": "includes",
"increase_indent": "Increase indentation",
"increased_ai_allowance": "Increased AI allowance",
"increased_ai_allowance_tooltip": "10 AI uses per day. Enough for most researchers and writers. Use it to catch errors, tidy formatting, and sharpen your writing throughout the day.",
"increased_compile_timeout": "Increased compile timeout",
"individuals": "Individuals",
"info": "Info",
@@ -1460,6 +1462,7 @@
"math_display": "Math Display",
"math_inline": "Math Inline",
"max_ai_allowance": "Max AI allowance",
"max_ai_allowance_tooltip": "Unlimited AI usage. Use AI as much as you like — just write, and let Overleaf handle the rest. Fair usage applies.",
"maximum_files_uploaded_together": "Maximum __max__ files uploaded together",
"may": "May",
"maybe_later": "Maybe later",