/* PayChain Landing — static marketing pages (index, developers). Production design system: Modern Treasury restraint. White base · hairline borders · editorial type · mono labels · light only. */ :root { /* ink */ --ink: #0f172a; --ink-2: #334155; --muted: #64748b; /* on white: 4.83:1 — AA ok for body */ --faint: #94a3b8; /* large/mono labels only, not body text */ /* accent — interactive + diagram highlights ONLY */ --accent: #2563eb; --accent-ink: #1e40af; /* surfaces */ --bg: #ffffff; --bg-alt: #f8fafc; /* alt-section tone — perceptible but quiet alternation */ --navy: #0f172a; /* band + footer */ --text-on-dark: #e2e8f0; /* hairline system */ --line: #e5e9f0; --line-strong: #cbd5e1; --line-on-dark: rgba(255, 255, 255, 0.12); /* type */ --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* type scale (desktop; tightened on mobile via clamp) */ --fs-display: clamp(2.5rem, 1.2rem + 4vw, 4.25rem); --fs-h2: clamp(1.75rem, 1.1rem + 2vw, 2.625rem); --fs-h3: 1.1875rem; --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fs-mono: 0.8125rem; --lh-body: 1.7; --track-display: -0.035em; --track-h2: -0.025em; /* rhythm */ --sect-y: clamp(5rem, 3rem + 6vw, 8rem); --radius: 10px; color-scheme: light; } /* ========== Base (preserved mechanics) ========== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* offset anchor jumps so the sticky header doesn't cover the target heading */ scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--bg); overflow-x: clip; word-break: keep-all; } /* ----- i18n visibility (preserved verbatim) ----- */ .lang-en { display: none; } .lang-en.i18n-block { display: none; } body.lang-is-en .lang-ko { display: none !important; } body.lang-is-en .lang-en { display: inline; } body.lang-is-en .lang-en.i18n-block { display: block; } /* FOUC guard: an inline script sets html.lang-is-en before first paint for EN visitors (?lang=en / stored pref), so the page paints EN, not KO-then-EN. */ html.lang-is-en .lang-ko { display: none !important; } html.lang-is-en .lang-en { display: inline; } html.lang-is-en .lang-en.i18n-block { display: block; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } section[id] { scroll-margin-top: 6rem; } /* ========== Skip link (접근성) ========== */ .skip-link { position: absolute; top: -100px; left: 1rem; padding: 0.5rem 1rem; background: var(--ink); color: #fff; font-size: 0.875rem; font-weight: 600; text-decoration: none; border-radius: var(--radius); z-index: 100; transition: top 0.2s; } .skip-link:focus { top: 1rem; outline: 2px solid var(--accent); outline-offset: 2px; } /* ========== Shared utilities ========== */ .kicker { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } a { color: var(--accent-ink); } p a, li a { text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color 0.15s, color 0.15s; } p a:hover, li a:hover { border-color: var(--accent-ink); } code { font-family: var(--mono); font-size: 0.85em; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 5px; padding: 0.1em 0.4em; } /* ========== Header: white chrome ========== */ .header { position: sticky; top: 0; z-index: 50; background: rgba(15, 23, 42, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-on-dark); padding: 0.9rem 0; } .header .container { display: flex; align-items: center; justify-content: flex-start; gap: 1.15rem; } .logo { color: #fff; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; margin-right: auto; } .logo:hover { color: var(--blue-light, #3b82f6); } .nav { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem 1.1rem; flex-wrap: wrap; max-width: min(100%, calc(100vw - 5.5rem)); } .nav a { color: #aab9d0; text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.15s; white-space: nowrap; line-height: 1.2; padding: 0.2rem 0; } .nav a:hover { color: #fff; } @media (min-width: 1201px) { .nav { flex-wrap: nowrap; max-width: none; } } /* 햄버거 버튼 (모바일) — mechanics preserved, recolored */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; color: #fff; transition: background 0.2s; } .nav-toggle:hover { background: rgba(255, 255, 255, 0.1); } .nav-toggle__bar { display: block; width: 20px; height: 2px; background: currentColor; margin: 0 auto; transition: transform 0.2s, opacity 0.2s; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* segmented language control — mono pill (on dark chrome) */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-left: 0.5rem; height: 1.95rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.03); } .lang-switch__btn { display: inline-flex; align-items: center; border: 0; background: transparent; color: #aab9d0; padding: 0 0.6rem; height: 100%; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; border-radius: 999px; cursor: pointer; line-height: 1; transition: color 0.15s, background 0.15s; } .lang-switch__btn.is-active { color: #fff; background: var(--accent); } .lang-switch__btn:hover:not(.is-active) { color: #fff; } /* dev page breadcrumb */ .dev-breadcrumb { font-family: var(--mono); font-size: var(--fs-mono); margin: 0 0 1.25rem; } .dev-breadcrumb a { color: var(--muted); text-decoration: none; border-bottom: none; } .dev-breadcrumb a:hover { color: var(--ink); } /* ========== Buttons ========== */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border-radius: 8px; border: 1px solid transparent; font: 600 var(--fs-small) / 1 var(--font); text-decoration: none; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn--primary { background: var(--ink); color: #fff; } .btn--primary:hover { background: var(--accent-ink); color: #fff; } .btn--secondary { border-color: var(--line-strong); color: var(--ink); background: transparent; } .btn--secondary:hover { border-color: var(--ink); color: var(--ink); } /* ========== Section system ========== */ .section { padding: var(--sect-y) 0; } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .section__head { max-width: 56rem; margin-bottom: clamp(2.5rem, 4vw, 4rem); } .section__title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--track-h2); line-height: 1.15; margin: 0 0 1.1rem; color: var(--ink); text-wrap: balance; word-break: keep-all; } .section__intro { font-size: var(--fs-body); color: var(--ink-2); max-width: 65ch; margin: 0; } .section__intro + .section__intro { margin-top: 0.75rem; } .section__intro--note { border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 2rem; font-size: var(--fs-small); color: var(--ink-2); max-width: none; } /* trailing button row under a grid */ .dgrid + p, .grid + p { margin-top: 2.5rem; } /* ========== Hero: navy editorial (brand identity) ========== */ .hero { /* layered depth: soft accent glow (top-right) + counter-glow (bottom-left) over the navy base — no patterns, no texture */ background: radial-gradient(56rem 30rem at 88% -12%, rgba(37, 99, 235, 0.25), transparent 62%), radial-gradient(40rem 24rem at 4% 112%, rgba(37, 99, 235, 0.10), transparent 58%), linear-gradient(160deg, #0f172a 0%, #14233f 55%, #1e3a5f 100%); color: var(--text-on-dark); padding: clamp(5rem, 4rem + 5vw, 9rem) 0 clamp(4rem, 3rem + 4vw, 7rem); } .hero__brand { margin: 0 0 0.5rem; color: #7da7f0; } .hero__eyebrow { margin: 0 0 1.5rem; color: #92a6c4; } .hero__headline { font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.08; margin: 0 0 1.75rem; max-width: 18ch; text-wrap: balance; word-break: keep-all; color: #fff; } .hero__strap { font-size: 1.25rem; line-height: 1.65; color: #c4d2e6; max-width: 60ch; margin: 0 0 2.25rem; } .hero__strap strong { color: #fff; } .hero__br { display: none; } @media (min-width: 640px) { .hero__br { display: inline; } } .hero__cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.25rem; } .hero__meta-links { margin: 0; } .hero__meta-links a { font-family: var(--mono); font-size: var(--fs-mono); color: #92a6c4; text-decoration: none; border-bottom: 1px solid var(--line-on-dark); } .hero__meta-links a:hover { color: #fff; border-color: #fff; } .hero__disclaimer { font-size: var(--fs-small); color: #8da2c0; max-width: 65ch; margin: 1.5rem 0 0; } .hero__disclaimer strong { color: #c4d2e6; } /* ----- hero flow diagram (HTML/CSS, no SVG text) ----- */ .hero-flow { margin-top: 3.5rem; border: 1px solid var(--line-on-dark); border-radius: 14px; padding: 1.75rem 2rem; background: rgba(255, 255, 255, 0.03); } .hero-flow__track { display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap; } .hero-flow__node { flex: 1 1 10rem; display: flex; flex-direction: column; gap: 0.3rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 0.9rem 1.1rem; } .hero-flow__node--core { border-color: rgba(59, 130, 246, 0.55); background: rgba(37, 99, 235, 0.08); box-shadow: 0 0 26px rgba(37, 99, 235, 0.35); } .hero-flow__node-k { font-weight: 600; color: #fff; } .hero-flow__node-s { font-family: var(--mono); font-size: 0.75rem; color: #92a6c4; } /* connector: dash-flow line. The "→" DOM text is preserved (copy gate) but visually replaced by the animated dashed line: font-size 0 hides the glyph without removing the node. aria-hidden parent = no a11y impact. */ .hero-flow__chev { align-self: center; position: relative; font-size: 0; flex: 0 0 2.5rem; height: 1px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.35) 60%, transparent 0); background-size: 8px 1px; background-repeat: repeat-x; } .hero-flow__chev::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid rgba(255, 255, 255, 0.35); border-right: 1px solid rgba(255, 255, 255, 0.35); transform: rotate(45deg); } /* hero CTAs on navy */ .hero .btn--primary { background: #fff; color: var(--ink); } .hero .btn--primary:hover { background: var(--blue-light, #3b82f6); color: #fff; } .hero .btn--secondary { border-color: rgba(255, 255, 255, 0.3); color: #fff; } .hero .btn--secondary:hover { border-color: #fff; color: #fff; } @media (prefers-reduced-motion: no-preference) { .hero-flow__chev { animation: dash-flow 1.2s linear infinite; } @keyframes dash-flow { to { background-position-x: 8px; } } } @media (max-width: 640px) { .hero-flow__chev { flex-basis: 1.25rem; } .hero-flow { padding: 1.25rem 1.25rem; } } /* Light-surface variant of the hero flow — for white sections (e.g. /px402), where the default navy-hero colors render white-on-white. Additive only. */ .hero-flow--light { border-color: #e2e8f0; background: #f8fafc; } .hero-flow--light .hero-flow__node { background: #fff; border-color: #e2e8f0; } .hero-flow--light .hero-flow__node-k { color: #0f172a; } .hero-flow--light .hero-flow__node-s { color: #64748b; } .hero-flow--light .hero-flow__node--core { border-color: rgba(37, 99, 235, 0.45); background: rgba(37, 99, 235, 0.06); box-shadow: 0 0 20px rgba(37, 99, 235, 0.12); } .hero-flow--light .hero-flow__chev { background-image: linear-gradient(90deg, rgba(15, 23, 42, 0.3) 60%, transparent 0); } .hero-flow--light .hero-flow__chev::after { border-top-color: rgba(15, 23, 42, 0.4); border-right-color: rgba(15, 23, 42, 0.4); } /* ========== Ecosystem strip ========== */ .ecosystem { border-block: 1px solid var(--line); padding: 1.1rem 0; background: var(--bg); } .ecosystem__inner { display: flex; align-items: baseline; gap: 1rem 2rem; flex-wrap: wrap; } .ecosystem__label { font-family: var(--mono); font-size: 0.75rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; } .ecosystem__items { display: flex; gap: 0.75rem 1.75rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .ecosystem__item { color: var(--muted); font-size: 0.9rem; text-decoration: none; } .ecosystem__item:hover { color: var(--ink); } .ecosystem__ext { font-size: 0.78em; opacity: 0.7; } /* ========== Divider grid (borderless cells, hairline rules) ========== */ .dgrid { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .dgrid > * { background: var(--bg); padding: 2rem 1.75rem 2.25rem; margin: 0; min-width: 0; } .section--alt .dgrid > * { background: var(--bg-alt); } .dgrid--2 { grid-template-columns: repeat(2, 1fr); } .dgrid--3 { grid-template-columns: repeat(3, 1fr); } .dgrid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 960px) { .dgrid--3, .dgrid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .dgrid--2, .dgrid--3, .dgrid--4 { grid-template-columns: 1fr; } } /* cell internals — existing card child classes, restyled */ .dgrid .card__title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.65rem; letter-spacing: -0.01em; } .dgrid .card__body { font-size: var(--fs-small); color: var(--ink-2); } .dgrid .card__body p { margin: 0 0 0.6rem; } .dgrid .card__body p:last-child { margin-bottom: 0; } .dgrid .card__body strong { color: var(--ink); } .dgrid .card__ic { /* soft accent chip around the bare line icon */ width: 2.25rem; height: 2.25rem; background: rgba(37, 99, 235, 0.07); border-radius: 8px; margin: 0 0 1rem; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .dgrid .card__ic svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; display: block; } /* ========== Numbered step rail ========== */ .steprail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; list-style: none; margin: 0; padding: 0; } .steprail > * { position: relative; padding-top: 2.4rem; } .steprail .stepper__num { position: absolute; top: 0; left: 0; font-family: var(--mono); font-size: var(--fs-mono); color: var(--accent-ink); } .steprail .stepper__num::before { content: "0"; } .steprail > *::after { content: ""; position: absolute; top: 0.55em; left: 2.6rem; right: 0; height: 1px; background: var(--line); } .steprail > *:last-child::after { display: none; } .steprail .stepper__title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.6rem; } .steprail > * > p { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 1rem; } .state-pills { display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); } .state-pills code { border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0.5rem; background: none; font-family: inherit; font-size: inherit; } .state-pills .state-pills__arrow { color: var(--faint); } @media (max-width: 720px) { /* vertical mobile rail */ .steprail { grid-template-columns: 1fr; gap: 0; border-left: 1px solid var(--line); } .steprail > * { padding: 0 0 2.25rem 2.1rem; } .steprail > *:last-child { padding-bottom: 0; } .steprail .stepper__num { position: static; display: block; margin-bottom: 0.5rem; } .steprail > *::after { display: none; } } /* ========== Editorial split ========== */ .split { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: 3rem 5rem; } .split__label { position: sticky; top: 6rem; align-self: start; } /* "하지 않는 일 / What it does not do" — label scrolls with the page, not pinned */ #what-we-dont .split__label { position: static; top: auto; } .split__label .section__head { margin-bottom: 0; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 2rem; } .split__label { position: static; } } /* split right-column rows (#institutional) */ .split__rows > article { padding: 1.75rem 0; border-top: 1px solid var(--line); } .split__rows > article:last-child { border-bottom: 1px solid var(--line); } .split__rows .card__title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.6rem; } .split__rows .card__body { font-size: var(--fs-small); color: var(--ink-2); } .split__rows .card__body p { margin: 0 0 0.75rem; } .split__rows .card__body p:last-child { margin-bottom: 0; } .split__rows .card__ic { /* same soft accent chip as .dgrid .card__ic */ width: 2.25rem; height: 2.25rem; background: rgba(37, 99, 235, 0.07); border-radius: 8px; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0.9rem; } .split__rows .card__ic svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; display: block; } /* ========== Link rows (#docs) ========== */ .linkrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .linkrows li { padding: 1.2rem 0; border-bottom: 1px solid var(--line); margin: 0; } .linkrows li > a { color: var(--ink); text-decoration: none; border-bottom: none; font-size: var(--fs-small); font-weight: 500; } .linkrows li > a:hover { color: var(--accent-ink); } .linkrows li > a::after { content: "↗"; font-family: var(--mono); color: var(--faint); margin-left: 0.5rem; display: inline-block; transition: transform 0.15s, color 0.15s; } .linkrows li:hover > a::after { transform: translate(2px, -2px); color: var(--accent); } /* ========== ✕ list (what-we-dont) ========== */ .dont-list { list-style: none; margin: 0; padding: 0; } .dont-list li { padding: 1.1rem 0 1.1rem 2rem; border-bottom: 1px solid var(--line); position: relative; color: var(--ink-2); } .dont-list li:first-child { border-top: 1px solid var(--line); } .dont-list li::before { content: "✕"; position: absolute; left: 0; top: 1.15rem; font-family: var(--mono); font-size: 0.8rem; color: #b91c1c; } .dont-list li strong { color: var(--ink); } /* ========== Check list ========== */ .check-list { list-style: none; margin: 0; padding: 0; } .check-list li { padding: 0.65rem 0 0.65rem 1.7rem; position: relative; font-size: var(--fs-small); line-height: 1.62; color: var(--ink-2); } .check-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); } .check-list li strong { color: var(--ink); } .check-list li code { font-size: 0.85em; } .section--roadmap .section__title { max-width: 16ch; } .roadmap__kicker { margin: 0 0 1rem; } .roadmap-pmo { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin: 2rem 0 2.5rem; } .roadmap-pmo__card { padding: 1rem 1.25rem; border-right: 1px solid var(--line); } .roadmap-pmo__card:last-child { border-right: 0; } .roadmap-pmo__label, .roadmap-badge, .roadmap-milestone__dates, .article-hub__part { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .roadmap-pmo__label, .roadmap-pmo__value { margin: 0; } .roadmap-pmo__value { color: var(--ink); font-size: var(--fs-small); line-height: 1.45; margin-top: 0.35rem; } .roadmap-pmo__value--risk { color: var(--accent-ink); } .roadmap-filters { display: flex; gap: 0.75rem 1rem; flex-wrap: wrap; align-items: end; border-top: 1px solid var(--line); padding-top: 1.25rem; margin-bottom: 0.5rem; } .roadmap-filters__field { display: grid; gap: 0.35rem; } .roadmap-filters__label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .roadmap-filters__select { min-width: 12rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg); color: var(--ink); font: 500 var(--fs-small) / 1.2 var(--font); padding: 0.75rem 2rem 0.75rem 0.8rem; } .roadmap-milestones { position: relative; margin-top: 2.25rem; padding-left: 2rem; border-left: 1px solid var(--line); } .roadmap-milestone { position: relative; padding: 0 0 2rem; margin: 0; border: 0; } .roadmap-milestone::before { content: ""; position: absolute; left: calc(-2rem - 4px); top: 0.35rem; width: 7px; height: 7px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--accent); } .roadmap-milestone[hidden] { display: none; } .roadmap-milestone__head { display: flex; gap: 0.55rem 0.9rem; flex-wrap: wrap; margin-bottom: 0.45rem; } .roadmap-badge { color: var(--muted); } .roadmap-badge--status, .roadmap-badge--prio { color: var(--accent-ink); } .roadmap-badge--internal, .roadmap-badge--h2 { color: var(--ink-2); } .roadmap-milestone__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; margin: 0 0 0.55rem; color: var(--ink); letter-spacing: -0.01em; } .roadmap-milestone__desc { max-width: 70ch; margin: 0 0 0.75rem; color: var(--ink-2); font-size: var(--fs-small); } .roadmap-milestone__meta { display: flex; gap: 0.45rem 0.9rem; flex-wrap: wrap; align-items: baseline; margin: 0; } .roadmap__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2.25rem 0 0; } .btn--ghost { border-color: var(--line); background: transparent; color: var(--ink-2); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .article-hub__kicker { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .article-hub__list { list-style: none; margin: 2.5rem 0 0; padding: 0; } .article-hub__card { display: flex; flex-direction: column; gap: 0.75rem; } .article-hub__part { color: var(--accent-ink); } .article-hub__title { font-size: var(--fs-h3); line-height: 1.35; margin: 0; letter-spacing: -0.01em; } .article-hub__desc { color: var(--ink-2); font-size: var(--fs-small); margin: 0; } .article-hub__link { margin-top: auto; align-self: flex-start; } .article-hub__note { margin-top: 2rem; } /* ========== Navy band (developer CTA) ========== */ .band { background: var(--navy); color: var(--text-on-dark); border-block: 0; } .band .section__title { color: #fff; } .band .section__intro { color: #b9c6da; } /* Cards inside a navy band keep their white background, so their titles must stay dark — otherwise .band's light text color makes them near-invisible. */ .band .card__title { color: var(--ink); } .band .btn--secondary { border-color: var(--line-on-dark); color: #fff; } .band .btn--secondary:hover { border-color: #fff; color: #fff; } .band .btn--primary { background: #fff; color: var(--ink); } .band .btn--primary:hover { background: var(--text-on-dark); color: var(--ink); } /* cta-panel centering hook (markup keeps the class) */ .cta-panel .section__head { max-width: 46em; margin-left: auto; margin-right: auto; text-align: center; } .cta-panel .container > p { text-align: center; } /* ========== Legacy grid/card alias (developers.html) ========== */ .grid { display: grid; gap: 1.25rem; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } .grid .card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.7rem; background: var(--bg); } .grid .card__title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 0.65rem; } .grid .card__body { font-size: var(--fs-small); color: var(--ink-2); } .grid .card__body p { margin: 0 0 0.6rem; } .grid .card__body p:last-child { margin-bottom: 0; } .grid .card__ic { color: var(--ink); display: inline-block; margin: 0 0 0.9rem; } .grid .card__ic svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.5; display: block; } /* ========== Footer: flattened navy ========== */ .footer { background: var(--navy); border-top: 1px solid var(--line-on-dark); color: var(--text-on-dark); padding: 3.5rem 0 0; } .footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem 3rem; padding-bottom: 2.5rem; } .footer__brand { max-width: 23rem; } .footer__logo { font-size: 1.0625rem; font-weight: 700; color: #fff; margin: 0 0 0.8rem; letter-spacing: -0.01em; } .footer__tagline { color: #93a4bd; font-size: 0.85rem; line-height: 1.65; margin: 0 0 1.2rem; } .footer__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.26rem 0.65rem; border: 1px solid var(--line-on-dark); border-radius: 999px; color: #aab7cc; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; } .footer__chip-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #22c55e; flex: none; } .footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.72rem; } .footer__col-title { color: #8a9ab2; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.35rem; } .footer__col a { color: #7e8ea7; font-size: 0.85rem; line-height: 1.3; text-decoration: none; border-bottom: none; transition: color 0.15s; } .footer__col a:hover { color: #fff; } .footer__ext { color: #7e8ea7; font-size: 0.7rem; } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); } .footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 1.5rem 0; } .footer__copy, .footer__legal { color: #8a9ab2; font-size: 0.78rem; margin: 0; } @media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } } /* ========== Mobile nav (≤1200px) — mechanics preserved, white sheet ========== */ @media (max-width: 1200px) { .header { padding: 0.65rem 0; } .nav-toggle { display: flex; flex-shrink: 0; } .lang-switch { margin-left: auto; margin-right: 0.25rem; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; max-width: none; padding: 0.5rem 0 0.75rem; margin: 0; background: #14233f; border-bottom: 1px solid var(--line-on-dark); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.35s ease, opacity 0.2s ease, visibility 0s linear 0.35s; z-index: 50; } .nav.is-open { max-height: min(88vh, 720px); overflow-y: auto; overflow-x: hidden; opacity: 1; visibility: visible; transition: max-height 0.35s ease, opacity 0.2s ease, visibility 0s; -webkit-overflow-scrolling: touch; } .nav a { color: #b8c4d6; display: block; padding: 0.8rem 1.5rem; min-height: 2.75rem; font-size: 0.9375rem; white-space: normal; line-height: 1.4; word-break: keep-all; } .nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .nav a:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fff; outline: 2px solid var(--blue-light, #3b82f6); outline-offset: -2px; } /* touch targets ≥44px across the collapsed-nav range */ .lang-switch { height: auto; } .lang-switch__btn { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; } .nav-toggle { width: 2.75rem; height: 2.75rem; } } @media (max-width: 768px) { .container { padding-left: 1rem; padding-right: 1rem; } .dgrid > * { padding: 1.5rem 1.25rem 1.75rem; } .roadmap-pmo { grid-template-columns: 1fr 1fr; } .roadmap-pmo__card:nth-child(2n) { border-right: 0; } .roadmap-pmo__card:nth-child(n + 3) { border-top: 1px solid var(--line); } .roadmap-milestones { padding-left: 1.4rem; } .roadmap-milestone::before { left: calc(-1.4rem - 4px); } } @media (max-width: 520px) { .roadmap-pmo { grid-template-columns: 1fr; } .roadmap-pmo__card, .roadmap-pmo__card:nth-child(2n) { border-right: 0; } .roadmap-pmo__card + .roadmap-pmo__card { border-top: 1px solid var(--line); } .roadmap-filters__field, .roadmap-filters__select { width: 100%; } } /* ========== Motion: hover transitions ========== */ @media (prefers-reduced-motion: no-preference) { /* card upgrade: subtle lift + hairline-to-accent ring + faint shadow. The ring is drawn with box-shadow (cells have no own border) and the hovered cell is raised above its siblings so the lift reads cleanly. */ .dgrid > * { transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .dgrid > *:hover { position: relative; z-index: 1; transform: translateY(-2px); background: #fff; box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.30), 0 6px 16px rgba(15, 23, 42, 0.06); } .section--alt .dgrid > *:hover { background: var(--bg-alt); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* ============================================================ developers: in-page TOC (developers.html only) ============================================================ */ .dev-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .dev-toc__label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .dev-toc a { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-strong); } .dev-toc a:hover { color: var(--accent-ink); border-color: var(--accent-ink); } /* ============================================================ developers: quick-sim (sandbox — educational simulation) ============================================================ */ .quick-sim { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 1.75rem 1.75rem 1.5rem; } .quick-sim__title { margin: 0 0 0.65rem; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); } .quick-sim__lead { margin: 0 0 1.25rem; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); max-width: 60ch; } .quick-sim__presets { margin-bottom: 1.25rem; } .quick-sim__presets-label { display: block; margin-bottom: 0.5rem; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .quick-sim__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .quick-sim__chip { padding: 0.45rem 0.85rem; font: 600 var(--fs-small) / 1 var(--font); color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .quick-sim__chip:hover { color: var(--accent-ink); border-color: var(--accent-ink); background: var(--bg); } .quick-sim__grid { display: grid; gap: 1rem; margin-bottom: 1.25rem; } @media (min-width: 640px) { .quick-sim__grid { grid-template-columns: 1fr 1fr 1.2fr; } } .quick-sim__field { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; } .quick-sim__label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .quick-sim__input { width: 100%; padding: 0.6rem 0.75rem; font: 400 var(--fs-small) / 1.4 var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 8px; outline: none; } .quick-sim__input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); } .quick-sim__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .quick-sim__result { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius); background: var(--bg-alt); margin-bottom: 1rem; } .quick-sim__result-route, .quick-sim__result-meta, .quick-sim__result-id { margin: 0 0 0.5rem; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-2); } .quick-sim__result code { word-break: break-all; } .quick-sim__amount-hint { margin: 0.65rem 0 0; } .quick-sim__timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); } .quick-sim__step { padding: 0.35rem 0.55rem; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; border-radius: 6px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.25); color: var(--accent-ink); } .quick-sim__step--final { background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.3); color: #047857; } .quick-sim__step-arrow { color: var(--faint); font-size: 0.7rem; } .quick-sim__disclaimer { margin: 0; font-size: var(--fs-mono); line-height: 1.55; color: var(--muted); } /* ============================================================ developers: Receipt state-machine walkthrough ============================================================ */ .demo-walk { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: 1.75rem 2rem; margin-bottom: 1.25rem; } .demo-walk:last-child { margin-bottom: 0; } .demo-walk__badge { display: inline-block; margin: 0 0 0.75rem; padding: 0.25rem 0.6rem; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px; } .demo-walk__note { margin: 0 0 1.25rem; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); max-width: 60ch; } .demo-walk__label { margin: 0 0 0.75rem; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .state-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.25rem; margin-bottom: 1.5rem; } .state-step { padding: 0.6rem 1rem; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .state-step:hover { color: var(--ink); border-color: var(--ink); } .state-step[aria-pressed="true"] { color: #fff; background: var(--ink); border-color: var(--ink); } .state-arrow { color: var(--faint); font-size: 0.75rem; margin: 0 0.15rem; } .demo-walk__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .demo-walk__hash { font-family: var(--mono); font-size: var(--fs-mono); word-break: break-all; color: var(--accent-ink); margin: 0 0 0.75rem; padding: 0.75rem 1rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px; } .demo-walk__hash-note, .demo-walk__idem-text { margin: 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; } .demo-walk--idem { border-style: dashed; } /* ============================================================ developers: capability matrix ============================================================ */ .dev-matrix { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; border-top: 1px solid var(--line); } @media (min-width: 860px) { .dev-matrix { grid-template-columns: 1fr 1fr; } } .dev-matrix__item { padding: 1.4rem 0 1.5rem; border-bottom: 1px solid var(--line); } .dev-matrix__label { margin: 0 0 0.5rem; font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); } .dev-matrix__text { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--ink-2); max-width: 56ch; } .dev-matrix + p { margin-top: 2.5rem; } /* ============================================================ developers: stack layering flow (v2 → v1.5 kernel → Layer B) ============================================================ */ .dev-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .dev-flow__node { padding: 0.55rem 0.95rem; font: 600 var(--fs-small) / 1.3 var(--font); color: var(--ink-2); background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 8px; } .dev-flow__node--emph { color: var(--accent-ink); border-color: var(--accent-ink); background: rgba(37, 99, 235, 0.06); } .dev-flow__arrow { color: var(--faint); font-size: 0.8rem; } /* ============================================================ index: section map (at-a-glance) + merged subsections ============================================================ */ .section-map { background: var(--bg, #fff); } .section-map .dev-toc { margin-top: 0; padding: 1.1rem 0; border-top: 0; border-bottom: 1px solid var(--line); } .subsection { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); } /* ============================================================ index: page-links strip (top) + right-side page TOC ============================================================ */ .page-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } .page-links__card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: #fff; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .page-links__card:hover { border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); transform: translateY(-2px); } .page-links__title { font-weight: 700; font-size: var(--fs-small); color: var(--ink); } .page-links__card:hover .page-links__title { color: var(--accent-ink); } .page-links__desc { font-size: 0.8rem; line-height: 1.45; color: var(--muted); } @media (max-width: 1024px) { .page-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .page-links { grid-template-columns: 1fr; } } /* ============================================================ quick-sim: scenario → copy-paste API request + sample response ============================================================ */ .quick-sim__code { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 0.9rem; } .quick-sim__codehead { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.7rem 0 0.35rem; font-size: 0.78rem; font-weight: 650; color: var(--muted); } .quick-sim__pre { margin: 0; padding: 0.7rem 0.85rem; background: #0f172a; color: #dbeafe; border-radius: 8px; font-family: var(--mono); font-size: 0.74rem; line-height: 1.55; overflow-x: auto; white-space: pre; } /* neutralize the global code-chip styling inside the dark block */ .quick-sim__pre code { display: block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; white-space: inherit; } .quick-sim__copy { flex: none; padding: 0.22rem 0.65rem; font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--accent-ink); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.25); border-radius: 999px; cursor: pointer; } .quick-sim__copy.is-copied::after { content: " ✓"; } .quick-sim__live { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--muted); } /* ============================================================ waitlist form (index hero) ============================================================ */ .waitlist { margin: 1.6rem 0 0; max-width: 30rem; } .waitlist__lead { margin: 0 0 0.55rem; font-size: 0.86rem; color: var(--muted); } .waitlist__row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .waitlist__input { flex: 1 1 14rem; min-width: 0; padding: 0.62rem 0.9rem; font: inherit; font-size: 0.92rem; color: var(--ink); background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 8px; } .waitlist__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .waitlist__btn { flex: none; } .waitlist__sr, .waitlist__hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .waitlist__msg { margin: 0.6rem 0 0; font-size: 0.84rem; font-weight: 550; } /* the form lives in the dark hero — use light variants for contrast */ .waitlist__msg--ok { color: #6ee7a0; } .waitlist__msg--err { color: #fca5a5; } /* ============================================================ floating mini-dot TOC (right edge, all pages, >=1100px). Collapsed state = bare ticks with a white halo ring so they read on light sections and dark bands alike (no panel background to clash). Hover / keyboard focus slides out frosted label pills. ============================================================ */ .dot-toc { position: fixed; right: 1.1rem; top: 50%; transform: translateY(-50%); z-index: 60; display: none; flex-direction: column; gap: 0.45rem; } .dot-toc__item { display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem; padding: 0.18rem 0; text-decoration: none; outline-offset: 3px; } .dot-toc__tick { flex: none; width: 16px; height: 3px; border-radius: 2px; background: rgba(100, 116, 139, 0.78); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55); transition: width 0.18s ease, background 0.18s ease; } .dot-toc__item:hover .dot-toc__tick { width: 24px; background: rgba(71, 85, 105, 0.95); } .dot-toc__item.is-current .dot-toc__tick { width: 30px; background: var(--accent); } .dot-toc__label { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0; transform: translateX(6px); pointer-events: none; white-space: nowrap; padding: 0.26rem 0.7rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1); font-size: 0.72rem; font-weight: 600; color: var(--ink); transition: opacity 0.16s ease, transform 0.16s ease; } .dot-toc__num { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); } .dot-toc:hover .dot-toc__label, .dot-toc:focus-within .dot-toc__label { opacity: 1; transform: none; pointer-events: auto; } .dot-toc__item.is-current .dot-toc__label { border-color: rgba(37, 99, 235, 0.35); } @media (min-width: 1100px) { .dot-toc { display: flex; } } @media (prefers-reduced-motion: reduce) { .dot-toc__tick, .dot-toc__label { transition: none; } } @media print { .dot-toc { display: none; } } /* ============================================================ index polish pass: numbered section kickers ============================================================ */ .sec-kicker { margin: 0 0 0.9rem; font-family: var(--mono); font-size: var(--fs-mono); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* ============================================================ index polish pass: dark band glow (rhymes with the hero) + accent CTA inside the cta-panel ============================================================ */ .band.cta-panel { background: radial-gradient(48rem 26rem at 85% -16%, rgba(37, 99, 235, 0.22), transparent 62%), var(--navy); } .cta-panel .btn--primary { background: var(--accent); color: #fff; } .cta-panel .btn--primary:hover { background: #3b82f6; color: #fff; } /* ============================================================ index polish pass: footer top seam (faint navy gradient, slightly lighter at the seam — no accent edge) ============================================================ */ .footer { background: linear-gradient(180deg, #16203a 0%, var(--navy) 10rem); } /* lean redesign — proof card + trust zero-row */ .proof{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .proof__code{border:1px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:0 24px 60px -32px rgba(15,23,42,.45)} .proof__code-head{background:var(--navy);color:var(--text-on-dark);font-family:var(--mono);font-size:var(--fs-mono);padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--line-on-dark)} .proof__code-head::before{content:"";width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)} .proof__code pre{margin:0;padding:1.2rem 1.25rem;font-family:var(--mono);font-size:var(--fs-mono);line-height:1.75;background:#fff;color:var(--ink-2);overflow-x:auto} .proof__note{font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);border-top:1px solid var(--line);padding:.85rem 1.25rem;background:var(--bg-alt)} .zero{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.25rem,3vw,2.5rem)} .zero__item h3{font-size:var(--fs-h3);margin:.9rem 0 .35rem;letter-spacing:-.01em} .zero__item p{color:var(--muted);font-size:var(--fs-small);margin:0;line-height:1.6} .zero__ico{width:30px;height:30px;color:var(--accent)} @media(max-width:900px){.zero{grid-template-columns:repeat(2,1fr)}.proof{grid-template-columns:1fr}} /* external-redirect arrow on docs links (nav + CTA) */ .nav__ext { font-size: 0.8em; opacity: 0.6; } /* ============================================================ Shared elevation primitives (Phase 1 — additive, opt-in only). No existing page references these yet → zero visual diff on build. Pages opt in during later phases. Tokens only; matches the /app bar. ============================================================ */ /* Page hero — consistent section lead across pages */ .page-hero { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); } .page-hero--compact { padding: clamp(1.75rem, 1rem + 2vw, 2.75rem) 0 clamp(1rem, 0.75rem + 1vw, 1.75rem); } .page-hero__eyebrow { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.75rem; } .page-hero__title { font-size: var(--fs-display); line-height: 1.05; letter-spacing: var(--track-display); color: var(--ink); margin: 0; font-weight: 600; } .page-hero__lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); line-height: 1.6; color: var(--muted); margin: 1rem 0 0; max-width: 62ch; } .page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .page-hero--dark { background: var(--navy); color: var(--text-on-dark); border-radius: var(--radius); padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 3vw, 3rem); } .page-hero--dark .page-hero__title { color: #fff; } .page-hero--dark .page-hero__eyebrow, .page-hero--dark .page-hero__lead { color: var(--text-on-dark); } /* Spec list — definition rows for static facts (shared analog of app's .netspec, implemented independently) */ .spec-list { display: grid; gap: 0; margin: 0.6rem 0 0; border-top: 1px solid var(--line); } .spec-list__row { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.5rem 1.25rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); align-items: baseline; } .spec-list dt { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.03em; color: var(--muted); margin: 0; } .spec-list dd { margin: 0; color: var(--ink); font-size: var(--fs-small); overflow-wrap: anywhere; } .spec-list dd code { font-family: var(--mono); font-size: 0.9em; } .spec-list__sub { display: inline-block; margin-left: 0.45rem; color: var(--muted); font-size: var(--fs-mono); } @media (max-width: 560px) { .spec-list__row { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.65rem 0; } } /* Summary / status strips — compact metric or status rows */ .summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1rem 0 0; } .summary-strip__item { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--bg); } .summary-strip__label { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .summary-strip__value { display: block; margin-top: 0.3rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .status-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; } .status-pill { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.3rem 0.8rem; font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-2); } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .status-pill--live::before { background: #22c55e; } .status-pill--soon::before { background: var(--accent); } /* Resource list — link rows with title + hint */ .resource-list { display: grid; gap: 0; margin: 0.6rem 0 0; border-top: 1px solid var(--line); } .resource-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .resource-row__title { color: var(--ink); font-weight: 500; } .resource-row__hint { color: var(--muted); font-size: var(--fs-small); } .resource-row:hover .resource-row__title { color: var(--accent); } .resource-row__arrow { color: var(--accent); font-size: 0.85em; } /* Callouts — highlighted notices */ .callout { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.25rem 0; background: var(--bg-alt); color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; } .callout--accent { border-left-color: var(--accent); } .callout--warn { border-left-color: #92400e; } .callout__title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; } /* Prose — long-form reading column */ .prose { max-width: 68ch; color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-body); } .prose--wide { max-width: 80ch; } .prose h2 { font-size: var(--fs-h2); letter-spacing: var(--track-h2); color: var(--ink); margin: 2.25rem 0 0.75rem; } .prose h3 { font-size: var(--fs-h3); color: var(--ink); margin: 1.75rem 0 0.5rem; } .prose p { margin: 0 0 1.1rem; } .prose a { color: var(--accent); } .prose code { font-family: var(--mono); font-size: 0.9em; background: var(--bg-alt); padding: 0.1em 0.35em; border-radius: 4px; } .prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1rem; } .prose li { margin: 0.3rem 0; } /* Table wrap — horizontal scroll guard */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } /* Code panel — dark mono block */ .code-panel { background: var(--navy); color: var(--text-on-dark); border-radius: var(--radius); font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.7; padding: 1.1rem 1.25rem; overflow-x: auto; } .code-panel code { font: inherit; background: none; color: inherit; } /* Fold — shared progressive-disclosure (landing; distinct from app-local .hub-fold) */ .fold { border: 1px solid var(--line); border-radius: var(--radius); margin: 1rem 0; } .fold__summary { cursor: pointer; list-style: none; padding: 0.85rem 1.1rem; font-weight: 600; color: var(--ink); display: flex; justify-content: space-between; align-items: center; } .fold__summary::-webkit-details-marker { display: none; } .fold__summary::after { content: "+"; color: var(--accent); } .fold[open] .fold__summary::after { content: "\2212"; } .fold__body { padding: 0 1.1rem 1.1rem; } .fold__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } /* Opt-in filter/preset chips */ .chip { border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink-2); border-radius: 999px; padding: 0.4rem 0.9rem; font: inherit; font-size: var(--fs-small); cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .chip:hover { border-color: var(--accent); color: var(--ink); } .chip[aria-pressed="true"], .chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Layered stack diagram (home #stack, dark band) — the four-layer architecture rendered as a real vertical stack picture, replacing the former flat strip. */ .stack-diagram { display: flex; flex-direction: column; gap: 6px; margin: 1.5rem 0 2.2rem; } .stack-diagram__layer { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-on-dark); border-radius: 12px; } .stack-diagram__layer--core { border-color: var(--accent); background: rgba(37, 99, 235, 0.14); box-shadow: 0 14px 32px -24px var(--accent); } .stack-diagram__n { flex: 0 0 1.4rem; font-family: var(--mono); font-size: 0.85rem; color: var(--accent); text-align: center; } .stack-diagram__body { display: flex; flex-direction: column; gap: 0.12rem; flex: 1 1 auto; min-width: 0; } .stack-diagram__name { font-weight: 600; color: #fff; font-size: 1rem; letter-spacing: -0.01em; } .stack-diagram__role { color: var(--faint); font-size: 0.82rem; } @media (max-width: 600px) { .stack-diagram__layer { flex-wrap: wrap; } } /* ============================================================ Closed-beta waitlist gate (/) — ADDITIVE, scoped to body.beta-gate. Centers the single waitlist screen and renders the brand as a non-link mark. Does not alter base .header/.footer/.hero/.waitlist used by every other route. (ralplan run 019ef381) ============================================================ */ .logo--static { cursor: default; } .logo--static:hover { color: #fff; } body.beta-gate .hero { display: flex; min-height: calc(100vh - 8rem); align-items: center; padding: clamp(4rem, 8vw, 8rem) 0 clamp(3.5rem, 7vw, 7rem); } body.beta-gate .hero .container { max-width: 46rem; margin-inline: auto; text-align: center; } body.beta-gate .hero__eyebrow { margin-bottom: 1rem; } body.beta-gate .hero__headline { margin-inline: auto; max-width: 16ch; } body.beta-gate .waitlist { max-width: 34rem; margin: 1.75rem auto 0; } body.beta-gate .hero__meta-links { margin-top: 1.25rem; color: var(--faint); font-size: var(--fs-small); } body.beta-gate .waitlist__input, body.beta-gate .waitlist__btn { min-height: 44px; } body.beta-gate .waitlist__input:focus-visible, body.beta-gate .waitlist__btn:focus-visible, body.beta-gate .lang-switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.beta-gate .waitlist__btn:disabled { opacity: 0.68; } @media (max-width: 480px) { body.beta-gate .hero { min-height: 0; padding: 3.5rem 0 4rem; } }