/* Selvedge Systems — stylesheet v2 Formal register. The selvedge is present only as visual language: the woven top edge, the warp band at the left margin, stitch-dashed dividers, and the single red thread used as the accent. Never in copy. */ :root { --paper: #FAF8F3; --paper-raised: #FFFFFF; --ink: #1F1D18; --ink-soft: #57534A; --ink-faint: #8A8478; --line: #E5E0D3; --line-strong: #D4CEBD; --indigo: #33507E; --indigo-deep: #253C61; --thread: #B8442F; /* the red thread — sparingly */ --radius-pill: 999px; --content: 44rem; --wide: 70rem; --font-display: "New York", ui-serif, "Iowan Old Style", "Palatino", "Georgia", serif; --font-body: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* Patent-pending toggle. Ships OFF. After the application is on file, change to on every page. The :not() form + !important beats any component display rule, so nothing leaks. */ html:not(.patent-filed) .pp { display: none !important; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Woven top edge: two indigo picks, one red thread. */ body::before { content: ""; display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 7px; background: linear-gradient(to bottom, var(--indigo) 0 2px, var(--paper) 2px 3px, var(--indigo) 3px 5px, var(--paper) 5px 6px, var(--thread) 6px 7px); } /* Warp band: faint vertical threads running down the left margin. */ .selvedge-band { position: fixed; left: 0; top: 0; bottom: 0; width: 14px; pointer-events: none; z-index: 30; background: linear-gradient(to right, rgba(51, 80, 126, 0.35) 0 1px, transparent 1px 5px, rgba(51, 80, 126, 0.22) 5px 6px, transparent 6px 10px, rgba(184, 68, 47, 0.38) 10px 11px, transparent 11px); } @media (max-width: 900px) { .selvedge-band { display: none; } } /* Thread rail: a hairline with a red runner tracking scroll (desktop only). */ .thread-rail { position: fixed; right: 26px; top: 18vh; height: 64vh; width: 1px; background: var(--line-strong); z-index: 30; pointer-events: none; } .thread-rail::after { content: ""; position: absolute; left: -3px; top: calc(var(--p, 0) * 100%); width: 7px; height: 7px; border-radius: 50%; background: var(--thread); transition: top 120ms linear; } @media (max-width: 1100px) { .thread-rail { display: none; } } ::selection { background: rgba(51, 80, 126, 0.16); } a { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 160ms var(--ease-out); } a:hover { color: var(--indigo-deep); text-decoration-color: var(--thread); } h1, h2, .lede-serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; } h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.06; max-width: 22ch; } h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.16; max-width: 30ch; margin-bottom: 1.1rem; } h3 { font-size: 1.1rem; font-weight: 640; margin: 2.1rem 0 0.5rem; } p { margin-bottom: 1.05rem; color: var(--ink-soft); } p strong { color: var(--ink); font-weight: 600; } .lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); } .lede strong { color: var(--ink); } /* ---------- navigation ---------- */ .nav { position: fixed; top: 7px; left: 0; right: 0; z-index: 60; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); background: rgba(250, 248, 243, 0.82); border-bottom: 1px solid var(--line); } .nav-inner { max-width: var(--wide); margin: 0 auto; padding: 0.7rem 1.5rem; display: flex; align-items: center; gap: 0.9rem; } /* Menu icon (upper left) with hover-expand-down panel. */ .menu-root { position: relative; } .menu-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out); } .mark { display: block; width: 18px; } .mark span { display: block; height: 2px; margin-bottom: 3px; background: var(--indigo); transition: width 200ms var(--ease-out); } .mark span:last-child { background: var(--thread); margin-bottom: 0; width: 62%; } /* The hamburger is the mobile nav only; on desktop the toolbar carries navigation and no three-line glyph appears (it always reads as a menu). */ @media (min-width: 901px) { .menu-root { display: none; } } .menu-root:hover .menu-btn, .menu-root:focus-within .menu-btn, .menu-root.open .menu-btn { background: rgba(51, 80, 126, 0.07); border-color: var(--line); } .menu-root:hover .mark span:last-child, .menu-root:focus-within .mark span:last-child { width: 100%; } .menu-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 15.5rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(31, 29, 24, 0.25), 0 2px 8px rgba(31, 29, 24, 0.05); padding: 0.55rem; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s 180ms; } .menu-root:hover .menu-panel, .menu-root:focus-within .menu-panel, .menu-root.open .menu-panel { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; } .menu-panel a { display: block; padding: 0.42rem 0.75rem; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 0.94rem; } .menu-panel a:hover { background: rgba(51, 80, 126, 0.07); color: var(--indigo-deep); } .menu-panel .menu-group { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; padding: 0.65rem 0.75rem 0.25rem; border-top: 1px dashed var(--line); margin-top: 0.35rem; } .menu-panel .menu-group:first-child { border-top: none; margin-top: 0; padding-top: 0.35rem; } .wordmark { display: flex; align-items: baseline; gap: 0.45rem; text-decoration: none; color: var(--ink); font-weight: 650; letter-spacing: 0.08em; font-size: 0.92rem; } .wordmark:hover { color: var(--ink); } .wordmark small { font-weight: 450; color: var(--ink-faint); letter-spacing: 0.08em; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 0.15rem; } .nav-links > a, .dd > .dd-top { text-decoration: none; color: var(--ink-soft); font-size: 0.92rem; padding: 0.38rem 0.8rem; border-radius: var(--radius-pill); transition: background 160ms var(--ease-out), color 160ms var(--ease-out); display: inline-flex; align-items: center; gap: 0.35rem; } .nav-links > a:hover, .dd > .dd-top:hover { background: rgba(51, 80, 126, 0.08); color: var(--ink); } .nav-links a.cta { color: #fff; background: var(--indigo); font-weight: 550; } .nav-links a.cta:hover { background: var(--indigo-deep); color: #fff; } /* Hover dropdowns in the menu bar (Products, Deployments). */ .dd { position: relative; } .dd .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms var(--ease-out); } .dd:hover .caret, .dd:focus-within .caret { transform: rotate(225deg) translateY(-1px); } .dd-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, -6px); min-width: 17rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(31, 29, 24, 0.25), 0 2px 8px rgba(31, 29, 24, 0.05); padding: 0.55rem; opacity: 0; visibility: hidden; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s 180ms; } .dd:hover .dd-panel, .dd:focus-within .dd-panel { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; } .dd-panel a { display: block; padding: 0.5rem 0.75rem; border-radius: 9px; text-decoration: none; } .dd-panel a:hover { background: rgba(51, 80, 126, 0.07); } .dd-panel a b { display: block; color: var(--ink); font-weight: 620; font-size: 0.93rem; } .dd-panel a span { display: block; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.4; } @media (max-width: 900px) { .nav-links .hide-m { display: none; } } /* ---------- structure ---------- */ .container { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; } /* Fixed nav: normal pages reserve space below it; the homepage stage starts at the document top so it is pinned from the first scroll tick. */ main { padding-top: 5rem; } main.home { padding-top: 0; } .section, .page-hero { scroll-margin-top: 6.5rem; } main .container { max-width: 51rem; } /* The pinned stage runs wider so scene copy and art sit side by side. */ main .scene-grid.container { max-width: 64rem; } .prose { max-width: var(--content); } .section { padding: 5rem 0 1.5rem; border-top: 1px dashed var(--line-strong); } .section.first { border-top: none; } .kicker { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 1.4rem; } .kicker .num { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--thread); font-weight: 600; } .kicker .label { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 550; } .page-hero { padding: 4rem 0 3.5rem; } .page-hero .lede { margin-top: 1.5rem; max-width: 56ch; } .badge { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; color: var(--indigo-deep); background: rgba(51, 80, 126, 0.09); border: 1px solid rgba(51, 80, 126, 0.22); border-radius: var(--radius-pill); padding: 0.22rem 0.75rem; margin-bottom: 1.3rem; } .btn { display: inline-block; border-radius: var(--radius-pill); padding: 0.62rem 1.35rem; font-weight: 560; font-size: 0.95rem; text-decoration: none; border: none; cursor: pointer; font-family: var(--font-body); transition: background 160ms var(--ease-out), transform 160ms var(--ease-out), border-color 160ms var(--ease-out); } .btn:active { transform: scale(0.985); } .btn-primary { background: var(--indigo); color: #fff; } .btn-primary:hover { background: var(--indigo-deep); color: #fff; } .btn-quiet { color: var(--indigo); border: 1px solid var(--line-strong); background: var(--paper-raised); } .btn-quiet:hover { border-color: var(--indigo); color: var(--indigo-deep); } .btn-row { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; } /* Spec rows — the definitional rhythm. */ .spec { border-top: 1px solid var(--line); margin-top: 2.2rem; } .spec-row { display: grid; grid-template-columns: 11.5rem 1fr; gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .spec-row dt { font-weight: 620; font-size: 0.98rem; color: var(--ink); } .spec-row dd { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; } .spec-row dd p { font-size: inherit; margin-bottom: 0.5rem; } .spec-row dd p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .spec-row { grid-template-columns: 1fr; gap: 0.3rem; } } /* Red-thread aside. */ .plainly { border-left: 2px solid var(--thread); padding: 0.2rem 0 0.2rem 1.3rem; margin: 2.4rem 0; max-width: var(--content); } .plainly p { color: var(--ink); font-size: 1.02rem; } .plainly p:last-child { margin-bottom: 0; } .plainly .who { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 550; margin-bottom: 0.4rem; } /* ---------- homepage morph: pinned stage, scenes smudge in place ---------- The wrapper provides scroll distance; the stage stays pinned; every scene occupies the SAME place and JS scrubs opacity/blur/drift by scroll position, so one frame's words dissolve into the next — no sliding, no covering. Without JS (html lacks .js) scenes lay out statically. */ .morph-stage { position: relative; } /* One viewport per scene plus a 150vh step between scenes: most of each step is a sharp dwell; the smudge happens only in the middle band. */ html.js .morph-stage { height: calc((var(--scenes, 5) - 1) * 150vh + 100vh); } .stage { background-image: repeating-linear-gradient(0deg, rgba(51, 80, 126, 0.016) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, rgba(51, 80, 126, 0.016) 0 1px, transparent 1px 7px); } html.js .stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .scene { position: relative; display: flex; align-items: center; padding: 6rem 0 4rem; } html.js .scene { position: absolute; inset: 0; padding: 86px 0 0; will-change: opacity, filter, transform; } .scene-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: center; width: 100%; } .scene h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); } .scene h2 { font-size: clamp(1.5rem, 2.7vw, 2rem); } .scene .lede { font-size: 1.12rem; } .scene-art { justify-self: center; width: 100%; max-width: 26rem; } .scene-art svg { display: block; width: 100%; height: auto; max-height: 52svh; } @media (max-width: 820px) { .scene-grid { grid-template-columns: 1fr; gap: 1.6rem; } .scene-art { max-width: 17rem; justify-self: start; order: 2; } .scene-art svg { max-height: 26svh; } } /* Line-art vocabulary shared by all graphics. */ .art .s { stroke: var(--indigo); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; } .art .sd { stroke: rgba(51, 80, 126, 0.32); stroke-width: 1.4; fill: none; stroke-linecap: round; } .art .sr { stroke: var(--thread); stroke-width: 1.7; fill: none; stroke-linecap: round; } .art .f { fill: var(--indigo); } .art .fd { fill: rgba(51, 80, 126, 0.32); } .art .fr { fill: var(--thread); } .art .dash { stroke-dasharray: 5 6; } /* Reveal (used outside the stage, e.g. the beta section). */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 90ms; } .reveal.d2 { transition-delay: 180ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } html.js .morph-stage { height: auto; } html.js .stage { position: static; height: auto; overflow: visible; } html.js .scene { position: static; padding: 4rem 0; opacity: 1 !important; filter: none !important; transform: none !important; visibility: visible !important; } .reveal { opacity: 1; transform: none; } } /* ---------- editorial listings (products, deployments — no cards) ---------- */ .listing { padding: 3rem 0 1rem; border-top: 1px dashed var(--line-strong); } .listing .tag { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 0.7rem; } .listing h2 { margin-bottom: 0.4rem; } .listing .status { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 1.2rem; } .listing .status b { color: var(--ink-soft); font-weight: 600; } /* Product-page hero art: sits beside the hero copy on wide screens. */ .hero-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; } .hero-split .page-art { width: 100%; max-width: 24rem; justify-self: center; } .hero-split .page-art svg { display: block; width: 100%; height: auto; } @media (max-width: 820px) { .hero-split { grid-template-columns: 1fr; gap: 1.6rem; } .hero-split .page-art { max-width: 16rem; justify-self: start; } } /* ---------- forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; max-width: 40rem; margin-top: 1.8rem; } .form-grid .full { grid-column: 1 / -1; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } label.field { display: block; } label.field span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 0.3rem 0.9rem; letter-spacing: 0.02em; } input[type="text"], input[type="email"], select, textarea { width: 100%; font-family: var(--font-body); font-size: 0.98rem; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 22px; padding: 0.62rem 1.1rem; transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); } textarea { border-radius: 18px; min-height: 8.5rem; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(51, 80, 126, 0.12); } .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.9rem; max-width: 40rem; } .form-msg { margin-top: 1rem; font-size: 0.95rem; display: none; } .form-msg.ok { display: block; color: var(--indigo-deep); } .form-msg.err { display: block; color: var(--thread); } /* ---------- tables (brief) ---------- */ .table-scroll { overflow-x: auto; margin: 1.6rem 0 2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); } table { border-collapse: collapse; width: 100%; font-size: 0.94rem; } th, td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-weight: 620; color: var(--ink); background: rgba(51, 80, 126, 0.05); white-space: nowrap; } td { color: var(--ink-soft); } tr:last-child td { border-bottom: none; } td strong { color: var(--ink); } .status-flag { color: var(--thread); font-weight: 620; } .doc-meta { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 1.6rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-faint); } .doc-meta b { color: var(--ink-soft); font-weight: 600; display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- footer ---------- */ footer { margin-top: 6rem; border-top: 1px solid var(--line-strong); padding: 3rem 0 6rem; font-size: 0.88rem; color: var(--ink-faint); background: var(--paper-raised); } footer .cols { display: flex; flex-wrap: wrap; gap: 2rem 4rem; justify-content: space-between; } footer nav { display: grid; gap: 0.35rem; } footer nav b { color: var(--ink-soft); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.2rem; } footer a { color: var(--ink-soft); text-decoration: none; } footer a:hover { color: var(--indigo); text-decoration: underline; } footer .legal { max-width: 30rem; } /* ---------- living graphics (the art breathes; stills under reduced motion) ---------- */ @media (prefers-reduced-motion: no-preference) { .art .shuttle { animation: artshuttle 5.2s linear infinite; } .art .shuttle.s2 { animation-duration: 6.8s; animation-delay: 1.4s; } .art .p { transform-box: fill-box; transform-origin: center; animation: artpulse 3.4s ease-in-out infinite; } .art .p2 { animation-delay: 0.35s; } .art .p3 { animation-delay: 0.7s; } .art .p4 { animation-delay: 1.05s; } .art .p5 { animation-delay: 1.4s; } .art .p6 { animation-delay: 1.75s; } .art .p7 { animation-delay: 2.1s; } .art .p8 { animation-delay: 2.45s; } .art .ring { transform-box: fill-box; transform-origin: center; animation: artring 3.4s ease-in-out infinite; } .art .fade { animation: artfade 4.8s ease-in-out infinite; } .art .fade.f2 { animation-delay: 1.6s; } .art .fade.f3 { animation-delay: 3.2s; } .art .draw { stroke-dasharray: 170; animation: artdraw 5.2s ease-in-out infinite; } .art .draw.d2 { animation-delay: 0.5s; } .art .runner { animation: artrun 4.2s linear infinite; } .art .runner.r2 { animation-delay: 1.4s; } .art .runner.r3 { animation-delay: 2.8s; } .art .march { animation: artmarch 1.5s linear infinite; } .art .strike { stroke-dasharray: 300; animation: artstrike 7s ease-in-out infinite; } } @keyframes artshuttle { 0% { transform: translateX(46px); opacity: 0; } 7% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(334px); opacity: 0; } } @keyframes artpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } @keyframes artring { 0%, 100% { transform: scale(0.85); opacity: 0.45; } 55% { transform: scale(1.12); opacity: 1; } } @keyframes artfade { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.55; } } @keyframes artdraw { 0% { stroke-dashoffset: 170; opacity: 0.2; } 18% { opacity: 1; } 55% { stroke-dashoffset: 0; } 88% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0.2; } } @keyframes artrun { 0% { transform: translateX(46px); opacity: 0; } 6% { opacity: 1; } 93% { opacity: 1; } 100% { transform: translateX(350px); opacity: 0; } } @keyframes artmarch { to { stroke-dashoffset: -22; } } @keyframes artstrike { 0% { stroke-dashoffset: 300; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } /* ---------- scroll cue (hero frame only) ---------- */ .scroll-cue { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.55rem; pointer-events: none; } .cue-label { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 550; color: var(--ink-faint); } .cue-line { position: relative; display: block; width: 1px; height: 46px; background: var(--line-strong); overflow: visible; } .cue-dot { position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--thread); } @media (prefers-reduced-motion: no-preference) { .cue-dot { animation: cuedrop 2.3s ease-in-out infinite; } } @keyframes cuedrop { 0% { top: -4px; opacity: 0; } 22% { opacity: 1; } 72% { opacity: 1; } 100% { top: 42px; opacity: 0; } } @media (max-height: 620px) { .scroll-cue { display: none; } }