/* --------------------------------------------------------------------------- The public site — the pages somebody sees before they have an account. It shares the palette, the radii and the display face with the dashboard, on purpose: the shop window should look like the shop. What it does not share is the density. A dashboard is read by somebody who already knows what they are looking for, so it packs in; this is read by somebody deciding whether to bother, so it breathes. Loaded after app.css, and overriding it where the dashboard's assumptions do not hold — chiefly that is a flex row with a sidebar in it. --------------------------------------------------------------------------- */ body.site { display: block; background: var(--surface); } .site-main { max-width: none; margin: 0; padding: 0; } .site-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 26px; } /* Headings here are the display face at full size. app.css sets h2 to a small uppercase label, which is right inside a dashboard and wrong on a page whose job is to be read. */ body.site h1 { font-family: var(--serif); font-weight: 550; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 18px; } body.site h2 { font-family: var(--serif); font-weight: 550; text-transform: none; font-size: clamp(25px, 3vw, 35px); line-height: 1.14; letter-spacing: -.022em; color: var(--ink); margin: 0 0 14px; } body.site h3 { font-family: var(--serif); font-weight: 560; font-size: 17.5px; letter-spacing: -.012em; margin: 0 0 7px; color: var(--ink); } .eyebrow { display: inline-block; margin-bottom: 14px; font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); } body.site .button { margin-bottom: 0; } .button.lg { padding: 13px 24px; font-size: 15px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------ header */ .site-head { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); } .site-head-inner { display: flex; align-items: center; gap: 26px; height: 68px; } .site-brand { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 16.5px; font-weight: 560; color: var(--ink); text-decoration: none; letter-spacing: -.012em; white-space: nowrap; } .site-brand .mark { width: 28px; height: 28px; border-radius: 9px; } .site-nav { display: flex; gap: 4px; margin-left: 12px; } .site-nav a { padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-2); text-decoration: none; font-size: 14px; } .site-nav a:hover { background: var(--surface-sunk); color: var(--ink); } .site-nav a.on { color: var(--accent-ink); font-weight: 570; } .site-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; } .site-signin { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 520; } .site-signin:hover { color: var(--ink); } /* -------------------------------------------------------------------- hero */ .hero { padding: 76px 0 82px; background: var(--surface); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; } .hero-copy { max-width: 30rem; } .hero-sub { font-size: 17.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 30px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero-fine { margin: 20px 0 0; font-size: 13px; color: var(--ink-muted); } /* ---- the product drawing Colours are given as classes rather than fill attributes so the whole thing moves when the palette does, and so there is not a single inline style on the page — which the policy would discard anyway. */ .hero-art { min-width: 0; } .shot { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(11,11,11,.09)); } .s-card { fill: var(--surface); stroke: var(--line); } .s-title { fill: var(--ink-muted); font: 600 11.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; } .s-figure { fill: var(--ink); font: 550 30px var(--serif); letter-spacing: -.02em; } .s-up { fill: var(--good-sunk); } .s-uptext { fill: var(--good-ink); font: 620 11.5px var(--sans); } .s-grid { stroke: var(--grid); stroke-width: 1; } .s-area { fill: var(--accent-sunk); } .s-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .s-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; } .s-tile { fill: var(--surface-sunk); } .s-tilefig{ fill: var(--ink); font: 550 19px var(--serif); } .s-tilelab{ fill: var(--ink-muted); font: 500 11.5px var(--sans); } .s-rule { fill: var(--line); } .s-av { fill: var(--accent-sunk); } .s-name { fill: var(--ink); font: 540 13px var(--sans); } .s-when { fill: var(--ink-muted); font: 500 12px var(--sans); } .s-pill-green { fill: var(--t-green-sunk); } .s-pilltext-green { fill: var(--t-green); font: 560 11px var(--sans); } .s-pill-amber { fill: var(--t-amber-sunk); } .s-pilltext-amber { fill: var(--t-amber); font: 560 11px var(--sans); } /* ------------------------------------------------------------------ proofs */ .proofs { background: var(--plane); border-block: 1px solid var(--line); padding: 30px 0; } .proof-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; } .proof { display: flex; flex-direction: column; gap: 5px; } .proof strong { font-family: var(--serif); font-size: 15.5px; font-weight: 560; letter-spacing: -.01em; } .proof span { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } /* ----------------------------------------------------------------- section */ .band { padding: 88px 0; background: var(--surface); } .band.alt { background: var(--plane); border-block: 1px solid var(--line); } .split { padding: 88px 0; background: var(--surface); } .split.alt { background: var(--plane); border-block: 1px solid var(--line); } .sec-head { max-width: 46rem; margin: 0 auto 46px; text-align: center; } .sec-sub { color: var(--ink-2); font-size: 16px; margin: 0; } .sec-fine { max-width: 52rem; margin: 32px auto 0; text-align: center; color: var(--ink-muted); font-size: 13px; line-height: 1.6; } .big { font-size: 16px; line-height: 1.62; color: var(--ink-2); margin: 0 0 16px; max-width: 34rem; } .big em { font-style: italic; color: var(--ink); } .ticks { list-style: none; margin: 24px 0 0; padding: 0; max-width: 34rem; } .ticks li { position: relative; padding: 0 0 11px 27px; color: var(--ink-2); font-size: 14.5px; } .ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border: 2px solid var(--accent); border-top: 0; border-right: 0; transform: rotate(-45deg); } .ticks strong { color: var(--ink); font-weight: 580; } /* ------------------------------------------------------------------- steps Named how-steps rather than steps: app.css already has a .steps, the setup page's checklist, and two stylesheets quietly agreeing on a class name is a bug waiting for whoever changes one of them. */ .how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 22px; } .how-steps li { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 24px 22px; } .band.alt .how-steps li { background: var(--surface); } .step-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 15px; border-radius: 50%; background: var(--accent-sunk); color: var(--accent-ink); font-family: var(--serif); font-size: 16px; font-weight: 560; } .how-steps p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; } /* ---------------------------------------------------------------- diagrams */ .split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 62px; align-items: center; } .diagram svg { width: 100%; height: auto; max-width: 460px; } .d-box { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; } .d-box.accent { fill: var(--accent); stroke: var(--accent-deep); } .d-box.soft { fill: var(--surface-sunk); stroke: var(--line); } .d-box.dashed { fill: none; stroke: var(--line-strong); stroke-dasharray: 5 4; } .d-lab { fill: var(--ink); font: 550 14px var(--sans); } .d-sub { fill: var(--ink-muted); font: 500 11.5px var(--sans); } .d-lab.light { fill: #fff; } .d-sub.light { fill: #d8f3e6; } .d-line { fill: none; stroke: var(--line-strong); stroke-width: 1.4; } .d-dash { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-dasharray: 5 4; } .d-arrow { fill: none; stroke: var(--line-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ---------------------------------------------------------------- features */ .feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 22px; } .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; box-shadow: var(--shadow); transition: box-shadow .15s ease, border-color .15s ease; } .band.alt .feat { background: var(--surface); } .feat:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); } .feat-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; margin-bottom: 15px; } .feat-icon svg { width: 19px; height: 19px; } .feat p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; } /* ------------------------------------------------------------------ tiers */ body.site .tiers { max-width: 1000px; margin: 0 auto; } body.site .tier { background: var(--surface); } body.site .tier .button { align-self: stretch; text-align: center; } /* -------------------------------------------------------------------- faq */ .faq-wrap { max-width: 780px; } .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-family: var(--serif); font-size: 17px; font-weight: 550; letter-spacing: -.01em; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent-ink); } /* A plus that becomes a minus. Two lines, one of which is turned off when the panel opens — cheaper than a rotation and it cannot end up at an angle. */ .faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; background: var(--ink-muted); transition: opacity .12s ease; } .faq summary::before { width: 13px; height: 1.6px; margin-top: -.8px; } .faq summary::after { width: 1.6px; height: 13px; margin-top: -6.5px; right: 11.7px; } .faq details[open] summary::after { opacity: 0; } .faq details[open] summary { color: var(--accent-ink); } .faq p { margin: 0; padding: 0 40px 22px 0; color: var(--ink-2); font-size: 15px; line-height: 1.66; max-width: 62ch; } /* -------------------------------------------------------------------- cta */ .cta { padding: 86px 0 92px; text-align: center; background: var(--accent-sunk); border-top: 1px solid var(--line); } .cta-inner { display: flex; flex-direction: column; align-items: center; } .cta p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 28px; } .cta .hero-cta { justify-content: center; } /* ------------------------------------------------------------------ footer */ .site-foot { background: var(--ink); color: #b9b8b3; padding: 56px 0 30px; } .site-foot-inner { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 42px; padding-bottom: 38px; } .foot-brand .mark { display: block; width: 30px; height: 30px; margin-bottom: 15px; } .foot-brand p { margin: 0; font-size: 13.5px; line-height: 1.6; max-width: 34ch; } .foot-links { display: flex; flex-direction: column; gap: 9px; } .foot-links strong { color: #fff; font-family: var(--serif); font-size: 14.5px; font-weight: 560; margin-bottom: 3px; } .foot-links a { color: #b9b8b3; text-decoration: none; font-size: 13.5px; } .foot-links a:hover { color: #fff; } .foot-fine { border-top: 1px solid #2a2a28; padding-top: 24px; font-size: 12.5px; color: #86847f; } /* ------------------------------------------------------------- narrower */ @media (max-width: 940px) { .hero { padding: 52px 0 60px; } .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .hero-copy { max-width: none; } .split-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } /* The drawing goes under the words it illustrates, whichever side it was on. */ .split-grid.reverse > .diagram { order: 2; } .diagram svg { max-width: 420px; margin: 0 auto; display: block; } .band, .split { padding: 62px 0; } .site-foot-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { /* The section links go; the two that matter — sign in, start free — stay. */ .site-nav { display: none; } .site-head-inner { gap: 14px; } .site-wrap { padding: 0 20px; } .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .button { text-align: center; } .sec-head { text-align: left; margin-bottom: 34px; } .sec-fine { text-align: left; } } @media (max-width: 560px) { /* At this width the wordmark and both actions no longer fit on one line, and something has to give. It is the sign-in link: somebody who already has an account and taps "Start free" is offered sign-in on that page, and the footer carries it too — whereas a header with no name on it reads as a page that failed to load. */ .site-signin { display: none; } .site-brand { font-size: 15px; gap: 9px; } .site-brand .mark { width: 26px; height: 26px; border-radius: 8px; } } /* The unsubscribe page: one sentence and one button, on its own. Whoever is reading it wants to be finished in one press. */ .unsub { max-width: 46ch; margin: 12vh auto 0; text-align: center; padding: 0 24px; } .unsub h1 { margin-bottom: 12px; } .unsub .lede { margin-bottom: 22px; } .unsub form { margin: 0 0 20px; }