/* ============================================================ Patent Bar Fidelity — Onboarding & Help Kit pbf-tour.css · drop-in, dependency-free, theme-aware Pairs with pbf-tour.js. Ink + gold, EB Garamond + DM Sans. ============================================================ */ :root{ --pbft-bg:#080d1a; --pbft-card:#121b30; --pbft-card-2:#0e1628; --pbft-raise:#172132; --pbft-line:#1e2d4a; --pbft-line-2:#2a3a58; --pbft-gold:#c8a96e; --pbft-gold-lt:#dabb82; --pbft-gold-dim:#8a7048; --pbft-glow:rgba(200,169,110,.1); --pbft-cream:#f0ece0; --pbft-slate:#9aa3b8; --pbft-mute:#5a6478; --pbft-serif:'DM Serif Display',Georgia,serif; --pbft-gar:'EB Garamond',Georgia,serif; --pbft-sans:'DM Sans',system-ui,sans-serif; --pbft-radius:14px; --pbft-shadow:0 30px 70px -16px rgba(0,0,0,.72); } /* Light (day) theme — set [data-theme="day"] on , matching pbf-theme.js */ [data-theme="day"]{ --pbft-bg:#f2ede4; --pbft-card:#ffffff; --pbft-card-2:#f7f3ea; --pbft-raise:#efe9dc; --pbft-line:rgba(26,20,16,.14); --pbft-line-2:rgba(26,20,16,.22); --pbft-gold:#2a4070; --pbft-gold-lt:#3d5fa0; --pbft-gold-dim:#6f7fa0; --pbft-glow:rgba(42,64,112,.08); --pbft-cream:#1a1410; --pbft-slate:#4a4035; --pbft-mute:#8a7a68; } /* ---- shared overlay ---- */ .pbft-overlay{position:fixed;inset:0;z-index:9000;opacity:0;pointer-events:none;transition:opacity .22s ease;} .pbft-overlay.pbft-on{opacity:1;pointer-events:auto;} .pbft-scrim{position:absolute;inset:0;background:rgba(4,8,18,.72);} [data-theme="day"] .pbft-scrim{background:rgba(60,50,36,.5);} /* ============================================================ 1 · FIRST-RUN PRIMER (centered modal) ============================================================ */ .pbft-primer{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);width:min(440px,92vw); background:var(--pbft-card);border:1px solid var(--pbft-line-2);border-radius:var(--pbft-radius); box-shadow:var(--pbft-shadow);overflow:hidden;opacity:0;transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .28s;} .pbft-overlay.pbft-on .pbft-primer{transform:translate(-50%,-50%);opacity:1;} .pbft-primer__head{padding:30px 30px 6px;text-align:center;} .pbft-primer__mark{height:46px;width:auto;margin-bottom:16px;} .pbft-primer__eyebrow{font-family:var(--pbft-sans);font-size:11px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--pbft-gold);margin-bottom:12px;} .pbft-primer__title{font-family:var(--pbft-serif);font-weight:400;font-size:25px;line-height:1.16; color:var(--pbft-cream);letter-spacing:-.01em;} .pbft-primer__title em{font-style:italic;color:var(--pbft-gold);} .pbft-primer__points{padding:22px 30px 6px;display:flex;flex-direction:column;gap:14px;} .pbft-point{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;text-align:left;} .pbft-point__icn{width:34px;height:34px;border-radius:9px;background:var(--pbft-glow); border:1px solid var(--pbft-gold-dim);color:var(--pbft-gold);display:flex;align-items:center;justify-content:center; font-family:var(--pbft-gar);font-style:italic;font-size:17px;flex-shrink:0;} .pbft-point__t{font-family:var(--pbft-sans);font-size:14px;font-weight:600;color:var(--pbft-cream);margin-bottom:2px;} .pbft-point__b{font-family:var(--pbft-sans);font-size:13px;line-height:1.5;color:var(--pbft-slate);} .pbft-primer__foot{padding:20px 30px 26px;display:flex;flex-direction:column;gap:10px;} .pbft-primer__begin{width:100%;background:var(--pbft-gold);color:var(--pbft-bg);border:none;border-radius:8px; padding:12px;font-family:var(--pbft-sans);font-size:14.5px;font-weight:600;letter-spacing:.02em;cursor:pointer; transition:background .15s,transform .12s;} .pbft-primer__begin:hover{background:var(--pbft-gold-lt);transform:translateY(-1px);} .pbft-primer__skip{background:none;border:none;color:var(--pbft-mute);font-family:var(--pbft-sans);font-size:12.5px; cursor:pointer;padding:4px;transition:color .15s;} .pbft-primer__skip:hover{color:var(--pbft-slate);} /* ============================================================ 2 · COACH-MARK / SPOTLIGHT TOUR ============================================================ */ .pbft-spot{position:absolute;border-radius:10px;pointer-events:none; box-shadow:0 0 0 9999px rgba(4,8,18,.72),0 0 0 2px var(--pbft-gold); transition:all .3s cubic-bezier(.3,.7,.2,1);} [data-theme="day"] .pbft-spot{box-shadow:0 0 0 9999px rgba(60,50,36,.5),0 0 0 2px var(--pbft-gold);} .pbft-spot.pbft-pulse::after{content:'';position:absolute;inset:-2px;border-radius:10px; border:2px solid var(--pbft-gold);animation:pbft-pulse 1.8s ease-out infinite;} @keyframes pbft-pulse{0%{opacity:.7;transform:scale(1);}100%{opacity:0;transform:scale(1.12);}} @media(prefers-reduced-motion:reduce){.pbft-spot{transition:none;}.pbft-spot.pbft-pulse::after{animation:none;}} .pbft-pop{position:absolute;z-index:9100;width:min(312px,90vw);background:var(--pbft-card); border:1px solid var(--pbft-gold-dim);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.5); opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:auto;} .pbft-pop.pbft-show{opacity:1;transform:translateY(0);} .pbft-pop__arrow{position:absolute;width:13px;height:13px;background:var(--pbft-card); border-left:1px solid var(--pbft-gold-dim);border-top:1px solid var(--pbft-gold-dim);} .pbft-pop[data-place="bottom"] .pbft-pop__arrow{top:-7px;left:32px;transform:rotate(45deg);} .pbft-pop[data-place="top"] .pbft-pop__arrow{bottom:-7px;left:32px;transform:rotate(225deg);} .pbft-pop[data-place="right"] .pbft-pop__arrow{left:-7px;top:28px;transform:rotate(-45deg);} .pbft-pop[data-place="left"] .pbft-pop__arrow{right:-7px;top:28px;transform:rotate(135deg);} .pbft-pop[data-place="center"] .pbft-pop__arrow{display:none;} .pbft-pop__head{display:flex;align-items:center;gap:9px;padding:15px 18px 0;} .pbft-pop__icn{width:26px;height:26px;border-radius:7px;background:var(--pbft-glow);color:var(--pbft-gold); display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;} .pbft-pop__step{font-family:var(--pbft-sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pbft-mute);} .pbft-pop__title{font-family:var(--pbft-serif);font-weight:400;font-size:18px;color:var(--pbft-cream); padding:8px 18px 0;line-height:1.2;} .pbft-pop__title em{font-style:italic;color:var(--pbft-gold);} .pbft-pop__body{font-family:var(--pbft-sans);font-size:13px;line-height:1.56;color:var(--pbft-slate);padding:6px 18px 16px;} .pbft-pop__body b{color:var(--pbft-cream);font-weight:600;} .pbft-pop__foot{display:flex;align-items:center;justify-content:space-between;padding:11px 18px; border-top:1px solid var(--pbft-line);background:var(--pbft-card-2);border-radius:0 0 12px 12px;} .pbft-pop__skip{background:none;border:none;color:var(--pbft-mute);font-family:var(--pbft-sans);font-size:12px;cursor:pointer;padding:2px;transition:color .15s;} .pbft-pop__skip:hover{color:var(--pbft-slate);} .pbft-dots{display:flex;gap:5px;} .pbft-dots i{width:6px;height:6px;border-radius:50%;background:var(--pbft-line-2);transition:background .2s;} .pbft-dots i.pbft-dot-on{background:var(--pbft-gold);} .pbft-pop__nav{display:flex;align-items:center;gap:6px;} .pbft-pop__back{background:none;border:none;color:var(--pbft-slate);font-family:var(--pbft-sans);font-size:12px; cursor:pointer;padding:5px 8px;border-radius:5px;transition:color .15s;} .pbft-pop__back:hover{color:var(--pbft-cream);} .pbft-pop__next{font-family:var(--pbft-sans);font-size:12px;font-weight:600;color:var(--pbft-bg); background:var(--pbft-gold);border:none;padding:6px 14px;border-radius:6px;cursor:pointer;transition:background .15s,transform .12s;} .pbft-pop__next:hover{background:var(--pbft-gold-lt);transform:translateY(-1px);} /* ============================================================ 3 · "WHAT'S NEW" / NUDGE BANNER (inline, dismissible) ============================================================ */ .pbft-banner{display:flex;align-items:center;gap:14px;border:1px solid var(--pbft-gold-dim);border-radius:9px; background:linear-gradient(120deg,var(--pbft-glow),rgba(200,169,110,.02));padding:13px 15px; font-family:var(--pbft-sans);animation:pbft-slidein .35s cubic-bezier(.2,.7,.2,1);} [data-theme="day"] .pbft-banner{background:linear-gradient(120deg,var(--pbft-glow),rgba(42,64,112,.02));} @keyframes pbft-slidein{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}} @media(prefers-reduced-motion:reduce){.pbft-banner{animation:none;}} .pbft-banner__icn{width:34px;height:34px;border-radius:8px;background:var(--pbft-glow);color:var(--pbft-gold); display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;} .pbft-banner__txt{flex:1;min-width:0;} .pbft-banner__t{font-size:13.5px;font-weight:600;color:var(--pbft-cream);display:block;margin-bottom:1px;} .pbft-banner__b{font-size:12.5px;color:var(--pbft-slate);line-height:1.45;} .pbft-banner__act{font-size:12px;font-weight:600;color:var(--pbft-bg);background:var(--pbft-gold);border:none; padding:7px 13px;border-radius:5px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s;} .pbft-banner__act:hover{background:var(--pbft-gold-lt);} .pbft-banner__x{background:none;border:none;color:var(--pbft-mute);font-size:17px;line-height:1;cursor:pointer; flex-shrink:0;padding:2px 4px;transition:color .15s;} .pbft-banner__x:hover{color:var(--pbft-slate);} /* ============================================================ 4 · HELP LAUNCHER (persistent "?" FAB) ============================================================ */ .pbft-help{position:fixed;right:22px;bottom:22px;z-index:8000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;} .pbft-help__btn{width:46px;height:46px;border-radius:50%;background:var(--pbft-card);border:1px solid var(--pbft-line-2); color:var(--pbft-gold);font-family:var(--pbft-serif);font-size:22px;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.4); display:flex;align-items:center;justify-content:center;transition:border-color .15s,transform .15s;} .pbft-help__btn:hover{border-color:var(--pbft-gold);transform:translateY(-2px);} .pbft-help__menu{background:var(--pbft-card);border:1px solid var(--pbft-line-2);border-radius:11px; box-shadow:var(--pbft-shadow);overflow:hidden;width:210px;opacity:0;transform:translateY(8px) scale(.97); transform-origin:bottom right;pointer-events:none;transition:opacity .18s,transform .18s;} .pbft-help.pbft-open .pbft-help__menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .pbft-help__item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none; border-bottom:1px solid var(--pbft-line);padding:12px 15px;cursor:pointer;text-align:left; font-family:var(--pbft-sans);font-size:13px;color:var(--pbft-cream);transition:background .14s;} .pbft-help__item:last-child{border-bottom:none;} .pbft-help__item:hover{background:var(--pbft-raise);} .pbft-help__item .pbft-help__gl{width:22px;text-align:center;color:var(--pbft-gold);font-family:var(--pbft-gar);font-style:italic;font-size:15px;flex-shrink:0;} .pbft-help__item small{display:block;font-size:11px;color:var(--pbft-mute);margin-top:1px;}