/* ===== Pricing page - StatsAlpha brand-aligned, Bootstrap-first, dark-mode aware ===== */ /* Alpine helper */ [x-cloak]{display:none !important;} /* StatsAlpha Brand Colors */ :root{ --sa-primary-600: #2563EB; --sa-primary-700: #1D4ED8; --sa-primary-100: #DBEAFE; --sa-secondary-600: #14B8A6; --sa-secondary-700: #0F766E; --sa-secondary-100: #CCFBF1; /* Subtle gradients for hero */ --hero-grad-light: radial-gradient(1200px 600px at 25% 15%, #1e3a8a 0, #0f172a 55%, #020617 100%); --hero-grad-dark: radial-gradient(1200px 600px at 30% 20%, #0f172a 0, #1e3a8a 55%, #312e81 100%); } /* Hero */ .pricing-hero{ background: var(--hero-grad-light); color: #ffffff; position:relative; overflow:hidden; } .lead{ color: #f8fafc; } [data-bs-theme="dark"] .pricing-hero{ background: var(--hero-grad-dark); } .pricing-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)); pointer-events:none; } /* Glass chip */ .glass{ --glass-bg: color-mix(in oklab, var(--bs-body-color) 8%, transparent); --glass-border: color-mix(in oklab, var(--bs-body-color) 88%, transparent); backdrop-filter: blur(12px) saturate(160%); background: var(--glass-bg); border: 1px solid var(--glass-border); } /* Cards - subtle, data-first design */ .plan-card{ --_shadow-a: 0 2px 12px -2px rgba(0,0,0,.08); --_shadow-b: 0 6px 20px -4px rgba(0,0,0,.12); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; box-shadow: var(--_shadow-a), var(--_shadow-b); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .plan-card:hover{ transform: translateY(-4px); box-shadow: 0 6px 20px -4px rgba(0,0,0,.15), 0 12px 32px -6px rgba(0,0,0,.18); border-color: var(--sa-primary-600); } /* Premium card highlight */ .border-premium{ border-color: var(--sa-primary-600) !important; border-width: 2px !important; } [data-bs-theme="dark"] .border-premium{ border-color: var(--sa-primary-600) !important; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2), 0 4px 18px -4px rgba(0,0,0,.25), 0 10px 34px -6px rgba(0,0,0,.35); } /* Ribbons - use StatsAlpha brand colors */ .ribbon{ position:absolute; top:-6px; right:-6px; background: linear-gradient(135deg, var(--sa-secondary-600), var(--sa-secondary-700)); color: #ffffff; padding: .35rem .75rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; border-radius: 0 .5rem 0 .5rem; box-shadow: 0 3px 10px -2px rgba(0,0,0,.3); text-transform: uppercase; } .ribbon-annual{ background: linear-gradient(135deg, #f59e0b, #d97706); color: #111827; } [data-bs-theme="dark"] .ribbon{ color: #ffffff; } [data-bs-theme="dark"] .ribbon-annual{ color: #111827; } /* Billing switch - StatsAlpha brand */ .price-switch input{display:none;} .price-switch label{ cursor:pointer; padding: .55rem 1.1rem; border-radius: 50rem; font-weight: 600; color: rgba(255,255,255,0.7); transition: all .2s ease; line-height: 1; } .price-switch label:hover{ color: rgba(255,255,255,0.9); } .price-switch label.active{ color: #ffffff; background: var(--sa-primary-600); box-shadow: 0 .4rem .8rem -.3rem rgba(37, 99, 235, .5); } [data-bs-theme="dark"] .price-switch label{ color: rgba(255,255,255,0.6); } [data-bs-theme="dark"] .price-switch label.active{ background: var(--sa-primary-700); color: #ffffff; } .badge-save{ background: linear-gradient(90deg, var(--sa-secondary-600), var(--sa-secondary-700)); border: 0; color: #ffffff; } /* Feature table */ .feature-table{ --bs-table-bg: transparent; --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: color-mix(in oklab, var(--surface-2) 60%, transparent); --bs-table-hover-color: var(--bs-body-color); } .feature-table thead th{ border:none; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-muted); background:transparent; font-weight:600; } .feature-table td{ vertical-align:middle; font-size:.95rem; } .feature-table tbody td{ border-color: var(--bs-border-color); } /* Status icons (text markers) */ .check-icon{ color:var(--bs-success); font-weight:700; } .cross-icon{ color:var(--bs-danger); font-weight:700; opacity:.55; } /* CTA button - StatsAlpha gradient (blue to teal) */ .btn-cta{ --bs-btn-font-weight: 700; --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.8rem; --bs-btn-border-radius: .75rem; --bs-btn-color: #ffffff; --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: #ffffff; --bs-btn-focus-shadow-rgb: 37,99,235; background: linear-gradient(90deg, var(--sa-primary-600), var(--sa-secondary-600)); background-size: 200% 100%; transition: background-position .4s ease, transform .06s ease; } .btn-cta:hover{ background-position: 100% 0; --bs-btn-hover-color: #ffffff; } .btn-cta:active{ transform: translateY(1px); } [data-bs-theme="dark"] .btn-cta{ background: linear-gradient(90deg, var(--sa-primary-700), var(--sa-secondary-700)); } /* Outline button for Free tier */ .btn-outline-primary{ --bs-btn-color: var(--sa-primary-600); --bs-btn-border-color: var(--sa-primary-600); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--sa-primary-600); --bs-btn-hover-border-color: var(--sa-primary-600); --bs-btn-active-bg: var(--sa-primary-700); --bs-btn-active-border-color: var(--sa-primary-700); } [data-bs-theme="dark"] .btn-outline-primary{ --bs-btn-color: var(--sa-primary-100); --bs-btn-border-color: var(--sa-primary-600); --bs-btn-hover-bg: var(--sa-primary-700); } /* Gradient headline - StatsAlpha brand gradient */ .gradient-text{ background: linear-gradient(90deg, #38bdf8, var(--sa-primary-600), var(--sa-secondary-600)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Focus visibility */ .price-switch label:focus-visible, .btn:focus-visible, [role="button"]:focus-visible{ outline: none; box-shadow: 0 0 0 .25rem rgba(59,130,246,.35); border-radius: inherit; } /* Motion safety */ @media (prefers-reduced-motion: reduce){ .plan-card, .btn-cta, .price-switch label{ transition:none !important; } }