@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap'); /* ============================================================================ signal-site.css — the one place the Signal look lives. Source of truth: the Signal design study (design/2026-09-24-new-vision, dark theme: styles.css + theme.css + landing.css + navigation.css). Every page of the site is on it (2026-09-25): no page loads the older stylesheets any more. HOW TO USE IT ------------- 1. A page puts `sg-page` on and links this file first, then art/art.css if it has an art band, signal-read.css if it is a long-form page (the reading layout and the shared long-form parts), and its own page css. `sg-page` turns on the study's base (box-sizing, 15px DM Sans body, Manrope headings, muted paragraphs, inherit-coloured links) and places the site header in the page flow, as the study does. 2. Colours: use the tokens only. Grounds and text are neutral; violet is a small accent (the one primary action per view, focus, selected state, a small eyebrow dot, an italic word). No violet/plum section grounds. 3. Components here are prefixed `sg-`. TOKENS (custom properties on :root) The :root block below is the site's palette, the one source of truth. DESIGN.md documents every hex colour on it, and .tools/tokens.mjs (run by `npm run build`) fails the build if the two disagree, then writes the colours to tokens.json for the dashboard and share pages. Change a colour here and in DESIGN.md's front matter together. --paper #111314 page ground --surface #1b1d20 cards, windows, header sheet --soft #222429 quiet fills, hover, inset panels --ink #eeeee9 text --muted #a6a6ad secondary text, paragraphs --line #343539 hairlines, borders --violet #c2b5fa the accent (see rule 2) --violet-ink #181620 text on a violet fill --tint #2b283a selected state fill (tabs, chips) only --green #acd3b0 success / status --scroll-thumb #5b5d68 / --scroll-hover #8d86a5 scrollbar thumb --sans 'DM Sans' UI and body --display 'Manrope' headings, brand, big numbers --serif Georgia the one italic accent word (h1 em) --radius 15px large panels --radius-md 12px cards/windows --radius-sm 9px buttons, inputs --radius-xs 7px tags, small tiles --shadow 0 20px 60px #0003 --wrap-max 1280px --gutter 48px (30px <=1180px, 19px <=640px) --header-h 78px (72px <=640px) --section-y 92px (53px <=640px) vertical padding of a .sg-section CLASSES Layout .sg-wrap .sg-section (+ .sg-section--flush: no top rule) .sg-section-heading (h2 left, one short p right) .sg-page-hero (h1 + lead for a long-form page top) Type .sg-eyebrow .sg-lead .sg-fine .sg-muted .sg-label Actions .sg-actions .sg-btn .sg-btn--primary (ink fill) .sg-btn--accent (violet fill: the one start per view) .sg-btn--small .sg-text-link (violet, with arrow) Surfaces .sg-card (+ .sg-card--link hover lift) .sg-callout .sg-grid-3 (bordered 3-up cell grid, as "What it does") .sg-steps / .sg-step (01 02 03 workflow) Bits .sg-chip (+ [aria-pressed=true] / .is-selected) .sg-badge (+ .sg-badge--green, .sg-badge--accent) .sg-icon (24-grid stroked line icon, 18px) .sg-illustration (the "Illustration · fictional" label) Plans .sg-plans .sg-plan (+ .is-featured) .sg-plan-price ... Chrome .site-header (shell.jsx Nav) .site-footer (shell.jsx Footer) .sg-skip (the "Skip to content" link; target #main) Focus ring and reduced motion are handled here for everything. ========================================================================== */ :root { --paper: #111314; --surface: #1b1d20; --soft: #222429; --ink: #eeeee9; --muted: #a6a6ad; --line: #343539; --violet: #c2b5fa; --violet-ink: #181620; --tint: #2b283a; --green: #acd3b0; --sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --display: 'Manrope', 'Segoe UI', system-ui, sans-serif; --serif: Georgia, 'Times New Roman', serif; --radius: 15px; --radius-md: 12px; --radius-sm: 9px; --radius-xs: 7px; --shadow: 0 20px 60px #0003; --wrap-max: 1280px; --gutter: 48px; --header-h: 78px; --section-y: 92px; --scroll-thumb: #5b5d68; --scroll-hover: #8d86a5; color-scheme: dark; } @media (max-width: 1180px) { :root { --gutter: 30px; } } @media (max-width: 640px) { :root { --gutter: 19px; --header-h: 72px; --section-y: 53px; } } /* ── Global: every page, ported or not ─────────────────────────────────── */ html { background: var(--paper); } body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; } ::selection { background: #c2b5fa55; color: var(--ink); } :focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; } * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } /* ── Base for pages on the new system (body.sg-page) ───────────────────── */ html:has(body.sg-page) { scroll-behavior: smooth; scroll-padding-top: 24px; } /* :where() keeps these at element weight, so any class (a component, a page rule) overrides them without a fight. */ body.sg-page { margin: 0; font: 15px/1.55 var(--sans); overflow-x: hidden; } :where(.sg-page) *, :where(.sg-page) *::before, :where(.sg-page) *::after { box-sizing: border-box; } :where(.sg-page) a { color: inherit; text-decoration: none; } :where(.sg-page) :is(button, input, textarea, select) { font: inherit; color: inherit; } :where(.sg-page) button { cursor: pointer; } :where(.sg-page) :is(img, video) { max-width: 100%; display: block; } :where(.sg-page) :is(h1, h2, h3, h4, p) { margin-top: 0; } :where(.sg-page) :is(h1, h2, h3, h4) { line-height: 1.13; font-family: var(--display); font-weight: 600; letter-spacing: -.045em; } :where(.sg-page) h1 { font-size: clamp(42px, 6.2vw, 88px); } :where(.sg-page) h2 { font-size: clamp(30px, 3.6vw, 50px); } :where(.sg-page) h3 { font-size: 22px; } :where(.sg-page) p { color: var(--muted); } :where(.sg-page) small { font-size: 12px; } .sg-skip { position: fixed; z-index: 2000; top: -60px; left: 15px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 0 0 var(--radius-xs) var(--radius-xs); font: 550 13px var(--sans); text-decoration: none; } .sg-skip:focus { top: 0; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .sg-wrap { width: min(var(--wrap-max), calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto; } .sg-section { padding: var(--section-y) 0; border-top: 1px solid var(--line); } .sg-section--flush { border-top: 0; } .sg-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 36px; } .sg-section-heading h2 { max-width: 580px; margin-bottom: 0; font-size: 45px; } .sg-section-heading > p { max-width: 350px; margin-bottom: 4px; font-size: 15px; line-height: 1.55; } .sg-page-hero { padding: 70px 0 46px; max-width: 820px; } .sg-page-hero h1 { font-size: clamp(42px, 5vw, 68px); margin-bottom: 22px; } .sg-page-hero > p, .sg-lead { font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--muted); } /* ── Type ───────────────────────────────────────────────────────────────── */ .sg-eyebrow { font: 650 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--ink); } .sg-eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--violet); border-radius: 50%; flex: none; } .sg-fine { font-size: 11px; color: var(--muted); } .sg-muted { color: var(--muted); } .sg-label { font-size: 10px; letter-spacing: .035em; color: var(--muted); } .sg-illustration { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); } .sg-illustration b { font-weight: 600; color: var(--ink); } /* ── Icons ──────────────────────────────────────────────────────────────── */ .sg-icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: inline-block; vertical-align: middle; } /* ── Actions ────────────────────────────────────────────────────────────── */ .sg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .sg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 19px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: 550 14px/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; min-height: 44px; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, border-color .15s; } .sg-btn:hover { transform: translateY(-1px); background: var(--soft); color: var(--ink); } .sg-btn--primary, .sg-btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } .sg-btn--primary:hover { background: #fff; border-color: #fff; } .sg-btn--accent, .sg-btn--accent:hover { background: var(--violet); border-color: var(--violet); color: var(--violet-ink); } .sg-btn--accent:hover { background: #d3c9fb; border-color: #d3c9fb; } .sg-btn--quiet { background: transparent; } .sg-btn--small { padding: 8px 12px; min-height: 36px; font-size: 12px; } .sg-btn .sg-icon { width: 16px; height: 16px; } .sg-text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--violet); font-weight: 550; text-decoration: none; } .sg-text-link:hover { color: #d3c9fb; } .sg-text-link .sg-icon { width: 15px; height: 15px; } /* ── Surfaces ───────────────────────────────────────────────────────────── */ .sg-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; color: var(--ink); } .sg-card h3 { font-size: 19px; margin: 0 0 8px; } .sg-card p { font-size: 13px; line-height: 1.65; } .sg-card--link { display: block; text-decoration: none; transition: transform .2s, border-color .2s; } .sg-card--link:hover { transform: translateY(-3px); border-color: #4a4b52; } .sg-callout { padding: 20px 23px; border: 1px solid var(--line); border-left: 3px solid var(--violet); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 28px 0; font-size: 14px; color: var(--ink); } .sg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); } .sg-grid-3 > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 29px; display: flex; flex-direction: column; align-items: start; } .sg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; } .sg-step { border-top: 1px solid var(--line); padding-top: 20px; } .sg-step-number { font-size: 12px; color: var(--violet); margin-bottom: 30px; } .sg-step h3 { font-size: 24px; } .sg-step p { font-size: 14px; } /* ── Bits ───────────────────────────────────────────────────────────────── */ .sg-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); padding: 8px 15px; border-radius: 25px; font: 500 12px/1.2 var(--sans); min-height: 36px; cursor: pointer; text-decoration: none; } .sg-chip:hover { color: var(--ink); border-color: #4a4b52; } .sg-chip[aria-pressed="true"], .sg-chip.is-selected, .sg-chip[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .sg-badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); padding: 3px 9px; border-radius: 5px; font: 550 11px/1.4 var(--sans); white-space: nowrap; color: var(--ink); } .sg-badge--green { color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); border-color: color-mix(in srgb, var(--green) 20%, transparent); } .sg-badge--accent { color: var(--violet); background: var(--tint); border-color: transparent; } /* ── Plans (pricing cards; the whole card may be the link) ─────────────── */ .sg-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sg-plan { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none; position: relative; transition: border-color .2s, transform .2s; } a.sg-plan:hover { border-color: #55565d; transform: translateY(-2px); } .sg-plan.is-featured { border-color: var(--violet); } .sg-plan-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .sg-plan-name { font: 600 21px/1.13 var(--display); letter-spacing: -.045em; margin: 0; color: var(--ink); } .sg-plan-fit { font-size: 13px; color: var(--muted); margin: 10px 0 0; } .sg-plan-price { font: 650 47px/1.1 var(--display); letter-spacing: -.05em; margin: 20px 0 10px; color: var(--ink); } .sg-plan-price small { font: 400 12px var(--sans); letter-spacing: 0; color: var(--muted); } .sg-plan-story { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; } .sg-plan .sg-btn { width: 100%; } /* Cards share row heights (name, price, story, action, points line up). */ @supports (grid-template-rows: subgrid) { .sg-plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; } .sg-plan-points { align-self: start; } } .sg-plan-points { list-style: none; margin: 25px 0 0; padding: 0; border-top: 1px solid var(--line); } .sg-plan-points li { font-size: 13px; line-height: 1.5; margin: 14px 0; padding-left: 24px; position: relative; color: var(--ink); } .sg-plan-points li::before { content: '\2713'; position: absolute; left: 0; color: var(--violet); } /* ── Site header (shell.jsx Nav) ────────────────────────────────────────── */ .site-header { position: relative; z-index: 60; color: var(--ink); font-family: var(--sans); } .site-header-bar { width: min(var(--wrap-max), calc(100% - 2 * var(--gutter))); margin: 0 auto; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); } .site-header .brand { display: inline-flex; gap: 10px; align-items: center; font: 700 25px/1 var(--display); letter-spacing: -1.4px; color: var(--ink); text-decoration: none; min-height: 44px; flex: none; } .site-header .brand:hover { color: var(--ink); } .brand-mark, .site-header .nav-logo-mark { display: block; width: 32px; height: 32px; background: url('logo-mark.webp?v=m1') center / contain no-repeat; flex-shrink: 0; } .site-nav { display: flex; align-items: center; } .site-nav-list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; } .site-nav-list > li { margin: 0; padding: 0; list-style: none; } .site-nav-list a { color: var(--ink); font: 400 13px/1.3 var(--sans); letter-spacing: 0; text-decoration: none; transition: color .15s; } .site-nav-list a:hover, .site-nav-list a[aria-current="page"], .site-nav-list a.is-active { color: var(--violet); } .site-nav-list .site-nav-extra { display: none; } .header-end { display: flex; gap: 18px; align-items: center; font-size: 13px; flex: none; } .header-login { color: var(--ink); text-decoration: none; font: 400 13px/1.3 var(--sans); } .header-login:hover { color: var(--violet); } .header-start.sg-btn { font-size: 14px; } .site-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; } .site-menu-toggle:hover { background: var(--soft); } .site-menu-toggle svg { width: 20px; height: 20px; display: block; } @media (max-width: 1180px) { .site-nav-list { gap: 18px; } } @media (max-width: 1050px) { .site-header-bar { gap: 20px; } .site-nav-list a { font-size: 11px; } } @media (max-width: 900px) { .site-nav { display: none; } .site-menu-toggle { display: inline-flex; } /* The open menu is an opaque sheet over the whole page and its art. */ .site-header.is-open { z-index: 1000; } .site-header.is-open .site-header-bar { position: fixed; inset: 0; z-index: 1000; width: auto; height: 100vh; height: 100dvh; margin: 0; padding: 0 var(--gutter) 32px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: var(--header-h) auto; align-content: start; column-gap: 12px; background: var(--paper); border-bottom: 0; overflow-y: auto; overscroll-behavior: contain; } .site-header.is-open .brand { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; } .site-header.is-open .header-end { grid-column: 2; grid-row: 1; align-self: center; } .site-header.is-open .site-nav { display: block; grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); padding-top: 8px; } .site-header.is-open .site-nav-list { flex-direction: column; align-items: stretch; gap: 0; } .site-header.is-open .site-nav-list > li > a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 600 20px/1.2 var(--display); letter-spacing: -.03em; } .site-header.is-open .site-nav-list .site-nav-extra { display: block; } .site-header.is-open .site-nav-list .site-nav-extra > a { min-height: 48px; font: 400 15px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); } .site-header.is-open .site-nav-list .site-nav-extra > a:hover { color: var(--violet); } } @media (max-width: 640px) { .site-header-bar { gap: 10px; } .site-header .brand { font-size: 24px; } .header-end { gap: 8px; } .header-login { display: none; } .header-start.sg-btn { padding: 9px 12px; font-size: 11px; min-height: 38px; } .header-start.sg-btn .sg-icon { width: 14px; height: 14px; } } /* ── Site footer (shell.jsx Footer) ─────────────────────────────────────── */ .site-footer { color: var(--ink); font-family: var(--sans); background: var(--paper); } .site-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 35px; padding: 65px 0 35px; } .site-footer .brand { display: inline-flex; gap: 10px; align-items: center; font: 700 25px/1 var(--display); letter-spacing: -1.4px; color: var(--ink); text-decoration: none; } .site-footer-brand p { max-width: 250px; font-size: 12px; line-height: 1.6; margin: 17px 0 14px; color: var(--muted); } .site-footer-brand .sg-text-link { font-size: 12px; } .site-footer h4 { font: 600 12px/1.3 var(--sans); letter-spacing: 0; margin: 4px 0 20px; color: var(--ink); text-transform: none; } .site-footer-col a { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); margin: 11px 0; text-decoration: none; } .site-footer-col a:hover, .site-footer-bottom a:hover { color: var(--violet); } .site-footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 28px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 20px 0 30px; font-size: 11px; line-height: 1.6; color: var(--muted); } .site-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 22px; } .site-footer-bottom a { color: var(--muted); text-decoration: none; } .site-footer-legal { display: flex; flex-direction: column; gap: 2px; } .site-footer-legal a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1050px) { .site-footer-grid { grid-template-columns: 1.2fr repeat(4, 1fr); gap: 25px; } } @media (max-width: 900px) { .site-footer-grid { grid-template-columns: repeat(4, 1fr); } .site-footer-brand { grid-column: 1 / -1; } } @media (max-width: 640px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 25px; padding: 46px 0 25px; } .site-footer h4 { margin-bottom: 12px; } .site-footer-col a { min-height: 32px; margin: 4px 0; display: flex; align-items: center; } .site-footer-bottom { display: block; font-size: 10px; line-height: 2; } .site-footer-bottom nav { gap: 0 15px; margin-bottom: 10px; } .site-footer-bottom nav a { min-height: 32px; display: inline-flex; align-items: center; } } /* ── Layout on phones ───────────────────────────────────────────────────── */ @media (max-width: 900px) { .sg-grid-3 { grid-template-columns: repeat(2, 1fr); } .sg-plans { grid-template-columns: 1fr 1fr; } .sg-plan { padding: 24px; } .sg-plan-price { font-size: 37px; } } @media (max-width: 640px) { .sg-section-heading { display: block; margin-bottom: 27px; } .sg-section-heading h2 { font-size: 34px; margin-bottom: 17px; } .sg-section-heading > p { font-size: 14px; } .sg-page-hero { padding: 45px 0 25px; } .sg-page-hero h1 { font-size: 42px; } .sg-page-hero > p, .sg-lead { font-size: 16px; } .sg-grid-3 { grid-template-columns: 1fr; } .sg-grid-3 > * { padding: 23px; } .sg-steps { grid-template-columns: 1fr; gap: 23px; } .sg-step-number { margin-bottom: 20px; } .sg-step h3 { font-size: 25px; } .sg-plans { grid-template-columns: 1fr; gap: 18px; } .sg-plan { padding: 27px; } .sg-plan-price { font-size: 45px; } .sg-chip { min-height: 44px; } } /* Touch targets: at 768px and below every action is at least 44px tall. The small button keeps its small type and padding; only its height grows. */ @media (max-width: 768px) { .sg-btn--small, .header-start.sg-btn, .sg-chip { min-height: 44px; } } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html, html:has(body.sg-page) { scroll-behavior: auto; } .sg-page *, .sg-page *::before, .sg-page *::after, .site-header *, .site-footer * { transition: none !important; animation: none !important; } .sg-btn:hover, .sg-card--link:hover, a.sg-plan:hover { transform: none; } }