/* GENERATED by scripts/build-marketing.mjs - edit marketing/css, never this file. v=m71 */ /* css/base.css */ /* marketing/css/base.css - the Inciteful marketing design system (plan section P2, made real). * * Structure: * 01 fonts 02 tokens 03 reset/base 04 type scale * 05 layout+bands 06 buttons 07 cards 08 graphic devices * 09 nav+announce 10 footer 11 motion 12 accessibility * * Laws this file obeys, so pages do not have to re-litigate them: * - THREE weights, no more. Epilogue is a variable face and could supply nine; the site uses * 400 body / 500 UI-and-label / 600 display-heading-and-strong, and nothing else. The old * five-step spread (100/300/400/500/600) was Alterwave's light-display cut showing through * and read as thin next to a grotesk. * - Display and heading tracking is -0.05em, the brand's -50 (George, 2026-08-16). It eases * off below heading size only (-0.035em at h4, -0.015em on sub-hero, 0 on body): -5% on * 15px copy sets the words solid. * - The brand blue marks CTAs, links, key stats, step numerals and chart annotations, and * ONE clause of the hero line. Never a wash bigger than a chip (the sanctioned exceptions * are the full-bleed CTA band and the primary button fill). * - Two blues, one hue: --accent (#55A8FF) is NON-TEXT ONLY - glows, wires, rules, chart * annotation, the hero's one emphasised clause. It is 2.49:1 on paper, so it fails AA at every * size, including the 3:1 large-text floor: it can never sit behind white text or carry a * label. --accent-ink (#1D6FC7, 5.06:1) is what TEXT and button fills use. * - Flat by default. Shadows exist only on floating layers (dropdown sheets, modals). * - Hovers are tints. No transforms, no scale, no shadow-on-hover, no filter. * - Radius scale is five steps: 10 control / 16 card / 20 frame / 24 inset / 999 chips only. * - Breakpoints are 1180 / 1024 / 768 / 480. Four. Adding one is a deliberate act. * - No emoji or arrow codepoints (e2e enforces): arrows are inline SVG, 1.75px stroke. */ /* ====================================================================== 01 FONTS */ /* ONE FAMILY, SITE-WIDE (George, 2026-08-16: "Font - Epilogue (throughout) - thats our brand * font"). Epilogue is a variable text+display family, so the display line, the body and the * tracked-out labels are all the same file at different weights - two network requests for the * whole site instead of seven, and no mid-word fallback is even possible. * * Self-hosted, latin subset, straight from the OFL release (NOT the Adobe kit: a Typekit kit is * a third-party script + CDN font host, which is the one thing this file has never allowed - * same rule as the vendored chart engine). The latin subset covers U+0000-00FF plus U+2000-206F, * so curly quotes, en/em dash, ellipsis and the pound sign are all present - see §04 for what * that retires. * * This replaced Alterwave (display), Instrument Sans (body), Instrument Serif and IBM Plex Mono. * Their woff2 files are still in public/fonts/ but nothing references them. */ @font-face { font-family: 'Epilogue'; src: url('/fonts/Epilogue-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Epilogue'; src: url('/fonts/Epilogue-Italic-Variable.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } /* ====================================================================== 02 TOKENS * Shared names carry the SAME values as public/styles.css (the product). A screenshot of the * app must not clash with the page that frames it. Marketing-only tokens are additions, * never forks. DERIVED values are hue-matched interpolations of the brand pack's own ramp. */ :root { /* neutrals - light end is green-tinged, dark end blue-tinged (brand pack) */ --paper: #F8F8F8; /* page ground, site-wide. Never pure white */ --panel: #FFFFFF; /* card + panel surfaces, text on ink */ --band-tint: #F2F3F2; /* DERIVED - alternating section bands */ --alabaster: #E6E8E6; --line: #E6E8E6; /* hairlines, dividers, card borders */ --dust: #CED0CE; --line-strong: #CED0CE; /* emphasised borders, input outlines */ /* Was #8C9194 = 3.00:1 on paper. The comment said "AA-large only" and then every actual use of it was 12-13px - eyebrows, captions, microcopy, bylines. Walked down the same hue until the sizes it is REALLY used at pass AA: 4.71:1 on paper, 5.01:1 on panel. */ --steel: #6B7074; --iron: #4A525A; /* secondary text - 7.4:1 on paper */ --muted: #4A525A; --ink: #24272B; /* primary text, dark band ground */ --carbon: #07070A; /* pressed states only. Not a background */ /* the one pigment (George, 2026-08-16: blue 55a8ff, ink 24272b) */ --accent: #55A8FF; --accent-hover: #3C93EE; /* DERIVED - darken in place, never a hue swap */ --accent-press: #2A80D8; /* DERIVED */ /* OPAQUE on purpose (audit A3, 2026-08-30): these used to be 10%/16% alphas of the accent, so any text on them computed a different contrast on every ground - the .vs-pill sat at 4.40:1 over paper. Pre-mixed over paper #F8F8F8; visually identical, arithmetically fixed. */ --accent-soft: #E8F0F9; --accent-soft-strong: #DEEBF9; --accent-tint-border: rgba(85, 168, 255, 0.45); --accent-ring: rgba(85, 168, 255, 0.40); /* The brand blue is a LIGHT blue: white on it is ~2.5:1 and it is ~2.5:1 on paper, so it can carry a headline word, a stat or a rule - anything large or non-textual - but it cannot carry 15px body copy or an inline link and still be readable. --accent-ink is the same hue walked down the ramp until it passes AA on paper (5.1:1); it is what small text and inline links use. Two tokens, one hue, no ambiguity about which to reach for. NOT A BUTTON FILL. This comment used to list "a button fill" as a legitimate --accent use, and that is how axe caught #domGo and nav_start_free on the free report at 2.49:1: a filled button is only "non-textual" if you forget its LABEL. White on --accent fails even the 3:1 large-text threshold, so no amount of enlarging the label rescues it - the fill itself has to come down the ramp. Filled buttons therefore use --accent-ink; --accent stays on glows, wires, rules and display type, which is why the connector fan is untouched by this. */ --accent-ink: #1D6FC7; /* The registered hover step (tokens.json marketingLinkHover). Chip-scale text sits on the accent-soft fill, and #1D6FC7 computes 4.40:1 there - this walks it to 5.9:1 (audit A3). */ --accent-ink-hover: #175BA6; --accent-ink-hover: #175BA6; /* DERIVED - 6.8:1 on white, darker than rest, never a hue swap */ --cerulean: #3E78B2; /* data-viz second series ONLY */ /* on-ink surfaces */ --on-ink-text: #FFFFFF; --on-ink-body: rgba(255, 255, 255, 0.62); --on-ink-line: rgba(255, 255, 255, 0.14); --on-ink-fill: rgba(255, 255, 255, 0.06); /* semantics - inherited from the product, one source of truth */ --good: #52A185; --good-text: #386F5B; --bad: #DE9392; --danger: #B4423F; --warn: #7a5b1e; --warn-amber: #d8a13a; /* radii - five steps, nested elements always step down */ --r-ctl: 10px; --r-card: 16px; --r-frame: 20px; --r-inset: 24px; --r-chip: 999px; /* elevation - floating layers only */ --shadow-pop: 0 8px 24px rgba(36, 39, 43, 0.10); --shadow-modal: 0 24px 64px rgba(7, 7, 10, 0.18); /* motion */ --dur-fast: 160ms; --dur: 240ms; --dur-reveal: 500ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* spacing scale - nothing off-scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; /* containers */ /* THE COLUMN, measured off George's mockup (2026-08-16): the grey rules land at ~16% and ~83% of the page, i.e. a column ~67% of the viewport = 965px on a 1440 artboard. --container is both the content measure AND where body::before draws the rules, so they cannot drift apart. --container-mid is the ONE band the mockup lets break out: the dashboard sits wider than the rules and crosses them. */ --container: 960px; --container-mid: 1100px; --container-narrow: 820px; --measure-hero: 880px; --measure-read: 720px; --gutter: 32px; --nav-h: 64px; /* faces - all four names resolve to Epilogue on purpose. The role tokens stay so pages keep saying what they MEAN (a label is still --mono, a display line is still --display); if a second face is ever licensed it is re-pointed here and nowhere else. --code is the only genuine outlier: tabular code needs real monospace metrics, so it stays a system stack. */ --sans: 'Epilogue', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --display: var(--sans); --serif: var(--sans); --mono: var(--sans); --code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* devices */ --dot-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23CED0CE'/%3E%3C/svg%3E"); /* The spotlight matrix: white dots on an 18px grid, full alpha. The LAYER's opacity sets how strong they read, so one token serves both the always-on base and the lit reveal. */ --dot-spot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='1.6' height='1.6' rx='0.8' fill='%23FFFFFF'/%3E%3C/svg%3E"); --dot-paper-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Crect width='1.7' height='1.7' rx='0.85' fill='%23FFFFFF' fill-opacity='0.08'/%3E%3C/svg%3E"); /* the mark's four-point star counter, lifted from the lockup artwork */ --star-steel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='134 142 141 144'%3E%3Cpath fill='%238C9194' d='M274.3,213.97c-20.15-2.58-37.63-10.96-50.62-25.95-11.27-12.32-17.16-27.41-19.25-44.94-2.92,37.2-31.42,67-70.07,70.83,38.9,3.93,67.49,33.92,70.11,71.49,3.19-38.42,32.02-67.46,69.84-71.43Z'/%3E%3C/svg%3E"); --star-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='134 142 141 144'%3E%3Cpath fill='%2355A8FF' d='M274.3,213.97c-20.15-2.58-37.63-10.96-50.62-25.95-11.27-12.32-17.16-27.41-19.25-44.94-2.92,37.2-31.42,67-70.07,70.83,38.9,3.93,67.49,33.92,70.11,71.49,3.19-38.42,32.02-67.46,69.84-71.43Z'/%3E%3C/svg%3E"); --star-alabaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='134 142 141 144'%3E%3Cpath fill='%23E6E8E6' d='M274.3,213.97c-20.15-2.58-37.63-10.96-50.62-25.95-11.27-12.32-17.16-27.41-19.25-44.94-2.92,37.2-31.42,67-70.07,70.83,38.9,3.93,67.49,33.92,70.11,71.49,3.19-38.42,32.02-67.46,69.84-71.43Z'/%3E%3C/svg%3E"); } /* ====================================================================== 03 RESET / BASE */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.55; font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; } img, video { height: auto; display: block; } h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; } /* Marketing loads Epilogue at 400/500/600 only (DESIGN_SYSTEM.md 5.1), and the UA default for a heading is `bold` = 700 - which the browser then SYNTHESIZES by smearing the 600 face. `strong, b` below was already normalised for exactly this reason; headings never were, so every heading that did not carry a role class rendered at a weight we do not ship. Measured 2026-08-26: /terms and /privacy (h2, 19px), /methodology (h2, 26px), the .sources h2 on all six comparison pages, the sample-report h2 on /features and /features/reports, and the undefined .h1-page on four comparison pages - 12 pages in total. A role class still wins; this only decides what an unclassed heading falls back to, and it falls back to something we actually have. */ h1, h2, h3, h4, h5, h6 { font-weight: 600; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--accent-ink); text-decoration: none; } a:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 3px; } strong, b { font-weight: 600; } table { border-collapse: collapse; width: 100%; } button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } /* ====================================================================== 04 TYPE SCALE * Display tracks IN, mono tracks OUT. That contrast is the point. * The headline accent is Instrument Serif ITALIC at the parent size, in Ink - never cobalt. */ /* Scaled with the column (1280 -> 960): a 72px display line that was comfortable in the old measure now fills 960 edge to edge, and sat two steps above the flagship hero's 54px. */ .display-1 { font-size: 56px; font-weight: 600; letter-spacing: -0.05em; line-height: 0.98; } .display-2 { font-size: 44px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.02; } /* The one display line at the top of a page. Epilogue is a grotesk, not a light display face, so it takes the opposite setting to the Alterwave it replaced: heavy, tightly tracked, tight leading. 600 is the ceiling this file sets and the hero is where it gets spent. */ .display-brand { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -0.05em; line-height: 1.06; text-wrap: balance; } /* The one clause of the hero line that carries the pigment. */ /* --accent-ink, not --accent. This is the Home H1's accent clause - "the answer" - and it is TEXT, so COL-01 applies: #55A8FF measures 2.35:1 on Paper and fails even the 3:1 large-text threshold at every size the clamp produces (54 / 45 / 39 / 32px). docs/UI_MIGRATION_PLAN.md Wave 2 carries this exact correction, approved 2026-08-23: "Move the Home H1 accent clause from #55A8FF to Accessible brand text". Same hue, one step down; #55A8FF keeps every non-text job it has. */ .display-brand em { font-style: normal; color: var(--accent-ink); } .display-serif { font-family: var(--serif); font-size: 56px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; } .h2-section { font-size: 48px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.0; } .h2-compact { font-size: 40px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.08; } .h3-block { font-size: 32px; font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; } .h4 { font-size: 24px; font-weight: 600; letter-spacing: -0.035em; line-height: 1.25; } .sub-hero { font-size: 20px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.45; color: var(--iron); } .body { font-size: 17px; line-height: 1.55; } .body-sm { font-size: 15px; line-height: 1.5; color: var(--iron); } .caption { font-size: 13px; line-height: 1.45; color: var(--iron); } /* No serif-italic accent. It was applied to the tail of headlines as "character" and read as a font change for its own sake; the weight and the scale carry the voice instead. Since Epilogue now sets everything, a "font change" is not even available as a mistake. */ /* Two-tone headline: the second clause recedes. Max one per page. */ .dim { color: var(--steel); } .eyebrow { display: block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-bottom: var(--s4); } .numeral { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); } /* --accent-ink: 48px is large text, but --accent is 2.49:1 on paper and so fails even the 3:1 large-text threshold. Size never rescues this hue; only walking it down the ramp does. */ /* Links inside a caption//paragraph must not rely on colour alone (axe link-in-text-block, serious): the surrounding text is --iron and the link --accent-ink, which differ in hue but not enough in luminance to qualify on their own. Underline is the cheapest honest signal. */ .caption a, .caption.basis a { text-decoration: underline; text-underline-offset: 2px; } /* Links inside running prose are underlined at rest (axe link-in-text-block, serious; gate widened 2026-08-31). Colour alone cannot carry them for colour-blind readers. Buttons, nav chrome and card-level CTAs keep their own treatments. */ p a:not(.btn):not(.btn-text), li a:not(.btn):not(.btn-text), td a:not(.btn):not(.btn-text), .sources a, .page-docs .doc a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; } /* Chrome lists are navigation, not prose - the underline law above must not restyle them. (axe's link-in-text-block only concerns links sitting inside running text.) */ .footer li a, .nav-mobile a.m-item, .nav-sheet a { text-decoration: none; } .footer li a:hover, .nav-mobile a.m-item:hover { text-decoration: underline; text-underline-offset: 3px; } .stat-num { font-size: 48px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; color: var(--accent-ink); } .measure { max-width: var(--measure-read); } .nowrap { white-space: nowrap; } .measure-hero { max-width: var(--measure-hero); } .text-iron { color: var(--iron); } .text-steel { color: var(--steel); } /* ====================================================================== 05 LAYOUT + BANDS * One deliberate width change per scroll: width variation is a hierarchy instrument. */ .wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .wrap-mid { max-width: var(--container-mid); } .wrap-narrow { max-width: var(--container-narrow); } .band { padding: var(--s9) 0; } .band-hero { padding: var(--s10) 0 var(--s9); } .band-tight { padding: var(--s8) 0; } .band-tinted { background: var(--band-tint); } .band-paper { background: var(--paper); } .band-panel { background: var(--panel); } .band-ink { padding: 112px 0; background: var(--ink); color: var(--on-ink-text); } .band-ink.band-tight { padding: var(--s8) 0; } .band-ink .sub-hero, .band-ink .body-sm, .band-ink .caption, .band-ink p { color: var(--on-ink-body); } .band-ink .eyebrow { color: rgba(255, 255, 255, 0.5); } .band-ink a:not(.btn) { color: var(--on-ink-text); text-decoration: underline; text-underline-offset: 3px; } .band-ink hr, .band-ink .rule { border-top-color: var(--on-ink-line); } .band + .band-paper, .band-paper + .band-paper { border-top: 1px solid var(--line); } .sec-head { max-width: var(--measure-hero); margin-bottom: var(--s7); } .sec-head p { margin-top: var(--s4); } .grid { display: grid; gap: var(--s5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* alternating feature row: text and visual swap sides down the page */ .row-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); align-items: center; } .row-split.is-flipped > :first-child { order: 2; } .stack > * + * { margin-top: var(--s4); } .cta-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; } .micro-proof { font-size: 13px; color: var(--steel); margin-top: var(--s3); } /* ====================================================================== 06 BUTTONS * Heights 40 nav / 44 template / 52 hero. Hover = tint, never transform. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-ctl); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn:hover { text-decoration: none; } /* Hierarchy guard: in a CTA row the filled primary sets the minimum width, so a longer secondary label can never make the outline button visually outweigh it. */ .cta-row .btn, .hero-capture ~ .cta-row .btn { min-width: 178px; justify-content: center; } .btn-sm { height: 42px; padding: 0 16px; font-size: 14px; } .btn-lg { height: 48px; padding: 0 22px; font-size: 15px; } /* --accent-ink, not --accent: see the token note. White on --accent is 2.49:1 and the label is normal-size text, so the fill has to come down the ramp. --accent-hover/-press are lighter than --accent-ink (3.2:1 and 4.1:1 on white), so the interaction states walk DOWN from here, not up. */ /* `.btn.primary` is aliased deliberately: the pricing grid uses the OLDER two-class convention, both in renderPricingGrid() (src/routes/pages.js) and in the marker fallback baked into marketing/pages/home.html + pricing.html. Without this the popular plan's CTA renders as a plain button on the two most commercially important pages, and nothing errors to tell you. Aliasing here fixes the injected and fallback paths together; changing the renderer would fix only one. */ /* INK, not blue (George, 2026-08-18: "theres something about these buttons that i hate"). Diagnosis: the saturated blue fill was the one "classic SaaS" tell left - every reference this site is built against runs quiet black pills, with colour on eyebrows, glows and one headline clause. White on --ink is 14.8:1, so the AA question disappears with the colour. */ .btn-primary, .btn.primary { background: var(--ink); border-color: var(--ink); color: #FFFFFF; } .btn-primary:hover, .btn.primary:hover { background: var(--carbon); border-color: var(--carbon); color: #FFFFFF; } .btn-primary:active, .btn.primary:active { background: var(--carbon); border-color: var(--carbon); } /* Same defect, same fix: --accent on a 10%-accent tint is still ~2.5:1 against paper. */ .btn-tinted { background: var(--accent-soft); border-color: var(--accent-tint-border); color: var(--accent-ink-hover); } .btn-tinted:hover { background: var(--accent-soft-strong); color: var(--accent-ink-hover); } .btn-secondary { background: var(--panel); border-color: var(--dust); color: var(--ink); } .btn-secondary:hover { background: var(--band-tint); color: var(--ink); } /* Ink fill. The page's other solid button is the brand blue; this is for the one CTA that has to read as the heavier of two actions without competing with it for the same colour. */ .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink-text); } .btn-ink:hover { background: var(--carbon); border-color: var(--carbon); color: var(--on-ink-text); } .btn-ink:active { background: var(--carbon); border-color: var(--carbon); } .btn-on-ink { background: #FFFFFF; border-color: #FFFFFF; color: var(--ink); } .btn-on-ink:hover { background: var(--band-tint); border-color: var(--band-tint); color: var(--ink); } .btn-on-ink-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; } .btn-on-ink-ghost:hover { background: var(--on-ink-fill); border-color: rgba(255, 255, 255, 0.6); color: #FFFFFF; } .btn-text { display: inline-flex; align-items: center; gap: var(--s2); height: auto; /* 44px tall including padding. The label alone measured 23px - half the minimum target - and the padding is transparent, so nothing about it reads differently. */ padding: 11px 0; border: 0; background: none; /* --accent-ink, not --accent: this is a 15px label, and this file's own rule is "never --accent on 15px copy". At #55A8FF it was 2.35:1. */ color: var(--accent-ink); font-size: 15px; font-weight: 500; } .btn-text:hover { color: var(--accent-press); text-decoration: underline; text-underline-offset: 4px; } .band-ink .btn-text { color: #FFFFFF; } /* the CTA arrow: inline SVG line-arrow, 1.75px stroke. Never an arrow codepoint. */ .arrow { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .btn-block { width: 100%; } /* ====================================================================== 07 CARDS (five species) */ /* 1. panel card - the default */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); } .card-lg { padding: var(--s6); } .card h3 + p, .card .h4 + p { margin-top: var(--s3); } .band-ink .card { background: var(--on-ink-fill); border-color: var(--on-ink-line); color: var(--on-ink-text); } /* 2. (was the "plot" card - a card inside corner registration marks. Deleted 2026-08-16: the marks read as technical-drawing decoration rather than brand, and the class carried nothing else. The --tick-* tokens went with it.) */ /* 3. screenshot card - product UI never floats on naked page background */ /* The product frame. A dashboard surface never sits on the bare page and never floats in an empty outline: it sits INSIDE a generous panel, on photography, with real padding around it and a soft lift under it. That framing is what makes a screenshot read as a product rather than as a div, and it is the one place the flat rule yields - the card is a floating layer here. */ .shot { position: relative; isolation: isolate; background: var(--ink); border-radius: var(--r-inset); padding: var(--s8); overflow: hidden; } /* The photograph. `cover` on a very tall frame crops a 16:9 plate down to a flat patch of sky, so the image is anchored to the TOP and the frame below it carries the gradient - the picture reads as a horizon the card sits on, which is what it is for. A card-height frame shows most of the plate; a full-dashboard frame shows a band of it. Neither shows a stretched smear. */ .shot::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--shot-img, none); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } /* The wash keeps the card readable over any frame of the photograph and pulls the image toward the brand blue rather than leaving it a stock photo sitting behind a UI. */ .shot::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 22, 40, 0.30) 0%, rgba(11, 22, 40, 0.52) 42%, rgba(9, 14, 26, 0.88) 78%, rgba(9, 14, 26, 0.96) 100%), linear-gradient(150deg, rgba(0, 75, 168, 0.26), rgba(0, 75, 168, 0) 60%); } .shot > img, .shot > .shot-inner, .shot > .inc-demo, .shot .inc-demo-host { border-radius: var(--r-card); background: var(--panel); box-shadow: 0 24px 60px rgba(7, 10, 20, 0.30); } .shot > img { display: block; width: 100%; height: auto; } /* Frames, picked per section so the page is not one photograph repeated. */ /* George's own plate (black-dunesbg.png, resized to 1800px and encoded to webp - 29KB, in line with the other frames). It is a WIDE band rather than a tall plate, so this one uses `cover` and centres: the frame trims it horizontally instead of fitting the width and leaving the bottom of a full-width frame unpainted. */ .shot-dunes { --shot-img: url('/img/dunes.webp'); } .shot-dunes::before { background-size: cover; background-position: center; } /* NO WASH TO SPEAK OF. Measured: this plate's mean luminance is 15/255, against 173 for facade, 141 for ridges and 65 for sea - it is roughly four times darker than the darkest photograph the standard wash was tuned for, and that wash (30-96% ink, plus a blue cast) crushed it to a flat black slab. All this one does is seat the card with a whisper of shade at the bottom; the plate already carries white text and a white panel on its own, and it is greyscale, so there is no cast to correct. */ .shot-dunes::after { background: linear-gradient(180deg, rgba(9, 12, 18, 0) 0%, rgba(9, 12, 18, 0.18) 70%, rgba(9, 12, 18, 0.34) 100%); } .shot-ridges { --shot-img: url('/img/ridges.webp'); } .shot-facade { --shot-img: url('/img/facade.webp'); } .shot-sea { --shot-img: url('/img/sea.webp'); } @media (max-width: 768px) { .shot { padding: var(--s5); border-radius: var(--r-frame); } } /* 4. dark inset CTA panel - max twice per page */ .inset-cta { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink-text); border-radius: var(--r-inset); padding: var(--s8) var(--s7); text-align: center; } .inset-cta > * { position: relative; z-index: 1; } .inset-cta::before { content: ''; position: absolute; inset: -13px; background-image: var(--dot-paper-ink); opacity: 0.9; z-index: 0; animation: dot-drift 42s linear infinite; } .inset-cta p { color: var(--on-ink-body); margin: var(--s4) auto 0; max-width: 560px; } .inset-cta .cta-row { justify-content: center; margin-top: var(--s6); } @keyframes dot-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(13px, 13px, 0); } } /* 5. proof card - demo-labelled, or an honest reserved slot. Never lorem, never a fake quote. */ .proof { position: relative; overflow: hidden; background: var(--band-tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s6); } .proof::before { content: ''; position: absolute; right: -40px; bottom: -56px; width: 260px; height: 260px; background: var(--star-alabaster) center / contain no-repeat; opacity: 0.7; pointer-events: none; } .proof > * { position: relative; z-index: 1; } /* The reserved-slot variant. NOT dashed: the dashed 1px hairline is the reference site's single most recognisable non-typographic signature and is banned here for exactly that reason (P2 section 12 tell 4, section 9). The slot is marked in our own grammar instead - a solid --dust hairline, corner registration ticks, and the spec-sheet rule under the mono label that P2 section 8.5 actually specifies ("styled as spec-sheet"). */ .proof-loop { background: var(--band-tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s7); } .proof-loop .eyebrow { display: block; margin-bottom: var(--s4); } .loop-num { font-family: var(--display); font-weight: 600; font-size: 84px; line-height: 1; letter-spacing: -0.05em; /* 84px is display size, but 2.24:1 fails the 3:1 large-text bar too - a statistic is text (COL-01). */ color: var(--accent-ink); display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s4); } .loop-num span { font-family: var(--sans); font-size: 17px; font-weight: 400; color: var(--iron); letter-spacing: 0; } .proof-loop .h4 { margin-bottom: var(--s3); } /* in-demo cards follow product styling. Currently unreferenced by any page source - kept because it is the documented shape for a card drawn INSIDE a demo surface, not dead weight to delete. */ .demo-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: 13px; } /* --- demo mount + its pre-mount skeleton ------------------------------------------------------ * Eleven page sources carry this same block. It used to be ~17 inline style="" attributes each, * with raw hexes (a forked palette by any other name), 4px and 999px radii off the five-step * scale, and 14/18px spacing off the four-step one. It lives here once instead. * * The host wears .shot, because P2 section 8.3 already answers "how does product UI sit on a page": * it never floats on naked page ground. That also removes the frame the mount was hand-rolling. * demo.js attaches a SHADOW ROOT to the host at mount, so everything below .demo-skel is * pre-mount furniture only - it stops rendering the moment the real demo arrives, and the height * it holds is the height the demo mounts into (CLS 0). */ .demo-mount { display: block; min-height: 640px; } .demo-skel { overflow: hidden; } .demo-skel-bar, .demo-skel-tabs { display: flex; align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .demo-skel-bar { gap: var(--s3); } .demo-skel-tabs { gap: var(--s4); } .demo-skel-bar > span, .demo-skel-tabs > span { display: block; height: 20px; border-radius: var(--r-ctl); background: var(--band-tint); } .demo-skel-bar > span:nth-child(1) { width: 150px; background: var(--line); } .demo-skel-bar > span:nth-child(2) { width: 170px; } .demo-skel-bar > span:nth-child(3) { width: 210px; margin-left: auto; } .demo-skel-tabs > span { height: 14px; } .demo-skel-tabs > span:nth-child(1) { width: 64px; background: var(--line); } .demo-skel-tabs > span:nth-child(2) { width: 64px; } .demo-skel-tabs > span:nth-child(3) { width: 96px; } .demo-skel-tabs > span:nth-child(4) { width: 64px; } .demo-skel-tabs > span:nth-child(5) { width: 56px; } .demo-skel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: var(--s4); background: var(--line); border: 1px solid var(--line-strong); border-radius: var(--r-card); overflow: hidden; } .demo-skel-kpis > span { display: block; height: 104px; background: var(--panel); } .demo-skel-plot { margin: 0 var(--s4) var(--s4); height: 300px; border: 1px solid var(--line); border-radius: var(--r-card); } .demo-skel-plot.is-tall { margin: var(--s4); height: 520px; } /* ====================================================================== 08 GRAPHIC DEVICES */ /* dot-grid plot paper - LOCAL device with a job, never site-wide wallpaper */ .dot-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--dot-paper); /* Weighted to the text block, not the geometric centre: the device reads as paper the copy is set on, rather than a stray patch in the middle of a band. */ -webkit-mask: radial-gradient(64% 82% at 30% 34%, #000 0%, transparent 74%); mask: radial-gradient(64% 82% at 30% 34%, #000 0%, transparent 74%); opacity: 0.75; } .has-field { position: relative; overflow: hidden; } .has-field > .wrap { position: relative; z-index: 1; } /* corner registration ticks, standalone (images, tables, section-defining figures) */ /* .reg-ticks (corner registration marks) retired: drafting-table decoration around a card that already has a frame. Kept as a no-op so page sources using the class do not need a sweep. */ .reg-ticks { padding: 0; } /* star-counter bullets - the mark's own negative star, at list scale */ .star-list > li { position: relative; padding-left: 26px; margin-top: var(--s3); } .star-list > li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 13px; height: 13px; background: var(--star-steel) center / contain no-repeat; } .star-list.is-accent > li::before { background-image: var(--star-accent); } /* DEMO DATA chip - present on every surface showing fabricated numbers */ .chip { display: inline-flex; align-items: center; gap: 6px; height: var(--s5); padding: 0 10px; border: 1px solid var(--dust); border-radius: var(--r-chip); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); /* OPAQUE, never transparent (George, 2026-08-19: "these pills without a bg shouldn't overlap the background lines"). A chip is an outlined pill, and the fixed column rules at the container edges painted straight through the hollow ones wherever a chip sat near x=240 or x=1200 - a hairline bisecting a label reads as a rendering fault. The fill matches the band it sits on, so the pill occludes the rule instead of framing it, and the border still does the work it always did. Every band that changes the ground re-declares this below; --paper is the default because that is what a plain .band sits on. */ background: var(--paper); } /* the chip set inline at the head of a caption line - optical centring on a 13px line, not spacing */ .caption > .chip { margin-right: var(--s1); vertical-align: -0.35em; } .band-tinted .chip, .band-paper .chip { background: var(--band-tint); } .band-panel .chip, .card .chip, .panel .chip { background: var(--panel); } .band-ink .chip { border-color: var(--on-ink-line); color: var(--on-ink-body); background: var(--ink); } /* Text takes --accent-ink; the border and tint keep --accent, which is what a non-text graphic token is for. At 10px on white the light blue was 2.49:1 against AA's 4.5. */ .chip-accent { border-color: var(--accent-tint-border); color: var(--accent-ink-hover); background: var(--accent-soft); } /* mono editorial furniture */ .sec-label { display: flex; align-items: baseline; gap: var(--s3); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s5); } /* --accent-ink: this `i` is the section label's numeral/marker at label size, not display type. */ .sec-label i { font-style: normal; color: var(--accent-ink); } .band-ink .sec-label { border-bottom-color: var(--on-ink-line); color: var(--on-ink-body); } .band-ink .sec-label i { color: #FFFFFF; } .steps { counter-reset: step; } .steps > li { position: relative; padding-left: 52px; } .steps > li + li { margin-top: var(--s6); } .steps > li::before { counter-increment: step; content: '[' counter(step, decimal-leading-zero) ']'; position: absolute; left: 0; top: 2px; font-family: var(--mono); font-size: 13px; font-weight: 500; /* 13px is label scale, and --accent is non-text below display size (2.35:1). George moved these to the readable blue 2026-08-30; the LARGE display numerals elsewhere keep the light accent. */ color: var(--accent-ink); } .band-ink .steps > li::before { color: #FFFFFF; } .byline { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--steel); } /* spec-sheet table - hairline rules, mono labels */ .spec { font-size: 15px; } .spec th, .spec td { text-align: left; padding: var(--s4) 0; border-bottom: 1px solid var(--line); vertical-align: top; } .spec th { width: 34%; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); padding-right: var(--s5); } .spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; } .band-ink .spec th, .band-ink .spec td { border-bottom-color: var(--on-ink-line); } /* thin line icons: 1.75px stroke on a 20px grid */ .ic { width: 20px; height: 20px; flex: none; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Deliberately unused. The home engine strip sets engine NAMES at heading scale rather than borrowing their marks - the honest call, and the reason no page reaches for this. */ .logo-grey { filter: grayscale(1); opacity: 0.72; transition: opacity var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } a:hover .logo-grey, .is-active .logo-grey { filter: none; opacity: 1; } /* ---------------------------------------------------------------- column rules * The vertical hairlines that mark the content column, full page height, running behind * everything. This is the Vercel/Profound device George pointed at ("i like the clean/vercel * style lines of profound") and it is drawn in his mockup: two rules at the container edges, * with the horizontal band separators crossing them. * * Fixed, not absolute, so it needs no page-height maths and cannot desync from a lazy image * resizing the document. z-index 0 puts it under every positioned band, which is what makes it * behave correctly for free: a band with a background (--band-tint, --ink, --panel) paints over * the rules, a transparent band lets them through. That is exactly the mockup's behaviour and * no band has to opt in or out. */ body::before { content: ''; position: fixed; top: 0; bottom: 0; left: 50%; width: min(100% - (var(--gutter) * 2), var(--container)); transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); pointer-events: none; z-index: 0; } .band { position: relative; z-index: 1; } /* CONTINUITY (George, 2026-08-18: "after a full width section, the lines don't continue... lets get some continuity"). A painted band occludes the fixed body::before, so on a page that alternates grounds the rules flickered in and out with every band. LIGHT painted bands now draw the rules themselves - above their background, below their content - so the lines run unbroken down the page. DARK bands (band-ink, band-spot) stay exempt: a full-bleed dark plate swallowing the lines is the design, and they resume immediately after it. */ .band-tinted, .band-paper, .band-panel, .band-ink { background-clip: padding-box; } .band-tinted::before, .band-paper::before, .band-panel::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: min(100% - (var(--gutter) * 2), var(--container)); transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); pointer-events: none; z-index: 0; } /* Content must stack above the drawn rules (a positioned pseudo paints over static children). */ .band-tinted > .wrap, .band-paper > .wrap, .band-panel > .wrap { position: relative; z-index: 1; } /* Horizontal separators, matching the mockup: every band boundary is a hairline. */ .band-ruled + .band-ruled { border-top: 1px solid var(--line); } @media (max-width: 768px) { /* Below the container width the rules sit inside the gutter and read as page furniture rather than structure, so they come off. */ body::before { display: none; } } /* ====================================================================== 09 NAV + ANNOUNCE * Flat 64px sticky bar. Dropdown elevation is the page dimming under an open sheet, not a * shadow on the bar itself. The lockup is ONE item - never a mark in a box beside type. */ /* min-height, never a fixed height: the string is ~455px of intrinsic width at 13px, so on a phone the anchor's text wraps to two lines. A locked 40px box with overflow:hidden cut the second line off on every page. It grows instead, and the trailing clause is dropped at 768. */ .announce { /* Above body::before, or the fixed column rules paint OVER the blue bar (George: "the lines should end at the menu and not continue in to the blue banner"). The nav is sticky z40 and already occludes; this brings the banner in line. */ position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: var(--s2) var(--s4); /* --accent-ink, not --accent: white on the light brand blue is 2.49:1, which fails AA and even the 3:1 large-text floor. This bar is 13px. */ background: var(--accent-ink); color: #FFFFFF; font-size: 13px; line-height: 1.35; text-align: center; } .announce a { color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .announce a:hover { text-decoration: underline; text-underline-offset: 3px; color: #FFFFFF; } .nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); background: var(--paper); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: var(--s6); height: var(--nav-h); } .brand { display: inline-flex; align-items: center; color: var(--ink); padding: 4px 0; } .brand:hover { color: var(--ink); text-decoration: none; } .brand svg { display: block; width: 140px; height: auto; } .nav-links { display: flex; align-items: center; gap: var(--s5); margin-left: var(--s2); } .nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color var(--dur-fast) var(--ease); } .nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded='true'] { background: var(--band-tint); color: var(--ink); text-decoration: none; } .nav-trigger .caret { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); } .nav-trigger[aria-expanded='true'] .caret { transform: rotate(180deg); } .nav-cta { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } /* full-width dropdown sheet */ .nav-sheet { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--panel); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-pop); } .nav-sheet[data-open='true'] { display: block; } .nav-sheet .wrap { padding-top: var(--s6); padding-bottom: var(--s6); } .sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)) minmax(0, 380px); justify-content: space-between; gap: var(--s5) var(--s7); } .sheet-grid.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; } .sheet-item { display: block; padding: var(--s3); border-radius: var(--r-ctl); color: var(--ink); } .sheet-item:hover { background: var(--band-tint); text-decoration: none; color: var(--ink); } /* ONLY the two solutions entries are boxed (George, 2026-08-19), each with its icon: a storefront for a single business, client tiles for an agency. */ .sheet-item.is-boxed { display: grid; grid-template-columns: 40px 1fr; gap: var(--s4); align-items: center; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); } .sheet-item.is-boxed:hover { background: var(--band-tint); border-color: var(--line-strong); } .sheet-item.is-boxed .si-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--accent-ink-hover); } .sheet-item.is-boxed .si-ic svg { width: 20px; height: 20px; } .sheet-item b { display: block; font-size: 15px; font-weight: 500; } .sheet-item span { display: block; font-size: 13px; color: var(--iron); margin-top: 2px; } .sheet-feature { background: var(--band-tint); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); } .sheet-feature .h4 { font-size: 20px; margin-top: var(--s3); } .sheet-feature p { margin-top: var(--s2); } .sheet-feature .btn-text { margin-top: var(--s4); } .sheet-foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); } .nav-scrim { position: fixed; inset: var(--nav-h) 0 0; background: rgba(36, 39, 43, 0.28); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); z-index: 30; } body.sheet-open .nav-scrim { opacity: 1; visibility: visible; } /* mobile */ .nav-burger { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: auto; border: 1px solid var(--dust); border-radius: var(--r-ctl); background: var(--panel); cursor: pointer; } .nav-mobile { position: fixed; inset: 0; z-index: 60; display: none; overflow-y: auto; background: var(--paper); padding: var(--s5) 0 var(--s8); } .nav-mobile[data-open='true'] { display: block; } body.menu-open { overflow: hidden; } .nav-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s6); } .nav-mobile-head .brand svg { width: 124px; } .nav-mobile h2 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin: var(--s6) 0 var(--s3); } .nav-mobile a.m-item { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 17px; font-weight: 500; } .nav-mobile a.m-item:hover { text-decoration: none; color: var(--accent); } .nav-mobile .cta-row { margin-top: var(--s7); flex-direction: column; align-items: stretch; } /* ====================================================================== 10 FOOTER */ .footer { background: var(--ink); color: var(--on-ink-body); padding: var(--s9) 0 var(--s7); } .footer a { color: var(--on-ink-body); text-decoration: none; } .footer a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } /* Brand column + four link columns. The brand column is wider because it carries a sentence and the social row; the four link columns share what is left evenly. */ /* The brand block takes its own row rather than a fifth column. Sharing the 960px measure with four link columns left it ~180px wide, which broke the sentence into a four-word ladder and hyphenated "cited-source" across lines; the link columns were equally cramped. Full-width brand, four even columns beneath, is the same information with room to read. */ .footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s6); } .footer-brand { grid-column: 1 / -1; } .footer-brand p { max-width: 46ch; } .footer .brand { color: #FFFFFF; } .footer .brand svg { width: 176px; } .footer-brand p { margin-top: var(--s5); max-width: 320px; font-size: 15px; } .footer-social { display: flex; gap: var(--s3); margin-top: var(--s5); } /* 40px target with the icon inset — a 24px glyph alone is under the 44px touch guidance and was the smallest hit area on the page. */ .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--on-ink-line); border-radius: var(--r-ctl); color: var(--on-ink-body); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .footer-social a:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.34); background: var(--on-ink-fill); text-decoration: none; } .footer-social svg { width: 18px; height: 18px; fill: currentColor; } .footer-col h2 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: var(--s4); } .footer-col a { display: block; padding: 5px 0; font-size: 15px; } .footer-legal { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); justify-content: space-between; /* A rule needs air on BOTH sides or the row reads as stuck to it (George, 2026-08-24: "the text sits against the lines"). 24px under a 64px gap above was lopsided — the eye reads the tighter side. Even at --s6, and the same value is used under the auth footer's rule so the two match. */ margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--on-ink-line); font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); } /* ====================================================================== 11 MOTION * Register A (ambient proof) lives in the demo and the dark panels. Register B (quiet response) * is everything a visitor triggers. Scroll reveal is an ADDED class: without JS the page is * fully visible, because a blank section is worse than an unanimated one. */ .reveal { transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } .js .reveal:not(.is-in) { opacity: 0; transform: translateY(8px); } .js .reveal.is-in { opacity: 1; transform: none; } /* Automation only - set by marketing/js/base.js when navigator.webdriver is true. Kills the fade so axe and the snapshot comparer both read a settled page rather than one mid-arrival. */ .no-motion .reveal { transition: none; } .acc { border-top: 1px solid var(--line); } .acc > details { border-bottom: 1px solid var(--line); } .acc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5) 0; font-size: 17px; font-weight: 500; cursor: pointer; list-style: none; } .acc summary::-webkit-details-marker { display: none; } .acc summary .ic { transition: transform var(--dur) var(--ease); color: var(--steel); } .acc details[open] summary .ic { transform: rotate(180deg); } .acc details > p { padding-bottom: var(--s5); color: var(--iron); max-width: var(--measure-read); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .js .reveal:not(.is-in) { opacity: 1; transform: none; } .inset-cta::before { animation: none; } } /* ====================================================================== 12 ACCESSIBILITY */ /* No border-radius here. It used to set 4px, which is off the five-step scale AND - at the same specificity but later in the cascade than .btn/.nav-link/.sheet-item/.nav-burger - re-cut every control on the site from --r-ctl to 4px the moment it took keyboard focus. Modern engines draw the outline following the element's own radius, so the declaration bought nothing. */ /* The ring is the READABLE blue: #55A8FF computes 2.49:1 on paper, under the 3:1 non-text minimum, and tokens.json names --accent-ink as the marketing focus colour (audit, 2026-08-30). */ :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } .band-ink :focus-visible, .footer :focus-visible, .announce :focus-visible { outline-color: #FFFFFF; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: #FFFFFF; padding: var(--s3) var(--s4); border-radius: var(--r-ctl); } .skip-link:focus { left: var(--s4); top: var(--s4); color: #FFFFFF; } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ====================================================================== BREAKPOINTS * 1180 / 1024 / 768 / 480. Four, total. */ @media (max-width: 1180px) { /* No display-size steps here: display-1 is 56 to 40, display-2 stays 44, section titles stay on their registered sizes. The old 64px display-1 step was a leftover of the 72px era and made the ramp non-monotonic on nine page heroes (audit A5, approved 2026-08-30). */ .sheet-grid { grid-template-columns: repeat(2, minmax(0, 280px)) minmax(0, 320px); gap: var(--s5); } } @media (max-width: 1024px) { :root { --gutter: 24px; } .display-serif { font-size: 48px; } /* Editorial display's registered medium step */ .row-split { gap: var(--s7); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-links, .nav-cta { display: none; } .nav-burger { display: inline-flex; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); } } @media (max-width: 768px) { .display-1 { font-size: 40px; letter-spacing: -0.05em; line-height: 1.0; } .display-2, .h2-section, .display-serif { font-size: 34px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; } /* .display-serif keeps weight 600 at every breakpoint - the registered Editorial display role. The 400 override that used to sit here was a defect the contract itself named. */ .h2-compact { font-size: 30px; } .h3-block { font-size: 26px; } .h4 { font-size: 21px; } .stat-num { font-size: 36px; } .sub-hero { font-size: 17px; } .eyebrow, .sec-label { font-size: 11px; } body { font-size: 16px; } .body { font-size: 16px; } .band { padding: 80px 0; } .band-hero { padding: 80px 0 64px; } .band-ink { padding: 64px 0; } .band-tight { padding: 56px 0; } .grid-2, .grid-3, .grid-4, .row-split { grid-template-columns: minmax(0, 1fr); } .row-split.is-flipped > :first-child { order: 0; } .inset-cta { padding: var(--s7) var(--s5); } .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer { padding: 64px 0 48px; } .proof::before { width: 180px; height: 180px; } /* the bar carries the offer, not the qualifier - the qualifier is on the page it links to */ .announce-tail { display: none; } /* the frame must not eat the product it frames once the viewport is this narrow */ .shot { padding: var(--s4); } } @media (max-width: 480px) { .cta-row .btn { width: 100%; } .card { padding: var(--s4); } .shot { padding: var(--s3); } .card-lg { padding: var(--s5); } .spec th { width: 100%; display: block; border-bottom: 0; padding-bottom: 0; } .spec td { display: block; padding-top: 4px; } } /* ====================================================== 13 PRODUCT SECTION MODULES * The shapes signed off on the 2026-08-17 contact sheet, for showing a REAL dashboard surface * beside a claim. Placement follows the recorded evidence in reference/searchable-marketing- * teardown.md §6.2: every feature and solutions page carries ONE surface, defaulted to the view * that page is about; the compare hub, pricing and about carry none. * * FOUR LAWS, each learned the hard way on the sheet: * 1. minmax(0, 1fr) on any column holding a surface. A bare `fr` floors at min-content, so an * oversized child pushes the COLUMN past the rule and everything downstream is wrong. * 2. A surface may only overflow toward the side that FADES. Overflow into an opaque edge is a * sheer cut, which is the one thing a half-visible screen may never be. * 3. mask-repeat: no-repeat. The default is repeat, which tiles the gradient and makes the * content reappear at full opacity past the rule. * 4. Rounded panels never meet a rule: they clear it, and carry the double edge. */ .msec { padding: var(--s9) 0; } .msec .eyb { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); display: block; margin-bottom: var(--s4); } .msec h2 { font-size: 25px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; margin: 0 0 var(--s4); } .msec p { color: var(--iron); font-size: 15px; line-height: 1.55; margin: 0 0 var(--s5); max-width: 42ch; } /* BREAKOUT (George, 2026-08-18): "i dont mind the boxes being outside the lines, but not the title and sub." Copy lives in .wrap (960, inside the rules); a TABLE or panel that wants the old wrap-mid width carries .breakout and crosses each rule by ~70px - decisively, so the rule runs BEHIND an opaque box rather than grazing a corner. Words never carry this class. THE NEGATIVE MARGIN IS GONE, because that rule never delivered either half of its own promise and both failures were measured on the running site (2026-08-26): 1. It was ONE-SIDED on every consumer. All twelve are , which is shrink-to-fit, so `margin-inline: -70px` moved the left edge and never stretched the right: every breakout table rendered 202->1098 instead of the intended 202->1238. Not a wrap-mid breakout at all - an 896px table shoved 70px off the content axis. 2. There was no opaque box. Table AND first-cell background computed rgba(0,0,0,0) on all twelve, so the column rule at x=240 ran straight THROUGH the first column's words - "Claude" on /pricing, "Built around" on four comparison pages, "25 August 2026" on /methodology. marketing/css/pages/features.css:86 records George hitting exactly this in August ("the hairline ran straight through the first letters of 'Prompt volume'...") and fixing it on that ONE page with an opaque panel; the other nine were never done. An opaque ground cannot be added here as one rule: /features/share-of-voice's breakout sits on the Ink band (rgb(36,39,43)) while the other eleven sit on Paper, so a single background would be wrong on one of them. Holding the table on the content axis instead costs nothing - the rendered width does not change (896 stays 896), it just stops being 70px off-axis - and it satisfies the spine law directly: 32px of gutter between the words and the rule, which is what "no text ever sits flush against a rule" asks for. Kept as a class rather than stripped from twelve page sources so the CSS stays the one owner of where a breakout sits. If a future consumer really is an opaque box, give it a ground and its own symmetric width here - do not reinstate a bare negative margin. */ .wrap .breakout { margin-inline: 0; } /* --- shape A: quiet copy column, surface dissolving into the rule ------------------------- */ .msec-split .wrap { padding: 0; } .msec-split .msec-in { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 520px; align-items: center; } .msec-split .msec-copy { padding: 0 var(--s6) 0 var(--s6); border-right: 1px dashed var(--dust); } /* overflow: hidden is LOAD-BEARING, not tidiness. `.msec-split .surface` is deliberately 780px in a ~600px track so the product runs off toward the rule and dissolves - but a mask only changes what is PAINTED, never what is laid out, so the invisible 180px still counted toward the document width. Measured 2026-08-26: /features/ai-visibility, /features/content, /solutions/agencies and the Searchable + Profound comparisons all scrolled sideways at 1180 (doc 1282px) and 1024 (doc 1204px) - five pages, ten FAILs in scripts/ui-audit.mjs, none of them visible at 1440 because a 1440 viewport happens to be wide enough to swallow the overhang. Shape B below already had it: `.msec-frame .frame { overflow: hidden }`, which is why the framed variant never appeared in the audit. This is the same technique DESIGN_DIRECTION.md prescribes - "overflow: hidden on a box whose edge IS the rule, and the child wider than that box. Clipping at the viewport instead paints over the line, which is the failure." No visual change: mask-size is 100% 100% with no repeat, so everything past the stage's own box was already fully transparent. This clips a region nobody could see. */ .msec-split .msec-stage { position: relative; padding: var(--s6) 0 var(--s6) var(--s6); overflow: hidden; -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-image: linear-gradient(to right, #000 68%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; mask-image: linear-gradient(to right, #000 68%, transparent 100%); } .msec-split .surface { width: 780px; max-width: none; } /* mirrored: the surface leads. Columns AND the fade both flip, and the surface anchors right so its overflow still runs into the gradient rather than into the opaque edge. */ .msec-split.is-mirrored .msec-in { grid-template-columns: minmax(0, 1fr) 360px; } .msec-split.is-mirrored .msec-copy { border-right: 0; border-left: 1px dashed var(--dust); } .msec-split.is-mirrored .msec-stage { display: flex; justify-content: flex-end; padding: var(--s6) var(--s6) var(--s6) 0; overflow: hidden; /* same reason as the unmirrored stage above - the fade is paint, not layout */ -webkit-mask-image: linear-gradient(to left, #000 68%, transparent 100%); mask-image: linear-gradient(to left, #000 68%, transparent 100%); } /* --- shape B: framed module, surface cropped by the frame --------------------------------- */ .msec-frame .wrap { padding: 0 40px; } /* 40, not 32: the frame is rounded AND double-edged */ .msec-frame .frame { border: 1px solid var(--line); border-radius: var(--r-frame); background: var(--panel); outline: 1px solid var(--line); outline-offset: 7px; display: grid; grid-template-columns: 1.05fr minmax(0, 1fr); min-height: 420px; overflow: hidden; } .msec-frame .msec-copy { padding: var(--s6); display: flex; flex-direction: column; justify-content: center; } .msec-frame .msec-stage { background: var(--band-tint); padding: var(--s5) 0 0 var(--s5); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); mask-repeat: no-repeat; mask-size: 100% 100%; mask-image: linear-gradient(to right, #000 62%, transparent 100%); } .msec-frame .surface { width: 820px; max-width: none; } /* 1024, not 1023. This was the only query in the marketing bundle off the registered breakpoint set (1180 / 1024 / 768 / 480 - DESIGN_SYSTEM.md 10.1, and docs/UI_MIGRATION_PLAN.md Wave 2 lists the correction). One pixel mattered here: at exactly 1024 the split stayed two-column, so a 780px surface sat in a ~600px track and the page overflowed by 180px - the worst of the five sideways scrolls, and the reason 1024 read worse than 1180 in the audit. */ @media (max-width: 1024px) { .msec-split .msec-in, .msec-split.is-mirrored .msec-in, .msec-frame .frame { grid-template-columns: 1fr; } .msec-split .msec-copy { border-right: 0; border-bottom: 1px dashed var(--dust); padding: 0 var(--s5) var(--s5); } .msec-split.is-mirrored .msec-copy { border-left: 0; } .msec-split .msec-stage, .msec-split.is-mirrored .msec-stage { padding: var(--s5) 0; display: block; } .msec .surface { width: 100%; } } /* ---------------- dark-band spotlight (George, 2026-08-18: every dark full-width section) ----- The homepage's .band-spot treatment, promoted to the system. Two dot-matrix layers over the dark ground: .spot-base is always there; .spot-lit is the same matrix brighter, masked to a circle that follows the pointer (base.js writes --sx/--sy). On touch devices there is no pointer, so the lit layer breathes on a slow loop instead - visible without hover, sitting at z-index 0 UNDER the copy so it never encumbers it. */ .band-ink { position: relative; overflow: hidden; } .band-ink .spot-base, .band-ink .spot-lit { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1px); background-size: 22px 22px; } .band-ink .spot-base { opacity: .35; } .band-ink .spot-lit { opacity: 0; background-image: radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px); -webkit-mask-image: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 40%), #000 0%, transparent 70%); mask-image: radial-gradient(220px circle at var(--sx, 50%) var(--sy, 40%), #000 0%, transparent 70%); transition: opacity 260ms var(--ease); } .band-ink.is-lit .spot-lit { opacity: 1; } .band-ink > .wrap { position: relative; z-index: 1; } @media (hover: none) { .band-ink .spot-lit { opacity: .8; animation: spot-drift 14s ease-in-out infinite alternate; } @keyframes spot-drift { from { -webkit-mask-position: 20% 30%; mask-position: 20% 30%; } to { -webkit-mask-position: 80% 70%; mask-position: 80% 70%; } } } @media (prefers-reduced-motion: reduce) { .band-ink .spot-lit { animation: none; } } /* ================================================== 14 PLAN CARDS (the pricing grid) * Redesigned to the structure George picked from the docx (image18: header zone, dashed divider, * tick list, full-width button) in OUR palette. The DOM comes from renderPricingGrid() and its * baked fallbacks - .pcard > .ptag? .pn .pp .pb ul li* .btn - and is NOT restyled per page: * page css keeps only the grid. The popular card is the one INK card in the row. */ .pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: stretch; } .pcard { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-frame); padding: var(--s6); } .pcard .pn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); } .pcard .pp { margin-top: var(--s3); font-size: 42px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .pcard .pp small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--steel); } .pcard .pb { margin-top: var(--s3); font-size: 15px; line-height: 1.55; color: var(--iron); } .pcard ul { list-style: none; margin: var(--s5) 0 var(--s6); padding: var(--s5) 0 0; border-top: 1px dashed var(--dust); display: grid; gap: var(--s3); } .pcard li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; } .pcard li::before { content: ''; position: absolute; left: 0; top: 0.18em; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); } .pcard li::after { content: ''; position: absolute; left: 5px; top: calc(0.18em + 5px); width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.8px 1.8px; transform: rotate(-45deg); } .pcard .btn { width: 100%; margin-top: auto; justify-content: center; background: var(--panel); border-color: var(--line-strong); color: var(--ink); } .pcard .btn:hover { background: var(--band-tint); color: var(--ink); } .pcard .btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; } .pcard .btn.primary:hover { background: var(--carbon); border-color: var(--carbon); color: #fff; } /* the one ink card */ .pcard.pop { background: var(--ink); border-color: var(--ink); color: #fff; } .pcard.pop .pn { color: rgba(255,255,255,0.6); } .pcard.pop .pp { color: #fff; } .pcard.pop .pp small, .pcard.pop .pb, .pcard.pop li { color: var(--on-ink-body); } .pcard.pop li { color: rgba(255,255,255,0.78); } .pcard.pop ul { border-top-color: rgba(255,255,255,0.28); } .pcard.pop li::before { background: #fff; } .pcard.pop li::after { border-color: var(--ink); } .pcard.pop .btn.primary, .pcard.pop .btn { background: #fff; border-color: #fff; color: var(--ink); } .pcard.pop .btn.primary:hover, .pcard.pop .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); } .pcard .ptag { position: absolute; top: var(--s5); right: var(--s5); display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-chip); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.3); } /* THE THREE FEATURE LISTS START ON ONE LINE. The cards already share a top, a height, a price baseline and a CTA baseline - but the blurb between them is copy, and copy is not the same length three times: Solo and Pro run to four lines, Agency to two, so Agency's dashed divider and its whole checklist sat 47px above the other two (measured on /pricing and / at 1440, 2026-08-26). Three lists that do not start on the same line are three lists a buyer cannot scan across, which is the entire job of a plan row (DESIGN_SYSTEM.md LAY-02: siblings share the declared axis). Reserved in em rather than px so it tracks the type scale, and only while the cards are actually side by side - stacked on one column there is nothing to align to and the space would be dead. */ @media (min-width: 1025px) { .pcard .pb { min-height: calc(1.55em * 4); } } @media (max-width: 1024px) { .pricing { grid-template-columns: 1fr; } } /* Linked cards (the four-ways grid). Without these the base anchor rules win and the whole card renders as one blue underlined link - which is exactly how it shipped for a day, because the first attempt to append this block was chained after `grep | head` (exit 0) and never ran. */ a.card-link, a.card-link:hover { color: inherit; text-decoration: none; } a.card-link h3, a.card-link p, a.card-link .eyebrow { color: inherit; text-decoration: none; } a.card-link:hover { background: var(--band-tint); } /* Comparison sources + disclosure (audit 2026-08-25, Phase 9). A vendor-published comparison is only as trustworthy as its working, so the block is deliberately plain and legible rather than styled to be skipped. EVERY var() HERE USED TO BE UNDEFINED. This block landed on 2026-08-25 - two days after the UI Constitution was adopted - written against a token vocabulary this stylesheet has never had: --space-7/5/4, --rule, --surface-2, --surface and --ink-3. Six names, none of them declared in base.css, so all six fell through to their hardcoded fallbacks and painted the newest block on the site from a DIFFERENT palette: #f7f9fc where Paper is #F8F8F8, #d6dce6 where Line is #E6E8E6, and an 18px inset that is not on the spacing scale at all. test/css-tokens.test.js passed the whole time, because a var() WITH a fallback always resolves. Real names below; the values move by a few units where the old fallback was off-scale, which is the point of having a scale. */ .sources { margin: var(--s7) 0 0; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--band-tint); max-width: var(--measure-read); } .sources h2 { font-size: 17px; margin: 0 0 10px; } .src-disclosure { font-size: 14px; line-height: 1.6; margin: 0 0 10px; } .src-caveat { font-size: 14px; line-height: 1.6; margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: var(--r-ctl); } .src-list { margin: 0 0 10px; padding-left: 1.1em; font-size: 14px; line-height: 1.7; } .src-list li { margin: 0 0 6px; } .src-note { display: block; color: var(--muted); font-size: 13px; } .sources .unverified { color: var(--muted); font-style: italic; } .src-meta { font-size: 13px; color: var(--muted); margin: 0; } @media (max-width: 480px) { .sources { padding: var(--s4); } } /* css/theme-dark.css */ /* marketing/css/theme-dark.css - the DARK marketing theme (George, 2026-09-06: "the rest of the * marketing pages should also be dark theme", docs/DESIGN_SYSTEM.md 1.2 A4). Loaded by * scripts/build-marketing.mjs after base.css and before marketing/css/pages/*.css, so a page sheet can * override it at equal specificity. Keyed on body.theme-dark, which the build adds to every page whose * bodyClass ends in -dark; light pages never match a rule in here. * * Contents: the token mirror (profiles.marketing.dark in ui-contract/tokens.json, checked by * test/dark-tokens-gate.test.js), the type roles, the buttons, the free-report button, the field, * the engine marks, the shared chrome (announce, nav, sheets, mobile menu, footer, CTA band) and the * Product sheet's dark composition with its two mini modules (docs/UI_PATTERN_CATALOG.md 2.16, * mega-menu). Values are the recipes'; no hue enters that is not a token or an alpha of one. */ /* ====================================================================== A0 ground and tokens */ /* The column IS the rules: base.css draws body::before at --container and .wrap follows it, and scripts/ui-audit.mjs reads the width off the ROOT to place the rules it checks text against - so the dark page's 1120 is declared on the root when the dark body is present, one value for all three. */ :root:has(.theme-dark) { --container: 1120px; --container-mid: 1320px; } .theme-dark, .nav-new { --dk-ground: #0A0B0D; --dk-panel: #111317; --dk-glass: rgba(18, 20, 24, 0.42); --dk-text: #F2F3F4; --dk-grey: #A3A8AE; --dk-muted: #7B8189; --dk-blue: #55A8FF; --dk-good: #46B97F; --dk-good-text: #7FCBB0; --dk-warn: #E0B040; --dk-line: rgba(255, 255, 255, 0.10); --dk-line-soft: rgba(255, 255, 255, 0.06); --dk-line-strong: rgba(255, 255, 255, 0.18); --dk-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dk-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9); --dk-sheet-glass: rgba(12, 13, 16, 0.86); --dk-sky-top: #5A5F65; --dk-sky-mid: #3A3E43; --dk-sky-low: #1C1F23; --dk-danger: #F0A9A8; } .theme-dark { background: var(--dk-ground); color: var(--dk-text); font-size: 15px; line-height: 1.6; overflow-x: hidden; } .theme-dark::before { border-left-color: var(--dk-line-soft); border-right-color: var(--dk-line-soft); } .theme-dark h1, .theme-dark h2, .theme-dark h3 { color: var(--dk-text); text-wrap: balance; } .theme-dark a { color: inherit; } .theme-dark a:hover { color: inherit; } .theme-dark :focus-visible { outline: 2px solid var(--dk-blue); outline-offset: 3px; } .theme-dark .skip-link { background: var(--dk-text); color: var(--dk-ground); border-radius: 0; } /* type roles (tokens.json dark.type) */ .dh-h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: #FFFFFF; margin: 0; } .dh-t1 { font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; margin: 0; } .dh-t2 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; margin: 0; } .dh-lead { font-size: 16px; line-height: 1.6; color: var(--dk-grey); margin: 0; } .dh-body { font-size: 14.5px; line-height: 1.6; color: var(--dk-grey); margin: 0; } .dh-label { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--dk-muted); margin: 0; } .dh-label.on { color: var(--dk-text); } .dh-centre { text-align: center; } .dh-max24 { max-width: 24ch; margin-left: auto; margin-right: auto; } .dh-max22 { max-width: 22ch; margin-left: auto; margin-right: auto; } .dh-lead-mid { max-width: 60ch; margin: 16px auto 0; } .dh-cmd { font: 500 0.9em/1 var(--sans); color: var(--dk-text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--dk-line-soft); padding: 2px 7px; white-space: nowrap; } /* buttons: square (A3), 40 tall, the ghost and the white */ .dh-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 2px; font: 500 14px/1 var(--sans); white-space: nowrap; cursor: pointer; overflow: hidden; text-decoration: none; transition: transform 350ms var(--dk-ease), box-shadow 350ms, background-color 300ms, border-color 300ms; } .dh-btn:hover { transform: translateY(-1px); text-decoration: none; } .dh-btn:active { transform: translateY(0) scale(0.985); transition-duration: 120ms; } .dh-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg) translateX(-140%); transition: transform 700ms var(--dk-ease); pointer-events: none; } .dh-btn:hover::after { transform: skewX(-18deg) translateX(420%); } .dh-btn .arrow { transition: transform 300ms var(--dk-ease); } .dh-btn:hover .arrow { transform: translateX(3px); } .dh-btn-white, .theme-dark .btn-white { background: #FFFFFF; border-color: #FFFFFF; color: var(--dk-ground); } .dh-btn-white:hover, .theme-dark .btn-white:hover { box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.45); color: var(--dk-ground); } .dh-btn-ghost, .theme-dark .btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--dk-line-strong); color: var(--dk-text); backdrop-filter: blur(8px); } .dh-btn-ghost:hover, .theme-dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.38); color: var(--dk-text); } .dh-btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent); } /* the free-report button: a 1px ring carrying a white highlight round the edge; blue glow on hover */ @property --dh-hbg-a { syntax: ''; inherits: false; initial-value: 0deg; } .dh-hbg { padding: 0; border: 0; background: transparent; overflow: visible; isolation: isolate; color: #FFFFFF; } .dh-hbg::after { display: none; } .dh-hbg-ring { position: absolute; inset: 0; border-radius: inherit; background: conic-gradient(from var(--dh-hbg-a, 0deg), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 290deg, rgba(255, 255, 255, 0.95) 338deg, rgba(255, 255, 255, 0) 360deg); animation: dh-hbg-spin 2.6s linear infinite; transition: opacity 500ms; } @keyframes dh-hbg-spin { to { --dh-hbg-a: 360deg; } } .dh-hbg-glow { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(75% 181% at 50% 50%, #55A8FF 0%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity 500ms; } .dh-hbg-fill { position: absolute; inset: 1px; border-radius: inherit; background: var(--dk-ground); transition: background-color 500ms; } .dh-hbg-content { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; height: 38px; } .dh-hbg:hover .dh-hbg-glow { opacity: 1; } .dh-hbg:hover .dh-hbg-ring { opacity: 0; } .dh-hbg:hover .dh-hbg-fill { background: var(--dk-panel); } .dh-hbg:hover { box-shadow: 0 10px 30px -12px rgba(85, 168, 255, 0.45); } /* the field (hero, report, CTA) */ .dh-field { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; margin: 10px 0 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 2px; backdrop-filter: blur(12px); transition: border-color 300ms, background-color 300ms; } .dh-field:focus-within { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.09); } .dh-input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px var(--sans); color: #FFFFFF; padding: 8px 0; outline: none; } .dh-input::placeholder { color: rgba(255, 255, 255, 0.5); } .dh-field .dh-btn { height: 40px; } .dh-proof { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; } .dh-proof b, .theme-dark .hero-stat b { color: #FFFFFF; font-weight: 500; } .dh-proof a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .dh-proof-tight { margin-top: 14px; } .dh-proof .sep { margin: 0 10px; color: rgba(255, 255, 255, 0.3); } /* the proof line's fallback shows only when the counted sentence is gone (dropped by the server, or hidden by home-dark.js) */ .hero-stat:not([hidden]) + .dh-proof-fallback { display: none; } /* a ghost button inside a

is a button, not prose (base.css underlines p a) */ body.theme-dark p a.dh-btn, body.theme-dark p a.dh-btn:hover { text-decoration: none; } /* a centred section title carries the mockup's 40px before its module */ .dh-sec-body > .dh-t1.dh-max24 { margin-bottom: 40px; } .theme-dark .hero-stat { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; } /* engine marks: 16px, the OpenAI mark inverted onto the dark ground */ .theme-dark .mk { display: inline-flex; align-items: center; gap: 6px; font-style: normal; white-space: nowrap; vertical-align: -4px; color: var(--dk-text); } .theme-dark .mk + .mk { margin-left: 4px; } .theme-dark .mk-lg { width: 16px; height: 16px; flex: none; display: block; color: var(--dk-text); } .theme-dark .mk-lg:has(use[href="#lg-openai"]), .theme-dark .ew-lg:has(use[href="#lg-openai"]), .theme-dark .dh-cv-lg:has(use[href="#lg-openai"]), .theme-dark .dh-ve-lg:has(use[href="#lg-openai"]), .theme-dark .dh-pf-eng svg:has(use[href="#lg-openai"]), .theme-dark .dh-ev-eng svg:has(use[href="#lg-openai"]), .theme-dark .dh-pq-pill svg:has(use[href="#lg-openai"]) { filter: brightness(0) invert(1); } .theme-dark .dh-pq-pill svg:has(use[href="#lg-openai"]) { filter: none; } .theme-dark .mk-li { display: flex; flex-wrap: wrap; gap: 6px 14px; } /* ====================================================================== B1 shared chrome, dark THE MOCKUP'S NAV, rule for rule (public/_preview/smoke-mockup.html lines 69-176); the markup is marketing/partials/nav-dark.html. The bar stays sticky (the mockup's is fixed; the hero pulls up under it either way), the links underline on hover, the triggers carry no box, the sheets are glass. */ .nav-new .nav { position: sticky; top: 0; z-index: 40; height: auto; background: transparent; border-bottom: 1px solid transparent; transition: background-color 300ms, border-color 300ms, backdrop-filter 300ms; } .nav-new .nav.is-scrolled { background: rgba(10, 11, 13, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border-bottom-color: var(--dk-line-soft); } .nav-new .col { position: relative; width: 100%; max-width: var(--container); margin: 0 auto; } .nav-new .nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; padding: 0 var(--gutter); } .nav-new .nav .brand, .nav-new .nav .brand:hover { display: inline-flex; align-items: center; color: #FFFFFF; padding: 0; } .nav-new .nav .brand svg { width: 116px; height: auto; } .nav-new .nav-links { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0; } .nav-new .nav-links > a, .nav-new .nav-links .nav-trigger { all: unset; box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 5px; font: 500 13.5px/1 var(--sans); color: rgba(255, 255, 255, 0.85); padding: 6px 0; cursor: pointer; white-space: nowrap; transition: color 300ms; } .nav-new .nav-links > a::after, .nav-new .nav-links .nav-trigger::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #FFFFFF; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--dk-ease); } .nav-new .nav-links > a:hover, .nav-new .nav-links .nav-trigger:hover, .nav-new .nav-links .nav-trigger[aria-expanded="true"] { color: #FFFFFF; } .nav-new .nav-links > a:hover::after, .nav-new .nav-links .nav-trigger[aria-expanded="true"]::after { transform: scaleX(1); } .nav-new .nav-trigger .caret { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform 300ms var(--dk-ease); } .nav-new .nav-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); opacity: 1; } .nav-new .nav-links > a:focus-visible, .nav-new .nav-trigger:focus-visible { outline: 2px solid var(--dk-blue); outline-offset: 4px; } .nav-new .nav-cta { display: flex; gap: 10px; justify-content: end; align-items: center; } .nav-new .nav-cta .btn { height: 36px; padding: 0 18px; font-size: 13px; font-weight: 500; border-radius: 2px; border: 1px solid transparent; } .nav-new .btn-ghost, .nav-new .btn-ghost:hover { color: var(--dk-text); } .nav-new .btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--dk-line-strong); backdrop-filter: blur(8px); } .nav-new .btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.38); } .nav-new .btn-white, .nav-new .btn-white:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--dk-ground); } .nav-new .btn-white:hover { box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.45); } .nav-new .nav-burger { background: rgba(255, 255, 255, 0.04); border-color: var(--dk-line-strong); color: var(--dk-text); border-radius: 2px; justify-self: end; } /* the sheets: the mockup's .mm - glass under the bar, hairlines, the page dims behind a scrim */ .nav-new .mm { position: absolute; left: 0; right: 0; top: 64px; z-index: 6; background: var(--dk-sheet-glass); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); border-top: 1px solid var(--dk-line-soft); border-bottom: 1px solid var(--dk-line); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 220ms ease, transform 300ms var(--dk-ease), visibility 0s linear 220ms; pointer-events: none; } .nav-new.sheet-open .nav, .nav-new.sheet-open .nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-new .mm[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms ease, transform 300ms var(--dk-ease), visibility 0s; pointer-events: auto; } .nav-new .mm-scrim { position: fixed; inset: 64px 0 0; z-index: 30; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 250ms, visibility 0s linear 250ms; pointer-events: none; } .nav-new.sheet-open .mm-scrim { opacity: 1; visibility: visible; transition: opacity 250ms, visibility 0s; pointer-events: auto; } /* the drawer (below 1024px): the light site's, skinned */ .theme-dark .nav-mobile { background: var(--dk-ground); color: var(--dk-text); } .theme-dark .nav-mobile a.m-item { color: var(--dk-text); border-bottom-color: var(--dk-line-soft); } .theme-dark .nav-mobile h2 { color: var(--dk-muted); } .theme-dark .nav-mobile .brand { color: #FFFFFF; } /* the footer: the mockup's compact footer (marketing/partials/footer-dark.html) */ .nav-new footer.foot-dark { position: relative; z-index: 1; border-top: 1px solid var(--dk-line); padding: 48px var(--gutter) 40px; background: var(--dk-ground); color: var(--dk-grey); } .nav-new .foot { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; } .nav-new .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--dk-grey); } body.nav-new .foot li a { color: var(--dk-grey); text-decoration: none; } body.nav-new .foot li a:hover { color: var(--dk-text); text-decoration: none; } .nav-new .foot .label { display: block; font: 500 13px/1.3 var(--sans); color: var(--dk-muted); margin: 0 0 12px; } .nav-new .foot .brand { display: inline-flex; color: #FFFFFF; padding: 0; } .nav-new .foot .brand svg { width: 100px; height: auto; } .nav-new .foot-addr { margin: 14px 0 0; max-width: 30ch; font: 400 13px/1.6 var(--sans); color: var(--dk-muted); } /* the CTA band: square, on a radial ground, the field's own buttons */ .theme-dark .band-tight { padding: 0; } .theme-dark .inset-cta { background: radial-gradient(60% 60% at 50% 100%, var(--dk-sky-low) 0%, var(--dk-ground) 70%); border-radius: 0; padding: 120px 32px; color: var(--dk-text); } .theme-dark .inset-cta::before { display: none; } .theme-dark .inset-cta .h2-section { font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: #FFFFFF; } .theme-dark .inset-cta .sub-hero { color: var(--dk-grey); font-size: 16px; max-width: 46ch; } .theme-dark .inset-cta .h2-section, .theme-dark .inset-cta .sub-hero { text-align: center; margin-left: auto; margin-right: auto; } .theme-dark .inset-cta .btn { height: 40px; border-radius: 2px; font-size: 14px; } .theme-dark .inset-cta .btn-on-ink { background: #FFFFFF; border-color: #FFFFFF; color: var(--dk-ground); } .theme-dark .inset-cta .btn-on-ink:hover { background: #FFFFFF; color: var(--dk-ground); box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.45); } .theme-dark .inset-cta .btn-on-ink-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--dk-line-strong); color: var(--dk-text); } .theme-dark .inset-cta .btn-on-ink-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.38); } /* ====================================================================== the sheets' structure: the mockup's .mm-* rules */ .nav-new .mm-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 48px; padding: 28px var(--gutter) 30px; } .nav-new .mm-in.mm-prod { grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, 1.1fr); gap: 0 44px; padding: 30px var(--gutter) 34px; } .nav-new .mm-links { display: grid; gap: 18px; align-content: start; } .nav-new .mm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; } .nav-new .mm-h { display: block; font: 500 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dk-muted); padding: 0 10px; margin: 0 0 8px; } .nav-new .mm-item { display: grid; grid-template-columns: 34px 1fr 16px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 2px; color: var(--dk-text); text-decoration: none; transition: background-color 250ms; } .nav-new .mm-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--dk-text); text-decoration: none; } .nav-new .mm-prod .mm-item { grid-template-columns: 1fr; gap: 3px; padding: 12px 10px; border-radius: 0; } .nav-new .mm-prod .mm-item b { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; color: var(--dk-text); transition: color 200ms; } .nav-new .mm-prod .mm-item span { font-size: 13px; line-height: 1.45; color: var(--dk-muted); } .nav-new .mm-prod .mm-item:hover { background: rgba(255, 255, 255, 0.04); } .nav-new .mm-all { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; padding: 14px 16px; border: 1px solid var(--dk-line-soft); background: rgba(255, 255, 255, 0.03); color: var(--dk-text); text-decoration: none; font-size: 14px; font-weight: 500; transition: border-color 250ms, background-color 250ms; } .nav-new .mm-all:hover { border-color: var(--dk-line-strong); background: rgba(255, 255, 255, 0.06); color: var(--dk-text); text-decoration: none; } .nav-new .mm-all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--dk-ease); } .nav-new .mm-all:hover svg { transform: translateX(4px); } .nav-new .mm-div { background: var(--dk-line-soft); } .nav-new .mm-featured { display: grid; gap: 18px; align-content: start; } .nav-new .mm-ic { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--dk-line-strong); background: rgba(255, 255, 255, 0.03); color: var(--dk-grey); transition: border-color 300ms, color 300ms, background-color 300ms; } .nav-new .mm-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .nav-new .mm-item:hover .mm-ic { border-color: rgba(85, 168, 255, 0.7); color: var(--dk-blue); background: rgba(85, 168, 255, 0.08); } .nav-new .mm-t b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: var(--dk-text); } .nav-new .mm-t span { display: block; font-size: 12px; line-height: 1.4; color: var(--dk-muted); margin-top: 1px; } .nav-new .mm-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--dk-text); opacity: 0; transform: translateX(-6px); transition: opacity 250ms, transform 300ms var(--dk-ease); } .nav-new .mm-item:hover .mm-arrow { opacity: 1; transform: none; } /* Featured: two mini modules, HTML never screenshots, in a clipped 16:11.5 frame on a deep ground with a dot grid and a soft blue glow; the white product crop bleeds off the right edge; a chip floats at its lower left. Product radii inside (12, 10, 7, 999): the crop IS the product. */ .mm-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .mm-mod { position: relative; display: grid; gap: 4px; color: var(--dk-text); text-decoration: none; } .mm-mod:hover { text-decoration: none; color: var(--dk-text); } .mm-mod-bg { position: relative; display: block; aspect-ratio: 16 / 11.5; overflow: hidden; border: 1px solid var(--dk-line-strong); background: linear-gradient(180deg, var(--dk-panel), var(--dk-ground)); transition: border-color 300ms, transform 450ms var(--dk-ease); } .mm-mod-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px) 0 0 / 14px 14px; opacity: 0.7; } .mm-mod-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 20% 0%, rgba(85, 168, 255, 0.28), transparent 62%), radial-gradient(70% 60% at 100% 100%, rgba(85, 168, 255, 0.12), transparent 60%); } .mm-mod:hover .mm-mod-bg { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); } .mm-mini { position: absolute; left: 11%; width: 100%; top: 12%; z-index: 2; display: grid; gap: 10px; padding: 14px 14px 12px; background: #FFFFFF; border-radius: 12px; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.06); color: #24272B; transition: transform 450ms var(--dk-ease); } .mm-mod:hover .mm-mini { transform: translateY(-4px); } .mm-mini-q { font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: #24272B; } .mm-caret { display: inline-block; width: 1px; height: 1em; background: #24272B; vertical-align: -0.15em; margin-left: 2px; animation: mm-blink 1s steps(2) infinite; } @keyframes mm-blink { to { opacity: 0; } } .mm-mini-row { display: flex; justify-content: space-between; align-items: center; } .mm-mini-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px 0 5px; border: 1px solid #E6E8E6; border-radius: 999px; font-size: 11px; font-weight: 500; color: #24272B; } .mm-mini-chip img { width: 14px; height: 14px; border-radius: 4px; display: block; } .mm-mini-send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #24272B; } .mm-mini-send svg { width: 12px; height: 12px; fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mm-mini-k { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 8px; } .mm-mini-k b { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: #24272B; font-variant-numeric: tabular-nums; } .mm-mini-k i { font-style: normal; font-size: 12px; font-weight: 500; color: #2F8F63; } .mm-mini-k em { grid-column: 1 / -1; font-style: normal; font-size: 11px; color: #737A82; } .mm-spark { display: block; width: 100%; height: 40px; overflow: visible; } .mm-spark-fill { fill: rgba(85, 168, 255, 0.14); } .mm-spark-line { fill: none; stroke: #55A8FF; stroke-width: 2; stroke-linecap: round; } .mm-mini-eng { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid #E6E8E6; } .mm-mini-eng svg { width: 14px; height: 14px; color: #24272B; } .mm-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: #FFFFFF; border-radius: 10px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.06); font-size: 11.5px; font-weight: 500; color: #24272B; white-space: nowrap; transition: transform 450ms var(--dk-ease); } .mm-float i { width: 7px; height: 7px; border-radius: 50%; background: #2F8F63; flex: none; } .mm-float img { width: 12px; height: 12px; border-radius: 4px; flex: none; } .mm-mini-chip .brand-fav { width: 14px; height: 14px; border-radius: 4px; flex: none; } .mm-float .brand-fav { width: 12px; height: 12px; flex: none; } .mm-float.a { left: 4%; bottom: 7%; } .mm-float.b { left: 4%; bottom: 9%; } .mm-mod:hover .mm-float { transform: translateY(-3px); } .mm-mod small { display: block; margin-top: 12px; font-size: 12px; color: var(--dk-muted); } .mm-mod b { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; } /* the Solutions sheet: the mockup's two audience cards and the Compare column */ .nav-new .mm-in.is-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); } .nav-new .mm-card { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--dk-line-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); color: var(--dk-text); text-decoration: none; transition: border-color 300ms, transform 400ms var(--dk-ease); } .nav-new .mm-card:hover { border-color: rgba(255, 255, 255, 0.45); transform: translateY(-2px); color: var(--dk-text); text-decoration: none; } .nav-new .mm-card .mm-ic { width: 40px; height: 40px; } .nav-new .mm-card:hover .mm-ic { border-color: rgba(85, 168, 255, 0.7); color: var(--dk-blue); } .nav-new .mm-card b { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; } .nav-new .mm-card span { font-size: 13px; line-height: 1.5; color: var(--dk-grey); } .nav-new .mm-card em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--dk-text); margin-top: 4px; } .nav-new .mm-col { display: grid; gap: 4px; align-content: start; } .nav-new .mm-col.mm-plain .mm-item { grid-template-columns: 1fr 16px; } .nav-new .mm-col.mm-plain .mm-ic { display: none; } @media (max-width: 1024px) { .nav-new .nav-in { grid-template-columns: auto 1fr; } .nav-new .nav-links, .nav-new .nav-cta, .nav-new .mm { display: none; } } @media (max-width: 768px) { .nav-new .foot { grid-template-columns: 1fr; } } /* ====================================================================== shared by every dark page: the strip, the pricing anatomy, the FAQ */ /* the strip: three cells on one 48px top slot */ .dh-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 112px; border-top: 1px solid var(--dk-line-soft); } .dh-strip > div { padding: 44px var(--gutter) 8px 0; display: grid; grid-template-rows: 48px auto; align-content: start; align-items: end; gap: 20px; } .dh-strip > div { border-left: 1px solid var(--dk-line-soft); padding-left: var(--gutter); } /* the first VISIBLE cell has no divider: the count cell is dropped ([hidden]) below the threshold and in a preview */ .dh-strip > div:first-child, .dh-strip > div[hidden] + div { border-left: 0; padding-left: 0; } .dh-strip > div[hidden] { display: none; } .dh-strip b { display: flex; align-items: center; height: 48px; font-size: 40px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--dk-text); font-variant-numeric: tabular-nums; } .dh-strip span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--dk-grey); max-width: 30ch; } .dh-strip-lg { gap: 14px; } .dh-strip-lg .mk { margin: 0; opacity: 0; transform: translateY(6px); transition: opacity 500ms ease, transform 500ms var(--dk-ease); } .dh-strip-lg .mk .mk-lg { width: 30px; height: 30px; } .dh-strip.is-in .dh-strip-lg .mk { opacity: 1; transform: none; } .dh-strip-days { display: flex; gap: 10px; } .dh-day { display: block; width: 36px; height: 36px; font-style: normal; } .dh-day svg { display: block; width: 36px; height: 36px; overflow: visible; } .dh-day .ring { fill: rgba(70, 185, 127, 0); stroke: var(--dk-line-strong); stroke-width: 1; transition: fill 600ms ease; transition-delay: var(--d, 0ms); } .dh-day .ring-on { fill: none; stroke: var(--dk-good); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 106.8; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 700ms var(--dk-ease); transition-delay: var(--d, 0ms); } .dh-day .ltr { font: 500 12.5px var(--sans); fill: var(--dk-grey); text-anchor: middle; transition: fill 500ms ease; transition-delay: calc(var(--d, 0ms) + 220ms); } .dh-day .badge { opacity: 0; transform: scale(0.4); transform-origin: 29.5px 29.5px; transition: opacity 300ms ease, transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1.3); transition-delay: calc(var(--d, 0ms) + 460ms); } .dh-day .badge circle { fill: var(--dk-good); stroke: var(--dk-ground); stroke-width: 2.5; } .dh-day .badge path { fill: none; stroke: var(--dk-ground); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .dh-strip.is-in .dh-day .ring { fill: rgba(70, 185, 127, 0.07); } .dh-strip.is-in .dh-day .ring-on { stroke-dashoffset: 0; } .dh-strip.is-in .dh-day .ltr { fill: var(--dk-text); } .dh-strip.is-in .dh-day .badge { opacity: 1; transform: none; } /* ====================================================================== B2 pricing (src/routes/pages.js dark anatomy) */ .dh-pr-head { text-align: center; display: grid; justify-items: center; gap: 14px; margin-bottom: 48px; } .dh-pr-head .dh-t1 { max-width: 24ch; margin: 0; } .dh-pr-head .dh-lead { max-width: 58ch; margin: 0; } .theme-dark .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .theme-dark .plan { position: relative; padding: 0; border: 0; background: transparent; isolation: isolate; transition: transform 500ms var(--dk-ease), box-shadow 500ms; } .theme-dark .plan-ring { position: absolute; inset: 0; background: conic-gradient(from var(--dh-hbg-a, 0deg), rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 290deg, rgba(255, 255, 255, 0.95) 338deg, rgba(255, 255, 255, 0) 360deg); opacity: 0; transition: opacity 500ms; pointer-events: none; } .theme-dark .plan.pop .plan-ring { opacity: 1; animation: dh-hbg-spin 3.2s linear infinite; } .theme-dark .plan-glow { position: absolute; inset: 0; background: radial-gradient(70% 90% at 50% 50%, #55A8FF 0%, rgba(255, 255, 255, 0) 100%); opacity: 0; transition: opacity 500ms; pointer-events: none; } .theme-dark .plan-in { position: relative; z-index: 1; margin: 1px; height: calc(100% - 2px); box-sizing: border-box; background: var(--dk-panel); border: 1px solid var(--dk-line); padding: 12px 12px 22px; display: grid; gap: 14px; align-content: start; transition: border-color 400ms; } .theme-dark .plan-head { display: grid; gap: 12px; padding: 20px 18px 18px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--dk-line-soft); } .theme-dark .plan-name { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .theme-dark .plan .pn { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--dk-text); } .theme-dark .plan .pb { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dk-grey); } .theme-dark .plan-engines { display: flex; align-items: center; gap: 8px; margin: 2px 0; } .theme-dark .plan-engines .mk { margin: 0; } .theme-dark .plan-engines .mk-lg { width: 20px; height: 20px; } .theme-dark .plan-engines .mk.dim .mk-lg { filter: grayscale(1) brightness(1.6); opacity: 0.28; } .theme-dark .plan-engines .mk.dim:hover .mk-lg { opacity: 0.7; } .theme-dark .plan-engines .mk-sep { width: 1px; height: 16px; background: var(--dk-line-strong); margin: 0 2px; } .theme-dark .plan .pp { margin-top: 4px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--dk-text); } .theme-dark .plan .pp small { font: 400 13px var(--sans); color: var(--dk-muted); margin-left: 6px; } .theme-dark .plan .btn { margin: 0 6px; height: 40px; border-radius: 2px; font-size: 14px; font-weight: 500; justify-content: center; } .theme-dark .plan-list { list-style: none; margin: 4px 6px 0; padding: 0; display: grid; gap: 11px; font-size: 13.5px; color: var(--dk-grey); } .theme-dark .plan-list li { display: flex; align-items: center; gap: 10px; } .theme-dark .plan-list li svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--dk-grey); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .theme-dark .plan-list li.off { color: var(--dk-muted); } .theme-dark .plan-list li.off svg { stroke: var(--dk-muted); opacity: 0.6; } .theme-dark .plan-list li.off span::after { content: 'Pro'; white-space: nowrap; font: 500 10px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); border: 1px solid var(--dk-line-soft); padding: 2px 6px; margin-left: 8px; vertical-align: middle; } .theme-dark .pop-chip { font: 500 11px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dk-blue); border: 1px solid rgba(85, 168, 255, 0.5); padding: 3px 8px; } .theme-dark .plan.pop .plan-in { border-color: rgba(255, 255, 255, 0.28); } .theme-dark .plan:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -14px rgba(85, 168, 255, 0.5); } .theme-dark .plan:hover .plan-glow { opacity: 1; } .theme-dark .plan:hover .plan-ring { opacity: 0; } .theme-dark .plan:hover .plan-in { border-color: transparent; } .theme-dark .pr-table { margin-top: 56px; border: 1px solid var(--dk-line-soft); overflow-x: auto; } .theme-dark .pr-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .theme-dark .pr-table th { padding: 18px 16px; font-size: 14px; font-weight: 500; color: var(--dk-text); text-align: center; border-bottom: 1px solid var(--dk-line); vertical-align: top; } .theme-dark .pr-table th.l { text-align: left; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); } .theme-dark .pr-table th small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--dk-muted); } .theme-dark .pr-table td { padding: 12px 16px; border-top: 1px solid var(--dk-line-soft); text-align: center; color: var(--dk-grey); vertical-align: middle; } .theme-dark .pr-table td.l { text-align: left; color: var(--dk-text); width: 38%; } .theme-dark .pr-table td.l small { display: block; font-size: 12px; color: var(--dk-muted); margin-top: 2px; } .theme-dark .pr-table .pop { background: rgba(255, 255, 255, 0.025); } .theme-dark .pr-table tr.grp td { padding: 26px 16px 8px; border-top: 0; text-align: left; font: 500 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dk-muted); } .theme-dark .pr-table tr.grp + tr td { border-top: 1px solid var(--dk-line-soft); } .theme-dark .pr-table .ok { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(70, 185, 127, 0.14); color: var(--dk-good-text); } .theme-dark .pr-table .ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .theme-dark .pr-table .no { display: inline-block; width: 12px; height: 1px; background: rgba(255, 255, 255, 0.22); vertical-align: middle; } .theme-dark .pr-table .mk-li { justify-content: center; gap: 8px; } .theme-dark .pr-foot { margin: 18px auto 0; font-size: 12.5px; line-height: 1.55; color: var(--dk-muted); text-align: center; max-width: 76ch; } .theme-dark .pr-foot a { color: var(--dk-grey); text-decoration: underline; text-underline-offset: 2px; } /* ====================================================================== B3 the FAQ (renderFaqSection markup) */ .theme-dark #faq { padding: 0; border-top: 1px solid var(--dk-line); background: transparent; } .theme-dark #faq .wrap { max-width: none; padding: 96px var(--gutter) 100px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; } .theme-dark #faq .sec-head { margin: 0; max-width: none; } .theme-dark #faq .eyebrow { display: none; } .theme-dark #faq .h2 { font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: var(--dk-text); margin: 0; } .theme-dark #faq .h2 .dim { color: var(--dk-muted); } .theme-dark #faq .lead { margin-top: 20px; font: 400 13px/1.6 var(--sans); color: var(--dk-muted); } .theme-dark .faq details { border-top: 1px solid var(--dk-line-soft); } .theme-dark .faq details:last-child { border-bottom: 1px solid var(--dk-line-soft); } .theme-dark .faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 15px; font-weight: 500; color: var(--dk-text); } .theme-dark .faq summary::-webkit-details-marker { display: none; } .theme-dark .faq summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--dk-muted); stroke-width: 1.5; stroke-linecap: round; transition: transform 300ms var(--dk-ease); } .theme-dark .faq details[open] summary svg { transform: rotate(45deg); } .theme-dark .faq p { padding: 0 0 16px; margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--dk-grey); } /* the shared blocks above, at the site's breakpoints */ @media (max-width: 1024px) { .theme-dark .plans { grid-template-columns: 1fr; } .theme-dark #faq .wrap { grid-template-columns: 1fr; } .dh-strip { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; } .dh-strip > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--dk-line-soft); } } @media (max-width: 768px) { .theme-dark .pr-table th.l, .theme-dark .pr-table td.l { width: 44%; } } @media (max-width: 480px) { .dh-strip b { font-size: 32px; } } @media (prefers-reduced-motion: reduce) { .theme-dark .plan.pop .plan-ring { animation: none; background: rgba(255, 255, 255, 0.35); } } /* ====================================================================== the base vocabulary, dark Every page keeps base.css's markup and its copy; on a dark page these rules map that vocabulary onto the dark recipes: bands become sections bounded by one hairline, section heads take the type roles and lose their eyebrows, cards become glass modules, steps and accordions take the hairline anatomy, tables the hairline table. Page sheets add only their own devices. Added per family from 2026-09-06. */ .theme-dark .band { background: transparent; color: var(--dk-text); border-top: 1px solid var(--dk-line); padding: 96px 0 100px; } .theme-dark .band-hero { border-top: 0; padding: 128px 0 24px; text-align: center; } .theme-dark .band-hero + .band { border-top: 0; } .theme-dark .band-tight { padding: 72px 0 80px; } .theme-dark .band-tinted, .theme-dark .band-paper, .theme-dark .band-panel, .theme-dark .band-ink { background: transparent; color: var(--dk-text); } .theme-dark .dot-field { display: none; } /* Eyebrows: none over a hero or a section statement (the recipes have none); inside a card, a unit or a strip the eyebrow is the label that names the figure or the kicker of the unit, so it stays, small and muted. */ .theme-dark .band-hero .eyebrow, .theme-dark .sec-head .eyebrow, .theme-dark .band > .wrap > .eyebrow { display: none; } .theme-dark .eyebrow { display: block; font: 500 12px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); margin: 0 0 8px; } .theme-dark .card .eyebrow, .theme-dark .unit .eyebrow { margin-bottom: 10px; } .theme-dark .crumb { display: block; font: 500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--dk-muted); margin-bottom: 18px; } .theme-dark .crumb a { color: var(--dk-grey); } .theme-dark .crumb a:hover { color: var(--dk-text); } .theme-dark .band-hero .wrap { display: grid; justify-items: center; gap: 18px; } .theme-dark .band-hero .crumb { margin: 0; } .theme-dark .band-hero h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: #FFFFFF; margin: 0; max-width: 22ch; text-wrap: balance; } .theme-dark .band-hero .sub-hero { font-size: 16px; line-height: 1.6; color: var(--dk-grey); margin: 0; max-width: 60ch; } .theme-dark .band-hero .body-sm { max-width: 62ch; } .theme-dark .band-hero .micro-proof { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0; } .theme-dark .band-hero .cta-row { margin: 6px 0 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .theme-dark .sec-head { text-align: center; display: grid; justify-items: center; gap: 14px; margin: 0 auto 48px; max-width: none; } .theme-dark .sec-head h2, .theme-dark .h2, .theme-dark .h2-section, .theme-dark .h2-compact { font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: var(--dk-text); margin: 0; max-width: 24ch; text-wrap: balance; } .theme-dark .sec-head p, .theme-dark .sec-head .sub-hero, .theme-dark .sec-head .body-sm { font-size: 16px; line-height: 1.6; color: var(--dk-grey); margin: 0; max-width: 58ch; } .theme-dark .sec-label { font: 500 13px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--dk-muted); margin-bottom: 24px; } .theme-dark .h3-block, .theme-dark .h4 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--dk-text); margin: 0; } .theme-dark .body-sm, .theme-dark .caption, .theme-dark .body { color: var(--dk-grey); } .theme-dark .caption { font-size: 12.5px; line-height: 1.55; color: var(--dk-muted); } .theme-dark .chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--dk-line-strong); border-radius: 0; background: transparent; font: 500 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-grey); } .theme-dark .chip-accent { border-color: rgba(85, 168, 255, 0.5); color: var(--dk-blue); } /* buttons: the site's square 40px pair (the primary is white, the secondary a ghost) */ .theme-dark .btn { height: 40px; padding: 0 18px; border-radius: 2px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; transition: background-color 200ms, border-color 200ms, color 200ms, box-shadow 300ms var(--dk-ease); } .theme-dark .btn-lg { height: 44px; padding: 0 22px; } .theme-dark .btn-sm { height: 36px; padding: 0 14px; font-size: 13px; } .theme-dark .btn-primary, .theme-dark .btn-on-ink { background: #FFFFFF; border-color: #FFFFFF; color: var(--dk-ground); } .theme-dark .btn-primary:hover, .theme-dark .btn-on-ink:hover { background: #FFFFFF; color: var(--dk-ground); box-shadow: 0 12px 30px -12px rgba(255, 255, 255, 0.45); text-decoration: none; } .theme-dark .btn-secondary, .theme-dark .btn-on-ink-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--dk-line-strong); color: var(--dk-text); } .theme-dark .btn-secondary:hover, .theme-dark .btn-on-ink-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.38); color: var(--dk-text); text-decoration: none; } .theme-dark .btn .arrow { width: 16px; height: 16px; transition: transform 300ms var(--dk-ease); } .theme-dark .btn:hover .arrow { transform: translateX(3px); } .theme-dark .btn-text { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--dk-text); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--dk-line-strong); } .theme-dark .btn-text:hover { text-decoration-color: var(--dk-text); color: var(--dk-text); } .theme-dark .btn-text .arrow { width: 16px; height: 16px; transition: transform 300ms var(--dk-ease); } .theme-dark .btn-text:hover .arrow { transform: translateX(3px); } /* cards become glass modules; grids keep their tracks with the 14px rhythm */ .theme-dark .card { background: var(--dk-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--dk-line-strong); border-radius: 0; box-shadow: var(--dk-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.14); color: var(--dk-text); } .theme-dark .card-lg { padding: 22px 24px; } .theme-dark .card .h3-block, .theme-dark .card .h4 { margin-top: 0; } .theme-dark .card p { color: var(--dk-grey); } .theme-dark .grid { gap: 14px; } .theme-dark .star-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .theme-dark .star-list li { position: relative; padding-left: 22px; color: var(--dk-grey); font-size: 14.5px; line-height: 1.6; } .theme-dark .star-list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--dk-line-strong); } .theme-dark .star-list strong { color: var(--dk-text); font-weight: 500; } /* numbered steps: a hairline grid, the numeral muted and small */ .theme-dark .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .theme-dark .steps > li { counter-increment: step; position: relative; padding: 22px 0 22px 44px; border-top: 1px solid var(--dk-line-soft); } .theme-dark .steps > li::before { content: ' 0' counter(step); position: absolute; left: 0; top: 24px; font: 500 12px var(--mono, var(--sans)); letter-spacing: 0.06em; color: var(--dk-muted); } .theme-dark .steps > li + li { margin-top: 0; } .theme-dark .steps p { margin-top: 6px; color: var(--dk-grey); } /* the accordion: the FAQ anatomy */ .theme-dark .acc { border-top: 1px solid var(--dk-line-soft); } .theme-dark .acc details { border-bottom: 1px solid var(--dk-line-soft); background: transparent; } .theme-dark .acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-size: 15px; font-weight: 500; color: var(--dk-text); } .theme-dark .acc summary::-webkit-details-marker { display: none; } .theme-dark .acc summary .ic { width: 18px; height: 18px; flex: none; color: var(--dk-muted); transition: transform 300ms var(--dk-ease); } .theme-dark .acc details[open] summary .ic { transform: rotate(180deg); } .theme-dark .acc p { padding: 0 0 16px; margin: 0; max-width: 60ch; font-size: 14.5px; line-height: 1.6; color: var(--dk-grey); } /* tables: the hairline table (breakout tables stay in the column) */ .theme-dark table.breakout, .theme-dark .spec { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--dk-grey); } .theme-dark table.breakout thead th { padding: 14px 16px; text-align: left; font: 500 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); border-bottom: 1px solid var(--dk-line); } .theme-dark table.breakout tbody th, .theme-dark table.breakout tbody td, .theme-dark .spec th, .theme-dark .spec td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--dk-line-soft); line-height: 1.55; } .theme-dark table.breakout tbody th, .theme-dark .spec th { font-size: 14px; font-weight: 500; color: var(--dk-text); } .theme-dark .spec-panel { background: transparent; border: 1px solid var(--dk-line-soft); border-radius: 0; padding: 0; max-width: none; } .theme-dark .cmp-wrap, .theme-dark .matrix-wrap, .theme-dark .table-wrap { border: 1px solid var(--dk-line-soft); overflow-x: auto; } .theme-dark .cmp-wrap table, .theme-dark .matrix-wrap table { min-width: 0; } /* the split section with a live surface: copy left on a hairline, the app's own card right */ .theme-dark .msec { padding: 96px 0 100px; } .theme-dark .msec .eyb { display: none; } .theme-dark .msec h2 { font-size: 38px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: var(--dk-text); margin: 0; } .theme-dark .msec p { color: var(--dk-grey); font-size: 15px; line-height: 1.6; margin: 14px 0 0; } .theme-dark .msec-split .msec-copy { border-right: 1px solid var(--dk-line-soft); } .theme-dark .msec-split.is-mirrored .msec-copy { border-left-color: var(--dk-line-soft); } .theme-dark .msec-frame .frame { border-color: var(--dk-line-strong); } .theme-dark .msec-frame .msec-stage { background: rgba(255, 255, 255, 0.03); } @media (max-width: 768px) { .theme-dark .band { padding: 64px 0; } .theme-dark .band-hero { padding: 96px 0 16px; } .theme-dark .band-hero h1 { font-size: 34px; } .theme-dark .sec-head h2, .theme-dark .h2, .theme-dark .h2-section, .theme-dark .h2-compact, .theme-dark .msec h2 { font-size: 30px; } .theme-dark .btn-lg { height: 40px; padding: 0 18px; } } /* The sample client report (marketing/partials/sample-report.html, root .sample-report) is a white document: the one bright object on the page. Its text keeps the product's ink on every dark page rather than inheriting the theme's light text (the audit read 1.11:1 on its paragraphs before this). */ .theme-dark .sample-report { color: #24272B; } .theme-dark .sample-report h1, .theme-dark .sample-report h2, .theme-dark .sample-report h3, .theme-dark .sample-report b, .theme-dark .sample-report th, .theme-dark .sample-report p, .theme-dark .sample-report .caption, .theme-dark .sample-report .body-sm { color: #24272B; } .theme-dark .sample-report .sr-meta, .theme-dark .sample-report .sr-label, .theme-dark .sample-report .sr-kicker, .theme-dark .sample-report small { color: #6B7074; } /* steel: 4.9:1 on paper; the product's muted is 4.4 there */ /* the embedded product demo (feature pages): the app's own light card inside a dark frame on the ground */ .theme-dark .shot { background: transparent; border: 1px solid var(--dk-line-strong); border-radius: 0; padding: 14px; box-shadow: var(--dk-shadow); } .theme-dark .shot-ridges::before, .theme-dark .shot-ridges::after { display: none; } .theme-dark .shot-inner { border-radius: 12px; overflow: hidden; } .theme-dark .demo-skel { background: rgba(255, 255, 255, 0.04); } .theme-dark .demo-skel span, .theme-dark .demo-skel-plot { background: rgba(255, 255, 255, 0.06); } .theme-dark .demo-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-top: 16px; } .theme-dark .demo-note .caption { max-width: 640px; } /* whole-card links keep the module look and lift on hover */ .theme-dark a.card, .theme-dark .card-link { color: var(--dk-text); text-decoration: none; transition: transform 300ms var(--dk-ease), border-color 300ms; } .theme-dark a.card:hover, .theme-dark .card-link:hover { color: var(--dk-text); text-decoration: none; transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.35); } .theme-dark .card .btn-text { margin-top: 14px; } .theme-dark .wrap-narrow { max-width: 760px; } /* a split row: heading column beside its content */ .theme-dark .row-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px 48px; align-items: start; } .theme-dark .row-split .sec-head { text-align: left; justify-items: start; margin: 0; } .theme-dark .row-split .sec-head h2, .theme-dark .row-split .sec-head p { max-width: none; } @media (max-width: 768px) { .theme-dark .row-split { grid-template-columns: minmax(0, 1fr); } } /* code and commands: a glass panel in the mono voice */ .theme-dark pre.artifact, .theme-dark .mono-line { margin: 0; padding: 16px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dk-line-strong); color: var(--dk-text); font: 400 13px/1.6 var(--mono, var(--sans)); overflow-x: auto; } .theme-dark pre.artifact code, .theme-dark .mono-line code { background: transparent; color: inherit; padding: 0; font: inherit; } .theme-dark code { font: 400 0.92em var(--mono, var(--sans)); color: var(--dk-text); background: rgba(255, 255, 255, 0.06); padding: 1px 5px; border-radius: 2px; } .theme-dark .stack { display: grid; gap: 14px; align-content: start; } .theme-dark .stack > * { margin: 0; } .theme-dark .row-split.is-flipped > :first-child { order: 2; } /* a proof line outside the hero (the install band, the demo foot) reads grey on the ground */ .theme-dark .micro-proof { font-size: 14px; color: var(--dk-grey); } /* the sources block the build splices onto every comparison page (src/competitor-facts.js): a hairline panel on the ground, the disclosure muted, the source links in the text colour */ .theme-dark .sources { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--dk-line-soft); border-radius: 0; padding: 22px 24px; color: var(--dk-grey); } .theme-dark .sources h2, .theme-dark .sources h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--dk-text); margin: 0 0 12px; } .theme-dark .sources p, .theme-dark .sources li { color: var(--dk-grey); font-size: 14px; line-height: 1.6; } .theme-dark .sources b { color: var(--dk-text); font-weight: 500; } .theme-dark .sources a { color: var(--dk-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dk-line-strong); } .theme-dark .sources a:hover { text-decoration-color: var(--dk-text); } .theme-dark .sources .src-disclosure { color: var(--dk-muted); font-size: 13px; } .theme-dark .src-note, .theme-dark .src-caveat, .theme-dark .sources small { color: var(--dk-grey); } .theme-dark .src-caveat { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--dk-line-soft); border-radius: 0; } /* the caveat carries its own white note ground in the light sheet */ /* a caveat can sit outside the block (an unreachable rival price page) */ /* reading pages: bare headings and lists inside a wrap (methodology, the 404, legal prose) */ .theme-dark .wrap > h2, .theme-dark .stack > h2, .theme-dark .legal h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; color: var(--dk-text); margin: 34px 0 10px; } .theme-dark .wrap > h2:first-child, .theme-dark .stack > h2:first-child { margin-top: 0; } .theme-dark .stack > p, .theme-dark .legal p, .theme-dark .legal li { color: var(--dk-grey); font-size: 15px; line-height: 1.7; } .theme-dark .stack > p b, .theme-dark .legal b, .theme-dark ul.measure b { color: var(--dk-text); font-weight: 500; } .theme-dark ul.measure { list-style: disc; padding-left: 22px; margin: 0; color: var(--dk-grey); } .theme-dark ul.measure li { margin: 6px 0; font-size: 15px; line-height: 1.7; } .theme-dark ul.measure a, .theme-dark .legal a, .theme-dark .stack > p a { color: var(--dk-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--dk-line-strong); font-weight: 500; } .theme-dark .legal { max-width: 72ch; } .theme-dark .band-legal { padding-top: 0; } .theme-dark .legal ul { margin: 0 0 14px; padding-left: 22px; } .theme-dark .legal .tw { overflow-x: auto; margin: 10px 0 18px; border: 1px solid var(--dk-line-soft); } .theme-dark .legal table { width: 100%; border-collapse: collapse; font-size: 13px; } .theme-dark .legal th { text-align: left; font: 500 11px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dk-muted); padding: 10px 12px; border-bottom: 1px solid var(--dk-line); } .theme-dark .legal td { padding: 10px 12px; border-top: 1px solid var(--dk-line-soft); vertical-align: top; color: var(--dk-grey); line-height: 1.55; } /* ====================================================================== the new nav on a LIGHT page (docs) The mockup's structure in the light system's colours; the Featured tiles stay the dark product frames. */ .nav-new:not(.theme-dark) .nav, .nav-new:not(.theme-dark) .nav.is-scrolled { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--line); } .nav-new:not(.theme-dark) .nav .brand, .nav-new:not(.theme-dark) .nav .brand:hover { color: var(--ink); } .nav-new:not(.theme-dark) .nav-links > a, .nav-new:not(.theme-dark) .nav-links .nav-trigger { color: var(--iron); } .nav-new:not(.theme-dark) .nav-links > a:hover, .nav-new:not(.theme-dark) .nav-links .nav-trigger:hover, .nav-new:not(.theme-dark) .nav-links .nav-trigger[aria-expanded="true"] { color: var(--ink); } .nav-new:not(.theme-dark) .nav-links > a::after, .nav-new:not(.theme-dark) .nav-links .nav-trigger::after { background: var(--ink); } .nav-new:not(.theme-dark) .btn-ghost, .nav-new:not(.theme-dark) .btn-ghost:hover { background: transparent; border-color: var(--line-strong); color: var(--ink); backdrop-filter: none; } .nav-new:not(.theme-dark) .btn-white, .nav-new:not(.theme-dark) .btn-white:hover { background: var(--ink); border-color: var(--ink); color: #FFFFFF; box-shadow: none; } .nav-new:not(.theme-dark) .nav-burger { background: transparent; border-color: var(--line); color: var(--ink); } .nav-new:not(.theme-dark) .mm { background: rgba(255, 255, 255, 0.94); border-top-color: var(--line); border-bottom-color: var(--line); box-shadow: 0 30px 60px -30px rgba(36, 39, 43, 0.25); } .nav-new:not(.theme-dark) .mm-h { color: var(--steel); } .nav-new:not(.theme-dark) .mm-item, .nav-new:not(.theme-dark) .mm-prod .mm-item b, .nav-new:not(.theme-dark) .mm-t b, .nav-new:not(.theme-dark) .mm-card, .nav-new:not(.theme-dark) .mm-card em, .nav-new:not(.theme-dark) .mm-arrow, .nav-new:not(.theme-dark) .mm-mod { color: var(--ink); } .nav-new:not(.theme-dark) .mm-prod .mm-item span, .nav-new:not(.theme-dark) .mm-t span, .nav-new:not(.theme-dark) .mm-card span, .nav-new:not(.theme-dark) .mm-mod small { color: var(--steel); } .nav-new:not(.theme-dark) .mm-item:hover, .nav-new:not(.theme-dark) .mm-prod .mm-item:hover { background: var(--band-tint); } .nav-new:not(.theme-dark) .mm-all, .nav-new:not(.theme-dark) .mm-card, .nav-new:not(.theme-dark) .mm-ic { border-color: var(--line); background: var(--paper); box-shadow: none; color: var(--ink); } .nav-new:not(.theme-dark) .mm-all:hover, .nav-new:not(.theme-dark) .mm-card:hover { border-color: var(--line-strong); background: var(--paper); } .nav-new:not(.theme-dark) .mm-div { background: var(--line); } .nav-new:not(.theme-dark) .mm-scrim { background: rgba(36, 39, 43, 0.28); } .nav-new:not(.theme-dark) footer.foot-dark { background: var(--paper); color: var(--steel); border-top-color: var(--line); } body.nav-new:not(.theme-dark) .foot li a, .nav-new:not(.theme-dark) .foot ul, .nav-new:not(.theme-dark) .foot .label, .nav-new:not(.theme-dark) .foot-addr { color: var(--steel); } body.nav-new:not(.theme-dark) .foot li a:hover, .nav-new:not(.theme-dark) .foot .brand { color: var(--ink); } /* css/pages/about-dark.css */ /* marketing/css/pages/about-dark.css - /about dark, held until cutover. Numbered editorial panels on the * dark ground; everything else is the theme's skin of base.css. Laws kept as in the theme sheet. */ .page-about-dark .band-hero { padding-bottom: 24px; } .page-about-dark .panel-num + .panel-num { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--dk-line-soft); } .page-about-dark .panel-num .row-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 24px 48px; } .page-about-dark .panel-num .h3-block { font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; } /* the mission line is the Editorial display role, in Epilogue like the rest, at the dark weight */ .page-about-dark .display-serif { font-family: var(--sans); font-size: 30px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; color: var(--dk-text); margin: 0; } .page-about-dark .panel-num .spec { margin-top: 18px; border: 1px solid var(--dk-line-soft); } .page-about-dark .stack > p { margin: 0; } @media (max-width: 768px) { .page-about-dark .panel-num + .panel-num { margin-top: 48px; padding-top: 48px; } .page-about-dark .panel-num .row-split { grid-template-columns: minmax(0, 1fr); gap: 16px; } .page-about-dark .display-serif { font-size: 26px; } } /* css/pages/about.css */ /* /about — numbered editorial panels (P1 §P-16, L-lite). * Only page-specific rhythm lives here; every component it uses comes from base.css. */ /* The hero carries no visual, so its full 96px foot plus the next band's 96px reads as a hole rather than air. 64 + 96 keeps the rhythm on-scale and closes the gap. */ .page-about .band-hero { padding-bottom: var(--s8); } .page-about .band-hero .sub-hero { margin-top: var(--s5); } .page-about .panel-num + .panel-num { margin-top: var(--s9); } .page-about .panel-num .row-split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: var(--s7); } .page-about .panel-num .spec { margin-top: var(--s5); } @media (max-width: 768px) { .page-about .panel-num + .panel-num { margin-top: var(--s8); } .page-about .panel-num .row-split { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } } /* css/pages/auth.css */ /* /login /signup /forgot /reset /accept-team - the auth family, ported off m.css onto the * marketing system (audit Wave 7, George-approved 2026-08-30; landed 2026-08-31). * * WHAT THIS IS. The dark split-panel design George shipped on m.css, re-implemented on the * marketing tokens: Epilogue (self-hosted - the Google Fonts CDN request died with the port), * the closed breakpoint set (1024/768/480; m.css ran its own twelve), marketing control * geometry (44px fields, --r-ctl corners, 48px primary), and the site's focus law (white ring * on dark grounds). The LOOK is deliberately the same shell: same grounds, same glow, same * copy stack - the system underneath changed, not the design. * * THE GLOW GRADIENTS are ported verbatim from m.css - they are the aside's existing, shipped * art direction, not new decoration, and this bundle is on the e2e gradient allowlist. The * scrim under the copy band is load-bearing: without it the pitch goes white-on-white when * the glow breathes (the original file documents the failed first attempt). * * GROUNDS. --carbon is the page ground (exactly the old --auth-ink #07070A). The form panel * sits one step lighter at #0B0B0E - a literal on purpose: no marketing token names a second * carbon, and inventing one for a single surface is how palettes fork. The glow triplet is * 85,168,255 = --accent. */ .page-auth { background: var(--carbon); color: #FFFFFF; } .page-auth::before { display: none; } /* the column rules belong to paper pages */ .page-auth .auth-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; } /* ---- the aside: lockup, pitch, glow ---- */ .page-auth .auth-aside { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--s8) var(--s7); background: var(--carbon); } .page-auth .auth-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(86% 52% at 50% 14%, rgba(85, 168, 255, 1) 0%, rgba(85, 168, 255, .92) 26%, rgba(85, 168, 255, .52) 50%, rgba(85, 168, 255, .16) 70%, transparent 86%), radial-gradient(30% 18% at 50% 2%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, .28) 46%, transparent 76%); } .page-auth .auth-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(7, 7, 10, .30) 26%, rgba(7, 7, 10, .80) 46%, rgba(7, 7, 10, .96) 60%, var(--carbon) 76%); } .page-auth .auth-aside-in { position: relative; z-index: 1; max-width: 420px; text-align: center; } .page-auth .auth-aside .brand { display: inline-block; color: #FFFFFF; margin-bottom: 28px; } .page-auth .auth-aside .brand svg { width: 150px; height: auto; display: block; margin: 0 auto; } .page-auth .auth-pitch { font-size: 38px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 600; color: #FFFFFF; margin: 0 0 14px; } .page-auth .auth-lede { font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .80); margin: 0 0 22px; } .page-auth .auth-claims { list-style: none; margin: 0 0 6px; padding: 0; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, .72); } .page-auth .auth-credit { font-size: 16px; font-weight: 600; color: var(--accent); margin: 0 0 30px; } .page-auth .auth-engines { display: flex; gap: 18px; justify-content: center; align-items: center; } .page-auth .auth-engines img { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); opacity: .72; } /* ---- the form panel ---- */ .page-auth .auth-main { display: flex; align-items: center; justify-content: center; padding: var(--s8) var(--s7); background: #0B0B0E; border-left: 1px solid rgba(255, 255, 255, .08); } .page-auth .auth-form { width: 100%; max-width: 400px; } .page-auth .auth-form h1 { font-size: 30px; letter-spacing: -0.03em; font-weight: 600; color: #FFFFFF; margin: 0 0 8px; text-align: center; } .page-auth .auth-form .sub { color: rgba(255, 255, 255, .62); font-size: 14.5px; line-height: 1.55; margin: 0 0 26px; text-align: center; } .page-auth .field { margin: 0 0 14px; } .page-auth .field label { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .86); margin-bottom: 6px; } .page-auth .field input { width: 100%; height: 44px; padding: 0 12px; border-radius: var(--r-ctl); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: #FFFFFF; font: inherit; font-size: 16px; transition: border-color .15s, box-shadow .15s; } .page-auth .field input::placeholder { color: rgba(255, 255, 255, .40); } .page-auth .field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(85, 168, 255, .28); } .page-auth .field input.code { font-size: 24px; letter-spacing: .35em; text-align: center; padding-left: calc(12px + .35em); } .page-auth .hint { font-size: 12.5px; color: rgba(255, 255, 255, .55); margin: 7px 0 0; } /* Password reveal - anatomy from the marketing field, masks ported from m.css. */ .page-auth .field-affix { position: relative; } .page-auth .field-affix input { padding-right: 44px; } .page-auth .pw-reveal { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: rgba(255, 255, 255, .5); } .page-auth .pw-reveal:hover { color: #FFFFFF; } .page-auth .pw-reveal::before { content: ""; width: 19px; height: 19px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat; } .page-auth .pw-reveal[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A9.9 9.9 0 0 1 12 19c-6.4 0-10-7-10-7a18 18 0 0 1 5.1-5.9m3.2-1A9.9 9.9 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2M9.9 9.9a3 3 0 1 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A9.9 9.9 0 0 1 12 19c-6.4 0-10-7-10-7a18 18 0 0 1 5.1-5.9m3.2-1A9.9 9.9 0 0 1 12 5c6.4 0 10 7 10 7a18 18 0 0 1-2.2 3.2M9.9 9.9a3 3 0 1 0 4.2 4.2'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E"); } /* On-ink primary: white fill on the dark panel, marketing button geometry. */ .page-auth .btn-auth { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 20px; border: 1px solid #FFFFFF; border-radius: var(--r-ctl); background: #FFFFFF; color: var(--carbon); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .16s ease, border-color .16s ease; } .page-auth .btn-auth:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); } .page-auth .btn-auth:disabled { opacity: .6; cursor: default; } .page-auth .btn-auth-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-ctl); background: transparent; color: #FFFFFF; font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; text-decoration: none; } .page-auth .btn-auth-ghost:hover { background: rgba(255, 255, 255, .08); text-decoration: none; } .page-auth a.btn-auth { text-decoration: none; } .page-auth .spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: authspin .7s linear infinite; display: inline-block; flex: none; } @keyframes authspin { to { transform: rotate(360deg); } } /* Messages */ .page-auth .auth-msg { display: none; border-radius: var(--r-ctl); padding: 12px; font-size: 13px; line-height: 1.5; margin: 0 0 14px; } .page-auth .auth-msg.show { display: block; } .page-auth .auth-msg.err { background: rgba(180, 66, 63, .16); border: 1px solid rgba(222, 147, 146, .34); color: #F0A9A8; } .page-auth .auth-msg.ok { background: rgba(82, 161, 133, .16); border: 1px solid rgba(82, 161, 133, .34); color: #8FD3BA; } /* Secondary copy */ .page-auth .auth-alt { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .55); margin: 16px 0 0; } .page-auth .consent { text-align: center; font-size: 14px; color: rgba(255, 255, 255, .55); line-height: 1.55; margin: 14px 0 0; } .page-auth .auth-alt a, .page-auth .consent a { color: #FFFFFF; font-weight: 500; } .page-auth .auth-state { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .72); } .page-auth .auth-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; } .page-auth .auth-actions .btn-auth { width: auto; height: 44px; } /* The site focus law on a dark ground: the ring is white here. */ .page-auth :focus-visible { outline-color: #FFFFFF; } /* ---- responsive: the closed set, not m.css's twelve ---- */ @media (max-width: 1024px) { .page-auth .auth-shell { grid-template-columns: 1fr; min-height: 100dvh; } .page-auth .auth-aside { padding: 44px var(--s5) 40px; } .page-auth .auth-aside-in { max-width: 520px; } .page-auth .auth-pitch { font-size: 30px; } .page-auth .auth-main { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); } } @media (max-width: 480px) { .page-auth .auth-aside { padding: 36px var(--s5) 32px; } .page-auth .auth-pitch { font-size: 27px; } .page-auth .auth-main { padding: var(--s7) var(--s5) 150px; } /* banner clearance under the submit row */ } /* css/pages/compare-dark.css */ /* marketing/css/pages/compare-dark.css - the COMPARE family, dark (the hub and the six rival pages, held * until the site's one cutover). Every page keeps its markup and copy; marketing/css/theme-dark.css skins * the base vocabulary and this sheet holds only the family's own devices: the identity pills, the byline, * the short-version card and the three-column comparison table with its phone stack. Keyed on the family * class compare-dark. Values are the recipes' (docs/UI_PATTERN_CATALOG.md 2.16). Laws kept: weights * 400/500 only; breakpoints 1180/1024/768/480 only; no forced overrides; radii 0 and 2 on the site. */ /* the hub: the rival cards pin their read link to the foot */ .compare-dark .cmp-card { display: flex; flex-direction: column; } .compare-dark .cmp-card .h3-block { margin-top: 12px; font-size: 22px; letter-spacing: -0.02em; } .compare-dark .cmp-card p { margin-top: 10px; } .compare-dark .cmp-card .btn-text { margin-top: auto; padding-top: 18px; align-self: flex-start; } .compare-dark .grid-3 h2 + p { margin-top: 10px; } /* the hero pills: ours in the blue, the rival on a hairline; the separator muted */ .compare-dark .vs-pills { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; } .compare-dark .vs-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--dk-line-strong); border-radius: 2px; background: transparent; font: 500 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-grey); } .compare-dark .vs-pill.is-us { border-color: rgba(85, 168, 255, 0.5); color: var(--dk-blue); } .compare-dark .vs-sep { font: 500 12px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dk-muted); } .compare-dark .byline { font-size: 13px; color: var(--dk-muted); margin: 0; } /* the short version: three paragraphs in one glass module, the first leading */ .compare-dark .tldr { display: grid; gap: 14px; } .compare-dark .tldr .sec-label { margin: 0; } .compare-dark .tldr p { margin: 0; max-width: 72ch; color: var(--dk-grey); } .compare-dark .tldr p:first-of-type { font-size: 20px; letter-spacing: -0.01em; line-height: 1.45; color: var(--dk-text); } .compare-dark .demo-cta { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } /* the three-column table: hairlines, our column carries the weight and a faint ground */ .compare-dark .cmp-wrap { overflow-x: auto; border: 1px solid var(--dk-line-soft); background: transparent; } .compare-dark .cmp { min-width: 780px; width: 100%; border-collapse: collapse; font-size: 13.5px; } .compare-dark .cmp thead th { padding: 14px 20px; text-align: left; font: 500 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid var(--dk-line); } .compare-dark .cmp thead th.us { color: var(--dk-text); background: rgba(255, 255, 255, 0.05); } .compare-dark .cmp tbody th, .compare-dark .cmp tbody td { padding: 16px 20px; border-top: 1px solid var(--dk-line-soft); vertical-align: top; text-align: left; line-height: 1.55; } .compare-dark .cmp tbody th { width: 22%; font: 500 12px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dk-muted); } .compare-dark .cmp tbody td { width: 39%; color: var(--dk-grey); } .compare-dark .cmp tbody td.us { color: var(--dk-text); font-weight: 500; background: rgba(255, 255, 255, 0.025); } .compare-dark .cmp-note { margin-top: 18px; max-width: 76ch; } @media (max-width: 768px) { /* the table becomes a stack of row cards, each cell labelled from data-col */ .compare-dark .cmp-wrap { overflow-x: visible; border: 0; } .compare-dark .cmp { min-width: 0; display: block; } .compare-dark .cmp thead { display: none; } .compare-dark .cmp tbody { display: block; } .compare-dark .cmp tbody tr { display: block; border: 1px solid var(--dk-line-strong); background: var(--dk-glass); padding: 16px; } .compare-dark .cmp tbody tr + tr { margin-top: 12px; } .compare-dark .cmp tbody th, .compare-dark .cmp tbody td { display: block; width: auto; padding: 0; border-top: 0; } .compare-dark .cmp tbody td { margin-top: 12px; } .compare-dark .cmp tbody td.us { background: transparent; } .compare-dark .cmp tbody td::before { content: attr(data-col); display: block; margin-bottom: 2px; font: 500 10px var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dk-muted); } .compare-dark .tldr p:first-of-type { font-size: 17px; } .compare-dark .vs-pills { flex-wrap: wrap; } } /* css/pages/compare.css */ /* The compare group (P1 §P-12/13/14): the /compare hub (.page-compare) and BOTH comparison * children (.page-vs). One stylesheet because the three pages are one template family — the * children are identical templates with different rivals, and splitting three near-empty files * across them would put the shared table rules in whichever child happened to ship first. * * Every component here composes base.css. What is genuinely new: the "X vs Y" hero pills and the * three-column comparison table, which has no base equivalent (.spec is a two-column spec sheet). */ /* ------------------------------------------------------------------ /compare (hub) */ /* The hub hero carries no visual, so a full 96px foot on top of the next band's padding reads as * a hole rather than air — same 64 + 96 correction the about page makes. */ .page-compare .band-hero { padding-bottom: var(--s8); } .page-compare .band-hero .sub-hero { margin-top: var(--s5); } .page-compare .grid-3 h2 + p { margin-top: var(--s3); } /* Rival cards: the calibration chip sits above the name, and the read link is pinned to the * bottom edge so two cards of unequal copy length still line their CTAs up. */ .page-compare .cmp-card { display: flex; flex-direction: column; } .page-compare .cmp-card .h3-block { margin-top: var(--s4); } .page-compare .cmp-card p { margin-top: var(--s3); } .page-compare .cmp-card .btn-text { margin-top: auto; padding-top: var(--s5); align-self: flex-start; } .page-compare .row-split { align-items: start; } /* --------------------------------------------------- /compare/* (both child pages) */ /* Hero identity pills. Deliberately NOT rounded-full: the pill is Searchable's signature * geometry (P2 §5), so these take the control radius from our own scale. No rival logos — * we hold no licence to reproduce another company's mark, and the names carry it fine. */ .page-vs .vs-pills { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); } .page-vs .vs-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--dust); border-radius: var(--r-ctl); background: var(--panel); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--iron); } /* Our own pill in the rival strip, on all six comparison pages: 12px in --accent was 2.35:1. Border and ground stay --accent; only the label moves to the accessible blue (COL-01). */ .page-vs .vs-pill.is-us { border-color: var(--accent-tint-border); background: var(--accent-soft); color: var(--accent-ink-hover); } .page-vs .vs-sep { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); } .page-vs .band-hero .sub-hero { margin-top: var(--s5); } .page-vs .band-hero .cta-row { margin-top: var(--s6); } .page-vs .byline { margin-top: var(--s5); } /* TL;DR card: three sentences, three paragraphs, first one leading. */ .page-vs .tldr p { max-width: var(--measure-read); } .page-vs .tldr p + p { margin-top: var(--s4); } .page-vs .tldr p:first-of-type { font-size: 20px; letter-spacing: -0.01em; line-height: 1.45; } .page-vs .grid-3 .eyebrow { margin-bottom: var(--s3); } .page-vs .grid-3 .h4 + p { margin-top: var(--s3); } .page-vs .demo-cta { margin-top: var(--s5); } .page-vs .row-split { align-items: start; } .page-vs .cmp-note { margin-top: var(--s4); max-width: var(--measure-hero); } /* ------------------------------------------------- the three-column comparison table */ /* Wide content scrolls inside its own container, never the page. The affordance is the native * scrollbar and the visibly cut column: a fade edge would be a gradient, which is banned in * public CSS outside the marketing shell. Below 768 the table stops being a table (see below), * so the scroll only ever exists on tablet-and-up. */ .page-vs .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); } .page-vs .cmp { min-width: 780px; font-size: 15px; } .page-vs .cmp thead th { background: var(--ink); color: var(--on-ink-text); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; padding: 14px 20px; } .page-vs .cmp thead th:not(.us):not(:first-child) { color: var(--on-ink-body); } .page-vs .cmp tbody th, .page-vs .cmp tbody td { padding: 18px 20px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; } .page-vs .cmp tbody th { width: 22%; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); } .page-vs .cmp tbody td { width: 39%; color: var(--iron); } /* Our column is the read-first one: full ink, medium weight. The rival column stays iron. No * colour is spent here — cobalt marks CTAs, links, key stats and numerals, not table columns. */ .page-vs .cmp tbody td.us { color: var(--ink); font-weight: 500; background: var(--band-tint); } .page-vs .cmp thead th.us { background: var(--carbon); } @media (max-width: 768px) { /* The table becomes a stack of row cards. A 3-column comparison at 375px is unreadable sideways, and the row label plus two labelled cells is the same information vertically. */ .page-vs .cmp-wrap { overflow-x: visible; border: 0; border-radius: 0; background: transparent; } .page-vs .cmp { min-width: 0; display: block; } .page-vs .cmp thead { display: none; } .page-vs .cmp tbody { display: block; } .page-vs .cmp tbody tr { display: block; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); padding: var(--s4); } .page-vs .cmp tbody tr + tr { margin-top: var(--s3); } .page-vs .cmp tbody th, .page-vs .cmp tbody td { display: block; width: auto; padding: 0; border-top: 0; } .page-vs .cmp tbody td { margin-top: var(--s3); } .page-vs .cmp tbody td.us { background: transparent; } .page-vs .cmp tbody td::before { content: attr(data-col); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); } .page-vs .tldr p:first-of-type { font-size: 17px; } .page-vs .vs-pills { flex-wrap: wrap; } } /* css/pages/docs-new.css */ /* marketing/css/pages/docs-new.css - /docs, LIGHT in the new style (George, 2026-09-06: "docs pages stay * light theme but in the new style"), held until the site's one cutover. The page keeps its markup and * copy and the light system's colours (base.css tokens); what changes is the geometry the site now * uses everywhere: the 1120 column with its two rules, square corners (A3: site 0, controls 2), * hairlines instead of tinted fills, the statement type roles, and the new nav (navStyle: new). * Scoped under .page-docs-new; the light docs.css keyed on .page-docs stays for the live page until * cutover, when it retires. Laws kept: weights 400/500/600; breakpoints 1180/1024/768/480; no forced * overrides. Text blue is --accent-ink (COL-01), never --accent. */ :root:has(.page-docs-new) { --container: 1120px; } .page-docs-new .wrap-wide { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } /* the hero: a statement, no eyebrow */ .page-docs-new .doc-hero { padding: 96px 0 8px; } .page-docs-new .doc-hero .eyebrow { display: none; } .page-docs-new .doc-hero h1 { font-size: 46px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; margin: 0 0 16px; color: var(--ink); max-width: 22ch; } .page-docs-new .doc-hero .lead { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 60ch; margin: 0; } /* the shell: the side nav on a hairline, the reading column capped at a measure */ .page-docs-new .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding: 48px var(--gutter) 120px; } /* the gutter stays: this rule beats .wrap-wide on the same element */ .page-docs-new .side { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; font-size: 14px; padding: 0 0 20px; border-left: 1px solid var(--line); } .page-docs-new .side h6 { font: 500 12px/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin: 22px 0 6px 14px; } .page-docs-new .side h6:first-child { margin-top: 0; } .page-docs-new .side a { display: block; padding: 6px 14px; margin-left: -1px; color: var(--muted); border-left: 2px solid transparent; border-radius: 0; line-height: 1.45; } .page-docs-new .side a:hover { color: var(--ink); text-decoration: none; } .page-docs-new .side a.on { color: var(--ink); border-left-color: var(--ink); background: transparent; font-weight: 500; } .page-docs-new .side a.sub { padding-left: 28px; font-size: 13px; } .page-docs-new .doc { max-width: 72ch; min-width: 0; } .page-docs-new .doc h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.022em; line-height: 1.2; margin: 72px 0 12px; padding-top: 26px; border-top: 1px solid var(--line); scroll-margin-top: 88px; color: var(--ink); } .page-docs-new .doc section:first-child h2 { margin-top: 0; border-top: 0; padding-top: 0; } .page-docs-new .doc h3 { font-size: 18px; font-weight: 500; margin: 36px 0 8px; scroll-margin-top: 88px; color: var(--ink); } .page-docs-new .doc h4 { font-size: 15px; font-weight: 500; margin: 26px 0 6px; } .page-docs-new .doc p { margin: 0 0 12px; font-size: 15px; line-height: 1.68; color: var(--muted); } .page-docs-new .doc p b, .page-docs-new .doc li b { color: var(--ink); font-weight: 500; } .page-docs-new .doc ul { list-style: disc; padding-left: 24px; margin: 0 0 14px; font-size: 15px; line-height: 1.68; color: var(--muted); } .page-docs-new .doc ol:not(.pubsteps) { list-style: decimal; padding-left: 24px; margin: 0 0 14px; font-size: 15px; line-height: 1.68; color: var(--muted); } .page-docs-new .doc li:not(.pubsteps > li) { margin: 4px 0; padding-left: 2px; } .page-docs-new .doc .sub { color: var(--muted); } .page-docs-new .doc a:not(.btn) { color: var(--accent-ink); font-weight: 500; } /* code: square, hairline, on paper */ .page-docs-new .doc pre { background: var(--paper); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; overflow-x: auto; font: 12.5px/1.7 var(--code); color: var(--ink); margin: 12px 0 18px; max-width: 100%; } .page-docs-new .doc code { font-family: var(--code); font-size: 0.9em; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 1px 6px; } .page-docs-new .doc pre code { background: none; border: 0; padding: 0; font-size: inherit; } .page-docs-new .doc p code, .page-docs-new .doc li code, .page-docs-new .doc td code { overflow-wrap: anywhere; word-break: break-word; white-space: normal; } /* tables: the hairline table */ .page-docs-new .doc .tw { overflow-x: auto; margin: 10px 0 18px; border: 1px solid var(--line); } .page-docs-new .doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .page-docs-new .doc th { text-align: left; font: 500 11px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--steel); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .page-docs-new .doc td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); line-height: 1.55; } .page-docs-new .doc td:first-child { font-family: var(--code); font-size: 12.5px; color: var(--ink); max-width: 380px; overflow-wrap: anywhere; } /* notes and steps: hairline panels, square counters */ .page-docs-new .doc .note { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0; padding: 12px 16px; font-size: 14px; line-height: 1.6; margin: 16px 0; color: var(--muted); } .page-docs-new .doc .note b { color: var(--ink); } .page-docs-new .doc .note a:not(.btn) { color: var(--accent-ink); } .page-docs-new .pubsteps { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 8px; } .page-docs-new .pubsteps > li { counter-increment: s; position: relative; padding: 2px 0 18px 46px; min-height: 30px; font-size: 15px; line-height: 1.65; color: var(--muted); } .page-docs-new .pubsteps > li:last-child { padding-bottom: 0; } .page-docs-new .pubsteps > li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font-weight: 500; display: grid; place-items: center; font-size: 14px; } /* endpoint rows: the method as a hairline chip, the path in the mono face, the auth as a square tag */ .page-docs-new .ep { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 0 8px; scroll-margin-top: 88px; } .page-docs-new .ep .vm { font: 600 11px/1 var(--code); letter-spacing: 0.05em; padding: 5px 8px; border-radius: 2px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); align-self: center; } .page-docs-new .ep code { font: 600 14px var(--code); background: none; border: 0; padding: 0; word-break: break-all; color: var(--ink); } .page-docs-new .ep .auth { font-size: 11.5px; color: var(--steel); border: 1px solid var(--line); padding: 3px 10px; border-radius: 2px; white-space: nowrap; align-self: center; } .page-docs-new .dlrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; } .page-docs-new .dlrow .btn { border-radius: 2px; } .page-docs-new .muted-s { color: var(--muted); font-size: 13.5px; } @media (max-width: 1024px) { .page-docs-new .shell { grid-template-columns: 1fr; gap: 26px; } .page-docs-new .side { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 8px; background: transparent; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 0; padding: 14px; } .page-docs-new .side h6 { display: none; } .page-docs-new .side a, .page-docs-new .side a.on { border: 1px solid var(--line); border-radius: 2px; padding: 6px 13px; font-size: 13px; margin: 0; } .page-docs-new .side a.on { border-color: var(--ink); } .page-docs-new .side a.sub { display: none; } } @media (max-width: 768px) { .page-docs-new .doc-hero { padding-top: 64px; } .page-docs-new .doc-hero h1 { font-size: 34px; } } @media (max-width: 620px) { .page-docs-new .doc table { display: block; width: 100%; max-width: 100%; overflow-x: auto; } .page-docs-new .doc td:first-child { max-width: none; } } /* css/pages/docs.css */ /* /docs — lifted out of the inline