/* Tiny Ipsum — tinyipsum.com Fonts: Space Grotesk (display) · IBM Plex Sans (body) · JetBrains Mono (meta) */ :root { /* Auto by default: light-dark() follows the OS. The footer picker sets data-theme on , which overrides color-scheme and therefore every light-dark() below. See the two rules after this block. Each color is declared TWICE on purpose: the bare light value first, as a fallback for browsers without light-dark(), then the themed pair. If you change one, change both. Non-color values (sizes, fonts) need no pair. */ color-scheme: light dark; /* page */ --bg: #efe9f4; --bg: light-dark(#efe9f4, #15111e); --bg-glow: #f8f4fb; --bg-glow: light-dark(#f8f4fb, #241c33); --surface: #fff; --surface: light-dark(#fff, #241c33); /* text */ --ink: #1d1527; --ink: light-dark(#1d1527, #f1ecf7); --ink-soft: #5d5468; --ink-soft: light-dark(#5d5468, #bdb4cc); --ink-mute: #6b6178; --ink-mute: light-dark(#6b6178, #a29ab0); --ink-faint: #8a8098; --ink-faint: light-dark(#8a8098, #8b8399); /* brand — the CTA gradient. Constant across themes: it's a saturated surface with white text, so page background never affects its contrast. */ --indigo: #6249e6; --violet: #8149c9; --magenta: #b34a91; /* accents that sit ON the page, so these must flip */ --accent-ink: #8f3f78; --accent-ink: light-dark(#8f3f78, #f2aad4); --wordmark-accent: #8149c9; --wordmark-accent: light-dark(#8149c9, #bb8ff0); --focus: #6249e6; --focus: light-dark(#6249e6, #9d8cff); /* links */ --link: #6f4aa8; --link: light-dark(#6f4aa8, #c9adf5); --link-hover: #8149c9; --link-hover: light-dark(#8149c9, #ddc6ff); --link-rule: rgba(111, 74, 168, 0.35); --link-rule: light-dark(rgba(111, 74, 168, 0.35), rgba(201, 173, 245, 0.45)); --link-rule-hover: rgba(129, 73, 201, 0.8); --link-rule-hover: light-dark(rgba(129, 73, 201, 0.8), rgba(221, 198, 255, 0.85)); /* cards & panels — gradients are composed from paired color tokens */ --card-1: #fdfbfe; --card-1: light-dark(#fdfbfe, #221c30); --card-2: #f0eaf7; --card-2: light-dark(#f0eaf7, #1b1626); --card-soft-1: #f9f6fc; --card-soft-1: light-dark(#f9f6fc, #1f1a2c); --card-soft-2: #eee7f5; --card-soft-2: light-dark(#eee7f5, #191423); --highlight-1: #efe4fb; --highlight-1: light-dark(#efe4fb, #2b2040); --highlight-2: #f7e2f0; --highlight-2: light-dark(#f7e2f0, #34213c); --panel-1: #e8e0f2; --panel-1: light-dark(#e8e0f2, #1e1830); --panel-2: #ddd2ec; --panel-2: light-dark(#ddd2ec, #191327); --panel-ink: #4f4560; --panel-ink: light-dark(#4f4560, #c3b9d1); --card: linear-gradient(180deg, var(--card-1), var(--card-2)); --card-soft: linear-gradient(180deg, var(--card-soft-1), var(--card-soft-2)); --highlight: linear-gradient(160deg, var(--highlight-1), var(--highlight-2)); --panel: linear-gradient(180deg, var(--panel-1), var(--panel-2)); /* hairlines, rings, chips */ --hairline: rgba(120, 90, 160, 0.14); --hairline: light-dark(rgba(120, 90, 160, 0.14), rgba(200, 170, 240, 0.16)); --shot-ring: rgba(120, 90, 160, 0.18); --shot-ring: light-dark(rgba(120, 90, 160, 0.18), rgba(200, 170, 240, 0.2)); --highlight-ring: rgba(170, 90, 150, 0.2); --highlight-ring: light-dark(rgba(170, 90, 150, 0.2), rgba(235, 146, 200, 0.22)); --highlight-shot-ring: rgba(170, 90, 150, 0.24); --highlight-shot-ring: light-dark(rgba(170, 90, 150, 0.24), rgba(235, 146, 200, 0.26)); --panel-ring: rgba(120, 90, 160, 0.18); --panel-ring: light-dark(rgba(120, 90, 160, 0.18), rgba(200, 170, 240, 0.18)); --footer-rule: rgba(120, 90, 160, 0.2); --footer-rule: light-dark(rgba(120, 90, 160, 0.2), rgba(200, 170, 240, 0.18)); --chip: rgba(255, 255, 255, 0.75); --chip: light-dark(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.09)); --quiet-bg: rgba(255, 255, 255, 0.8); --quiet-bg: light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09)); --quiet-bg-hover: #fff; --quiet-bg-hover: light-dark(#fff, rgba(255, 255, 255, 0.14)); --quiet-bg-active: rgba(255, 255, 255, 0.62); --quiet-bg-active: light-dark(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.06)); /* bullet dots — two stops each */ --dot-indigo-1: #8a75ff; --dot-indigo-1: light-dark(#8a75ff, #9d8cff); --dot-indigo-2: #6249e6; --dot-indigo-2: light-dark(#6249e6, #7a63f0); --dot-violet-1: #a771e8; --dot-violet-1: light-dark(#a771e8, #cba6f5); --dot-violet-2: #8149c9; --dot-violet-2: light-dark(#8149c9, #bb8ff0); --dot-magenta-1: #dd77b8; --dot-magenta-1: light-dark(#dd77b8, #f4a8d3); --dot-magenta-2: #b34a91; --dot-magenta-2: light-dark(#b34a91, #eb92c8); --bullet-magenta-ink: #55465e; --bullet-magenta-ink: light-dark(#55465e, #cfc2da); /* shadows read as depth in light, as glow-less lift in dark */ --icon-shadow: 0 10px 22px -12px rgba(70, 40, 110, 0.45); --icon-shadow: light-dark(0 10px 22px -12px rgba(70, 40, 110, 0.45), 0 10px 22px -12px rgba(0, 0, 0, 0.7)); --cta-shadow: 0 12px 26px -14px rgba(120, 30, 110, 0.6); --cta-shadow: light-dark(0 12px 26px -14px rgba(120, 30, 110, 0.6), 0 12px 26px -14px rgba(0, 0, 0, 0.75)); --hero-shadow: 0 30px 60px -34px rgba(50, 25, 90, 0.55); --hero-shadow: light-dark(0 30px 60px -34px rgba(50, 25, 90, 0.55), 0 30px 60px -34px rgba(0, 0, 0, 0.8)); --shell: 1080px; --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* The picker writes these. Everything themed flows from color-scheme. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; padding: 0 24px; min-height: 100vh; background: radial-gradient(900px 520px at 50% -8%, var(--bg-glow), transparent 70%), var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.028em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img { display: block; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } a { color: var(--link); text-decoration-color: var(--link-rule); text-underline-offset: 3px; } a:hover { color: var(--link-hover); text-decoration-color: var(--link-rule-hover); } .shell { max-width: var(--shell); margin: 0 auto; } .mono { font-family: var(--font-mono); } /* ---------- skip link & page nav ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 12px 20px; border-radius: 0 0 12px 0; background: var(--surface); color: var(--accent-ink); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } .page-nav { padding: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; } /* vertical padding is load-bearing: it takes the links past the 24px minimum target size (WCAG 2.5.8). Don't trade it for margin. */ .page-nav a { padding: 5px 0; } /* ---------- hero ---------- */ .hero { padding: 76px 0 90px; display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center; } .wordmark { display: flex; align-items: center; gap: 16px; } /* On the home page the wordmark is a plain div; everywhere else it links back to /. Reset link styling wherever it is an anchor, not per-page. */ a.wordmark { text-decoration: none; color: inherit; } .wordmark__icon { width: 72px; height: 72px; border-radius: 19px; overflow: hidden; box-shadow: var(--icon-shadow); } /* the source icon has built-in padding; crop it back */ .wordmark__icon img { width: 122%; height: 122%; margin: -11% 0 0 -11%; } .wordmark__text { text-align: left; font-family: var(--font-display); font-weight: 700; font-size: 1.6875rem; line-height: 0.98; letter-spacing: -0.035em; } .wordmark__text span { color: var(--wordmark-accent); } .hero__title { max-width: 880px; font-size: clamp(2.375rem, 5.9vw, 4.125rem); letter-spacing: -0.032em; line-height: 1.04; text-wrap: balance; } .hero__lede { max-width: 600px; font-size: 1.125rem; line-height: 1.66; color: var(--ink-soft); text-wrap: pretty; } .hero__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 17px 34px; border-radius: 999px; background: linear-gradient(100deg, var(--indigo), var(--magenta)); background-size: 160% 100%; color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 700; text-decoration: none; box-shadow: var(--cta-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.28); transition: background-position 260ms ease, transform 120ms ease; } .btn-primary:hover { color: #fff; background-position: 100% 0; transform: translateY(-1px); } .btn-primary:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .btn-primary, .btn-quiet { transition: none; } .btn-primary:hover, .btn-primary:active { transform: none; } } .btn-quiet { width: fit-content; padding: 14px 26px; border-radius: 999px; background: var(--quiet-bg); color: var(--accent-ink); font-family: var(--font-display); font-size: 0.96875rem; font-weight: 700; text-decoration: none; transition: background 130ms ease; } .btn-quiet:hover { background: var(--quiet-bg-hover); color: var(--accent-ink); } .btn-quiet:active { background: var(--quiet-bg-active); } .meta { font-family: var(--font-mono); font-size: 0.78125rem; color: var(--ink-mute); } /* ---------- hero screenshot ---------- A real capture of the panel under the menu bar. The panel is 30.07% of the image width, so 984px here renders it at 296px — its true on-screen size. Keep this max-width if you re-shoot the hero at the same framing. */ .hero__shot { width: 100%; max-width: 984px; height: auto; margin-top: 22px; border-radius: 20px; box-shadow: var(--hero-shadow); } /* ---------- screenshots ---------- Captures are 16:10 (2880x1800). Always give width/height attributes so the box is reserved before the image loads. */ .shot { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--shot-ring); } /* ---------- cards & sections ---------- */ .about { padding: 24px 0 104px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; } .about__card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: 22px; background: var(--card-soft); box-shadow: 0 0 0 1px var(--hairline); } .about__card h2 { font-size: 1.6875rem; } .about__card p { font-size: 1.03125rem; line-height: 1.68; color: var(--ink-soft); text-wrap: pretty; } .features { padding: 0 0 104px; display: flex; flex-direction: column; gap: 34px; } .features > h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); } .features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 26px; } .feature { display: flex; flex-direction: column; gap: 20px; padding: 26px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px var(--hairline); } .feature h3 { font-size: 1.4375rem; } .feature--wide { grid-column: 1 / -1; padding: 30px; } .feature--highlight { grid-column: 1 / -1; padding: 30px; border-radius: 26px; background: var(--highlight); box-shadow: 0 0 0 1px var(--highlight-ring); } .feature--highlight h3 { font-size: 1.6875rem; } .feature--highlight .shot { border-radius: 18px; box-shadow: 0 0 0 1px var(--highlight-shot-ring); } .split { display: flex; flex-wrap: wrap; gap: 30px; } .split > .shot { flex: 1 1 340px; min-width: 0; } .split__heading { display: flex; flex-direction: column; gap: 10px; } .split__copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 18px; justify-content: center; } .eyebrow { width: fit-content; font-family: var(--font-mono); font-size: 0.71875rem; /* 11.5px */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); background: var(--chip); padding: 6px 10px; border-radius: 999px; } .bullets { display: flex; flex-direction: column; gap: 12px; } .bullets li { display: flex; gap: 12px; font-size: 0.96875rem; line-height: 1.62; color: var(--ink-soft); } .bullets li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px; border-radius: 999px; background: linear-gradient(180deg, var(--dot-indigo-1), var(--dot-indigo-2)); } .bullets--violet li::before { background: linear-gradient(180deg, var(--dot-violet-1), var(--dot-violet-2)); } .bullets--magenta li::before { background: linear-gradient(180deg, var(--dot-magenta-1), var(--dot-magenta-2)); } .bullets--magenta li { color: var(--bullet-magenta-ink); } /* ---------- faq ---------- */ .faq { padding: 0 0 104px; display: flex; flex-direction: column; gap: 34px; } .faq > h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); } .faq__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 26px; } .faq__item { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; background: var(--card-soft); box-shadow: 0 0 0 1px var(--hairline); } .faq__item h3 { font-size: 1.1875rem; } .faq__item p { font-size: 1.03125rem; line-height: 1.68; color: var(--ink-soft); text-wrap: pretty; } .privacy { margin-bottom: 104px; padding: 46px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-ring); display: flex; flex-wrap: wrap; gap: 38px; align-items: center; } .privacy h2 { flex: 1 1 280px; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.08; } .privacy__copy { flex: 1 1 420px; display: flex; flex-direction: column; gap: 18px; } .privacy__copy p { font-size: 1.0625rem; line-height: 1.68; color: var(--panel-ink); text-wrap: pretty; } .contact { padding: 0 0 104px; display: flex; flex-direction: column; gap: 18px; } .contact h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); } .contact p { max-width: 620px; font-size: 1.0625rem; line-height: 1.68; color: var(--ink-soft); text-wrap: pretty; } .site-footer { padding: 30px 0 56px; border-top: 1px solid var(--footer-rule); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; } .site-footer nav a { padding: 5px 0; } /* 24px minimum target size — see .page-nav a */ .site-footer p { flex: 1 1 100%; order: 3; } /* ---------- theme picker ---------- Hidden until the inline script adds .js to , so a JS-less visitor never sees a control that can't do anything. Auto is the default and stores nothing; light/dark write localStorage.theme. */ .theme { display: none; } .js .theme { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-family: var(--font-mono); font-size: 0.71875rem; color: var(--ink-mute); accent-color: var(--focus); } .theme__label { text-transform: uppercase; letter-spacing: 0.1em; } .theme label { display: inline-flex; align-items: center; min-height: 24px; gap: 6px; padding: 4px 0; cursor: pointer; } .theme input { margin: 0; } .site-footer p { font-family: var(--font-mono); font-size: 0.71875rem; color: var(--ink-mute); } .site-footer nav a[aria-current="page"] { color: var(--ink-soft); text-decoration: none; } @media (max-width: 640px) { body { padding: 0 18px; } .hero { padding: 52px 0 64px; } .privacy { padding: 30px; } } /* ---------- interior pages (privacy, and any future prose page) ---------- */ .page-head { padding: 46px 0 34px; display: flex; flex-direction: column; gap: 26px; } .page-head h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.06; } .page-head .meta { margin-top: -14px; } /* .prose sits inside a .shell so it aligns with the h1 above it, not centred on its own */ .prose { padding: 0 0 96px; display: flex; flex-direction: column; gap: 30px; max-width: 720px; } .prose h2 { font-size: 1.4375rem; } .prose section { display: flex; flex-direction: column; gap: 12px; } .prose p { font-size: 1.03125rem; line-height: 1.72; color: var(--ink-soft); text-wrap: pretty; }