amadan

carlos / carloku Public

Style team plan grouping and prepare tooltip copy review

Paul Campbell pushed by claude d01a4559c3c1857c226a0e668b04b7c4899ea341 parent cdfebfe
3 files changed, +10 −2
  • copy-review/pricing/build.mjs +1 −1
  • src/pricing/index.html +1 −1
  • src/site.css +8 −0
diff --git a/copy-review/pricing/build.mjs b/copy-review/pricing/build.mjs
index 172798e..bb02576 100644
--- a/copy-review/pricing/build.mjs
+++ b/copy-review/pricing/build.mjs
@@ -291,7 +291,7 @@ ${controls}
<div class="wrap">
${t("plans.heading", "h2")}
<div class="plans">
- <h3 class="team-plans-heading">Team plans</h3>
+ <h3 class="team-plans-heading"><span>Team plans</span></h3>
${card("free", false)}
${card("personal", true)}
${card("community", false)}
diff --git a/src/pricing/index.html b/src/pricing/index.html
index 62632f7..4198534 100644
--- a/src/pricing/index.html
+++ b/src/pricing/index.html
@@ -63,7 +63,7 @@
<div class="wrap">
<h2>The plans</h2>
<div class="plans">
- <h3 class="team-plans-heading">Team plans</h3>
+ <h3 class="team-plans-heading"><span>Team plans</span></h3>
<article class="plan plan-free">
<div class="plan-intro">
<h3>Free</h3>
diff --git a/src/site.css b/src/site.css
index e1b8b2c..fcd9f58 100644
--- a/src/site.css
+++ b/src/site.css
@@ -500,3 +500,11 @@ article.guide .note {
.plan .allowance-heading { font-size: 0.92rem; }
.plan li { font-size: 0.92rem; }
}
+
+.team-plans-heading { display: flex; align-items: center; gap: 0.65rem; padding-bottom: 0.9rem; }
+.team-plans-heading span { border: 1px solid var(--line-strong); border-radius: 999px; background: var(--accent-soft); color: var(--accent); padding: 0.45rem 0.9rem; font-size: 0.72rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
+.team-plans-heading::before, .team-plans-heading::after { content: ""; flex: 1; height: 0.65rem; border-top: 1px solid var(--line-strong); align-self: flex-end; }
+.team-plans-heading::before { border-left: 1px solid var(--line-strong); border-top-left-radius: 0.6rem; }
+.team-plans-heading::after { border-right: 1px solid var(--line-strong); border-top-right-radius: 0.6rem; }
+.info-popup { width: min(21rem, 74vw); padding: 0.9rem 1rem; line-height: 1.6; }
+.info-popup::before { content: ""; position: absolute; right: 0.3rem; top: -0.3rem; width: 0.5rem; height: 0.5rem; background: var(--bg); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); transform: rotate(45deg); }