/* Dark + glossy (glass) pricing theme */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); :root{ --ink:#ffffff; --muted:rgba(255,255,255,.70); --card:rgba(255,255,255,.04); --stroke:rgba(255,255,255,.12); --shadow:0 16px 34px rgba(0,0,0,.24); /* Button colors */ --blue:rgba(55,150,255,.25); --blueLine:rgba(90,170,255,.55); --accent:#ff7a18; --accent2:#ff9a3d; } .pricingv2{ padding:28px 0 60px; /* The main site background gradient is already applied on (home.css). Keeping a second gradient here creates a "box" effect (looks like another background sitting on top) and a visible border/seam on the sides. So we keep this wrapper transparent and let the body background show. */ background: transparent; color:var(--ink); font-family:'Montserrat', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; min-height: 100vh; } .pricingv2__top{text-align:center;max-width:860px;margin:0 auto 18px;} .accent{color:var(--accent);} .pricingv2__title{margin:14px 0 6px;font-size:42px;letter-spacing:-.02em;} .pricingv2__sub{margin:0;color:var(--muted);} /* Media slider (images + mp4) */ .mediaHero__full{ /* keep slider aligned with the pricing cards block (not full-bleed) */ width:100%; max-width:1120px; margin-left:auto; margin-right:auto; padding:0; margin-top:18px; margin-bottom:26px; } .mediaHero{ position:relative; width:100%; border-radius:26px; overflow:hidden; background:rgba(230,230,230,.85); border:1px solid rgba(255,255,255,.22); box-shadow:0 22px 60px rgba(0,0,0,.35); /* Responsive fixed ratio so mobile doesn't crop and desktop stays clean. Slider assets: 1920x720 (8:3). */ aspect-ratio: 8 / 3; height: auto; } .mediaHero::after{ content:""; position:absolute; inset:0; pointer-events:none; background-color:#0c0c0c; background-image: linear-gradient(to bottom, #284672, #293656, #23283c, #1a1a24, #0c0c0c); } .mediaHero__slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; } .mediaHero__slide.is-active{opacity:1;} .mediaHero__media{ width:100%; height:100%; /* IMPORTANT: show full image/video on all screens (no cropping) */ object-fit:contain; background:rgba(0,0,0,.18); display:block; } .mediaHero__empty{ position:relative; z-index:1; min-height:260px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; color:#111; } .mediaHero__emptyTitle{font-weight:900;font-size:34px;} .mediaHero__emptySub{margin-top:8px;font-weight:800;opacity:.85;max-width:860px;} .mediaHero__emptySub code{background:rgba(0,0,0,.08);padding:2px 8px;border-radius:999px;} @media(min-width:900px){ /* cap the hero height a bit so it doesn't get too tall on very large screens */ .mediaHero{max-height:440px;} } @media(max-width:520px){ .mediaHero{border-radius:20px;} } /* NOTE: old package slider styles kept for backwards compatibility (not used now) */ .slider{position:relative;margin:22px auto 26px;max-width:980px;} .slider__track{display:flex;gap:14px;overflow:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 6px 16px;scrollbar-width:none;} .slider__track::-webkit-scrollbar{display:none;} .slide{flex:0 0 100%;scroll-snap-align:center;display:flex;justify-content:center;} .slide__card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);padding:18px 18px 16px;min-height:360px;display:flex;flex-direction:column;width:min(720px, 100%);} .slide.is-active .slide__card{border-color:var(--blueLine);background:rgba(55,150,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.22);} .slide__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;} .slide__kicker{font-weight:900;letter-spacing:.03em;} .slide__price{font-weight:900;font-size:20px;white-space:nowrap;} .badge{display:inline-flex;margin-top:6px;border:1px solid var(--stroke);border-radius:999px;padding:4px 10px;font-weight:900;font-size:12px;background:var(--card);} .feat{list-style:none;padding:0;margin:0;display:grid;gap:8px;} .feat__item{display:flex;gap:10px;align-items:flex-start;} .feat__icon{width:22px;height:22px;border:1px solid var(--stroke);border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 22px;} .feat__icon.is-ok{color:#22c55e;} .feat__icon.is-no{color:#ef4444;} .feat__text{color:var(--ink);} .usecase{margin-top:12px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.22);color:var(--muted);} .meta{color:var(--ink);font-weight:800;} .meta__line{margin:2px 0;} .bullets{margin:10px 0 0 18px;} .note{margin-top:10px;color:rgba(245,247,255,.60);font-size:13px;} .slide__cta{margin-top:auto;padding-top:14px;display:flex;justify-content:center;} .btn2{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--stroke);border-radius:14px;padding:11px 18px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;text-decoration:none;min-width:190px;transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;box-shadow:0 12px 26px rgba(0,0,0,.45), 0 8px 18px rgba(255,122,24,.12);} .btn2:hover{transform:translateY(-1px);filter:saturate(1.05) brightness(1.02);} .btn2--active{filter:saturate(1.05) brightness(1.06);} .slider__nav{position:absolute;top:50%;transform:translateY(-50%);border:1px solid var(--stroke);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;border-radius:14px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1;box-shadow:0 14px 34px rgba(0,0,0,.45), 0 10px 20px rgba(255,122,24,.12);} .slider__nav--prev{left:-8px;} .slider__nav--next{right:-8px;} @media(max-width:820px){ .slider__nav{display:none;} } .dots{display:flex;gap:8px;justify-content:center;margin-top:8px;} .dotbtn{width:10px;height:10px;border-radius:999px;border:2px solid rgba(255,255,255,.35);background:transparent;opacity:.55;} .dotbtn.is-active{opacity:1;background:var(--accent);border-color:var(--accent);} /* Cards grid */ .cards{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;max-width:1120px;margin:0 auto;} @media(max-width:719px){ /* Mobile: a bit more breathing room between stacked package cards */ .cards{gap:22px;} } @media(min-width:720px){.cards{grid-template-columns:repeat(2,1fr);}} @media(min-width:1024px){ .cards{grid-template-columns:repeat(4,1fr);} .cards .cardpkg:nth-child(5){grid-column:2;} .cards .cardpkg:nth-child(6){grid-column:3;} } .cardpkg{position:relative;background:var(--card);border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;cursor:pointer;transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;} /* subtle glossy highlight */ .cardpkg::before{ content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:.0; background:radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.16), transparent 55%); transition:opacity .14s ease; } .cardpkg:hover{ transform:scale(1.02); border-color:rgba(255,255,255,.22); box-shadow:0 22px 60px rgba(0,0,0,.38); } .cardpkg:hover::before{opacity:1;} .cardpkg.is-active{border-color:var(--blueLine);background:rgba(55,150,255,.08);box-shadow:0 12px 30px rgba(0,0,0,.22);} .cardpkg__head{padding-top:6px;margin-bottom:8px;} .cardpkg__title{font-weight:900;font-size:14px;letter-spacing:.04em;display:flex;flex-wrap:wrap;gap:8px;align-items:center;text-transform:uppercase;color:rgba(245,247,255,.88);margin:0;} .dot{font-weight:900;} .tinybadge{font-weight:900;} .cardpkg__price{margin-top:10px;color:#fff;font-weight:900;font-size:34px;line-height:1.05;letter-spacing:-.02em;} /* "MOST POPULAR" ribbon badge (like the provided mock) */ .cardpkg.has-popular .cardpkg__head{padding-top:34px;} .popularbadge{ position:absolute; top:12px; /* keep it inside the card so it won't collide with the row above */ left:50%; transform:translateX(-50%); padding:6px 16px; font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; /* Orange pill (as before) */ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#111; border:1px solid rgba(255,122,24,.85); box-shadow:0 14px 34px rgba(0,0,0,.35), 0 10px 18px rgba(255,122,24,.22); /* angled ends like a ribbon */ display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; line-height: 1; white-space: nowrap; z-index: 5; pointer-events:none; } .mini{list-style:none;padding:0;margin:0;display:grid;gap:6px;} .mini li{display:flex;gap:8px;align-items:flex-start;} .mini__icon{width:18px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 18px;font-size:12px;line-height:1;} .mini__icon.is-ok{color:#22c55e;background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.35);} .mini__icon.is-no{color:#ef4444;background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.30);} .cardpkg__use{margin-top:10px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.22);font-size:12px;color:var(--muted);} .cardpkg__cta{margin-top:auto;padding-top:12px;display:flex;justify-content:center;} .notice{margin-top:18px;text-align:center;color:rgba(245,247,255,.65);} .notice a{font-weight:800;} /* Single plan picker */ .singlepick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;} .singleopt{display:block;} .singleopt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;} .singleopt__box{display:flex;flex-direction:column;gap:6px;padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;min-height:76px;justify-content:center;} .singleopt__title{font-weight:900;font-size:14px;line-height:1.15;} .singleopt__meta{font-weight:900;font-size:12px;color:rgba(245,247,255,.70);} .singleopt__box:hover{transform:translateY(-1px);} .singleopt input:checked + .singleopt__box{border-color:rgba(255,122,24,.85);box-shadow:0 0 0 4px rgba(255,122,24,.14);} @media(max-width:520px){ /* Even on small phones, keep the 4 option cards readable */ .singleopt__box{min-height:84px;} .singleopt__title{font-size:15px;} .singleopt__meta{font-size:13px;} } /* Card CTA buttons: blue by default, orange on selected card */ .cardpkg__cta .btn2{ background:var(--blue); border:1px solid var(--blueLine); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.22); } .cardpkg__cta .btn2:hover{transform:translateY(-1px);} .cardpkg:hover .cardpkg__cta .btn2{ /* On hover the button should turn orange (as before) */ background:linear-gradient(135deg,var(--accent),var(--accent2)); border:1px solid rgba(255,122,24,.85); color:#111; box-shadow:0 14px 34px rgba(0,0,0,.45), 0 10px 20px rgba(255,122,24,.22); } .cardpkg.is-active .cardpkg__cta .btn2{ /* Selected/active plan button stays orange */ background:linear-gradient(135deg,var(--accent),var(--accent2)); border:1px solid rgba(255,122,24,.85); color:#111; } @media (max-width: 1024px){ .cardpkg.has-popular .cardpkg__head{padding-top:40px;} .popularbadge{top:16px;} }