diff --git a/services/web/frontend/stylesheets/pages/plans-2026.scss b/services/web/frontend/stylesheets/pages/plans-2026.scss index cda3e380f8..9194570e97 100644 --- a/services/web/frontend/stylesheets/pages/plans-2026.scss +++ b/services/web/frontend/stylesheets/pages/plans-2026.scss @@ -14,14 +14,13 @@ } .plans-period-label { - font-size: var(--font-size-02); + @include body-sm; + font-weight: 400; - line-height: var(--line-height-02); margin: 0; @include media-breakpoint-up(md) { - font-size: var(--font-size-03); - line-height: var(--line-height-03); + @include body-base; } } @@ -324,8 +323,8 @@ .plans-price-card-yearly-summary, .student-plan-saving-badge { - font-size: var(--font-size-02); - line-height: var(--line-height-02); + @include body-sm; + position: absolute; } @@ -431,10 +430,10 @@ } .plans-educational-discount-text { + @include body-sm; + cursor: help; - font-size: var(--font-size-02); font-weight: 400; - line-height: var(--line-height-02); text-decoration: underline dotted; text-underline-offset: var(--spacing-01); } @@ -476,11 +475,19 @@ // ─── Organization logos ──────────────────────────────────────────────────────── + .plans-logos-section { + background-color: var(--bg-light-secondary); + } + .plans-and-pricing-section .plans-new-organizations { padding-block: var(--spacing-13); .plans-new-organizations-logo { margin-top: var(--spacing-06); + + img { + filter: grayscale(1) opacity(0.54); + } } } @@ -520,10 +527,6 @@ // Below xl the plan cards already show prices and CTAs — the table // just needs plan names so users can compare features. @include media-breakpoint-down(xl) { - .plans-feature-table-most-popular-badge { - display: none; - } - .plans-feature-table-col-header-inner .plans-cta { display: none; } @@ -540,7 +543,7 @@ border-collapse: separate; border-radius: var(--border-radius-medium); border-spacing: 0; - min-width: 640px; + min-width: 768px; table-layout: fixed; width: 100%; @@ -579,25 +582,39 @@ } } - .plans-feature-table-thead .plans-feature-table-header-row th { - backdrop-filter: blur(12px); - background: rgb($white, 0.7); - - // -1px spread prevents shadow extending past table edges - box-shadow: 0 2px 4px -1px rgb($neutral-90, 0.16); + .plans-feature-table-thead .plans-feature-table-header-row { position: sticky; top: 0; - z-index: 2; + + // Paints above positioned .plans-feature-table-cell-bool-content spans in + // body rows + z-index: 1; + + // Negative spread prevents glow on left/right edges; top glow hidden by + // top: 0 + box-shadow: 0 8px 16px -4px rgb($black, 0.08); + + th { + backdrop-filter: blur(12px); + background: rgb($white, 0.7); + border-bottom: 1px solid var(--border-divider); + } } .plans-feature-table-col-header { overflow: hidden; padding: var(--spacing-06); - - // Extra bottom padding reserves space for the absolutely-positioned CTA button - padding-bottom: 56px; text-align: center; vertical-align: top; + + // Reserve space for the absolutely-positioned CTA button — but only when + // it's both rendered (hideForLoggedIn suppresses it) and visible at this + // breakpoint (prices+CTA hide below xl via .only-show-for-specific-plan-period) + @include media-breakpoint-up(xl) { + &:has(.plans-cta) { + padding-bottom: 56px; + } + } } .plans-feature-table-col-header-inner .plans-cta { @@ -615,26 +632,10 @@ padding: var(--spacing-06); } - .plans-feature-table-most-popular-badge { - @extend .mono-text; - - background-color: var(--green-bright-tint-50); - border-radius: var(--border-radius-medium); - color: var(--content-primary); - font-size: var(--font-size-01); - left: 50%; - padding: var(--spacing-01) var(--spacing-03); - position: absolute; - top: 0; - transform: translate(-50%, -50%); - white-space: nowrap; - z-index: 1; - } - .plans-feature-table-col-name { color: var(--green-60); display: block; - font-size: var(--font-size-03); + font-size: var(--font-size-04); font-weight: 500; margin-bottom: var(--spacing-02); text-align: center; @@ -657,11 +658,14 @@ .plans-feature-table-col-price-term { color: var(--content-primary); font-size: var(--font-size-03); + font-weight: 400; } .plans-feature-table-col-price-yearly { + @include body-xs; + color: var(--neutral-60); - font-size: var(--font-size-01); + font-weight: 400; margin-bottom: var(--spacing-02); text-align: center; } @@ -735,6 +739,7 @@ } .plans-feature-table-cell { + color: var(--neutral-60); padding: var(--spacing-06); text-align: center; vertical-align: middle; @@ -749,6 +754,10 @@ .plans-feature-table-cell-bool-content { display: inline-block; + + // Collapse to the check icon's height so `top: 50%` on the absolutely- + // positioned info icon aligns with the check icon's visual centre. + line-height: 1; position: relative; &[data-bs-toggle='tooltip'] { @@ -757,31 +766,40 @@ } .plans-feature-table-info-icon { - color: var(--content-secondary); + color: var(--neutral-60); font-size: var(--font-size-03); vertical-align: middle; } - // In bool cells the info icon floats beside the check; in text cells it flows inline - .plans-feature-table-cell-bool-content .plans-feature-table-info-icon { - left: calc(100% + var(--spacing-01)); + // In bool cells the info icon floats beside the check; in text cells it flows + // inline. The wrapper has left padding to bridge the gap, preventing tooltip + // flicker on hover. + .plans-feature-table-cell-bool-content + .plans-feature-table-info-icon-wrapper { + left: 100%; + padding-left: var(--spacing-01); position: absolute; top: 50%; transform: translateY(-50%); } .plans-feature-table-cell-text-content { + @include body-base; + align-items: center; color: var(--content-primary); display: inline-flex; - font-size: var(--font-size-02); gap: var(--spacing-02); + + &.plans-feature-table-cell-text-small { + @include body-sm; + } } // ─── Quotes and FAQs section──────────────────────────────────────────────── .plans-quotes-section { - padding-bottom: var(--spacing-13); + padding-block: var(--spacing-13); } .plans-faq { diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 5d9e214c1b..50ebeb0f57 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -142,10 +142,10 @@ "agree": "Agree", "agree_with_the_terms": "I agree with the Overleaf terms", "ai_allowance": "AI allowance", - "ai_allowance_basic_explanation": "5 AI uses per day. Enough for the occasional nudge — fix an error, check a formula, or get unstuck when you need it most.", + "ai_allowance_basic_explanation": "5 AI uses per day across available AI tools.", "ai_allowance_explanation": "Built-in AI tools that support writing, editing, and LaTeX workflows. Usage is capped by a daily limit that resets every day. AI features can be disabled by individual users or managed at the group level. Fair usage applies.", - "ai_allowance_max_explanation": "Unlimited AI usage. Use AI as much as you like — just write, and let Overleaf handle the rest. Fair usage applies.", - "ai_allowance_standard_explanation": "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.", + "ai_allowance_max_explanation": "Full access to every AI tool. Fair usage applies.", + "ai_allowance_standard_explanation": "10 AI uses per day across all AI tools.", "ai_assist": "AI Assist", "ai_assist_description": "AI Assist combines AI tools from Overleaf and Writefull to help you write faster, smarter and with confidence.", "ai_assist_in_overleaf_is_included_via_writefull_groups": "AI Assist in Overleaf is included as part of your group or organization’s Writefull subscription. To make changes you’ll need to speak to your subscription admin", @@ -153,6 +153,7 @@ "ai_assist_subscriber_can_now_write_smarter": "AI Assist subscribers can now write smarter, find citations, and generate LaTeX from prompts and images.", "ai_assist_unavailable_due_to_subscription_type": "We’re sorry—it looks like AI Assist isn’t available to you just yet due to your current subscription type.", "ai_assistant": "AI Assistant", + "ai_assistant_explanation": "A LaTeX-fluent AI Assistant built into your editor.", "ai_can_make_mistakes": "AI can make mistakes. Review fixes before you apply them.", "ai_features": "AI features", "ai_feedback_please_provide_more_detail": "Please provide more detail about what was wrong (optional)", @@ -258,7 +259,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_ai_allowance_tooltip": "5 AI uses per day across available AI tools.", "basic_compile_time": "Basic compile time", "basic_compile_timeout": "Basic compile timeout", "basic_compile_timeout_on_fast_servers": "Basic compile timeout on fast servers", @@ -1186,7 +1187,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_ai_allowance_tooltip": "10 AI uses per day across all AI tools.", "increased_compile_timeout": "Increased compile timeout", "individuals": "Individuals", "info": "Info", @@ -1502,7 +1503,7 @@ "math_inline": "Math Inline", "max_ai": "Max", "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.", + "max_ai_allowance_tooltip": "Full access to every AI tool. Fair usage applies.", "maximum_files_uploaded_together": "Maximum __max__ files uploaded together", "may": "May", "maybe_later": "Maybe later",