@import url("/argon-color-foundations.css"); /* ========================================================================== Argon content pages. The design system of the landing page (public/lander.html), factored out so the discovery and reference pages render from the same palette, spacing and components rather than a second look-alike theme. Foundations and appearance colors come from argon-color-foundations.css; dark is the default and the `light` class on flips semantic aliases exactly as the app does. The pre-paint script in each page's applies the stored choice, sharing the `argon-landing-theme` key with the landing page so an appearance picked on one page carries to the next. ========================================================================== */ :root { color-scheme: dark; --bg-primary: var(--dark-bg-primary); --bg-secondary: var(--dark-bg-secondary); --bg-elevated: var(--dark-bg-elevated); --text-primary: var(--dark-text-primary); --text-secondary: var(--dark-text-secondary); --text-tertiary: var(--dark-text-tertiary); --success: var(--dark-success); --danger: var(--dark-danger); --accent: var(--palette-argon); --bg-hover: color-mix(in srgb, var(--text-primary) 4%, transparent); --bg-selected: color-mix(in srgb, var(--text-primary) 7%, transparent); --bg-button: color-mix(in srgb, var(--text-primary) 3%, transparent); --todo-row-hover: color-mix(in srgb, var(--text-primary) 2.5%, transparent); --border: color-mix(in srgb, var(--text-primary) 7%, transparent); --border-strong: color-mix(in srgb, var(--text-primary) 12%, transparent); --accent-foreground: var(--bg-secondary); --warning: color-mix(in oklch, var(--success) 50%, var(--danger)); --pending: var(--warning); --danger-secondary: var(--danger); /* The app's AI tone is a violet, deliberately the one hue on the page that is not a neighbour of the accent. Collapsing it onto --accent would make every tile glyph the same green. */ --ai: var(--palette-periwinkle); --status-todo: var(--text-tertiary); /* The app's dark detail card is effectively rimless; it separates from the shell by surface value, not by a drawn edge. */ --card-hairline: color-mix(in srgb, var(--text-primary) 2%, transparent); --card-shadow: none; --checkbox-border: color-mix(in srgb, var(--text-primary) 22%, transparent); --checkbox-fill: color-mix(in srgb, var(--text-primary) 2%, transparent); /* Section icon defaults, the app's named palette. */ --section-today-color: var(--palette-aurora); --section-overdue-color: var(--palette-saffron); --section-upcoming-color: var(--palette-pewter); --section-someday-color: var(--palette-dusty-rose); --section-activity-color: var(--palette-argon); --overlay-menu-shadow: 0 14px 28px color-mix(in srgb, var(--bg-secondary) 62%, transparent); --shell-shadow: 0 40px 90px -20px color-mix(in srgb, var(--bg-secondary) 82%, transparent), 0 8px 28px color-mix(in srgb, var(--bg-secondary) 68%, transparent); --hairline: 1px solid var(--border); --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif; --page: 1120px; } html.light { color-scheme: light; --bg-primary: var(--light-bg-primary); --bg-secondary: var(--light-bg-secondary); --bg-elevated: var(--light-bg-elevated); --text-primary: var(--light-text-primary); --text-secondary: var(--light-text-secondary); --text-tertiary: var(--light-text-tertiary); --success: var(--light-success); --danger: var(--light-danger); --bg-hover: color-mix(in srgb, var(--text-primary) 4.5%, transparent); --bg-selected: color-mix(in srgb, var(--text-primary) 7.5%, transparent); --bg-button: color-mix(in srgb, var(--text-primary) 3.5%, transparent); --todo-row-hover: var(--bg-hover); --border: color-mix(in srgb, var(--text-primary) 9%, transparent); --border-strong: color-mix(in srgb, var(--text-primary) 15%, transparent); --accent-foreground: var(--bg-primary); /* The dark violet reads faint on paper-white, so light mode takes the deeper step of the same hue family. */ --ai: var(--palette-iris); --card-hairline: transparent; --card-shadow: 0 16px 34px color-mix(in srgb, var(--text-primary) 8.5%, transparent), 0 3px 10px color-mix(in srgb, var(--text-primary) 6%, transparent), 0 0 0 1px color-mix(in srgb, var(--text-primary) 3%, transparent); --checkbox-border: color-mix(in srgb, var(--text-primary) 30%, transparent); --checkbox-fill: color-mix(in srgb, var(--text-primary) 3%, transparent); --overlay-menu-shadow: 0 14px 28px color-mix(in srgb, var(--text-primary) 14%, transparent); --shell-shadow: 0 40px 90px -24px color-mix(in srgb, var(--text-primary) 22%, transparent), 0 6px 20px color-mix(in srgb, var(--text-primary) 8%, transparent); } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-synthesis-weight: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } :focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; border-radius: 6px; } .wrap { width: min(100% - 40px, var(--page)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 10px; left: 10px; z-index: 60; padding: 9px 14px; border-radius: 8px; background: var(--bg-elevated); border: var(--hairline); color: var(--text-primary); font-size: 13px; font-weight: 500; transform: translateY(-200%); } .skip-link:focus { transform: translateY(0); } /* Dot-matrix icon sprite, mirrors the app's `dotted-*` lucide family. */ .dot-icon { width: 22px; height: 22px; fill: currentColor; flex: none; } /* -------------------------------------------------------------------------- Shared type -------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } .eyebrow .dot-icon { width: 14px; height: 14px; color: var(--accent); } .lede { color: var(--text-secondary); font-size: 17px; line-height: 1.65; margin: 0; } /* One spacing scale for the whole page. Sections are the largest step so a rule always reads as a chapter break, not a paragraph. Tuned for the hairline lists these pages are made of: a taller step than this leaves the gaps between sections heavier than the sections themselves. */ section { padding: 88px 0; } @media (max-width: 1024px) { section { padding: 72px 0; } } @media (max-width: 720px) { section { padding: 56px 0; } } .rule { height: 1px; background: var(--border); border: 0; margin: 0; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease, color 140ms ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-foreground); font-weight: 600; } .btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, white); } .btn--ghost { background: var(--bg-button); border-color: var(--border-strong); color: var(--text-primary); } .btn--ghost:hover { background: var(--bg-selected); } .btn--sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; } .btn-row { display: flex; flex-wrap: wrap; gap: 10px; } /* kbd chips, copied from the app's `.pane-empty-state__shortcut-key`. */ kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--text-secondary) 18%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--text-secondary) 6%, transparent); color: var(--text-secondary); font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1; } /* -------------------------------------------------------------------------- Nav -------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-secondary) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color 200ms ease, background-color 200ms ease; } .nav[data-stuck="true"] { border-bottom-color: var(--border); } .nav__inner { display: flex; align-items: center; gap: 18px; height: 60px; } .nav__brand { display: flex; align-items: center; gap: 9px; margin-right: auto; } .nav__brand img { width: 76px; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__links a { padding: 7px 11px; border-radius: 7px; font-size: 13.5px; color: var(--text-secondary); transition: color 140ms ease, background-color 140ms ease; } .nav__links a:hover { color: var(--text-primary); background: var(--bg-hover); } .nav__links a[aria-current="page"] { color: var(--text-primary); background: var(--bg-selected); } @media (max-width: 900px) { .nav__links { display: none; } } /* Appearance switch, the app's settings segmented control, shrunk. */ .segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 9px; border: var(--hairline); background: var(--bg-button); } .segmented button { display: grid; place-items: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--text-tertiary); cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } .segmented button:hover { color: var(--text-secondary); } .segmented button[aria-pressed="true"] { background: var(--bg-selected); color: var(--text-primary); } .segmented svg { width: 14px; height: 14px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding: 76px 0 88px; overflow: hidden; } @media (max-width: 720px) { .hero { padding-bottom: 56px; } } /* Two soft accent washes, sized off the viewport so they never band. */ .hero::before { content: ""; position: absolute; inset: -30% -20% auto; height: 900px; z-index: 0; background: radial-gradient(58% 46% at 50% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%), radial-gradient(40% 34% at 78% 26%, color-mix(in srgb, var(--ai) 8%, transparent), transparent 72%); pointer-events: none; } html.light .hero::before { opacity: 0.75; } .hero__inner { position: relative; z-index: 1; text-align: center; } .hero h1 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.05; letter-spacing: -0.035em; margin: 20px auto; max-width: 17ch; } .hero__lede { max-width: 62ch; margin: 0 auto 28px; font-size: 18px; color: var(--text-secondary); } @media (max-width: 620px) { .hero__lede { font-size: 16px; } } .hero .btn-row { justify-content: center; } .hero__note { margin: 16px 0 0; font-size: 13px; color: var(--text-tertiary); } /* -------------------------------------------------------------------------- Section heading block -------------------------------------------------------------------------- */ .head { max-width: 58ch; margin-bottom: 44px; } .head .eyebrow { margin-bottom: 18px; } .head h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; } /* A section heading on its own carries no trailing paragraph to absorb the h2's bottom margin, so it gives it back. */ .head > :last-child { margin-bottom: 0; } .head--center { margin-inline: auto; text-align: center; } .head--center .eyebrow { justify-content: center; } @media (max-width: 720px) { .head { margin-bottom: 34px; } } /* -------------------------------------------------------------------------- Feature grid -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid--two { grid-template-columns: repeat(2, 1fr); } .grid--four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid, .grid--four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .grid, .grid--two, .grid--four { grid-template-columns: 1fr; } } .tile { position: relative; padding: 30px; border: var(--hairline); border-radius: 12px; background: var(--bg-primary); transition: border-color 180ms ease, transform 180ms ease, background-color 180ms ease; } .tile:hover { border-color: var(--border-strong); transform: translateY(-2px); } /* A four-up track is a third narrower than the default three, so it takes the padding back rather than wrapping every line of body copy. */ .grid--four .tile { padding: 26px; } @media (max-width: 900px) { .grid--four .tile { padding: 30px; } } .tile .dot-icon { color: var(--tone, var(--accent)); margin-bottom: 18px; } .tile h3 { font-size: 15.5px; margin-bottom: 9px; letter-spacing: -0.012em; } .tile p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--text-secondary); } /* A tile that carries its own action. The copy takes the free space so the footers of a row line up even when one platform needs an extra line of explanation. */ .tile--download { display: flex; flex-direction: column; } .tile--download p { flex: 1 1 auto; } .tile__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; } .tile__alt { font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color 140ms ease; } .tile__alt:hover { text-decoration-color: var(--accent); } /* -------------------------------------------------------------------------- Numbered steps Numbers a sequence with a counter rather than a list marker, so the digit can take the accent and the text can hang off a fixed indent. -------------------------------------------------------------------------- */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; } .steps li { position: relative; counter-increment: step; padding-left: 30px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); } .steps li::before { content: counter(step); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .steps kbd { margin: 0 1px; } /* -------------------------------------------------------------------------- Keyboard cheatsheet -------------------------------------------------------------------------- */ .keys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 88px; } @media (max-width: 1024px) { .keys { gap: 0 56px; } } @media (max-width: 760px) { .keys { grid-template-columns: 1fr; gap: 0; } } .keys__group { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); } @media (max-width: 760px) { .keys > div + div .keys__group { margin-top: 44px; } } .keys__row { display: flex; align-items: center; gap: 16px; padding: 16px 2px; border-bottom: var(--hairline); font-size: 14px; color: var(--text-secondary); } .keys__row > span:first-child { flex: 1; min-width: 0; } .keys__combo { display: flex; align-items: center; gap: 4px; flex: none; } .keys__note { margin: 34px 0 0; font-size: 12.5px; color: var(--text-tertiary); } .keys__note kbd { margin: 0 1px; } /* The last row already draws a hairline, so a callout needs more clearance than the 22px it takes after a card. */ .keys + .note { margin-top: 34px; } /* -------------------------------------------------------------------------- Comparison table Hairline rows and no vertical rules, the same way `.keys` separates a two-column list. The column for our own product carries the accent wash, so the page is visibly not pretending to be a neutral survey. -------------------------------------------------------------------------- */ .compare { overflow-x: auto; border: var(--hairline); border-radius: 14px; background: var(--bg-primary); } .compare table { width: 100%; min-width: 880px; border-collapse: collapse; text-align: left; } .compare th, .compare td { padding: 16px 18px; border-bottom: var(--hairline); vertical-align: top; } .compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; } .compare thead th { background: var(--bg-secondary); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-tertiary); white-space: nowrap; } /* The question column stays put while the rest scrolls sideways, which is the only way the table stays readable on a phone. */ .compare th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 190px; background: var(--bg-primary); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); } /* The header's own first cell sits in both sticky contexts, so it needs to paint over the data cells sliding under it. */ .compare thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-secondary); } .compare td { font-size: 13px; line-height: 1.55; color: var(--text-tertiary); } /* First line of a cell is the answer; anything after the break qualifies it. */ .compare td b { display: block; margin-bottom: 3px; font-weight: 500; color: var(--text-secondary); } .compare .yes { color: var(--accent); font-weight: 600; } .compare .qualified { color: var(--text-primary); font-weight: 600; } /* Our own column, second cell in every row. */ .compare thead th:nth-child(2), .compare tbody td:first-of-type { background: color-mix(in srgb, var(--accent) 6%, transparent); } .compare thead th:nth-child(2) { color: var(--accent); } /* -------------------------------------------------------------------------- Rundown The workhorse of these pages: the subject held in a left column, its explanation in the right, separated by a hairline. It carries everything that used to be a card or a tile, so a page is one readable list rather than a grid of boxes competing with the landing page. -------------------------------------------------------------------------- */ .rundown > div { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 44px; padding: 24px 0; border-top: var(--hairline); } .rundown > div:first-child { padding-top: 0; border-top: 0; } .rundown > div:last-child { padding-bottom: 0; } .rundown h3 { font-size: 15.5px; letter-spacing: -0.012em; } .rundown p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary); } /* An entry with more than one block wraps them in a div, so the extra elements stay in the content column instead of becoming grid items of their own. */ .rundown p + p, .rundown p + ol, .rundown ol + p { margin-top: 14px; } .rundown a { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color 140ms ease; } .rundown a:hover { text-decoration-color: var(--accent); } @media (max-width: 860px) { .rundown > div { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } } /* -------------------------------------------------------------------------- Source list -------------------------------------------------------------------------- */ .sources { list-style: none; margin: 0; padding: 0; display: grid; } .sources li { padding: 17px 0; border-top: var(--hairline); font-size: 13.5px; line-height: 1.6; color: var(--text-tertiary); } .sources li:first-child { padding-top: 0; border-top: 0; } .sources li:last-child { padding-bottom: 0; } .sources a { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color 140ms ease; } .sources a:hover { text-decoration-color: var(--accent); } /* A link inside body copy. Anchors inherit their colour by default, so a link in a paragraph needs the underline to be readable as one at all. */ .link { color: var(--text-primary); font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; transition: text-decoration-color 140ms ease; } .link:hover { text-decoration-color: var(--accent); } /* -------------------------------------------------------------------------- Note callout -------------------------------------------------------------------------- */ .note { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 22px 24px; border: var(--hairline); border-left: 2px solid var(--accent); border-radius: 4px 12px 12px 4px; background: var(--bg-primary); } .note .dot-icon { width: 18px; height: 18px; color: var(--accent); margin-top: 1px; } .note p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); } .note strong { color: var(--text-primary); font-weight: 600; } /* -------------------------------------------------------------------------- Freshness stamp -------------------------------------------------------------------------- */ .updated { margin: 0; padding-bottom: 8px; font-size: 12.5px; color: var(--text-tertiary); text-align: center; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { border-top: var(--hairline); padding: 52px 0 64px; } .footer__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; } .footer img { width: 68px; opacity: 0.9; } .footer nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; } .footer a { font-size: 13.5px; color: var(--text-tertiary); } .footer a:hover { color: var(--text-secondary); } .footer__legal { width: 100%; font-size: 12.5px; color: var(--text-tertiary); } /* -------------------------------------------------------------------------- Scroll reveal -------------------------------------------------------------------------- */ /* Only hide what JS is present to bring back. Without scripting every `.reveal` block stays at its natural opacity. */ html.js .reveal { opacity: 0; transform: translateY(14px); } html.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal.is-in { opacity: 1; transform: none; transition: none; } .btn:active { transform: none; } .tile:hover { transform: none; } }