/* ══════════════════════════════════════════════════════════════════ 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. */ white-space: nowrap; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.1; letter-spacing: -0.018em; 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; } }