/* Packages section — category tabs + cards (replaces old per-outlet grid) */ #packages{ --pkg-surface:#ffffff; --pkg-surface2:#f1f3f8; --pkg-ink:#242639; --pkg-ink-dim:#666f83; --pkg-border:#e4e7f0; --pkg-accent:#ffaf00; --pkg-accent-ink:#3a2600; --pkg-cat-main:#f2540b; --pkg-cat-regional:#0fb8a0; --pkg-cat-crypto5:#7c5cff; --pkg-cat-crypto10:#3a63e0; --pkg-radius:16px; } #packages *{box-sizing:border-box;} #packages{ background: radial-gradient(720px 260px at 8% 0%, color-mix(in srgb, var(--pkg-cat-main) 10%, transparent), transparent 70%), radial-gradient(720px 260px at 92% 0%, color-mix(in srgb, var(--pkg-cat-crypto5) 10%, transparent), transparent 70%), radial-gradient(900px 320px at 50% 100%, color-mix(in srgb, var(--pkg-cat-regional) 7%, transparent), transparent 70%); border-radius:24px; padding:8px 8px 0; } /* sticky tab bar, active tab = solid colored pill */ #packages .pkg-tabbar-outer{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); margin:0 0 28px; padding:10px 10px 6px; border-radius:999px; box-shadow:0 8px 24px -12px rgba(20,20,30,.18); } #packages .pkg-tabbar{ position:relative; display:flex; gap:6px; border-bottom:none; overflow-x:auto; scrollbar-width:none; justify-content:center; flex-wrap:wrap; } #packages .pkg-tabbar::-webkit-scrollbar{display:none;} #packages .pkg-tab{ position:relative; font-size:13.5px; font-weight:700; padding:10px 18px; border:none; background:transparent; border-radius:999px; color:var(--pkg-ink-dim); cursor:pointer; white-space:nowrap; display:flex; align-items:center; gap:8px; transition:color .15s ease, background .15s ease; font-family:inherit; } #packages .pkg-tab .pkg-dot{width:8px; height:8px; border-radius:999px; background:var(--dot,var(--pkg-ink-dim));} #packages .pkg-tab.active{color:#fff; background:var(--dot,var(--pkg-ink));} #packages .pkg-tab.active .pkg-dot{background:#fff;} #packages .pkg-tab-indicator{display:none;} #packages .pkg-cat-section{margin-bottom:8px; text-align:left;} #packages .pkg-cat-heading{display:flex; align-items:center; gap:12px; margin:0 0 18px; padding:10px 16px; border-radius:12px; background:color-mix(in srgb, var(--dot) 8%, transparent); border-left:5px solid var(--dot);} #packages .pkg-cat-heading .pkg-bar{display:none;} #packages .pkg-cat-heading h3{font-size:17px; font-weight:900; letter-spacing:.01em; margin:0; color:var(--pkg-ink);} #packages .pkg-cat-heading .pkg-n{font-size:12px; color:#fff; font-weight:800; background:var(--dot); padding:3px 10px; border-radius:999px;} #packages .pkg-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:20px; margin-bottom:48px;} #packages .pkg-card{ position:relative; background:linear-gradient(160deg, color-mix(in srgb, var(--dot) 6%, white) 0%, var(--pkg-surface) 45%); border:1px solid var(--pkg-border); border-radius:var(--pkg-radius); padding:26px 24px 24px; display:flex; flex-direction:column; gap:14px; overflow:hidden; text-align:left; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } #packages .pkg-card::before{content:''; position:absolute; top:0; left:0; right:0; height:6px; background:linear-gradient(90deg, var(--dot), color-mix(in srgb, var(--dot) 40%, white));} #packages .pkg-card:hover{transform:translateY(-5px); box-shadow:0 20px 40px -16px color-mix(in srgb, var(--dot) 45%, rgba(20,20,30,.35)); border-color:var(--dot);} #packages .pkg-badge-row{display:flex; gap:6px; flex-wrap:wrap; min-height:22px;} #packages .pkg-badge{font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:999px; border:none; color:#fff;} #packages .pkg-badge.reach{background:var(--dot);} #packages .pkg-badge.value{background:var(--pkg-accent); color:var(--pkg-accent-ink);} #packages .pkg-card h4{margin:0; font-size:20px; font-weight:900; line-height:1.25; color:var(--pkg-ink);} /* shared with the modal (appended to , outside #packages) — kept unscoped on purpose */ .pkg-price-block{display:flex; align-items:center; gap:4px; font-variant-numeric:tabular-nums;} .pkg-price-block .pkg-amt{ font-size:34px; font-weight:900; letter-spacing:-.02em; color:var(--dot, #e09400); background:color-mix(in srgb, var(--dot, #e09400) 12%, transparent); padding:4px 16px; border-radius:999px; display:inline-block; line-height:1.3; } .pkg-traffic-pill{ align-self:flex-start; font-size:15px; font-weight:800; color:var(--dot, #e09400); background:#f1f3f8; border-radius:999px; padding:5px 14px; font-variant-numeric:tabular-nums; } .pkg-tag{ font-size:13px; font-weight:800; color:var(--dot, #3a2600); background:color-mix(in srgb, var(--dot, #7c5cff) 12%, white); border:1.5px solid color-mix(in srgb, var(--dot, #7c5cff) 40%, transparent); border-radius:8px; padding:6px 12px; letter-spacing:.01em; } .pkg-cta{ font-size:13px; font-weight:800; color:var(--pkg-accent-ink, #3a2600); background:var(--pkg-accent, #ffaf00); border:none; border-radius:999px; padding:10px 20px; cursor:pointer; transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; font-family:inherit; box-shadow:0 6px 16px -4px rgba(255,175,0,.5); } .pkg-cta:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 22px -4px rgba(255,175,0,.6);} .pkg-cta.pkg-cta-added{background:#1a7a3c; color:#fff; box-shadow:0 6px 16px -4px rgba(26,122,60,.5);} #packages .pkg-reach-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;} #packages .pkg-more-btn{ font-size:12px; font-weight:800; color:#fff; background:var(--dot); border:1.5px solid var(--dot); border-radius:8px; padding:5px 11px; cursor:pointer; font-family:inherit; letter-spacing:.01em; } #packages .pkg-more-btn:hover{filter:brightness(1.1);} #packages .pkg-card-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px;} #packages .pkg-per-note{font-size:11px; color:var(--pkg-ink-dim);} #packages .pkg-more-btn:focus-visible, #packages .pkg-tab:focus-visible{outline:2px solid var(--pkg-accent); outline-offset:2px;} .pkg-cta:focus-visible{outline:2px solid #ffaf00; outline-offset:2px;} /* modal overlay (appended to body, not scoped to #packages) */ .pkg-modal-backdrop{position:fixed; inset:0; background:rgba(8,10,14,.6); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px; z-index:2000;} .pkg-modal-backdrop.open{display:flex;} .pkg-modal-card{ background:#fff; border:1px solid #e4e7f0; border-radius:18px; max-width:520px; width:100%; max-height:82vh; overflow:auto; padding:0; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.4); animation:pkg-pop .18s cubic-bezier(.2,.9,.3,1.2); text-align:left; font-family:'Nunito Sans','Open Sans',sans-serif; } @keyframes pkg-pop{ from{transform:scale(.96); opacity:0;} to{transform:scale(1); opacity:1;} } .pkg-modal-head{padding:22px 26px 18px; border-bottom:1px solid #e4e7f0; position:relative;} .pkg-modal-head .pkg-eyebrow2{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin:0 0 6px;} .pkg-modal-head h4{margin:0 0 12px; font-size:20px; font-weight:800; color:#242639;} .pkg-modal-meta{display:flex; gap:8px; flex-wrap:wrap;} .pkg-modal-close{position:absolute; z-index:1; top:16px; right:16px; width:32px; height:32px; border-radius:999px; border:1px solid #e4e7f0; background:#f1f3f8; color:#242639; font-size:16px; cursor:pointer; line-height:1;} .pkg-modal-body{padding:20px 26px 26px;} .pkg-modal-label{font-size:11.5px; font-weight:700; color:#666f83; margin:0 0 12px;} .pkg-modal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;} .pkg-modal-grid .pkg-tag{padding:6px 10px; text-align:center;} .pkg-modal-foot{padding:18px 26px 24px; border-top:1px solid #e4e7f0; display:flex; justify-content:flex-end;} @media (max-width:640px){ #packages .pkg-tabbar{justify-content:flex-start;} }