/* SectorSight design system. Ground: near-black, the way Linear's site is built. Elevation comes from surfaces separating by a few percent of luminance and from hairline borders, never from shadow. Typography carries the hierarchy: tight tracking, medium weights rather than bold, generous line-height in prose and tight in UI. Accent: gold. The Sector family shares one accent so the products read as one house, and gold on true black is the most legible warm accent available. Azure stays informational only. */ @font-face { font-family: "Inter"; src: url("fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Registered custom properties. A plain custom property is a string as far as the engine is concerned, so a gradient built from one snaps between themes while everything around it fades. Registering these as makes them interpolatable, which is what lets the hero glow animate with the rest of the page. Engines without @property still get the correct colors, just an instant swap. */ @property --glow-warm { syntax: ""; inherits: true; initial-value: rgba(228, 185, 91, .10); } @property --glow-cool { syntax: ""; inherits: true; initial-value: rgba(120, 150, 200, .07); } /* THEMES Dark is the default and lives on :root. Light is an override block keyed to [data-theme="light"], which an inline script in sets before first paint from localStorage or prefers-color-scheme, so there is no flash. Four tokens exist purely so the two themes can share one stylesheet: --edge-light the 1px sheen on top of cards. White on dark, black on light. --gold-text gold used AS TEXT. #E4B95B is unreadable on white, so light mode substitutes a darker gold. --gold itself never changes, because it is a BUTTON BACKGROUND and must stay bright in both themes for the dark button text to work. --nav-bg the translucent sticky-nav fill. --logo-ring the dormant ring in the logo mark, set on the inline SVG. Anything that hardcodes a color instead of using these will look wrong in exactly one theme, which is the failure mode this structure prevents. */ :root { color-scheme: dark; /* Grounds. #08090A is the page; each step up is a few percent, so surfaces read as elevation rather than as separate colors. */ --bg: #08090A; --bg-2: #0B0C0E; --surface: #101113; --surface-2: #151719; --surface-3: #1C1E21; /* Text. Near-white primary, a cool grey secondary, then two steps down. Body text never sits at full white; that is what makes headings read. Greys were lifted a step 2026-07-27 (owner: "easier to read on dark"); the ladder ink > body > muted > faint is preserved. */ --ink: #F7F8F8; --body: #D2D6DC; --muted: #9BA1AB; /* --faint was #5E6369, which measured 3.29:1 on --bg and failed WCAG AA (4.5:1) everywhere it carried text: the hero note, feed timestamps, table headers, the "/ month" on every price, and the footer. It is used for text in 34 places, so this was systemic rather than cosmetic. Raised from #7C818A (5.09:1) to #878D97 (~6:1 on --bg) in the 2026-07-27 lift. */ --faint: #878D97; /* Lines do the structural work. Solid values (not alpha) so they composite identically over every surface step. */ --line: #1A1C1F; --line-2: #232629; --line-3: #2E3236; /* Accents. Gold is the action color, azure the informational one. */ --gold: #E4B95B; --gold-dim: #B8933F; --gold-wash: rgba(228, 185, 91, .09); --gold-wash-strong: rgba(228, 185, 91, .28); --azure: #8FB0D8; --azure-dim: #5B87B8; /* Semantic, kept separate from brand accents. */ --pos: #56C08A; --neg: #E0796E; --warn: #E4B95B; /* Theme-dependent, see the THEMES note above. */ --edge-light: rgba(255, 255, 255, .16); --gold-text: var(--gold); --nav-bg: rgba(8, 9, 10, .72); --logo-ring: #2E3236; --glow-warm: rgba(228, 185, 91, .10); --glow-cool: rgba(120, 150, 200, .07); --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mono: "Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace; --r-sm: 5px; --r: 8px; --r-lg: 12px; --maxw: 1100px; } /* ---------- light theme ---------- Text values are calibrated the same way the dark ones were, against the lightest ground they sit on (#FCFCFD). On near-white, anything lighter than about #757575 fails WCAG AA at body size, so --faint is #6B7078 (4.86:1) and every step above it is darker. --gold-text drops to #8A6A15 because #E4B95B measures about 1.7:1 on white. */ :root[data-theme="light"] { color-scheme: light; --bg: #FCFCFD; --bg-2: #F6F7F9; --surface: #FFFFFF; --surface-2: #F4F5F7; --surface-3: #E9EBEF; --ink: #0C0D0F; --body: #33383F; --muted: #4E535A; --faint: #6B7078; --line: #E7E9ED; --line-2: #DDE0E5; --line-3: #C9CDD4; --gold-dim: #A8842F; --gold-wash: rgba(228, 185, 91, .16); --gold-wash-strong: rgba(228, 185, 91, .42); --azure: #2E5C8F; --azure-dim: #4B7BAE; --pos: #1F7A4D; --neg: #B03A2E; --warn: #8A6A15; --edge-light: rgba(0, 0, 0, .07); --gold-text: #8A6A15; --nav-bg: rgba(252, 252, 253, .78); --logo-ring: #CDD2D8; /* Glows need more alpha on white than on black to register at all, and the cool one fades out: over a light ground it reads as a grey smudge. It is transparent WHITE rather than the `transparent` keyword, which resolves to transparent black and would drag the interpolation through grey. */ --glow-warm: rgba(228, 185, 91, .26); --glow-cool: rgba(255, 255, 255, 0); } *, *::before, *::after { box-sizing: border-box; } /* THEME CROSSFADE Gated behind a class the toggle adds and then removes, rather than living permanently on `*`. An always-on global color transition would also animate every hover (which already has its own 130ms curve, so they would fight) and would make large repaints during scroll noticeably heavier. The head script sets the theme before first paint and never adds this class, so a fresh load is instant rather than fading in from the wrong theme. TEXT IS DELIBERATELY NOT TRANSITIONED. Animating `color` alongside `background-color` looks broken, because the two endpoints swap: body text runs #C9CDD3 -> #33383F while the ground runs #08090A -> #FCFCFD, so at the halfway point BOTH sit on mid-grey and the text measures about 1.03:1 against its own background. It vanishes, then reappears at the end, which reads as the text changing color late rather than as a fade. No easing fixes that: whichever of the two leads, the other is briefly the same value. Snapping text to its final color instead makes contrast MONOTONIC. Dark to light starts at about 1.7:1 and climbs to 18:1 with no dip, and the low end lasts only as long as the ground takes to brighten, which is why the duration is 280ms rather than 420ms. The glows keep animating; they sit behind content and have nothing to collide with. */ :root.theme-fade, :root.theme-fade *, :root.theme-fade *::before, :root.theme-fade *::after { transition: background-color .28s cubic-bezier(.3, 0, .2, 1), border-color .28s cubic-bezier(.3, 0, .2, 1), fill .28s cubic-bezier(.3, 0, .2, 1), stroke .28s cubic-bezier(.3, 0, .2, 1), --glow-warm .28s cubic-bezier(.3, 0, .2, 1), --glow-cool .28s cubic-bezier(.3, 0, .2, 1) !important; } /* 106.25% = 17px against the 16px browser default. Every rem in the system scales up ~6% with it, which is the "a bit larger" lever: one value, whole surface. A percentage rather than px so a visitor's browser-level font preference still compounds. */ html { -webkit-text-size-adjust: 100%; font-size: 106.25%; } body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Medium weight, tight tracking. Scale is allowed on the marketing hero and nowhere else. */ h1, h2, h3, h4 { color: var(--ink); font-weight: 538; letter-spacing: -.022em; line-height: 1.16; text-wrap: balance; margin: 0; } p { margin: 0; } a { color: var(--body); text-decoration: none; transition: color .13s ease; } a:hover { color: var(--ink); } :focus-visible { outline: 1.5px solid var(--gold); outline-offset: 2px; border-radius: 3px; } img, svg { max-width: 100%; } button { font-family: inherit; } ::selection { background: var(--gold-wash-strong); color: var(--ink); } /* ---------- primitives ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--gold-text); } .lede { font-size: 1.02rem; color: var(--muted); max-width: 62ch; letter-spacing: -.006em; } .muted { color: var(--muted); } .tnum { font-variant-numeric: tabular-nums; } .scroll-x { overflow-x: auto; } /* Buttons. Compact, 8px radius, no shadow, borders carrying the definition. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: .875rem; font-weight: 510; letter-spacing: -.008em; padding: 0 15px; height: 36px; border-radius: var(--r); border: 1px solid transparent; cursor: pointer; transition: background .13s ease, border-color .13s ease, color .13s ease; white-space: nowrap; } .btn-primary { background: var(--gold); color: #17130A; border-color: var(--gold); } .btn-primary:hover { background: #EFC974; color: #17130A; } .btn-ghost { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-3); border-color: var(--line-3); } .btn-lg { height: 44px; padding: 0 22px; font-size: .93rem; } /* Theme toggle. Shared by the landing nav and the hub topbar, so it lives here rather than in either page's stylesheet. Icon-only and square, sized to sit beside the compact 30-32px buttons in both bars. */ .theme-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); cursor: pointer; flex: none; transition: background .13s ease, border-color .13s ease, color .13s ease; } .theme-toggle:hover { background: var(--surface-3); border-color: var(--line-3); color: var(--ink); } .theme-toggle svg { width: 15px; height: 15px; display: block; } /* Exactly one icon shows per theme: the one for the theme you would switch TO. Dark shows the sun, light shows the moon. */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Keyboard chip: a signature Linear device, used where a shortcut exists. */ .kbd { font-family: var(--mono); font-size: .68rem; color: var(--faint); background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; line-height: 1.5; } /* Citation chip: the product's trust device. */ .cite { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 1px 7px; white-space: nowrap; background: var(--surface); transition: border-color .13s ease, color .13s ease; } .cite:hover { color: var(--ink); border-color: var(--line-3); } .cite::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--azure-dim); flex: none; } /* Signal tag */ .tag { font-size: .7rem; font-weight: 500; padding: 1px 8px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; background: var(--surface); } .tag-pricing { color: var(--gold-text); border-color: rgba(228,185,91,.34); } .tag-launch { color: var(--pos); border-color: rgba(86,192,138,.30); } .tag-funding { color: var(--azure); border-color: rgba(143,176,216,.30); } .tag-people { color: var(--body); } .tag-critical { color: var(--neg); border-color: rgba(224,121,110,.34); } /* ---------- brand lockup ---------- The mark is an aperture: a ring with one sector lit gold and a focused center. Sector, and sight. It is drawn from solid geometry rather than thin strokes so it survives at 20px and in a favicon. No tile behind it; the glyph stands on the ground the way Linear's does. */ .logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .95rem; font-weight: 560; letter-spacing: -.019em; } .logo:hover { color: var(--ink); } .logo-mark { width: 22px; height: 22px; display: block; flex: none; } /* The lit sector eases forward on hover of the whole lockup. */ .logo-mark .lit { transition: opacity .18s ease; } .logo:hover .lit { opacity: .82; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }