/* ============================================================
DigiCard — Atelier
------------------------------------------------------------
One typeface throughout: Poppins, for titles, figures, body text
and the logo. A light-gray
ground (#F6F7FA), near-black text (#202020), and one blue accent
(#406FC5) used only where something acts.
Two densities share this one system:
editorial - signed-out pages, public card, member app.
Hairline rules, generous space, serif numerals.
table - admin lists and forms. Same colour and type,
tighter leading, real row separators, sans figures.
Opt in with .dense on a wrapper.
Retheming happens here and nowhere else. The legacy alias block
at the foot of :root is what lets forty-odd views pick up the new
palette without being edited.
============================================================ */
:root{
/* ---- Brand */
--color-primary:#406FC5;
--color-primary-hover:#345DAB;
--color-primary-pressed:#2A4D8F;
--primary-50:#EEF3FB;
--primary-100:#D6E2F5;
--color-secondary:#202020;
--nav-bg:#0D1F3A; /* admin left bar */
--nav-line:rgba(255,255,255,.10);
/* ---- Neutral ramp, warm */
--neutral-0:#FFFFFF;
--neutral-50:#F6F7FA;
--neutral-100:#EEF0F5;
--neutral-200:#E3E6EE;
--neutral-300:#C9CED9;
--neutral-400:#9AA1B0;
--neutral-600:#5E6573;
--neutral-800:#33373F;
--neutral-900:#202020;
/* ---- Semantic */
--color-text-primary:#202020;
--color-text-secondary:#5E6573;
--color-text-inverse:#FFFFFF;
--surface-default:#FFFFFF;
--surface-subtle:#F6F7FA;
--surface-inverse:#202020;
--surface-page:#F6F7FA;
--surface-brand:#F6F7FA;
--border-default:#E3E6EE;
--border-strong:#C9CED9;
--color-error:#C8372D;
--color-error-bg:#FCEDEC;
--color-error-border:#F1C3BF;
--color-success:#2C5545;
--focus-ring:rgba(64,111,197,.35);
/* ---- Spacing, 4px base */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
/* ---- Radius: restrained. Editorial work is not rounded. */
--radius-sm:3px;
--radius-md:6px;
--radius-lg:10px;
--radius-pill:999px;
/* ---- Elevation: warm-tinted, low, used only on things that float */
--elevation-1:0 1px 2px rgba(32,32,32,.05);
--elevation-2:0 6px 16px rgba(32,32,32,.08);
--elevation-3:0 20px 44px rgba(32,32,32,.14);
/* ---- Motion */
--duration-fast:150ms;
--duration-base:200ms;
--ease-out:cubic-bezier(.16,1,.3,1);
/* ---- Type */
--font-display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
--maxw:430px;
/* The 45 degree cut belonged to the old mark. Atelier's motif is the
disc and the hairline rule, so the cut is switched off rather than
hunted down in seven places. */
--cut:0px;
/* ---- Legacy aliases.
Forty-odd views already reference these names. Pointing them at the
design tokens re-skins the whole app without touching a single view. */
--black:var(--color-secondary);
--ink:var(--color-text-primary);
--muted:var(--color-text-secondary);
--faint:var(--neutral-400);
--line:var(--border-default);
--wash:var(--surface-subtle);
--white:var(--neutral-0);
--red:var(--color-primary);
--red-dark:var(--color-primary-hover);
--red-wash:var(--primary-50);
--radius:var(--radius-md);
--shadow:var(--elevation-1);
--f-display:var(--font-display);
--f-body:var(--font-sans);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--font-sans);
font-size:15px;
line-height:1.65;
color:var(--color-text-primary);
background:var(--surface-page);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
@keyframes rx-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ---------------------------------------------- Type
Fraunces is a display face. It sets titles and headline figures and
nothing else - it earns nothing at 12px and costs legibility there. */
h1,h2,h3,h4{margin:0;line-height:1.15;color:var(--color-text-primary)}
h1{font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:-.022em}
h2{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.015em}
h3{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-.005em}
/* A figure that carries a screen: scan counts, totals, prices. */
.figure{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1;font-variant-numeric:lining-nums}
/* Section label. ALL-CAPS is reserved for these and table headers. */
.eyebrow{
margin:0;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-secondary);
}
.muted{color:var(--color-text-secondary)}
.small{font-size:13px;line-height:1.5}
/* ---------------------------------------------- Layout */
/* The card is a single column on a tinted page — it reads as an object
you were handed, not a website that happens to be narrow. */
.shell{
max-width:var(--maxw);margin:0 auto;
background:var(--surface-default);
min-height:100vh;
box-shadow:0 0 24px rgba(20,20,20,.08);
padding:0 var(--space-5) 120px;
}
.wide{max-width:1120px}
.section{padding:var(--space-5) 0;border-top:1px solid var(--border-default)}
.section:first-child{border-top:0}
/* The public card separates blocks with space, never with rules. */
.card-main{display:flex;flex-direction:column;gap:28px;padding:20px 0 0}
.card-main .section{border-top:0;padding:0}
.card-main .section > .eyebrow{margin-bottom:10px}
.row{display:flex;align-items:center;gap:var(--space-3)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.grid{display:grid;gap:var(--space-3)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:640px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ---------------------------------------------- Card header */
.card-head{
position:relative;overflow:hidden;
margin:0 calc(var(--space-5) * -1);
padding:28px var(--space-5) var(--space-5);
border-bottom:1px solid var(--border-default);
background:var(--surface-default);
}
/* The angular device from the logo, at 8% — present, not shouting. */
.card-head::after{
content:"";position:absolute;top:0;right:0;
width:72px;height:72px;background:var(--color-primary);
clip-path:polygon(100% 0,100% 100%,0 0);opacity:.08;
}
.card-head .brand{height:26px;width:auto}
.identity{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-5)}
.avatar{
width:84px;height:84px;object-fit:cover;flex:none;
border-radius:var(--radius-md);border:1px solid var(--border-default);
background:var(--surface-subtle);
}
.avatar-fallback{
width:84px;height:84px;flex:none;display:grid;place-items:center;
border-radius:var(--radius-md);background:var(--color-primary);
color:#fff;font-size:30px;font-weight:700;
}
.identity .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.name{font-size:26px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0}
.role{display:flex;align-items:center;gap:var(--space-2)}
.role .dash{width:18px;height:3px;background:var(--color-primary);flex:none}
.role span{
font-size:13px;font-weight:500;color:var(--color-text-secondary);
letter-spacing:.04em;text-transform:uppercase;
}
.org{font-size:12.5px;color:var(--color-text-secondary);margin-top:2px}
/* ---------------------------------------------- Buttons */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
width:100%;height:52px;padding:0 var(--space-4);
font-family:var(--font-sans);font-size:15px;font-weight:600;
border:1px solid transparent;border-radius:var(--radius-md);
background:none;color:inherit;cursor:pointer;
transition:background var(--duration-fast),border-color var(--duration-fast),
transform var(--duration-fast),box-shadow var(--duration-fast);
}
/* The one place the logo's cut appears on an interactive element. */
.btn-primary{
background:var(--color-primary);color:#fff;border-radius:var(--radius-md);
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary:active{background:var(--color-primary-pressed)}
.btn-dark{background:var(--color-secondary);color:#fff}
.btn-dark:hover{background:#2A2A2A}
.btn-ghost{border-color:var(--border-default);background:var(--surface-default);color:var(--color-text-primary)}
.btn-ghost:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elevation-2)}
.btn-sm{height:40px;font-size:13px;padding:0 var(--space-3)}
.btn-auto{width:auto}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* Call / WhatsApp / Email / LinkedIn */
.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:var(--space-3)}
.action{
display:flex;flex-direction:column;align-items:center;gap:6px;
padding:12px 4px;border:1px solid var(--border-default);
border-radius:var(--radius-md);background:var(--surface-default);
color:var(--color-text-primary);font-size:11.5px;font-weight:500;
transition:border-color var(--duration-fast),transform var(--duration-fast),
box-shadow var(--duration-fast);
}
.action:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--elevation-1)}
.action:active{transform:none}
.action svg{width:20px;height:20px;stroke:var(--color-primary);fill:none;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* ---------------------------------------------- Surfaces */
.panel{
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-default);
}
.panel-pad{padding:var(--space-4)}
.rowlink{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
padding:var(--space-4);border:1px solid var(--border-default);
border-radius:var(--radius-md);background:var(--surface-default);
color:var(--color-text-primary);
transition:transform var(--duration-fast),box-shadow var(--duration-fast);
}
.rowlink:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}
.rowlink + .rowlink{margin-top:10px}
.rowlink .chev{color:var(--neutral-400);font-size:18px;flex:none}
/* A stack of links reads as one object, divided — not as separate cards. */
.list-group{
display:flex;flex-direction:column;
border:1px solid var(--border-default);border-radius:var(--radius-md);
overflow:hidden;
}
.list-group .rowlink{
border:0;border-bottom:1px solid var(--border-default);
border-radius:0;padding:14px var(--space-4);margin:0;
}
.list-group .rowlink:last-child{border-bottom:0}
.list-group .rowlink:hover{transform:none;box-shadow:none;background:var(--surface-subtle)}
.tag{
display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.tag-red{background:var(--primary-50);color:var(--color-primary)}
.tag-dark{background:var(--color-secondary);color:#fff}
.tag-grey{background:var(--neutral-100);color:var(--color-text-secondary)}
.verified{display:inline-flex;align-items:center;gap:5px;
font-size:12px;font-weight:600;color:var(--color-primary)}
.verified svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round}
/* Share this card */
.qr-share{
display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-subtle);
}
.qr-share img{width:92px;height:92px;flex:none;border-radius:var(--radius-sm)}
.qr-share .copy{display:flex;flex-direction:column;gap:4px}
.card-footer{display:flex;justify-content:center;padding-top:var(--space-1)}
.card-footer span{font-size:11px;color:var(--neutral-400);letter-spacing:.06em}
/* ---------------------------------------------- Stats */
.stat{border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4)}
.stat .n{font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1}
.stat .l{font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-secondary);margin-top:6px}
.stat.accent{border-color:var(--color-primary)}
.stat.accent .n{color:var(--color-primary)}
/* ---------------------------------------------- Ask AI */
/* Fades the card out beneath it rather than sitting on a hard edge. */
.chat-launch{
position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:20;
width:100%;max-width:var(--maxw);
padding:var(--space-3) var(--space-4) var(--space-4);
padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
background:linear-gradient(to top,var(--surface-default) 60%,rgba(255,255,255,0));
border:0;cursor:pointer;font-family:var(--font-sans);
}
.chat-launch span.inner{
display:flex;align-items:center;justify-content:center;gap:10px;
width:100%;height:50px;background:var(--color-secondary);color:#fff;
border-radius:var(--radius-md);font-size:14px;font-weight:600;
box-shadow:0 6px 16px rgba(20,20,20,.25);
transition:background var(--duration-fast);
}
.chat-launch:hover span.inner{background:#2A2A2A}
.chat-launch .pulse{
width:8px;height:8px;border-radius:var(--radius-pill);
background:var(--color-primary);flex:none;
animation:rx-pulse 2s ease-in-out infinite;
}
/* Chat as a bottom sheet: it belongs to the card, it doesn't replace it. */
.chat-scrim{position:fixed;inset:0;background:rgba(20,20,20,.55);z-index:30}
.chat-panel{
position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:31;
width:100%;max-width:var(--maxw);height:76dvh;
background:var(--surface-default);
border-radius:var(--radius-lg) var(--radius-lg) 0 0;
display:flex;flex-direction:column;overflow:hidden;
animation:rx-rise var(--duration-base) var(--ease-out);
}
.chat-panel[hidden],.chat-scrim[hidden]{display:none}
.chat-head{
display:flex;align-items:center;gap:10px;
padding:var(--space-4) 16px var(--space-4) 20px;
border-bottom:1px solid var(--border-default);flex:none;
}
/* A flex child defaults to min-width:auto, so a long name refuses to shrink and
shoves the close button off the panel. This is what hid the ✕. */
.chat-head .title{flex:1;min-width:0}
.chat-head .title h3{
font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-head .close{
flex:none;width:36px;height:36px;margin-right:-4px;
display:grid;place-items:center;border:0;cursor:pointer;
background:none;color:var(--color-text-secondary);border-radius:var(--radius-md);
}
.chat-head .close:hover{background:var(--surface-subtle);color:var(--color-text-primary)}
.chat-head .close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
stroke-linecap:round}
.chat-head .dot{width:8px;height:8px;border-radius:var(--radius-pill);
background:var(--color-primary);flex:none}
.chat-body{
flex:1;overflow-y:auto;padding:var(--space-4) 20px;
display:flex;flex-direction:column;gap:var(--space-3);
-webkit-overflow-scrolling:touch;
}
.chat-foot{
display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4);
border-top:1px solid var(--border-default);background:var(--surface-subtle);flex:none;
padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom));
}
.bubble{max-width:85%;padding:10px 14px;font-size:13.5px;line-height:1.5}
.bubble.them{
align-self:flex-start;background:var(--surface-subtle);
border:1px solid var(--border-default);color:var(--color-text-primary);
border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 2px;
}
.bubble.me{
align-self:flex-end;background:var(--color-secondary);color:#fff;
border-radius:var(--radius-md) var(--radius-md) 2px var(--radius-md);
}
.bubble.typing{display:flex;gap:5px;align-items:center;padding:14px}
.bubble.typing i{width:6px;height:6px;border-radius:var(--radius-pill);
background:var(--neutral-400);animation:rx-pulse 1.4s ease-in-out infinite}
.bubble.typing i:nth-child(2){animation-delay:.18s}
.bubble.typing i:nth-child(3){animation-delay:.36s}
.chip-row{display:flex;gap:var(--space-2);overflow-x:auto;
padding:0 20px var(--space-3);scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
flex:none;padding:8px 14px;border:1px solid var(--border-default);
border-radius:var(--radius-pill);background:var(--surface-default);
font-family:var(--font-sans);font-size:13px;white-space:nowrap;cursor:pointer;
transition:border-color var(--duration-fast),background var(--duration-fast);
}
.chip:hover{border-color:var(--border-strong);background:var(--surface-subtle)}
.composer{display:flex;gap:var(--space-2);align-items:flex-end;width:100%}
.composer textarea{
flex:1;resize:none;height:44px;max-height:120px;padding:11px 14px;
border:1px solid var(--border-strong);border-radius:var(--radius-md);
font-family:var(--font-sans);font-size:14px;line-height:1.4;
background:var(--surface-default);color:var(--color-text-primary);
}
.composer textarea:focus{
outline:none;border-color:var(--color-primary);
box-shadow:0 0 0 3px var(--focus-ring);
}
.icon-btn{
width:44px;height:44px;flex:none;display:grid;place-items:center;
border:0;border-radius:var(--radius-md);cursor:pointer;
background:var(--color-primary);color:#fff;
transition:background var(--duration-fast);
}
.icon-btn:hover{background:var(--color-primary-hover)}
.icon-btn.mic{background:var(--surface-default);color:var(--color-text-primary);
border:1px solid var(--border-strong)}
.icon-btn.mic.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.speaking{display:flex;align-items:center;gap:3px;height:16px}
.speaking i{width:2.5px;background:var(--color-primary);animation:eq .9s ease-in-out infinite}
.speaking i:nth-child(1){height:6px;animation-delay:0s}
.speaking i:nth-child(2){height:14px;animation-delay:.12s}
.speaking i:nth-child(3){height:9px;animation-delay:.24s}
.speaking i:nth-child(4){height:15px;animation-delay:.36s}
@keyframes eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* ---------------------------------------------- Forms */
.field{margin-bottom:var(--space-4)}
.field label{
display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:6px;
}
.field input,.field select,.field textarea{
width:100%;padding:11px 14px;height:44px;
border:1px solid var(--border-strong);border-radius:var(--radius-md);
font-family:var(--font-sans);font-size:14px;
background:var(--surface-default);color:var(--color-text-primary);
}
.field textarea{min-height:96px;height:auto;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--color-primary);
box-shadow:0 0 0 3px var(--focus-ring);
}
.field input:disabled{background:var(--surface-subtle);color:var(--color-text-secondary)}
.field .hint{font-size:12.5px;color:var(--color-text-secondary);margin-top:6px}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;
margin-bottom:var(--space-4);cursor:pointer;line-height:1.5}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--color-primary);flex:none}
.error{color:var(--color-primary);font-size:12.5px;margin-top:5px;display:block}
.error-box{
background:var(--color-error-bg);border:1px solid var(--color-error-border);
border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);
font-size:14px;margin-bottom:var(--space-4);
}
/* ---------------------------------------------- QR display */
.qr-stage{
min-height:100vh;display:grid;place-items:center;
background:var(--surface-default);padding:var(--space-5);text-align:center;
}
.qr-stage img{width:min(78vw,340px);height:auto;margin:0 auto}
.qr-stage .name{margin-top:20px}
/* ---------------------------------------------- Empty states */
.empty{
padding:var(--space-7) var(--space-5);text-align:center;
border:1px dashed var(--border-default);border-radius:var(--radius-md);
}
.empty h3{margin-bottom:6px}
.empty p{color:var(--color-text-secondary);font-size:14px;margin:0 0 var(--space-4)}
/* ---------------------------------------------- App chrome */
.appbar{
position:sticky;top:0;z-index:30;background:var(--surface-default);
border-bottom:1px solid var(--border-default);
padding:10px var(--space-4);
padding-top:calc(10px + env(safe-area-inset-top));
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
max-width:var(--maxw);margin:0 auto;
}
.appbar .logo{height:20px}
.iconbtn{
width:38px;height:38px;flex:none;display:grid;place-items:center;
border:0;background:none;cursor:pointer;color:var(--color-text-primary);
border-radius:var(--radius-md);
}
.iconbtn:hover{background:var(--surface-subtle)}
.iconbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* ---------------------------------------------- Left drawer */
.drawer-scrim{position:fixed;inset:0;background:rgba(20,20,20,.55);z-index:60}
.drawer-scrim[hidden]{display:none}
.drawer{
position:fixed;top:0;left:0;bottom:0;z-index:61;
width:min(84vw,320px);background:var(--surface-default);
display:flex;flex-direction:column;overflow-y:auto;
box-shadow:var(--elevation-3);
animation:drawer-in var(--duration-base) var(--ease-out);
padding-top:env(safe-area-inset-top);
}
.drawer[hidden]{display:none}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}
.drawer-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);
padding:var(--space-4) var(--space-4) var(--space-3);
border-bottom:1px solid var(--border-default);
}
.drawer-head .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.who-name{font-size:15px;font-weight:600;letter-spacing:-.01em}
.who-mail{font-size:12.5px;color:var(--color-text-secondary);word-break:break-all}
.drawer-card{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
margin:var(--space-3) var(--space-4) 0;padding:12px 14px;
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-subtle);font-size:13.5px;font-weight:500;
}
.drawer-card:hover{border-color:var(--border-strong)}
.drawer-card .chev{color:var(--neutral-400)}
.drawer-group{
font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--neutral-400);padding:18px var(--space-4) 6px;
}
.drawer > a{
display:block;padding:11px var(--space-4);font-size:14.5px;font-weight:500;
color:var(--color-text-primary);
}
.drawer > a:hover{background:var(--surface-subtle)}
.drawer > a.on{
color:var(--color-primary);font-weight:600;
box-shadow:inset 3px 0 0 var(--color-primary);
}
.drawer-out{margin-top:auto;padding:var(--space-3) var(--space-4);
padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));
border-top:1px solid var(--border-default)}
.drawer-out button{
display:flex;align-items:center;gap:10px;width:100%;
padding:11px 12px;border:1px solid var(--border-default);
border-radius:var(--radius-md);background:var(--surface-default);
font-family:var(--font-sans);font-size:14px;font-weight:600;
color:var(--color-primary);cursor:pointer;
}
.drawer-out button:hover{border-color:var(--color-primary);background:var(--primary-50)}
.drawer-out svg{width:18px;height:18px;stroke:currentColor;fill:none;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabbar{
position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:30;
width:100%;max-width:var(--maxw);
background:var(--surface-default);border-top:1px solid var(--border-default);
display:grid;grid-template-columns:repeat(4,1fr);
padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;
padding:9px 2px 8px;font-size:10px;font-weight:500;color:var(--neutral-400)}
.tabbar a.on{color:var(--color-primary)}
.tabbar a.on svg{stroke:var(--color-primary)}
.tabbar svg{width:21px;height:21px;stroke:var(--neutral-400);fill:none;
stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.has-tabbar{padding-bottom:78px}
.sidenav{display:flex;flex-wrap:wrap;gap:6px;padding:var(--space-3) 0}
.sidenav a{
padding:8px 14px;font-size:13px;font-weight:500;
border:1px solid var(--border-default);border-radius:var(--radius-pill);
color:var(--color-text-secondary);
}
.sidenav a:hover{border-color:var(--border-strong)}
.sidenav a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.toast{
position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:80;
background:var(--color-secondary);color:#fff;
padding:var(--space-3) 20px;border-radius:var(--radius-md);
font-size:14px;box-shadow:var(--elevation-3);
animation:rx-rise var(--duration-base) var(--ease-out);
}
/* ---------------------------------------------- Tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;color:var(--color-text-secondary);
padding:10px 12px;border-bottom:1px solid var(--border-default);
}
td{padding:12px;border-bottom:1px solid var(--border-default);vertical-align:top}
tr:hover td{background:var(--surface-subtle)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* ---------------------------------------------- Importance dial */
.dial{display:inline-flex;gap:4px}
.dial button{
width:28px;height:28px;border:1px solid var(--border-default);
border-radius:var(--radius-sm);background:var(--surface-default);
font-family:var(--font-sans);font-size:12px;font-weight:600;
cursor:pointer;color:var(--color-text-secondary);
}
.dial button.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
/* ---------------------------------------------- Print */
@media print{
.chat-launch,.tabbar,.appbar,.btn,.previewbar{display:none !important}
body{background:#fff;color:#000}
.shell{box-shadow:none;max-width:none}
}
/* ============================================================
Admin shell — full width, fixed sidebar.
The admin panel is desktop work: tables, forms, long lists.
It gets the whole viewport rather than the card's reading column.
============================================================ */
.admin{display:flex;min-height:100vh;align-items:stretch;background:var(--surface-default)}
.admin-side{
width:236px;flex:none;background:var(--black);color:#fff;
position:sticky;top:0;align-self:flex-start;height:100vh;
overflow-y:auto;display:flex;flex-direction:column;
}
.admin-side .brandbar{
padding:20px 20px 18px;border-bottom:1px solid rgba(255,255,255,.1);
display:flex;align-items:center;gap:10px;
}
.admin-side .brandbar img{height:20px}
.admin-nav{padding:14px 10px;flex:1}
.admin-nav .group{
font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:rgba(255,255,255,.34);padding:16px 10px 7px;
}
.admin-nav .group:first-child{padding-top:4px}
.admin-nav a{
display:block;padding:9px 12px;font-size:.875rem;font-weight:500;
color:rgba(255,255,255,.72);transition:background .12s,color .12s;
}
.admin-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.admin-nav a.on{
background:var(--red);color:#fff;font-weight:600;
clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
.admin-nav .count{
float:right;background:rgba(255,255,255,.16);padding:1px 7px;
font-size:.6875rem;font-weight:700;
}
.admin-nav a.on .count{background:rgba(0,0,0,.22)}
.admin-side .foot{
padding:14px;border-top:1px solid rgba(255,255,255,.1);
font-size:.75rem;color:rgba(255,255,255,.5);
}
.admin-side .foot a{color:rgba(255,255,255,.8)}
.admin-side .foot a:hover{color:#fff}
.admin-body{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-top{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px 28px;border-bottom:1px solid var(--line);background:var(--white);
position:sticky;top:0;z-index:20;
}
.admin-top .crumb{font-size:.8125rem;color:var(--muted)}
.admin-top .crumb strong{color:var(--ink);font-weight:600}
.admin-content{padding:26px 28px 72px;flex:1}
.admin-content > h1:first-child{margin-bottom:18px}
/* Wider grids make sense once there's room for them */
.admin-content .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1200px){
.admin-content .grid-3{grid-template-columns:repeat(6,minmax(0,1fr))}
.admin-content .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.admin-content .panel-pad{padding:20px}
/* Legacy: a plain narrow form. Scoped so it never catches the full-width
split layout, whose forms also carry .narrow — that collision is what
capped Company, Settings and the rest at 640px on wide screens. */
.admin-content form.narrow:not(.adm-split){max-width:640px}
/* Burger for narrow screens */
.admin-burger{
display:none;width:38px;height:38px;border:1px solid var(--line);
background:var(--white);cursor:pointer;place-items:center;
}
.admin-burger svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2}
@media(max-width:900px){
.admin-side{
position:fixed;left:0;top:0;bottom:0;z-index:70;height:100dvh;
transform:translateX(-100%);transition:transform .2s ease;
}
.admin.open .admin-side{transform:translateX(0)}
.admin.open::after{
content:"";position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:60;
}
.admin-burger{display:grid}
.admin-top{padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.admin-content{padding:18px 16px 64px}
.admin-content .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ============================================================
Tabbed forms — long admin forms split into steps without
splitting the form itself. One submit still saves everything.
============================================================ */
.tabs{
display:flex;gap:0;border-bottom:1px solid var(--line);
margin-bottom:24px;overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
flex:none;position:relative;background:none;border:0;cursor:pointer;
padding:12px 20px 13px;font-family:var(--font-sans);font-size:.875rem;
font-weight:600;color:var(--muted);white-space:nowrap;
border-bottom:2px solid transparent;margin-bottom:-1px;
transition:color .12s,border-color .12s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--red);border-bottom-color:var(--red)}
.tabs button .step{
display:inline-grid;place-items:center;width:20px;height:20px;
margin-right:8px;font-size:.6875rem;font-weight:700;
background:var(--wash);color:var(--faint);
}
.tabs button.on .step{background:var(--red);color:#fff}
.tabs button.has-error .step{background:var(--red-dark);color:#fff}
.tabs button.has-error{color:var(--red-dark)}
.tab-panel[hidden]{display:none}
.tab-panel{animation:tabin .16s ease}
@keyframes tabin{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.tab-head{margin-bottom:20px}
.tab-head h2{margin-bottom:4px}
.tab-head p{margin:0;color:var(--muted);font-size:.875rem}
.form-actions{
position:sticky;bottom:0;background:var(--white);
border-top:1px solid var(--line);padding:14px 0;margin-top:32px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.form-actions .row{gap:8px}
.slug-preview{
font-family:var(--font-sans);font-size:.8125rem;color:var(--muted);
margin-top:6px;word-break:break-all;
}
.slug-preview b{color:var(--red);font-weight:600}
/* ============================================================
Permission flags — who can change what.
============================================================ */
.flag{
display:inline-block;margin-left:8px;padding:2px 7px;
font-size:.625rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;vertical-align:middle;line-height:1.6;
}
.flag-admin{background:var(--black);color:#fff}
.flag-self{background:var(--wash);color:var(--muted);border:1px solid var(--line)}
.notice{
display:flex;gap:11px;align-items:flex-start;
padding:13px 15px;background:var(--wash);
border-left:3px solid var(--black);
font-size:.8125rem;line-height:1.5;margin-bottom:22px;
}
.notice.red{border-left-color:var(--red);background:var(--red-wash)}
.notice svg{width:16px;height:16px;flex:none;margin-top:2px;
stroke:currentColor;fill:none;stroke-width:2}
.notice p{margin:0}
.notice p + p{margin-top:6px}
.notice strong{font-weight:700}
.legend{
display:flex;flex-wrap:wrap;gap:16px;align-items:center;
font-size:.75rem;color:var(--muted);margin-bottom:20px;
padding-bottom:16px;border-bottom:1px solid var(--line);
}
/* ============================================================
Image editor — crop, zoom, rotate, adjust before upload.
Sized for a thumb first; the same sheet serves desktop.
============================================================ */
.imgedit{
position:fixed;inset:0;z-index:90;background:rgba(20,20,20,.62);
display:flex;align-items:flex-end;justify-content:center;
animation:imgfade .16s ease;
}
@keyframes imgfade{from{opacity:0}to{opacity:1}}
.imgedit-panel{
background:var(--white);width:100%;max-width:540px;
max-height:96dvh;display:flex;flex-direction:column;
animation:imgup .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes imgup{from{transform:translateY(14px)}to{transform:none}}
@media(min-width:620px){
.imgedit{align-items:center}
.imgedit-panel{
clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);
}
}
.imgedit-panel header{
display:flex;align-items:center;justify-content:space-between;
padding:16px 18px;border-bottom:1px solid var(--line);flex:none;
}
.imgedit-panel header h3{font-size:1rem}
.imgedit-panel header .x{
width:32px;height:32px;display:grid;place-items:center;
border:0;background:none;cursor:pointer;color:var(--muted);
}
.imgedit-panel header .x svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2}
.imgedit-stage{
padding:18px;background:var(--wash);display:flex;
flex-direction:column;align-items:center;gap:10px;flex:none;
}
.imgedit-canvas{
touch-action:none;cursor:grab;background:var(--white);
box-shadow:0 0 0 1px var(--line), 0 0 0 4000px rgba(255,255,255,.55);
display:block;
}
.imgedit-canvas:active{cursor:grabbing}
.imgedit-canvas.round{border-radius:50%}
.imgedit-hint{margin:0;font-size:.75rem;color:var(--faint);text-align:center}
.imgedit-tools{
padding:16px 18px;overflow-y:auto;flex:1;
-webkit-overflow-scrolling:touch;
}
.imgedit-slider{margin-bottom:14px}
.imgedit-slider label{
display:block;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);margin-bottom:7px;
}
.imgedit-slider input[type=range]{
width:100%;accent-color:var(--red);height:24px;
}
.imgedit-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.imgedit-buttons button{
display:flex;flex-direction:column;align-items:center;gap:5px;
padding:11px 4px;border:1px solid var(--line);background:var(--white);
font-size:.6875rem;font-weight:600;color:var(--ink);cursor:pointer;
transition:border-color .12s;
}
.imgedit-buttons button:hover{border-color:var(--black)}
.imgedit-buttons button.on{border-color:var(--red);color:var(--red)}
.imgedit-buttons button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.imgedit-buttons button.on svg{stroke:var(--red)}
.imgedit-adjust{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.imgedit-adjust[hidden]{display:none}
.imgedit-panel footer{
display:flex;gap:9px;padding:14px 18px;border-top:1px solid var(--line);
flex:none;padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.imgedit-panel footer .btn{flex:1}
.imgedit-preview{
display:flex;align-items:center;gap:12px;margin-top:10px;
padding:10px;border:1px solid var(--line);background:var(--wash);
}
.imgedit-preview img{
width:46px;height:46px;object-fit:cover;flex:none;background:var(--white);
}
.imgedit-preview img.round{border-radius:50%}
.imgedit-preview div{flex:1;min-width:0;font-size:.8125rem;line-height:1.35}
.imgedit-preview strong{display:block;font-weight:600}
.imgedit-preview span{font-size:.75rem}
.imgedit-preview .link{
background:none;border:0;color:var(--red);font-size:.8125rem;
font-weight:600;cursor:pointer;padding:4px;flex:none;
}
/* ============================================================
Preview bar — shown when an admin is looking at a card.
Deliberately loud: you should never mistake a preview for
the real thing, or wonder why your scan count didn't move.
============================================================ */
.previewbar{
position:sticky;top:0;z-index:50;
background:var(--black);color:#fff;
display:flex;align-items:center;justify-content:space-between;
gap:12px;padding:9px 16px;
padding-top:calc(9px + env(safe-area-inset-top));
font-size:.8125rem;
}
.previewbar .who{display:flex;align-items:center;gap:9px;min-width:0}
.previewbar .dot{
width:7px;height:7px;background:var(--red);border-radius:50%;flex:none;
}
.previewbar strong{font-weight:600}
.previewbar .muted{color:rgba(255,255,255,.6)}
.previewbar .acts{display:flex;gap:8px;flex:none}
.previewbar a{
padding:5px 11px;border:1px solid rgba(255,255,255,.28);
font-size:.75rem;font-weight:600;white-space:nowrap;
}
.previewbar a:hover{border-color:#fff}
.previewbar a.live{background:var(--red);border-color:var(--red)}
@media(max-width:520px){
.previewbar{flex-direction:column;align-items:flex-start;gap:8px}
.previewbar .acts{width:100%}
.previewbar a{flex:1;text-align:center}
}
.previewbar + .shell .card-head{margin-top:0}
/* ---------------------------------------------- Search */
.searchbar{
position:relative;display:flex;align-items:center;
}
.searchbar svg{
position:absolute;left:13px;width:18px;height:18px;pointer-events:none;
stroke:var(--neutral-400);fill:none;stroke-width:1.75;stroke-linecap:round;
}
.searchbar input{
width:100%;height:46px;padding:0 40px 0 40px;
border:1px solid var(--border-strong);border-radius:var(--radius-md);
font-family:var(--font-sans);font-size:14.5px;
background:var(--surface-default);color:var(--color-text-primary);
}
.searchbar input:focus{
outline:none;border-color:var(--color-primary);
box-shadow:0 0 0 3px var(--focus-ring);
}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .clear{
position:absolute;right:6px;width:34px;height:34px;display:grid;place-items:center;
color:var(--color-text-secondary);font-size:15px;border-radius:var(--radius-md);
}
.searchbar .clear:hover{background:var(--surface-subtle)}
/* ============================================================
Dashboard — compact.
A phone screen at an event should show status, what needs
doing, and the two buttons you press standing up, without
scrolling. Everything else is below the fold.
============================================================ */
.dash-id{
display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--space-3);padding-top:var(--space-4);
}
.dash-id h1{font-size:22px;font-weight:700;letter-spacing:-.01em}
.dash-url{
margin:2px 0 0;font-size:12.5px;color:var(--color-primary);
word-break:break-all;
}
/* Four numbers on one row. Compact enough to read at a glance. */
.metrics{
display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid var(--border-default);border-radius:var(--radius-md);
overflow:hidden;margin-top:var(--space-4);
}
.metric{
position:relative;padding:12px 6px;text-align:center;
border-right:1px solid var(--border-default);
}
.metric:last-child{border-right:0}
.metric .n{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.metric .l{
display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--color-text-secondary);margin-top:4px;
}
.metric .d{
position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;
}
.metric .d.up{color:var(--color-success)}
.metric .d.down{color:var(--neutral-400)}
/* Only rendered when there is something to act on, so its presence means work. */
.todo{
margin-top:var(--space-4);padding:var(--space-4);
border:1px solid var(--border-default);border-left:3px solid var(--color-primary);
border-radius:var(--radius-md);background:var(--surface-subtle);
}
.todo-row{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
padding:8px 0;font-size:13.5px;color:var(--color-text-primary);
border-bottom:1px solid var(--border-default);
}
.todo-row:last-child{border-bottom:0;padding-bottom:0}
.todo-row:first-of-type{padding-top:0}
.todo-row .chev{color:var(--neutral-400);flex:none}
.todo-row strong{font-weight:700}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-4)}
.quick .btn{height:48px;font-size:14px;padding:0 var(--space-3)}
@media(max-width:360px){
.quick{grid-template-columns:1fr}
}
/* ============================================================
Card scanning — the wait happens in front of someone you have
just met, so it should look deliberate rather than frozen.
============================================================ */
.scan-stage{
display:flex;align-items:center;gap:var(--space-4);
padding:var(--space-4);margin-top:var(--space-3);
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-subtle);
animation:rx-rise var(--duration-base) var(--ease-out);
}
.scan-stage[hidden]{display:none}
.scan-shot{
position:relative;width:84px;height:56px;flex:none;overflow:hidden;
border-radius:var(--radius-sm);background:var(--neutral-100);
border:1px solid var(--border-default);
}
.scan-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* A line sweeping the captured card. Reads as "being read", not "loading". */
.scan-line{
position:absolute;left:0;right:0;height:2px;
background:linear-gradient(90deg,transparent,var(--color-primary),transparent);
box-shadow:0 0 8px rgba(64,111,197,.6);
animation:scan-sweep 1.5s ease-in-out infinite;
}
@keyframes scan-sweep{
0% {top:0; opacity:0}
15% {opacity:1}
85% {opacity:1}
100% {top:100%; opacity:0}
}
.scan-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.scan-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.scan-title::after{
content:'';display:inline-block;width:3px;height:3px;margin-left:6px;
border-radius:50%;background:var(--color-primary);vertical-align:middle;
animation:rx-pulse 1.2s ease-in-out infinite;
}
.scan-sub{font-size:12.5px;color:var(--color-text-secondary);line-height:1.4}
.scan-stage.done .scan-line{display:none}
.scan-stage.done .scan-title::after{animation:none;background:var(--color-success)}
.scan-stage.done{border-color:var(--color-success)}
/* A field the scan filled, so it is obvious what to check */
.field input.filled{
border-color:var(--color-success);
background:linear-gradient(90deg,rgba(76,175,125,.06),transparent);
}
/* ============================================================
Contact photos
============================================================ */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.photo-cell{
position:relative;aspect-ratio:1;overflow:hidden;
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-subtle);
}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell .kind{
position:absolute;left:5px;bottom:5px;padding:2px 7px;
background:rgba(20,20,20,.72);color:#fff;border-radius:var(--radius-pill);
font-size:9.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.photo-cell .kill{
position:absolute;top:4px;right:4px;width:24px;height:24px;
display:grid;place-items:center;border:0;cursor:pointer;
background:rgba(20,20,20,.6);color:#fff;border-radius:50%;
font-size:12px;line-height:1;padding:0;
}
.photo-cell .kill:hover{background:var(--color-primary)}
.photo-add{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
aspect-ratio:1;cursor:pointer;text-align:center;
border:1px dashed var(--border-strong);border-radius:var(--radius-md);
background:var(--surface-default);color:var(--color-text-secondary);
font-size:11px;font-weight:500;line-height:1.3;padding:6px;
}
.photo-add:hover{border-color:var(--color-primary);color:var(--color-primary)}
.photo-add svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75}
.card-scan-view{
border:1px solid var(--border-default);border-radius:var(--radius-md);
overflow:hidden;background:var(--surface-subtle);
}
.card-scan-view img{width:100%;display:block}
/* Card preview strip — a look at your own card, from the dashboard */
.card-peek{
display:flex;align-items:center;gap:var(--space-3);
margin-top:var(--space-4);padding:10px 12px;
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-default);color:var(--color-text-primary);
transition:transform var(--duration-fast),box-shadow var(--duration-fast);
}
.card-peek:hover{transform:translateY(-2px);box-shadow:var(--elevation-2)}
.peek-thumb{
position:relative;width:44px;height:44px;flex:none;overflow:hidden;
border-radius:var(--radius-sm);background:var(--neutral-100);
}
.peek-thumb img{width:100%;height:100%;object-fit:cover}
.peek-cut{
position:absolute;top:0;right:0;width:16px;height:16px;
background:var(--color-primary);clip-path:polygon(100% 0,100% 100%,0 0);opacity:.9;
}
.peek-copy{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.peek-copy strong{font-size:14px;font-weight:600}
.peek-copy span{font-size:12px}
.card-peek .chev{color:var(--neutral-400);flex:none}
/* ============================================================
Train my AI
============================================================ */
.tone-list{display:flex;flex-direction:column;gap:var(--space-2)}
.tone{
display:block;position:relative;padding:13px 14px 13px 42px;cursor:pointer;
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-default);
transition:border-color var(--duration-fast),background var(--duration-fast);
}
.tone:hover{border-color:var(--border-strong)}
.tone.on{border-color:var(--color-primary);background:var(--primary-50)}
.tone input{position:absolute;left:14px;top:15px;width:16px;height:16px;accent-color:var(--color-primary)}
.tone-name{display:block;font-size:14px;font-weight:600}
.tone-desc{display:block;font-size:12.5px;color:var(--color-text-secondary);margin-top:2px;line-height:1.45}
.know{border-radius:var(--radius-md);overflow:hidden}
.know > summary{
display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
padding:13px var(--space-4);cursor:pointer;list-style:none;
font-size:14.5px;font-weight:500;
}
.know > summary::-webkit-details-marker{display:none}
.know > summary:hover{background:var(--surface-subtle)}
.know > summary .chev{color:var(--neutral-400);transition:transform var(--duration-fast)}
.know[open] > summary .chev{transform:rotate(180deg)}
.know[open] > summary{border-bottom:1px solid var(--border-default)}
.know-body{padding:var(--space-4)}
/* ---------------------------------------------- Admin filter bar */
.filters{
display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
padding:var(--space-3);border:1px solid var(--border-default);
border-radius:var(--radius-md);background:var(--surface-subtle);
}
.filters select{
height:46px;padding:0 12px;border:1px solid var(--border-default);
border-radius:var(--radius-md);font-family:var(--font-sans);font-size:13.5px;
background:var(--surface-default);color:var(--color-text-primary);
}
.filters select:focus{outline:none;border-color:var(--color-primary)}
.filters .btn{height:46px}
.pager{
display:flex;align-items:center;justify-content:center;gap:var(--space-4);
padding:var(--space-5) 0;
}
/* ---------------------------------------------- Member activity header */
.member-head{
display:flex;align-items:center;gap:var(--space-4);
padding-bottom:var(--space-5);border-bottom:1px solid var(--border-default);
flex-wrap:wrap;
}
.member-photo{
width:72px;height:72px;flex:none;object-fit:cover;
border-radius:var(--radius-md);border:1px solid var(--border-default);
}
.member-head h1{font-size:24px}
/* A stat tile that is also a link */
a.stat{display:block;color:inherit;transition:border-color var(--duration-fast),transform var(--duration-fast)}
a.stat:hover{border-color:var(--color-primary);transform:translateY(-2px)}
/* ============================================================
Compact action links.
Call / WhatsApp / Email as full-width buttons cost more vertical
space than the contact's name. On a list you are scanning, the
name matters and the actions should be within reach but quiet.
============================================================ */
.mini-actions{
display:flex;align-items:center;flex-wrap:wrap;gap:0;
margin-top:10px;font-size:13px;
}
.mini-actions a,
.mini-actions button{
display:inline-flex;align-items:center;gap:5px;
padding:6px 0;font-family:var(--font-sans);font-size:13px;font-weight:600;
color:var(--color-primary);background:none;border:0;cursor:pointer;
}
.mini-actions a:hover,
.mini-actions button:hover{color:var(--color-primary-hover);text-decoration:underline}
.mini-actions a + a::before,
.mini-actions a + button::before,
.mini-actions button + a::before{
content:"";display:inline-block;width:1px;height:12px;
background:var(--border-default);margin:0 12px;
}
.mini-actions svg{width:14px;height:14px;stroke:currentColor;fill:none;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mini-actions .muted-link{color:var(--color-text-secondary);font-weight:500}
/* ---- Contact row, denser */
.contact-row{
padding:14px var(--space-4);
border:1px solid var(--border-default);border-radius:var(--radius-md);
background:var(--surface-default);
}
.contact-row + .contact-row{margin-top:8px}
.contact-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.contact-name{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.contact-sub{
font-size:12.5px;color:var(--color-text-secondary);line-height:1.4;margin:2px 0 0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.contact-note{
font-size:13px;line-height:1.5;margin:8px 0 0;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.contact-meta{font-size:12px;color:var(--neutral-400);margin:8px 0 0}
.contact-meta .due{color:var(--color-primary);font-weight:600}
/* Importance dial, tightened so it sits beside a name rather than under it */
.dial{display:inline-flex;gap:3px;flex:none}
.dial button{
width:24px;height:24px;border:1px solid var(--border-default);
border-radius:var(--radius-sm);background:var(--surface-default);
font-family:var(--font-sans);font-size:11px;font-weight:600;
cursor:pointer;color:var(--neutral-400);padding:0;
}
.dial button.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
/* Filter chips on one scrolling line instead of wrapping to three rows */
.filter-strip{
display:flex;gap:8px;overflow-x:auto;padding:var(--space-3) 0;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filter-strip::-webkit-scrollbar{display:none}
.filter-strip a{
flex:none;padding:7px 14px;font-size:13px;font-weight:500;white-space:nowrap;
border:1px solid var(--border-default);border-radius:var(--radius-pill);
color:var(--color-text-secondary);
}
.filter-strip a.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.contact-foot{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:10px;padding-top:10px;border-top:1px solid var(--border-default);
}
.status-pick{
height:32px;padding:0 26px 0 10px;border:1px solid var(--border-default);
border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:12px;
font-weight:600;color:var(--color-text-secondary);background:var(--surface-default);
appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 8px center;background-size:12px;
}
.status-pick:focus{outline:none;border-color:var(--color-primary)}
/* Download link in a page header */
.dl{
display:inline-flex;align-items:center;gap:6px;flex:none;
padding:7px 12px;border:1px solid var(--border-default);
border-radius:var(--radius-pill);background:var(--surface-default);
font-size:12.5px;font-weight:600;color:var(--color-text-primary);
}
.dl:hover{border-color:var(--color-primary);color:var(--color-primary)}
.dl svg{width:14px;height:14px;stroke:currentColor;fill:none;
stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Welcome email panel */
.welcome-box{
display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
padding:var(--space-4);border:1px solid var(--border-default);
border-left:3px solid var(--color-primary);
border-radius:var(--radius-md);background:var(--surface-subtle);
}
/* ============================================================
Offline capture bar — event mode
============================================================ */
.offline-bar{
display:flex;align-items:center;gap:var(--space-2);
margin:0 0 var(--space-4);
padding:var(--space-3) var(--space-4);
background:var(--primary-50);
border:1px solid var(--primary-100);
border-radius:var(--radius-md);
font-size:.8125rem;font-weight:500;
color:var(--color-primary-hover);
}
.offline-bar .offline-dot{
width:8px;height:8px;border-radius:50%;flex:none;
background:var(--color-primary);
}
.offline-bar.syncing{
background:var(--neutral-100);
border-color:var(--border-default);
color:var(--color-text-secondary);
}
.offline-bar.syncing .offline-dot{
background:var(--neutral-400);
animation:offline-pulse 1s ease-in-out infinite;
}
@keyframes offline-pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* ============================================================
Blocked / reset states in the admin panel
============================================================ */
.danger-panel{
border:1px solid var(--color-error-border);
background:var(--color-error-bg);
border-radius:var(--radius-md);
padding:var(--space-4);
margin-top:var(--space-5);
}
.danger-panel h3{color:var(--color-error);margin:0 0 var(--space-2)}
.danger-panel p{font-size:.8125rem;color:var(--color-text-secondary);margin:0 0 var(--space-3)}
.credential{
display:block;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:1.0625rem;font-weight:600;letter-spacing:.02em;
background:var(--neutral-900);color:#fff;
padding:var(--space-3) var(--space-4);
border-radius:var(--radius-sm);
margin:var(--space-2) 0 var(--space-3);
word-break:break-all;user-select:all;
}
/* ============================================================
Auth pages — sign in, change password, no access
Append this block to the END of wwwroot/css/digicard.css.
It uses the existing design tokens, so nothing above changes.
============================================================ */
.auth-shell{
min-height:100dvh;
display:grid;
place-items:center;
padding:var(--space-5) var(--space-4);
background:var(--surface-page);
}
.auth-card{
width:100%;
max-width:440px;
background:var(--surface-default);
border:1px solid var(--border-default);
border-radius:var(--radius-md);
box-shadow:var(--elevation-2);
padding:clamp(var(--space-5),5vw,var(--space-7));
}
/* Base rule, deliberately not nested. The logo file is 1770px wide, so if this
block ever fails to load the page renders with the mark at full size and the
form pushed off screen. A top-level constraint makes that impossible. */
.auth-logo{height:30px;width:auto;display:block;max-width:100%}
.auth-card .auth-logo{
height:30px;width:auto;display:block;
margin-bottom:clamp(var(--space-5),4vw,var(--space-6));
}
.auth-card h1{font-size:clamp(1.5rem,4vw,1.875rem);margin:0 0 var(--space-1)}
.auth-card .auth-sub{
color:var(--color-text-secondary);font-size:.875rem;
margin:0 0 clamp(var(--space-5),4vw,var(--space-6));
}
.auth-card form .btn{margin-top:var(--space-1)}
.auth-foot{
margin-top:var(--space-5);
padding-top:var(--space-4);
border-top:1px solid var(--border-default);
font-size:.8125rem;
color:var(--color-text-secondary);
text-align:center;
}
.auth-foot a{color:var(--color-primary);font-weight:600}
/* ---- Phones: lose the card framing, use the whole screen */
@media (max-width:420px){
.auth-shell{padding:0;background:var(--surface-default)}
.auth-card{
max-width:none;border:0;box-shadow:none;border-radius:0;
padding:var(--space-6) var(--space-5) var(--space-7);
padding-top:calc(var(--space-6) + env(safe-area-inset-top));
}
}
/* ---- Desktop: brand panel beside the form */
@media (min-width:1024px){
.auth-shell{
grid-template-columns:1fr 1fr;
place-items:stretch;
padding:0;
}
.auth-brand{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
background:var(--surface-inverse);
color:var(--color-text-inverse);
padding:var(--space-7);
overflow:hidden;
}
/* The angular cut from the logo, used once. */
.auth-brand::after{
content:"";
position:absolute;right:0;bottom:0;
width:180px;height:180px;
background:var(--color-primary);
clip-path:polygon(100% 0,100% 100%,0 100%);
}
.auth-brand .auth-logo{
position:absolute;top:var(--space-7);left:var(--space-7);
height:28px;width:auto;margin:0;
}
.auth-brand h2{
position:relative;z-index:1;
font-size:2rem;line-height:1.2;max-width:15ch;margin:0;
}
.auth-brand p{
position:relative;z-index:1;
color:var(--neutral-400);max-width:36ch;margin:var(--space-3) 0 0;
}
.auth-side{
display:grid;place-items:center;
padding:var(--space-7);
background:var(--surface-default);
}
.auth-card{border:0;box-shadow:none;padding:0;max-width:400px}
}
/* ---- Below 1024px there is no room for the brand panel */
@media (max-width:1023px){
.auth-brand{display:none}
.auth-side{display:contents}
}
/* ============================================================
Card bar — the way back from any page beneath a card
Pinned to the top so it survives scrolling. A visitor deep in a
service page should never have to hunt for the person they scanned.
============================================================ */
.card-bar{
position:sticky;top:0;z-index:20;
display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-3) var(--space-4);
padding-top:calc(var(--space-3) + env(safe-area-inset-top));
background:var(--surface-default);
border-bottom:1px solid var(--border-default);
color:var(--color-text-primary);
text-decoration:none;
max-width:var(--maxw);
margin:0 auto;
}
.card-bar:active{background:var(--surface-subtle)}
.card-bar-arrow{
display:grid;place-items:center;flex:none;
width:32px;height:32px;border-radius:var(--radius-pill);
background:var(--neutral-100);color:var(--color-text-primary);
}
.card-bar-arrow svg{width:16px;height:16px}
.card-bar-face{
width:28px;height:28px;flex:none;
border-radius:var(--radius-pill);object-fit:cover;
background:var(--neutral-100);
}
.card-bar-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.card-bar-label{font-size:.6875rem;color:var(--color-text-secondary)}
.card-bar-name{
font-size:.875rem;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* The bar carries the top edge, so the header below it should not
also claim the safe area. */
.card-bar + .shell .card-head{padding-top:var(--space-6)}
/* ============================================================
Pager
============================================================ */
.pager{
display:flex;align-items:center;justify-content:space-between;
gap:var(--space-3);flex-wrap:wrap;
margin-top:var(--space-5);
padding-top:var(--space-4);
border-top:1px solid var(--border-default);
}
.pager-count{font-size:.8125rem;color:var(--color-text-secondary)}
.pager-buttons{display:flex;align-items:center;gap:var(--space-2)}
.pager-page{font-size:.8125rem;color:var(--color-text-secondary);min-width:66px;text-align:center}
.pager [aria-disabled="true"]{opacity:.4;pointer-events:none}
/* ============================================================
Contact detail
============================================================ */
.detail-head{
display:flex;align-items:flex-start;gap:var(--space-4);
padding-bottom:var(--space-4);
border-bottom:1px solid var(--border-default);
margin-bottom:var(--space-4);
}
.detail-initials{
width:52px;height:52px;flex:none;display:grid;place-items:center;
border-radius:var(--radius-pill);
background:var(--color-primary);color:#fff;
font-weight:600;font-size:1.125rem;
}
.detail-facts{width:100%;font-size:.875rem}
.detail-facts td{padding:var(--space-2) 0;vertical-align:top;border:0}
.detail-facts td:first-child{color:var(--color-text-secondary);width:112px}
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin:var(--space-4) 0}
.quick-actions a{
display:flex;flex-direction:column;align-items:center;gap:var(--space-1);
padding:var(--space-3) var(--space-2);
border:1px solid var(--border-default);border-radius:var(--radius-md);
font-size:.75rem;font-weight:600;color:var(--color-text-primary);
}
.quick-actions a:active{background:var(--surface-subtle)}
.quick-actions svg{width:19px;height:19px;stroke:var(--color-primary);fill:none;stroke-width:1.8}
.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.photo-strip img{
width:100%;aspect-ratio:1;object-fit:cover;
border-radius:var(--radius-sm);border:1px solid var(--border-default);
}
.archived-note{
display:flex;align-items:center;gap:var(--space-2);
padding:var(--space-3) var(--space-4);
background:var(--neutral-100);border-radius:var(--radius-md);
font-size:.8125rem;color:var(--color-text-secondary);
margin-bottom:var(--space-4);
}
/* A full-width, obvious way out for someone who is already locked out. */
.auth-link{
display:block;
margin-top:var(--space-4);
padding:var(--space-2);
text-align:center;
font-size:.875rem;font-weight:600;
color:var(--color-primary);
}
.auth-link:active{opacity:.7}
/* Links the assistant hands out — the office map pin, the brochure PDF. */
.bubble-link{
display:inline-block;
margin-top:var(--space-2);
padding:var(--space-2) var(--space-3);
background:var(--color-primary);
color:#fff;
border-radius:var(--radius-sm);
font-size:.8125rem;font-weight:600;
text-decoration:none;
word-break:break-word;
}
.bubble-link:active{opacity:.85}
.bubble.me .bubble-link{background:#fff;color:var(--color-primary)}
/* ============================================================
ATELIER OVERRIDE LAYER
------------------------------------------------------------
Everything above is the original component sheet, now drawing on
the new tokens. This layer does the things a token swap cannot:
swaps display type onto the right elements, trades boxes for
hairlines, and adds the table density the admin panel needs.
Kept as one appended block, deliberately. Every Atelier decision
is in one place, and reverting the theme means deleting from the
banner down rather than picking through 1600 lines.
============================================================ */
/* ---------------------------------------------- Display type */
.name,
.auth-card h1,
.detail-head h1,
.member-head h1,
.crumb{
font-family:var(--font-display);
font-weight:500;
letter-spacing:-.018em;
}
.name{font-size:23px}
/* Figures carry the screen. Sans figures inside tables (see .dense). */
.stat .n,
.metric .n,
.metric b{
font-family:var(--font-display);
font-weight:500;
letter-spacing:-.025em;
font-variant-numeric:lining-nums;
}
/* ALL-CAPS micro labels are sans, always. Fraunces earns nothing here. */
.eyebrow,
.tag,
.flag,
.tab-head,
thead th{
font-family:var(--font-sans);
}
/* ---------------------------------------------- Surfaces */
/* Hairlines, not boxes. A panel is defined by its rule, not its shadow. */
.panel,
.list-group,
.contact-row,
.table-wrap{
border-color:var(--border-default);
box-shadow:none;
}
.card-head{background:var(--surface-brand);color:var(--color-text-primary)}
.card-head::after{display:none} /* the 45 degree cut retires with the old mark */
.appbar,
.tabbar,
.drawer{background:var(--surface-subtle)}
/* ---------------------------------------------- Controls */
.btn{
font-family:var(--font-sans);
font-weight:600;
letter-spacing:.015em;
border-radius:var(--radius-md);
clip-path:none; /* the cut again, on primary buttons */
}
.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}
.btn-primary:hover{background:var(--color-primary-hover)}
.tag{border-radius:var(--radius-sm);letter-spacing:.06em}
.tag-red{background:var(--color-primary);color:var(--color-text-inverse)}
.tag-dark{background:var(--color-secondary);color:var(--color-text-inverse)}
.tag-grey{background:var(--neutral-100);color:var(--color-text-secondary)}
/* Underlined fields on signed-out pages; boxed everywhere else, because a
dense form needs its edges and a login page does not. */
.auth-card .field input,
.auth-card .field select{
border:0;border-bottom:1.5px solid var(--border-strong);
border-radius:0;padding-left:2px;padding-right:2px;
background:transparent;
}
.auth-card .field input:focus{border-bottom-color:var(--color-primary);outline:none}
/* ---------------------------------------------- Chat */
.bubble{border-radius:var(--radius-md);clip-path:none}
.bubble.me{background:var(--color-primary);color:var(--color-text-inverse)}
.bubble.them{background:var(--neutral-100);color:var(--color-text-primary)}
.chat-launch .inner{background:var(--color-secondary)}
.chip{border-radius:var(--radius-pill);border-color:var(--border-strong)}
/* ---------------------------------------------- Table density
The admin panel is a hundred rows by ten columns. Editorial spacing
is wrong there, so .dense tightens the same tokens rather than
introducing a second system: sans figures, real separators, 13px. */
.dense{font-size:13.5px;line-height:1.45}
.dense table{border-collapse:collapse;width:100%}
.dense thead th{
font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
color:var(--color-text-secondary);text-align:left;
padding:10px 12px;border-bottom:1px solid var(--border-strong);
}
.dense tbody td{
padding:11px 12px;border-bottom:1px solid var(--border-default);
font-variant-numeric:tabular-nums;
}
.dense tbody tr:last-child td{border-bottom:0}
.dense tbody tr:hover{background:var(--surface-subtle)}
.dense h1{font-size:25px}
.dense .stat .n{font-family:var(--font-display);font-size:30px}
/* ---------------------------------------------- Auth shell */
.auth-brand{background:var(--surface-brand);color:var(--color-text-primary)}
.auth-brand::after{display:none}
.auth-card{
background:var(--surface-default);
border:1px solid var(--border-default);
border-radius:var(--radius-lg);
box-shadow:var(--elevation-2);
}
.auth-logo{height:34px;width:auto}
/* ============================================================
Signed-out pages — Atelier
The brand panel shows the product: a printed card and the digital
card its QR opens. Built from markup rather than a screenshot so it
stays sharp on every display and re-themes with the tokens.
Decorative throughout; _AuthBrand.cshtml marks it aria-hidden.
============================================================ */
.auth-shell{background:var(--surface-page)}
.auth-logo{display:flex;align-items:center;gap:10px;height:auto}
.auth-logo img{height:32px;width:32px;display:block}
.auth-logo span{
font-family:var(--font-display);font-size:21px;font-weight:500;
letter-spacing:-.012em;color:var(--color-text-primary);
}
.auth-card h1{font-family:var(--font-display);font-weight:400}
.auth-card .auth-sub{font-size:.9375rem}
.auth-card .btn-primary{height:52px;font-size:15.5px}
.auth-link{
display:inline-block;margin-top:var(--space-4);
font-size:.875rem;font-weight:500;color:var(--color-primary);
}
.auth-foot{text-align:left}
/* ---- The showcase ---------------------------------------- */
.showcase{position:relative;width:500px;height:432px;flex:none}
.sc-phone{
position:absolute;left:0;top:0;width:228px;height:420px;
padding:8px;background:var(--color-secondary);border-radius:30px;
transform:rotate(-4deg);box-shadow:var(--elevation-3);
}
.sc-screen{
width:100%;height:100%;background:var(--surface-subtle);
border-radius:23px;overflow:hidden;display:flex;flex-direction:column;
}
.sc-head{
padding:16px 16px 12px;text-align:center;
border-bottom:1px solid var(--border-default);
}
.sc-avatar{
width:44px;height:44px;margin:0 auto 9px;border-radius:var(--radius-pill);
background:var(--color-secondary);color:var(--color-text-inverse);
display:grid;place-items:center;
font-family:var(--font-display);font-size:16px;font-weight:500;
}
.sc-name{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.012em}
.sc-role{font-size:11px;color:var(--color-text-secondary);margin-top:3px}
.sc-rule{width:22px;height:2px;background:var(--color-primary);margin:10px auto 0}
.sc-body{flex:1;padding:13px;display:flex;flex-direction:column;gap:9px}
.sc-cta{
height:38px;border-radius:var(--radius-md);
background:var(--color-primary);color:var(--color-text-inverse);
display:grid;place-items:center;font-size:12px;font-weight:600;
}
.sc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sc-tile{
height:42px;border-radius:var(--radius-md);
background:var(--surface-default);border:1px solid var(--border-default);
display:grid;place-items:center;font-size:9.5px;color:var(--color-text-secondary);
}
.sc-row{
padding:8px 0;border-bottom:1px solid var(--border-default);
font-size:11.5px;color:var(--color-text-primary);
}
.sc-ask{
margin-top:auto;padding:10px;border-radius:var(--radius-md);
background:var(--neutral-100);font-size:10.5px;color:var(--color-text-secondary);
}
.sc-card{
position:absolute;left:212px;top:212px;width:288px;height:182px;
padding:18px 19px;background:var(--surface-default);border-radius:var(--radius-lg);
transform:rotate(6deg);box-shadow:var(--elevation-3);
display:flex;flex-direction:column;justify-content:space-between;
}
.sc-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sc-card-brand{display:flex;align-items:center;gap:7px}
.sc-card-brand span{
font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:-.01em;
}
.sc-qr{width:60px;height:60px;display:block}
.sc-card-name{font-family:var(--font-display);font-size:18px;font-weight:500;letter-spacing:-.015em}
.sc-card-role{font-size:11.5px;color:var(--color-text-secondary);margin-top:3px}
.sc-card .sc-rule{margin:10px 0 0}
/* ---- Desktop layout: override the inverse panel from the base sheet ---- */
@media (min-width:1024px){
.auth-brand{
background:var(--surface-brand);
color:var(--color-text-primary);
justify-content:space-between;
padding:clamp(32px,3.4vw,52px);
overflow:hidden;
}
.auth-brand::after{display:none}
.auth-brand .auth-logo{position:static;height:auto;margin:0}
.auth-brand .auth-logo span{color:var(--color-text-primary)}
.auth-brand .auth-pitch h2{
position:relative;z-index:1;
font-family:var(--font-display);font-weight:400;
font-size:clamp(1.9rem,2.6vw,2.4rem);line-height:1.12;
letter-spacing:-.022em;max-width:15ch;margin:0;
}
.auth-brand .auth-pitch p{
position:relative;z-index:1;
color:var(--color-text-secondary);font-size:1rem;
max-width:40ch;margin:var(--space-3) 0 0;
}
.auth-side{background:var(--surface-subtle)}
.auth-card{max-width:400px}
}
/* The showcase is drawn at a fixed size, so it is scaled rather than
reflowed — a tilted card that reflows stops looking like a card. */
@media (min-width:1024px) and (max-width:1279px){
.showcase{transform:scale(.8);transform-origin:left center;margin:-42px 0}
}
@media (min-width:1600px){
.showcase{transform:scale(1.08);transform-origin:left center}
}
@media (max-width:1023px){
.showcase{display:none}
}
/* The base sheet sizes .auth-card .auth-logo as a bare . The lockup is
now a flex anchor (mark + wordmark in real Fraunces, which an SVG loaded
through cannot use), so that rule has to be restated at the same
specificity rather than fought at a lower one. */
.auth-card .auth-logo{
display:flex;align-items:center;gap:10px;
height:auto;width:auto;
margin-bottom:clamp(var(--space-5),4vw,var(--space-6));
}
.auth-card .auth-logo img{height:32px;width:32px}
/* On desktop the form sits directly on the page, not in a second box — the
brand panel already provides the framing. Restated here because the Atelier
layer re-added the card chrome that the base sheet's desktop rule removes. */
@media (min-width:1024px){
.auth-side .auth-card{border:0;box-shadow:none;border-radius:0;padding:0}
}
/* The shell is a grid with one implicit, content-sized row, so min-height on
the container left a strip of page colour under a short form. Naming the row
1fr makes it take the full height and still grow past it when content is
taller than the viewport. */
@media (min-width:1024px){
.auth-shell{grid-template-rows:1fr}
}
/* 100vh first, then 100dvh for browsers that have it. Without the fallback,
anything that does not understand dvh drops the declaration entirely and the
shell collapses to content height, leaving a band of page colour beneath. */
.auth-shell{min-height:100vh;min-height:100dvh}
@media (min-width:1024px){
/* The form sits on the panel itself. A white block on the off-white panel
reads as an unexplained edge down the middle of the page. */
.auth-side .auth-card{background:transparent}
}
/* Phones, last word.
The base sheet drops the card framing below 420px so the form uses the whole
screen. The Atelier layer above re-declares .auth-card and .auth-shell at the
same specificity and later in the file, which silently undid that. Restating
it here keeps the small-screen behaviour without weakening either rule. */
@media (max-width:420px){
.auth-shell{padding:0;background:var(--surface-default);min-height:100vh;min-height:100dvh}
.auth-side .auth-card,
.auth-card{
max-width:none;width:100%;
border:0;box-shadow:none;border-radius:0;background:var(--surface-default);
padding:var(--space-6) var(--space-5) var(--space-7);
padding-top:calc(var(--space-6) + env(safe-area-inset-top));
}
}
/* ============================================================
The public card — Atelier
The most-seen screen in the product and the only one a customer
judges. Editorial density throughout: the card is an off-white
sheet on a bone ground, blocks are separated by space, and the
accent appears exactly twice — the primary action and the rule
under the name.
============================================================ */
.shell{
background:var(--surface-subtle);
box-shadow:none;
border-left:1px solid var(--border-default);
border-right:1px solid var(--border-default);
}
/* ---- Header ---------------------------------------------- */
.card-head{
background:var(--surface-brand);
border-bottom:1px solid var(--border-default);
padding-top:24px;
}
/* The mark's disc, echoed once and quietly. Replaces the 45 degree
cut, which belonged to the old logo. */
.card-head::after{
content:"";display:block;position:absolute;
top:-90px;right:-70px;width:240px;height:240px;border-radius:50%;
background:var(--color-primary);opacity:.06;clip-path:none;
}
.card-head .brand{
display:inline-flex;align-items:center;gap:8px;height:auto;width:auto;
position:relative;z-index:1;
}
.card-head .brand img{width:26px;height:26px;display:block}
.card-head .brand span{
font-family:var(--font-display);font-size:16px;font-weight:500;
letter-spacing:-.012em;color:var(--color-text-primary);
}
.identity{position:relative;z-index:1}
.avatar,
.avatar-fallback{border-radius:var(--radius-pill)}
.avatar{border:1px solid rgba(32,32,32,.10)}
.avatar-fallback{
background:var(--color-secondary);color:var(--color-text-inverse);
font-family:var(--font-display);font-size:28px;font-weight:500;
}
.name{font-size:27px;line-height:1.1}
/* Sentence case. Small caps on a person's job title reads as a form
field, which is the opposite of what a card is for. */
.role span{
font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;
color:var(--color-text-secondary);
}
.role .dash{width:16px;height:2px}
.org{font-size:12.5px;letter-spacing:.01em}
/* ---- Actions --------------------------------------------- */
.actions{gap:8px}
.action{
border-radius:var(--radius-md);
background:var(--surface-default);
padding:13px 4px;
}
.action:hover{transform:none;box-shadow:none;background:var(--neutral-100);border-color:var(--border-strong)}
/* Ink, not accent. The accent belongs to the one action that matters. */
.action svg{stroke:var(--color-text-primary);width:19px;height:19px}
/* ---- Rows ------------------------------------------------- */
.rowlink{
background:var(--surface-default);
border-radius:var(--radius-md);
}
.rowlink:hover{transform:none;box-shadow:none;background:var(--neutral-100)}
.rowlink h3{font-size:14.5px;font-weight:600}
.rowlink .chev{font-size:16px}
.list-group{background:var(--surface-default)}
.verified{color:var(--color-primary);font-weight:600;letter-spacing:.02em}
.qr-share{
background:var(--surface-default);
border-radius:var(--radius-md);
}
.qr-share img{border-radius:var(--radius-sm);border:1px solid var(--border-default)}
.card-footer span{
font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--neutral-400);
}
/* ---- Chat launcher ---------------------------------------- */
.chat-launch .inner{
background:var(--color-secondary);
border-radius:var(--radius-pill);
font-family:var(--font-sans);font-weight:600;letter-spacing:.01em;
}
.chat-launch .pulse{background:var(--color-primary)}
.chat-panel{background:var(--surface-subtle);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.chat-head{background:var(--surface-default);border-bottom:1px solid var(--border-default)}
.chat-head .title h3,
.chat-head h3{font-family:var(--font-display);font-size:16.5px;font-weight:500;letter-spacing:-.01em}
.chat-head .dot{background:var(--color-primary)}
.chat-foot{background:var(--surface-default);border-top:1px solid var(--border-default)}
.composer textarea{font-family:var(--font-sans)}
.icon-btn{background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-pill)}
/* ---- Preview bar ------------------------------------------ */
.previewbar{background:var(--color-secondary);color:var(--color-text-inverse)}
.previewbar .dot{background:var(--color-primary)}
/* A card that is blocked or retired still carries the mark. Without it the
page reads as a broken link rather than a deliberate answer, which is the
one impression a card in someone's wallet must not leave. */
.empty h3{font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-.015em}
/* ============================================================
The member app — Atelier
Used one-handed, often standing, sometimes in bad light. Editorial
density, but the hierarchy does more work here than on the card:
one figure carries the screen and everything else stays quiet.
============================================================ */
.appbar{background:var(--surface-subtle)}
.appbar .logo{
display:inline-flex;align-items:center;gap:8px;height:auto;line-height:1;
}
.appbar .logo img{width:24px;height:24px;display:block}
.appbar .logo span{
font-family:var(--font-display);font-size:16px;font-weight:500;
letter-spacing:-.012em;color:var(--color-text-primary);
}
.shell.has-tabbar{background:var(--surface-subtle)}
/* ---- Identity block --------------------------------------- */
.dash-id h1{
font-family:var(--font-display);font-size:24px;font-weight:500;letter-spacing:-.018em;
}
.dash-url{color:var(--color-text-secondary);font-variant-numeric:tabular-nums}
.card-peek{background:var(--surface-default);border-radius:var(--radius-md)}
.card-peek:hover{transform:none;box-shadow:none;background:var(--neutral-100)}
.peek-thumb{border-radius:var(--radius-pill);overflow:hidden}
/* ---- Metrics ----------------------------------------------
Four equal tiles gave four numbers equal weight, so the eye had to
read all four to find the one that changed. Today is the number a
member opens the app for, so it gets the room and the serif; the
other three become a quiet row beneath it. Markup is unchanged —
the first tile simply spans the grid. */
.metrics{
grid-template-columns:repeat(3,minmax(0,1fr));
background:var(--surface-default);
}
.metric{border-right:1px solid var(--border-default);text-align:left;padding:13px 14px}
.metric:last-child{border-right:0}
.metric .n{
font-family:var(--font-display);font-size:23px;font-weight:500;
letter-spacing:-.022em;font-variant-numeric:lining-nums;
}
.metric .l{letter-spacing:.1em;margin-top:5px}
.metric:first-child{
grid-column:1 / -1;
border-right:0;border-bottom:1px solid var(--border-default);
padding:18px 16px 16px;
}
.metric:first-child .n{font-size:46px;line-height:1}
.metric:first-child .l{
display:inline-block;font-size:12px;letter-spacing:.02em;
text-transform:none;font-weight:400;color:var(--color-text-secondary);
margin:8px 0 0;
}
.metric:first-child .d{
position:static;display:inline-block;margin-left:8px;
font-size:12.5px;font-weight:500;
}
.metric:first-child .d.up{color:var(--color-primary)}
/* ---- Needs you -------------------------------------------- */
.todo{
background:var(--surface-default);
border:1px solid var(--border-default);
border-left:1px solid var(--border-default); /* no accent bar: see note */
border-radius:var(--radius-md);
}
.todo-row strong{font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.015em;margin-right:2px}
.todo .eyebrow{color:var(--color-text-secondary)}
/* ---- Quick actions ---------------------------------------- */
.quick .btn{height:50px;border-radius:var(--radius-md)}
/* ---- Drawer and tabbar ------------------------------------ */
.drawer{background:var(--surface-subtle)}
.drawer-card{background:var(--surface-default);border-radius:var(--radius-md)}
.drawer > a.on{
color:var(--color-primary);
box-shadow:inset 2px 0 0 var(--color-primary);
}
.who-name{font-family:var(--font-display);font-size:16.5px;font-weight:500;letter-spacing:-.012em}
.drawer-out button{border-radius:var(--radius-md)}
.tabbar{background:var(--surface-subtle)}
.tabbar a{color:var(--color-text-secondary);font-size:10.5px}
.tabbar svg{stroke:var(--color-text-secondary)}
.tabbar a.on{color:var(--color-primary);font-weight:600}
/* ---- Lists shared by contacts, chats and events ------------ */
.contact-row{background:var(--surface-default);border-radius:var(--radius-md)}
.contact-name{font-size:15px;font-weight:600;letter-spacing:-.005em}
.filter-strip a.on{background:var(--color-secondary);color:var(--color-text-inverse)}
.searchbar input{border-radius:var(--radius-md)}
.detail-initials{
border-radius:var(--radius-pill);background:var(--color-secondary);
color:var(--color-text-inverse);
font-family:var(--font-display);font-weight:500;
}
.dial button.on{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}
/* ---- Event capture -----------------------------------------
Filled in standing up, in a hall, often in poor light and against
a clock. Contrast and target size matter more than restraint here,
so this is the one place the accent is allowed to be loud. */
.scan-stage{
background:var(--surface-default);
border:1px solid var(--border-default);
border-radius:var(--radius-md);
}
.scan-title{font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.012em}
.scan-line{background:var(--color-primary)}
.scan-stage.done{border-color:var(--color-primary)}
.offline-bar{
background:var(--color-secondary);color:var(--color-text-inverse);
border-radius:var(--radius-md);font-size:13px;
}
.offline-dot{background:var(--color-primary)}
/* A field the OCR filled, so the member can see what was read for them
rather than re-typing what is already correct. */
.field input.filled{
background:var(--primary-50);
border-color:var(--primary-100);
}
.photo-cell{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-default)}
.photo-cell .kind{
background:var(--color-secondary);color:var(--color-text-inverse);
font-size:10px;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-sm);
}
.photo-add{
border:1px dashed var(--border-strong);border-radius:var(--radius-md);
color:var(--color-text-secondary);background:var(--surface-default);
}
.card-scan-view{border:1px solid var(--border-default);border-radius:var(--radius-md)}
/* Importance dial: five targets, thumb-sized, on a row that must be
hittable without looking. */
.dial button{min-width:44px;min-height:44px;border-radius:var(--radius-md)}
.detail-facts th{color:var(--color-text-secondary);font-weight:500}
.detail-head h1{font-family:var(--font-display);font-weight:500}
/* ============================================================
The admin panel — Atelier, table density
The place I expected this palette to struggle: a hundred rows by
ten columns is not what hairlines and generous space are for. The
answer is not a second design system but a second density — same
tokens, same type, tighter leading and real row separators. The
layout opts every admin view in by putting .dense on .admin-content.
============================================================ */
.admin{background:var(--surface-subtle)}
.admin-side{background:var(--color-secondary)}
.admin-side .brandbar{border-bottom:1px solid rgba(255,255,255,.12)}
.brandmark{display:inline-flex;align-items:center;gap:8px}
.brandmark img{width:22px;height:22px;display:block}
.brandmark span{
font-family:var(--font-display);font-size:16px;font-weight:500;
letter-spacing:-.012em;color:var(--color-text-inverse);
}
.admin-nav a{border-radius:var(--radius-sm)}
.admin-nav a.on{
background:var(--color-primary);color:var(--color-text-inverse);
clip-path:none; /* the cut, retired with the old mark */
}
.admin-nav .count{border-radius:var(--radius-sm)}
.admin-top{background:var(--surface-default);border-bottom:1px solid var(--border-default)}
.admin-top .crumb strong{
font-family:var(--font-display);font-size:17px;font-weight:500;letter-spacing:-.014em;
}
.admin-content{background:var(--surface-subtle)}
.admin-content > h1:first-child{
font-family:var(--font-display);font-size:27px;font-weight:500;letter-spacing:-.02em;
}
/* Panels carry the tables, so they keep a white ground against the
off-white page — the one place a filled surface earns its keep. */
.admin-content .panel,
.admin-content .table-wrap{background:var(--surface-default)}
.admin-burger{border-radius:var(--radius-md);background:var(--surface-default)}
/* ---- Stats across the top of a page ------------------------ */
.admin-content .stat{
background:var(--surface-default);border:1px solid var(--border-default);
border-radius:var(--radius-md);padding:16px 18px;
}
.admin-content .stat .n{
font-family:var(--font-display);font-size:30px;font-weight:500;
letter-spacing:-.022em;line-height:1;
}
.admin-content .stat .l{
font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--color-text-secondary);margin-top:6px;
}
.admin-content .stat.accent{background:var(--color-secondary);border-color:var(--color-secondary)}
.admin-content .stat.accent .n{color:var(--color-text-inverse)}
.admin-content .stat.accent .l{color:rgba(255,255,255,.66)}
/* ---- Bar charts -------------------------------------------- */
.admin-content .bar,
.admin-content .barfill{background:var(--color-primary)}
/* ---- Forms ------------------------------------------------- */
.admin-content .field label{
font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--color-text-secondary);
}
.admin-content .field input,
.admin-content .field select,
.admin-content .field textarea{border-radius:var(--radius-md)}
.tabs button.on{
color:var(--color-primary);
box-shadow:inset 0 -2px 0 var(--color-primary);
}
.tabs button.has-error{color:var(--color-error)}
.danger-panel{
border:1px solid var(--color-error-border);background:var(--color-error-bg);
border-radius:var(--radius-md);
}
.credential{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
background:var(--surface-default);border:1px solid var(--border-strong);
border-radius:var(--radius-sm);letter-spacing:.04em;
}
.sidenav a.on{background:var(--color-secondary);color:var(--color-text-inverse);border-radius:var(--radius-sm)}
.welcome-box{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md)}
.member-photo{border-radius:var(--radius-pill)}
.member-head h1{font-family:var(--font-display);font-weight:500}
/* In a hundred-row table, a coloured link on every row is noise rather than
affordance — the eye has nowhere to rest. Content links read as ink and
colour on hover; only the trailing action cell stays accented, because that
column is the one an admin is actually scanning for. */
.dense tbody a{color:var(--color-text-primary)}
.dense tbody a:hover{color:var(--color-primary);text-decoration:underline}
.dense tbody td:last-child a{color:var(--color-primary)}
.dense tbody td:last-child a:hover{color:var(--color-primary-hover)}
/* ============================================================
ADMIN LAYOUT KIT — full-width, structured
The admin content area used to hold forms capped at ~620px, which
left most of a desktop screen empty. These classes use the width
with structure instead of stretching single inputs:
.adm-head page title + subtitle + optional actions
.adm-split main column + docked 340-360px aside (Groups A, B, C)
.adm-grid auto-fill card grid that fills the main column (Group A)
.adm-sec a titled section card holding grouped fields (Group B)
.adm-fieldgrid two-column field grid inside a section
.adm-aside sticky rail for actions, assets and context
.adm-panel a panel within the aside
Only ever used inside .admin-content, so nothing here leaks to the
card or the member app.
============================================================ */
.adm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.adm-head h1{margin:0}
.adm-head .sub{font-size:13px;color:var(--color-text-secondary);margin:4px 0 0}
.adm-head .acts{display:flex;gap:10px;flex-wrap:wrap}
/* Main + docked aside. The aside is the narrower column on purpose:
a form and a set of actions are read top to bottom, not across. */
.adm-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.adm-split.wide-aside{grid-template-columns:minmax(0,1fr) 360px}
/* Every split page fills the content area. The main column is 1fr, so it
absorbs all the extra width on a wide monitor; the aside stays a readable
fixed width beside it. No page-width cap — the screen size sets the width. */
.adm-split.narrow{max-width:none}
/* Group A: the work grid. As many columns as fit, never below the
readable minimum — this is what actually consumes the empty space. */
.adm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
/* Group B: sectioned fields */
.adm-sections{display:flex;flex-direction:column;gap:16px}
.adm-sec{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.adm-sec > h2{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.012em;margin:0;padding:14px 18px;border-bottom:1px solid var(--border-default)}
.adm-sec .secbody{padding:18px}
/* Responsive columns: fields flow into as many columns as the width allows
(3-4 on a wide monitor, 2 on a laptop, 1 on a phone) rather than a fixed
two. This fills the screen without stretching any single input wide — a
full-width field opts out with .wide. */
.adm-fieldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px 18px}
.adm-fieldgrid .field{margin:0}
.adm-fieldgrid .field.wide{grid-column:1 / -1}
.adm-fieldgrid .check{grid-column:1 / -1}
/* Fields inside the kit: boxed, comfortable, never stretched wider
than their grid cell. Reuses the .field label/input look already
defined for .admin-content. */
.adm-sec .field label,
.adm-panel .field label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);display:block;margin-bottom:6px}
.adm-sec .field input:not([type=checkbox]):not([type=file]),
.adm-sec .field select,
.adm-sec .field textarea{width:100%;box-sizing:border-box;height:42px;padding:0 12px;font-family:var(--font-sans);font-size:14px;color:var(--color-text-primary);background:var(--surface-default);border:1px solid var(--border-strong);border-radius:var(--radius-md)}
.adm-sec .field textarea{height:auto;min-height:104px;padding:11px 12px;line-height:1.6;resize:vertical}
.adm-sec .field .hint,
.adm-panel .hint{font-size:11.5px;color:var(--neutral-400);margin:5px 0 0}
.adm-req{color:var(--color-primary)}
/* The docked rail */
.adm-aside{position:sticky;top:78px;display:flex;flex-direction:column;gap:16px}
.adm-panel{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden}
.adm-panel > h3{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);margin:0;padding:13px 16px 0}
.adm-panel .panelbody{padding:14px 16px 16px}
.adm-panel.pad{padding:16px}
/* A form docked in the aside (Group A add-forms). Fields stack. */
.adm-formhead{padding:14px 16px;border-bottom:1px solid var(--border-default);display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.012em}
.adm-formhead svg{width:17px;height:17px;stroke:var(--color-primary);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.adm-formbody{padding:16px}
.adm-formbody .field{margin-bottom:13px}
.adm-formbody .field:last-of-type{margin-bottom:0}
.adm-formbody .field label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-secondary);display:block;margin-bottom:6px}
.adm-formbody .field input:not([type=checkbox]):not([type=file]),
.adm-formbody .field select,
.adm-formbody .field textarea{width:100%;box-sizing:border-box;height:40px;padding:0 12px;font-family:var(--font-sans);font-size:14px;background:var(--surface-default);border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--color-text-primary)}
.adm-formbody .field textarea{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
/* Save / primary action that sits at the foot of a rail */
.adm-save{width:100%;height:48px;border:0;border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-text-inverse);font-family:var(--font-sans);font-size:14.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.adm-save:hover{background:var(--color-primary-hover)}
.adm-save-note{font-size:11.5px;color:var(--neutral-400);text-align:center;margin:9px 0 0}
/* Contextual note in a rail — "the AI answers from this" and friends */
.adm-note{font-size:12.5px;line-height:1.55;color:var(--color-text-secondary);padding:12px 14px;background:var(--surface-subtle);border-radius:var(--radius-md);border:1px solid var(--border-default)}
.adm-note b{color:var(--color-text-primary)}
/* An upload target in a rail */
.adm-asset{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--border-strong);border-radius:var(--radius-md);font-size:13px;color:var(--color-text-secondary);cursor:pointer;background:var(--surface-default)}
.adm-asset svg{width:16px;height:16px;stroke:var(--color-text-secondary);fill:none;stroke-width:1.8;flex:none}
.adm-asset + .adm-asset{margin-top:9px}
.adm-asset input[type=file]{font-size:12px;min-width:0}
/* A labelled switch in a rail */
.adm-switch{display:flex;align-items:flex-start;gap:11px}
.adm-switch input{width:17px;height:17px;accent-color:var(--color-primary);margin-top:2px}
.adm-switch .t b{display:block;font-weight:600;font-size:13.5px}
.adm-switch .t span{color:var(--color-text-secondary);font-size:12.5px}
/* ---- Group A work cards ---- */
.adm-card{background:var(--surface-default);border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column}
.adm-card .thumb{aspect-ratio:16/10;background:var(--neutral-100);position:relative;overflow:hidden}
.adm-card .thumb img{width:100%;height:100%;object-fit:cover}
.adm-card .state{position:absolute;top:8px;left:8px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:var(--radius-sm);background:var(--surface-default);color:var(--color-text-secondary)}
.adm-card .state.on{background:var(--color-primary);color:var(--color-text-inverse)}
.adm-card .cardbody{padding:12px 13px 13px;display:flex;flex-direction:column;gap:2px;flex:1}
.adm-card .cardbody h3{font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.adm-card .cardbody .sub{font-size:12.5px;color:var(--color-text-secondary)}
.adm-card .cardbody .cardfoot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between}
.adm-card .cardbody .cardfoot .ord{font-size:11.5px;color:var(--neutral-400);font-variant-numeric:tabular-nums}
.adm-card .cardbody .cardfoot a{font-size:12.5px;font-weight:600;color:var(--color-primary)}
@media(max-width:1080px){
.adm-split{grid-template-columns:1fr}
.adm-aside{position:static}
.adm-fieldgrid{grid-template-columns:1fr}
}
/* ============================================================
Signed-out brand panel — centred showcase
The showcase used to sit top-left with the pitch pinned to the
bottom, leaving the panel lopsided and a gap through the middle.
.auth-center holds the showcase and pitch together and centres
them in the middle of the panel on both axes; the logo stays
pinned top-left. Appended last so it wins over the earlier
desktop rules for .auth-brand.
============================================================ */
@media (min-width:1024px){
.auth-brand{justify-content:center}
.auth-brand .auth-logo{
position:absolute;
top:clamp(32px,3.4vw,52px);
left:clamp(32px,3.4vw,52px);
margin:0;height:auto;
}
.auth-center{
display:flex;flex-direction:column;align-items:center;
gap:34px;width:100%;text-align:center;
}
.auth-center .auth-pitch h2,
.auth-center .auth-pitch p{margin-left:auto;margin-right:auto}
}
/* ==========================================================================
Blue theme — signed-out screens
Light-gray brand panel on the left, white form side on the right, split by
a hairline. The phone screen inside the showcase goes white so the blue
call-to-action reads as the one accent.
========================================================================== */
@media (min-width:1024px){
.auth-side{background:var(--surface-default)}
.auth-brand{border-right:1px solid var(--border-default)}
}
.sc-screen{background:var(--surface-default)}
.auth-link,.auth-foot a{color:var(--color-primary)}
/* With a blue accent, the accent tag no longer reads as a warning. States
that mean "something is wrong" (blocked, suspended, failed, not
configured) use the error colour instead. */
.tag-danger{background:var(--color-error-bg);color:var(--color-error)}
/* ==========================================================================
Admin left bar — navy
The bar is the one large dark surface in the admin, so it carries the
navy; the selected item is the brand blue. Applies to every admin page
and to the slide-out menu on phones (same element).
========================================================================== */
.admin-side{background:var(--nav-bg)}
.admin-side .brandbar{border-bottom-color:var(--nav-line)}
.admin-side .foot{border-top-color:var(--nav-line)}
.admin-nav .group{color:rgba(255,255,255,.42)}
.admin-nav a{color:rgba(255,255,255,.78)}
.admin-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-nav a.on{background:var(--color-primary);color:#fff}
.admin-side .brandbar .tag-red{background:var(--color-primary);color:#fff}
.admin{background:var(--surface-page)}
/* ==========================================================================
Poppins tuning
Poppins is a geometric sans, heavier-looking than the old serif at the
same weight, and it needs less negative tracking. Titles, figures and the
wordmark step up to 600 so the hierarchy survives without a second face.
========================================================================== */
h1,h2,.auth-card h1,.auth-brand .auth-pitch h2{font-weight:600;letter-spacing:-.015em}
h1{letter-spacing:-.02em}
.figure,.stat .n,.dense .stat .n{font-weight:600;letter-spacing:-.02em}
.brandmark span,.auth-logo span,.sc-card-brand span{font-weight:600;letter-spacing:-.01em}
.sc-name,.sc-card-name,.sc-avatar,.admin-top .crumb strong{font-weight:600}
/* ==========================================================================
KPI boxes
Light tiles that alternate pale blue #F2F5FB and pale gray #EEEFF1. The
number and icon take the matching brand colour (blue #406FC5 / navy
#0D1F3A); the icon sits on the right, centred on the number line, and the
label runs underneath. The row uses auto-fit, so however many tiles a page
has, they stretch to the same right edge as the table below.
========================================================================== */
:root{--kpi-blue:#F2F5FB;--kpi-gray:#EEEFF1}
.grid.kpis,
.admin-content .grid.kpis{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat.kpi,
.admin-content .stat.kpi{
display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
align-content:center;align-items:end;column-gap:12px;
min-height:108px;padding:20px 20px 18px;
background:var(--kpi-blue);color:var(--color-text-primary);
border:1px solid rgba(64,111,197,.14);border-radius:var(--radius-lg);box-shadow:none;
}
.kpis > .kpi:nth-child(even),
.admin-content .kpis > .stat.kpi:nth-child(even),
.stat.kpi.kpi-navy,
.admin-content .stat.kpi.kpi-navy{background:var(--kpi-gray);border-color:rgba(13,31,58,.10)}
.kpi-ico{grid-column:2;grid-row:1;align-self:center;display:block;color:var(--color-primary)}
.kpi-ico svg{width:30px;height:30px;display:block}
.kpis > .kpi:nth-child(even) .kpi-ico,
.kpi-navy .kpi-ico{color:var(--nav-bg)}
.stat.kpi .n,
.admin-content .stat.kpi .n,
.dense .stat.kpi .n{
grid-column:1;grid-row:1;margin:0;
font-family:var(--font-sans);font-size:30px;font-weight:600;
line-height:1;letter-spacing:-.02em;color:var(--color-primary);
}
.kpis > .kpi:nth-child(even) .n,
.admin-content .kpis > .stat.kpi:nth-child(even) .n,
.stat.kpi.kpi-navy .n,
.admin-content .stat.kpi.kpi-navy .n{color:var(--nav-bg)}
.stat.kpi .l,
.admin-content .stat.kpi .l{
grid-column:1 / -1;grid-row:2;margin-top:8px;
font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
white-space:nowrap;color:var(--color-text-secondary);
}
a.stat.kpi{transition:transform var(--duration-fast),box-shadow var(--duration-fast)}
a.stat.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(13,31,58,.10)}
a.stat.kpi:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
@media (max-width:640px){
.grid.kpis,.admin-content .grid.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat.kpi,.admin-content .stat.kpi{min-height:96px;padding:16px}
.stat.kpi .n,.admin-content .stat.kpi .n{font-size:26px}
.kpi-ico svg{width:26px;height:26px}
/* an odd tile left alone on the last row takes the full width */
.kpis > .kpi:last-child:nth-child(odd){grid-column:1 / -1}
}
/* ==========================================================================
Admin page body — white
The content area is white; tables get a hairline outline and a pale
gray #EEEFF1 header row so they still read as panels.
========================================================================== */
.admin,.admin-body,.admin-content{background:var(--surface-default)}
.admin-content .table-wrap{
background:var(--surface-default);
border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:auto;
}
thead th,
.dense thead th,
.admin-content thead th{background:var(--kpi-gray);color:var(--color-text-primary)}
/* Section titles above tables and charts (Team, Latest conversations,
Scans per day …): a real heading rather than a small all-caps label. */
.eyebrow.sec-title,
.admin-content .eyebrow.sec-title{
font-family:var(--font-sans);font-size:20px;font-weight:600;line-height:1.3;
letter-spacing:-.01em;text-transform:none;color:var(--color-text-primary);
}
@media (max-width:640px){
.eyebrow.sec-title,.admin-content .eyebrow.sec-title{font-size:18px}
}
/* ==========================================================================
Demo login box — sign-in page
Shows the demo username and password above the Sign in button.
========================================================================== */
.demo-creds{
margin:2px 0 4px;padding:12px 14px;
border:1px dashed var(--border-strong);border-radius:var(--radius-lg);
background:var(--surface-subtle);
}
.demo-tag{
display:inline-block;margin-bottom:8px;
font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--color-primary);
}
.demo-row{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:13px}
.demo-row span{width:38px;flex:none;font-weight:600;color:var(--color-text-secondary)}
.demo-row code{
font-family:var(--font-sans);font-size:13px;color:var(--color-text-primary);
background:var(--surface-default);border:1px solid var(--border-default);
border-radius:6px;padding:2px 8px;user-select:all;
}