/* Odysseus — the blueprint kit. * * The house design system's signature motifs: a drafting grid, mono kickers * with a running index, entablature rules under section headlines, colonnade * hairlines between bays, registration crosshairs on framed panels, and the * maple chip. The system's instruction is two or three per page and never all * six — restraint is the point, and a page wearing every motif at once reads as * a demo of the design system rather than a page about the product. * * WHY THIS IS ITS OWN FILE, and not more inline CSS. The homepage already * carries 1,290 lines of inline style, and the changelog and security pages * carry their own . Putting these rules in shared.css would style the * assembled pages and miss the homepage; copying them into two inline blocks * would be two copies to drift apart. That is exactly the reasoning * css/lang.css already records for the language switcher, and this file follows * it: every value is a token WITH A LITERAL FALLBACK, so the rules are correct * on pages that define the tokens and on pages that do not. * * No JavaScript, and nothing here depends on any. */ /* ── 01 · Drafting grid ───────────────────────────────────────────────────── * A faint square grid on paper, masked so it fades before it reaches the copy. * The system's size is 24px, which is also the icon grid — the page and its * icons are drawn to the same ruler. */ .bp-grid { background-image: linear-gradient(var(--dt-grid, rgba(20,36,59,0.055)) 1px, transparent 1px), linear-gradient(90deg, var(--dt-grid, rgba(20,36,59,0.055)) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(ellipse 85% 65% at 50% 0%, #000 35%, transparent 100%); } /* ── 02 · Mono kicker, with a running index ───────────────────────────────── * "01 / THE PROBLEM" above each section headline — the system's signature * drafting annotation. * * The index is a CSS counter, NOT text in the markup, and that is deliberate * on two counts. It cannot drift out of order, because it counts the sections * that exist rather than the ones someone remembered to renumber. And it never * becomes a translation unit: a number followed by a slash has nothing to * translate, and putting it in the markup would send twenty-odd of them * through the engine in every language for no gain. * * decimal-leading-zero gives 01, 02 … which is what the system's examples use * and what keeps the column of them aligned. */ .bp-index { counter-reset: bp-section; } .bp-kicker { font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; font-size: var(--text-xs, 0.75rem); font-weight: 500; letter-spacing: var(--dt-tracking-mono, 0.14em); text-transform: uppercase; color: var(--color-accent, #D85028); } .bp-kicker::before { counter-increment: bp-section; content: counter(bp-section, decimal-leading-zero) " / "; color: var(--color-muted, #5B5B57); } /* ── 03 · Entablature rule ────────────────────────────────────────────────── * The classical double hairline under a section headline: a light rule, a 2px * gap, then an ink rule. Applied to an element that already has a single * bottom border, it upgrades it rather than adding a second one. */ /* The assembled pages' section headings already carried a single hairline, so they are named here rather than given a class: those headings come out of content fragments that carry no classes at all, and blueprint.css is the one place the motif should be defined. */ .bp-entablature, .page-content h2 { border-bottom: 1px solid var(--color-border, #E2DED3); padding-bottom: 3px; position: relative; } .bp-entablature::after, .page-content h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--color-text, #14243B); opacity: 0.55; } /* ── 04 · Colonnade ───────────────────────────────────────────────────────── * A 1px vertical hairline between bays instead of a gap alone, so a row of * cards reads as structural bays. The outer edges are dropped: `* + *` only * ever paints between siblings, never before the first. */ .bp-colonnade > * + * { border-left: 1px solid var(--color-border, #E2DED3); padding-left: var(--space-6, 1.5rem); } @media (max-width: 760px) { /* Stacked, a left border is a stripe down the side of each card rather than a divider between columns. */ .bp-colonnade > * + * { border-left: 0; padding-left: 0; } } /* ── 05 · Hairline frame with registration crosshairs ─────────────────────── * The corners of a framed panel carry small + marks, the way a technical * drawing carries registration marks. Two pseudo-elements give two corners; * that is enough to read, and four would need two more elements in the markup * for no extra meaning. */ .bp-frame { position: relative; border: 1px solid var(--color-text, #14243B); border-radius: var(--radius-sm, 2px); } .bp-frame::before, .bp-frame::after { content: '+'; position: absolute; font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; font-size: 12px; line-height: 1; color: var(--dt-stone-strong, #CFC9BB); pointer-events: none; } .bp-frame::before { top: -6px; left: -6px; } .bp-frame::after { bottom: -6px; right: -6px; } /* ── 06 · The maple chip ──────────────────────────────────────────────────── * RESERVED. The design system permits maple red for Canadian trust cues only — * never as decoration, and never adjacent to the delta orange, which is why * this chip appears in the footer and on the about page and nowhere near a call * to action. * * What it may SAY is constrained too, and by fact rather than taste: the * hosted control plane runs on Contabo infrastructure in continental Europe, * not in Canada, so "Hosted in Canada" would be a claim one dig disproves. It says what is true — that this is a Canadian company. * See the S13 spec's correction C3 before widening it. */ .bp-chip-ca { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); font-family: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; font-size: var(--text-xs, 0.75rem); letter-spacing: var(--dt-tracking-mono, 0.14em); text-transform: uppercase; color: var(--dt-maple, #B21E28); border: 1px solid var(--dt-maple, #B21E28); border-radius: var(--radius-full, 9999px); padding: 4px 12px; background: transparent; white-space: nowrap; } .bp-chip-ca svg { flex: none; } /* The leaf. It is a MASK rather than an image, so it takes --dt-maple and follows the theme with the rest of the chip -- a coloured-in PNG would be one more asset to keep in step with the palette, and would be the wrong red in the dark theme. Inline as a data URI rather than a file: one shape, used at four sites, and test/no-external-requests.sh stays satisfied because nothing is fetched. It sits in CSS and not in the markup for the same reason the kicker's index does -- four copies of a path in four files drift, and a decorative glyph in the markup would become four translation units that have nothing to translate. */ .bp-chip-ca::before { content: ''; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M383.8%20351.7c2.5-2.5%20105.2-92.4%20105.2-92.4l-17.5-7.5c-10-4.9-7.4-11.5-5-17.4%202.5-7.5%2020-67.4%2020-67.4s-47.5%2010-57.5%2012.5c-7.5%202.4-10-2.5-12.5-7.5s-15-32.4-15-32.4-52.5%2059.9-55%2062.4c-10%207.5-20%200-17.5-12.5%200-10%2027.5-127.3%2027.5-127.3s-30%2017.4-40%2020c-7.5%202.5-15%202.5-20-7.5C293.3%2063.5%20255.5%200%20255.5%200s-37.8%2063.5-40.5%2071.4c-5%2010-12.5%2010-20%207.5-10-2.6-40-20-40-20S182.5%20176.2%20182.5%20186.2c2.5%2012.5-7.5%2020-17.5%2012.5-2.5-2.5-55-62.4-55-62.4s-12.5%2027.4-15%2032.4-5%209.9-12.5%207.5c-10-2.5-57.5-12.5-57.5-12.5s17.5%2059.9%2020%2067.4c2.4%205.9%205%2012.5-5%2017.4L22%20259.3s102.6%2089.9%20105.2%2092.4c5.1%205%2010%207.5%205%2022.5-5%2017.4-10%2037.4-10%2037.4s95.03-19.9%20105.03-22.4c8.7-.9%2018.3%202.5%2018.3%2012.5S240%20512%20240%20512h30s-5.6-100.4-5.6-110.3%209.5-13.4%2018.3-12.5c10%202.5%20105%2022.4%20105%2022.4s-5-20-10-37.4c-5-15%200-17.5%205.1-22.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M383.8%20351.7c2.5-2.5%20105.2-92.4%20105.2-92.4l-17.5-7.5c-10-4.9-7.4-11.5-5-17.4%202.5-7.5%2020-67.4%2020-67.4s-47.5%2010-57.5%2012.5c-7.5%202.4-10-2.5-12.5-7.5s-15-32.4-15-32.4-52.5%2059.9-55%2062.4c-10%207.5-20%200-17.5-12.5%200-10%2027.5-127.3%2027.5-127.3s-30%2017.4-40%2020c-7.5%202.5-15%202.5-20-7.5C293.3%2063.5%20255.5%200%20255.5%200s-37.8%2063.5-40.5%2071.4c-5%2010-12.5%2010-20%207.5-10-2.6-40-20-40-20S182.5%20176.2%20182.5%20186.2c2.5%2012.5-7.5%2020-17.5%2012.5-2.5-2.5-55-62.4-55-62.4s-12.5%2027.4-15%2032.4-5%209.9-12.5%207.5c-10-2.5-57.5-12.5-57.5-12.5s17.5%2059.9%2020%2067.4c2.4%205.9%205%2012.5-5%2017.4L22%20259.3s102.6%2089.9%20105.2%2092.4c5.1%205%2010%207.5%205%2022.5-5%2017.4-10%2037.4-10%2037.4s95.03-19.9%20105.03-22.4c8.7-.9%2018.3%202.5%2018.3%2012.5S240%20512%20240%20512h30s-5.6-100.4-5.6-110.3%209.5-13.4%2018.3-12.5c10%202.5%20105%2022.4%20105%2022.4s-5-20-10-37.4c-5-15%200-17.5%205.1-22.5z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }