/* Standalone namespaced CSS for the pricing section (prefix: psec-) */ /* Add to your or copy into your main stylesheet. */ .psec-pricing { --psec-accent: 42, 105, 255; /* hsl hue,sat,val used with alpha */ --psec-muted: #6b7280; --psec-bg: rgba(255, 255, 255, 0.6); --psec-radius: 12px; --psec-shadow: 0 6px 22px rgba(17, 24, 39, 0.06); background: linear-gradient( 180deg, rgba(250, 251, 255, 0.6), rgba(245, 246, 255, 0.55) ); padding: 64px 0; font-family: inherit; color: #0f172a; } .psec-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } .psec-header { text-align: center; max-width: 820px; margin: 0 auto 36px; } .psec-title { font-size: 28px; line-height: 1.05; margin: 0 0 8px; font-weight: 700; letter-spacing: -0.02em; } .psec-subtitle { margin: 0; color: var(--psec-muted); font-size: 15px; } /* Grid */ .psec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; } /* Card */ .psec-card { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 255, 0.85) ); border-radius: var(--psec-radius); box-shadow: var(--psec-shadow); padding: 22px; display: flex; flex-direction: column; gap: 16px; position: relative; transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.28s; } .psec-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(17, 24, 39, 0.09); } .psec-card--featured { border: 1px solid rgba(var(--psec-accent), 0.12); transform: translateY(-4px); background: linear-gradient( 180deg, rgba(250, 252, 255, 1), rgba(245, 249, 255, 1) ); } /* ribbon */ .psec-ribbon { position: absolute; top: -10px; right: 14px; background: rgba(17, 24, 39, 0.9); color: #fff; padding: 6px 10px; font-size: 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08); } /* Top */ .psec-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .psec-plan { margin: 0; font-size: 16px; font-weight: 700; } .psec-price-range { margin: 0; font-weight: 700; color: hsl(var(--psec-accent)); font-size: 18px; display: flex; align-items: center; gap: 6px; } /* features */ .psec-features { list-style: none; padding: 0; margin: 0; color: var(--psec-muted); font-size: 14px; display: grid; gap: 8px; } .psec-features li { display: flex; gap: 10px; align-items: flex-start; padding-left: 0; } /* footer */ .psec-card-foot { margin-top: auto; display: flex; gap: 12px; align-items: center; justify-content: flex-start; } /* buttons & links */ .psec-btn { border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; transition: transform 0.16s, box-shadow 0.16s; } .psec-btn:active { transform: translateY(1px); } .psec-btn-primary { background: linear-gradient( 90deg, hsl(var(--psec-accent)) 0%, rgba(81, 67, 255, 0.95) 100% ); color: white; box-shadow: 0 8px 30px rgba(81, 67, 255, 0.12); border: none; } .psec-btn-outline { background: transparent; border: 1px solid rgba(15, 23, 42, 0.06); color: #0f172a; } .psec-link { color: var(--psec-muted); font-size: 13px; text-decoration: none; margin-left: auto; } /* Add-ons */ .psec-addons { margin-top: 18px; padding: 18px; border-radius: 10px; background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(15, 23, 42, 0.03); display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .psec-addons-title { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; } .psec-addons-list { list-style: none; margin: 0; padding: 0; color: var(--psec-muted); font-size: 14px; display: grid; gap: 8px; } .psec-addon { background: rgba(15, 23, 42, 0.03); padding: 10px 12px; border-radius: 8px; } /* CTA */ .psec-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; padding-top: 6px; } .psec-cta-text { margin: 0; color: var(--psec-muted); font-size: 14px; } .psec-cta-btn { background: transparent; border-radius: 12px; padding: 12px 18px; border: 1px solid rgba(var(--psec-accent), 0.12); color: hsl(var(--psec-accent)); font-weight: 700; text-decoration: none; box-shadow: 0 6px 22px rgba(17, 24, 39, 0.04); } /* Responsive */ @media (max-width: 980px) { .psec-grid { grid-template-columns: repeat(2, 1fr); } .psec-container { padding: 0 18px; } } @media (max-width: 640px) { .psec-grid { grid-template-columns: 1fr; } .psec-card { padding: 18px; } .psec-card-top { flex-direction: column; align-items: flex-start; gap: 6px; } .psec-card-foot { justify-content: flex-start; gap: 10px; } .psec-cta { flex-direction: column; align-items: stretch; } .psec-cta-btn { width: 100%; text-align: center; } .psec-ribbon { right: 12px; top: -8px; } } /* Accessibility focus */ .psec-btn:focus, .psec-cta-btn:focus, .psec-link:focus { outline: 3px solid rgba(var(--psec-accent), 0.14); outline-offset: 2px; border-radius: 10px; }