/* ============================================================ Jlist landing — design tokens. Names and values mirror app-creator/src/j-tokens.css so the landing and the app speak one vocabulary. The landing is a static page with no build step, so the tokens are inlined here rather than imported. Landing-only additions are the display sizes (--font-2x / --font-3x) and the section rhythm (--space-*). A marketing hero needs a bigger top end than a phone screen does; everything below --font-xl is the app scale unchanged. ============================================================ */ :root { /* ── Colors — identical to j-tokens.css ── */ --color-main-background: #ffffff; --color-second-background: #f8f6f1; --color-second-background-light: #f3f0e8; --color-border: #c9a0634d; --color-text: #2d3436; --color-text-secondary: #6f675e; --color-accent: #a90e35; --color-muted: #2d34369e; /* ── Font ── */ --font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-xxs: 12px; --font-xs: 14px; --font-sm: 16px; --font-md: 18px; --font-lg: 24px; --font-xl: 36px; /* Landing-only display sizes. */ --font-2x: 48px; --font-3x: 64px; --font-light: 300; --font-regular: 400; --font-medium: 500; --font-bold: 700; --font-lh-1: 1; --font-lh-11: 1.1; --font-lh-12: 1.2; --font-lh-13: 1.3; --font-lh-15: 1.5; /* Fluid roles, built from the scale above. */ --type-display: clamp(var(--font-xl), 6.5vw, var(--font-3x)); --type-section: clamp(var(--font-lg), 3.4vw, var(--font-xl)); --type-lede: clamp(var(--font-sm), 1.6vw, var(--font-md)); /* ── Gap ── */ --gap-xs: 4px; --gap-sm: 6px; --gap-md: 8px; --gap-lg: 12px; --gap-xl: 16px; --gap-2x: 20px; /* ── Padding ── */ --padding-xs: 10px; --padding-sm: 14px; --padding-md: 18px; --padding-lg: 22px; --padding-xl: 26px; --padding-2x: 30px; /* ── Section rhythm — landing only ── */ --space-block: clamp(32px, 5vw, 56px); --space-section: clamp(56px, 9vw, 104px); /* ── Border radius ── */ --border-rad-sm: 4px; --border-rad-md: 8px; --border-rad-lg: 22px; --border-rad-pill: 999px; /* ── Control ── */ --control-height: 44px; --control-height-desktop: 48px; /* ── Layout ── */ --page-max-width: 64rem; --measure: 40rem; --store-badge-width: 168px; /* ── Opacity + motion ── */ --opacity-hover: 0.85; --motion-in: 180ms; --motion-out: 140ms; --motion-sheet-in: 240ms; /* ── Safe areas ── */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } /* Inter, self-hosted so the page keeps `font-src 'self'` and pulls nothing from a third-party origin. One variable file covers 400–700. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; /* The ?v= must match the preload in each page's , or the browser fetches the font twice. deploy/landing-build.sh stamps both. */ src: url("/inter-latin.woff2?v=fa496ec5") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-main-background); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-sm); font-weight: var(--font-regular); line-height: var(--font-lh-15); -webkit-font-smoothing: antialiased; } /* The cookie banner is fixed to the bottom. Reserve room for it only while it is actually on screen — see .j-cookies and hideBanner() in landing.js. */ body.has-cookie-banner { padding-bottom: calc(132px + var(--safe-bottom)); } img { max-width: 100%; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .j-skip { position: absolute; left: calc(var(--gap-lg) + var(--safe-left)); top: calc(var(--gap-lg) + var(--safe-top)); z-index: 30; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .j-skip:focus-visible { width: auto; height: auto; padding: var(--gap-md) var(--gap-lg); overflow: visible; clip-path: none; border-radius: var(--border-rad-md); background: var(--color-accent); color: var(--color-second-background); font-size: var(--font-xs); font-weight: var(--font-medium); text-decoration: none; } /* ============================================================ Layout ============================================================ */ .j-shell { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: calc(var(--padding-lg) + var(--safe-left)) calc(var(--padding-lg) + var(--safe-right)); } .j-main { flex: 1 1 auto; } .j-section { padding-block: var(--space-section); } .j-section + .j-section { padding-block-start: 0; } .j-section--tint { padding-block: var(--space-section); background: var(--color-second-background); } .j-section + .j-section--tint { padding-block-start: var(--space-section); } .j-section__head { max-width: var(--measure); margin-block-end: var(--space-block); } /* ============================================================ Type roles ============================================================ */ .j-eyebrow { display: inline-flex; align-items: center; gap: var(--gap-md); margin: 0; padding: var(--gap-sm) var(--gap-lg); border: 1px solid var(--color-border); border-radius: var(--border-rad-pill); background: var(--color-second-background); color: var(--color-accent); font-size: var(--font-xxs); font-weight: var(--font-medium); letter-spacing: 0.04em; line-height: var(--font-lh-1); text-transform: uppercase; } .j-display { margin: 0; font-size: var(--type-display); font-weight: var(--font-bold); letter-spacing: -0.05em; line-height: var(--font-lh-1); text-wrap: balance; } .j-h2 { margin: 0; font-size: var(--type-section); font-weight: var(--font-bold); letter-spacing: -0.04em; line-height: var(--font-lh-11); text-wrap: balance; } .j-h3 { margin: 0; font-size: var(--font-md); font-weight: var(--font-medium); letter-spacing: -0.02em; line-height: var(--font-lh-12); } .j-lede { margin: 0; max-width: var(--measure); font-size: var(--type-lede); font-weight: var(--font-regular); line-height: var(--font-lh-15); color: var(--color-text-secondary); text-wrap: pretty; } .j-body { margin: 0; font-size: var(--font-xs); line-height: var(--font-lh-15); color: var(--color-text-secondary); text-wrap: pretty; } .j-caption { margin: 0; font-size: var(--font-xxs); font-weight: var(--font-light); line-height: var(--font-lh-13); color: var(--color-muted); } .j-link { color: var(--color-accent); font-weight: var(--font-medium); text-decoration: none; } .j-link:hover { text-decoration: underline; } /* ============================================================ Site header ============================================================ */ .j-site-header { padding-block: var(--padding-lg); padding-block-start: calc(var(--padding-lg) + var(--safe-top)); } .j-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-xl); } .j-brand { display: inline-flex; align-items: center; gap: var(--gap-lg); color: var(--color-text); text-decoration: none; } .j-brand__mark { display: block; width: 26px; height: auto; } .j-brand__word { font-size: var(--font-md); font-weight: var(--font-bold); letter-spacing: -0.04em; line-height: var(--font-lh-1); } /* ============================================================ Hero ============================================================ */ .j-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-2x); max-width: var(--measure); padding-block: clamp(40px, 7vw, 88px) var(--space-section); } .j-hero .j-display { margin-block-start: var(--gap-lg); } .j-hero__cta { margin-block-start: var(--gap-lg); } /* ============================================================ Store badges — the launch CTA ============================================================ */ .j-stores { margin: 0; padding: 0; } .j-stores__title { margin: 0 0 var(--gap-lg); font-size: var(--font-xxs); font-weight: var(--font-medium); letter-spacing: 0.06em; line-height: var(--font-lh-1); color: var(--color-text-secondary); text-transform: uppercase; } .j-stores__row { display: flex; flex-wrap: wrap; gap: var(--gap-xl); margin: 0; padding: 0; list-style: none; } .j-store { display: inline-flex; flex-direction: column; gap: var(--gap-md); width: var(--store-badge-width); border-radius: var(--border-rad-md); text-decoration: none; } .j-store img { display: block; width: 100%; height: auto; border-radius: var(--border-rad-md); } /* Live state — a real download link. */ .j-store[href] { transition: opacity var(--motion-out) ease, transform var(--motion-out) ease; } .j-store[href]:hover { opacity: var(--opacity-hover); transform: translateY(-1px); } /* Pending state — the anchor has no href, so it is inert and unfocusable by design. The chip is what tells a visitor why nothing happens; without it the artwork reads as a live button that silently ignores taps. */ .j-store.is-pending { cursor: default; } .j-store.is-pending img { filter: grayscale(1); opacity: 0.55; } .j-store__state { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--gap-sm); padding: 3px var(--gap-md); border-radius: var(--border-rad-pill); background: var(--color-second-background-light); color: var(--color-text-secondary); font-size: var(--font-xxs); font-weight: var(--font-medium); line-height: var(--font-lh-13); } .j-stores__note { margin: var(--gap-xl) 0 0; font-size: var(--font-xxs); font-weight: var(--font-light); line-height: var(--font-lh-13); color: var(--color-muted); } /* ============================================================ Feature cards ============================================================ */ /* Explicit column counts rather than auto-fit: the feature set is exactly four cards, and auto-fit lands on three-plus-an-orphan at desktop widths. */ .j-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-xl); margin: 0; padding: 0; list-style: none; } @media (min-width: 34rem) { .j-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 60rem) { .j-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .j-card { display: flex; flex-direction: column; gap: var(--gap-lg); height: 100%; padding: var(--padding-xl); border: 1px solid var(--color-border); border-radius: var(--border-rad-lg); background: var(--color-main-background); } .j-section--tint .j-card { background: var(--color-main-background); } /* ============================================================ FAQ ============================================================ */ .j-faq { display: flex; flex-direction: column; gap: 0; max-width: var(--measure); margin: 0; } .j-faq__item { padding-block: var(--padding-lg); border-block-start: 1px solid var(--color-border); } .j-faq__item:last-child { border-block-end: 1px solid var(--color-border); } .j-faq__q { margin: 0 0 var(--gap-md); font-size: var(--font-sm); font-weight: var(--font-medium); letter-spacing: -0.02em; line-height: var(--font-lh-13); color: var(--color-text); } .j-faq__a { margin: 0; } /* ============================================================ Prose — privacy page ============================================================ */ .j-prose { max-width: var(--measure); } .j-prose > * + * { margin-block-start: var(--gap-xl); } .j-prose h2 { margin-block-start: var(--space-block); font-size: var(--font-lg); font-weight: var(--font-bold); letter-spacing: -0.04em; line-height: var(--font-lh-12); } .j-prose p, .j-prose li { font-size: var(--font-xs); line-height: var(--font-lh-15); color: var(--color-text-secondary); } .j-prose ul { margin: 0; padding-inline-start: 1.2em; } .j-prose li + li { margin-block-start: var(--gap-md); } .j-prose code { padding: 2px var(--gap-sm); border-radius: var(--border-rad-sm); background: var(--color-second-background-light); font-size: 0.92em; } /* ============================================================ Footer ============================================================ */ .j-site-footer { padding-block: var(--space-block); border-block-start: 1px solid var(--color-border); } .j-site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-lg) var(--padding-xl); } .j-site-footer nav { display: flex; flex-wrap: wrap; gap: var(--padding-md); } .j-site-footer a { color: var(--color-text-secondary); font-size: var(--font-xxs); text-decoration: none; } .j-site-footer a:hover { color: var(--color-accent); text-decoration: underline; } /* ============================================================ Cookie notice Not a modal: the page behind it stays usable, so it must not claim role="dialog" or aria-modal. It is a labelled region that happens to be pinned to the bottom of the viewport. ============================================================ */ .j-cookies { position: fixed; right: calc(var(--gap-xl) + var(--safe-right)); bottom: calc(var(--gap-xl) + var(--safe-bottom)); left: calc(var(--gap-xl) + var(--safe-left)); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--padding-md); width: min(44rem, calc(100% - 2 * var(--gap-xl))); margin-inline: auto; padding: var(--padding-md) var(--padding-lg); border: 1px solid var(--color-border); border-radius: var(--border-rad-lg); background: var(--color-second-background); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--motion-sheet-in) ease, transform var(--motion-sheet-in) ease, visibility var(--motion-sheet-in) ease; } .j-cookies.is-visible { opacity: 1; visibility: visible; transform: none; } .j-cookies__copy { margin: 0; font-size: var(--font-xs); line-height: var(--font-lh-13); color: var(--color-text-secondary); } .j-cookies__copy a { color: var(--color-accent); font-weight: var(--font-medium); text-decoration: none; } .j-cookies__copy a:hover { text-decoration: underline; } .j-cookies__actions { display: flex; flex: 0 0 auto; gap: var(--gap-md); } .j-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); margin: 0; padding: 0 var(--padding-md); border: 1px solid transparent; border-radius: var(--border-rad-md); font-family: inherit; font-size: var(--font-xs); font-weight: var(--font-medium); letter-spacing: -0.02em; line-height: var(--font-lh-1); cursor: pointer; transition: background var(--motion-out) ease, opacity var(--motion-out) ease; } .j-btn--primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-second-background); } .j-btn--primary:hover { opacity: var(--opacity-hover); } .j-btn--ghost { border-color: var(--color-border); background: transparent; color: var(--color-text); } .j-btn--ghost:hover { background: var(--color-second-background-light); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 640px) { .j-cookies { flex-direction: column; align-items: stretch; } .j-cookies__actions { width: 100%; } .j-cookies .j-btn { flex: 1; } .j-site-footer__inner { justify-content: flex-start; } } @media (min-width: 900px) { .j-btn { min-height: var(--control-height-desktop); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } .j-store[href]:hover { transform: none; } }