/* ── Neutral-first system ─────────────────────────────────────────── A quiet gray canvas separates crisp white product surfaces from authoritative black sections. Blue remains a scarce digital accent. */ :root { --canvas-neutral: #f4f4f5; --canvas-neutral-soft: #fafafa; --surface-white: #ffffff; --border-neutral: #d4d4d8; } html > body { background: var(--canvas-neutral); } body { --color-surface: #f4f4f5; --color-rule: #d4d4d8; --color-rule-soft: #e4e4e7; --color-faint: #696970; --color-muted: #52525b; } /* Registration marks: tiny print-alignment ticks on the hero canvas. */ .reg-marks { position: relative; } .reg-marks::before, .reg-marks::after { content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: .8; } .reg-marks::before { top: -8px; left: -8px; border-top: 1px solid var(--border-neutral); border-left: 1px solid var(--border-neutral); } .reg-marks::after { bottom: -8px; right: -8px; border-bottom: 1px solid var(--border-neutral); border-right: 1px solid var(--border-neutral); } /* Button tactility: crafted compression, never playful. */ .btn:hover { transform: scale(.985); } .btn:active { transform: scale(.96); } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; } body { font-family: var(--font-sans); background: #fff; color: var(--color-ink); font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ═══ Layout ═══════════════════════════════════════════════════════════ Three column widths (§43): the navigation bar and footer run widest at 1440, page content sits in 1200, and the video demo narrows to 1024 so the carousel reads as a focused window rather than a full-bleed band. */ .wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px) { .wrap { padding-inline: 40px; } } .hdr .wrap, footer .wrap { max-width: 1440px; } .wrap-video { max-width: 1024px; } .home-v2 .sec { padding-block: 72px; } @media (min-width: 480px) { .home-v2 .sec { padding-block: 88px; } } @media (min-width: 768px) { .home-v2 .sec { padding-block: 120px; } } /* ═══ Type ═════════════════════════════════════════════════════════════ */ .d1 { font-size: clamp(2.5rem, 5.2vw, 4.25rem); line-height: 1.03; letter-spacing: -0.033em; font-weight: 600; } .d2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; font-weight: 600; } .d3 { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; } .d4 { font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.011em; font-weight: 600; } .lede { font-size: clamp(1.0625rem, 1.1vw, 1.1875rem); line-height: 1.6; color: var(--color-muted); } .on-dark .lede { color: var(--color-dark-muted); } .body-s { font-size: .9375rem; line-height: 1.62; color: var(--color-muted); } .on-dark .body-s { color: var(--color-dark-muted); } .eyebrow { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--color-faint); } .on-dark .eyebrow { color: var(--color-dark-muted); } .mono { font-family: var(--font-mono); } /* ═══ Surfaces ═════════════════════════════════════════════════════════ */ .card { background: #fff; border: 1px solid var(--color-rule); border-radius: 12px; } .on-dark .card { background: var(--color-ink-2); border-color: rgba(255,255,255,.10); } /* A single dark card on a light ground: pairs with the on-dark class on the card itself so its text, pills and links pick up the dark variants. */ .card-dark { background: var(--color-ink); border-color: rgba(255,255,255,.10); color: var(--color-dark-text); } section.on-dark { background: var(--color-ink); color: var(--color-dark-text); } /* The trust cards stay paper when their section goes ink: white boxes with light-ground text. */ #trust-model dl .card { background: #fff; border-color: var(--color-rule); color: var(--color-ink); } #trust-model dl .card .body-s { color: var(--color-muted); } /* ═══ Buttons - one filled primary per section (§35) ═══════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding-inline: 1.25rem; border-radius: 10px; cursor: pointer; font-size: .9375rem; font-weight: 500; letter-spacing: -0.006em; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .14s ease; } .btn-primary { background: var(--color-ink); color: #fff; } .btn-primary:hover { background: #2b2b2f; } .btn-ghost { background: #fff; color: var(--color-ink); border: 1px solid var(--color-rule); } .btn-ghost:hover { background: var(--color-surface); border-color: var(--color-ink); } .on-dark .btn-ghost { background: transparent; color: var(--color-dark-text); border-color: rgba(255,255,255,.20); } .on-dark .btn-ghost:hover { background: rgba(255,255,255,.06); } /* Ink is invisible on an ink ground, so the dark sections invert instead. */ .on-dark .btn-primary { background: #fff; color: var(--color-ink); } .on-dark .btn-primary:hover { background: #e4e4e7; } /* The header's primary button follows the header's own ground: when the sticky header goes dark over a dark section, the filled button inverts with it instead of disappearing into black-on-black. */ .nav-dark .btn-primary { background: #fff; color: var(--color-ink); } .nav-dark .btn-primary:hover { background: #e4e4e7; } .btn-sm { min-height: 40px; padding-inline: .9rem; font-size: .875rem; border-radius: 9px; } /* The header CTA is scoped away from the stock small button so it can carry a touch more height and padding without touching the mockup buttons inside the product frames. */ .hdr .btn-sm { min-height: 42px; padding-inline: 1rem; } .link { color: var(--color-blue); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .375rem; transition: gap .18s ease, color .18s ease; min-height: 44px; } .link:hover { gap: .625rem; color: var(--color-blue-strong); } .on-dark .link { color: var(--color-blue-dark); } .on-dark .link:hover { color: #e4e4e7; } /* The closing CTA is a floating on-dark card inside a light section, so the section-scoped dark treatment never reaches it: scope it here. */ #final-cta .link { color: #fafafa; } #final-cta .link:hover { color: #e4e4e7; gap: .375rem; } #final-cta .link span { transition: transform .18s ease; } #final-cta .link:hover span { transform: translateX(3px); } #faq { padding-bottom: 48px; } #final-cta { padding-top: 48px; } @media (min-width: 768px) { #faq { padding-bottom: 64px; } #final-cta { padding-top: 64px; } } :focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: 6px; } .on-dark :focus-visible, .nav-dark :focus-visible { outline-color: var(--color-blue-dark); } .skip { position: absolute; left: 20px; top: -60px; z-index: 100; background: #fff; border: 1px solid var(--color-rule); border-radius: 8px; padding: .7rem 1rem; font-size: .875rem; font-weight: 500; transition: top .16s ease; } .skip:focus { top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ═══ Status pills - icon + word + colour, in that order ═══════════════ */ .pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 6px; padding: .2rem .5rem; font-size: .6875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .pill svg { width: 11px; height: 11px; flex: none; } /* Backgrounds are literals, not theme vars: the browser build of Tailwind prunes @theme variables it never sees used in utilities, and these are only referenced from hand-written rules. */ .pill-ok { background: #f4f4f5; color: var(--color-ok); border-color: #d4d4d8; } .pill-warn { background: #f4f4f5; color: var(--color-warn); border-color: #d4d4d8; } .pill-bad { background: #e4e4e7; color: var(--color-bad); border-color: #a1a1aa; } .pill-blue { background: #f4f4f5; color: var(--color-ink); border-color: #d4d4d8; } .pill-neutral { background: #f3f4f6; color: var(--color-neutral); border-color: #e4e4e7; } .on-dark .pill-ok { background: rgba(255,255,255,.12); color: #f4f4f5; border-color: rgba(255,255,255,.28); } .on-dark .pill-warn { background: rgba(255,255,255,.12); color: #d4d4d8; border-color: rgba(255,255,255,.28); } .on-dark .pill-bad { background: rgba(255,255,255,.12); color: #d4d4d8; border-color: rgba(255,255,255,.28); } .on-dark .pill-blue { background: rgba(255,255,255,.13); color: var(--color-dark-text); border-color: rgba(255,255,255,.3); } .on-dark .pill-neutral { background: rgba(255,255,255,.07); color: #a1a1aa; border-color: rgba(255,255,255,.14); } /* …but pills sitting on the light mock chips inside a dark card keep the light-ground palette - the surface beneath them is white, not ink. */ .card-dark .pill-blue { background: #f4f4f5; color: var(--color-ink); border-color: #d4d4d8; } .card-dark .pill-ok { background: #f4f4f5; color: var(--color-ok); border-color: #d4d4d8; } /* Demonstration data is always labelled (§45). */ .demo-tag { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-faint); } .on-dark .demo-tag { color: var(--color-dark-muted); } /* ═══ Reveal ═══════════════════════════════════════════════════════════ */ .rv { opacity: 0; transform: translate3d(0,14px,0); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); } .rv.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ═══ Hero ecosystem ═══════════════════════════════════════════════════ Five beats - Issue → Claim → Keep → Share → Verify - on a centred carousel. The live beat always sits in the middle at full size and full clarity; its neighbours sit smaller, dimmed and slightly out of focus, so depth carries "which one am I reading" instead of a border tint. The track holds seven positions: the five real panels plus a clone of the last at the head and the first at the tail. That is what makes the wrap seamless - beat 5 animates forward into the clone of beat 1, then the track rewinds without a transition to the real one. */ .eco { --gap: 28px; --slot: 32%; /* every slot is the same width … */ --eco-h: 400px; } .eco .fx { opacity: 0; transform: translate3d(0,6px,0); transition: opacity .5s ease, transform .5s ease; } .eco .fx.on { opacity: 1; transform: none; } /* Vertical padding, cancelled by an equal negative margin, so the focused card's lift, growth and shadow are not sliced off by the horizontal clip. */ .eco-window { overflow: hidden; padding-block: 56px; margin-block: -56px; } .eco-track { display: flex; gap: var(--gap); align-items: stretch; transition: transform .9s cubic-bezier(.4,0,.2,1); } /* The silent rewind must freeze every animated descendant, not just the track: the reveals reset on the same tick, and a 0.5s cross-fade there is exactly as visible as a sliding card. */ .eco-track.no-anim, .eco-track.no-anim .eco-panel, .eco-track.no-anim .fx, .eco.no-anim .eco-rule i { transition: none !important; } /* … and the centre card is emphasised with a transform rather than a wider flex-basis. Animating flex-basis re-laid out the whole track on every frame, which is what made the growth read as a stutter; a scale runs on the compositor and moves in step with the slide. The focus scale also grows past the gap, so with z-index the neighbours tuck behind the live card instead of sitting beside it. */ .eco-panel { position: relative; z-index: 1; flex: 0 0 var(--slot); min-width: 0; opacity: .45; transform: scale(.97); transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .55s ease, filter .55s ease; } /* The live card carries only a whisper of scale: the emphasis reads as selected, not enlarged. The step rail and the blue tracker carry the sequence; a slice of each neighbour stays visible at the rail's edge. */ .eco-panel.is-focus { opacity: 1; filter: none; transform: scale(1.03); z-index: 5; } /* The box paints white text for its own chrome; the cards are white, so they take the ink colour back or every unclassed label disappears. */ .eco-panel > .card { height: 100%; min-height: var(--eco-h); color: var(--color-ink); box-shadow: 0 1px 2px rgba(0,0,0,.4); } .eco-panel.is-focus > .card { border: 2px solid #000; box-shadow: 0 22px 48px -20px rgba(0,0,0,.85); } @media (max-width: 1023px) { /* One beat at a time: the window clips to a single slot and the track becomes a rail the script slides whole positions along. The head and tail clones stay in the rail so the wrap works exactly as it does on desktop - it just moves one slot instead of four. The rail is capped so a phone-width card never stretches into a tablet banner, and pan-y keeps vertical scrolling native: only clearly horizontal gestures belong to the demonstration. */ .eco { --eco-h: auto; } .eco-window { overflow: hidden; padding-block: 0; margin-block: 0; max-width: 560px; margin-inline: auto; touch-action: pan-y; } .eco-track { display: flex; gap: 0; transform: translateX(-100%); transition: transform .45s cubic-bezier(.4,0,.2,1); } .eco-track.is-drag { transition: none; } .eco-panel { flex: 0 0 100%; min-width: 0; padding-inline: 6px; opacity: 1; filter: none; transform: none; } .eco-panel.is-focus { transform: none; } .eco-panel > .card { min-height: 0; box-shadow: 0 14px 34px -20px rgba(0,0,0,.65); } .eco-panel.is-focus > .card { border: 1px solid var(--color-rule); box-shadow: 0 14px 34px -20px rgba(0,0,0,.65); } } /* ═══ Step rail ════════════════════════════════════════════════════════ The rule above the step names is the tracker - it fills as the loop runs, so progress lives on the line the eye already follows. */ .eco-rule { position: relative; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.14); margin-top: 72px; } .eco-rule i { position: absolute; inset: 0; border-radius: 3px; transform-origin: left; transform: scaleX(0); background: #fafafa; transition: transform .9s cubic-bezier(.4,0,.2,1); } .eco-steps { display: flex; align-items: center; gap: clamp(2px, 1.6vw, 22px); flex-wrap: wrap; } /* Each step is a real button - tappable, focusable, arrow-navigable - while the li carries the state colour so the palette stays put. */ .eco-step { display: flex; align-items: center; font-size: .8125rem; color: #8a8a8a; white-space: nowrap; transition: color .35s ease; } .eco-step-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding-inline: .3rem; font: inherit; color: inherit; white-space: nowrap; background: none; border: 0; cursor: pointer; border-radius: 8px; touch-action: manipulation; } .eco-step-btn:hover { color: #fff; } .eco-step .n { font-family: var(--font-mono); font-size: .6875rem; font-variant-numeric: tabular-nums; opacity: .8; } .eco-step .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: rgba(255,255,255,.22); transition: background-color .35s ease, transform .35s ease; } .eco-step.is-done { color: #b4b4b4; } .eco-step.is-done .dot { background: #52525b; } .eco-step.is-on { color: #fff; font-weight: 500; } .eco-step.is-on .dot { background: var(--color-blue-dark, #fafafa); transform: scale(1.15); } .eco-pause { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding-inline: .7rem; border-radius: 9px; cursor: pointer; font-size: .8125rem; color: #8a8a8a; background: transparent; border: 1px solid transparent; transition: color .18s, background-color .18s, border-color .18s; } .eco-pause:hover { color: #fff; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); } @media (max-width: 1023px) { /* The steps become five even zones across the rail width - a segmented control rather than a wrapped list - with a thin underline marking the live beat. The play control sits on its own line, right-aligned where it sits on desktop. This block must stay after the base step and rule rules: it overrides them by source order. */ .eco-rule { margin-top: 20px; } .eco-steps { flex: 0 0 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; } .eco-step .dot { display: none; } .eco-step-btn { width: 100%; justify-content: center; padding-inline: 0; font-size: .75rem; min-height: 44px; } .eco-step.is-on .eco-step-btn { box-shadow: inset 0 -2px 0 var(--color-blue-dark); } .eco-pause { margin-left: auto; touch-action: manipulation; } } @media (max-width: 359px) { /* Numbers drop away only where the labels alone are a squeeze. */ .eco-step .n { display: none; } } @media (prefers-reduced-motion: reduce) { .faq-verify, .faq-verify * { animation: none !important; } } /* Wide + reduced motion: the loop becomes a static stack - every beat shown at once, nothing moving, exactly as before. Narrow + reduced keeps the one-slot rail above; changes land instantly (the global rule already zeroes transitions) and navigation stays manual. */ @media (prefers-reduced-motion: reduce) and (min-width: 1024px) { .eco-window { overflow: visible; padding-block: 0; margin-block: 0; } .eco-track { display: grid; grid-auto-flow: row; transform: none !important; gap: 14px; } .eco-panel { flex: none; opacity: 1 !important; filter: none !important; transform: none !important; } .eco-panel[aria-hidden="true"] { display: none; } .eco { --eco-h: auto; } .eco .fx { opacity: 1 !important; transform: none !important; } .eco-track, .eco-panel, .eco-panel > .card, .eco-rule i { transition: none !important; } } @media (prefers-reduced-motion: reduce) and (max-width: 1023px) { .eco .fx { opacity: 1 !important; transform: none !important; } .eco-track, .eco-track.is-drag { transition: none !important; } } /* ═══ Ecosystem frame ═════════════════════════════════════════════════ A contained product visual rather than an image bleeding into the page. Cards sit white on the surface ground so the frame reads as a window onto the product. */ .eco-box { position: relative; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: #171717; color: #fff; padding: 32px 16px 22px; } @media (min-width: 768px) { .eco-box { padding: 48px 28px 26px; } } /* The roomy 76px top pad exists for the desktop carousel's lift and overlap; from 1024px up nothing changes. */ @media (min-width: 1024px) { .eco-box { padding: 76px 36px 28px; } } .eco-box :focus-visible { outline-color: var(--color-blue-dark); } /* ═══ Product experience - the workflow stack ═════════════════════════ The issuance page's organisational-control treatment, applied to the four product claims: a ruled index of the stages, then one workspace in which a pinned bar holds the context and a dark card per stage settles beneath it. Each card sinks back as the next slides over it, and the bar, the cards and the section below leave together the moment card four arrives, so nothing ever pauses on its own. */ .wf-rail { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 28px; border-block: 1px solid var(--color-rule); } .wf-principle { display: flex; align-items: center; gap: .6rem; min-height: 58px; padding: 12px 0; font-size: .8125rem; font-weight: 500; line-height: 1.45; } .wf-principle:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--color-rule); } .wf-principle:nth-child(n+3) { border-top: 1px solid var(--color-rule-soft); } .wf-n { font-family: var(--font-mono); font-size: .6875rem; color: var(--color-faint); } .wf-workspace { margin-top: 32px; } .wf-stack-label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--color-rule); border-radius: 12px; background: var(--color-surface); } /* Sticky release arithmetic, identical to .org-stack on the issuance page: each pinned item's bottom margin is the distance it still owes card four (the bar owes its gap, three steps and a card; the cards owe 3, 2, 1 and 0 steps), so all five share one release point. The next item's top margin takes it back, and flex keeps the two from collapsing. Cards are taller on phones, where each claim wraps to more lines. */ .wf-stack { --stack-top: 72px; --stack-step: 32px; --stack-gap: clamp(150px,28vh,240px); --stack-card-h: 420px; --stack-label-h: 44px; --stack-label-gap: 14px; --stack-first: calc(var(--stack-top) + var(--stack-label-h) + var(--stack-label-gap)); position: relative; overflow: clip; display: flex; flex-direction: column; } .wf-stack > .wf-stack-label { position: sticky; top: var(--stack-top); z-index: 5; flex: none; height: var(--stack-label-h); min-height: 0; margin-bottom: calc(var(--stack-label-gap) + var(--stack-step) * 3 + var(--stack-card-h)); } .wf-stack-card { position: sticky; flex: none; } .wf-stack-card:nth-of-type(1) { top: var(--stack-first); z-index: 1; margin-top: calc(0px - var(--stack-step) * 3 - var(--stack-card-h)); margin-bottom: calc(var(--stack-step) * 3); } .wf-stack-card:nth-of-type(2) { top: calc(var(--stack-first) + var(--stack-step)); z-index: 2; margin-top: calc(var(--stack-gap) - var(--stack-step) * 3); margin-bottom: calc(var(--stack-step) * 2); } .wf-stack-card:nth-of-type(3) { top: calc(var(--stack-first) + var(--stack-step) * 2); z-index: 3; margin-top: calc(var(--stack-gap) - var(--stack-step) * 2); margin-bottom: var(--stack-step); } .wf-stack-card:nth-of-type(4) { top: calc(var(--stack-first) + var(--stack-step) * 3); z-index: 4; margin-top: calc(var(--stack-gap) - var(--stack-step)); } /* Only the one-off entrance is timed; the recession follows the scroll. */ .wf-stack-card-surface { height: var(--stack-card-h); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: var(--color-ink); color: var(--color-dark-text); overflow: hidden; transform-origin: top center; translate: 0 var(--stack-enter-y,0); scale: var(--stack-scale,1); transition: translate .32s cubic-bezier(.2,.75,.25,1); } .wf-stack.has-motion .wf-stack-card-surface { will-change: transform; } .wf-stack.has-motion .wf-stack-card:first-of-type:not(.is-entered) { --stack-enter-y: 80px; } .wf-stack-card-head { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 4px 20px; border-bottom: 1px solid rgba(255,255,255,.12); background: var(--color-ink-2); } .wf-stack-card-title { color: var(--color-dark-text); font-family: var(--font-mono); font-size: .75rem; font-weight: 600; } .wf-stack-card-link { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .75rem; font-weight: 500; color: #fafafa; text-decoration: none; white-space: nowrap; } .wf-stack-card-link:hover { color: #e4e4e7; } .wf-stack-card-link:focus-visible { outline: 2px solid #fafafa; outline-offset: 2px; border-radius: 4px; } .wf-stack-card-body { padding: 24px; } .wf-stack-card .text-faint { color: var(--color-dark-muted) !important; } .wf-kicker { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--color-dark-muted); } .wf-claim { margin-top: 10px; max-width: 52ch; font-size: 1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--color-dark-text); } .wf-sub { margin-top: 6px; max-width: 60ch; font-size: .8125rem; line-height: 1.5; color: var(--color-dark-muted); } .wf-list { margin-top: 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; } .wf-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; } .wf-list-row:first-child { border-top: 0; } .wf-data-grid { margin-top: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; overflow: hidden; } .wf-data { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.1); } .wf-data:first-child { border-top: 0; } .wf-data dt { font-size: .75rem; color: var(--color-dark-muted); } .wf-data dd { font-size: .8125rem; font-weight: 500; text-align: right; } /* Pills on the ink cards take the dark-ground palette. */ .wf-stack-card .pill-ok { background: rgba(255,255,255,.12); color: #f4f4f5; border-color: rgba(255,255,255,.28); } .wf-stack-card .pill-warn { background: rgba(255,255,255,.12); color: #d4d4d8; border-color: rgba(255,255,255,.28); } .wf-stack-card .pill-blue { background: rgba(255,255,255,.13); color: #fafafa; border-color: rgba(255,255,255,.3); } .wf-stack-card .pill-neutral { background: rgba(255,255,255,.07); color: #a1a1aa; border-color: rgba(255,255,255,.14); } @media (min-width: 768px) { .wf-rail { grid-template-columns: repeat(4,minmax(0,1fr)); } .wf-rail .wf-principle { padding: 14px 22px; border-top: 0; border-left: 1px solid var(--color-rule); } .wf-rail .wf-principle:first-child { padding-left: 0; border-left: 0; } .wf-stack { --stack-card-h: 390px; } .wf-stack-card-body { padding: 30px 32px; } .wf-claim { font-size: 1.125rem; } .wf-data-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); } .wf-data { display: block; padding: 16px; border-top: 0; border-left: 1px solid rgba(255,255,255,.1); } .wf-data:first-child { border-left: 0; } .wf-data dd { margin-top: 5px; font-size: .875rem; text-align: left; } } @media (min-width: 960px) { .wf-stack { --stack-top: 80px; --stack-step: 40px; --stack-gap: clamp(220px,36vh,360px); } } @media (prefers-reduced-motion: reduce) { .wf-stack-card-surface { transition: none; translate: none; scale: none; } } /* ═══ Employment verification - one connected trace ══════════════════ The network section shows the mechanism instead of three more feature cards: a single white instrument on the grey ground, four processing steps on a thin spine: record, authorisation, field outcomes, formal result. The steps deliberately differ inside: a record reads like a record, a request like a request, and every numbered node resolves the same way - ink only once the reading line has reached it. */ .ev-flow { position: relative; background: var(--canvas-neutral); border: 1px solid var(--color-rule); border-radius: 14px; padding: 1rem; } @media (min-width: 768px) { .ev-flow { padding: 1.75rem 1.9rem; } } /* One physical spine sits exactly beneath the number centres. The markers carry a six-pixel white halo, so the same straight line is visible only in the equal spaces between boxes and can never touch or cross one. Its ink layer is a transform-only scroll progress indicator: smooth to update, reversible, and free of layout work. */ #verification-network { padding-block: 64px; } @media (min-width: 768px) { #verification-network { padding-block: 120px; } } .ev-trace { --ev-progress: 0; --ev-node: 26px; --ev-space: 1rem; --ev-spine-top: calc(var(--ev-space) + var(--ev-node) / 2); --ev-spine-height: calc(100% - (var(--ev-space) * 2 + var(--ev-node))); position: relative; display: grid; isolation: isolate; } .ev-trace::before, .ev-trace::after { content: ""; position: absolute; z-index: 0; left: calc(var(--ev-node) / 2 - 1px); top: var(--ev-spine-top); height: var(--ev-spine-height); width: 2px; border-radius: 999px; transform-origin: top; } .ev-trace::before { background: var(--color-rule); } .ev-trace::after { background: var(--color-ink); transform: scaleY(var(--ev-progress)); will-change: transform; } .ev-step { position: relative; z-index: 1; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 1rem; padding-block: var(--ev-space); } .ev-marker { position: relative; } .ev-marker::before { content: ""; position: absolute; z-index: 1; inset: -6px auto auto -6px; width: calc(var(--ev-node) + 12px); height: calc(var(--ev-node) + 12px); background: var(--canvas-neutral); } .ev-num { display: grid; place-items: center; width: var(--ev-node); height: var(--ev-node); position: relative; z-index: 2; border: 1px solid var(--color-rule); border-radius: 8px; background: var(--color-surface); font-family: var(--font-mono); font-size: .625rem; font-variant-numeric: tabular-nums; color: var(--color-muted); } .ev-step.is-passed .ev-num { background: var(--color-ink); border-color: var(--color-ink); color: #fff; } .ev-title { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--color-faint); } .ev-chip { display: inline-flex; align-items: center; border: 1px solid var(--color-rule); background: var(--color-surface); border-radius: 7px; padding: .3rem .55rem; font-size: .75rem; font-weight: 500; } /* ═══ Record history - one record, three attached states ═══════════ The record changes once through a short sequence and then rests. History is the only idea here: no second lifecycle or trust model. */ .rh-card { background: var(--color-ink); color: var(--color-dark-text); border: 1px solid var(--color-ink); border-radius: 14px; padding: 1.25rem; } @media (min-width: 768px) { .rh-card { padding: 1.65rem 1.75rem; } } .rh-card .text-muted, .rh-card .text-faint { color: var(--color-dark-muted); } .rh-card .text-ink { color: var(--color-dark-text); } .rh-card .border-rule-soft { border-color: rgba(255,255,255,.12); } .rh-status { display: inline-flex; align-items: center; gap: .45rem; min-height: 30px; padding: .35rem .65rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .rh-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue); } .rh-timeline { margin-top: 1.5rem; } .rh-event { position: relative; min-height: 54px; padding-left: 2rem; opacity: 0; transform: translate3d(0,8px,0); transition: opacity .34s ease var(--rh-delay), transform .34s ease var(--rh-delay); } .rh-event + .rh-event { margin-top: 1.75rem; } .rh-event::before { content: ""; position: absolute; z-index: 2; left: 0; top: .3rem; width: 11px; height: 11px; border: 2px solid var(--color-ink); border-radius: 50%; background: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); } .rh-event:not(:last-child)::after { content: ""; position: absolute; z-index: 1; left: 5px; top: calc(.3rem + 11px); bottom: -1.95rem; width: 1px; background: var(--color-blue); transform: scaleY(0); transform-origin: top; transition: transform .3s ease var(--rh-line-delay); } .rh-card.is-running .rh-event, .rh-card.is-complete .rh-event { opacity: 1; transform: none; } .rh-card.is-running .rh-event::after, .rh-card.is-complete .rh-event::after { transform: scaleY(1); } .rh-note { opacity: 0; transform: translate3d(0,6px,0); transition: opacity .3s ease 1.45s, transform .3s ease 1.45s; } .rh-card.is-running .rh-note, .rh-card.is-complete .rh-note { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rh-event, .rh-event::after, .rh-note { transition: none !important; } } /* ═══ Header ═══════════════════════════════════════════════════════════ */ .hdr { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease, color .3s ease; } .hdr.is-stuck { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(12px); border-bottom-color: var(--color-rule); } .hdr.is-stuck.nav-neutral { background: rgba(244,244,245,.92); } .hdr.nav-dark { color: var(--color-dark-text); } .hdr.nav-dark.is-stuck { background: rgba(11,13,16,.92); border-bottom-color: rgba(255,255,255,.1); } .logo { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.025em; } .logo-dot { color: var(--color-blue); } .nav-dark .logo-dot, .on-dark .logo-dot, footer .logo-dot { color: var(--color-blue-dark); } footer .eyebrow { font-size: .875rem; font-weight: 600; } .navlink { display: inline-flex; align-items: center; gap: .375rem; height: 44px; padding-inline: .6875rem; border-radius: 8px; font-size: .9375rem; font-weight: 500; color: var(--color-muted); text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 7px; transition: color .18s ease, text-decoration-color .18s ease; } .navlink:hover { color: var(--color-ink); text-decoration-color: var(--color-ink); } /* Pricing sits in the IA before its page exists. It is rendered as text, not an anchor, so it never ships as a dead href - and it is dimmed so it does not invite the click it cannot answer. */ .navlink-soon, .navlink-soon:hover { color: var(--color-faint); cursor: default; } .nav-dark .navlink { color: #a1a1aa; } .nav-dark .navlink:hover { color: #fff; text-decoration-color: #fff; } .nav-dark .navlink-soon, .nav-dark .navlink-soon:hover { color: #696970; } /* Orientation, not decoration: the Product trigger gains weight while a visitor is inside the product area, even with the panel closed. */ .menu-item:has(.menu-link[aria-current="page"]) > .navlink { font-weight: 600; } .navlink svg { width: 12px; height: 12px; opacity: .75; transition: transform .18s ease; } .menu-item:hover .navlink svg, .menu-item:focus-within .navlink svg { transform: rotate(180deg); } .menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; opacity: 0; visibility: hidden; transform: translate3d(0,-4px,0) scale(.99); transform-origin: top left; transition: opacity .2s ease, transform .2s ease, visibility .2s; background: #fff; color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(11,13,16,.18); padding: .5rem; min-width: 280px; } .menu-item:hover > .menu-panel, .menu-item:focus-within > .menu-panel, .menu-item.is-open > .menu-panel { opacity: 1; visibility: visible; transform: translate3d(0,0,0) scale(1); } .menu-item.is-dismissed > .menu-panel { opacity: 0; visibility: hidden; transform: translate3d(0,-4px,0) scale(.99); } .menu-link { display: block; padding: .625rem .75rem; border-radius: 8px; min-height: 44px; transition: background-color .15s ease; } .menu-link:hover { background: var(--color-surface); } .menu-link b { display: block; font-size: .875rem; font-weight: 500; } .menu-link span { display: block; font-size: .75rem; color: var(--color-faint); margin-top: .1rem; } @media (max-width: 1023px) { .menu-panel { display: none; } } /* ═══ Mobile drawer ════════════════════════════════════════════════════ */ .drawer { position: fixed; inset: 0; z-index: 80; visibility: hidden; } .drawer[data-open="true"] { visibility: visible; } .drawer-scrim { position: absolute; inset: 0; background: rgba(11,13,16,.4); opacity: 0; transition: opacity .24s ease; } .drawer[data-open="true"] .drawer-scrim { opacity: 1; } .drawer-panel { position: absolute; inset-block: 0; right: 0; width: min(400px, 92vw); background: #fff; transform: translate3d(100%,0,0); transition: transform .28s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 429px) { .home-v2 .drawer-panel { width: 100%; } } .drawer[data-open="true"] .drawer-panel { transform: none; } .drawer details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 1rem; font-weight: 500; } .drawer details > summary::-webkit-details-marker { display: none; } .drawer details[open] > summary svg { transform: rotate(180deg); } .drawer summary svg { width: 14px; height: 14px; color: var(--color-faint); transition: transform .2s ease; } .drawer-sub a { min-height: 44px; display: flex; align-items: center; font-size: .9375rem; color: var(--color-muted); } .drawer-sub a:hover { color: var(--color-blue); } /* ═══ FAQ ══════════════════════════════════════════════════════════════ An editorial question list: thin rules carry the structure, the whole question row is the control, and the answer fades in over a beat - no boxes, no cards. Native details keep keyboard behaviour honest; script only publishes the button semantics and the ids. */ .faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.011em; } .faq > summary::-webkit-details-marker { display: none; } .faq summary .ico { flex: none; width: 18px; height: 18px; position: relative; } .faq summary .ico::before, .faq summary .ico::after { content: ""; position: absolute; background: var(--color-faint); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; } .faq summary .ico::before { inset: 8px 0 8px 0; height: 2px; } .faq summary .ico::after { inset: 0 8px 0 8px; width: 2px; } .faq[open] summary .ico::after { transform: rotate(90deg); opacity: 0; } .faq[open] > summary + * { animation: faqIn .25s ease; } @keyframes faqIn { from { opacity: 0; } } /* ═══ FAQ verifier - the left column's resolved answer ═════════════════ A public record at rest in its verified state, re-read on a slow cycle: a blue scan line passes down the card and the state holds. The sweep is decorative, visible for only a third of the cycle, and under reduced motion the card simply rests. */ .faq-verify { max-width: 360px; } .fv-card { position: relative; overflow: hidden; padding: 1.25rem; } .fv-scan { position: absolute; left: 0; right: 0; top: 0; height: 44px; opacity: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(37,99,235,.07) 40%, rgba(37,99,235,.20) 78%, rgba(37,99,235,.48)); animation: fvScan 4.4s ease-in-out infinite; } @keyframes fvScan { 0%, 2% { opacity: 0; transform: translate3d(0, -44px, 0); } 4% { opacity: 1; } 60% { opacity: 1; transform: translate3d(0, 700%, 0); } 62%, 92% { opacity: 0; transform: translate3d(0, 700%, 0); } 100% { opacity: 0; transform: translate3d(0, -44px, 0); } } /* ═══ Product frame - one consistent chrome for every screenshot ═══════ */ .frame { border: 1px solid var(--color-rule); border-radius: 14px; background: #fff; overflow: hidden; } .on-dark .frame { border-color: rgba(255,255,255,.1); background: var(--color-ink-2); } .frame-bar { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-bottom: 1px solid var(--color-rule); background: var(--color-surface); } .on-dark .frame-bar { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); } .frame-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-rule); flex: none; } .on-dark .frame-dot { background: rgba(255,255,255,.16); } .urlbar { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; background: #fff; border: 1px solid var(--color-rule); border-radius: 8px; padding: .35rem .7rem; font-size: .75rem; color: var(--color-muted); } /* Footer links are 18px of text on desktop, which is fine for a mouse; on touch widths they get a real row to hit. */ @media (max-width: 767px) { .home-v2 footer nav li > a { display: flex; align-items: center; min-height: 44px; } } /* Phone rhythm: retain the editorial spacing while removing repeated vertical air from dense proof and participant groups. */ @media (max-width: 479px) { #grounded { padding-block: 48px; } #grounded li + li { padding-top: 1.25rem; } #participants .participant-grid { margin-top: 2.5rem; gap: 1rem; } #participants article { padding: 1.25rem; } #participants article > .mt-6 { margin-top: 1.25rem; } #participants article > .mt-auto { padding-top: 1.25rem; } #trust-model dl { margin-top: 2.5rem; gap: 1rem; } #trust-model dl > .card { padding: 1.25rem; } } .grid-bg { background-image: linear-gradient(var(--color-rule-soft) 1px, transparent 1px), linear-gradient(90deg, var(--color-rule-soft) 1px, transparent 1px); background-size: 48px 48px; } /* On the ink ground the grid is the hero's dashed bead pattern: white dots-and-dashes in 150px cells, drawn as an SVG tile, dissolving to nothing before the bottom of the section. */ .on-dark .grid-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.13' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='1 8'%3E%3Cpath d='M0 .7h150'/%3E%3Cpath d='M.7 0v150'/%3E%3C/g%3E%3C/svg%3E"); background-size: 150px 150px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 88%); mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 88%); } /* ═══ Hero ground - white base, greyish-black dashed grid, black comets ═ The template language inverted to a light page: a dotted-dash grid in low-opacity ink, masked so it dissolves before the section edges, and a fan of soft black streaks in the upper left. Both layers sit behind the content (isolation plus negative z) and are pointer-inert. */ #hero { position: relative; isolation: isolate; background: var(--canvas-neutral); overflow: hidden; } #hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='%230b0d10' stroke-opacity='.085' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='1 8'%3E%3Cpath d='M0 .7h150'/%3E%3Cpath d='M.7 0v150'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%); }