/* ========================================================================== Baseview · v4 public-page design system + global chrome refresh File: /assets/css/v4.css (loads AFTER site.css on every page) - Chrome overrides (.site-header, header CTA, drawer tweaks, new .bv-ft footer) apply everywhere. - Marketing components are bv- prefixed so they can never collide with site.css classes on legacy pages (account, manager, guides, legal, product views keep their current styling). - Pages opt into the full look with (set $use_v4 = true before including header.php). ========================================================================== */ /* ------------------------------- 0) Tokens ------------------------------- */ :root{ --bv-brand:#0b5fff; --bv-brand-ink:#0849c9; --bv-brand-100:#e7eeff; --bv-brand-50:#f2f6ff; --bv-ink:#0c1a2e; --bv-body:#44536a; --bv-muted:#6b7a92; --bv-paper:#faf9f6; --bv-line:#e8e5de; --bv-line-strong:#d8d4c9; --bv-night:#081736; --bv-night-text:#a9b9d8; --bv-night-line:rgba(255,255,255,.13); --bv-up:#0e7a3d; --bv-up-bg:#e8f5ed; --bv-warn:#b45309; --bv-warn-bg:#fdf3e4; --bv-r:14px; --bv-r-lg:22px; --bv-shadow-sm:0 1px 2px rgba(12,26,46,.05), 0 2px 8px rgba(12,26,46,.04); --bv-shadow-md:0 2px 6px rgba(12,26,46,.06), 0 14px 34px rgba(12,26,46,.09); --bv-shadow-lg:0 6px 18px rgba(12,26,46,.08), 0 30px 70px rgba(12,26,46,.14); --bv-font-display:'Fraunces', Georgia, 'Times New Roman', serif; --bv-font-body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; } /* Global type refresh (subtle: Inter everywhere, incl. legacy pages) */ body{ font-family:var(--bv-font-body); -webkit-font-smoothing:antialiased; } /* v4 pages: warm paper canvas + body ink */ body.v4{ background:var(--bv-paper); color:var(--bv-body); line-height:1.65; } body.v4 ::selection{ background:var(--bv-brand); color:#fff; } /* ------------------------------- 1) Header chrome (global) ------------------------------- */ .site-header{ position:sticky; top:0; z-index:40; background:rgba(250,249,246,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--bv-line); transition:box-shadow .25s ease; } .site-header.bv-scrolled{ box-shadow:0 4px 24px rgba(12,26,46,.07); } .site-header .bar{ height:64px; } .nav a{ padding:9px 14px; border-radius:999px; font-size:15px; font-weight:500; color:var(--bv-body); } .nav a:hover{ color:var(--bv-ink); background:rgba(12,26,46,.05); } .nav a.is-active{ color:var(--bv-brand-ink); font-weight:700; text-decoration:none; background:var(--bv-brand-50); } .site-header .get-started, .site-header .get-started.btn.primary{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; padding:10.5px 22px; border-radius:999px; border:1px solid transparent; background:var(--bv-brand); color:#fff; font-size:14.5px; font-weight:600; line-height:1.2; box-shadow:0 2px 10px rgba(11,95,255,.28); transition:transform .18s ease, box-shadow .18s ease, background .18s ease; } .site-header .get-started:hover{ background:var(--bv-brand-ink); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(11,95,255,.34); } .hamburger-btn{ border-radius:12px; border-color:var(--bv-line); background:#fff; } /* ------------------------------- 2) Drawer tweaks (keeps the blue slide-in look from site.css) ------------------------------- */ /* Manager group: sub-links on desktop, a single Overview link on mobile. (.drawer-nav a selectors in site.css need matching specificity here.) */ .drawer-nav a.drawer-mgr-solo{ display:none; } @media (max-width:900px){ .drawer-mgr{ display:none !important; } .drawer-nav a.drawer-mgr-solo{ display:flex; } } /* ------------------------------- 3) Footer (global, navy) — markup lives in includes/footer.php ------------------------------- */ .bv-ft{ background:var(--bv-night); color:var(--bv-night-text); font-family:var(--bv-font-body); } .bv-ft a{ color:var(--bv-night-text); text-decoration:none; transition:color .15s ease; } .bv-ft a:hover{ color:#fff; text-decoration:none; } .bv-ft .bv-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4.5vw,48px); } .bv-ft-grid{ display:grid; gap:36px; padding:clamp(48px,6vw,72px) 0 40px; grid-template-columns:1fr 1fr; } @media (min-width:860px){ .bv-ft-grid{ grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:28px; } } .bv-ft-brand{ grid-column:1 / -1; } @media (min-width:860px){ .bv-ft-brand{ grid-column:auto; } } .bv-ft-brand .bv-ft-logo{ height:26px; width:auto; color:#fff; margin-bottom:16px; display:block; } .bv-ft-brand p{ font-size:14.5px; max-width:30ch; line-height:1.6; margin:0; } .bv-ft h4{ font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#7d90b5; margin:0 0 16px; } .bv-ft ul{ list-style:none; display:grid; gap:10px; font-size:14.5px; margin:0; padding:0; } .bv-ft-bottom{ border-top:1px solid var(--bv-night-line); padding:22px 0; font-size:13px; color:#7d90b5; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; } /* ========================================================================== v4 page components (bv- prefixed; used by the rebuilt public pages) ========================================================================== */ /* ---------- Layout ---------- */ .bv-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4.5vw,48px); } .bv-wrap.bv-narrow{ max-width:820px; } .bv-sec{ padding:clamp(64px,8.5vw,108px) 0; } .bv-sec.tight{ padding:clamp(44px,6vw,72px) 0; } .bv-sec.tint{ background:linear-gradient(180deg,#f4f6fb,var(--bv-paper)); border-top:1px solid var(--bv-line); border-bottom:1px solid var(--bv-line); } .bv-sec.night{ background:var(--bv-night); color:var(--bv-night-text); position:relative; overflow:hidden; } .bv-sec.night::before{ content:""; position:absolute; inset:-40% -20% auto -20%; height:120%; background:radial-gradient(46% 60% at 50% 0%, rgba(11,95,255,.28), transparent 70%); pointer-events:none; } .bv-sec.night > .bv-wrap{ position:relative; } .bv-center{ text-align:center; } /* ---------- Type ---------- */ .bv-eyebrow{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bv-brand); margin:0 0 14px; } .night .bv-eyebrow, .bv-eyebrow.on-dark{ color:#7ea6ff; } .bv-h1{ font-family:var(--bv-font-display); font-weight:600; margin:0; font-size:clamp(36px,5.4vw,60px); line-height:1.06; letter-spacing:-.015em; color:var(--bv-ink); text-wrap:balance; } .bv-h2{ font-family:var(--bv-font-display); font-weight:600; margin:0; font-size:clamp(27px,3.4vw,40px); line-height:1.12; letter-spacing:-.012em; color:var(--bv-ink); text-wrap:balance; } .bv-h3{ font-size:19px; font-weight:700; color:var(--bv-ink); line-height:1.35; margin:0; } .night .bv-h1, .night .bv-h2{ color:#fff; } .bv-lead{ font-size:clamp(17px,1.6vw,19px); line-height:1.68; color:var(--bv-body); max-width:56ch; margin:0; } .bv-sub{ font-size:16.5px; color:var(--bv-muted); max-width:62ch; margin:0; } .bv-center .bv-lead, .bv-center .bv-sub{ margin-left:auto; margin-right:auto; } .bv-sechead{ max-width:760px; margin:0 0 clamp(36px,4.5vw,56px); } .bv-sechead.bv-center{ margin-left:auto; margin-right:auto; } .bv-sechead .bv-h2{ margin-bottom:14px; } .bv-muted{ color:var(--bv-muted); } /* ---------- Buttons ---------- */ .bv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 26px; border-radius:999px; border:1px solid transparent; font-size:15.5px; font-weight:600; line-height:1.2; text-decoration:none; cursor:pointer; white-space:nowrap; font-family:var(--bv-font-body); transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } a.bv-btn:hover{ text-decoration:none; } .bv-btn:focus-visible{ outline:3px solid rgba(11,95,255,.4); outline-offset:2px; } .bv-btn.primary{ background:var(--bv-brand); color:#fff; box-shadow:0 2px 10px rgba(11,95,255,.28); } .bv-btn.primary:hover{ background:var(--bv-brand-ink); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(11,95,255,.34); } .bv-btn.ghost{ background:transparent; color:var(--bv-ink); border-color:var(--bv-line-strong); } .bv-btn.ghost:hover{ border-color:var(--bv-ink); color:var(--bv-ink); transform:translateY(-1px); } .bv-btn.ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); } .bv-btn.ghost-dark:hover{ border-color:#fff; color:#fff; transform:translateY(-1px); } .bv-btn.white{ background:#fff; color:var(--bv-brand-ink); } .bv-btn.white:hover{ color:var(--bv-brand-ink); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.25); } .bv-btn.xl{ padding:16px 32px; font-size:16.5px; } .bv-btn.block{ width:100%; } .bv-btn .bv-arrow{ transition:transform .18s ease; } .bv-btn:hover .bv-arrow{ transform:translateX(3px); } .bv-ctarow{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:30px; } .bv-ctarow.bv-center{ justify-content:center; } /* ---------- Hero ---------- */ .bv-hero{ position:relative; overflow:hidden; padding:clamp(56px,7vw,96px) 0 clamp(60px,7.5vw,104px); } .bv-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(52% 46% at 78% 6%, rgba(11,95,255,.075), transparent 70%), radial-gradient(40% 42% at 8% 90%, rgba(11,95,255,.05), transparent 70%); } .bv-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image: linear-gradient(to right, rgba(12,26,46,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(12,26,46,.035) 1px, transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(72% 64% at 50% 30%, #000 30%, transparent 100%); mask-image:radial-gradient(72% 64% at 50% 30%, #000 30%, transparent 100%); } .bv-hero > .bv-wrap{ position:relative; } .bv-herogrid{ display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,72px); align-items:center; } @media (min-width:980px){ .bv-herogrid{ grid-template-columns:1.02fr .98fr; } } .bv-hero .bv-h1{ margin-bottom:22px; } .bv-hero .bv-lead{ margin-bottom:6px; } /* trust chips */ .bv-chips{ display:flex; flex-wrap:wrap; gap:9px 18px; list-style:none; margin:26px 0 0; padding:0; } .bv-chips li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--bv-muted); } .bv-chips svg{ width:17px; height:17px; color:var(--bv-up); flex-shrink:0; } /* industry strip */ .bv-industries{ border-top:1px solid var(--bv-line); padding:22px 0; } .bv-industries .row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:10px 14px; font-size:13.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#9aa6b8; } .bv-industries .row .lbl{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--bv-muted); font-size:14px; margin-right:8px; } .bv-industries .row i{ font-style:normal; color:#c9cfd9; } /* ---------- Product preview window ---------- */ .bv-stage{ position:relative; } .bv-win{ background:#fff; border:1px solid var(--bv-line); border-radius:18px; box-shadow:var(--bv-shadow-lg); overflow:hidden; } .bv-winbar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:#f6f7fa; border-bottom:1px solid var(--bv-line); } .bv-winbar i{ width:10px; height:10px; border-radius:50%; background:#e0e2e8; } .bv-winbar i:first-child{ background:#f0c6c1; } .bv-winbar i:nth-child(2){ background:#efdcb2; } .bv-winbar i:nth-child(3){ background:#bfdec7; } .bv-winbar span{ margin-left:8px; font-size:12.5px; font-weight:600; color:var(--bv-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bv-winbody{ padding:18px 18px 16px; } .bv-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .bv-kpi{ border:1px solid var(--bv-line); border-radius:12px; padding:12px 14px; background:#fcfcfd; } .bv-kpi .lbl{ font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--bv-muted); } .bv-kpi .val{ font-family:var(--bv-font-display); font-size:clamp(19px,2vw,24px); font-weight:600; color:var(--bv-ink); margin-top:2px; line-height:1.15; } .bv-kpi .delta{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; font-size:11.5px; font-weight:700; padding:2.5px 8px; border-radius:999px; } .bv-kpi .delta.up{ color:var(--bv-up); background:var(--bv-up-bg); } .bv-kpi .delta.warn{ color:var(--bv-warn); background:var(--bv-warn-bg); } .bv-chartcard{ margin-top:12px; border:1px solid var(--bv-line); border-radius:12px; padding:14px 14px 8px; } .bv-chartcard .ct{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:12.5px; font-weight:600; color:var(--bv-muted); margin-bottom:6px; } .bv-chartcard .ct b{ color:var(--bv-ink); font-weight:700; } .bv-chartcard svg{ width:100%; height:auto; display:block; } .bv-advisornote{ margin-top:12px; display:flex; gap:12px; align-items:flex-start; background:var(--bv-brand-50); border:1px solid #dbe6ff; border-radius:12px; padding:13px 15px; } .bv-advisornote svg{ width:20px; height:20px; color:var(--bv-brand); flex-shrink:0; margin-top:2px; } .bv-advisornote p{ font-size:13.5px; line-height:1.55; color:#33415a; margin:0; } .bv-advisornote strong{ color:var(--bv-ink); } /* floating flag card over the window */ .bv-floatcard{ position:absolute; right:-14px; bottom:-22px; z-index:2; background:#fff; border:1px solid var(--bv-line); border-radius:14px; box-shadow:var(--bv-shadow-md); padding:12px 16px 12px 13px; display:flex; gap:11px; align-items:flex-start; max-width:270px; } .bv-floatcard .dot{ width:34px; height:34px; border-radius:10px; background:var(--bv-warn-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .bv-floatcard .dot svg{ width:18px; height:18px; color:var(--bv-warn); } .bv-floatcard .dot.good{ background:var(--bv-up-bg); } .bv-floatcard .dot.good svg{ color:var(--bv-up); } .bv-floatcard b{ display:block; font-size:13px; color:var(--bv-ink); line-height:1.35; } .bv-floatcard span{ font-size:12px; color:var(--bv-muted); line-height:1.45; display:block; margin-top:2px; } @media (max-width:979px){ .bv-floatcard{ right:6px; bottom:-18px; } } /* ---------- Cards ---------- */ .bv-grid{ display:grid; gap:18px; } .bv-grid.c2{ grid-template-columns:1fr; } .bv-grid.c3{ grid-template-columns:1fr; } @media (min-width:660px){ .bv-grid.c3{ grid-template-columns:1fr 1fr; } .bv-grid.c2{ grid-template-columns:1fr 1fr; } } @media (min-width:980px){ .bv-grid.c3{ grid-template-columns:repeat(3,1fr); } } .bv-card{ background:#fff; border:1px solid var(--bv-line); border-radius:var(--bv-r-lg); padding:28px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .bv-card:hover{ transform:translateY(-3px); box-shadow:var(--bv-shadow-md); border-color:var(--bv-line-strong); } .bv-card .bv-h3{ margin:0 0 8px; } .bv-card p{ font-size:15px; color:var(--bv-body); margin:0; } .bv-card p + p{ margin-top:10px; } .bv-card .q{ font-family:var(--bv-font-display); font-weight:600; font-size:20px; color:var(--bv-ink); margin:0 0 8px; letter-spacing:-.01em; } .bv-ico{ width:46px; height:46px; border-radius:13px; background:var(--bv-brand-100); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .bv-ico svg{ width:23px; height:23px; color:var(--bv-brand-ink); } /* ---------- Steps (night band) ---------- */ .bv-steps{ display:grid; gap:16px; grid-template-columns:1fr; } @media (min-width:820px){ .bv-steps{ grid-template-columns:repeat(3,1fr); gap:20px; } } .bv-step{ position:relative; border:1px solid var(--bv-night-line); border-radius:var(--bv-r-lg); background:rgba(255,255,255,.04); padding:28px 26px; } .bv-step .n{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bv-brand); color:#fff; font-weight:800; font-size:16px; margin-bottom:18px; box-shadow:0 0 0 6px rgba(11,95,255,.18); } .bv-step h3{ font-size:18px; font-weight:700; color:#fff; margin:0 0 8px; } .bv-step p{ font-size:15px; color:var(--bv-night-text); margin:0; } .bv-step .tag{ display:inline-block; margin-top:14px; font-size:12px; font-weight:700; color:#8fb1ff; letter-spacing:.06em; text-transform:uppercase; } /* ---------- Checklist ---------- */ .bv-checks{ list-style:none; display:grid; gap:12px; margin:0; padding:0; } .bv-checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; } .bv-checks svg{ width:21px; height:21px; flex-shrink:0; color:var(--bv-up); margin-top:2px; } .bv-checks strong{ color:var(--bv-ink); } /* ---------- TOC (inside the dashboard) ---------- */ .bv-toc{ list-style:none; display:grid; gap:6px; grid-template-columns:1fr; margin:0; padding:0; } @media (min-width:760px){ .bv-toc{ grid-template-columns:1fr 1fr; gap:6px 36px; } } .bv-toc li{ display:flex; gap:14px; align-items:baseline; padding:11px 12px; border-radius:12px; transition:background .15s ease; } .bv-toc li:hover{ background:var(--bv-brand-50); } .bv-toc .num{ font-family:var(--bv-font-display); font-weight:600; font-size:15px; color:var(--bv-brand); min-width:26px; text-align:right; flex-shrink:0; } .bv-toc b{ color:var(--bv-ink); font-weight:650; } .bv-toc li > span:last-child span{ color:var(--bv-muted); font-size:14.5px; } /* ---------- Chat (ask anything) ---------- */ .bv-chat{ display:grid; gap:14px; max-width:640px; } .bv-chat .q, .bv-chat .a{ padding:14px 18px; border-radius:16px; font-size:15px; line-height:1.55; max-width:85%; } .bv-chat .q{ justify-self:end; background:var(--bv-brand); color:#fff; border-bottom-right-radius:5px; font-weight:500; box-shadow:0 2px 10px rgba(11,95,255,.22); } .bv-chat .a{ justify-self:start; background:#fff; border:1px solid var(--bv-line); color:var(--bv-body); border-bottom-left-radius:5px; box-shadow:var(--bv-shadow-sm); } .bv-chat .a strong{ color:var(--bv-ink); } /* ---------- Packets ---------- */ .bv-packet{ position:relative; padding-top:34px; } .bv-packet .doc{ position:relative; background:#fff; border:1px solid var(--bv-line); border-radius:14px; box-shadow:var(--bv-shadow-sm); padding:20px; } .bv-packet .doc::before{ content:""; position:absolute; inset:-9px 10px auto 10px; height:100%; z-index:-1; background:#fff; border:1px solid var(--bv-line); border-radius:14px; opacity:.7; } .bv-packet .doc .dl{ height:8px; border-radius:4px; background:#edeef2; margin-top:9px; } .bv-packet .doc .dl.w60{ width:60%; } .bv-packet .doc .dl.w80{ width:80%; } .bv-packet .doc .dl.w45{ width:45%; } .bv-packet .doc .dh{ display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--bv-line); } .bv-packet .doc .dh svg{ width:20px; height:20px; color:var(--bv-brand); } .bv-packet .doc .dh b{ font-size:14px; color:var(--bv-ink); } .bv-packet p{ font-size:15px; margin:0; } /* ---------- Guarantee band ---------- */ .bv-assure{ border:1px solid #dbe6ff; background:linear-gradient(135deg,var(--bv-brand-50),#fff 70%); border-radius:var(--bv-r-lg); padding:clamp(28px,4vw,44px); display:flex; gap:24px; align-items:center; flex-wrap:wrap; } .bv-assure.plain{ background:#fff; } .bv-assure .badge{ width:72px; height:72px; border-radius:50%; flex-shrink:0; background:#fff; border:1px solid #dbe6ff; box-shadow:var(--bv-shadow-sm); display:flex; align-items:center; justify-content:center; } .bv-assure .badge svg{ width:34px; height:34px; color:var(--bv-brand); } .bv-assure h3{ font-family:var(--bv-font-display); font-weight:600; font-size:clamp(20px,2.4vw,26px); color:var(--bv-ink); margin:0 0 6px; letter-spacing:-.01em; } .bv-assure p{ color:var(--bv-body); max-width:56ch; margin:0; } .bv-assure > div{ flex:1; min-width:260px; } /* ---------- Pricing ---------- */ .bv-price{ max-width:600px; margin:0 auto; background:#fff; border:1px solid var(--bv-line); border-radius:var(--bv-r-lg); box-shadow:var(--bv-shadow-md); overflow:hidden; } .bv-price .top{ padding:32px 34px 26px; border-bottom:1px solid var(--bv-line); text-align:center; } .bv-price .big{ font-family:var(--bv-font-display); font-weight:600; font-size:clamp(28px,3.4vw,38px); color:var(--bv-ink); letter-spacing:-.01em; } .bv-price .note{ color:var(--bv-muted); margin-top:8px; font-size:15px; } .bv-price .body{ padding:28px 34px 34px; } .bv-price .bv-checks{ margin-bottom:26px; } /* Live pricing block (render_price_block output) inside v4 panels */ .v4 .price-block{ margin:6px 0 14px; } .v4 .price-block .price-above{ font-family:var(--bv-font-display); font-weight:600; font-size:26px; color:var(--bv-ink); } .v4 .price-block .price-note{ color:var(--bv-muted); font-size:14px; margin-top:4px; } /* ---------- FAQ ---------- */ .bv-faq{ max-width:760px; margin:0 auto; display:grid; gap:10px; } .bv-faq details{ background:#fff; border:1px solid var(--bv-line); border-radius:16px; transition:box-shadow .2s ease; } .bv-faq details[open]{ box-shadow:var(--bv-shadow-sm); border-color:var(--bv-line-strong); } .bv-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center; padding:18px 22px; font-weight:600; font-size:16px; color:var(--bv-ink); } .bv-faq summary::-webkit-details-marker{ display:none; } .bv-faq summary .pm{ width:26px; height:26px; border-radius:50%; border:1px solid var(--bv-line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; position:relative; transition:transform .25s ease, background .25s ease, border-color .25s ease; } .bv-faq summary .pm::before, .bv-faq summary .pm::after{ content:""; position:absolute; background:var(--bv-ink); border-radius:2px; transition:background .2s ease; } .bv-faq summary .pm::before{ width:11px; height:1.8px; } .bv-faq summary .pm::after{ width:1.8px; height:11px; } .bv-faq details[open] summary .pm{ transform:rotate(45deg); background:var(--bv-brand); border-color:var(--bv-brand); } .bv-faq details[open] summary .pm::before, .bv-faq details[open] summary .pm::after{ background:#fff; } .bv-faq details p{ padding:0 22px 20px; color:var(--bv-body); font-size:15.5px; max-width:64ch; margin:0; } /* ---------- Split ---------- */ .bv-split{ display:grid; gap:clamp(32px,5vw,64px); grid-template-columns:1fr; align-items:center; } @media (min-width:940px){ .bv-split{ grid-template-columns:1.05fr .95fr; } } /* ---------- Panel ---------- */ .bv-panel{ background:#fff; border:1px solid var(--bv-line); border-radius:var(--bv-r-lg); padding:clamp(24px,3.4vw,40px); box-shadow:var(--bv-shadow-sm); } .bv-panel .rows .row{ padding:13px 0; border-top:1px solid var(--bv-line); display:grid; gap:2px; } .bv-panel .rows .row:first-child{ border-top:none; padding-top:0; } .bv-panel .rows .row b{ color:var(--bv-ink); font-size:15.5px; } .bv-panel .rows .row span{ color:var(--bv-muted); font-size:14px; } /* ---------- CTA band ---------- */ .bv-ctaband{ background:linear-gradient(140deg,#0a2f8c 0%, var(--bv-brand) 55%, #2f7bff 100%); color:#fff; position:relative; overflow:hidden; } .bv-ctaband::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background:radial-gradient(50% 80% at 85% 10%, rgba(255,255,255,.25), transparent 65%); } .bv-ctaband .bv-wrap{ position:relative; } .bv-ctaband .bv-h2{ color:#fff; } .bv-ctaband p{ color:rgba(255,255,255,.85); max-width:56ch; margin:14px auto 0; } /* ---------- Stats row ---------- */ .bv-stats{ display:grid; gap:14px; grid-template-columns:1fr 1fr; } @media (min-width:820px){ .bv-stats{ grid-template-columns:repeat(4,1fr); } } .bv-stat{ border:1px solid var(--bv-line); border-radius:16px; background:#fff; padding:22px 20px; } .bv-stat .v{ font-family:var(--bv-font-display); font-weight:600; font-size:clamp(24px,2.6vw,32px); color:var(--bv-ink); letter-spacing:-.01em; } .bv-stat .l{ font-size:13.5px; color:var(--bv-muted); margin-top:4px; line-height:1.45; } /* ---------- Forms ---------- */ .bv-field{ display:grid; gap:6px; } .bv-field label{ font-weight:600; font-size:14px; color:var(--bv-ink); margin:0; } .bv-field .hint{ font-size:12.5px; color:var(--bv-muted); margin-top:2px; } .bv-field input, .bv-field select, .bv-field textarea{ width:100%; padding:13px 15px; border:1px solid var(--bv-line-strong); border-radius:12px; background:#fff; font:inherit; font-size:15.5px; color:var(--bv-ink); outline:none; transition:border-color .15s ease, box-shadow .15s ease; } .bv-field input::placeholder, .bv-field textarea::placeholder{ color:#a3adbd; } .bv-field input:focus, .bv-field select:focus, .bv-field textarea:focus{ border-color:var(--bv-brand); box-shadow:0 0 0 4px rgba(11,95,255,.13); } .bv-field input[readonly]{ background:#f4f5f8; color:var(--bv-muted); cursor:not-allowed; } .bv-field textarea{ min-height:120px; resize:vertical; line-height:1.55; } .bv-req{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--bv-brand-ink); background:var(--bv-brand-100); border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:middle; } .bv-fgrid{ display:grid; gap:18px; grid-template-columns:1fr; } @media (min-width:640px){ .bv-fgrid.two{ grid-template-columns:1fr 1fr; } } /* selectable choice cards (radio) */ .bv-choice{ display:flex; gap:13px; align-items:flex-start; padding:16px 17px; cursor:pointer; border:1px solid var(--bv-line-strong); border-radius:14px; background:#fff; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; font-weight:400; } .bv-choice:hover{ border-color:#b9c6e4; } .bv-choice.sel{ border-color:var(--bv-brand); box-shadow:0 0 0 4px rgba(11,95,255,.12); background:var(--bv-brand-50); } .bv-choice input{ margin-top:4px; accent-color:var(--bv-brand); width:16px; height:16px; flex-shrink:0; } .bv-choice b{ color:var(--bv-ink); font-size:15.5px; } .bv-choice .d{ display:block; color:var(--bv-muted); font-size:13.5px; margin-top:2px; line-height:1.5; } /* checkbox pills (multi-select) */ .bv-pills{ display:flex; flex-wrap:wrap; gap:9px; } .bv-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; cursor:pointer; border:1px solid var(--bv-line-strong); border-radius:999px; background:#fff; font-size:14px; font-weight:500; color:var(--bv-ink); transition:border-color .15s ease, background .15s ease, box-shadow .15s ease; } .bv-pill input{ position:absolute; opacity:0; pointer-events:none; } .bv-pill.sel{ border-color:var(--bv-brand); background:var(--bv-brand-50); color:var(--bv-brand-ink); font-weight:600; box-shadow:0 0 0 3px rgba(11,95,255,.1); } /* ---------- Wizard (Growth Guide form) ---------- */ .bv-wizgrid{ display:grid; gap:26px; grid-template-columns:1fr; align-items:start; } @media (min-width:960px){ .bv-wizgrid{ grid-template-columns:290px 1fr; } } .bv-rail{ position:static; } @media (min-width:960px){ .bv-rail{ position:sticky; top:124px; } } /* clears header + hub bar */ .bv-prog{ list-style:none; display:grid; gap:2px; margin:14px 0 0; padding:0; } .bv-prog li{ display:flex; gap:13px; align-items:center; padding:10px 10px; border-radius:12px; color:var(--bv-muted); font-size:14.5px; font-weight:500; } .bv-prog li .dot{ width:28px; height:28px; border-radius:50%; border:2px solid var(--bv-line-strong); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:800; color:var(--bv-muted); background:#fff; transition:all .25s ease; } .bv-prog li.on{ color:var(--bv-ink); font-weight:700; background:var(--bv-brand-50); } .bv-prog li.on .dot{ border-color:var(--bv-brand); background:var(--bv-brand); color:#fff; } .bv-prog li.done{ color:var(--bv-ink); } .bv-prog li.done .dot{ border-color:var(--bv-up); background:var(--bv-up); color:#fff; } .bv-railnote{ margin-top:18px; padding-top:18px; border-top:1px solid var(--bv-line); display:flex; gap:11px; align-items:flex-start; } .bv-railnote svg{ width:21px; height:21px; color:var(--bv-brand); flex-shrink:0; margin-top:1px; } .bv-railnote p{ font-size:13.5px; color:var(--bv-muted); line-height:1.55; margin:0; } /* mobile stepper */ .bv-stepper{ display:flex; align-items:center; gap:12px; margin-bottom:20px; } @media (min-width:960px){ .bv-stepper{ display:none; } } .bv-stepper .bar{ flex:1; height:6px; border-radius:3px; background:var(--bv-brand-100); overflow:hidden; } .bv-stepper .bar i{ display:block; height:100%; width:25%; background:var(--bv-brand); border-radius:3px; transition:width .35s ease; } .bv-stepper .txt{ font-size:13px; font-weight:700; color:var(--bv-ink); white-space:nowrap; } .bv-wstep{ display:none; } .bv-wstep.on{ display:block; animation:bvwfade .35s ease; } @keyframes bvwfade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} } .bv-wstep h2{ font-family:var(--bv-font-display); font-weight:600; font-size:24px; color:var(--bv-ink); margin:0 0 6px; letter-spacing:-.01em; } .bv-wstep .sh{ color:var(--bv-muted); font-size:15px; margin:0 0 24px; } .bv-wnav{ display:flex; gap:12px; align-items:center; margin-top:30px; flex-wrap:wrap; } .bv-wnav .spacer{ flex:1; } .bv-wnav .note{ font-size:13px; color:var(--bv-muted); width:100%; margin-top:4px; } /* success block */ .bv-success{ text-align:center; padding:clamp(30px,5vw,56px) 20px; display:none; } .bv-success.show{ display:block; animation:bvwfade .4s ease; } .bv-success .ok{ width:64px; height:64px; border-radius:50%; margin:0 auto 20px; background:var(--bv-up-bg); display:flex; align-items:center; justify-content:center; } .bv-success .ok svg{ width:30px; height:30px; color:var(--bv-up); } .bv-success h3{ font-family:var(--bv-font-display); font-weight:600; font-size:26px; color:var(--bv-ink); margin:0 0 10px; } .bv-success p{ color:var(--bv-body); max-width:46ch; margin:0 auto; } /* error alert */ .bv-alert-err{ margin-top:14px; padding:12px 16px; border-radius:12px; font-size:14.5px; background:#fdeeee; border:1px solid #f2c4c4; color:#8f1f1f; } /* ---------- Timeline (start page) ---------- */ .bv-timeline{ max-width:640px; margin:0 auto; display:grid; gap:0; } .bv-tl{ display:flex; gap:20px; position:relative; padding-bottom:34px; } .bv-tl:last-child{ padding-bottom:0; } .bv-tl::before{ content:""; position:absolute; left:19px; top:44px; bottom:4px; width:2px; background:var(--bv-night-line); } .bv-tl:last-child::before{ display:none; } .bv-tl .n{ width:40px; height:40px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bv-brand); color:#fff; font-weight:800; box-shadow:0 0 0 6px rgba(11,95,255,.18); } .bv-tl h3{ font-size:17.5px; font-weight:700; color:#fff; margin:8px 0 6px; } .bv-tl p{ color:var(--bv-night-text); font-size:15px; max-width:52ch; margin:0; } .bv-tl .when{ display:inline-block; margin-left:10px; font-size:12px; font-weight:700; color:#8fb1ff; letter-spacing:.05em; text-transform:uppercase; } /* ---------- Start page email card ---------- */ .bv-startcard{ max-width:560px; margin:36px auto 0; background:#fff; border:1px solid var(--bv-line); border-radius:var(--bv-r-lg); box-shadow:var(--bv-shadow-md); padding:clamp(24px,3.6vw,36px); text-align:left; } .bv-startcard .frow{ display:flex; gap:10px; flex-wrap:wrap; } .bv-startcard .frow .bv-field{ flex:1; min-width:220px; } .bv-startcard .frow .bv-btn{ flex-shrink:0; } .bv-startcard .fine{ font-size:13px; color:var(--bv-muted); margin:14px 0 0; line-height:1.55; } /* ---------- Prose + pull quote (about) ---------- */ .bv-prose p{ font-size:17px; line-height:1.75; color:var(--bv-body); margin:0 0 20px; max-width:66ch; } .bv-prose p strong{ color:var(--bv-ink); } .bv-pull{ border-left:3px solid var(--bv-brand); padding:6px 0 6px 26px; margin:34px 0; } .bv-pull p{ font-family:var(--bv-font-display); font-weight:500; font-size:clamp(21px,2.6vw,27px); line-height:1.4; color:var(--bv-ink); letter-spacing:-.01em; margin:0; } /* ---------- Contact aside ---------- */ .bv-contactgrid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:start; } @media (min-width:920px){ .bv-contactgrid{ grid-template-columns:1.35fr .9fr; } } .bv-expect .it{ display:flex; gap:13px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--bv-line); } .bv-expect .it:first-of-type{ border-top:none; padding-top:4px; } .bv-expect .it svg{ width:22px; height:22px; color:var(--bv-brand); flex-shrink:0; margin-top:2px; } .bv-expect .it b{ display:block; color:var(--bv-ink); font-size:15.5px; } .bv-expect .it span{ color:var(--bv-muted); font-size:14px; line-height:1.55; } /* ---------- Mobile sticky CTA ---------- */ .bv-mcta{ position:fixed; left:0; right:0; bottom:0; z-index:38; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--bv-line); padding:11px 16px calc(11px + env(safe-area-inset-bottom)); display:flex; gap:12px; align-items:center; justify-content:space-between; transform:translateY(110%); transition:transform .35s cubic-bezier(.3,.8,.3,1); } .bv-mcta.show{ transform:none; } .bv-mcta .t{ font-size:13px; font-weight:700; color:var(--bv-ink); line-height:1.3; } .bv-mcta .t span{ display:block; font-size:11.5px; font-weight:500; color:var(--bv-muted); } .bv-mcta .bv-btn{ padding:11px 20px; font-size:14px; flex-shrink:0; } @media (min-width:760px){ .bv-mcta{ display:none; } } /* keep the scroll-to-top button clear of the mobile CTA bar */ @media (max-width:759px){ body.v4 .site-scroll-top{ bottom:76px; } } /* ---------- Reveal on scroll ---------- */ [data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.65,.3,1), transform .7s cubic-bezier(.2,.65,.3,1); } [data-reveal].in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } } /* no-JS safety: if v4.js never runs, everything stays visible */ html:not(.bv-js) [data-reveal]{ opacity:1; transform:none; } /* ---------- Utility ---------- */ .bv-mt16{ margin-top:16px; } .bv-mt24{ margin-top:24px; } .bv-mt32{ margin-top:32px; }