:root { /* Vercel-ish neutral scale */ --bg: #000; --bg-1: #0a0a0a; --bg-2: #111111; --bg-3: #171717; --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.16); --ink: #ededed; --ink-2: #a1a1a1; --ink-3: #707070; --ink-4: #444; /* ── Blue-tech brand accent ────────────────────────────────────── Raw values live here once, as --site-*. Everything else references them, so there is a single place to retune the brand. #0dcaf0 is the cyan the product already uses (shell tab/sidebar chrome, the survey map and GCP editor), so the site and the app read as one company. 10.7:1 on the black ground — AAA at any size. ---------------------------------------------------------------- */ --site-accent: #0dcaf0; --site-accent-rgb: 13, 202, 240; --site-accent-ink: #00151c; /* text/icons ON an accent fill — 9.5:1. White on this cyan is 2.0:1, so a filled accent button must never use #fff. */ --site-accent-2: #3b82f6; /* the second stop in accent gradients */ --accent: var(--site-accent); --accent-rgb: var(--site-accent-rgb); --accent-ink: var(--site-accent-ink); --accent-2: var(--site-accent-2); --good: #0070f3; /* Vercel blue, used very sparingly */ --good-2: #50e3c2; --maxw: 1200px; --pad: clamp(16px, 2vw, 28px); --r: 10px; } html[data-theme="light"] { --bg: #fff; --bg-1: #fafafa; --bg-2: #f4f4f4; --bg-3: #ededed; --line: rgba(0,0,0,0.09); --line-2: rgba(0,0,0,0.16); --ink: #0a0a0a; --ink-2: #525252; --ink-3: #888; --ink-4: #b3b3b3; /* The dark-mode cyan is only 1.9:1 on white — light mode needs a deeper one. #0e7490 is 5.4:1 on #fff, and white is 5.4:1 on it. */ --site-accent: #0e7490; --site-accent-rgb: 14, 116, 144; --site-accent-ink: #ffffff; } /* ────────────────────────────────────────────────────────────────── SITE-SCOPED ACCENT — why this is on and not on :root ------------------------------------------------------------------ The shared theme pack (skysuite-shell `v1/themes/vercel/theme.css`) is linked AFTER this file and declares --accent on , so it wins over anything we say at :root. That same file is ALSO the app's default theme pack: it maps --accent onto --sky-*, --ds-* and --bs-* for every logged-in page. Repointing the token there would repaint the product, not just the website. So the site claims the accent one level down instead. Custom properties inherit, and a declaration on beats the value inherited from for the entire page subtree — the marketing pages go blue and nothing outside `app/templates/site/` changes. Scoped to the default pack so that a visitor who deliberately picks a different theme from the switcher still gets that theme's accent. ────────────────────────────────────────────────────────────────── */ html[data-theme-pack="vercel"] body.site, html:not([data-theme-pack]) body.site { --accent: var(--site-accent); --accent-rgb: var(--site-accent-rgb); } body.site { --accent-ink: var(--site-accent-ink); --accent-2: var(--site-accent-2); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: "Geist", system-ui, -apple-system, sans-serif; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; overflow-x: hidden; letter-spacing: -0.011em; } /* The shared pack also styles ::selection (white on the accent). One extra type selector outranks it so the tested ink wins instead. */ html body.site ::selection, html body.site::selection { background: var(--accent); color: var(--accent-ink); } /* Visible keyboard focus. The accent doubles as the focus ring; 2px at a 2px offset clears the pill buttons and the card borders. */ body.site :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .mono { font-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } .container--wide { max-width: 1320px; } /* Buttons — pill style, Vercel-ish */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink); background: transparent; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .btn:hover { background: var(--bg-2); border-color: var(--ink-3); } .btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); } .btn--sm { height: 32px; padding: 0 14px; font-size: 13px; } .btn--ghost { border-color: transparent; } /* Accent-filled CTA. Use this instead of hand-rolling `background:var(--accent);color:#fff` — white on the cyan is 2.0:1. */ .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--accent:hover { background: color-mix(in oklab, var(--accent) 84%, var(--ink)); border-color: color-mix(in oklab, var(--accent) 84%, var(--ink)); color: var(--accent-ink); } .btn--ghost:hover { background: var(--bg-2); border-color: var(--line); } .btn .arrow { transition: transform 0.18s ease; } .btn:hover .arrow { transform: translateX(2px); } /* Tag / chip */ .chip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-1); font-size: 12px; color: var(--ink-2); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .chip strong { color: var(--ink); font-weight: 500; } /* Section eyebrow */ .eyebrow { font-size: 13px; color: var(--ink-3); letter-spacing: 0; } .eyebrow strong { color: var(--ink); font-weight: 500; } /* Big crisp display */ .display { font-family: "Geist", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; } /* Card */ .card { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); } .card:hover { border-color: var(--line-2); } /* Inline kbd */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--bg-2); font-family: "Geist Mono", monospace; font-size: 11px; color: var(--ink-2); } /* Hairline rule */ hr.r { border: 0; height: 1px; background: var(--line); margin: 0; } /* gradient text */ .grad { background: linear-gradient(180deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 55%, transparent) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* utility */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; } /* link with underline-on-hover */ .ulink { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color 0.15s ease; } .ulink:hover { border-color: var(--ink); } /* keyframes */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } /* code-ish */ .code { font-family: "Geist Mono", monospace; font-size: 13px; line-height: 1.6; }