/* /css/pricing.css BillboardBug — pricing with Cloudinary-style pill buttons Assumes Inter is loaded in . */ :root{ --brand: #3448C5; --brand-2: #5b6ef0; --cta-blue: #0d9aff; /* from snippet */ --cta-blue-2: #3F5FFF; /* bright secondary tint */ --accent: #7c5cff; --muted: #6b7280; --bg: #f7f9ff; --card-bg: #ffffff; --glass: rgba(18,28,75,0.04); --radius: 14px; --pad: 24px; --shadow-soft: 0 8px 30px rgba(12,22,59,0.06); --shadow-strong: 0 18px 50px rgba(12,22,59,0.10); --maxw: 1200px; --ff: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } /* Base container */ .pricing-section{ font-family: var(--ff); background: linear-gradient(180deg, rgba(52,72,197,0.03), rgba(124,92,255,0.02)); padding: 72px 20px; color: #071037; } .pricing-inner{ max-width: var(--maxw); margin: 0 auto; display:flex; flex-direction:column; gap:22px; } /* Header */ .pricing-header{ text-align:center; margin-bottom:6px; } .pricing-header h2{ font-size:28px; margin:0; font-weight:700; letter-spacing:-0.02em; color:#071037; } .pricing-sub{ margin:8px 0 0; color:var(--muted); font-size:15px; } /* Grid */ .pricing-grid{ display:grid; gap:20px; grid-template-columns: 1fr; align-items:stretch; margin-top:10px; } @media(min-width:880px){ .pricing-grid{ grid-template-columns: repeat(3, 1fr); } } /* Card base */ .pricing-card{ background: linear-gradient(180deg,var(--card-bg), #fbfdff); border-radius: var(--radius); padding: 20px; display:flex; flex-direction:column; justify-content:space-between; border: 1px solid var(--glass); box-shadow: var(--shadow-soft); transition: transform .32s cubic-bezier(.2,.9,.26,1), box-shadow .32s, border-color .32s; position: relative; overflow: visible; } .pricing-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow-strong); border-color: rgba(52,72,197,0.08); } /* Top area: eyebrow + price */ .card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .card-eyebrow{ font-weight:700; color:var(--muted); font-size:14px; } .card-eyebrow .pill{ margin-left:8px; } .card-price{ text-align:right; display:flex; align-items:baseline; gap:6px; } .currency{ font-weight:700; color:#071037; font-size:18px; opacity:0.9; } .price-amount{ font-weight:800; font-size:34px; color:#071037; display:inline-block; min-width:46px; text-align:left; } .price-period{ font-weight:600; color:var(--muted); font-size:14px; margin-left:4px; } /* Recommended accent */ .recommended{ background: linear-gradient(180deg,#fff, #fcfdff); border: 2px solid rgba(52,72,197,0.12); } .recommended::before{ content: "Most popular"; position: absolute; top: -14px; left: 18px; background: linear-gradient(90deg,var(--brand),var(--accent)); color:#fff; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; box-shadow: 0 10px 30px rgba(52,72,197,0.10); } /* special day pass style */ .card-daily{ border-left: 4px solid rgba(52,72,197,0.06); } .card-daily .price-amount{ color: var(--brand); } .card-monthly .price-amount{ color: #071037; } .card-bonus .card-top{ align-items:center; } .card-bonus .badge-hero{ display:inline-block; background: linear-gradient(90deg,var(--brand),var(--accent)); color:#fff; padding:6px 10px; border-radius:999px; font-weight:700; } /* Body content */ .card-body{ margin-top:12px; } .card-blurb{ margin:0 0 12px; color:#0f1a3b; font-weight:600; } .card-features{ list-style:none; padding:0; margin:0 0 12px; color:#0f1a3b; } .card-features li{ padding:8px 0; border-bottom: 1px dashed rgba(12,22,59,0.04); font-size:14px; } /* Footnote inside card */ .card-foot{ color:var(--muted); font-size:13px; margin-top:8px; } /* SINGLE Learn more button — Cloudinary-style pill */ .card-actions{ display:flex; gap:12px; margin-top:16px; align-items:center; } /* Primary pill button (single CTA style) */ .btn-learn{ display:inline-block; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size:16px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing: 0.02em; color: #fff !important; text-decoration:none !important; padding:15px 50px !important; /* large pill padding per the snippet */ border-radius:32px; /* pill radius */ background: linear-gradient(90deg, var(--cta-blue), var(--cta-blue-2)); border: none; box-shadow: 0 12px 30px rgba(13,154,255,0.18), 0 4px 10px rgba(12,22,59,0.06); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color: transparent; cursor:pointer; } /* Button hover / active */ .btn-learn:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px rgba(13,154,255,0.20); opacity:0.98; } .btn-learn:active{ transform: translateY(-1px); opacity:0.95; } .btn-learn:focus{ outline: 3px solid rgba(61,95,255,0.14); outline-offset:4px; } /* Small devices tweak to avoid overflow */ @media(max-width:520px){ .btn-learn{ padding:12px 28px !important; font-size:14px !important; border-radius:26px; } .price-amount{ font-size:28px; } .pricing-section{ padding:36px 16px; } .pricing-grid{ gap:14px; } .pricing-card{ padding:16px; } }