/* ============================================================ SKIN V2 — Letterpress (ink + paper) for the REAL worker app Authority: ichustaff Letterpress system apps/staff/mockups/_shared/worker.css · apps/staff/apps/staff-web/src/styles.css · apps/crm/docs/ui-skin.md OPT-IN ONLY. Scoped under `body.skin-v2` → INERT unless the activation script (in index.html) adds class `skin-v2` to via ?skin=v2 or localStorage('skin')==='v2'. Default OFF: zero impact on V1. Reusable CORE copied verbatim from mockups/skin-v2.css. Gallery-only rules (.mtab/.mpanel/.stage/.m-meta/.m-title/.m-side-title/.mcat/.m-filter/.m-skin/ .m-note/.pc-*/.ci-grid/.ci-cell/.fp-*/.mk-email) are EXCLUDED — those classes do not exist in the real app. ============================================================ */ /* Letterpress faces (copied from apps/staff/mockups/_shared/fonts) */ @font-face{font-family:"GT America";src:url("fonts/GT-America-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"GT America";src:url("fonts/GT-America-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"GT America";src:url("fonts/GT-America-Ultra-Light.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap} @font-face{font-family:"GT America Extended";src:url("fonts/GT-America-Extended-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"GT America Extended";src:url("fonts/GT-America-Extended-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap} @font-face{font-family:"Lyon Italic";src:url("fonts/Lyon-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:"Lyon Italic";src:url("fonts/Lyon-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} body.skin-v2{ /* font + ink tokens */ --face-mono:"GT America Mono","IBM Plex Mono",ui-monospace,"SF Mono",monospace; --face-body:"GT America","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; --face-display:"GT America Extended","GT America","Helvetica Neue",sans-serif; --face-italic:"Lyon Italic",Georgia,"Times New Roman",serif; --ink:#0A0A08; --paper:#F3F3E5; --off-paper:#EAE5D2; --ink-08:rgba(10,10,8,.08); --ink-15:rgba(10,10,8,.15); --ink-30:rgba(10,10,8,.30); --ink-50:rgba(10,10,8,.50); --ink-65:rgba(10,10,8,.65); /* reservation tokens -> Letterpress */ --bg:#EFEEDF; --surface:#F3F3E5; --surface2:#EAE5D2; --surface3:#EDEADB; --border:rgba(10,10,8,.12); --border-hi:rgba(10,10,8,.24); --text:#0A0A08; --muted:rgba(10,10,8,.64); /* darkened for AA (was .52 → failed 4.5:1) */ --accent:#0A0A08; --accent-dim:rgba(10,10,8,.07); --accent-border:rgba(10,10,8,.22); --accent-text:#F3F3E5; /* lilac/purple reservation accents -> ink in V2 (Letterpress is ink+paper; V1 keeps lilac) */ --lilac:#0A0A08; --lilac-dim:rgba(10,10,8,.07); --lilac-border:rgba(10,10,8,.22); --purple-dim:rgba(10,10,8,.07); /* status colour tokens -> structured palette (kills gold --c-confirmed #B5AD7F; makes timeline dots/blocks/legend match the pills exactly) */ --c-confirmed:#2563EB; --c-reconfirmed:#4F46E5; --c-delayed:#EA580C; --c-seated:#16A34A; --c-in-service:#0D9488; --c-completed:#64748B; --c-no-show:#DC2626; --c-cancelled:#9CA3AF; --c-new:#D97706; --c-nueva:#D97706; /* SQUARE — the Letterpress signature */ --r:0; --r-sm:0; --r-lg:0; font-family:var(--face-body); -webkit-font-smoothing:antialiased; } /* Square corners + flat fills, universally (Letterpress squares everything incl. dots/avatars) */ body.skin-v2 *{ border-radius:0 !important; } /* EXCEPTION — floor-plan tables/elements keep their real shapes (round stays round, rounded rect stays rounded). We only reskin colour/typography here, never table geometry. Keyed on the inline radius so both Floor Plan and the Tables editor are covered without markup change. */ body.skin-v2 .floor-obj[style*="border-radius:50%"]{ border-radius:50% !important; } body.skin-v2 .floor-obj[style*="border-radius:35px"], body.skin-v2 .floor-obj.element[style*="border-radius"]{ border-radius:35px !important; } body.skin-v2 .floor-obj[style*="border-radius:10px"]{ border-radius:10px !important; } body.skin-v2 .floor-obj[style*="border-radius:8px"]{ border-radius:8px !important; } /* Table status colours — adopt the Cierre de Caja kiosk palette (paper/sage/amber/terracotta): empty = light beige, busy/seated = sage green, late = amber, just-arrived = terracotta. */ body.skin-v2 .floor-obj{ border-width:1.5px !important; } body.skin-v2 .floor-obj.ft-free{ background:#EAE5D2 !important; border-color:rgba(10,10,8,.15) !important; color:#0A0A08 !important; } body.skin-v2 .floor-obj.ft-confirmed{ background:#F3F3E5 !important; border-color:rgba(10,10,8,.5) !important; color:#0A0A08 !important; } body.skin-v2 .floor-obj.ft-seated{ background:#DDE2C7 !important; border-color:#BCC79A !important; color:#3F4D24 !important; } body.skin-v2 .floor-obj.ft-delayed{ background:#ECE2BE !important; border-color:#D6C681 !important; color:#6B5B13 !important; } body.skin-v2 .floor-obj.ft-nueva, body.skin-v2 .floor-obj.ft-new{ background:#EAD7CA !important; border-color:#D4B09A !important; color:#7A2F18 !important; } body.skin-v2 .floor-obj.plant{ background:#DDE2C7 !important; border-color:#BCC79A !important; color:#3F4D24 !important; } body.skin-v2 .floor-obj.element{ background:#EAE5D2 !important; border-color:rgba(10,10,8,.15) !important; } /* Timeline reservation blocks — flat pill recipe in V2 (16% hue tint + hairline border + full-hue 3px left stripe), overriding the V1 inline gradient. Hue comes from --rb-h set on each block. Keeps the timeline in the same visual language as the chips. */ body.skin-v2 .res-block{ background:color-mix(in srgb,var(--rb-h,var(--accent)) 16%,var(--surface)) !important; border:1px solid color-mix(in srgb,var(--rb-h,var(--accent)) 72%,var(--surface)) !important; border-left:3px solid var(--rb-h,var(--accent)) !important; } /* Sent-to-guest cards — unify both channel frames to one Letterpress format: identical neutral icon chips (no green/amber), status badges on the pill recipe. The email/WhatsApp body text itself is left untouched. */ body.skin-v2 .sent-card .sc-ico.wa, body.skin-v2 .sent-card .sc-ico.email{ background:var(--surface2) !important; border:1px solid var(--border) !important; color:var(--text); } body.skin-v2 .sent-card .sc-status.ok{ background:color-mix(in srgb,#16A34A 16%,var(--surface)) !important; border:1px solid color-mix(in srgb,#16A34A 72%,var(--surface)) !important; color:var(--text) !important; } body.skin-v2 .sent-card .sc-status.mock{ background:var(--surface2) !important; border:1px solid var(--border) !important; color:var(--muted) !important; } /* Box-shadow resets — Letterpress is flat */ body.skin-v2 .sc-section, body.skin-v2 .stat-box, body.skin-v2 .rn-modal, body.skin-v2 .rn-panel, body.skin-v2 .mk-drawer, body.skin-v2 .w-card{ box-shadow:none !important; } /* Letterpress is flat — kill every inline drop shadow (auth card, bell panel, modals) */ body.skin-v2 [style*="box-shadow"]{ box-shadow:none !important; } /* and the leftover gold focus ring on form fields */ body.skin-v2 .pf-input:focus, body.skin-v2 .pf-select:focus, body.skin-v2 .pf-textarea:focus, body.skin-v2 input:focus, body.skin-v2 select:focus, body.skin-v2 textarea:focus{ box-shadow:none !important; } /* Headings: GT America Extended, uppercase */ body.skin-v2 .sc-section h3{ font-family:var(--face-display); font-weight:400; text-transform:uppercase; letter-spacing:.05em; font-size:13px; } /* Micro-labels: mono uppercase */ body.skin-v2 .sc-field label, body.skin-v2 .pf-label, body.skin-v2 .stat-lbl{ font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.10em; } /* Primary buttons: ink fill, paper text, mono uppercase */ body.skin-v2 .sc-save, body.skin-v2 .btn-primary, body.skin-v2 .btn-save{ background:var(--ink); color:var(--paper); border:0; font-family:var(--face-mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:11px 16px; } body.skin-v2 .sc-save:hover, body.skin-v2 .btn-primary:hover, body.skin-v2 .btn-save:hover{ background:#2a2a26; } /* Secondary / ghost buttons + tab buttons */ body.skin-v2 .tab-btn, body.skin-v2 .fe-btn, body.skin-v2 .btn-ghost, body.skin-v2 .btn-360{ background:var(--paper); color:var(--ink); border:1px solid var(--ink-15); font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.08em; font-size:10px; } body.skin-v2 .tab-btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); } /* Inputs / selects / textarea */ body.skin-v2 input, body.skin-v2 select, body.skin-v2 textarea{ background:var(--paper); color:var(--ink); border:1px solid var(--ink-15); font-family:var(--face-body); } body.skin-v2 input:focus, body.skin-v2 select:focus, body.skin-v2 textarea:focus{ outline:none; border-color:var(--ink); } /* Search field already lives in a bordered wrap — keep the inner input frameless (no double frame) */ body.skin-v2 .search-input-wrap input{ background:transparent; border:none; } body.skin-v2 .search-input-wrap input:focus{ border:none; } /* Cards / sections */ body.skin-v2 .stat-box{ background:var(--surface); border:1px solid var(--border); } /* sc-section is a borderless content group — never a second frame inside the stage */ body.skin-v2 .sc-section{ background:transparent !important; border:none !important; padding:0 !important; } /* Flat Letterpress list rows instead of boxed surface2 chips (consistent across sections) */ body.skin-v2 .table-row{ background:transparent !important; border:none !important; border-bottom:1px solid var(--border) !important; } body.skin-v2 .table-row:hover{ background:var(--surface2) !important; } /* ============================================================ PILLS — colour hue kept (per-class colour rules untouched), Letterpress EDGES (square via universal rule above) + mono type + flatter fill. We restyle geometry/typography only. ============================================================ */ /* Geometry + type for ALL pills (one consistent inline-block chip box) */ body.skin-v2 .badge, body.skin-v2 .tipo-pill, body.skin-v2 .rn-pill, body.skin-v2 .tag, body.skin-v2 .search-dd-pill, body.skin-v2 .rn-pitem .pill, body.skin-v2 [class*="occ-"]{ display:inline-block !important; vertical-align:middle; border-radius:0 !important; font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.08em; font-weight:500; line-height:1.25; padding:4px 9px !important; font-size:10px; width:auto !important; } /* rb-badges (timeline) are tiny — tint them but keep the compact box */ body.skin-v2 .rb-badge{ border-radius:0 !important; font-family:var(--face-mono); } /* ===== TINT pills — light hue fill + SATURATED hue border + ink text ===== Each pill declares its hue in --ph; one apply-rule builds a Letterpress chip: 16% tint fill + a clearly-coloured 1px border (visible) + dark ink text (AA). Colour code lives in fill + border; text stays legible. */ /* status (semantic: green=good, amber=pending, red=problem, grey=done) */ body.skin-v2 .badge-confirmed{ --ph:#2563EB; } body.skin-v2 .badge-reconfirmed{ --ph:#4F46E5; } body.skin-v2 .badge-delayed{ --ph:#EA580C; } body.skin-v2 .badge-seated{ --ph:#16A34A; } body.skin-v2 .badge-in-service{ --ph:#0D9488; } body.skin-v2 .badge-completed{ --ph:#64748B; } body.skin-v2 .badge-no-show{ --ph:#DC2626; } body.skin-v2 .badge-unseatable{ --ph:#DC2626; } body.skin-v2 .badge-cancelled{ --ph:#9CA3AF; } body.skin-v2 .badge-new, body.skin-v2 .badge-nueva{ --ph:#D97706; } /* occasions (categorical) */ body.skin-v2 .occ-birthday{ --ph:#DB2777; } body.skin-v2 .occ-anniversary{ --ph:#E11D48; } body.skin-v2 .occ-honeymoon{ --ph:#9333EA; } body.skin-v2 .occ-proposal{ --ph:#BE123C; } body.skin-v2 .occ-celebration{ --ph:#0891B2; } body.skin-v2 .occ-vip{ --ph:#CA8A04; } body.skin-v2 .occ-press{ --ph:#65A30D; } body.skin-v2 .occ-other{ --ph:#9CA3AF; } /* channels */ body.skin-v2 .rn-pill.staff{ --ph:#9CA3AF; } body.skin-v2 .rn-pill.web{ --ph:#4F46E5; } body.skin-v2 .rn-pill.wa{ --ph:#16A34A; } body.skin-v2 .rn-pill.email{ --ph:#B45309; } /* alarm/sent-confirm pillrow statuses (were forced grey for lack of --ph) */ body.skin-v2 .rn-pill.conf{ --ph:#2563EB; } body.skin-v2 .rn-pill.alg{ --ph:#DC2626; } body.skin-v2 .rn-pill.suyu{ --ph:#B45309; } body.skin-v2 .rn-pill.paid{ --ph:#16A34A; } /* search dropdown status pills */ body.skin-v2 .search-dd-pill.conf{ --ph:#2563EB; } body.skin-v2 .search-dd-pill.seat{ --ph:#16A34A; } body.skin-v2 .search-dd-pill.completed{ --ph:#64748B; } body.skin-v2 .search-dd-pill.delayed{ --ph:#EA580C; } body.skin-v2 .search-dd-pill.cancelled{ --ph:#9CA3AF; } /* bell-panel item channel pills */ body.skin-v2 .rn-pitem .pill{ --ph:#9CA3AF; } body.skin-v2 .rn-pitem .pill.wa{ --ph:#16A34A; } body.skin-v2 .rn-pitem .pill.web{ --ph:#4F46E5; } body.skin-v2 .rn-pitem .pill.email{ --ph:#B45309; } /* timeline mini badges */ body.skin-v2 .rb-allergy{ --ph:#DC2626; } body.skin-v2 .rb-occasion{ --ph:#E11D48; } /* tipo: map each source --tipo-h hue to the structured-palette hue (mockup tipo pills carry literal hex; real app also sets data-tipo) */ body.skin-v2 .tipo-pill{ --ph:var(--tipo-h,#888); } body.skin-v2 .tipo-pill[style*="--tipo-h:#94a3b8" i], body.skin-v2 .tipo-pill[data-tipo="a-la-carta"]{ --ph:#64748B; } body.skin-v2 .tipo-pill[style*="--tipo-h:#B5AD7F" i], body.skin-v2 .tipo-pill[data-tipo="suyu"]{ --ph:#B45309; } body.skin-v2 .tipo-pill[style*="--tipo-h:#4ade80" i], body.skin-v2 .tipo-pill[data-tipo="suyu-vegetal"]{ --ph:#15803D; } body.skin-v2 .tipo-pill[style*="--tipo-h:#f97316" i], body.skin-v2 .tipo-pill[data-tipo="mixto"]{ --ph:#7C3AED; } body.skin-v2 .tipo-pill[style*="--tipo-h:#38bdf8" i], body.skin-v2 .tipo-pill[data-tipo="solo-bebidas"]{ --ph:#0EA5E9; } body.skin-v2 .tipo-pill[style*="--tipo-h:#a16207" i], body.skin-v2 .tipo-pill[data-tipo="degustacion-cafe"]{ --ph:#92400E; } body.skin-v2 .tipo-pill[style*="--tipo-h:#818cf8" i], body.skin-v2 .tipo-pill[data-tipo="degustacion-liquidos"]{ --ph:#2563EB; } body.skin-v2 .tipo-pill[style*="--tipo-h:#c084fc" i], body.skin-v2 .tipo-pill[data-tipo="degustacion-vinos"]{ --ph:#9333EA; } /* guest tags join the pill system (were bright .tag-* colours) */ body.skin-v2 .tag-vip{ --ph:#CA8A04; } body.skin-v2 .tag-loyal{ --ph:#16A34A; } body.skin-v2 .tag-new{ --ph:#D97706; } body.skin-v2 .tag-returning{ --ph:#4F46E5; } body.skin-v2 .tag-highspender{ --ph:#B45309; } body.skin-v2 .tag-risk{ --ph:#DC2626; } /* apply the tint chip to every pill */ body.skin-v2 .badge, body.skin-v2 [class*="occ-"], body.skin-v2 .tipo-pill, body.skin-v2 .rn-pill, body.skin-v2 .tag, body.skin-v2 .search-dd-pill, body.skin-v2 .rn-pitem .pill, body.skin-v2 .rb-allergy, body.skin-v2 .rb-occasion{ background:color-mix(in srgb, var(--ph,#888) 16%, var(--paper)) !important; border:1px solid color-mix(in srgb, var(--ph,#888) 72%, var(--paper)) !important; color:var(--ink) !important; } /* Reports data-viz gets a lilac accent (charts only) — pure ink read too dead. Scoped to the panel: bars, peak, heatmap ramp, legend + active range toggle pick up lilac via --accent; cards/labels/metrics stay ink. The real worker app renders Reports into #reports-section (the #m-set-reports id is gallery-only). */ body.skin-v2 #reports-section{ --accent:#6C63FF; --accent-dim:rgba(108,99,255,.12); } /* ============================================================ DV3/DV4 — SETTINGS screens, V2-only. Scoped to #settingsContent so V1 and the live (timeline/floor) views are untouched. Many settings renders carry bespoke inline literals (lilac #6c63ff Save buttons, rgba status-tinted action buttons, status dots, status metric reds) that don't pick up the token reskin because they're hard-coded. We neutralise them to Letterpress ink+paper here without editing app.js. V1 (no .skin-v2) keeps every literal. ============================================================ */ /* 1 · Lilac (#6c63ff) — the reservation purple accent collapses to ink in V2. Catches every inline Save/primary button + tinted helper button that hard-codes the lilac (experiences "Book Now", payments/team/zone-rename/exp-edit Saves, floor-editor Copy Zone). Both background and background-color spellings. */ body.skin-v2 #settingsContent [style*="#6c63ff" i], body.skin-v2 #settingsContent [style*="background-color:#6c63ff" i]{ background:var(--ink) !important; background-color:var(--ink) !important; border-color:var(--ink) !important; color:var(--paper) !important; } /* 2 · Row action buttons (Accounts + Team rows) — were rgba status-tints with coloured borders + pastel text. Flatten to Letterpress ghost buttons; the destructive ones keep a hairline only (colour lives in the confirm dialog). */ body.skin-v2 #settingsContent .acct-row button, body.skin-v2 #settingsContent .team-row button{ background:var(--paper) !important; border:1px solid var(--ink-15) !important; color:var(--ink) !important; font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.06em; font-size:10px; } body.skin-v2 #settingsContent .acct-row button:hover, body.skin-v2 #settingsContent .team-row button:hover{ background:var(--surface2) !important; } /* 3 · Account "restaurant" toggle pills + the active status dot — were bright green. Active pill = ink chip on tint; status dot = ink. */ body.skin-v2 #settingsContent .acct-row span[onclick*="acctToggleRest"]{ border-color:var(--ink-30) !important; color:var(--ink) !important; } body.skin-v2 #settingsContent .acct-row span[title="Active"]{ background:var(--ink) !important; } /* 4 · Experiences + Form template cards — Edit/Publish/Unpublish action buttons hard-code rgba green/red/lilac tints. Neutralise to ghost; keep the published /draft status chip readable as ink-on-tint via its own class below. */ body.skin-v2 #settingsContent [onclick^="expEdit"], body.skin-v2 #settingsContent [onclick^="expToggle"], body.skin-v2 #settingsContent [onclick*="toggleFormStatus"], body.skin-v2 #settingsContent [onclick*="openFormPreviewModal"]{ background:var(--paper) !important; border:1px solid var(--ink-15) !important; color:var(--ink) !important; } /* 5 · Reports range toggle — V1 active state is `--accent` fill + literal #111 text. In V2 --accent is the lilac chart accent, so #111 text reads fine, but the inactive buttons should sit on the Letterpress ghost recipe. Force the active button's text to paper so it never collapses to ink-on-ink. */ body.skin-v2 #settingsContent .rng-btn{ background:var(--paper) !important; color:var(--ink) !important; border:1px solid var(--ink-15) !important; font-family:var(--face-mono); text-transform:uppercase; letter-spacing:.08em; } body.skin-v2 #settingsContent .rng-btn.active, body.skin-v2 #settingsContent .rng-btn:hover{ background:#6C63FF !important; color:#fff !important; border-color:#6C63FF !important; } /* 6 · Metric figures — Reports/Guests cards. V1 colours cancellation/no-show/ turnaway numbers red (#ef4444 / #fb923c) inline. Under V2, status numbers go ink (Reports keeps its lilac for the chart accent, not the metric figures). */ body.skin-v2 #settingsContent .metric-val{ color:var(--ink) !important; } /* 7 · Audit action

 chip + form-field type chips — keep them flat ink. */
body.skin-v2 #settingsContent code{ background:var(--surface2) !important; color:var(--ink) !important; }

/* 8 · Floor-editor zone tabs (Tables settings) carry their own pill class with a
   rounded V1 shape; the universal square rule already squares them. Their inline
   lilac/green Copy/Paste buttons are handled by rule 1 + the green tint below. */
body.skin-v2 #settingsContent .fe-btn[style*="34,197,94" i]{
  background:var(--paper) !important; border-color:var(--ink-15) !important; color:var(--ink) !important;
}

/* 9 · Status chips that hard-code their hue via inline `color:${statusColor}`
   (form Published/Draft, experience live/draft badge already uses .badge). The
   form template status pill has no class — leave its data colour (it reads as a
   small tinted chip and is legible); only the surrounding chrome is neutralised
   above. Admin-access lilac info panel → neutral surface. */
body.skin-v2 #settingsContent p.sc-info[style*="108,99,255" i]{
  background:var(--surface2) !important;
  border-color:var(--border) !important;
}

/* ============================================================
   Monoline icon system (.ci-ico) — copied from mockups/index.html