/* ═══════════════════════════════════════════════════════════════════ BeBadge — Platform / Solutions / Industries / Why BeBadge Shares the light tokens from site.css. Each page sets --pg-accent on so the hero glow, eyebrows and chips pick up its colour. ═══════════════════════════════════════════════════════════════════ */ :root{ --pg-accent:#3856B0; } /* ── hero ──────────────────────────────────────────────────────── */ .pg-hero{ position:relative;overflow:hidden;padding:76px 24px 68px;text-align:center; background:linear-gradient(150deg,#FAFBFE 0%,var(--tint) 52%,var(--tint-2) 100%); border-bottom:1px solid var(--tint-line); } .pg-hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 55% 70% at 22% 0%,color-mix(in srgb,var(--pg-accent) 18%,transparent) 0%,transparent 62%), radial-gradient(ellipse 45% 60% at 82% 105%,color-mix(in srgb,var(--pg-accent) 12%,transparent) 0%,transparent 66%); } .pg-hero > *{position:relative} .pg-chip{ display:inline-flex;align-items:center;gap:8px;margin-bottom:20px; padding:7px 16px;border-radius:100px; background:rgba(255,255,255,.85);border:1px solid color-mix(in srgb,var(--pg-accent) 24%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 8px -3px rgba(16,24,40,.14); font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.11em;text-transform:uppercase; color:var(--pg-accent); } .pg-chip i{width:6px;height:6px;border-radius:50%;background:var(--pg-accent);animation:pg-pulse 2.2s ease-in-out infinite} @keyframes pg-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}} .pg-hero h1{ font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);font-weight:800; color:var(--ink);line-height:1.08;letter-spacing:-.032em;max-width:820px;margin:0 auto 18px; } .pg-hero h1 em{font-style:normal;color:var(--pg-accent)} .pg-hero > p{font-size:clamp(1rem,2vw,1.14rem);color:var(--on-tint-soft);max-width:620px;margin:0 auto 32px;line-height:1.7} .pg-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ── section scaffolding ───────────────────────────────────────── */ .pg-sec{padding:76px 24px} .pg-sec-alt{background:var(--offwh);border-top:1px solid var(--g100);border-bottom:1px solid var(--g100)} .pg-sec-tint{background:linear-gradient(165deg,var(--tint) 0%,var(--tint-2) 100%);border-top:1px solid var(--tint-line);border-bottom:1px solid var(--tint-line)} .pg-wrap{max-width:1120px;margin:0 auto} .pg-hd{text-align:center;margin-bottom:48px} .pg-hd-ey{font:700 11px/1 'Inter',system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:color-mix(in srgb,var(--pg-accent) 88%,#000);margin-bottom:12px} .pg-hd h2{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.18;margin:0 0 13px} .pg-hd p{font-size:1rem;color:var(--g500);max-width:600px;margin:0 auto;line-height:1.7} /* ── glossy card grid ──────────────────────────────────────────── */ .pg-grid{display:grid;gap:20px} .pg-grid-2{grid-template-columns:1fr} .pg-grid-3{grid-template-columns:1fr} @media(min-width:620px){.pg-grid-2,.pg-grid-3{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.pg-grid-3{grid-template-columns:repeat(3,1fr)}} .pg-card{ position:relative;overflow:hidden;border-radius:18px;padding:26px; background:linear-gradient(165deg,#fff 0%,#FAFBFE 100%); border:1px solid var(--g100); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(16,24,40,.05); transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s; } .pg-card::after{ /* top sheen line */ content:"";position:absolute;top:0;left:14%;right:14%;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c,var(--pg-accent)) 55%,transparent),transparent); opacity:.7; } .pg-card:hover{ transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,var(--pg-accent)) 30%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 36px -14px color-mix(in srgb,var(--c,var(--pg-accent)) 42%,transparent); } .pg-ico{ width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px; background:linear-gradient(160deg,color-mix(in srgb,var(--c,var(--pg-accent)) 17%,#fff),color-mix(in srgb,var(--c,var(--pg-accent)) 7%,#fff)); border:1px solid color-mix(in srgb,var(--c,var(--pg-accent)) 22%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9); color:var(--c,var(--pg-accent)); } .pg-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .pg-lbl{font:700 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--c,var(--pg-accent)) 88%,#000);margin-bottom:8px} .pg-card h3{font-family:var(--font-display);font-size:1.06rem;font-weight:800;color:var(--ink);letter-spacing:-.018em;line-height:1.32;margin:0 0 8px} .pg-card p{font-size:.9rem;color:var(--g600);line-height:1.72;margin:0} .pg-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .pg-tag{ font:600 11.5px/1 'Inter',system-ui,sans-serif;padding:6px 11px;border-radius:100px; background:color-mix(in srgb,var(--c,var(--pg-accent)) 9%,#fff); border:1px solid color-mix(in srgb,var(--c,var(--pg-accent)) 20%,transparent); color:color-mix(in srgb,var(--c,var(--pg-accent)) 82%,#000); } /* ── split feature row ─────────────────────────────────────────── */ .pg-split{display:grid;gap:34px;align-items:center;margin-bottom:64px} @media(min-width:900px){ .pg-split{grid-template-columns:1fr 1fr;gap:56px} .pg-split.rev > :first-child{order:2} } .pg-split:last-child{margin-bottom:0} .pg-split h3{font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:800;color:var(--ink);letter-spacing:-.024em;line-height:1.22;margin:10px 0 14px} .pg-split > div > p{font-size:1rem;color:var(--g600);line-height:1.75;margin:0 0 20px} .pg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px} .pg-list li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--g700);line-height:1.6} .pg-tick{ flex:0 0 auto;width:21px;height:21px;border-radius:7px;display:grid;place-items:center;margin-top:1px; background:linear-gradient(160deg,color-mix(in srgb,var(--c,var(--pg-accent)) 18%,#fff),color-mix(in srgb,var(--c,var(--pg-accent)) 8%,#fff)); border:1px solid color-mix(in srgb,var(--c,var(--pg-accent)) 24%,transparent); color:var(--c,var(--pg-accent));font-size:11px;font-weight:800; } .pg-panel{ position:relative;overflow:hidden;border-radius:22px;padding:30px; background:linear-gradient(155deg,color-mix(in srgb,var(--c,var(--pg-accent)) 13%,#fff) 0%,color-mix(in srgb,var(--c,var(--pg-accent)) 5%,#fff) 100%); border:1px solid color-mix(in srgb,var(--c,var(--pg-accent)) 22%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -22px color-mix(in srgb,var(--c,var(--pg-accent)) 60%,transparent); } .pg-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .pg-stat{ text-align:center;padding:18px 10px;border-radius:14px; background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9); box-shadow:0 1px 3px rgba(16,24,40,.05); } .pg-sn{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:color-mix(in srgb,var(--c,var(--pg-accent)) 90%,#000);line-height:1} .pg-sl{font-size:11.5px;color:var(--g600);margin-top:5px;font-weight:500} /* ── comparison table ──────────────────────────────────────────── */ .pg-cmp{width:100%;border-collapse:separate;border-spacing:0 8px} .pg-cmp th{padding:13px 18px;font:700 .75rem/1 'Inter',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;border-radius:11px;text-align:left} .pg-cmp th.b{background:#FEE9E9;color:#B42318;border:1px solid rgba(180,35,24,.16)} .pg-cmp th.a{background:#DEF7EC;color:#046C4E;border:1px solid rgba(4,108,78,.16)} .pg-cmp th.m{width:34px;background:none;border:0} .pg-cmp td{padding:14px 18px;font-size:.88rem;border-radius:11px;line-height:1.55} .pg-cmp td.b{background:rgba(255,255,255,.75);color:#912018;border:1px solid rgba(180,35,24,.18)} .pg-cmp td.a{background:rgba(255,255,255,.75);color:#04543C;border:1px solid rgba(4,108,78,.18)} .pg-cmp td.m{text-align:center;background:none} .pg-cmp td.m span{width:7px;height:7px;background:#9AA9C0;border-radius:50%;display:inline-block} @media(max-width:680px){ .pg-cmp,.pg-cmp tbody,.pg-cmp tr,.pg-cmp td{display:block;width:100%} .pg-cmp thead{display:none} .pg-cmp td.m{display:none} .pg-cmp tr{margin-bottom:14px} .pg-cmp td.b{margin-bottom:5px} .pg-cmp td.b::before{content:"Without BeBadge — ";font-weight:700} .pg-cmp td.a::before{content:"With BeBadge — ";font-weight:700} } /* ── closing CTA ───────────────────────────────────────────────── */ .pg-cta{ position:relative;overflow:hidden;padding:74px 24px;text-align:center; background:linear-gradient(125deg,var(--tint) 0%,#F2F5FD 52%,var(--tint-2) 100%); border-top:1px solid var(--tint-line); } .pg-cta::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 50% 100% at 50% 0%,color-mix(in srgb,var(--pg-accent) 14%,transparent),transparent 68%); } .pg-cta > *{position:relative} .pg-cta h2{font-family:var(--font-display);font-size:clamp(1.55rem,3vw,2.25rem);font-weight:800;color:var(--ink);letter-spacing:-.025em;margin:0 0 13px} .pg-cta p{font-size:1rem;color:var(--on-tint-soft);max-width:520px;margin:0 auto 30px;line-height:1.7} /* ── in-page anchor nav ────────────────────────────────────────── */ .pg-jump{ position:sticky;top:74px;z-index:60;display:flex;justify-content:center;flex-wrap:wrap;gap:2px; padding:9px 12px; background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%); border-bottom:1px solid var(--g100);box-shadow:inset 0 1px 0 rgba(255,255,255,.9); } .pg-jump a{ padding:8px 14px;border-radius:100px;font:600 13px/1 'Inter',system-ui,sans-serif; color:var(--g500);transition:color .18s,background .18s;white-space:nowrap; } .pg-jump a:hover{color:var(--pg-accent);background:color-mix(in srgb,var(--pg-accent) 8%,transparent)} @media(max-width:1120px){.pg-jump{top:68px}} @media(max-width:680px){.pg-jump{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}} [id]{scroll-margin-top:130px} @media(prefers-reduced-motion:reduce){.pg-card,.pg-chip i{transition:none;animation:none}}