/* ══════════════════════════════════════════════════════════════════ inversio Inc — corporate site Palette and type scale inherited from the Axiom Terminal design tokens (frontend/library/design_tokens.css) so the company site and the product read as one house. No JavaScript. No external font, script, or stylesheet requests — the page loads entirely from its own origin, which keeps the CSP in _headers strict and avoids the GDPR exposure of a third-party font CDN. ══════════════════════════════════════════════════════════════════ */ :root { /* Ground and surfaces — authoritative Axiom values */ --ground: #0B0C10; --surface-1: #12151D; --surface-2: #181C25; /* Ink */ --ink: #F8FAFC; --ink-2: #CBD5E1; --ink-3: #94A3B8; --ink-floor: #7E808A; /* Accent — two tokens, deliberately. --accent-fill is UI-only (3.11:1 on ground); it never sets text. --accent-text is the text-safe accent (6.55:1 on ground, AA). */ --accent-fill: #4F46E5; --accent-fill-hover: #4338CA; --accent-text: #818CF8; --accent-soft: #A5B4FC; /* Hairlines */ --line-subtle: rgba(255, 255, 255, 0.08); --line-default: rgba(255, 255, 255, 0.13); --line-accent: rgba(129, 140, 248, 0.32); /* Themed surfaces that are not flat colours */ --head-bg: rgba(11, 12, 16, 0.86); --grid-line: rgba(255, 255, 255, 0.028); --card-bg: var(--ground); --card-bg-2: var(--surface-1); /* cards inside a .band-alt */ --btn-bg: var(--accent-fill); --btn-bg-hover: var(--accent-fill-hover); --btn-ink: #FFFFFF; /* Type. House = sans (inversio). Product = old-style serif (Axiom). That split implements the endorsed-brand relationship typographically and is provisional pending the drawn dual-mark commission. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Aptos", "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Hoefler Text", Georgia, serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Consolas", "Liberation Mono", monospace; /* The wordmark is now the real vector, served as an image. These two only style the alt text if that image ever fails to load. */ --wordmark-ink: var(--ink); /* The mark is authored in navy, which disappears on a dark ground — invert it to white there, leave it untouched on light. */ --wordmark-filter: brightness(0) invert(1); --measure: 62ch; --gutter: clamp(1.25rem, 5vw, 3rem); --wrap: 1120px; } /* ══════════════════════════════════════════════════════════════════ LIGHT — the shipped theme. Values taken from the light block of the product's design_tokens.css, so this is the same system, not a second palette. Why the company site is light while the product is dark: Axiom is a terminal and reads correctly on a dark ground. inversio is a company, and its peer set — Bloomberg, S&P Global, Moody's, MSCI, FactSet, Thomson Reuters, Morningstar — is uniformly light. A dark corporate site in this category reads as a developer tool. To see the dark treatment, change data-theme on to "dark". ══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { color-scheme: light; --ground: #F7F8FA; --surface-1: #FFFFFF; --surface-2: #F1F5F9; --ink: #111827; --ink-2: #374151; --ink-3: #4B5563; --ink-floor: #5B6472; /* Navy, taken from the inversio wordmark. This replaces the indigo the site launched with: indigo reads as a developer tool, navy is what the institutional peer set uses, and deriving the palette from the mark is what makes the logo look native here instead of pasted on. --brand-navy is the wordmark and button colour (11.6:1 behind white). --accent-text is a lighter step from the same hue family, so links and numerals stay legible as accents rather than reading as body text. */ /* #143254 is the fill declared in the master wordmark SVG — the authored value, not a sample. It supersedes the #173A62 read taken from the rendered raster, which carried that render's lighting and bevel. 13.0:1 behind white. --accent-text is a lighter step on the same hue so links read as accents rather than as body text. */ --brand-navy: #143254; --accent-fill: var(--brand-navy); --accent-fill-hover: #0E233B; --accent-text: #265FA0; --accent-soft: #143254; --line-subtle: rgba(15, 23, 42, 0.10); --line-default: rgba(15, 23, 42, 0.16); --line-accent: rgba(38, 95, 160, 0.32); --head-bg: rgba(255, 255, 255, 0.88); --grid-line: rgba(15, 23, 42, 0.045); --card-bg: var(--surface-1); --card-bg-2: var(--ground); /* The button was ink while the accent was indigo, because an indigo button on white is the most generic SaaS signal there is. Navy carries no such baggage, so the primary button is now the brand colour itself: white on navy measures 11.6:1. */ --btn-bg: var(--brand-navy); --btn-bg-hover: #0E233B; --btn-ink: #FFFFFF; /* The mark is authored for a light ground — show it as drawn. */ --wordmark-ink: var(--brand-navy); --wordmark-filter: none; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body, h1, h2, h3, p, ul, ol, li, figure { margin: 0; padding: 0; } ul, ol { list-style: none; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; } } body { background: var(--ground); color: var(--ink-2); font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .measure { max-width: var(--measure); } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--surface-2); color: var(--ink); padding: 0.75rem 1.25rem; z-index: 100; } .skip:focus { left: 0; } /* ── Header ── */ .site-head { position: sticky; top: 0; z-index: 50; background: var(--head-bg); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-subtle); } .head-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 72px; } /* inversio wordmark — the drawn vector, served from /brand/. Sized by height so the 769:177 viewBox governs the width. */ .wordmark { display: inline-flex; align-items: center; color: var(--wordmark-ink); text-decoration: none; font-size: 1.375rem; font-weight: 600; line-height: 1; } .wordmark img { display: block; height: 26px; width: auto; filter: var(--wordmark-filter); } .wordmark:hover { color: var(--wordmark-ink); } @media (max-width: 640px) { .wordmark img { height: 22px; } } .nav { display: flex; gap: clamp(1rem, 2.5vw, 2.25rem); align-items: center; } .nav a { color: var(--ink-3); text-decoration: none; font-size: 0.875rem; letter-spacing: 0.005em; transition: color 160ms cubic-bezier(0.16, 1, 0.3, 1); } .nav a:hover { color: var(--ink); } @media (max-width: 640px) { .head-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; min-height: 0; padding-block: 0.875rem; } .nav { flex-wrap: wrap; gap: 0.375rem 1.125rem; } .nav a { font-size: 0.8125rem; } /* The header already occupies two rows here; don't stack more air on top. */ .hero { padding-block: 3rem 3.5rem; } .status { margin-bottom: 1.5rem; } } /* ── Hero ── */ .hero { position: relative; padding-block: clamp(5rem, 14vh, 9.5rem) clamp(4.5rem, 12vh, 8rem); border-bottom: 1px solid var(--line-subtle); overflow: hidden; } /* A fine vertical rule system — structure, not decoration. */ .hero-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient( to right, var(--grid-line) 0 1px, transparent 1px 88px ); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%); mask-image: linear-gradient(to bottom, #000 0%, transparent 82%); pointer-events: none; } .hero-inner { position: relative; } .status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-default); border-radius: 100px; padding: 0.375rem 0.875rem; margin-bottom: clamp(1.75rem, 4vh, 2.5rem); } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); flex: none; } h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem); line-height: 1.05; letter-spacing: -0.021em; color: var(--ink); margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem); } .lede { max-width: 56ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.62; color: var(--ink-2); } .lede strong { color: var(--ink); font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(2.25rem, 5vh, 3rem); } .btn { display: inline-block; background: var(--btn-bg); color: var(--btn-ink); text-decoration: none; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.005em; padding: 0.8125rem 1.625rem; border-radius: 6px; transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1); } .btn:hover { background: var(--btn-bg-hover); color: var(--btn-ink); } .btn-quiet { font-size: 0.9375rem; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--line-accent); padding-bottom: 2px; transition: color 160ms, border-color 160ms; } .btn-quiet:hover { color: var(--accent-soft); border-color: var(--accent-soft); } /* ── Bands ── */ .band { padding-block: clamp(4rem, 11vh, 7.5rem); border-bottom: 1px solid var(--line-subtle); } .band-alt { background: var(--surface-1); } .eyebrow { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-floor); margin-bottom: 1.5rem; } .eyebrow .idx { color: var(--accent-text); margin-right: 0.75rem; } h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.15; letter-spacing: -0.014em; color: var(--ink); } .section-lede { margin-top: 1.5rem; color: var(--ink-2); font-size: 1.0625rem; } /* ── Product heading ── Endorsement line removed: the product name now carries "inversio" in it, so a separate "from inversio" line beneath it was saying the same thing twice. If a future product name drops "inversio" from itself, reintroduce an endorsement treatment here. */ .product-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .product-name { /* Keeps the product name on one line without an   inside it, so the exact phrase stays clean for crawlers. Fits from 320px up. Sized to match its sibling h2s — the left rail and anchor marks carry the structure now, so a larger product heading only reads as an inconsistency. */ white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); line-height: 1.15; letter-spacing: -0.014em; color: var(--ink); } /* ── Capability cards ── */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; margin-top: clamp(2.75rem, 6vh, 4rem); background: var(--line-subtle); border: 1px solid var(--line-subtle); border-radius: 10px; overflow: hidden; } .card { background: var(--card-bg); padding: clamp(1.75rem, 3vw, 2.25rem); transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1); } .band-alt .card { background: var(--card-bg-2); } .card:hover { background: var(--card-bg-2); } .band-alt .card:hover { background: var(--surface-2); } .card h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 0.625rem; } .card p { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); } /* ── Principles ── */ .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(2rem, 4vw, 3.25rem); margin-top: clamp(2.75rem, 6vh, 4rem); } .principles > li { border-top: 1px solid var(--line-default); padding-top: 1.5rem; } .p-num { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; color: var(--accent-text); margin-bottom: 1.125rem; letter-spacing: 0.04em; } .principles h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin-bottom: 0.625rem; line-height: 1.35; } .principles p:not(.p-num) { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); } /* ── Audience ── A third layout pattern, deliberately unlike the capability cards and the principles columns. Stacked rows with the segment on the left read as a considered document rather than a third feature grid. */ .audience { margin-top: clamp(2.5rem, 5vh, 3.5rem); border-bottom: 1px solid var(--line-subtle); } .audience > li { display: grid; grid-template-columns: minmax(0, 21ch) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3vh, 2rem); border-top: 1px solid var(--line-subtle); } .audience h3 { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: var(--ink); } .audience p { font-size: 0.9375rem; line-height: 1.65; color: var(--ink-3); max-width: 58ch; } @media (max-width: 640px) { .audience > li { grid-template-columns: 1fr; gap: 0.5rem; } } /* Closing frame for the audience section — carries more weight than the rows above it, so it sits at lede size rather than body size. */ .audience-note { margin-top: clamp(2rem, 4vh, 2.75rem); font-size: 1.0625rem; line-height: 1.62; color: var(--ink-2); } .audience-note strong { color: var(--ink); font-weight: 600; } /* ── Founders ── */ .founders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); margin-top: clamp(2.5rem, 5vh, 3.5rem); } .founder { border-top: 1px solid var(--line-default); padding-top: 1.5rem; max-width: 44ch; } .founder h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; } .role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-floor); margin: 0.5rem 0 1rem; } .founder p:not(.role) { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); } /* ── Contact ── */ .mail { margin-top: clamp(2.25rem, 5vh, 3rem); } .mail a { font-family: var(--font-serif); font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.5rem); letter-spacing: -0.014em; color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--line-accent); padding-bottom: 0.15em; line-height: 1.3; overflow-wrap: anywhere; transition: color 160ms, border-color 160ms; } .mail a:hover { color: var(--accent-soft); border-color: var(--accent-soft); } /* ── Footer ── */ .site-foot { padding-block: clamp(3rem, 7vh, 4.5rem); } .foot-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2.5rem; } .foot-brand { margin-right: auto; line-height: 1; color: var(--wordmark-ink); font-size: 1.125rem; font-weight: 600; } .foot-brand img { display: block; height: 22px; width: auto; filter: var(--wordmark-filter); } .foot-legal, .foot-note { font-size: 0.8125rem; color: var(--ink-floor); line-height: 1.6; } .foot-note { flex-basis: 100%; max-width: 60ch; } /* ── Print ── */ @media print { .site-head, .hero-grid, .hero-actions, .skip { display: none; } body { background: #FFFFFF; color: #111827; } h1, h2, h3, .product-name, .founder h3, .wordmark, .foot-brand { color: #111827; } .card p, .principles p, .founder p, .lede, .section-lede { color: #374151; } a { color: #4338CA; } .band, .hero { border-color: #E5E7EB; } .band-alt, .card { background: #FFFFFF; } } /* ══════════════════════════════════════════════════════════════════ Evidence panel, supports, dark band and the editorial rail. ══════════════════════════════════════════════════════════════════ */ .anatomy { display:grid; grid-template-columns:1fr auto 1fr; margin-top:clamp(2.5rem,5vh,3.5rem); border:1px solid var(--line-subtle); border-radius:10px; overflow:hidden; background:var(--surface-1); } .anatomy-panel { padding:clamp(1.75rem,3vw,2.5rem); } .anatomy-panel + .anatomy-rule + .anatomy-panel { background:var(--ground); } .anatomy-rule { width:1px; background:var(--line-subtle); position:relative; } .anatomy-label { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-floor); margin-bottom:1.25rem; } .anatomy blockquote { margin:0; font-size:0.9375rem; line-height:1.75; color:var(--ink-2); } .anatomy mark { background:rgba(38,95,160,0.13); color:var(--ink); box-shadow:0 1px 0 var(--accent-text); padding:0.05em 0.1em; } .anatomy-cite { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line-subtle); font-size:0.8125rem; color:var(--ink-floor); } .record { margin:0; } .record > div { display:grid; grid-template-columns:minmax(0,11ch) minmax(0,1fr); gap:1rem; padding-block:0.7rem; border-top:1px solid var(--line-subtle); } .record > div:first-child { border-top:0; padding-top:0; } .record dt { font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; color:var(--ink-floor); text-transform:uppercase; padding-top:0.15em; } .record dd { margin:0; font-size:0.9375rem; color:var(--ink); } .record dd .sub { display:block; font-size:0.8125rem; color:var(--ink-3); margin-top:0.15rem; } .badge { display:inline-block; font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent-text); border:1px solid var(--line-accent); border-radius:100px; padding:0.2rem 0.6rem; } @media (max-width:760px){ .anatomy{grid-template-columns:1fr;} .anatomy-rule{width:auto;height:1px;} } .proof-closer { margin-top:clamp(1.5rem,3vh,2rem); font-family:var(--font-serif); font-size:clamp(1.25rem,1rem + 1vw,1.75rem); line-height:1.35; letter-spacing:-0.012em; color:var(--ink); } .supports { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.75rem,4vw,3rem) clamp(2rem,5vw,4rem); margin-top:clamp(2.5rem,5vh,3.5rem); } @media (max-width:720px){ .supports{grid-template-columns:1fr;} } .supports > li { border-top:1px solid var(--line-default); padding-top:1.25rem; } .supports h3 { font-family:var(--font-sans); font-size:1.0625rem; font-weight:600; color:var(--ink); margin-bottom:0.6rem; line-height:1.35; } .supports p { font-size:0.9375rem; line-height:1.62; color:var(--ink-3); } .band-dark { --ground:#0B0C10; --surface-1:#12151D; --ink:#F8FAFC; --ink-2:#CBD5E1; --ink-3:#94A3B8; --ink-floor:#8A8D98; --accent-text:#7FA8DC; --line-subtle:rgba(255,255,255,0.09); --line-default:rgba(255,255,255,0.14); background:var(--ground); color:var(--ink-2); } .band-dark h2,.band-dark h3 { color:var(--ink); } .band-dark .eyebrow { color:var(--ink-floor); } .band-dark .p-num { color:var(--accent-text); } .proof-sub { font-family:var(--font-serif); font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem); line-height:1.2; letter-spacing:-0.014em; color:var(--ink); margin-top:clamp(3rem,7vh,4.5rem); padding-top:clamp(2rem,4vh,2.5rem); border-top:1px solid var(--line-subtle); } .proof-sub + .section-lede { margin-top:1.25rem; } /* ══════════════════════════════════════════════════════════════════ DESIGN DEPTH — three structural moves, no decoration. 1. LEFT RAIL. Section labels sit in a margin column, so the page has two alignment axes instead of one. This is what separates an editorial layout from a stacked template. 2. ANCHOR MARK. Each section opens on a hairline carrying a single node — the same mark used in the evidence connector. A recurring motif that means something: every section anchored, like every finding. 3. DISPLAY MOMENT. One line on the page is set at display scale, so the type has a peak instead of running flat throughout. ══════════════════════════════════════════════════════════════════ */ .band > .wrap { display: grid; grid-template-columns: minmax(0, 9ch) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; } .band > .wrap > *:not(.eyebrow) { grid-column: 2; } .band > .wrap > .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 1.1rem; border-top: 1px solid var(--line-default); position: relative; } /* the anchor node */ .band > .wrap > .eyebrow::before { content: ""; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-text); } /* headings sit on the same rule as the label */ .band > .wrap > h2, .band > .wrap > .product-head { padding-top: 1.1rem; border-top: 1px solid var(--line-default); } @media (max-width: 760px) { .band > .wrap { grid-template-columns: minmax(0, 1fr); } /* children must release their explicit column, or the grid creates an implicit second one and the content stays squeezed */ .band > .wrap > *:not(.eyebrow) { grid-column: 1; } .band > .wrap > .eyebrow { grid-column: 1; grid-row: auto; margin-bottom: 1rem; } .band > .wrap > h2, .band > .wrap > .product-head { border-top: 0; padding-top: 0; } } /* the page's one display moment */ .proof-closer { font-size: clamp(1.5rem, 0.9rem + 2.1vw, 2.75rem); line-height: 1.22; letter-spacing: -0.018em; margin-top: clamp(2.5rem, 5vh, 3.5rem); margin-bottom: clamp(0.5rem, 2vh, 1rem); } /* below the point where the first sentence fits a line, drop the hard break and let it wrap naturally rather than breaking in an odd place */ @media (max-width: 900px) { .proof-closer br { display: none; } } .scope-note { margin-top: clamp(1.25rem, 2.5vh, 1.75rem); padding-left: 1rem; border-left: 2px solid var(--line-accent); font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); } .scope-note strong { color: var(--ink); font-weight: 600; }