/* ============================================================================ site.css — the public shopfront: landing page and /security/. ============================================================================ Deliberately NOT modern.css. These pages are read by someone who has never seen the app and is deciding whether to try it; the app's stylesheet is built for someone already inside it, and the two jobs pull in opposite directions. Nothing here is loaded on an app page and nothing there is loaded here, so the two can never fight. The design, in one line: a measurement record. Cool grey-green neutrals with a single warm brass accent — keys are brass, and it is the only warm thing on the page, so it lands wherever it is spent. A grotesque display face over a serif body, which is the inversion of the usual pairing and the reason the page doesn't read like every other B2B page. The recurring motif is a blade profile: a real stepped cut trace with tick marks, which is the one picture nobody else in this market can draw. Themes: the shell stamps data-theme on before first paint from the same localStorage key the app uses, so a visitor who set dark in the app keeps it. The prefers-color-scheme block is the no-JS fallback and is guarded so an explicit light choice still wins. ========================================================================= */ :root { /* Neutrals biased cool and slightly green — a machinist's surface plate, not paper and not a default grey. */ --paper: #eef1f0; --paper-2: #e4e9e8; --surface: #ffffff; --ink: #131c24; --ink-soft: #4e5f6c; --steel: #b3c1c8; --steel-line: #cfd8db; /* The single warm thing on the page. */ --brass: #a1701f; --brass-lift: #c08c2e; --brass-wash: rgba(161, 112, 31, 0.10); /* Brass as TEXT and as rules. Separate from --brass, which is a button fill and has to hold white on top of it at every width. The two need different values on a dark ground: the fill stays dark enough for white text, the text lightens so it can be read. */ --accent: #a1701f; /* The hero and other dark bands. One pair of tokens, both themes: in light it is a dark panel on a light page, in dark it sits a step above the page, so it reads as raised either way. */ --band: #131c24; --band-ink: #eef1f0; --band-soft: #9fb0ba; --band-line: rgba(238, 241, 240, 0.14); --band-brass: #d9a44e; --focus: #2f6f8f; --shadow-sm: 0 1px 2px rgba(19, 28, 36, 0.06); --shadow-md: 0 10px 30px -12px rgba(19, 28, 36, 0.28); --measure: 62ch; --gut: clamp(1.15rem, 5vw, 2.5rem); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0e1418; --paper-2: #131b20; --surface: #161f25; --ink: #e9eef0; --ink-soft: #9aabb5; --steel: #46585f; --steel-line: #26333a; --brass: #b07f2c; --brass-lift: #c9963c; --brass-wash: rgba(210, 160, 84, 0.12); --accent: #d2a054; --band: #18232b; --band-line: rgba(238, 241, 240, 0.12); --focus: #7cc0dd; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } } :root[data-theme="dark"] { --paper: #0e1418; --paper-2: #131b20; --surface: #161f25; --ink: #e9eef0; --ink-soft: #9aabb5; --steel: #46585f; --steel-line: #26333a; --brass: #b07f2c; --brass-lift: #c9963c; --brass-wash: rgba(210, 160, 84, 0.12); --accent: #d2a054; --band: #18232b; --band-line: rgba(238, 241, 240, 0.12); --focus: #7cc0dd; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; } h1, h2, h3, h4 { font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; color: var(--ink); margin: 0; } p { margin: 0; } a { color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; } /* --- Shared furniture --------------------------------------------------- */ .wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: var(--gut); } .wrap--narrow { max-width: 46rem; } .band { padding-block: clamp(3.25rem, 9vw, 6rem); } .band--paper2 { background: var(--paper-2); } /* A dark band is a different GROUND, so it redefines the surface tokens rather than re-colouring each component that sits on it. Doing it the other way round is how a page ends up with one theme's text on the other theme's background: a component styled with --ink-soft is invisible here unless somebody remembers to write a second rule for it, and eventually somebody doesn't. Redefine the ground once and every child is right by default. */ .band--dark, .hero { background: var(--band); color: var(--band-ink); --ink: var(--band-ink); --ink-soft: var(--band-soft); --steel: var(--band-line); --steel-line: var(--band-line); --accent: var(--band-brass); --surface: rgba(255, 255, 255, 0.045); } /* The instrument voice: mono, uppercase, tracked. Used for eyebrows and for anything that is a label on a measurement rather than prose. */ .eyebrow { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.9rem; } .section-title { font-size: clamp(1.65rem, 1.15rem + 2.1vw, 2.6rem); max-width: 20ch; } .lede { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); max-width: var(--measure); } .prose { max-width: var(--measure); } .prose p + p { margin-top: 0.85rem; } /* Buttons ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.7rem 1.35rem; border: 1px solid transparent; border-radius: 2px; font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .btn--primary { background: var(--brass); border-color: var(--brass); color: #fff; } .btn--ghost { background: transparent; border-color: var(--steel); color: var(--ink); } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--brass-lift); border-color: var(--brass-lift); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } } .btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; } /* --- Masthead ----------------------------------------------------------- */ .masthead { border-bottom: 1px solid var(--steel-line); background: var(--paper); position: sticky; top: 0; z-index: 20; } .masthead-inner { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; } .masthead-brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; text-decoration: none; color: var(--ink); } .masthead-name { font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; } .masthead-nav { display: none; gap: 1.4rem; font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 0.92rem; font-weight: 500; } .masthead-nav a { color: var(--ink-soft); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .masthead-nav a:hover { color: var(--accent); } } @media (min-width: 720px) { .masthead-nav { display: flex; } } .brand-mark { display: inline-block; width: 40px; height: 40px; flex: 0 0 auto; line-height: 0; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; } .brand-mark-inverse { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-mark-ink { display: none; } :root:not([data-theme="light"]) .brand-mark-inverse { display: block; } } :root[data-theme="dark"] .brand-mark-ink { display: none; } :root[data-theme="dark"] .brand-mark-inverse { display: block; } /* --- Hero --------------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 9vw, 6rem); overflow: hidden; } .hero h1 { color: var(--band-ink); font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.4rem); letter-spacing: -0.035em; max-width: 12ch; } /* Wider than the 32ch it was set at when it was one short sentence. The subhead now carries the mechanism, and at 32ch that came out as four stacked fragments on a desktop rather than as a sentence. */ .hero-sub { margin-top: 1.15rem; font-size: clamp(1.15rem, 1rem + 0.75vw, 1.5rem); line-height: 1.4; color: var(--band-ink); max-width: 42ch; } /* The blade trace. This is the hero's thesis: the thing the product actually measures, drawn at the size of a headline. It bleeds off the right edge because a key profile is a section of something longer, not a logo. */ /* Claim left, picture right — and stacked on a phone, where the claim has to come first and a picture beside it would be two half-width columns of nothing. The right column is the slot a match-result screenshot drops into; until then it holds the blade profile. */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; } @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } } .hero-text { min-width: 0; } /* Framed, so the column reads as a figure rather than as a line that drifted in. It is also the shape a screenshot will want when one exists, which means swapping the for an changes nothing else. */ .hero-figure { margin: 0; min-width: 0; padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--band-line); background: rgba(255, 255, 255, 0.03); } .hero-figure img { display: block; width: 100%; height: auto; } /* Fits rather than crops. It was `slice`, which meant the visible window depended on the viewport's aspect ratio — on a phone that left a sliver of trace, and on a wide desktop it cut the baseline off the bottom. */ .trace { width: 100%; height: auto; display: block; } .trace-base { stroke: var(--band-line); stroke-width: 1; } .trace-tick { stroke: var(--band-line); stroke-width: 1; } .trace-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .trace-dot { fill: var(--accent); } .trace-caption { margin-top: 0.9rem; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } /* Drawn once on arrival, left-to-right, the way the measurement itself runs. One orchestrated moment, and nothing else on the page moves. */ @media (prefers-reduced-motion: no-preference) { .trace-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: trace-draw 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards; } .trace-dot, .trace-tick { opacity: 0; animation: trace-fade 0.5s ease forwards; } .trace-dot:nth-of-type(1) { animation-delay: 0.75s; } .trace-dot:nth-of-type(2) { animation-delay: 0.95s; } .trace-dot:nth-of-type(3) { animation-delay: 1.15s; } .trace-dot:nth-of-type(4) { animation-delay: 1.35s; } .trace-dot:nth-of-type(5) { animation-delay: 1.55s; } .trace-tick { animation-delay: 1.5s; } } @keyframes trace-draw { to { stroke-dashoffset: 0; } } @keyframes trace-fade { to { opacity: 1; } } /* --- Problem cards ------------------------------------------------------ */ .cards { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 2.5rem; background: var(--steel-line); border: 1px solid var(--steel-line); } @media (min-width: 860px) { .cards { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); padding: clamp(1.4rem, 3vw, 2rem); } .card h3 { font-size: 1.18rem; margin-bottom: 0.6rem; } .card p { color: var(--ink-soft); font-size: 0.98rem; } /* --- How it works: a real sequence, so it gets real numbers ------------- */ .steps { list-style: none; counter-reset: step; padding: 0; margin: 2.75rem 0 0; display: grid; gap: 2rem; } @media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } } .steps li { counter-increment: step; padding-top: 1.1rem; border-top: 2px solid var(--accent); } .steps li::before { content: counter(step, decimal-leading-zero); display: block; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 0.7rem; } .steps h3 { font-size: 1.15rem; margin-bottom: 0.45rem; } .steps p { color: var(--ink-soft); font-size: 0.98rem; } .small-print { margin-top: 2.25rem; font-size: 0.92rem; color: var(--ink-soft); } /* --- Use cases ---------------------------------------------------------- */ .uses { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin-top: 3rem; } .use { display: grid; gap: 0.85rem; } @media (min-width: 900px) { .use { grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: start; } } .use h3 { font-size: 1.3rem; } .use-claim { font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 1.1rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; } .use-body { color: var(--ink-soft); } .use-body p + p { margin-top: 0.8rem; } /* An admission, marked as one. Brass rail because it is the page telling on itself, which is worth as much as any claim beside it. */ .aside { margin-top: 1.1rem; padding: 0.85rem 0 0.85rem 1.1rem; border-left: 2px solid var(--accent); background: var(--brass-wash); font-size: 0.94rem; color: var(--ink-soft); } /* --- Security teaser ---------------------------------------------------- */ .link-arrow { display: inline-flex; align-items: baseline; gap: 0.4rem; margin-top: 1.5rem; font-family: Archivo, Helvetica, Arial, sans-serif; font-weight: 600; color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } /* --- Pricing and plan cards --------------------------------------------- */ .plans-heading { margin: 2.5rem 0 1.1rem; font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 0.55rem; border-bottom: 1px solid var(--steel-line); } /* Free and Household are narrow; Business carries three lines of reasoning and spans the rest. Not equal thirds: the tiers are not equally important, and a grid that pretends they are makes the reader work out which one is theirs. */ .plans { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--steel-line); border: 1px solid var(--steel-line); } @media (min-width: 780px) { .plans { grid-template-columns: repeat(2, 1fr); } .plan--wide { grid-column: 1 / -1; } } @media (min-width: 1040px) { .plans { grid-template-columns: repeat(3, 1fr); } .plan--wide { grid-column: auto; } } .plan { background: var(--surface); padding: clamp(1.3rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: 0.4rem; } .plan-name { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .plan-price { font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; } .plan-note { font-size: 0.9rem; color: var(--ink-soft); } .plan-list { margin: 0.65rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.92rem; color: var(--ink-soft); } .plan-list li { position: relative; padding-left: 1.4rem; } .plan-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.65rem; height: 2px; background: var(--accent); } .plan-list a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; } /* The household card standing beside its own section, rather than in the row of tiers. Brass rail because it is answering the objection that section raises — "is this going to be a subscription?" — and not merely listing a price. */ .plan--feature { border: 1px solid var(--steel-line); border-left: 3px solid var(--accent); background: var(--surface); align-self: start; } .plan--feature .plan-price { font-size: 1.5rem; } .plan-why { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--steel-line); font-size: 0.9rem; color: var(--ink-soft); } .plan-cta { margin-top: 1.1rem; align-self: flex-start; } /* Text left, price right; stacked on a phone with the price under the argument it answers. */ .households-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; } @media (min-width: 940px) { .households-grid { grid-template-columns: 1fr 21rem; } } /* Prose beside a figure. Unused until the second screenshot exists — see the comment on "Where it fits" — but defined here so adding it is markup only. */ .split-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } @media (min-width: 940px) { .split-grid { grid-template-columns: 1fr 1fr; } } /* --- FAQ ---------------------------------------------------------------- */ .faq { margin-top: 2.5rem; border-top: 1px solid var(--steel-line); } .faq details { border-bottom: 1px solid var(--steel-line); } .faq summary { display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-family: Archivo, Helvetica, Arial, sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: 0 0 auto; width: 0.55rem; height: 0.55rem; margin: 0.42rem 0 0 auto; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.16s ease; } .faq details[open] summary::after { transform: rotate(-135deg); } .faq-answer { padding: 0 0 1.3rem; color: var(--ink-soft); max-width: var(--measure); } @media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } } /* --- Closing CTA -------------------------------------------------------- */ .closer { text-align: left; } .closer .btn-row { margin-top: 2rem; } /* --- Footer ------------------------------------------------------------- */ .site-foot { border-top: 1px solid var(--steel-line); padding-block: 2.5rem 3rem; font-size: 0.9rem; color: var(--ink-soft); } .foot-inner { display: grid; gap: 1rem; } @media (min-width: 760px) { .foot-inner { grid-template-columns: 1fr auto; align-items: start; } } .foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.15rem; } .foot-links a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--steel-line); } @media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--accent); border-color: var(--accent); } } .foot-meta { margin-top: 0.35rem; } /* --- The security page -------------------------------------------------- */ .doc-head { padding-block: clamp(2.75rem, 7vw, 4.5rem) 0; } .doc-head h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); max-width: 16ch; } .doc { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 8vw, 5rem); } .doc section + section { margin-top: clamp(2.25rem, 5vw, 3.25rem); } .doc h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); margin-bottom: 0.7rem; padding-top: 1rem; border-top: 2px solid var(--accent); max-width: 24ch; } .doc p { color: var(--ink-soft); max-width: var(--measure); } .doc p + p { margin-top: 0.8rem; } .doc ul { margin: 0.9rem 0 0; padding: 0; list-style: none; max-width: var(--measure); display: grid; gap: 0.6rem; } .doc li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); } .doc li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 2px; background: var(--accent); } /* The two sections that are the page telling on itself. Same treatment as the landing page's aside, for the same reason. */ .doc .frank { border-left: 2px solid var(--accent); background: var(--brass-wash); padding: 1.1rem 1.25rem; } .doc .frank h2 { border-top: 0; padding-top: 0; margin-bottom: 0.55rem; } .doc .frank p { color: var(--ink-soft); }