-level content so the shared header/footer lockups keep the brand ramp. */ body.page-tool .grad-text { background-image: var(--tone-text-grad); } body.page-tool header .grad-text, body.page-tool footer .grad-text { background-image: var(--grad); } body.page-tool .eyebrow { color: var(--tone-ink); } body.page-tool .tag { color: var(--tone-ink-strong); background: color-mix(in srgb, var(--product-tone) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-tone) 24%, transparent); } /* The hero field. surface.css paints .phero::before with a fixed indigo/cyan pair; this restates it in the tool's colour and adds a second, offset bloom so the field has a direction instead of sitting flat behind the text. */ body.page-tool .phero::before { background: radial-gradient(680px 380px at 8% -14%, color-mix(in srgb, var(--product-tone) 17%, transparent), transparent 66%), radial-gradient(520px 340px at 92% 4%, color-mix(in srgb, var(--product-tone) 8%, transparent), transparent 68%), linear-gradient(180deg, var(--tone-wash), var(--bg) 54%); } /* Card and cross-link icons, in tone rather than the shared indigo. */ body.page-tool .fcard .ico, body.page-tool .xcard .g { background: color-mix(in srgb, var(--product-tone) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-tone) 22%, transparent); } body.page-tool .fcard .ico svg, body.page-tool .xcard .g svg { stroke: var(--tone-ink-strong); } body.page-tool .fcard:hover { border-color: var(--tone-line); } body.page-tool .xcard:hover { border-color: var(--product-tone); } body.page-tool .faq summary::after { color: var(--tone-ink); } body.page-tool .faq details[open] { border-color: var(--tone-line); } body.page-tool .final { background: radial-gradient(620px 320px at 50% 0%, color-mix(in srgb, var(--product-tone) 15%, transparent), transparent 72%); } /* Dark mode needs its own pass, and NOT because of cascade order — because of specificity. scripts/gen-landing-dark.mjs emits its overrides as `:root[data-theme="dark"] .eyebrow`, which is (0,3,0): a pseudo-class, an attribute selector and a class. `body.page-tool .eyebrow` is only (0,2,1), so it loses in dark no matter how late this sheet loads, and the page would go green in light and back to brand violet in dark. Restated at (0,4,1). Any future tinted rule here that collides with a generated dark override needs the same treatment — check theme.css before assuming load order is enough. */ :root[data-theme="dark"] body.page-tool .eyebrow { color: var(--tone-ink); } :root[data-theme="dark"] body.page-tool .faq details[open] { border-color: var(--tone-line); } :root[data-theme="dark"] body.page-tool .fcard:hover { border-color: var(--tone-line); } :root[data-theme="dark"] body.page-tool .final { background: radial-gradient(620px 320px at 50% 0%, color-mix(in srgb, var(--product-tone) 17%, transparent), transparent 72%), var(--bg); } /* theme.css halves the hero field's opacity in dark, which was tuned for the old flat indigo wash; the tone field is already softer, so it can carry more. */ :root[data-theme="dark"] body.page-tool .phero::before { opacity: .8; } /* ── 2 · Section rhythm ──────────────────────────────────────────────────── Uniform white from hero to footer is what makes a long page feel like a scroll with no landmarks. `.block.tinted` gives a section its own field so the page reads as chapters. Hairlines are tone-mixed, not grey, so the seams belong to the page rather than interrupting it. */ body.page-tool .block.tinted { position: relative; background: linear-gradient(180deg, var(--tone-wash), transparent); border-block: 1px solid color-mix(in srgb, var(--product-tone) 15%, var(--line)); } /* A full-bleed tone rule, for closing a chapter without adding a heading. */ .tone-rule { height: 2px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--product-tone) 22%, var(--product-tone) 78%, transparent); opacity: .5; } /* ── 3 · The spec rail ───────────────────────────────────────────────────── Hard facts, immediately under the hero CTA: what goes in, what comes out, what it costs, where the work happens. A visitor deciding whether to download wants those four answers before any feature copy, and they were previously scattered across the page or missing entirely. */ .hero-spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(38px, 5vw, 58px); border: 1px solid var(--tone-line); border-radius: 15px; background: color-mix(in srgb, var(--product-tone) 4%, var(--bg)); overflow: hidden; } .hero-spec > div { padding: 16px 20px; border-left: 1px solid color-mix(in srgb, var(--product-tone) 15%, var(--line)); } .hero-spec > div:first-child { border-left: 0; } .hero-spec dt { margin: 0 0 5px; color: var(--tone-ink); font-size: 10.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .hero-spec dd { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 650; line-height: 1.4; } .hero-spec dd small { display: block; margin-top: 3px; color: var(--mut); font-size: 11.5px; font-weight: 500; } @media (max-width: 720px) { .hero-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-spec > div:nth-child(odd) { border-left: 0; } .hero-spec > div:nth-child(n + 3) { border-top: 1px solid color-mix(in srgb, var(--product-tone) 15%, var(--line)); } } @media (max-width: 420px) { .hero-spec { grid-template-columns: minmax(0, 1fr); } .hero-spec > div { border-left: 0; } .hero-spec > div + div { border-top: 1px solid color-mix(in srgb, var(--product-tone) 15%, var(--line)); } } /* ── 4 · Hub badge ───────────────────────────────────────────────────────── Every tool page needs to say "this is one app, not one of nine purchases". The 3D mark does that better than a sentence, so it sits in the hero as a small object with the claim beside it. */ .hub-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 26px; padding: 9px 16px 9px 10px; border: 1px solid var(--tone-line); border-radius: 999px; background: color-mix(in srgb, var(--product-tone) 5%, var(--bg)); color: var(--ink2); font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .16s, transform .16s, background-color .16s; } .hub-badge:hover { transform: translateY(-1px); border-color: var(--product-tone); background: color-mix(in srgb, var(--product-tone) 9%, var(--bg)); } .hub-badge b { color: var(--ink); font-weight: 800; } .hub-badge .l3d { flex: none; } /* ── 5 · The capability board ────────────────────────────────────────────── What replaces the twelve-card wall. A rail of capability names on the left drives one detail panel on the right: the same information, but scannable as a list and readable as prose, instead of twelve boxes nobody finishes. Progressive enhancement: with no JS every panel is visible and the rail is a plain list of in-page links, so the content is never gated behind a script. site.js adds the switching. */ .cap-board { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 0; border: 1px solid var(--tone-line); border-radius: 20px; background: var(--bg); overflow: hidden; box-shadow: 0 30px 70px -44px color-mix(in srgb, var(--product-tone) 60%, transparent); } .cap-rail { display: flex; flex-direction: column; padding: 10px; gap: 2px; border-right: 1px solid color-mix(in srgb, var(--product-tone) 14%, var(--line)); background: color-mix(in srgb, var(--product-tone) 5%, var(--bg)); } .cap-rail button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border: 0; border-radius: 11px; background: transparent; color: var(--ink2); font: inherit; font-size: 14px; font-weight: 650; text-align: left; cursor: pointer; transition: background-color .14s, color .14s; } .cap-rail button:hover { background: color-mix(in srgb, var(--product-tone) 10%, transparent); color: var(--ink); } .cap-rail button[aria-selected="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 2px 10px -4px color-mix(in srgb, var(--product-tone) 70%, transparent), inset 0 0 0 1px var(--tone-line); } .cap-rail button .n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--product-tone) 14%, transparent); color: var(--tone-ink-strong); font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; } .cap-rail button[aria-selected="true"] .n { background: var(--product-tone); color: #fff; } .cap-rail button:focus-visible { outline: 2px solid var(--product-tone); outline-offset: 2px; } .cap-panels { padding: clamp(22px, 3vw, 34px); } .cap-panel[hidden] { display: none; } .cap-panel h3 { margin: 0; font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; letter-spacing: -.02em; } .cap-panel > p { margin: 12px 0 0; color: var(--ink2); font-size: 15.5px; line-height: 1.62; } .cap-panel ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; } .cap-panel ul li { position: relative; padding-left: 26px; color: var(--ink2); font-size: 14.5px; line-height: 1.55; } .cap-panel ul li::before { content: ""; position: absolute; left: 4px; top: .48em; width: 9px; height: 9px; border-radius: 3px; background: var(--product-tone); box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--product-tone) 60%, transparent); } .cap-panel ul li b { color: var(--ink); font-weight: 700; } /* Format tokens — .docx, .xlsx, MP4 — set in the panel prose. */ .cap-panel code, .fmt { padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--product-tone) 12%, transparent); color: var(--tone-ink-strong); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; font-weight: 650; } @media (prefers-reduced-motion: no-preference) { .cap-panel:not([hidden]) { animation: cap-in .28s ease both; } } @keyframes cap-in { from { opacity: 0; transform: translateY(6px); } } @media (max-width: 860px) { .cap-board { grid-template-columns: minmax(0, 1fr); } .cap-rail { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--product-tone) 14%, var(--line)); scrollbar-width: thin; } .cap-rail button { width: auto; white-space: nowrap; } } /* No JS: show everything rather than one collapsed panel with no way to open it. */ html.no-js .cap-rail { display: none; } html.no-js .cap-panel[hidden] { display: block; } html.no-js .cap-panel + .cap-panel { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); } /* ── 6 · The specimen strip ──────────────────────────────────────────────── One concrete job, as in→out. Abstract feature claims ("powerful editing") are forgettable; "a 42-page scanned lease → a searchable PDF plus a one-page summary" is the thing a visitor recognises as their own problem. */ .specimen { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2vw, 26px); align-items: stretch; } .specimen-card { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--bg); } .specimen-card.is-out { border-color: var(--tone-line); background: color-mix(in srgb, var(--product-tone) 6%, var(--bg)); box-shadow: 0 24px 56px -38px color-mix(in srgb, var(--product-tone) 70%, transparent); } .specimen-card .k { display: block; margin-bottom: 12px; color: var(--mut); font-size: 10.5px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; } .specimen-card.is-out .k { color: var(--tone-ink); } .specimen-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .specimen-card li { color: var(--ink2); font-size: 14px; line-height: 1.5; } .specimen-card li b { color: var(--ink); } .specimen-arrow { align-self: center; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--product-tone); color: #fff; font-size: 19px; font-weight: 700; box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--product-tone) 90%, transparent); } @media (max-width: 760px) { .specimen { grid-template-columns: minmax(0, 1fr); } .specimen-arrow { transform: rotate(90deg); justify-self: center; } } /* ── 7 · Cross-links, per tool ───────────────────────────────────────────── The "every other Lumen tool" row is the one place on a tool page where all eleven colours should appear at once — it is the hub, so it should look like a spectrum rather than eleven indigo rows. Keyed off href so the markup needs no extra classes, the same trick product-system.css uses for the nav menu. */ .cross .xcard[href="/pdf"] { --product-tone: var(--tone-pdf); } .cross .xcard[href="/documents"] { --product-tone: var(--tone-document); } .cross .xcard[href="/spreadsheets"] { --product-tone: var(--tone-sheets); } .cross .xcard[href="/slides"] { --product-tone: var(--tone-slides); } .cross .xcard[href="/canvas"] { --product-tone: var(--tone-design); } .cross .xcard[href="/notes"] { --product-tone: var(--tone-notes); } .cross .xcard[href="/forms"] { --product-tone: var(--tone-forms); } .cross .xcard[href="/#apps"] { --product-tone: var(--tone-apps); } .cross .xcard[href="/workflows"] { --product-tone: var(--tone-automate); } .cross .xcard[href="/agent"] { --product-tone: var(--tone-agent); } .cross .xcard[href="/ai-engines"] { --product-tone: var(--tone-agent); } body.page-tool .cross .xcard .g { background: color-mix(in srgb, var(--product-tone) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-tone) 22%, transparent); } body.page-tool .cross .xcard .g svg { stroke: color-mix(in srgb, var(--product-tone) 70%, var(--ink)); } :root[data-theme="dark"] body.page-tool .cross .xcard .g svg { stroke: color-mix(in srgb, var(--product-tone) 66%, #fff); } /* The tool this page is about should not be a link back to itself. */ .cross .xcard[aria-current="page"] { border-color: var(--tone-line); background: color-mix(in srgb, var(--product-tone) 8%, var(--bg)); pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════ 9 · DOCUMENTATION ─────────────────────────────────────────────────────────────────────────── /docs already had the content — 26 sections, real format matrices, honest caveats. What it did not have was the apparatus that separates documentation from a long article: no way to tell where you are in it, no way to link a colleague to one paragraph, no visual difference between a tip and a warning you must not ignore, and no way out of a section except scrolling. Everything below is that apparatus. It is deliberately quiet — documentation should look like reference material, not like a landing page. ═══════════════════════════════════════════════════════════════════════════ */ /* ── The masthead: what this document covers, and how current it is ──────── */ .docs-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 6px; padding: 15px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg2); } .docs-meta > div { display: flex; align-items: baseline; gap: 8px; } .docs-meta dt { color: var(--mut); font-size: 10.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .docs-meta dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 650; } /* ── Contents rail: scroll-spy ─────────────────────────────────────────── A 26-section document with no position indicator is a document you lose your place in. site.js marks the section you are reading; the rail scrolls it into view so the highlight is never off-screen in its own sticky box. */ .toc { max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; } .toc ol { counter-reset: s; } .toc a { position: relative; border-left: 2px solid transparent; transition: color .14s, background-color .14s, border-color .14s; } .toc a.is-current { border-left-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); color: var(--ink); font-weight: 750; } .toc a.is-current::before { color: var(--acc-d); } /* ── Heading permalinks ───────────────────────────────────────────────── Support answers questions by linking to the exact paragraph. Hidden until the heading is hovered or the button is focused, so the margin stays clean, but always reachable by keyboard. */ .prose h2, .prose h3 { position: relative; } .anchor { margin-left: 9px; padding: 2px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--mut); font: inherit; font-size: .68em; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity .14s, color .14s, background-color .14s; } .prose h2:hover .anchor, .prose h3:hover .anchor, .anchor:focus-visible { opacity: 1; } .anchor:hover { color: var(--acc-d); background: color-mix(in srgb, var(--acc) 12%, transparent); } .anchor.is-copied { opacity: 1; color: var(--good); } @media (hover: none) { .anchor { opacity: .45; } } /* ── Callout taxonomy ─────────────────────────────────────────────────── One `.note` style was doing the work of four different kinds of aside, so a "handy tip" and "you can lose data here" looked identical. Four now, each with its own colour and glyph, and the glyph is generated content so no markup changes when a callout's kind changes. */ .callout { --co: var(--acc); position: relative; margin: 18px 0 0; padding: 15px 19px 15px 50px; border: 1px solid color-mix(in srgb, var(--co) 26%, var(--line)); border-left: 3px solid var(--co); border-radius: 12px; background: color-mix(in srgb, var(--co) 6%, var(--bg)); } .callout::before { content: "i"; position: absolute; left: 17px; top: 15px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--co); color: #fff; font-size: 12px; font-weight: 850; line-height: 1; } .callout > *:first-child { margin-top: 0; } .callout .co-k { display: block; margin-bottom: 4px; color: color-mix(in srgb, var(--co) 66%, var(--ink)); font-size: 10.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } :root[data-theme="dark"] .callout .co-k { color: color-mix(in srgb, var(--co) 62%, #fff); } .callout.tip { --co: var(--good); } .callout.tip::before { content: "\2713"; } .callout.warn { --co: #e0761a; } .callout.warn::before { content: "!"; } .callout.req { --co: #d63a5c; } .callout.req::before { content: "!"; } .callout.ref { --co: var(--mut); } .callout.ref::before { content: "\00A7"; } /* ── Procedures ───────────────────────────────────────────────────────── An ordered list is not a procedure. A procedure has a visible spine, so you can see at a glance how many steps you are committing to and where you are. */ .steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: st; } .steps > li { position: relative; margin: 0; padding: 0 0 20px 46px; counter-increment: st; } .steps > li::before { content: counter(st); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 13px; font-weight: 850; font-variant-numeric: tabular-nums; } /* The spine, drawn between consecutive markers rather than under the last one. */ .steps > li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: 8px; width: 1px; background: color-mix(in srgb, var(--acc) 30%, var(--line)); } .steps > li > b { display: block; margin-bottom: 3px; color: var(--ink); font-size: 15.5px; font-weight: 700; } .steps > li > p { margin: 0; } /* ── Keys ───────────────────────────────────────────────────────────────── */ kbd, .kbd { display: inline-block; min-width: 20px; padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--bg2); color: var(--ink); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; white-space: nowrap; } .keys { display: inline-flex; align-items: center; gap: 4px; } .keys i { color: var(--mut); font-style: normal; font-size: 11px; } /* ── Tables ───────────────────────────────────────────────────────────── Reference tables get read by scanning down one column, so the first column needs to hold its own and the header needs to survive a long scroll. */ table.tbl th { position: sticky; top: 70px; /* clears the fixed site header */ z-index: 1; } table.tbl tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--acc) 3%, transparent); } table.tbl td:first-child { color: var(--ink); font-weight: 650; } /* ── Collapsible reference blocks ─────────────────────────────────────── The complete feature ledgers are reference, not reading. Collapsed by default they stop burying the prose, and `open` on the first one shows the pattern. */ .prose details.refbox { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); padding: 0 18px; } .prose details.refbox > summary { padding: 13px 0; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; } .prose details.refbox > summary::-webkit-details-marker { display: none; } .prose details.refbox > summary::after { content: "+"; color: var(--mut); font-size: 19px; font-weight: 300; line-height: 1; } .prose details.refbox[open] > summary::after { content: "\2212"; } .prose details.refbox > summary small { color: var(--mut); font-weight: 500; } .prose details.refbox > *:last-child { margin-bottom: 16px; } /* ── Symptom index ────────────────────────────────────────────────────── Fourteen troubleshooting entries in a row is a wall. This is the way in. */ .trouble-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 20px; margin: 18px 0 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg2); } .trouble-index a { padding: 5px 0; color: var(--ink2); font-size: 13.5px; font-weight: 550; text-decoration: none; border-bottom: 1px solid transparent; } .trouble-index a:hover { color: var(--acc-d); border-bottom-color: currentColor; } /* ── Section footer: where to go next ─────────────────────────────────── Built by site.js from the heading order, so it can never disagree with the contents rail. */ .docs-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line); } .docs-jump a { padding: 14px 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); text-decoration: none; transition: border-color .15s, transform .15s; } .docs-jump a:hover { border-color: var(--acc); transform: translateY(-2px); } .docs-jump a span { display: block; margin-bottom: 3px; color: var(--mut); font-size: 10.5px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; } .docs-jump a b { color: var(--ink); font-size: 14.5px; font-weight: 700; } .docs-jump a.is-next { text-align: right; } /* ── 8 · Hero mockups in dark mode ───────────────────────────────────────── The inline hero SVGs paint their own paper — `#fbfcfe`, `#fff`, `#e2e8f3` — which is a white sheet floating on a near-black page. Recolouring 13 pages of hand-drawn SVG is not maintainable, so the frame carries the correction: a slight desaturation plus a dimmed surround reads as a screen in a dark room instead of a light leak. The paper stays white because the app's paper IS white; that is what the product looks like. */ :root[data-theme="dark"] .vis { border-color: color-mix(in srgb, var(--product-tone, var(--acc)) 24%, var(--line)); box-shadow: 0 34px 84px -40px #000, 0 0 0 1px rgba(255, 255, 255, .04); } :root[data-theme="dark"] .vis svg { filter: saturate(.94) brightness(.97); }