/* ========================================================================== the Multiple — design system, edition 01 Hand-written. No build step, no framework, no third-party request. Dark is canonical; light is derived from the same token names. ========================================================================== */ /* --------------------------------------------------------------- 1. faces */ /* All OFL, latin-subset, served from this origin. See /README.md. */ @font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-variable.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* -------------------------------------------------------------- 2. tokens */ :root { color-scheme: dark; /* the plane */ --ground: #0e1013; --ground-2: #14171c; --ground-3: #0a0b0e; --rule: #21262d; --rule-2: #333b44; --ink: #e9ecf0; --ink-2: #99a2ac; --ink-3: #6a737d; /* per-app material tint */ --mat: #ffffff; --mat-a: 0.045; /* spot inks: fill value, then the value that clears 4.5:1 as text */ --collage: #ff4f87; --collage-text: #ff7aa4; --steward: #f5a63c; --steward-text: #ffbe63; --ficta: #8a72ff; --ficta-text: #a895ff; /* the index carries no ink of its own */ --spot: var(--ink-2); --spot-text: var(--ink); --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --rail: 9.5rem; --gutter: 2.5rem; --max: 64rem; --measure: 42rem; --panel: 46rem; } @media (prefers-color-scheme: light) { :root { color-scheme: light; --ground: #f1f2f4; --ground-2: #ffffff; --ground-3: #e6e8eb; --rule: #dbdfe4; --rule-2: #bcc3cb; --ink: #14171c; --ink-2: #4d555e; --ink-3: #757d86; --mat: #0e1013; --mat-a: 0.07; --collage: #d4185b; --collage-text: #b31049; --steward: #b36a00; --steward-text: #8a5100; --ficta: #5433d6; --ficta-text: #4526bc; } } /* Per-app scope. Set on . */ .app-collage { --spot: var(--collage); --spot-text: var(--collage-text); } .app-steward { --spot: var(--steward); --spot-text: var(--steward-text); } .app-ficta { --spot: var(--ficta); --spot-text: var(--ficta-text); } /* ---------------------------------------------------------- 3. base reset */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--ground); text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--ground); color: var(--ink); font-family: var(--body); font-optical-sizing: auto; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } ::selection { background: var(--spot); color: var(--ground); } img { max-width: 100%; height: auto; } .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 20; padding: 0.6rem 0.9rem; background: var(--ink); color: var(--ground); font-family: var(--mono); font-size: 0.75rem; text-decoration: none; transform: translateY(-180%); } .skip-link:focus { transform: translateY(0); } /* ------------------------------------------------------------- 4. layout */ .band { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); width: min(100% - 3rem, var(--max)); margin-inline: auto; padding-block: 3.5rem; border-top: 1px solid var(--rule); } .band:first-of-type { border-top: 0; } .band > .rail { grid-column: 1; } .band > .field { grid-column: 2; min-width: 0; } /* Vertical rhythm. A single owl selector makes every gap identical, which reads as unstructured on a long page — so space above a heading is larger than the space below it, and blocks get more room than paragraphs. Ordered by ascending specificity: base, then headings, then blocks, then pairs. */ .field > * + * { margin-top: 1.1rem; } /* A heading opens a new thought: more space above, less below. */ .field > * + h2 { margin-top: 2.6rem; } .field > * + h3 { margin-top: 2rem; } .field > h2 + *, .field > h3 + * { margin-top: 0.85rem; } /* Blocks sit further from the text that introduces them. */ .field > * + .record, .field > * + .plane, .field > * + .table-wrap, .field > * + .stated, .field > * + .log, .field > * + .callout, .field > * + .guide-index { margin-top: 1.5rem; } .field > .record + *, .field > .plane + *, .field > .table-wrap + *, .field > .stated + *, .field > .log + *, .field > .callout + *, .field > .guide-index + * { margin-top: 1.8rem; } /* An eyebrow belongs to the heading under it. */ .field > .tag + h1, .field > .tag + h2 { margin-top: 0.5rem; } .field > h1 + .lede { margin-top: 1.5rem; } .field > .lede + .updated { margin-top: 1.2rem; } /* Panels stop where the text does, so the right edge stays quiet. Their inner padding brings the contained text back into line with body copy. */ .field > .stated, .field > .log, .field > .plane, .field > .table-wrap { max-width: var(--panel); } .rail { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.5; padding-top: 0.45rem; } .rail b { display: block; font-weight: 500; color: var(--spot-text); } .rail span { display: block; color: var(--ink-3); letter-spacing: 0.1em; text-transform: none; } /* --------------------------------------------------------------- 5. type */ h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; font-weight: 600; } h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.06; letter-spacing: -0.028em; } h3 { font-size: 1.18rem; line-height: 1.2; letter-spacing: -0.018em; } p { margin: 0; max-width: var(--measure); } .lede { font-size: 1.1rem; color: var(--ink-2); max-width: 38rem; } .small { font-size: 0.9rem; color: var(--ink-2); } strong { font-weight: 600; color: var(--ink); } a { color: var(--spot-text); text-underline-offset: 0.2em; text-decoration-thickness: 0.06em; } a:hover { text-decoration-thickness: 0.12em; } a:focus-visible, .entry:focus-visible, .button:focus-visible, .guide-index a:focus-visible { outline: 2px solid var(--spot); outline-offset: 3px; } .tag { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--spot-text); } .updated { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-3); } /* --------------------------------------------------------------- 6. mark */ /* The article is metadata about the noun, so it is set in the metadata face. */ .wordmark { display: inline-flex; align-items: baseline; gap: 0.3em; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } .wordmark .art { font-family: var(--mono); font-weight: 400; font-size: 0.66em; letter-spacing: 0.04em; color: var(--ink-3); } a.wordmark:hover .art { color: var(--ink-2); } .monogram { width: 1.6rem; height: auto; color: var(--ink); flex: none; } .monogram path, .monogram ellipse { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: butt; stroke-linejoin: round; } /* ---------------------------------------------------- 7. masthead, footer */ .masthead { width: min(100% - 3rem, var(--max)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: baseline; justify-content: space-between; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); } .masthead nav { display: flex; flex-wrap: wrap; gap: 1.1rem; } .masthead nav a { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding-bottom: 0.15rem; } .masthead nav a:hover { color: var(--ink); } .masthead nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--spot); } .impression { width: min(100% - 3rem, var(--max)); margin-inline: auto; padding-block: 2.5rem 4rem; border-top: 1px solid var(--rule); display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: var(--gutter); font-family: var(--mono); font-size: 0.75rem; line-height: 1.9; color: var(--ink-3); } .impression dl { display: grid; grid-template-columns: 7rem 1fr; margin: 0; max-width: 46rem; } .impression dt { color: var(--ink-3); } .impression dd { margin: 0; color: var(--ink-2); } .impression a { color: var(--ink-2); } /* ------------------------------------------ 8. the signature: record strip */ @property --t { syntax: ""; inherits: true; initial-value: 1; } .record { --t: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: start; } .record li { --p: clamp(0, (var(--t) - var(--i) * 0.15) * 4, 1); position: relative; padding-top: 1.35rem; padding-right: 0.75rem; opacity: calc(0.12 + 0.88 * var(--p)); } /* the hairline runs from this node back to the previous one */ .record li + li::before { content: ""; position: absolute; top: 0.36rem; right: 100%; width: 100%; height: 1px; background: var(--rule-2); transform: scaleX(var(--p)); transform-origin: left; } .record .node { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--spot); background: var(--ground); } .record li:first-child .node { background: var(--spot); } .record li.closes .node { background: var(--spot); box-shadow: 0 0 0 3px var(--ground), 0 0 0 4.5px var(--spot); } .record .step { display: block; font-family: var(--mono); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink); } .record .detail { display: block; font-size: 0.75rem; line-height: 1.45; color: var(--ink-3); margin-top: 0.15rem; text-wrap: pretty; hyphens: none; } .record li.closes .step { color: var(--spot-text); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .record { animation: record-draw linear both; animation-timeline: view(); animation-range: entry 25% cover 45%; } } } @keyframes record-draw { from { --t: 0; } to { --t: 1; } } /* ----------------------------------------------------------- 9. materials */ /* Masks rather than images, so they tint from --mat in both themes. */ /* isolation:isolate is load-bearing. Without it .identity is positioned but is not a stacking context, so the z-index:-1 texture paints behind the body background and never appears at all. */ .identity { position: relative; isolation: isolate; } .identity::before { content: ""; position: absolute; inset: -1.5rem -1rem; z-index: -1; opacity: var(--mat-a); background-color: var(--mat); -webkit-mask-image: var(--tex); mask-image: var(--tex); -webkit-mask-size: var(--tex-size, auto); mask-size: var(--tex-size, auto); -webkit-mask-repeat: repeat; mask-repeat: repeat; } .app-collage .identity::before { --tex: repeating-conic-gradient(#000 0 25%, transparent 0 50%); --tex-size: 18px 18px; } .app-steward .identity::before { --tex: repeating-linear-gradient(180deg, #000 0 1px, transparent 1px 26px); } /* staff, with editorial accidentals above it — the ficta convention */ .app-ficta .identity::before { --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='64'%3E%3Cg stroke='%23000' stroke-width='1' fill='none'%3E%3Cpath d='M0 26.5h320M0 34.5h320M0 42.5h320M0 50.5h320M0 58.5h320'/%3E%3Cpath d='M46 9v14M51 7v14M43 14h11M43 19h11'/%3E%3C/g%3E%3C/svg%3E"); --tex-size: 320px 64px; } /* -------------------------------------------------- 10. index: the plane */ .plane { border: 1px solid var(--rule); background: var(--ground-2); } .entry { display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: baseline; gap: 0.4rem 1rem; padding: 1.15rem 1.2rem; border-top: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background 140ms ease; } .entry:first-child { border-top: 0; } .entry:hover { background: var(--ground-3); } .entry .swatch { width: 0.7rem; height: 0.7rem; background: var(--spot); align-self: center; } .entry .name { font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--ink); } .entry .state { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; } .entry .say { grid-column: 2 / -1; font-size: 0.9rem; color: var(--ink-2); max-width: 36rem; } .entry .fingerprint { grid-column: 2 / -1; display: flex; align-items: center; margin-top: 0.55rem; } .entry .fingerprint i { width: 6px; height: 6px; border-radius: 50%; border: 1.25px solid var(--spot); flex: none; } .entry .fingerprint i:first-child, .entry .fingerprint i:last-child { background: var(--spot); } .entry .fingerprint u { width: 18px; height: 1px; background: var(--rule-2); flex: none; } /* A routing entry: no ink swatch, no fingerprint, smaller name. */ .entry.plain { grid-template-columns: minmax(0, 1fr) auto; } .entry.plain .name { font-size: 1.1rem; } .entry.plain .say { grid-column: 1 / -1; } .impression .monogram { width: 2.25rem; color: var(--ink-3); } /* ------------------------------------------------ 11. facts, tables, prose */ .table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--ground-2); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } caption { text-align: left; } th, td { text-align: left; padding: 0.68rem 0.95rem; border-bottom: 1px solid var(--rule); vertical-align: top; } tr:last-child th, tr:last-child td { border-bottom: 0; } thead th { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); } tbody th, .facts th { font-family: var(--mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; width: 1%; } td { color: var(--ink); } .prose { max-width: var(--measure); } .prose h2 { margin: 2.6rem 0 0.7rem; font-size: clamp(1.4rem, 2.6vw, 1.8rem); } .prose h3 { margin: 1.8rem 0 0.4rem; } .prose > :first-child { margin-top: 0; } .prose p { margin: 0 0 1rem; } .prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.3rem; } .prose li { margin-bottom: 0.4rem; color: var(--ink-2); } .prose li strong { color: var(--ink); } .prose p { color: var(--ink-2); } .prose .table-wrap { margin: 1.4rem 0; max-width: none; } .guide-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .guide-index a { padding: 0.7rem 0.9rem; background: var(--ground-2); font-family: var(--mono); font-size: 0.75rem; color: var(--ink-2); text-decoration: none; } .guide-index a:hover { background: var(--ground-3); color: var(--ink); } .guide-note { margin: 1.6rem 0; padding: 0.95rem 1.1rem; border-left: 2px solid var(--spot); background: var(--ground-2); } .guide-note p { margin: 0; color: var(--ink-2); font-size: 0.9rem; } /* --------------------------------------------- 12. actions, callout, lists */ .button { display: inline-block; padding: 0.62rem 1.05rem; background: var(--spot); color: var(--ground); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--spot); } .button:hover { background: transparent; color: var(--spot-text); } .button-quiet { background: transparent; color: var(--ink-2); border-color: var(--rule-2); } .button-quiet:hover { color: var(--ink); border-color: var(--ink-3); background: transparent; } .actions { display: flex; flex-wrap: wrap; gap: 0.7rem; } .callout { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; padding: 1.3rem; border: 1px solid var(--rule); background: var(--ground-2); } .callout h2 { font-size: 1.18rem; margin-bottom: 0.3rem; } .callout p { margin: 0; color: var(--ink-2); font-size: 0.9rem; } /* A plain list of statements. Used for install steps and refusals. */ .stated { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); background: var(--ground-2); } /* Deliberately NOT display:grid. Grid promotes every inline child to its own grid item, so a single in the text shatters the item into columns that wrap one word per line. Absolute marker plus padding is immune to whatever markup the content carries. */ .stated li { position: relative; padding: 0.75rem 1.1rem 0.75rem 2.45rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.55; } .stated li:first-child { border-top: 0; } /* Marker sits on the optical centre of the first line: top padding, plus half the line box, less half the marker's own height. */ .stated li::before { content: ""; position: absolute; left: 1.1rem; top: calc(0.75rem + 0.775em); width: 0.55rem; height: 1px; background: var(--spot); } .stated.refuses li::before { top: calc(0.75rem + 0.52em); width: 0.5rem; height: 0.5rem; background: transparent; border: 1px solid var(--rule-2); border-radius: 50%; } .stated strong { color: var(--ink); } /* The build log. Date in the rail position, entry in the measure. */ .log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); } .log li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.3rem 1.2rem; padding: 0.95rem 1.1rem; border-top: 1px solid var(--rule); background: var(--ground-2); } .log li:first-child { border-top: 0; } .log .when { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 0.2em; } .log .what { font-size: 0.92rem; color: var(--ink); } .log .why { grid-column: 2; font-size: 0.85rem; color: var(--ink-3); } /* ---------------------------------------------------------- 13. responsive */ /* Five columns get cramped well before phone width, so the strip becomes a vertical ledger as soon as the detail lines stop fitting in two lines. */ @media (max-width: 44rem) { .record { grid-auto-flow: row; grid-auto-columns: auto; } .record li { padding: 0 0 0.95rem 1.4rem; } .record li + li::before { top: 0; left: 4px; right: auto; width: 1px; height: 100%; transform: scaleY(var(--p)); transform-origin: top; } .record .node { top: 0.3rem; } } @media (max-width: 52rem) { .band, .impression { grid-template-columns: 1fr; row-gap: 1.1rem; } .band > .rail, .band > .field, .impression > * { grid-column: 1; } .rail { padding-top: 0; } .rail b { display: inline; margin-right: 0.75rem; } .rail span { display: inline; } .callout { grid-template-columns: 1fr; align-items: start; } .impression dl { grid-template-columns: 5.5rem 1fr; } .log li { grid-template-columns: 1fr; } .log .why { grid-column: 1; } .entry { grid-template-columns: 1.5rem 1fr; } .entry .state { grid-column: 2; } } /* ------------------------------------------------------------- 14. motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }