agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 17:19:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #32916 from overleaf/td-pricing-features-follow-up

Browse Source 
2026 pricing page feature comparison table polish

GitOrigin-RevId: 5ebad4f1bd7c296dff2277a7f2ddd6324597b244
This commit is contained in:
Tim Down
2026-04-24 10:28:20 +01:00
committed by Copybot
parent c46fba951e
commit 901ec15bc1
2 changed files with 72 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
services/web/frontend/stylesheets/pages/plans-2026.scss
View File

@@ -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 {

13
services/web/locales/en.json
View File

@@ -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",