AnuragJangid18
6c756ac7ba
- Introduced a new pricing page with mode-specific pricing options. - Updated meal card data attributes and descriptions for clarity. - Enhanced meal card interactions to navigate to the pricing page. - Removed toast notifications for a cleaner user experience. - Added pricing styles for better layout and responsiveness.
17 lines
1.5 KiB
CSS
17 lines
1.5 KiB
CSS
.pricing-page{max-width:1180px;margin:0 auto;padding:54px 50px 120px}
|
|
.back-link{color:var(--muted);font:500 11px "DM Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
|
|
.back-link:hover{color:var(--lime)}
|
|
.pricing-intro{padding:90px 0 70px;max-width:700px}
|
|
.pricing-intro h1{font-size:clamp(64px,10vw,140px);line-height:.88;letter-spacing:-.08em;margin:18px 0 28px}
|
|
.pricing-intro>p:last-child{color:var(--muted);font-size:18px;max-width:460px}
|
|
.pricing-grid h2{font:500 12px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:18px}
|
|
.pricing-options{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
|
|
.price-card{min-height:310px;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,transform .25s}
|
|
.price-card:hover{border-color:var(--lime);transform:translateY(-5px)}
|
|
.price-index{color:var(--lime);font:500 11px "DM Mono",monospace}
|
|
.price-card h3{font-size:25px;line-height:1.05;max-width:180px;margin:28px 0 8px}
|
|
.price-card p:last-child{color:var(--muted);font:12px "DM Mono",monospace}
|
|
.price-card strong{font-size:40px;letter-spacing:-.05em;margin:28px 0}
|
|
.price-card strong span{color:var(--muted);font:12px "DM Mono",monospace;letter-spacing:0;margin-left:8px}
|
|
.price-card .button{align-self:flex-start}
|
|
@media(max-width:760px){.pricing-page{padding:38px 20px 80px}.pricing-intro{padding:70px 0 52px}.pricing-options{grid-template-columns:1fr}.price-card{min-height:260px}}
|