/** * Kunity consultancy — reference / case-study visual tokens * * Editorial service-system diagrams on warm grey paper. * Source of truth: kunity.fi consultancy styling (.kunity-page in Webpages_Kunity/WWW). * * Scope: standalone reference images, HTML share shells, SVG compositions. * Not for: Kunity Labs dark/experimental UI, or legacy case.css site chrome (migrate separately). * * Usage: * * * * * SVG: import values from site/visuals/reference-visual-tokens.json in build scripts. */ @import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600&display=swap"); /* ─── Token root ─────────────────────────────────────────────────────────── */ .kunity-reference-visual, :root.kunity-reference-visual-root { /* Palette — consultancy core (no Labs glow, no category rainbow) */ --kunity-paper: #eeeeee; --kunity-paper-soft: #f9f9f9; --kunity-graphite: #1d1d1b; --kunity-muted: #57564f; --kunity-signal-orange: #f25b26; --kunity-signal-orange-dark: #ce4312; --kunity-line: rgba(29, 29, 27, 0.2); --kunity-line-soft: rgba(29, 29, 27, 0.09); --kunity-accent: var(--kunity-signal-orange); --kunity-accent-text: var(--kunity-signal-orange-dark); /* Signal tints — derived from orange only, for fills behind emphasis */ --kunity-ref-signal-fill: rgb(242 91 38 / 0.08); --kunity-ref-signal-fill-strong: rgb(242 91 38 / 0.14); /* Kunity design-system pilot — canonical layout + readable type (DS-004, DS-005, DS-006, DS-008) */ --kunity-ds-shell-max: 77.5rem; --kunity-ds-reading-column: var(--kunity-ds-shell-max); --kunity-ds-label-min: 1rem; --kunity-ds-label-tracking: 0.08em; --kunity-ds-exhibit-text-min: 0.875rem; /* Typography scale — case narrative (labels use --kunity-ds-label-min) */ --kunity-ref-font: "Sora", ui-sans-serif, system-ui, -apple-system, sans-serif; --kunity-ref-text-hero: clamp(2rem, 4.5vw, 3.25rem); --kunity-ref-text-display: clamp(1.5rem, 3vw, 2rem); --kunity-ref-text-title: clamp(1.125rem, 2vw, 1.35rem); --kunity-ref-text-lead: clamp(1.05rem, 1.7vw, 1.2rem); --kunity-ref-text-body: clamp(1.125rem, 1.35vw, 1.25rem); --kunity-ref-text-caption: var(--kunity-ds-label-min); --kunity-ref-text-micro: var(--kunity-ds-label-min); --kunity-ref-tracking-hero: -0.045em; --kunity-ref-tracking-display: -0.03em; --kunity-ref-tracking-label: var(--kunity-ds-label-tracking); /* Layout rhythm */ --kunity-ref-unit: 8px; --kunity-ref-pad-canvas: clamp(2rem, 5vw, 4rem); --kunity-ref-pad-inner: clamp(1.25rem, 3vw, 2rem); --kunity-ref-gap-block: clamp(1.5rem, 4vw, 2.5rem); --kunity-ref-gap-inline: clamp(0.75rem, 2vw, 1.25rem); /* Diagram geometry — flat 2D, thin crisp lines */ --kunity-ref-stroke-hairline: 0.75; --kunity-ref-stroke-thin: 1; --kunity-ref-stroke-default: 1.25; --kunity-ref-stroke-emphasis: 2; --kunity-ref-radius-sm: 2px; --kunity-ref-radius-md: 4px; --kunity-ref-node-sm: 6px; --kunity-ref-node-md: 10px; --kunity-ref-node-lg: 14px; /* Canonical still-image aspect ratios */ --kunity-ref-aspect-hero: 16 / 9; --kunity-ref-aspect-standard: 3 / 2; --kunity-ref-aspect-wide: 5 / 3; /* Interaction — subordinate to static composition */ --kunity-ref-transition: 180ms ease; } /* ─── Canvas shell ───────────────────────────────────────────────────────── */ .kunity-reference-visual { margin: 0; font-family: var(--kunity-ref-font); font-size: var(--kunity-ref-text-body); font-weight: 400; line-height: 1.75; color: var(--kunity-graphite); background: var(--kunity-paper); -webkit-font-smoothing: antialiased; } .kunity-ref-canvas { position: relative; width: 100%; max-width: var(--kunity-ds-shell-max); margin-inline: auto; padding: var(--kunity-ref-pad-canvas); background: var(--kunity-paper); box-sizing: border-box; } .kunity-ref-canvas--soft { background: var(--kunity-paper-soft); } .kunity-ref-frame { border: 1px solid var(--kunity-line-soft); background: var(--kunity-paper-soft); padding: var(--kunity-ref-pad-inner); } .kunity-ref-frame svg, .kunity-ref-frame img { display: block; width: 100%; height: auto; } /* ─── Typography roles ───────────────────────────────────────────────────── */ .kunity-ref-eyebrow, .kunity-ref-label { margin: 0; font-size: var(--kunity-ref-text-caption); font-weight: 600; letter-spacing: var(--kunity-ref-tracking-label); text-transform: uppercase; color: var(--kunity-accent-text); } .kunity-ref-label--muted { color: var(--kunity-muted); } .kunity-ref-heading { margin: 0; font-size: var(--kunity-ref-text-display); font-weight: 400; line-height: 1.12; letter-spacing: var(--kunity-ref-tracking-display); color: var(--kunity-graphite); } .kunity-ref-heading--hero { font-size: var(--kunity-ref-text-hero); line-height: 1.06; letter-spacing: var(--kunity-ref-tracking-hero); max-width: 14ch; } .kunity-ref-lead { margin: 0; font-size: var(--kunity-ref-text-lead); font-weight: 300; line-height: 1.5; color: var(--kunity-muted); max-width: 36rem; } .kunity-ref-body { margin: 0; font-size: var(--kunity-ref-text-body); font-weight: 400; line-height: 1.6; color: var(--kunity-muted); } .kunity-ref-caption { margin: 0; font-size: var(--kunity-ref-text-caption); font-weight: 400; line-height: 1.45; color: var(--kunity-muted); } .kunity-ref-micro { margin: 0; font-size: var(--kunity-ref-text-micro); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kunity-muted); } .kunity-ref-emphasis { color: var(--kunity-accent-text); } /* ─── Rules & structure ──────────────────────────────────────────────────── */ .kunity-ref-rule { border: none; border-top: 1px solid var(--kunity-line); margin: var(--kunity-ref-gap-block) 0; } .kunity-ref-rule--soft { border-top-color: var(--kunity-line-soft); } .kunity-ref-stack { display: flex; flex-direction: column; gap: var(--kunity-ref-gap-block); } .kunity-ref-cluster { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kunity-ref-gap-inline); } /* ─── Diagram primitives (HTML overlays) ─────────────────────────────────── */ .kunity-ref-node { display: inline-flex; align-items: center; justify-content: center; min-width: var(--kunity-ref-node-md); min-height: var(--kunity-ref-node-md); padding: 0.35rem 0.65rem; border: var(--kunity-ref-stroke-thin) solid var(--kunity-line); border-radius: var(--kunity-ref-radius-sm); background: var(--kunity-paper-soft); font-size: var(--kunity-ref-text-caption); font-weight: 500; color: var(--kunity-graphite); } .kunity-ref-node--signal { border-color: var(--kunity-accent); background: var(--kunity-ref-signal-fill); color: var(--kunity-graphite); } .kunity-ref-node--ghost { border-color: var(--kunity-line-soft); background: transparent; color: var(--kunity-muted); } .kunity-ref-pill { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; border: var(--kunity-ref-stroke-thin) solid var(--kunity-line-soft); font-size: var(--kunity-ref-text-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kunity-muted); } .kunity-ref-pill--signal { border-color: var(--kunity-accent); color: var(--kunity-accent-text); background: var(--kunity-ref-signal-fill); } /* ─── SVG hook classes (when embedding inline SVG in HTML) ───────────────── */ .kunity-ref-svg .ref-stroke-default { stroke: var(--kunity-line); stroke-width: var(--kunity-ref-stroke-default); } .kunity-ref-svg .ref-stroke-soft { stroke: var(--kunity-line-soft); stroke-width: var(--kunity-ref-stroke-thin); } .kunity-ref-svg .ref-stroke-signal { stroke: var(--kunity-accent); stroke-width: var(--kunity-ref-stroke-emphasis); } .kunity-ref-svg .ref-fill-paper { fill: var(--kunity-paper); } .kunity-ref-svg .ref-fill-paper-soft { fill: var(--kunity-paper-soft); } .kunity-ref-svg .ref-fill-signal { fill: var(--kunity-ref-signal-fill); } .kunity-ref-svg .ref-text-label { fill: var(--kunity-muted); font-family: var(--kunity-ref-font); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .kunity-ref-svg .ref-text-label-signal { fill: var(--kunity-accent); } .kunity-ref-svg .ref-text-body { fill: var(--kunity-muted); font-family: var(--kunity-ref-font); font-size: 15px; font-weight: 400; } .kunity-ref-svg .ref-text-heading { fill: var(--kunity-graphite); font-family: var(--kunity-ref-font); font-size: 20px; font-weight: 400; letter-spacing: -0.03em; }