/* The brand system layer, shared by both products this codebase serves. * * Three committed dark systems, selected server-side by `data-system` on * . Which of them a visitor can be shown is decided by the deployment's * Brand PACK, not by the visitor: Slicora ships CINEMA and SILVER and lets a * tester switch, and the B2B product ships CLINICAL alone. See lib/brand.php. * Nothing here styles anything: it only publishes `--s-*` source tokens, which * app.css, the page stylesheets and the viewer map onto the names they already * use. That is the whole reason this refactor is small — the site was already * driven by custom properties, so the systems swap values rather than rules. * * Every consumer reads its token with a fallback to the pre-brand value, e.g. * `--bg: var(--s-bg, #0b0d10)`. If this file ever fails to load, the site * renders exactly as it did before the brand landed instead of collapsing to * unstyled black-on-black. That fallback is load-bearing; do not remove it. * * The @font-face block below is the ONE exception to "nothing here styles * anything", and it is here because the tokens name families that have to * exist. They did not: this file asked for Söhne Breit and Domaine Display * for months with no webfont behind either, so every visitor got the next * name in the stack — Avenir Next on a Mac, Segoe UI on Windows. Both * "committed systems" rendered in the same borrowed face, which is most of * why the page read as generic. The faces below are self-hosted and SIL OFL, * so they load for everyone and cost nothing per seat. * * SILVER — light reflected off metal. The film archive. No hue anywhere; the * accent is brightness, which is why links there carry an underline * (see --s-link-decoration) — a near-white link is invisible as a * colour and has to be marked some other way. * CINEMA — light scattered through a body. The path tracer as the brand. * Warmth belongs to the imagery; the chrome stays close to hueless, * which is why --s-cyan is a desaturated cool grey here rather than * the app's saturated 3D cyan. A saturated hue in the chrome is the * single thing that turns this direction into a wellness brand. */ /* Two variable faces, both SIL OFL, both self-hosted. * * ARCHIVO carries Cinema and both systems' UI. It has a real width axis * (62–125%), which is the whole reason it is here: Söhne Breit's relationship * to Söhne is width, not a different family, and `--s-display-stretch` below * reproduces exactly that — one file, two voices, no second download. * BODONI MODA carries Silver's display line. Domaine Display is a Didone and * Playfair (the old fallback) is a transitional; Bodoni is the real thing, * and its optical-size axis is what keeps a Didone's hairlines from * disappearing at display sizes. * * latin + latin-ext only. Adding a script means adding its subset here. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/bodoni-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/fonts/bodoni-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* SOURCE SERIF 4 carries Slicefield's display line — and no other system's. * The brand research (docs/slicefield-brand-identity.md) found zero legal-tech * competitors using a serif display face despite "court-credible" being the * entire register; briefs and opinions are set in serifs, hospitals are not. * A text-optical serif rather than Bodoni because exhibit captions and matter * names must survive 15px, which a Didone's hairlines do not. Variable, both * axes kept: opsz is what lets one file serve a 68px hero and a 15px caption. */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/sourceserif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/sourceserif-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root, :root[data-system="cinema"] { --s-bg: #060606; --s-panel: #0e0d0c; --s-line: #1a1815; --s-line-soft: #131211; --s-text: #ede3d2; --s-muted: #8a8279; --s-dim: #5c564f; --s-accent: #e39b72; /* subsurface — the live element, never a fill */ --s-accent-ink: #1e0e06; /* type ON the accent */ --s-accent-soft: rgba(227, 155, 114, 0.12); --s-accent-line: rgba(227, 155, 114, 0.42); --s-good: #7fa88c; --s-bad: #e0655f; --s-warn: #d9a05b; --s-cyan: #9fb8c4; /* volumetric / 3D, cooled to sit in this world */ --s-chrome: rgba(14, 13, 12, 0.82); /* viewer toolbar scrim */ --s-radius: 14px; --s-link-decoration: none; --s-glyph: url("/assets/glyph-cinema.svg"); --s-hero: url("/assets/hero-cinema.jpg"); --s-hero-opacity: 0.85; --s-font-display: "Archivo", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --s-font-ui: "Archivo", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --s-display-track: -0.03em; --s-display-weight: 600; /* The "Breit" in Söhne Breit. Only Archivo answers it; the fallbacks have no width axis and simply ignore the value, which is the correct degradation. */ --s-display-stretch: 114%; } :root[data-system="silver"] { --s-bg: #08090a; --s-panel: #101214; --s-line: #1b1e21; --s-line-soft: #15181a; --s-text: #c9ced4; --s-muted: #6b7378; --s-dim: #4a5155; --s-accent: #f2f5f8; /* specular — brightness, not hue */ --s-accent-ink: #0a0b0d; --s-accent-soft: rgba(242, 245, 248, 0.10); --s-accent-line: rgba(242, 245, 248, 0.34); --s-good: #a8b4ac; --s-bad: #d98c86; --s-warn: #c9b48a; --s-cyan: #aeb9c0; --s-chrome: rgba(16, 18, 20, 0.82); --s-radius: 5px; /* A near-white link cannot be told from body text by colour alone. */ --s-link-decoration: underline; --s-glyph: url("/assets/glyph-silver.svg"); --s-hero: url("/assets/hero-silver.jpg"); /* the grey render carries less light than the warm one and disappears at the same opacity */ --s-hero-opacity: 0.95; --s-font-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, "Times New Roman", serif; --s-font-ui: "Archivo", "Neue Haas Grotesk Text", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --s-display-track: -0.012em; --s-display-weight: 400; /* A Didone has no width axis and must not be stretched — synthetic widening is exactly what destroys the thick/thin contrast it exists for. */ --s-display-stretch: 100%; } /* CLINICAL — the B2B product's only system (Brand pack `tomura`/`hounsfield`). * * Not a third arm of the Silver/Cinema experiment: those two dress a consumer * product and this dresses an instrument sold to a practice. It is a * recombination of what the other two got right — Silver's colour LOGIC * (emphasis carried by brightness, chrome held at near-zero saturation) with * Cinema's stage and its Archivo, and neither one's display face. * * Three rules, and they are the reasons rather than the taste: * * 1. NO WARM PIXEL IN THE CHROME. Cinema states this at the top of this file * and then sets a 67%-saturation accent that reaches the slice scrubber * directly under a greyscale MRI. A warm chrome beside neutral greyscale * shifts the perceived white point of the image by simultaneous contrast, * and a neutral surround is the convention every clinician has been * trained inside. Warmth belongs to the imagery, which is where it stays. * 2. THE ACCENT IS DELIBERATELY UNREMARKABLE. For this audience an unusual * hue is paid for in credibility; differentiation comes from restraint and * density, not from owning a colour. Its job is wayfinding, nothing else. * 3. EVERY VALUE CARRIES A VERIFIED RATIO against --s-bg (noted below). * Cinema's --s-dim is 2.68:1 and its --s-line 1.14:1 — the first fails AA * outright and the second dissolves every border in the product, which is * most of why its library reads flat. Professionals navigate by structure. */ :root[data-system="clinical"] { --s-bg: #0a0b0c; --s-panel: #141618; --s-line: #33393f; /* 1.55:1 on panel — structure you can see */ --s-line-soft: #1c1f22; --s-text: #e9ecee; /* 16.60:1 — neutral, NOT a cream */ --s-muted: #a2a9af; /* 8.28:1 */ --s-dim: #7b8288; /* 5.06:1 — passes AA body, unlike Cinema's */ --s-accent: #6ba3f0; /* 7.62:1 — H215 S82%, interactive affordance only */ --s-accent-ink: #04101f; /* 7.39:1 on the accent */ --s-accent-soft: rgba(107, 163, 240, 0.12); --s-accent-line: rgba(107, 163, 240, 0.42); --s-good: #4cb782; --s-bad: #f2665e; --s-warn: #e0a53f; --s-cyan: #5ec8d6; /* volumetric / 3D — the app-wide meaning is unchanged */ --s-chrome: rgba(20, 22, 24, 0.82); --s-radius: 10px; /* The accent is a hue, so a link is distinguishable without one. Silver needs the underline because its accent is brightness; this does not. */ --s-link-decoration: none; --s-glyph: url("/assets/glyph-clinical.svg"); --s-hero: url("/assets/hero-clinical.jpg"); --s-hero-opacity: 0.85; /* One family, both roles. A second display face is a download and a licence for a difference this product does not need to make. */ --s-font-display: "Archivo", "Neue Haas Grotesk Text", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --s-font-ui: "Archivo", "Neue Haas Grotesk Text", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --s-display-track: -0.02em; --s-display-weight: 600; /* No synthetic widening. Cinema's 114% reproduces Söhne Breit and reads as the AI-lab register; an instrument has no reason to shout its width. */ --s-display-stretch: 100%; } /* SLICEFIELD — the litigation product's own system (2026-08-06, decided in * docs/slicefield-brand-identity.md after the Legora study; it previously * borrowed CLINICAL). Same skeleton as clinical — dark neutral ground so the * greyscale image stays the reference white, structure you can see, verified * ratios — but dressed for a different reader: a partner deciding whether * this looks like the premium legal tools they already pay for, not a * clinician trained inside a hospital's neutrality. * * Three deliberate departures from clinical, each with its reason: * * 1. THE ACCENT IS AMBER, AND IT MEANS EVIDENCE. Clinical's rule is "the * accent is deliberately unremarkable" — right for clinicians, wrong for * this buyer, where differentiation IS the brief. Amber is unclaimed * across both neighbouring categories (every imaging vendor is blue, the * premium legal tier is dark-with-one-electric-accent), and it is the * colour of the highlighter on a record and the exhibit sticker — the * accent does the marking work the product sells. 8.51:1 on the ground, * so it also passes as text where the app needs it to. * 2. THE DISPLAY FACE IS A SERIF. Court documents are serifs; zero * competitors use one. UI stays Archivo — the serif is a display voice, * not a reading face, and the app chrome keeps clinical's discipline. * 3. THE GROUND IS WARM INK, NOT HOSPITAL BLACK. #0e1114 against clinical's * #0a0b0c: two steps of warmth, read side by side with Filevine's warm * near-black — the register the buyer prices as expensive. Still far * below any level that would shift a scan's perceived white point. * * WARN moved off amber (clinical's #e0a53f would be the accent wearing a * status hat) to an orange-red between accent and bad — a warning must not * look like wayfinding in the one system whose accent is warm. */ :root[data-system="slicefield"] { --s-bg: #0e1114; --s-panel: #14181c; --s-line: #363d45; /* 1.62:1 on panel — structure you can see */ --s-line-soft: #1d2228; --s-text: #f4f1ea; /* 16.79:1 — paper, not clinical neutral */ --s-muted: #a9a49a; /* 7.63:1 */ --s-dim: #8b867c; /* 5.23:1 — passes AA body */ --s-accent: #e0a24a; /* 8.51:1 — the exhibit-marker amber */ --s-accent-ink: #221503; /* 8.02:1 on the accent */ --s-accent-soft: rgba(224, 162, 74, 0.12); --s-accent-line: rgba(224, 162, 74, 0.42); --s-good: #4cb782; /* 7.58:1 */ --s-bad: #f2665e; /* 6.17:1 — also the exhibit-mark red */ --s-warn: #e07b3f; /* 6.38:1 — NOT amber; see header note */ --s-cyan: #5ec8d6; /* volumetric / 3D — the app-wide meaning is unchanged */ --s-chrome: rgba(20, 24, 28, 0.82); --s-radius: 10px; /* The accent is a hue; a link is distinguishable without an underline. */ --s-link-decoration: none; --s-glyph: url("/assets/glyph-slicefield.svg"); /* The terraces render — contour strata under raking amber light, chosen over the film-stack and contour-field candidates (brand doc, §imagery). Already ink-dark at the edges, so it runs nearer full strength than the photographic heroes. */ --s-hero: url("/assets/hero-slicefield.jpg"); --s-hero-opacity: 0.92; /* Two families, two roles — the ONE system that pays for a second face. Display weight 400: the Legora study's core finding is that the premium register carries hierarchy in size, never in boldness. */ --s-font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --s-font-ui: "Archivo", "Neue Haas Grotesk Text", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --s-display-track: -0.015em; --s-display-weight: 400; /* Archivo's width axis must not leak into the serif: no stretch. */ --s-display-stretch: 100%; } /* ── the switch ─────────────────────────────────────────────────────────── * Scaffolding, deliberately outside both systems so it reads as a tool rather * than part of the product. Rendered only when the visitor has opted in with * ?brandtest=1 — an ordinary paying visitor never sees it. */ .brandswitch { position: fixed; right: 14px; bottom: 14px; z-index: 9000; display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(28, 29, 32, 0.86); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8); font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #9ba0a6; } .brandswitch .seg { display: flex; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); } .brandswitch button { appearance: none; border: 0; margin: 0; padding: 5px 11px; border-radius: 999px; background: transparent; box-shadow: none; color: #9ba0a6; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .brandswitch button[aria-pressed="true"] { background: #e9eaec; color: #141517; } .brandswitch button:focus-visible { outline: 2px solid #7fa8ff; outline-offset: 2px; } .brandswitch a { color: #71767c; text-decoration: none; } @media print { .brandswitch { display: none; } }