From d787548ef94f605b5178889f8996737003071724 Mon Sep 17 00:00:00 2001 From: ricardodapaulo Date: Tue, 4 Aug 2026 22:25:14 +0100 Subject: [PATCH 1/2] Enhance pricing UI with detailed styles and structure Added comprehensive styles for the pricing cards, including layout, typography, and button designs. Updated index.html to include a new Enterprise card and improved documentation within the CSS for better clarity on component usage. --- index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+) diff --git a/index.html b/index.html index 768037f..41e96bc 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,29 @@ + Pricing Plans — HTML version + + + + + +

HTML version — static markup

+ +
+ +

Hobby

@@ -36,8 +48,11 @@

Hobby

+
+ +

Pro

@@ -67,8 +82,43 @@

Pro

+ + + +
+
+

Enterprise

+

+ Custom +

+
+

Everything in Pro, plus:

+
    +
  • + ✓ + SSO and domain verification +
    • +
  • + ✓ + Centralized team billing +
    • +
  • + ✓ + Admin usage and spend controls +
    • +
  • + ✓ + Priority support and onboarding +
    • +
+
+
+ + +
+ diff --git a/styles.css b/styles.css index 650590a..bf7cc95 100644 --- a/styles.css +++ b/styles.css @@ -1,9 +1,22 @@ +/* ========================================================================== + Reset + Removes default browser spacing; box-sizing keeps padding inside width. + ========================================================================== */ + * { margin: 0; padding: 0; box-sizing: border-box; } + +/* ========================================================================== + Page canvas + Font: Inter (loaded in index.html) + Background: #f7f7f4 — warm off-white page fill + Layout: centered flex column, min full viewport height + ========================================================================== */ + body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f7f7f4; @@ -14,6 +27,12 @@ body { padding: 20px; } + +/* ========================================================================== + Cards container + Horizontal row of pricing cards; 24px gap between cards + ========================================================================== */ + .cards-container { display: flex; flex-direction: row; @@ -23,6 +42,14 @@ body { align-items: flex-start; } + +/* ========================================================================== + Pricing card + Fixed width 320px, min-height 380px + Background: #f2f1ed — slightly darker than page + Radius: 4px | Padding: 16px + ========================================================================== */ + .card { display: flex; flex-direction: column; @@ -39,6 +66,13 @@ body { flex-direction: column; } + +/* ========================================================================== + Card typography + Title: 22px / 28px line-height, color #26251e + Price: muted rgba(38, 37, 30, 0.5) — amount, period split for styling + ========================================================================== */ + .card-title { font-size: 22px; line-height: 28px; @@ -75,6 +109,12 @@ body { margin: 16px 0px; } + +/* ========================================================================== + Feature list + Unstyled list; checkmark + label per row, 8px row spacing + ========================================================================== */ + .features-list { list-style: none; padding: 0; @@ -95,6 +135,14 @@ body { font-weight: 400; } + +/* ========================================================================== + CTA buttons + Pill shape (999px radius), pinned to card bottom via margin-top: auto + Secondary: #e6e5e0 bg | Primary (.primary): #111 bg, white text + Hover/active states darken each variant + ========================================================================== */ + .download-button { margin-top: auto; width: fit-content; @@ -130,6 +178,12 @@ body { background-color: #333; } + +/* ========================================================================== + Demo label (index.html only) + Fixed badge at top center — identifies the HTML reference version + ========================================================================== */ + .page-label { position: fixed; top: 16px; From 8f9d3c0848c601e8ae4c635961513181f7bf45e5 Mon Sep 17 00:00:00 2001 From: ricardodapaulo Date: Tue, 4 Aug 2026 22:38:01 +0100 Subject: [PATCH 2/2] Added a new card I've added an enterprise card. --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 41e96bc..ed38598 100644 --- a/index.html +++ b/index.html @@ -118,7 +118,6 @@

Enterprise

-