/* FLUID BRAND freeform — hand-drawn rendering layer for vector diagrams
spec: fluid-handdrawn/1.2
Companion stylesheet to fluid-freeform-sprite.svg + fluid-freeform.js.
AGENT CONTRACT
--------------
To draw anything hand-drawn — flows, diagrams, illustrations — emit
plain SVG with one of these classes; the wobble + recolor + (for
arrows) bristles are handled automatically:
← any wobbly line
← stroke + arrowhead + bristles
← wobbly outlined box
← any closed shape
… ← wobbly handwriting
…
COLOR
`--ink` (CSS custom property) controls stroke + text + marker fill.
Inherits from any ancestor; falls back to `currentColor`.
TUNING KNOBS (CSS custom properties — inherit from any ancestor)
--stroke line weight in px
--bristles bristle count (arrows only)
--bristle-spread lateral fan width (× --stroke)
--bristle-trim how far back bristles pull from endpoints
--bristle-width-ratio bristle stroke / nominal stroke
--marker-scale multiplier on arrowhead size
Wobble amplitude is set on the filter (#wobble-displacement scale=…).
These knobs are intentionally NOT redeclared on `.fluid-arrow` etc.
so that ancestor overrides (a diagram container, :root, a live
tuning UI) propagate through the cascade. Each knob is consumed
via `var(--knob, var(--fluid-default-knob))`. */
/* ----------------------------------------------------------------- */
/* Handwriting font */
/* ----------------------------------------------------------------- */
@font-face {
font-family: "FLFont";
/* Served from Fluid DAM (ImageKit). Was ../Fonts/flfontbold.ttf which doesn't resolve on Fluid CDN. */
src: url("https://ik.imagekit.io/fluid/theme/fluid-command-chey/we-flfontbold_NGe60eLVBe.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
/* ----------------------------------------------------------------- */
/* Defaults */
/* ----------------------------------------------------------------- */
:root {
/* Brand line-weight scale (in css px). */
--fluid-stroke-hairline: 2;
--fluid-stroke-thin: 3;
--fluid-stroke-medium: 5;
--fluid-stroke-bold: 8;
--fluid-stroke-heavy: 12;
--fluid-default-stroke: var(--fluid-stroke-medium);
--fluid-default-bristles: 3;
--fluid-default-bristle-spread: 0.3;
--fluid-default-bristle-trim: 0.5;
--fluid-default-bristle-width-ratio: 0.85;
--fluid-default-marker-scale: 1;
}
/* ----------------------------------------------------------------- */
/* .fluid-stroke — base wobble for any line/path */
/* ----------------------------------------------------------------- */
.fluid-stroke {
fill: none;
stroke: var(--ink, currentColor);
stroke-width: var(--stroke, var(--fluid-default-stroke));
stroke-linecap: round;
stroke-linejoin: round;
filter: url(#wobble-stroke);
color: var(--ink, currentColor);
}
/* ----------------------------------------------------------------- */
/* .fluid-arrow — extends .fluid-stroke with arrowhead + bristles */
/* (presence of .fluid-arrow alone is enough; .fluid-stroke is */
/* optional sugar on the same element if you want both selectors */
/* to apply.) */
/* ----------------------------------------------------------------- */
.fluid-arrow {
fill: none;
stroke: var(--ink, currentColor);
stroke-width: var(--stroke, var(--fluid-default-stroke));
stroke-linecap: round;
stroke-linejoin: round;
filter: url(#wobble-stroke);
marker-end: url(#fluid-arrowhead);
color: var(--ink, currentColor);
}
/* All expanded paths (incl. lean) use butt linecap — round caps poke
half a stroke past the marker tip, and we never want that. The
marker carrier covers the abrupt end. */
.fluid-arrow[data-fluid-expanded] {
stroke-linecap: butt;
}
/* Non-lean expansion: original path is one bristle in the bundle,
dropped to bristle width. (data-fluid-expanded="1" = lean = keep
full width.) */
.fluid-arrow[data-fluid-expanded]:not([data-fluid-expanded="1"]) {
stroke-width: calc(
var(--stroke, var(--fluid-default-stroke))
* var(--bristle-width-ratio, var(--fluid-default-bristle-width-ratio))
);
}
.fluid-arrow-marker-carrier {
fill: none;
stroke: var(--ink, currentColor);
stroke-opacity: 0;
color: var(--ink, currentColor);
pointer-events: none;
filter: url(#wobble-stroke);
}
.fluid-arrow-bristle {
fill: none;
stroke: var(--ink, currentColor);
stroke-width: calc(
var(--stroke, var(--fluid-default-stroke))
* var(--bristle-width-ratio, var(--fluid-default-bristle-width-ratio))
);
stroke-linecap: round;
stroke-linejoin: round;
filter: url(#wobble-stroke);
color: var(--ink, currentColor);
}
/* Named weights — agents pick the class, get a consistent line.
Apply to .fluid-arrow OR .fluid-stroke. */
.fluid-arrow.hairline, .fluid-stroke.hairline,
.fluid-node.hairline, .fluid-text.hairline { --stroke: var(--fluid-stroke-hairline); }
.fluid-arrow.thin, .fluid-stroke.thin,
.fluid-node.thin, .fluid-text.thin { --stroke: var(--fluid-stroke-thin); }
.fluid-arrow.medium, .fluid-stroke.medium,
.fluid-node.medium, .fluid-text.medium { --stroke: var(--fluid-stroke-medium); }
.fluid-arrow.bold, .fluid-stroke.bold,
.fluid-node.bold, .fluid-text.bold { --stroke: var(--fluid-stroke-bold); }
.fluid-arrow.heavy, .fluid-stroke.heavy,
.fluid-node.heavy, .fluid-text.heavy { --stroke: var(--fluid-stroke-heavy); }
/* Arrowhead variants. */
.fluid-arrow.open-tip { marker-end: url(#fluid-arrowhead-open); }
.fluid-arrow.barb-tip { marker-end: url(#fluid-arrowhead-barb); }
.fluid-arrow.no-tip { marker-end: none; }
/* Bidirectional / start markers. */
.fluid-arrow.tip-start { marker-start: url(#fluid-arrowhead); }
.fluid-arrow.tip-start.open-tip{ marker-start: url(#fluid-arrowhead-open); }
.fluid-arrow.tip-start.barb-tip{ marker-start: url(#fluid-arrowhead-barb); }
/* Perf mode for very dense diagrams (also a deliberate aesthetic
choice — one clean line instead of a bristle bundle). */
.fluid-arrow.lean { --bristles: 1; }
/* ----------------------------------------------------------------- */
/* .fluid-node — wobbly outlined closed shape (rect/circle/ellipse/ */
/* polygon/path-with-fill). Use for boxes, callouts, container */
/* shapes in flow diagrams. */
/* ----------------------------------------------------------------- */
.fluid-node {
fill: var(--fluid-node-fill, #fff);
stroke: var(--ink, currentColor);
stroke-width: var(--stroke, var(--fluid-default-stroke));
stroke-linecap: round;
stroke-linejoin: round;
filter: url(#wobble-stroke);
color: var(--ink, currentColor);
}
.fluid-node.no-fill { fill: none; }
.fluid-node.solid { fill: var(--ink, currentColor); }
/* ----------------------------------------------------------------- */
/* .fluid-text — wobbly handwriting. Works on plain or with */
/* for text-on-path. */
/* Wobble is the same filter as strokes; on text it makes letters */
/* shimmy like ink — be conservative with displacement scale. */
/* ----------------------------------------------------------------- */
.fluid-text {
font-family: "FLFont", system-ui, sans-serif;
font-weight: bold;
fill: var(--ink, currentColor);
stroke: none;
filter: url(#wobble-stroke);
color: var(--ink, currentColor);
}
.fluid-text.outline {
fill: none;
stroke: var(--ink, currentColor);
stroke-width: var(--stroke, var(--fluid-default-stroke));
}
.fluid-text-center { text-anchor: middle; }
.fluid-text-end { text-anchor: end; }
.fluid-text-middle { dominant-baseline: middle; }