/* Sovitus web presence — one work graph, five chapters The viewport is the stage. A fixed top bar and bottom bar frame it. The one persistent subject is a work graph: it begins as the operator's ask with ideas around it, organises into a plan with derived readiness, is sealed, is walked by the build node by node, is read by cold review lenses, and finally becomes the figure inside the pull request that closes the page. Chapters of text fade in and out as scroll advances; the backdrop cuts from paper to navy for the build and review, and back for the pull request. */ :root { --paper: #f7f6f1; --navy: #0b1530; /* brand palette: the mark's four strands and hub, light-background set */ --s0: #67c2b3; --s1: #7ebdc9; --s2: #6497b7; --s3: #2f5b7c; --hub: #177288; /* the product's state colours: readiness and outcome, not decoration */ --ok: #1f9a58; --ok-soft: rgba(31, 154, 88, 0.14); --wait: #c98a17; --wait-soft: rgba(201, 138, 23, 0.16); --busy: #3a7bd5; --busy-soft: rgba(58, 123, 213, 0.14); --bad: #cc3f36; --bad-soft: rgba(204, 63, 54, 0.14); --unknown: #8a92a6; /* frame colours flip with the backdrop; JS toggles .is-dark on */ --fg: #101a2e; --fg-soft: #3c4760; --fg-mute: #6b7488; --rule: rgba(16, 26, 46, 0.14); --rule-strong: rgba(16, 26, 46, 0.42); --card: #ffffff; --card-fg: #101a2e; --card-mute: #6b7488; --card-rule: rgba(16, 26, 46, 0.14); --card-shadow: 0 14px 28px -20px rgba(16, 26, 46, 0.5); --edge: rgba(16, 26, 46, 0.40); --edge-lit: #1f9a58; --dark: 0; --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --gutter: clamp(18px, 4vw, 56px); --bar-top: 72px; --bar-bottom: 60px; --runway: 900vh; /* the cut: every colour swaps in the same frame */ --swap: 0ms; } .bar { --s0: #35b8a8; --s1: #3fb2c8; --s2: #3f9fd6; --s3: #2f5b7c; --hub: #177288; --fg: #101a2e; --fg-soft: #3c4760; --fg-mute: #6b7488; --rule: rgba(16, 26, 46, 0.14); } html.is-dark, .bar.is-dark { --s0: #3dccbe; --s1: #57c5d9; --s2: #58b2e2; --s3: #2d80b3; --hub: #0095b6; --ok: #46d987; --wait: #f0b64a; --busy: #6fb1ff; --bad: #ff7b72; --unknown: #8a9cc0; --fg: #eef2fa; --fg-soft: #b9c7e2; --fg-mute: #8a9cc0; --rule: rgba(190, 210, 250, 0.16); --rule-strong: rgba(190, 210, 250, 0.55); --card-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.75); --edge: rgba(190, 210, 250, 0.55); --edge-lit: #46d987; } * { box-sizing: border-box; } html { background: var(--paper); } body { margin: 0; color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: color var(--swap); } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .runway { height: var(--runway); } /* Stage ------------------------------------------------------------------- */ .stage { position: fixed; inset: 0; overflow: hidden; background: var(--paper); } .backdrop--dark { position: absolute; inset: 0; background: var(--navy); transform: translateY(calc((1 - var(--dark)) * 100%)); will-change: transform; } /* Frame bars ---------------------------------------------------------------- */ .bar { position: fixed; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--gutter); color: var(--fg); transition: color var(--swap), border-color var(--swap); } .bar--top { top: 0; height: var(--bar-top); } .bar--bottom { bottom: 0; height: var(--bar-bottom); font-size: 12px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 36px; height: 33px; overflow: visible; } .brand-word { height: 22px; width: auto; fill: var(--fg); transition: fill var(--swap); } .brand-mark .strand, .brand-mark .hub { transition: fill var(--swap); } .brand-mark [data-strand="0"] { fill: var(--s0); } .brand-mark [data-strand="1"] { fill: var(--s1); } .brand-mark [data-strand="2"] { fill: var(--s2); } .brand-mark [data-strand="3"] { fill: var(--s3); } .brand-mark .hub { fill: var(--hub); } .nav { display: flex; align-items: center; gap: 32px; font-size: 15px; color: var(--fg-soft); } .nav a { position: relative; padding: 4px 0; transition: color 160ms; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(.2,.7,.2,1); } .nav a:hover { color: var(--fg); } .nav a:hover::after { transform: scaleX(1); } .nav-cta { color: var(--fg); font-weight: 500; } .nav-cta span { display: inline-block; color: var(--hub); transition: transform 200ms cubic-bezier(.2,.7,.2,1); } .nav-cta:hover span { transform: translateX(3px); } .bar-note { margin: 0; font-size: 12px; color: var(--fg-mute); white-space: nowrap; } /* the chapter track is the one progress system: the live chapter carries a rule */ .track { margin: 0; padding: 0; list-style: none; display: flex; gap: clamp(14px, 3vw, 40px); } .track button { position: relative; display: inline-flex; gap: 8px; align-items: baseline; color: var(--fg-mute); padding: 6px 0; transition: color var(--swap); } .track button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 260ms cubic-bezier(.2,.7,.2,1); } .track button:hover { color: var(--fg); } .track button b { font-weight: 600; font-size: 12px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .track button span { font-size: 13px; letter-spacing: 0; } .track button[aria-current="step"] { color: var(--fg); } .track button[aria-current="step"]::after { transform: scaleX(1); } .steps { display: flex; gap: 8px; } .steps button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule-strong, var(--fg-mute)); color: var(--fg); font-size: 18px; line-height: 1; transition: border-color var(--swap), color var(--swap), background var(--swap); } .steps button:hover { border-color: var(--fg); } /* Chapters ------------------------------------------------------------------- */ .chapter { position: absolute; left: var(--gutter); top: var(--bar-top); bottom: var(--bar-bottom); width: min(38vw, 500px); display: flex; flex-direction: column; justify-content: center; margin: 0; pointer-events: none; --t: 0; } .chapter.is-live { pointer-events: auto; } /* the last chapter yields the frame to the document */ .chapter--pr { width: min(28vw, 400px); } .chapter--pr h2 { font-size: clamp(36px, 3.5vw, 50px); } /* each line of copy arrives a beat after the one above it */ .chapter > * { margin: 0; opacity: var(--tl); transform: translateY(calc((1 - var(--tl)) * 10px * var(--dir, 1))); will-change: opacity, transform; } .chapter > :nth-child(1) { --tl: clamp(0, calc(var(--t) / 0.85), 1); } .chapter > :nth-child(2) { --tl: clamp(0, calc((var(--t) - 0.08) / 0.85), 1); } .chapter > :nth-child(3) { --tl: clamp(0, calc((var(--t) - 0.16) / 0.84), 1); } .chapter > :nth-child(4) { --tl: clamp(0, calc((var(--t) - 0.24) / 0.76), 1); } .eyebrow { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--fg-soft); margin-bottom: 22px !important; transition: color var(--swap); } .eyebrow b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; color: var(--fg-soft); } h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; line-height: 1.02; transition: color var(--swap); text-wrap: balance; } h1 { font-size: clamp(46px, 5vw, 74px); margin-left: -0.03em !important; } h2 { font-size: clamp(40px, 4.3vw, 62px); margin-left: -0.03em !important; } .lede { margin-top: 24px !important; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; max-width: 430px; color: var(--fg-soft); transition: color var(--swap); } .actions { display: flex; align-items: center; gap: 24px; margin-top: 32px !important; align-self: flex-start; } .button { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px !important; align-self: flex-start; background: var(--fg); color: var(--paper); padding: 13px 24px; border-radius: 999px; font-size: 16px; transition: background var(--swap), color var(--swap), transform 200ms cubic-bezier(.2,.7,.2,1); } .actions .button { margin-top: 0 !important; } .button:hover { transform: translateY(-1px); background: #1c2a4d; color: #fff; } .button span, .link span { display: inline-block; transition: transform 200ms cubic-bezier(.2,.7,.2,1); } .button:hover span, .link:hover span { transform: translateX(3px); } html.is-dark .button { color: var(--navy); } html.is-dark .button:hover { color: #fff; } .link { font-size: 16px; color: var(--fg-soft); display: inline-flex; gap: 8px; align-items: center; transition: color 160ms; } .actions .link { font-size: 15px; color: var(--fg-soft); } .link:hover { color: var(--fg); } /* Subject ------------------------------------------------------------------- */ .subject { position: absolute; left: 50%; top: 50%; width: 1000px; height: 580px; margin: -290px 0 0 -500px; transform-origin: center; will-change: transform; } .diagram { position: absolute; inset: 0; font-size: 14px; } .graph { position: absolute; inset: 0; z-index: 2; transform-origin: 0 0; will-change: transform; } .graph.is-figure { z-index: 4; } .graph .node small { opacity: clamp(0, calc((var(--m, 0) - 0.6) / 0.4), 1); } .graph .waves span { opacity: calc(var(--t, 0) * (1 - min(1, var(--fig, 0) * 2.5))); } .wires { position: absolute; inset: 0; width: 1000px; height: 580px; overflow: visible; } /* the ask: root of the idea map, then (--a) a card at the top, then (--m) the plan's header */ .ask { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: calc(10px - 4px * var(--a, 0) + 4px * var(--r, 0)); background: var(--card); color: var(--card-fg); border: 1px solid var(--card-rule); box-shadow: var(--card-shadow); white-space: nowrap; overflow: hidden; transform: scale(calc(1 + 0.012 * var(--pulse, 0))); transform-origin: 50% 50%; } .ask > * { opacity: calc(1 - var(--r, 0) * 6); } .ask small { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--card-mute); line-height: 1; } .ask b { font-size: calc(16px - 2px * var(--a, 0)); font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; white-space: normal; } .ask .tag { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--card-mute); border: 1px solid var(--card-rule); opacity: calc(var(--m, 0) * (1 - var(--r, 0) * 6)); } .ask .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--unknown); } .ask .tag { transition: none; } .ask .tag[data-state="sealed"] { color: var(--card); background: var(--card-fg); border-color: var(--card-fg); } .ask .tag[data-state="sealed"] i { background: var(--card); border-radius: 1.5px; } /* nodes: one piece of work each. As idea (--m = 0): a pill with a title. As plan (--m = 1): a card with its title and a derived state line. */ .node { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); padding: 0 14px; display: flex; flex-direction: column; justify-content: center; border-radius: calc(16px - 10px * var(--m, 0)); background: var(--card); color: var(--card-fg); border: 1px solid var(--card-rule); box-shadow: var(--card-shadow); transform: rotate(var(--rot, 0deg)); transform-origin: 50% 50%; overflow: hidden; } .node::before { /* the state stripe: derived readiness, then the build's outcome */ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stripe, transparent); opacity: var(--m, 0); } .node b { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; white-space: nowrap; color: color-mix(in srgb, var(--card-fg) calc(55% + 45% * var(--m, 0)), var(--card-mute)); } .node small { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 13px; line-height: 1.2; color: var(--card-mute); white-space: nowrap; opacity: var(--m, 0); max-height: calc(16px * var(--m, 0)); } .node small i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, var(--unknown)); } .node[data-state="ready"] { --stripe: var(--ok); --dot: var(--ok); } .node[data-state="blocked"] { --stripe: var(--wait); --dot: var(--wait); } .node[data-state="unknown"] { --stripe: var(--unknown); --dot: var(--unknown); } .node[data-state="working"] { --stripe: var(--busy); --dot: var(--busy); } .node[data-state="failed"] { --stripe: var(--bad); --dot: var(--bad); } .node[data-state="done"] { --stripe: var(--ok); --dot: var(--ok); } .node[data-state="working"] small, .node[data-state="failed"] small { color: var(--card-fg); } /* a reviewer's finding, pinned under its node; red while open, green once fixed */ .finding::before { content: ""; position: absolute; left: 14px; top: -7px; width: 1px; height: 7px; background: var(--bad); } .finding[data-fixed="1"]::before { background: var(--ok); } .finding { position: absolute; left: var(--x); top: var(--y); padding: 5px 9px 5px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--card-fg); background: var(--card); border: 1px solid var(--bad); border-radius: 4px; box-shadow: var(--card-shadow); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * -6px)); } .finding i { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); } .finding[data-fixed="1"] { border-color: var(--ok); } .finding[data-fixed="1"] i { background: var(--ok); } /* wires */ .edges--map { display: none; } .edges path { fill: none; stroke: var(--edge); stroke-width: 1.4; stroke-linecap: round; transition: stroke var(--swap); } .edges--dag path { stroke: color-mix(in srgb, var(--edge) calc((1 - var(--lit, 0)) * 100%), var(--edge-lit)); stroke-width: calc(1.2px + 0.8px * var(--sealed, 0) + 0.4px * var(--lit, 0)); } .seal { fill: none; stroke: var(--rule-strong); stroke-width: calc(1px + 1px * var(--sealed, 0)); } .node[data-state="working"] { box-shadow: 0 0 0 2px var(--busy); animation: breathe 1.6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 2px var(--busy), 0 0 36px rgba(111, 177, 255, 0.35); } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--busy) 40%, transparent), 0 0 20px rgba(111, 177, 255, 0.15); } } @media (prefers-reduced-motion: reduce) { .node[data-state="working"] { animation: none; } } /* on the navy the cards are navy: state shows as a tint and a border, not a white slab */ html.is-dark .node, html.is-dark .ask, html.is-dark .finding { --card: #182440; --card-fg: #eef2fa; --card-mute: #aab7d2; --card-rule: rgba(190, 210, 250, 0.30); box-shadow: none; } html.is-dark .node[data-state="done"] { background: #16302e; border-color: rgba(70, 217, 135, 0.55); } html.is-dark .node[data-state="working"] { background: #1a2d4f; } html.is-dark .node[data-state="failed"] { background: #3a2230; border-color: rgba(255, 123, 114, 0.6); } html.is-dark .finding { background: #46232f; border-color: var(--bad); color: #fff; } html.is-dark .node[data-state="working"] { box-shadow: 0 0 0 2px var(--busy), 0 0 36px rgba(111, 177, 255, 0.35); } html.is-dark .node[data-state="done"] { box-shadow: 0 0 22px rgba(70, 217, 135, 0.14); } html.is-dark .edges--dag path { filter: drop-shadow(0 0 calc(4px * var(--lit, 0)) rgba(70, 217, 135, 0.7)); } html.is-dark .ask .tag[data-state="sealed"] { color: var(--navy); background: var(--fg); border-color: var(--fg); } html.is-dark .node small { color: var(--card-mute); } .node { transition: box-shadow 200ms ease; } .lenses line { stroke: var(--fg); stroke-width: 1.5; opacity: 0.9; } .waves { position: absolute; inset: 0; pointer-events: none; } .waves span { position: absolute; left: var(--x); top: 390px; font-size: 12.5px; font-weight: 500; color: var(--fg-soft); opacity: var(--t, 0); transition: color var(--swap); } /* the review round: the budget, spent in the open */ .round { position: absolute; left: 40px; top: 418px; display: flex; align-items: baseline; gap: 12px; font-size: 13px; color: var(--fg-soft); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 8px)); transition: color var(--swap); } .round b { font-weight: 600; font-size: 15px; color: var(--fg); font-variant-numeric: tabular-nums; } .round .lens-names { display: inline-flex; gap: 14px; font-size: 13.5px; font-weight: 500; } .round .lens-names em { font-style: normal; color: var(--fg-soft); opacity: 0.5; transition: opacity 240ms, color 240ms; } .round .lens-names em[data-state="reading"] { color: var(--fg); opacity: 1; } .round .lens-names em[data-state="read"] { opacity: 0.85; } .round .lens-names em[data-state="read"]::after { content: " ✓"; color: var(--ok); } /* the pull request: the closing document */ .pr { z-index: 5; box-sizing: border-box; position: absolute; left: 120px; top: 0; width: 760px; height: 580px; padding: 24px 34px 22px; color: var(--card-fg); opacity: clamp(0, calc(var(--t, 0) * 5), 1); pointer-events: none; } .pr header { --tl: clamp(0, calc(var(--t, 0) / 0.2), 1); opacity: var(--tl); transform: translateY(calc((1 - var(--tl)) * 6px)); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 16px; align-items: center; } .pr header small { grid-column: 1; font-size: 13px; color: var(--card-mute); } .pr header h3 { grid-column: 1; margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; } .pr header .green { grid-column: 2; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: #15603a; background: var(--ok-soft); border: 1px solid rgba(31, 154, 88, 0.45); --tg: clamp(0, calc((var(--t, 0) - 0.86) / 0.14), 1); transform: scale(calc(0.7 + 0.3 * var(--tg))); opacity: var(--tg); } .pr header .green i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: blink 2.4s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .pr .figure { height: 150px; margin: 6px -34px 0; } .pr .body { margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 30px; } .pr .body section { min-width: 0; padding-top: 10px; border-top: 1px solid var(--card-rule); opacity: var(--tl, 1); transform: translateY(calc((1 - var(--tl, 1)) * 6px)); } .pr .body section.wide { grid-column: 1 / 3; } .pr .body section:nth-child(1) { --tl: clamp(0, calc((var(--t, 0) - 0.18) / 0.30), 1); } .pr .body section:nth-child(2) { --tl: clamp(0, calc((var(--t, 0) - 0.32) / 0.30), 1); } .pr .body section:nth-child(3) { --tl: clamp(0, calc((var(--t, 0) - 0.46) / 0.30), 1); } .pr .body section:nth-child(4) { --tl: clamp(0, calc((var(--t, 0) - 0.60) / 0.30), 1); } .pr .body section:nth-child(5) { --tl: clamp(0, calc((var(--t, 0) - 0.72) / 0.24), 1); } .pr h4 { margin: 0 0 5px; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--card-fg); } .pr h4 em { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--card-mute); } .pr ul { margin: 0; padding: 0; list-style: none; } .pr li { font-size: 14px; line-height: 1.42; } .pr li.more { color: var(--card-mute); } .pr li b { font-weight: 500; color: var(--card-mute); } .pr li b::before, .pr li code::before { content: "· "; color: var(--card-mute); } .pr li code { font-family: var(--mono); font-size: 12px; color: var(--card-mute); } .pr section.wide li code { color: var(--card-fg); background: rgba(16, 26, 46, 0.06); padding: 1px 6px; border-radius: 4px; margin-right: 4px; } .pr section.wide li code::before { content: none; } /* hover feedback on the frame's controls */ .track button:hover::after { transform: scaleX(0.35); } .steps button:hover { border-color: var(--fg); color: var(--fg); } /* Responsive ----------------------------------------------------------------- */ @media (max-width: 900px) { .nav a:not(.nav-cta) { display: none; } .track button span { display: none; } .bar-note { display: none; } :root { --bar-top: 60px; --bar-bottom: 52px; } .brand-word { height: 18px; } .brand-mark { width: 30px; height: 27px; } /* text sits at the top; the subject sits below it */ .chapter { left: var(--gutter); right: var(--gutter); top: calc(var(--bar-top) + 3vh); bottom: auto; width: auto; display: block; } h1 { font-size: clamp(34px, 9.5vw, 56px); } h2 { font-size: clamp(28px, 8vw, 48px); } .lede { font-size: 15px; margin-top: 14px !important; } .button { margin-top: 20px !important; padding: 11px 20px; font-size: 15px; } .actions { margin-top: 20px !important; gap: 18px; } .eyebrow { margin-bottom: 12px !important; } } /* Reduced motion / no-JS fallback: chapters stack, subject shown finished ----- */ html.is-static .runway { display: none; } html.is-static .stage { position: static; overflow: visible; min-height: 0; padding: calc(var(--bar-top) + 24px) var(--gutter) calc(var(--bar-bottom) + 24px); display: flex; flex-direction: column; } html.is-static .chapter { order: 2; } html.is-static .chapter--ask { order: 0; } html.is-static .subject { order: 1; } html.is-static .backdrop--dark { display: none; } html.is-static .chapter { position: static; --t: 1; transform: none; pointer-events: auto; display: block; max-width: 680px; margin: 0 0 64px; width: auto; } html.is-static .subject { position: relative; left: auto; top: auto; margin: 0 0 64px; transform: scale(var(--fit, 1)); transform-origin: top left; height: calc(580px * var(--fit, 1)); } html.is-static .subject .diagram { width: 1000px; height: 580px; } html.is-static .steps { visibility: hidden; }