/* ==========================================================================
Toolpath design system, pilot web build
Every printed object is one continuous extruded line; the UI speaks that
language: z-seam dots on cards, extrusion-draw underlines, layer steppers.
RTL-first (html[dir=rtl]); logical properties throughout.
========================================================================== */
/* ==========================================================================
THE PALETTE, read this first
--------------------------------------------------------------------------
The interface is built on a 60 / 30 / 10 split. Every colour below belongs
to one of those three roles, and changing a role repaints everything that
plays it. Nothing downstream is hardcoded any more.
60 percent, THE GROUND. --powder is the page, --paper is every card that
sits on it, with --line and --glass for the quiet edges and wells. This is
most of what the eye sees, and it is meant to stay calm.
30 percent, THE STRUCTURE. --graphite is the body text, the primary button
and the dark sections. Its stepped darks are the "enclosure": --dark-1 is
the enclosure ground, --dark-2 the raised panel on it, --dark-3 the step
above that panel. Swap --graphite together with those three steps and every
dark section follows, so a navy or espresso theme stays coherent instead of
falling back to graphite grey.
10 percent, THE ACCENT. The --accent scale. This is the only colour allowed
to shout: buttons, the headline gradient, focus rings, map markers, spool
chips, the gold plates. The scale runs lightest to deepest:
--accent the 10 percent colour itself
--accent-deep the step that stays readable as small text on the light
ground (WCAG AA on powder, do not lighten it)
--accent-bright the step that stays readable on the dark enclosure
the pale steps gradient and wash stops, listed in order of lightness
--accent-rgb the same channels as plain numbers, for the alpha
washes; always swap it together with --accent
Change the scale and the whole interface repaints with it.
NOT part of the split: the material ramp (--pla, --petg, --tpu, --abs,
--resin, --wood, --acrylic, --metal, --fabric). That is functional colour,
not brand colour. It doubles as the map legend and is always paired with a
letter glyph, so it must never follow the accent. Leave it alone. The
status colours (--ok, --err, --warn) and WhatsApp green are functional too.
--gold, --gold-soft and --gold-deep stay as aliases of the accent, so every
page that already names the gold directly keeps working unchanged.
========================================================================== */
:root {
color-scheme: only light; /* "only": a phone's own dark mode must not repaint a light-only site */
/* ---- 60 percent, the ground ---- */
--powder: #F7F6F2;
--powder-rgb: 247,246,242;
--powder-lift: #F3F1EB; /* skeleton shimmer highlight */
--paper: #FFFEFB;
--paper-rgb: 255,254,251;
--line: #E3E0D8;
--line-soft: #EFEDE7;
--glass: #E8E5DC;
/* ---- 30 percent, the structure and the dark sections ---- */
--graphite: #0A2440;
--graphite-rgb: 10,36,64;
--dark-1: #051C33; /* enclosure ground */
--dark-1-rgb: 5,28,51;
--dark-2: #08243F; /* raised panel inside the enclosure */
--dark-3: #123353; /* the step above a panel */
--dark-0-rgb: 3,20,37; /* one shade under the ground, lightbox scrim */
--ink-soft: #24405C;
--steel: #7C8CA3;
--steel-text: #52657D;
--steel-soft: #9AA6B8; /* placeholder text */
/* ---- 10 percent, the accent, lightest to deepest ---- */
--accent-wash: #FDF1EC; /* palest, the gold plate and gold KPI grounds */
--accent-pale: #F9DCD0; /* second stop of the gold plate */
--accent-pale-warm: #F8DACD; /* second stop of the gold KPI */
--accent-sand: #F2C3AF; /* last stop of the gold plate */
--accent-glow: #FFC7AE; /* brightest, first stop of the dark headline */
/* The tick blue. Deliberately nowhere near the vermillion accent or the teal of the
verification stamp, because its whole job is to be a third, separate signal. */
--protick: #2E7CD6;
--protick-ink: #1F5FA8; /* the label beside it, on the warm ground */
--protick-bright: #6FA9E8; /* the same mark on any dark surface */
--protick-soft: rgba(46,124,214,.12);
--accent-light: #F5CDBA; /* first stop of the light headline */
--accent-kicker: #F2A183; /* section kicker on the dark ground */
--accent-bright: #F0794E; /* readable on the dark enclosure */
--accent: #CB4720; /* the 10 percent colour itself */
--accent-rgb: 203,71,32; /* same channels, for the alpha washes */
--accent-dim: #C0603C; /* last stop of the light headline */
--accent-deep: #A93714; /* WCAG AA on powder, small text safe, keep */
--accent-ink: #8F2D0F; /* section kicker on the light ground */
--accent-soft: rgba(var(--accent-rgb),.10);
--gold: var(--accent);
/* The craft colour a maker can choose, labelled זהב. It happens to equal the brand accent, but it
is not an alias of it: the maker dashboard repoints --accent at its own blue, and a swatch
labelled gold has to stay gold there. Kept at :root so every surface resolves it the same. */
--craft-gold: #CB4720;
--gold-soft: var(--accent-soft);
--gold-deep: var(--accent-deep);
/* ---- functional colour, never follows the accent ---- */
--pla: #E85D3D; --petg: #1FA294; --tpu: #8A63D2; --abs: #4E6E8E; --resin: #7C9A3D;
--wood: #A9743A; --acrylic: #2F8FD8; --metal: #6B7280; --fabric: #C2557A;
--ok: #1FA294; --ok-deep: #136F66;
--err: #B02233; --warn: #B7791F;
--wa: #25D366; --wa-deep: #128C7E;
/* ---- shape, depth and type ---- */
--radius: 14px; --radius-lg: 20px; --radius-sm: 10px;
--grid: rgba(var(--graphite-rgb),.045);
--shadow-card: 0 18px 50px -28px rgba(var(--graphite-rgb),.35);
--shadow-float: 0 22px 60px -24px rgba(var(--graphite-rgb),.55);
--shadow-btn: 0 12px 28px -14px rgba(var(--graphite-rgb),.55);
--font-body: Rubik, "Segoe UI", Arial, sans-serif;
--font-display: "Suez One", Rubik, serif;
--font-mono: "IBM Plex Mono", Consolas, monospace;
--ease: cubic-bezier(.2,.7,.3,1);
--safe-b: env(safe-area-inset-bottom, 0px);
--safe-t: env(safe-area-inset-top, 0px);
/* tokens the blue scheme introduces that the original palette had no equivalent for */
--on-enc-steel: #B8BFD4;
--accent-on-enc: #FFA57F;
--on-accent: #FFFFFF;
--on-accent-base: var(--powder);
--enc-glow-2: 182,199,243;
/* Encoded in the accent scale above (deep for the light ground, base for the plates), so a
theme block that omits them inherits the brand's marks and not the blue scheme's. */
--tick-deep: url("data:image/svg+xml;utf8,");
--tick-accent: url("data:image/svg+xml;utf8,");
--plus-deep: url("data:image/svg+xml;utf8,");
--hero-filter: blur(3px) saturate(.9);
}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* The root the whole type scale hangs from. 16px is the browser default, so naming it changes
nothing today; it exists so the two rules at the bottom of this file can grow it on a large
screen, which is the only way a px based scale can ever answer "the text is small on my PC". */
html { font-size: 16px; scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
/* Opted back in below, because a sticky bar plus smooth scrolling plus hash jumps is the exact
combination vestibular complaints are about, and this declaration was unconditional. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
font-family: var(--font-body);
background:
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px),
var(--powder);
background-size: 26px 26px, 26px 26px, auto;
color: var(--graphite);
font-size: 1rem; line-height: 1.65; font-weight: 400; /* was 300: Light Hebrew on warm paper reads washed out at any contrast ratio */
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
min-height: 100vh; min-height: 100dvh;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 6px; }
/* The deep accent is 2.4 to 2.7 to 1 on the enclosure steps, under the 3 to 1 a control needs,
so keyboard focus was close to invisible on every dark section. The bright step clears it. */
.enclosure :focus-visible, .plate.dark :focus-visible, .tier.dark :focus-visible, .dash-top :focus-visible,
.instrument :focus-visible, .glass.dark :focus-visible,
.enclosure .switch input:focus-visible + .track, .plate.dark .switch input:focus-visible + .track { outline-color: var(--accent-bright); }
::selection { background: rgba(var(--accent-rgb),.35); }
strong, b { font-weight: 600; }
small { font-size: .86em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* ---------- type ---------- */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; line-height: 1.18; text-wrap: balance; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--steel-text); }
.soft { color: var(--ink-soft); }
.small { font-size: 0.84375rem; }
.tiny { font-size: 0.75rem; }
.center { text-align: center; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }
.eyebrow { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: .16em; color: var(--gold-deep); font-weight: 500; text-transform: uppercase; }
.lead { font-size: 1.0625rem; color: var(--ink-soft); max-width: 34em; }
/* ---------- layout ---------- */
.wrap { max-width: 560px; margin: 0 auto; padding: 22px 20px 90px; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 22px 20px 90px; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
.section { margin-block: 30px; }
.section > h2 { font-size: 1.375rem; margin-bottom: 12px; }
.section > h2 .display, h2.display { font-size: 1.5rem; }
hr.seamline { border: 0; height: 1px; background: var(--line); margin-block: 22px; }
/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--graphite); font-weight: 600; font-size: 1.1875rem; }
.topbar .brand:hover { text-decoration: none; }
.pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.75rem; letter-spacing: .12em; color: var(--gold-deep);
border: 1.5px solid var(--gold); border-radius: 999px; padding: 4px 13px; font-weight: 500;
background: var(--gold-soft); white-space: nowrap;
}
.pill.mono { font-family: var(--font-mono); letter-spacing: .1em; font-size: 0.6875rem; }
/* ---------- z-seam motifs ---------- */
.seam { position: relative; height: 5px; margin: 20px 0 18px; }
.seam .path { position: absolute; inset-inline-start: 0; top: 0; height: 5px; border-radius: 3px; background: var(--accent); width: 0; animation: extrude 1s var(--ease) .3s forwards; }
.seam .dot { position: absolute; top: -3px; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); opacity: 0; animation: nozzle 1s var(--ease) .3s forwards; }
@keyframes extrude { to { width: 132px; } }
@keyframes nozzle { 0% { inset-inline-start: 0; opacity: 1; } 92% { opacity: 1; } 100% { inset-inline-start: 126px; opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { 0% { transform: scale(.92); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }
.rise { animation: rise .6s var(--ease) both; }
.rise-2 { animation: rise .6s var(--ease) .12s both; }
.rise-3 { animation: rise .6s var(--ease) .24s both; }
.underline-draw { position: relative; display: inline-block; }
.underline-draw::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -4px; height: 4px; border-radius: 2px; background: var(--accent); width: 0; animation: draw-under .8s var(--ease) .4s forwards; }
@keyframes draw-under { to { width: 100%; } }
/* ---------- cards ---------- */
.card {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 22px 20px; position: relative; box-shadow: var(--shadow-card);
}
.card::before { content: ""; position: absolute; top: -5px; inset-inline-start: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.card.flat { box-shadow: none; }
.card.tight { padding: 16px 16px; border-radius: var(--radius); }
.card.no-seam::before { display: none; }
.card > h2, .card > h3 { margin-bottom: 6px; }
.card .lead { font-size: 0.90625rem; color: var(--steel-text); margin-bottom: 18px; }
.tile {
background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
padding: 13px 15px; display: flex; align-items: center; gap: 13px; position: relative;
}
.tile::before { content: ""; position: absolute; top: -4px; inset-inline-start: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tile .ic { flex: 0 0 38px; height: 38px; border-radius: 10px; background: var(--glass); display: grid; place-items: center; }
.tile b { font-weight: 600; font-size: 0.9375rem; display: block; line-height: 1.3; }
.tile span { font-size: 0.84375rem; color: var(--steel-text); }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.stat .v { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; direction: ltr; unicode-bidi: isolate; text-align: start; }
.stat .k { font-size: 0.78125rem; color: var(--steel-text); margin-top: 3px; }
/* ---------- buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
border-radius: 13px; padding: 13px 20px; font-size: 1rem; font-weight: 600;
border: 1.5px solid transparent; min-height: 48px; white-space: nowrap;
transition: transform .12s, box-shadow .2s, background .15s, border-color .15s, opacity .15s;
text-decoration: none !important; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--graphite); color: var(--powder); box-shadow: var(--shadow-btn); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--on-accent); box-shadow: 0 12px 28px -14px rgba(var(--accent-rgb),.8); }
.btn-gold:hover { transform: translateY(-1px); }
.btn-ghost { background: var(--paper); border-color: var(--line); color: var(--graphite); }
.btn-ghost:hover { border-color: var(--steel); }
.btn-soft { background: var(--glass); color: var(--graphite); }
.btn-wa { background: var(--wa); color: #073B2A; }
.btn-wa:hover { background: #20c15b; }
.btn-danger { background: transparent; border-color: rgba(179,84,63,.4); color: var(--err); }
.btn-danger:hover { background: rgba(179,84,63,.06); }
.btn-sm { padding: 8px 14px; font-size: 0.875rem; min-height: 38px; border-radius: 10px; }
.btn-sm svg { width: 16px; height: 16px; }
.btn-lg { padding: 16px 24px; font-size: 1.0625rem; min-height: 56px; border-radius: 15px; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 44px; min-height: 44px; border-radius: 12px; }
.btn.loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid currentColor; border-color: rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-ghost.loading::after, .btn-soft.loading::after { border-color: rgba(var(--graphite-rgb),.25); border-top-color: var(--graphite); }
.link-btn { color: var(--gold-deep); font-weight: 500; font-size: 0.90625rem; text-decoration: none; }
.link-btn:hover { text-decoration: underline; }
/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
min-height: 42px; border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 14px;
background: #fff; font-size: 0.875rem; font-weight: 400; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px; color: var(--graphite);
transition: border-color .15s, background .15s, transform .12s;
}
.chip:active { transform: scale(.97); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--steel); flex: none; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--gold); background: var(--gold-soft); font-weight: 500; }
.chip.static { cursor: default; background: var(--paper); min-height: 34px; padding: 5px 12px; font-size: 0.84375rem; }
.chip.static:active { transform: none; }
.chip .letter { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; color: var(--on-accent); flex: none; }
/* The light glyph is 3.2 to 3.5 to 1 on the four brightest ramp colours; graphite reads on those
(4.5 and up) and the darker ramps keep the light glyph. The ramp itself is untouched. */
.letter.c-pla, .letter.c-petg, .letter.c-resin, .letter.c-acrylic,
.cchip i.c-pla, .cchip i.c-petg, .cchip i.c-resin, .cchip i.c-acrylic { color: var(--graphite); }
.dot-pla, .c-pla { background: var(--pla); } .dot-petg, .c-petg { background: var(--petg); }
.dot-tpu, .c-tpu { background: var(--tpu); } .dot-abs, .c-abs { background: var(--abs); }
.dot-resin, .c-resin { background: var(--resin); } .dot-wood, .c-wood { background: var(--wood); }
.dot-acrylic, .c-acrylic { background: var(--acrylic); } .dot-metal, .c-metal { background: var(--metal); }
.dot-fabric, .c-fabric { background: var(--fabric); } .dot-gold, .c-gold { background: var(--gold); }
.dot-steel, .c-steel { background: var(--steel); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; background: var(--glass); padding: 4px; border-radius: 12px; }
.seg .chip { justify-content: center; border-radius: 9px; border-color: transparent; background: transparent; min-height: 38px; }
.seg .chip[aria-pressed="true"] { background: var(--paper); border-color: var(--line); box-shadow: 0 2px 8px -4px rgba(var(--graphite-rgb),.3); }
/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; font-weight: 500; border-radius: 999px; padding: 3px 10px; line-height: 1.5; white-space: nowrap; }
.badge-demo { font-family: var(--font-mono); letter-spacing: .1em; font-size: 0.65625rem; color: var(--gold-deep); border: 1px solid var(--gold); background: var(--gold-soft); }
/* on a dark plate the wash is a 10 percent accent over navy, and the deep step reads at 2 to 1 */
.enclosure .badge-demo, .plate.dark .badge-demo, .tier.dark .badge-demo, .dash-top .badge-demo, .instrument .badge-demo, .glass.dark .badge-demo { color: var(--accent-bright); border-color: rgba(var(--accent-rgb),.6); }
.badge-live { background: rgba(31,162,148,.12); color: var(--ok-deep); }
.badge-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.badge-off { background: var(--glass); color: var(--steel-text); }
.badge-pending { background: rgba(183,121,31,.12); color: #7A4F0F; }
.badge-new { background: rgba(232,93,61,.12); color: #9A3A22; }
.badge-kind { background: var(--glass); color: var(--ink-soft); }
.badge-gold { background: var(--gold); color: var(--on-accent); }
.badge-verified { background: rgba(31,162,148,.12); color: var(--ok-deep); }
.badge-tick { background: var(--protick-soft); color: var(--protick-ink); }
.badge-tick svg { width: 13px; height: 13px; color: var(--protick); }
.enclosure .badge-tick, .plate.dark .badge-tick, .dash-top .badge-tick, .glass.dark .badge-tick {
background: rgba(46,124,214,.18); color: var(--protick-bright); }
.enclosure .badge-tick svg, .plate.dark .badge-tick svg { color: var(--protick-bright); }
/* the tick beside a store name, which is where it actually earns its keep */
.name-tick { display: inline-flex; vertical-align: -.12em; margin-inline-start: 8px; color: var(--protick); }
.enclosure .name-tick { color: var(--protick-bright); }
.name-tick svg { display: block; }
.badge-verified svg { width: 13px; height: 13px; }
/* the verified business mark (docs/business-marker.md 5.2): ink on the light ground and cream on the dark
plates, a colour nothing else on the site means (teal is approved, blue the tick, terracotta the CTA).
Monochrome, so it survives a palette swap: 15.7:1 on paper. As a button it opens "מה בדקנו"; the
visual pill stays small and an invisible skirt lifts the tap target to 44 px. */
.badge-biz { background: var(--graphite); color: var(--paper); padding-inline: 8px 11px; min-block-size: 28px; }
.badge-biz .cg { color: var(--accent-bright); flex: none; width: 14px; height: 14px; }
button.badge-biz { position: relative; z-index: 1; cursor: pointer; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
font-family: var(--font-label); font-size: 0.78125rem; font-weight: 600; line-height: 1.5; letter-spacing: normal; text-transform: none; }
/* the skirt reaches 16 px up and 4 px down: a name set in a big face sits just under a badge row, and its line
box would swallow a symmetric skirt (measured on the store room cover) */
button.badge-biz::after { content: ""; position: absolute; inset-block: -16px -4px; inset-inline: -2px; }
button.badge-biz:hover { background: color-mix(in srgb, var(--graphite) 86%, var(--paper)); }
@media (pointer: coarse) { button.badge-biz { padding-block: 4px; } }
.enclosure .badge-biz, .plate.dark .badge-biz, .glass.dark .badge-biz, .dash-top .badge-biz { background: var(--studio-night-ink, #F3ECE3); color: var(--dark-1); }
.enclosure .badge-biz .cg, .plate.dark .badge-biz .cg, .glass.dark .badge-biz .cg, .dash-top .badge-biz .cg { color: var(--accent-deep, var(--accent)); }
.enclosure button.badge-biz:hover, .plate.dark button.badge-biz:hover, .glass.dark button.badge-biz:hover { background: #FFFFFF; }
/* the buyer sheet "מה בדקנו" (assets/biz-public.js): a bottom sheet on a phone, a 440 px panel from 900 px */
.bizp-lead { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 14px; line-height: 1.6; color: var(--ink-soft); }
.bizp-cube { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--graphite); color: var(--accent-bright); }
.bizp-cube .cg { width: 18px; height: 18px; }
.bizp-rows { display: grid; gap: 0; margin: 0 0 14px; border-block: 1px solid var(--line); }
.bizp-row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 12px; padding: 9px 0; }
.bizp-row + .bizp-row { border-top: 1px dashed var(--line); }
.bizp-row dt { color: var(--steel-text); font-size: 0.875rem; }
.bizp-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bizp-credit, .bizp-note { font-size: 0.8125rem; line-height: 1.6; color: var(--steel-text); margin: 0 0 14px; }
.bizp-credit a, .bizp-how a { color: var(--accent-ink, var(--accent-deep)); text-decoration: underline; text-underline-offset: 3px; }
.bizp-not { background: var(--glass); border-radius: 14px; padding: 12px 14px; margin: 0 0 12px; }
.bizp-not h4 { font-size: 0.9375rem; margin: 0 0 6px; }
.bizp-not p { font-size: 0.875rem; line-height: 1.6; margin: 0; color: var(--ink-soft); }
.bizp-not p + p { margin-top: 6px; }
.bizp-how { margin: 0; }
.bizp-how a { display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 600; }
@media (min-width: 900px) { .sheet.bizp-sheet { width: 440px; } }
/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
label, .label { display: block; font-size: 0.84375rem; font-weight: 500; margin-bottom: 6px; }
label .opt, .label .opt { color: var(--steel-text); font-weight: 300; }
.input, input[type=text], input[type=tel], input[type=email], input[type=url], input[type=number], input[type=search], input[type=password], textarea, select {
width: 100%; border: 1.5px solid var(--line); border-radius: 11px; background: #fff; padding: 12px 14px;
font-size: 0.96875rem; color: var(--graphite); transition: border-color .15s, box-shadow .15s; min-height: 48px;
appearance: none; -webkit-appearance: none;
}
/* The arrow sits at the inline end (left in RTL), so the room for it is padding-inline-END; the
start side had it, which indented the value by 34px and ran a long option under the arrow.
background-position has no logical keyword yet, hence the dir=ltr mirror below. */
select { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: left 14px center; padding-inline-end: 34px; }
html[dir=ltr] select { background-position: right 14px center; }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus, select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
input::placeholder, textarea::placeholder { color: var(--steel-text); font-weight: 300; } /* the soft step was 2.5 to 1 on white; the light weight keeps a hint lighter than a value */
input[dir=ltr], .ltr-input { direction: ltr; text-align: end; }
.hint { font-size: 0.78125rem; color: var(--steel-text); margin-top: 5px; }
.error-msg { display: none; font-size: 0.8125rem; color: var(--err); margin-top: 5px; font-weight: 400; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--err); }
.field.invalid .error-msg { display: block; }
.field .count { float: inline-end; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--steel-text); }
.input-row { display: flex; gap: 8px; }
.input-row > * { flex: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84375rem; color: var(--ink-soft); cursor: pointer; }
.check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--gold-deep); flex: none; }
.check.invalid { outline: 2px solid var(--err); outline-offset: 4px; border-radius: 6px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.90625rem; font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 46px; height: 27px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s var(--ease); }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(-19px); }
html[dir=ltr] .switch input:checked + .track::after { transform: translateX(19px); }
.switch input:focus-visible + .track { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* role / option cards */
.roles { display: grid; gap: 8px; }
.role {
position: relative; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; padding-inline-end: 46px;
background: #fff; text-align: start; font-size: 0.90625rem; font-weight: 500; color: var(--steel-text);
transition: border-color .18s, background .18s, color .18s; width: 100%;
}
.role::after { content: ""; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); transition: border-color .18s, background .18s; }
.role[aria-pressed="true"] { border-color: var(--gold); color: var(--graphite); background: var(--gold-soft); }
.role[aria-pressed="true"]::after { border-color: var(--gold-deep); background: radial-gradient(circle, var(--gold-deep) 42%, transparent 48%); }
.role small { display: block; font-weight: 300; font-size: 0.78125rem; margin-top: 2px; }
/* layer stepper (multi-step forms) */
.layers { display: flex; gap: 6px; align-items: flex-end; margin-bottom: 22px; }
.layers .layer { flex: 1; height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.layers .layer::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
html[dir=ltr] .layers .layer::after { transform-origin: left; }
.layers .layer.done::after, .layers .layer.active::after { transform: scaleX(1); }
.layers .layer.active { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.2); }
.step-label { font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: .12em; color: var(--steel-text); margin-bottom: 6px; }
/* ---------- avatar / cover ---------- */
.avatar { width: 56px; height: 56px; border-radius: 18px; overflow: hidden; background: var(--glass); flex: none; box-shadow: 0 0 0 3px var(--paper); }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 40px; height: 40px; border-radius: 12px; }
.avatar.lg { width: 92px; height: 92px; border-radius: 28px; box-shadow: 0 0 0 4px var(--paper), 0 12px 30px -12px rgba(var(--graphite-rgb),.5); }
.avatar.round { border-radius: 50%; }
/* ---------- rating ---------- */
.stars { display: inline-flex; gap: 2px; direction: ltr; unicode-bidi: isolate; }
.stars svg { width: 16px; height: 16px; fill: var(--line); }
.stars svg.on { fill: var(--gold); }
.stars.lg svg { width: 22px; height: 22px; }
.stars-input { display: inline-flex; gap: 4px; direction: ltr; }
.stars-input button { padding: 4px; border-radius: 8px; }
.stars-input button svg { width: 34px; height: 34px; fill: var(--line); transition: fill .12s, transform .12s; }
.stars-input button.on svg, .stars-input button:hover svg { fill: var(--gold); }
.stars-input button:hover { transform: scale(1.08); }
.rating-line { display: inline-flex; align-items: center; gap: 7px; font-size: 0.875rem; }
.rating-line .n { font-family: var(--font-mono); font-weight: 600; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery .g { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--glass); cursor: zoom-in; border: none; padding: 0; }
.gallery .g img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.gallery .g:hover img { transform: scale(1.04); }
.gallery .g .cap { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 10px 8px; font-size: 0.75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); text-shadow: 0 1px 2px rgba(0,0,0,.6); text-align: start; }
.gallery .g.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery .g.add { display: grid; place-items: center; border: 1.5px dashed var(--line); background: transparent; cursor: pointer; color: var(--steel-text); font-size: 0.8125rem; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(var(--dark-0-rgb),.94); display: grid; place-items: center; padding: 20px; animation: fadein .2s both; }
.lightbox img { max-height: 84vh; max-width: 100%; border-radius: 10px; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox .cap { color: #fff; font-size: 0.875rem; text-align: center; margin-top: 12px; }
.lightbox .x { position: absolute; top: 16px; inset-inline-end: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
/* ---------- sheet / dialog ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(var(--graphite-rgb),.45); backdrop-filter: blur(3px); animation: fadein .2s both; }
.sheet {
position: fixed; inset-inline: 0; bottom: 0; z-index: 81; background: var(--paper);
border-radius: 24px 24px 0 0; padding: 14px 20px calc(24px + var(--safe-b)); max-height: 92vh; max-height: 92dvh;
overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -20px 60px -20px rgba(var(--graphite-rgb),.5);
animation: sheet-in .32s var(--ease) both;
}
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { font-size: 1.25rem; margin-bottom: 4px; }
.sheet .x { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--glass); display: grid; place-items: center; }
@media (min-width: 700px) {
.sheet { inset-inline: auto; left: 50%; transform: translateX(-50%); width: 560px; bottom: 40px; border-radius: 24px; padding-bottom: 24px; }
@keyframes sheet-in { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}
.dialog { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px; }
.dialog .box { background: var(--paper); border-radius: 20px; padding: 24px 22px; width: min(440px, 100%); box-shadow: var(--shadow-float); animation: pop .25s var(--ease) both; position: relative; }
/* ---------- toast ---------- */
.toast-host { position: fixed; inset-inline: 0; bottom: calc(18px + var(--safe-b)); z-index: 100; display: grid; place-items: center; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; background: var(--graphite); color: var(--powder); padding: 11px 18px; border-radius: 999px; font-size: 0.90625rem; font-weight: 500; box-shadow: var(--shadow-float); animation: rise .3s var(--ease) both; display: flex; gap: 10px; align-items: center; max-width: 100%; }
.toast.ok { background: var(--ok-deep); }
.toast.err { background: var(--err); }
/* ---------- skeleton / empty ---------- */
.skel { background: linear-gradient(90deg, var(--glass) 25%, var(--powder-lift) 50%, var(--glass) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: 10px; min-height: 14px; }
.empty { text-align: center; padding: 34px 16px; color: var(--steel-text); border: 1.5px dashed var(--line); border-radius: var(--radius-lg); }
.empty b { display: block; color: var(--graphite); font-size: 1rem; margin-bottom: 4px; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); animation: spin .8s linear infinite; margin: 0 auto; }
/* ---------- app shell (tabs) ---------- */
.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-views { flex: 1; position: relative; }
.app-view { display: none; animation: viewin .28s var(--ease) both; padding-bottom: calc(86px + var(--safe-b)); }
.app-view.active { display: block; }
@keyframes viewin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tabbar {
position: fixed; bottom: 0; inset-inline: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
background: rgba(var(--paper-rgb),.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--line); padding: 8px 6px calc(10px + var(--safe-b));
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.65625rem; font-weight: 500; color: var(--steel-text); padding: 4px 0; border-radius: 10px; }
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active, .tab[aria-current="page"] { color: var(--graphite); }
.tab .ind { width: 16px; height: 3px; border-radius: 2px; background: transparent; transition: background .2s; }
.tab.active .ind, .tab[aria-current="page"] .ind { background: var(--gold); }
@media (min-width: 900px) {
.tabbar { position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); grid-auto-columns: max-content; justify-content: center; gap: 28px; padding: 10px 20px; }
.tab { flex-direction: row; gap: 8px; font-size: 0.875rem; padding: 6px 10px; }
.tab .ind { display: none; }
.tab.active, .tab[aria-current="page"] { background: var(--gold-soft); }
.app-view { padding-bottom: 60px; }
}
/* ---------- map ---------- */
.map-wrap { position: relative; height: 100%; min-height: 60vh; background: var(--glass); }
.spool { --c: var(--pla); position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); border: 3px solid var(--c); box-shadow: 0 8px 22px -8px rgba(var(--graphite-rgb),.6); display: grid; place-items: center; cursor: pointer; transition: transform .2s var(--ease); }
.spool:hover, .spool.active { transform: scale(1.12); z-index: 5; }
.spool img, .spool svg { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.spool .pin { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--c); }
.spool.off { filter: grayscale(.9); opacity: .75; }
.spool .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--c); opacity: 0; }
/* A soft breath, not a siren: Daniel found the full pulse-ring (opacity .8, scale 2.2) too intense on a
map with several pins going at once. Smaller, fainter and slower; pulse-ring itself stays for the
single "you are here" dot. */
@keyframes pulse-soft { 0% { transform: scale(.96); opacity: .4; } 100% { transform: scale(1.5); opacity: 0; } }
.spool.available .ring { animation: pulse-soft 3.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .spool.available .ring { animation: none; } }
.spool.demo::after { content: "דוגמה"; position: absolute; top: -10px; inset-inline-end: -8px; font-family: var(--font-label); font-size: 0.6875rem; letter-spacing: normal; background: var(--gold); color: var(--on-accent); padding: 1px 6px; border-radius: 999px; }
/* ---------- lists ---------- */
.list { display: grid; gap: 10px; }
.seller-card { display: flex; gap: 13px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; color: inherit; text-decoration: none !important; transition: transform .15s, border-color .15s; }
.seller-card:hover { transform: translateY(-1px); border-color: var(--steel); }
.seller-card .t { font-weight: 600; font-size: 0.96875rem; line-height: 1.25; }
.seller-card .s { font-size: 0.8125rem; color: var(--steel-text); margin-top: 2px; }
.seller-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.seller-card .price { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; color: var(--ink-soft); }
.dotline { display: inline-flex; gap: 4px; }
.dotline i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* ---------- tables (admin) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.84375rem; }
table.data th, table.data td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data th { font-size: 0.71875rem; font-family: var(--font-mono); letter-spacing: .08em; color: var(--steel-text); font-weight: 500; background: var(--powder); position: sticky; top: 0; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { white-space: nowrap; }
/* ---------- misc ---------- */
.kbd, code { font-family: var(--font-mono); font-size: .9em; background: var(--glass); border-radius: 6px; padding: 1px 6px; }
.copybox { direction: rtl; background: var(--glass); border-radius: 12px; padding: 14px; font-size: 0.8125rem; white-space: pre-wrap; max-height: 220px; overflow: auto; text-align: start; }
.notice { border-radius: var(--radius); padding: 12px 14px; font-size: 0.875rem; display: flex; gap: 10px; align-items: flex-start; }
.notice.gold { background: var(--gold-soft); border: 1px solid rgba(var(--accent-rgb),.4); }
.notice.ok { background: rgba(31,162,148,.1); border: 1px solid rgba(31,162,148,.35); }
.notice.err { background: rgba(179,84,63,.08); border: 1px solid rgba(179,84,63,.35); color: #7E3324; }
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.fab { position: fixed; bottom: calc(92px + var(--safe-b)); inset-inline-end: 16px; z-index: 39; width: 52px; height: 52px; border-radius: 50%; background: var(--graphite); color: var(--powder); display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform .15s; }
.fab:hover { transform: translateY(-2px); }
.fab svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .fab { bottom: 28px; } }
.progress-line { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-line > i { display: block; height: 100%; background: var(--gold); width: 0; transition: width .4s var(--ease); }
.divider-dots { display: flex; gap: 6px; justify-content: center; margin: 18px 0; }
.divider-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.divider-dots i:nth-child(2) { background: var(--gold); }
footer.site { text-align: center; margin-top: 44px; font-size: 0.78125rem; color: var(--steel-text); }
footer.site .m { margin-top: 6px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; }
/* ---------- motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.seam .path { width: 132px; } .seam .dot { display: none; }
.underline-draw::after { width: 100%; }
.layers .layer::after { transition: none; }
}
@media print { .tabbar, .fab, .toast-host, .scrim, .sheet { display: none !important; } body { background: #fff; } }
/* ==========================================================================
TOOLPATH v2, "Enclosure" layer
Richer surfaces for a premium feel: dark enclosure sections with gold glow,
self-drawing toolpaths, plate cards, bento grids, animated numbers, glass
chrome, receipt-style reviews, dashboard shell. Everything degrades to
static under prefers-reduced-motion. RTL-first.
========================================================================== */
/* The enclosure ground is the 30 percent colour, stepped down. It reads the
three --dark steps from the palette at the top of this file, so re-theming
the dark re-themes every dark section. A theme that wants to set only
--graphite can set the three steps to the keyword initial instead, and each
one then mixes itself from the new --graphite rather than staying grey. The
pilot pins the exact values it shipped with, so nothing shifts today. */
:root {
--enc: var(--dark-1, color-mix(in srgb, var(--graphite) 62%, #000));
--enc-2: var(--dark-2, color-mix(in srgb, var(--graphite) 87%, #000));
--enc-3: var(--dark-3, color-mix(in srgb, var(--graphite) 97%, #FFF));
--enc-line: rgba(var(--powder-rgb),.10);
--enc-line-soft: rgba(var(--powder-rgb),.06);
--enc-grid: rgba(var(--powder-rgb),.045);
--on-enc: var(--powder);
--on-enc-soft: rgba(var(--powder-rgb),.66);
--on-enc-mute: rgba(var(--powder-rgb),.42);
--on-enc-steel: #B9C0C9; /* muted small text on the dark ground */
--gold-glow: 0 0 0 1px rgba(var(--accent-rgb),.35), 0 26px 70px -26px rgba(var(--accent-rgb),.55);
--gold-glow-strong: 0 0 0 1px rgba(var(--accent-rgb),.5), 0 30px 90px -20px rgba(var(--accent-rgb),.75);
--shadow-plate: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px -34px rgba(var(--graphite-rgb),.5), 0 8px 22px -14px rgba(var(--graphite-rgb),.35);
--wrap-x: 20px;
}
/* ---------- surfaces ---------- */
.enclosure {
position: relative; color: var(--on-enc);
background:
radial-gradient(900px 520px at 85% -12%, rgba(var(--accent-rgb),.20), transparent 62%),
radial-gradient(700px 400px at 5% 110%, rgba(31,162,148,.10), transparent 60%),
linear-gradient(var(--enc-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px),
var(--enc);
background-size: auto, auto, 26px 26px, 26px 26px, auto;
}
.enclosure.plain { background: linear-gradient(var(--enc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px), var(--enc); background-size: 26px 26px, 26px 26px, auto; }
.enclosure .muted, .enclosure .hint { color: var(--on-enc-soft); }
.enclosure .soft, .enclosure .lead { color: var(--on-enc-soft); }
.enclosure a { color: var(--accent-bright); }
.enclosure .eyebrow { color: var(--accent-bright); }
.enclosure .card, .enclosure .tile, .enclosure .stat { background: var(--enc-2); border-color: var(--enc-line); color: var(--on-enc); box-shadow: 0 30px 60px -36px rgba(0,0,0,.8); }
.enclosure .tile span, .enclosure .stat .k { color: var(--on-enc-soft); }
.enclosure .tile .ic { background: var(--enc-3); }
.enclosure .chip, .enclosure .chip.static { background: var(--enc-3); border-color: var(--enc-line); color: var(--on-enc); }
.enclosure .chip[aria-pressed="true"], .enclosure .chip.on { border-color: var(--gold); background: rgba(var(--accent-rgb),.16); }
.enclosure .btn-ghost { background: transparent; border-color: rgba(var(--powder-rgb),.22); color: var(--on-enc); }
.enclosure .btn-ghost:hover { border-color: rgba(var(--powder-rgb),.5); }
.enclosure .btn-primary { background: var(--powder); color: var(--graphite); }
/* `.enclosure a` above outranks plain .btn-gold, so a gold LINK in a dark section was painted with
--accent-bright on the accent fill (2.07:1, seen on /makers). The label is --on-accent everywhere. */
.enclosure .btn-gold { color: var(--on-accent); }
.enclosure .pill { border-color: rgba(var(--accent-rgb),.7); color: var(--accent-bright); background: rgba(var(--accent-rgb),.12); }
.enclosure hr.seamline { background: var(--enc-line); }
.enclosure input, .enclosure textarea, .enclosure select { background: var(--enc-3); border-color: var(--enc-line); color: var(--on-enc); }
.enclosure .topbar .brand { color: var(--on-enc); }
.enclosure .badge-kind { background: var(--enc-3); color: var(--on-enc-soft); }
.enclosure table.data th { background: var(--enc-2); color: var(--on-enc-soft); }
.enclosure table.data td { border-color: var(--enc-line-soft); }
.enclosure .table-wrap { background: var(--enc-2); border-color: var(--enc-line); }
.enclosure .empty { border-color: var(--enc-line); color: var(--on-enc-soft); }
.enclosure .empty b { color: var(--on-enc); }
.enclosure .bar { background: var(--enc-3); }
.enclosure .skel { background: linear-gradient(90deg, var(--enc-2) 25%, var(--enc-3) 50%, var(--enc-2) 75%); background-size: 200% 100%; }
/* full-bleed section inside a centred wrapper */
.bleed { margin-inline: calc(50% - 50vw); padding-inline: max(var(--wrap-x), calc(50vw - 540px)); }
.bleed-wide { margin-inline: calc(50% - 50vw); padding-inline: max(var(--wrap-x), calc(50vw - 560px)); }
.section-pad { padding-block: clamp(44px, 8vw, 96px); }
.section-pad.tight { padding-block: clamp(28px, 5vw, 56px); }
/* ---------- type scale v2 ---------- */
.display-xl { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 7.2vw, 72px); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
.display-lg { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5.2vw, 48px); line-height: 1.1; text-wrap: balance; }
.display-md { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3.6vw, 32px); line-height: 1.18; }
/* The gradient is decorative emphasis and must never cost legibility, so every stop has to clear
the threshold on its own ground, not just the midpoint. Hebrew reads right to left, so the 100%
stop lands on the FIRST words read: it was ending on the base accent over the dark enclosure,
which measured 3.87 to 1 in blue and made the opening word disappear. Both ends now stay inside
a safe band for their ground. --accent-on-enc falls back for a theme that has not defined it.
The far stop on the LIGHT ground is --accent-grad-end and not --accent-ink, which it used to be.
--accent-ink is the section kicker, the piece of type Daniel said he could not read, so it was
darkened for him until it resolved to the same value as --accent-deep at 55 percent, and the
second half of every light headline came out one flat colour. The chain keeps --accent-ink as
the fallback, so a theme that declares one and not the other is unchanged. */
.grad-text { background: linear-gradient(100deg, var(--accent) 0%, var(--accent-deep) 55%, var(--accent-grad-end, var(--accent-ink, var(--accent-deep))) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.enclosure .grad-text { background: linear-gradient(100deg, var(--accent-glow) 0%, var(--accent-bright) 50%, var(--accent-on-enc, var(--accent-bright)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead-lg { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; max-width: 36em; font-weight: 400; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); }
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 1px; }
.enclosure .kicker { color: var(--accent-bright); }
/* The dash beside a kicker and the short rule under a heading are both drawn in --gold, which is the
base accent, and on a dark ground that is the weakest thing on screen. Measured: #B0542F is
3.40:1 on the enclosure #051C33 and 3.11:1 on a dark plate #08243F, so a non text graphic clears
its 3:1 with nothing to spare, immediately beside a label measured at 7.04:1. The bright step is
7.04:1 and 6.43:1 on those same two grounds, which puts the mark and the word it belongs to in
the same weight instead of half of the pair fading out. Light grounds keep --gold. */
.enclosure .kicker::before, .enclosure .divider-gold,
.plate.dark .kicker::before, .plate.dark .divider-gold,
.tier.dark .kicker::before, .tier.dark .divider-gold { background: var(--accent-bright); }
/* a dark plate or a dark tier card is the same ground as the enclosure, but neither carries
the class, so the light ground kicker colour was winning there at 1.9 to 1 */
.plate.dark .kicker, .plate.dark .eyebrow, .plate.dark .stamp,
.tier.dark .kicker, .tier.dark .eyebrow { color: var(--accent-bright); }
.big-num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(34px, 6vw, 56px); line-height: 1; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.big-num.gold { color: var(--gold); }
/* the same number sitting on a dark plate needs the step measured for that ground */
.enclosure .big-num.gold, .plate.dark .big-num.gold, .tier.dark .big-num.gold,
.enclosure .counter .u, .plate.dark .counter .u { color: var(--accent-bright); }
.price-xl { font-family: var(--font-mono); font-weight: 600; font-size: clamp(36px, 7vw, 64px); line-height: 1; direction: ltr; unicode-bidi: isolate; letter-spacing: -.02em; }
/* ---------- plate cards ---------- */
.plate {
position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
padding: 24px 22px; box-shadow: var(--shadow-plate); overflow: hidden;
transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s;
}
.plate::before { content: ""; position: absolute; inset-inline: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity: .9; }
.plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; opacity: .55; mask-image: linear-gradient(180deg, transparent 0, #000 40%); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
.plate > * { position: relative; z-index: 1; }
.plate.hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-plate), var(--gold-glow); border-color: rgba(var(--accent-rgb),.45); }
.plate.dark { background: var(--enc-2); border-color: var(--enc-line); color: var(--on-enc); box-shadow: 0 40px 80px -40px rgba(0,0,0,.85); }
.plate.dark::after { background-image: linear-gradient(var(--enc-grid) 1px, transparent 1px), linear-gradient(90deg, var(--enc-grid) 1px, transparent 1px); }
.plate.gold { background: linear-gradient(135deg, var(--accent-wash), var(--accent-pale) 55%, var(--accent-sand)); border-color: rgba(var(--accent-rgb),.55); }
.plate.gold::after { opacity: .35; }
.plate .plate-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-deep); margin-bottom: 14px; }
.plate .plate-ic svg { width: 24px; height: 24px; }
.plate.dark .plate-ic { background: rgba(var(--accent-rgb),.16); color: var(--accent-bright); }
.plate h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.plate p { color: var(--steel-text); font-size: 0.90625rem; line-height: 1.6; }
.plate.dark p { color: var(--on-enc-soft); }
.tilt { transition: transform .18s ease-out; will-change: transform; }
/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bento > * { grid-column: span 6; }
@media (min-width: 640px) {
.bento > .b-2 { grid-column: span 2; } .bento > .b-3 { grid-column: span 3; }
.bento > .b-4 { grid-column: span 4; } .bento > .b-6 { grid-column: span 6; }
}
.bento .tall { min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; }
/* ---------- glow + glass ---------- */
.glow-gold { box-shadow: var(--gold-glow); }
.btn-gold { position: relative; }
.btn-gold:hover { box-shadow: var(--gold-glow-strong); }
.btn-gold.btn-lg { font-size: 1.125rem; padding-inline: 30px; }
.btn-light { background: var(--powder); color: var(--graphite); }
.btn-outline-light { background: transparent; border-color: rgba(var(--powder-rgb),.35); color: var(--on-enc); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--accent-bright); } /* only ever placed on dark grounds */
.glass { background: rgba(var(--paper-rgb),.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 20px 50px -30px rgba(var(--graphite-rgb),.45); }
.glass.dark { background: rgba(var(--dark-1-rgb),.76); border-color: rgba(var(--powder-rgb),.1); color: var(--on-enc); }
.glass-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; padding: 10px 14px calc(12px + var(--safe-b)); display: flex; gap: 10px; align-items: center; }
.glass-bar > .btn { flex: 1; }
.glass-bar > .btn-icon { flex: 0 0 48px; }
@media (min-width: 900px) { .glass-bar { position: sticky; bottom: 16px; border-radius: 18px; margin-top: 20px; } }
/* ---------- self-drawing toolpath background ---------- */
.toolpath-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.toolpath-bg svg { width: 100%; height: 100%; display: block; }
.toolpath-bg .tp-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tp-draw 2.6s var(--ease) forwards; }
@keyframes tp-draw { to { stroke-dashoffset: 0; } }
.toolpath-bg.dark { mix-blend-mode: screen; }
.has-bg { position: relative; }
.has-bg > *:not(.toolpath-bg) { position: relative; z-index: 1; }
/* ---------- hero scene (3D print on canvas) ---------- */
.hero-scene { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; display: grid; place-items: center; }
.hero-scene canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 2; }
.hero-scene .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb),.35); inset: 8%; z-index: 1; }
.hero-scene .ring.r2 { inset: 18%; border-color: rgba(var(--accent-rgb),.22); border-style: dashed; animation: spin 60s linear infinite; }
.hero-scene .ring.r3 { inset: 30%; border-color: rgba(var(--accent-rgb),.16); }
.hero-scene .bed { position: absolute; left: 12%; right: 12%; bottom: 8%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7; z-index: 1; }
.hero-scene .glow { position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb),.28), transparent 65%); filter: blur(12px); z-index: 0; }
.hero-scene .tag { position: absolute; z-index: 3; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; background: rgba(var(--dark-1-rgb),.7); color: var(--on-enc); border: 1px solid var(--enc-line); backdrop-filter: blur(6px); }
.hero-scene .tag.t1 { top: 12%; inset-inline-end: 4%; } .hero-scene .tag.t2 { bottom: 16%; inset-inline-start: 2%; }
@media (max-width: 640px) { .hero-scene { max-width: 340px; } }
/* ---------- filament rack / marquee ---------- */
.marquee { overflow: hidden; display: flex; gap: 14px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 14px; flex: none; width: max-content; animation: marquee-rtl 34s linear infinite; }
.marquee:hover .track, .marquee.static .track { animation-play-state: paused; }
@keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
html[dir=ltr] .marquee .track { animation-name: marquee-ltr; }
@keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.spool-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 0.875rem; white-space: nowrap; }
.spool-tag .s { --c: var(--pla); width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, var(--paper) 0 24%, var(--c) 26% 100%); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--c); flex: none; }
.spool-tag .l { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--steel-text); letter-spacing: .08em; }
.enclosure .spool-tag { background: var(--enc-2); border-color: var(--enc-line); color: var(--on-enc); }
.enclosure .spool-tag .s { box-shadow: 0 0 0 2px var(--enc-2), 0 0 0 3px var(--c); background: radial-gradient(circle, var(--enc-2) 0 24%, var(--c) 26% 100%); }
/* ---------- the craft rail's edge fade ----------
The same mask the marquee above wears, for the same reason: a row that runs off the side of the
screen has to say so at its ends, or the last card a reader can see looks like the last card
there is. Two guards, both deliberate. It is off from 760px up, where the rail stops being a
scroller and lays itself out whole, because a mask on a row that does not scroll only fades the
outer column of it. And it is off while anything inside has focus, so a keyboard outline on the
first or last card is never the thing that gets faded away.
The rail itself is drawn on the landing and its layout lives in that page's own style block;
only the mask is here, so a second page that grows one inherits the behaviour. */
@media (max-width: 759px) {
.cap-rail {
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cap-rail:focus-within { mask-image: none; -webkit-mask-image: none; }
}
/* ---------- layer steps (how it works) ---------- */
.layer-steps { display: grid; gap: 0; position: relative; }
.layer-steps::before { content: ""; position: absolute; inset-inline-start: 23px; top: 24px; bottom: 24px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--gold), rgba(var(--accent-rgb),.15)); }
.layer-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 14px 0; }
.layer-step .n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 0.875rem; background: var(--graphite); color: var(--accent-bright); box-shadow: 0 0 0 5px var(--powder); position: relative; z-index: 1; }
.enclosure .layer-step .n { background: var(--gold); color: var(--on-accent); box-shadow: 0 0 0 5px var(--enc); }
.layer-step b { display: block; font-size: 1.125rem; margin-bottom: 4px; }
.layer-step p { color: var(--steel-text); font-size: 0.90625rem; line-height: 1.6; }
.enclosure .layer-step p { color: var(--on-enc-soft); }
/* stacked "print building up" illustration */
.layer-stack { display: grid; gap: 6px; align-content: end; justify-items: center; }
.layer-row { height: 12px; border-radius: 6px; background: var(--graphite); opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.layer-row.on { opacity: 1; transform: none; }
.layer-row.gold { background: var(--gold); }
.enclosure .layer-row { background: var(--on-enc-soft); }
.enclosure .layer-row.gold { background: var(--gold); }
/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.from-start { transform: translateX(18px); }
html[dir=ltr] .reveal.from-start { transform: translateX(-18px); }
.reveal.in.from-start { transform: none; }
/* Nothing ever adds .in without JavaScript, and .rise and its two delayed siblings hand their
opening frame to an animation the same engine has to run, so with scripts off every one of these
elements sits at opacity 0 for good. That is most of a page, blank, for a reader who turned
scripts off and for any crawler that does not run them. The storefront already answers this the
same way for the summary it renders on the server. Content first: visible, unmoved, still. */
@media (scripting: none) {
.reveal, .reveal.from-start, .rise, .rise-2, .rise-3 {
opacity: 1; transform: none; animation: none; transition: none;
}
}
/* ---------- stats v2 ---------- */
.kpi { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; overflow: hidden; }
.kpi::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--accent); }
.kpi .v { font-family: var(--font-mono); font-weight: 600; font-size: 1.875rem; line-height: 1; direction: ltr; unicode-bidi: isolate; text-align: start; letter-spacing: -.02em; }
.kpi .k { font-size: 0.78125rem; color: var(--steel-text); margin-top: 6px; }
.kpi .d { position: absolute; top: 14px; inset-inline-end: 14px; font-family: var(--font-mono); font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px; background: var(--glass); color: var(--ink-soft); }
.kpi .d.up { background: rgba(31,162,148,.14); color: var(--ok-deep); }
.kpi .d.warn { background: rgba(183,121,31,.14); color: #7A4F0F; }
.kpi.gold { background: linear-gradient(135deg, var(--accent-wash), var(--accent-pale-warm)); border-color: rgba(var(--accent-rgb),.5); }
.kpi.dark { background: var(--enc-2); border-color: var(--enc-line); color: var(--on-enc); }
.kpi.dark .k { color: var(--on-enc-soft); }
.kpi.dark .v { color: var(--accent-bright); }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: 10px; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: var(--accent); opacity: .55; min-height: 2px; }
.spark i:last-child { opacity: 1; }
/* ---------- receipt-style review ---------- */
.receipt { position: relative; background: #fff; border: 1px dashed var(--line); border-radius: 14px; padding: 16px 16px 14px; }
.receipt::before, .receipt::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--powder); top: 50%; transform: translateY(-50%); }
.receipt::before { inset-inline-start: -8px; } .receipt::after { inset-inline-end: -8px; }
.receipt .rh { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .1em; color: var(--steel-text); margin-bottom: 8px; }
.receipt .job { font-size: 0.78125rem; color: var(--steel-text); margin-top: 6px; }
.receipt .reply { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--powder); font-size: 0.84375rem; border-inline-start: 3px solid var(--gold); }
.enclosure .receipt { background: var(--enc-2); border-color: var(--enc-line); }
.enclosure .receipt::before, .enclosure .receipt::after { background: var(--enc); }
.enclosure .receipt .reply { background: var(--enc-3); }
/* ---------- dashboard shell (manage / admin) ---------- */
.dash { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.dash-top { position: sticky; top: 0; z-index: 30; }
.dash-top .inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--wrap-x); max-width: 1180px; margin: 0 auto; }
.dash-body { max-width: 1180px; margin: 0 auto; width: 100%; padding: 18px var(--wrap-x) 100px; }
.dash-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 10px; }
.dash-nav::-webkit-scrollbar { display: none; }
.dash-nav .chip { flex: none; }
.dash-nav .chip .cnt { font-family: var(--font-mono); font-size: 0.6875rem; padding: 1px 7px; border-radius: 999px; background: var(--glass); color: var(--ink-soft); }
.dash-nav .chip[aria-pressed="true"] .cnt { background: var(--gold); color: var(--on-accent); }
@media (min-width: 1000px) {
.dash { grid-template-rows: auto; grid-template-columns: 250px 1fr; }
.dash-top { position: sticky; top: 0; height: 100vh; height: 100dvh; grid-row: 1; }
.dash-top .inner { flex-direction: column; align-items: stretch; padding: 22px 18px; height: 100%; }
.dash-nav { flex-direction: column; overflow: visible; padding: 18px 0; gap: 4px; }
.dash-nav .chip { justify-content: space-between; border-radius: 12px; min-height: 44px; }
.dash-body { padding: 30px 34px 80px; }
}
.dash-top.enclosure .chip { background: transparent; border-color: transparent; color: var(--on-enc-soft); }
.dash-top.enclosure .chip[aria-pressed="true"] { background: rgba(var(--accent-rgb),.16); color: var(--on-enc); border-color: rgba(var(--accent-rgb),.35); }
.dash-top.enclosure .chip .cnt { background: var(--enc-3); color: var(--on-enc-soft); }
.dash-top.enclosure .chip[aria-pressed="true"] .cnt { background: var(--gold); color: var(--on-accent); }
.dash-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dash-h h1 { font-size: clamp(24px, 4vw, 32px); }
.ribbon { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.06)); border: 1px solid rgba(var(--accent-rgb),.45); margin-bottom: 16px; }
.ribbon b { font-size: 0.9375rem; }
.row-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; transition: border-color .15s, transform .15s; }
.row-card:hover { border-color: var(--steel); }
.row-card.new { border-color: rgba(var(--accent-rgb),.6); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12); }
.row-card .t { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.row-card .s { font-size: 0.8125rem; color: var(--steel-text); margin-top: 2px; }
.row-card .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .row-card { grid-template-columns: 44px 1fr; } .row-card .actions { grid-column: 1 / -1; justify-content: flex-start; } }
.feed { display: grid; gap: 0; }
.feed-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.875rem; }
.feed-item:last-child { border-bottom: 0; }
.feed-item .fi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--glass); color: var(--ink-soft); }
.feed-item .fi svg { width: 18px; height: 18px; }
.feed-item .fi.gold { background: var(--gold-soft); color: var(--gold-deep); }
.feed-item .fi.ok { background: rgba(31,162,148,.12); color: var(--ok-deep); }
.feed-item time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--steel-text); white-space: nowrap; }
/* ---------- misc v2 ---------- */
.avatar.xl { width: 116px; height: 116px; border-radius: 34px; box-shadow: 0 0 0 5px var(--paper), 0 20px 40px -16px rgba(var(--graphite-rgb),.55); }
/* A store character (supabase/045; ui.js avatarHtml writes data-pic) is a round disc with transparent
corners. Whatever size and corner a page gives its .avatar, the frame, its ring and its fill follow
the disc: important, because a dozen page rules set a corner radius at a higher specificity. A
maker's own upload carries no data-pic and keeps the rounded square. */
.avatar[data-pic] { border-radius: 50% !important; background: transparent !important; }
.avatar[data-pic] img { object-fit: contain; }
.cover-hero { position: relative; border-radius: 0 0 28px 28px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--glass); }
.cover-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--dark-1-rgb),.12), transparent 45%, rgba(var(--dark-1-rgb),.45)); }
@media (min-width: 900px) { .cover-hero { aspect-ratio: 21 / 7; border-radius: 28px; } }
.mono-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-text); }
.dotgrid { background-image: radial-gradient(rgba(var(--graphite-rgb),.12) 1px, transparent 1.2px); background-size: 14px 14px; }
.divider-gold { height: 2px; width: 72px; border-radius: 1px; background: var(--gold); }
.stamp { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--gold); color: var(--gold-deep); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .14em; transform: rotate(-2deg); background: var(--gold-soft); }
.enclosure .stamp { color: var(--accent-bright); }
.timeline-h { display: flex; gap: 0; align-items: center; }
.timeline-h .st { flex: 1; text-align: center; font-size: 0.71875rem; color: var(--steel-text); position: relative; padding-top: 16px; }
.timeline-h .st::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(50%); width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
html[dir=ltr] .timeline-h .st::before { transform: translateX(-50%); }
.timeline-h .st::after { content: ""; position: absolute; top: 4px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line); z-index: -1; }
.timeline-h .st:last-child::after { display: none; }
.timeline-h .st.done::before, .timeline-h .st.done::after { background: var(--gold); }
.timeline-h .st.now::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.25); }
.timeline-h .st.now { color: var(--graphite); font-weight: 600; }
.drop { border: 2px dashed var(--line); border-radius: 18px; padding: 26px 18px; text-align: center; color: var(--steel-text); background: var(--paper); transition: border-color .15s, background .15s; cursor: pointer; }
.drop.over, .drop:hover { border-color: var(--gold); background: var(--gold-soft); }
.drop b { display: block; color: var(--graphite); margin-bottom: 4px; }
.enclosure .drop { background: var(--enc-2); border-color: var(--enc-line); color: var(--on-enc-soft); }
.enclosure .drop b { color: var(--on-enc); }
.enclosure .drop.over, .enclosure .drop:hover { background: rgba(var(--accent-rgb),.1); border-color: var(--gold); }
.instrument { background: var(--enc-2); border: 1px solid var(--enc-line); border-radius: 22px; padding: 22px 20px; color: var(--on-enc); box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04); }
.instrument .readout { font-family: var(--font-mono); color: var(--accent-bright); direction: ltr; unicode-bidi: isolate; }
.instrument input[type=range] { width: 100%; accent-color: var(--accent-bright); }
.range-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
@media (prefers-reduced-motion: reduce) {
.toolpath-bg .tp-line { animation: none; stroke-dashoffset: 0; }
.marquee .track { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.layer-row { opacity: 1; transform: none; transition: none; }
.hero-scene .ring.r2 { animation: none; }
}
/* material object icon inside chips and tiles */
.mat-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; }
.mat-ic svg { display: block; }
.chip .mat-ic { margin-inline-end: 1px; }
.mat-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.enclosure .mat-tile { background: var(--enc-2); border-color: var(--enc-line); }
.mat-tile b { font-size: 0.90625rem; font-weight: 500; }
.mat-tile span { display: block; font-size: 0.75rem; color: var(--steel-text); }
/* ================================================================
Small type legibility pass
IBM Plex Mono carries no Hebrew glyphs, so every small Hebrew label was silently falling back to
a system mono face: thin, cramped and pale. The 0.18em tracking made it worse, because Hebrew has
no ascenders or descenders to hold a word's shape, so letterspacing pulls it apart rather than
opening it up. Labels move to Rubik at a size you can actually read, with normal tracking and more
contrast. The mono face stays only where the content really is monospaced data: numbers, prices,
URLs, codes and timestamps.
================================================================ */
:root { --font-label: Rubik, "Segoe UI", Arial, sans-serif; }
.kicker, .eyebrow, .step-label, .mono-label, .stamp, .badge, .badge-demo,
.stat .k, .kpi .d, .receipt .rh, .timeline-h .st, .dash-nav .chip .cnt,
table.data th, .mat-tile span, .gallery .g .cap, .spool-tag .l, .hero-scene .tag,
.tab, .field .count, footer.site .m {
font-family: var(--font-label);
letter-spacing: normal;
text-transform: none;
}
/* the eyebrow above a section: this is the one he could not read */
.kicker { font-size: 0.8125rem; font-weight: 600; letter-spacing: .02em; color: var(--accent-ink); }
.kicker::before { width: 22px; }
.enclosure .kicker { color: var(--accent-kicker); }
.eyebrow, .step-label, .mono-label, .stamp { font-size: 0.78125rem; font-weight: 600; color: var(--steel-text); }
.stat .k, .kpi .d { font-size: 0.8125rem; font-weight: 500; color: var(--steel-text); }
.receipt .rh, .timeline-h .st { font-size: 0.78125rem; font-weight: 500; }
.tab { font-size: 0.75rem; font-weight: 600; }
.badge { font-size: 0.78125rem; font-weight: 600; }
.badge-demo { font-size: 0.75rem; font-weight: 600; }
.hint, .tiny, .role small, .receipt .job { font-size: 0.8125rem; line-height: 1.55; color: var(--steel-text); }
.field .count { font-size: 0.75rem; }
.gallery .g .cap, .mat-tile span { font-size: 0.8125rem; font-weight: 500; }
table.data th { font-size: 0.78125rem; font-weight: 600; }
.dash-nav .chip .cnt { font-size: 0.75rem; font-weight: 600; }
footer.site { font-size: 0.84375rem; }
footer.site .m { font-size: 0.78125rem; }
.chip .letter { font-size: 0.75rem; font-weight: 700; }
.pill { font-size: 0.8125rem; }
/* dark surfaces need a lighter muted tone than the light-ground one */
.enclosure .hint, .enclosure .tiny, .enclosure .eyebrow, .enclosure .stat .k,
.enclosure .kpi .d, .enclosure .stamp, .enclosure .mono-label { color: var(--on-enc-steel); }
/* keep the mono face where the content genuinely is data */
.pill.mono, .big-num, .price-xl, .mono, code, kbd, samp,
.url, .feed-item time, .receipt .rh time { font-family: var(--font-mono); }
/* --------------------------------------------------------------------------
WORDMARK
The brand lockup, set apart from the navigation beside it. Rubik 600 at 16px
is the same type as the links next to it, so the name read as a page title
rather than a logo; Suez One at 20 gives it its own voice. The diminutive
ending carries the mark's own orange: מפעל is a factory, ון makes it a small
one, which is the product in two letters.
The whole palette is the logo's palette now, so the wordmark ending takes the
accent scale rather than a colour written out here.
-------------------------------------------------------------------------- */
.wordmark { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem;
letter-spacing: -.01em; line-height: 1; white-space: nowrap;
--wm-accent: var(--accent-deep); }
.enclosure .wordmark, .dash-top .wordmark, .plate.dark .wordmark { --wm-accent: var(--accent-bright); }
.wordmark .s { color: inherit; }
.wordmark i { font-style: normal; color: var(--wm-accent); }
/* The orange trades halves with the mark. In the marketplace it sits on מפעל, the factory itself;
inside a storefront it moves to the ון that makes it a small one, which is the half that belongs
to the person whose shop you are standing in. */
.wordmark[data-variant="home"] .s { color: var(--wm-accent); }
.wordmark[data-variant="home"] i { color: inherit; }
.topbar .brand { gap: 11px; }
.f-brand .wordmark { font-size: 1.625rem; }
.brandrow .wordmark { font-size: 1.3125rem; }
/* --------------------------------------------------------------------------
FOUNDER ENTRY
The pill that offers the control room to a signed in founder before an admin
session exists. Same seat and same voice as the admin bar that replaces it,
so the two read as one control that changes state.
-------------------------------------------------------------------------- */
.admin-entry { position: fixed; inset-inline-start: 14px; bottom: calc(92px + var(--safe-b, 0px)); z-index: 46; }
.admin-entry button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px;
border-radius: 999px; background: var(--graphite); color: var(--on-enc);
border: 1.5px solid var(--accent); box-shadow: var(--gold-glow);
font-family: var(--font-mono); font-size: 0.71875rem; letter-spacing: .1em; }
.admin-entry button svg { width: 16px; height: 16px; color: var(--accent-bright); }
.admin-entry button:hover { border-color: var(--accent-bright); }
@media (min-width: 900px) { .admin-entry { bottom: 24px; } }
/* --------------------------------------------------------------------------
HERO FILM
The landing and invitation heroes show a short looping film instead of the
rotating print they used to: the product is every small workshop, not one
machine. The frame keeps the scene's glow and the two floating tags, so the
composition the pages were built around does not move.
-------------------------------------------------------------------------- */
/* In flow on purpose. The old scene was a square with absolutely placed children and got its
height from aspect-ratio; as a stretched grid item that ratio is ignored and the box
collapses to nothing. The film box carries its own ratio and the tags hang off it. */
.hero-scene.hero-film { aspect-ratio: auto; max-width: 580px; width: 100%; display: block; padding-block: 16px; }
.hero-film .film { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; z-index: 2;
background: var(--dark-2); box-shadow: 0 46px 90px -44px rgba(0,0,0,.95), 0 0 0 1px var(--enc-line); }
.hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-film .glow { inset: 10% -4%; border-radius: 40%; }
.hero-film .tag { z-index: 3; }
.hero-film .tag.t1 { top: 0; inset-inline-end: 3%; }
.hero-film .tag.t2 { bottom: 0; inset-inline-start: 3%; }
@media (max-width: 640px) { .hero-scene.hero-film { max-width: none; } .hero-film .film { border-radius: 18px; } }
/* ---------------------------------------------------------------- the held confirm
confirmDialog({ hold: 5 }). The button stays disabled while a bar fills across it, so the pause
is visible rather than a button that mysteriously does nothing. Disabled here must NOT look like
the usual half faded disabled: it is counting, not unavailable. */
.btn.btn-hold { position: relative; overflow: hidden; isolation: isolate; }
.btn.btn-hold[disabled] { opacity: 1; cursor: progress; }
/* currentColor rather than a fixed tint: btn-danger is an OUTLINED button with red text on paper,
so a white sweep was invisible on it, while a filled primary needs a light one. The button's own
ink is the one colour that reads on both. */
.btn.btn-hold::before {
content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: -1;
width: var(--hold, 0%); background: currentColor; opacity: .17;
}
/* ============================================================================
LARGE SCREENS: one scale, not one size.
Daniel, on a monitor around 2000px wide: "i zoomed in ctrl+mousewheel to 160%
it looks better. no empty space, bigger text and all, maybe set it like this
as default for all pages (for pc atleast)."
160% cannot be the default, because the same number would be overbearing on a
13 inch laptop and absurd on a phone. What was actually wrong is that the type
did not grow with the screen at all. Now it does, in two steps, and because
every size in this file is rem the whole scale moves together: body copy,
labels, badges, the lot. Spacing is still px on purpose, so the layout gains
density rather than simply inflating.
========================================================================== */
@media (min-width: 1600px) { html { font-size: 17px; } }
@media (min-width: 2000px) { html { font-size: 18px; } }
/* ============================================================================
THE SITE BAR
One bar, the same four slots in the same order, on every page a buyer can
reach: the mark, one browse destination, the maker's door, the way back in.
Sticky on / and /app; the same bar, same order, NOT sticky on /s/ and
/join (body.bar-static), because the storefront already owns a permanent
72px band at the bottom and two permanent bands on a 667px phone is 19% of
it spent on chrome. Thumbtack ships exactly this arrangement: a nav that
computes to static and scrolls away, with the primary action pinned instead.
Researched rather than assumed. Of nine marketplaces rendered live, seven put
the supply-side call to action in the persistent bar as a direct link to
registration (Thumbtack /pro, TaskRabbit /become-a-tasker, Airtasker
/au/earn-money, Bark /sellers/create, Houzz /pro?source=header, Yelp,
Treatstock /l/become-supplier). The two that bury it, Etsy in a footer column
and Airbnb collapsed inside the profile menu, have millions of sellers.
Mifalon has three. And zero of the nine carry a MAP in the header, which is
why the map is a view inside browse here and not a destination beside it.
========================================================================== */
/* W3C technique C43, and the sufficient technique for SC 2.4.11 Focus Not Obscured. A logical
property, so it is correct in RTL and would still be correct in LTR. The 10px is breathing room,
not decoration: a focus ring flush against the bar reads as obscured. */
:root {
--bar-h: 56px;
scroll-padding-block-start: calc(var(--bar-h) + 10px);
}
@media (min-width: 900px) { :root { --bar-h: 62px; } }
/* The skip link. This lived only in index.html's inline