/* ══════════════════════════════════════════════════════════════════ pulse-demo.css — membership + admin components for the demo set. Layered ON TOP of twin.css (Twin v2 design system: cream/forest/ochre tokens, accents, Fraunces/Lato/JetBrains Mono, 2px buttons, .wsHeader, .btn, .eyebrow, .lede, .muted, main.wide). Provides the member-area + admin components NOT in the funnel twin, plus the few base classes the twin renders inline but doesn't expose (.qcard/.field/.explain). British English. Load order in : fonts → twin.css → pulse-demo.css ══════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@500;700&display=swap'); /* Extras twin.css doesn't name (its cream/forest/ochre/line/berry/cyan/ tier tokens are inherited from twin.css :root). */ :root{ --berry:#8B2783; /* align to twin */ --teal:var(--teal-ink); /* twin names it --teal-ink */ --amber:#E9A84C; /* twin tier-3 amber */ --lime:#9FB04F; /* Brand Pack v1.0 canonical lime (Team/Profile primary, T1 evidence flag) — corrected from off-brand #2D7D3E */ --ok:#2D7D3E; --warn:#E9A84C; --bad:#b3261e; } /* Base classes the funnel twin renders inline but doesn't expose as CSS. */ .qcard{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px 24px;box-shadow:var(--shadow-md,0 12px 34px rgba(31,58,43,.09))} .qcard__kicker{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0 0 10px} .field{margin:0 0 16px} .field label{display:block;font-size:.85rem;font-weight:700;color:var(--forest-ink);margin:0 0 6px} .field input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;font-family:inherit;font-size:1rem;color:var(--charcoal);background:var(--white)} .field input:focus{outline:none;border-color:var(--ochre)} .formNote{font-size:.85rem;color:var(--muted-ink);margin:4px 0 0} .errline{color:var(--bad);font-size:.9rem;margin:12px 0 0;min-height:1.2em} .explain{margin:20px 0 0;padding:16px 18px;background:var(--cream-2);border-left:3px solid var(--ochre);border-radius:0 8px 8px 0;font-size:.94rem;color:var(--charcoal);line-height:1.6} .explain__h{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-mid);margin:0 0 8px} .center{text-align:center} /* ── Demo chrome ─────────────────────────────────────────── */ .demoRibbon{background:#15281d;color:var(--cream-paper);font-family:'JetBrains Mono',monospace; font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:7px 14px} .demoRibbon strong{color:var(--ochre-light)} .wide{max-width:var(--maxw-wide)} main.wide{max-width:var(--maxw-wide)} /* ── Demo hub ────────────────────────────────────────────── */ .hubGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:28px 0 0} .hubCard{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:12px;padding:22px;text-decoration:none;color:inherit; box-shadow:0 10px 30px rgba(31,58,43,.05);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease} .hubCard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(31,58,43,.12);border-color:var(--forest-mid)} .hubCard__phase{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--ochre);margin:0 0 10px} .hubCard__title{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.2rem;color:var(--forest-ink);margin:0 0 8px;line-height:1.2} .hubCard__desc{font-size:.9rem;color:var(--charcoal);margin:0 0 14px;line-height:1.5;flex:1} .hubCard__go{font-size:.82rem;font-weight:700;color:var(--forest-mid)} .hubGroup{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-ink);margin:34px 0 0;padding:0 0 4px;border-bottom:1px solid var(--line)} /* ── 4-tier pricing ──────────────────────────────────────── */ .priceGrid--4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 0} .tier{position:relative} .tier__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%); font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase; background:var(--forest-mid);color:#fff;padding:4px 12px;border-radius:99px;white-space:nowrap} .tier__quota{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;color:var(--forest-ink);font-weight:600;margin:0 0 2px} .tier__quotaSub{font-size:.78rem;color:var(--muted-ink);margin:0 0 14px} .tier__seats{font-size:.84rem;color:var(--forest-mid);font-weight:700;margin:0 0 12px} .tier--sales{background:linear-gradient(165deg,var(--forest-ink),#15281d);color:var(--cream-paper)} .tier--sales .tier__name{color:var(--amber)} .tier--sales .tier__price,.tier--sales .tier__quota{color:#fff} .tier--sales .tier__desc,.tier--sales .tier__quotaSub,.tier--sales .tier__per{color:rgba(246,242,233,.78)} .tier--sales .tier__seats{color:var(--amber)} .tier--sales .tier__feats li{color:rgba(246,242,233,.92)} .tier--sales .tier__feats li::before{color:var(--amber)} .tier--sales .btn--secondary{color:#fff;border-color:rgba(246,242,233,.5)} .tier--sales .btn--secondary:hover{background:#fff;color:var(--forest-ink)} @media (max-width:920px){.priceGrid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.priceGrid--4{grid-template-columns:1fr}} /* ── Segmented control (billing mode, tabs of two) ───────── */ .segToggle{display:inline-flex;background:var(--cream-2);border:1px solid var(--line);border-radius:8px;padding:3px;gap:3px} .segToggle button{appearance:none;border:0;background:transparent;font-family:inherit;font-size:.86rem;font-weight:700; color:var(--muted-ink);padding:8px 16px;border-radius:6px;cursor:pointer;transition:background .12s ease,color .12s ease} .segToggle button[aria-pressed="true"]{background:var(--white);color:var(--forest-ink);box-shadow:0 1px 3px rgba(31,58,43,.12)} /* ── Seat stepper ────────────────────────────────────────── */ .stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:8px;overflow:hidden} .stepper button{appearance:none;border:0;background:var(--cream-paper);width:42px;height:42px;min-height:44px;font-size:1.3rem; color:var(--forest-ink);cursor:pointer;line-height:1} .stepper button:hover{background:var(--cream-2)} .stepper input{width:56px;height:42px;min-height:44px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line); text-align:center;font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--forest-ink);background:var(--white)} .stepCap{font-size:.8rem;color:var(--muted-ink);margin-left:10px} .stepCap--over{color:var(--bad);font-weight:700} /* ── Voucher ─────────────────────────────────────────────── */ .voucher{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;padding:14px 16px; background:#f3f8f1;border:1px solid #cfe3cf;border-radius:8px} .voucher__code{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.9rem;letter-spacing:.04em; color:var(--lime);background:var(--white);border:1px dashed #9fc89f;border-radius:6px;padding:6px 12px} .voucher__txt{font-size:.86rem;color:var(--charcoal)} .voucher__txt strong{color:var(--lime)} /* ── Member roster (onboarding) ──────────────────────────── */ .roster{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:18px 0 0;background:var(--white)} .rosterRow{display:grid;grid-template-columns:1.6fr 1.4fr auto;gap:14px;align-items:center; padding:14px 18px;border-top:1px solid var(--line)} .rosterRow:first-child{border-top:0} .rosterRow--head{background:var(--cream-2);font-family:'JetBrains Mono',monospace;font-size:.62rem; letter-spacing:.12em;text-transform:uppercase;color:var(--muted-ink)} .rosterRow__who strong{display:block;color:var(--forest-ink);font-size:.96rem} .rosterRow__who span{font-size:.82rem;color:var(--muted-ink)} .rosterRow select{padding:8px 10px;border:1.5px solid var(--line);border-radius:6px;font-family:inherit; font-size:.86rem;color:var(--charcoal);background:var(--white)} .tagPill{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:99px;font-weight:700} .tagPill--central{background:#e7efe9;color:var(--forest-mid)} .tagPill--individual{background:#f3ecf6;color:var(--berry)} .tagPill--leader{background:#fbf0df;color:var(--ochre)} @media (max-width:600px){.rosterRow{grid-template-columns:1fr;gap:8px}.rosterRow--head{display:none}} /* ── Dashboard quota ─────────────────────────────────────── */ .quotaCard{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:26px; box-shadow:0 10px 30px rgba(31,58,43,.05);display:flex;gap:26px;align-items:center;flex-wrap:wrap} .quotaRing{--p:0;--c:var(--forest-mid);width:124px;height:124px;border-radius:50%;flex:0 0 auto; background:conic-gradient(var(--c) calc(var(--p)*1%),var(--cream-2) 0);display:flex;align-items:center;justify-content:center} .quotaRing__inner{width:96px;height:96px;border-radius:50%;background:var(--white);display:flex;flex-direction:column; align-items:center;justify-content:center} .quotaRing__n{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--forest-ink);line-height:1} .quotaRing__l{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-ink);margin-top:3px} .quotaCard__body{flex:1;min-width:240px} .quotaCard__tier{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin:0 0 6px} .quotaCard h3{margin:0 0 8px;font-size:1.25rem} .quotaCard p{margin:0 0 6px;font-size:.92rem;color:var(--charcoal)} .miniCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 0} .miniCard{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:16px 18px} .miniCard__n{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:600;color:var(--forest-ink);line-height:1;margin:0 0 4px} .miniCard__l{font-size:.82rem;color:var(--muted-ink);margin:0} /* ── Checkout summary ────────────────────────────────────── */ .coGrid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:26px 0 0;align-items:start} .summary{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:24px;position:sticky;top:20px} .summary h3{margin:0 0 16px;font-size:1.1rem} .sumRow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px dashed var(--line);font-size:.92rem} .sumRow:first-of-type{border-top:0} .sumRow--total{border-top:2px solid var(--forest-ink);margin-top:6px;padding-top:14px;font-weight:700;font-size:1.05rem;color:var(--forest-ink)} .sumRow--save{color:var(--lime);font-weight:700} .sumMuted{color:var(--muted-ink)} @media (max-width:760px){.coGrid{grid-template-columns:1fr}.summary{position:static}} /* ── Admin shell ─────────────────────────────────────────── */ .adminTop{background:var(--forest-ink);color:var(--cream-paper);padding:16px 24px;border-bottom:3px solid var(--ochre)} .adminTop__inner{max-width:var(--maxw-wide);margin:0 auto;display:flex;align-items:center;gap:14px} .adminTop__logo{font-weight:900;font-size:1.1rem;color:#fff} .adminTop__tag{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-light);margin-left:auto} .tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 22px} .tabs button{appearance:none;border:0;background:transparent;font-family:inherit;font-size:.9rem;font-weight:700; color:var(--muted-ink);padding:12px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px} .tabs button[aria-selected="true"]{color:var(--forest-ink);border-bottom-color:var(--ochre)} .tabs button .tabBadge{display:inline-block;margin-left:7px;background:var(--ochre);color:#fff;font-family:'JetBrains Mono',monospace; font-size:.6rem;font-weight:700;padding:1px 7px;border-radius:99px;vertical-align:middle} .tabPanel[hidden]{display:none} /* tiles */ .tileRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:0 0 24px} .tile{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:18px 20px} .tile__n{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:600;color:var(--forest-ink);line-height:1;margin:0 0 4px} .tile__l{font-size:.8rem;color:var(--muted-ink);margin:0} .tile__sub{font-size:.74rem;color:var(--forest-mid);margin:6px 0 0;font-weight:700} /* tables */ .maTable{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:.9rem} .maTable th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted-ink);font-weight:700;padding:12px 16px;background:var(--cream-2);border-bottom:1px solid var(--line)} .maTable td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--charcoal);vertical-align:middle} .maTable tr:last-child td{border-bottom:0} .maTable tr:hover td{background:#fcfaf4} .maTable strong{color:var(--forest-ink)} .maTable .num{font-family:'JetBrains Mono',monospace;text-align:right} .tableWrap{overflow-x:auto} /* pills */ .pill{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:4px 9px;border-radius:99px;white-space:nowrap} .pill--pending{background:#fbf0df;color:var(--ochre)} .pill--approved{background:#e7efe9;color:var(--forest-mid)} .pill--active{background:#e7efe9;color:var(--forest-mid)} .pill--expired{background:#efe7e7;color:#9a6a6a} .pill--revoked{background:#efe7e7;color:var(--bad)} .pill--central{background:#e7efe9;color:var(--forest-mid)} .pill--individual{background:#f3ecf6;color:var(--berry)} /* leaderboard */ .leader{display:flex;flex-direction:column;gap:2px} .leaderRow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line)} .leaderRow:last-child{border-bottom:0} .leaderRank{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:600;color:var(--muted-ink);width:26px;text-align:center} .leaderWho strong{display:block;color:var(--forest-ink)} .leaderWho span{font-size:.8rem;color:var(--muted-ink)} .leaderBar{height:8px;background:var(--cream-2);border-radius:99px;overflow:hidden;margin:6px 0 0} .leaderBar > i{display:block;height:100%;background:var(--forest-mid);border-radius:99px} .leaderVal{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--forest-ink);text-align:right} .leaderVal span{display:block;font-size:.72rem;color:var(--muted-ink);font-weight:500} /* modal */ .modalBack{position:fixed;inset:0;background:rgba(21,40,29,.55);display:flex;align-items:flex-start;justify-content:center; padding:40px 16px;overflow:auto;z-index:50} .modalBack[hidden]{display:none} .modal{background:var(--cream-paper);border-radius:12px;max-width:540px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden} .modal__head{background:var(--forest-ink);color:#fff;padding:18px 24px} .modal__head h3{color:#fff;margin:0;font-size:1.2rem} .modal__head p{margin:4px 0 0;font-size:.84rem;color:rgba(246,242,233,.8)} .modal__body{padding:22px 24px} .modal__row{margin:0 0 16px} .modal__row label{display:block;font-size:.82rem;font-weight:700;color:var(--forest-ink);margin:0 0 6px} .modal__row input,.modal__row select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:6px;font-family:inherit;font-size:.94rem;background:var(--white);color:var(--charcoal)} .modal__two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--line);background:var(--cream-2)} .fieldNote{font-size:.78rem;color:var(--muted-ink);margin:5px 0 0} /* misc admin */ .sectionHead{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;flex-wrap:wrap} .sectionHead h2{font-size:1.3rem;margin:0} .btn--sm{padding:8px 14px;font-size:.84rem} .btn--berry{background:var(--berry);color:#fff;border-color:var(--berry)} .btn--berry:hover{background:#7d3a9c} .tinybtn{appearance:none;border:1px solid var(--line);background:var(--white);border-radius:6px;padding:5px 10px; font-family:inherit;font-size:.78rem;font-weight:700;color:var(--forest-mid);cursor:pointer} .tinybtn:hover{border-color:var(--forest-mid)} .tinybtn--danger{color:var(--bad)} .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--forest-ink);color:#fff; padding:12px 20px;border-radius:8px;font-size:.9rem;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:60;opacity:0;transition:opacity .2s ease} .toast.show{opacity:1}