/* * deskworkapp.com — the marketing site. * * The palette, the radii and the letter-spacing are lifted from `public/office.css`, which took * them off the product this replaces. A visitor who signs in should not feel they have arrived * somewhere else, so the tokens are the same names with the same values. * * Two deliberate departures from the office stylesheet: * * 1. SYSTEM FONTS ONLY. The office sheet names Raleway and Source Sans Pro first and falls * through to the system stack; naming them here would either do nothing (nobody has them * installed) or cost a web-font request, and this site makes no external request at all. * So the stack starts where the office stack ends. * 2. One size up on the page title. The office is at app scale on purpose — a 66px display line * on a screen somebody works in all day reads as a brochure. This IS the brochure, and it is * still the quietest one that can carry a first sentence. * * No JavaScript, no build step, no fetch of any kind. Everything below is one file. */ :root { --ink: #212529; --ink-soft: #49545a; --paper: #edf0f2; --paper-deep: #dde1e3; --cream: #ffffff; --rust: #6e6157; --rust-soft: #f6f8f9; --muted: #58626a; --line: #dee2e6; --control-line: #ced4da; --success: #356849; --brand-taupe: #9d8b7d; --brand-charcoal: #444544; --pill: 160px; --card-radius: 16px; --block-radius: 6px; --shadow: 0 2px 3px rgba(55, 63, 67, 0.16); --control-shadow: 0 1px 2px var(--paper-deep); --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --gutter: 24px; --measure: 1060px; } * { box-sizing: border-box; } html { min-width: 320px; background: var(--paper); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; /* The office sets this on and lets it inherit. It is far too small to notice on one line * and it is most of what makes two screenshots read as one product. */ letter-spacing: 0.15px; } img, svg { max-width: 100%; } a { color: var(--rust); text-underline-offset: 2px; } a:hover { color: var(--ink); } a:focus-visible, button:focus-visible { outline: 3px solid rgba(110, 97, 87, 0.35); outline-offset: 3px; } /* ---------------------------------------------------------------- * * Chrome * ---------------------------------------------------------------- */ .site-header { position: sticky; z-index: 40; top: 0; border-bottom: 1px solid var(--line); background: var(--cream); } .site-header-inner, .wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding-right: var(--gutter); padding-left: var(--gutter); } .site-header-inner { display: flex; min-height: 64px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 10px; } /* The product's gate holds every control to 44px on touch. A wordmark that is also the home link * is a control, so it gets the same floor rather than the height its type happens to make. */ .brand { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; color: var(--rust); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; } .brand-mark { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--brand-taupe); } .brand-note { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.15px; } .site-nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; } .site-nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none; } .site-nav a:hover { color: var(--ink); } /* * `.site-nav a` is one step more specific than `.pill`, so without this the sign-in button in the * header took the nav's muted grey and rendered as grey-on-brown at about 1.2:1 — a control with * complete markup and an unreadable label, which a screenshot at a glance does not show you. */ .site-nav a.pill { color: var(--cream); font-weight: 700; } .site-nav a.pill:hover { color: var(--cream); } /* The product's own control shape: a full pill, never a soft rectangle. */ .pill { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 26px; border: 1px solid var(--rust); border-radius: var(--pill); background: var(--rust); box-shadow: var(--control-shadow); color: var(--cream); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } .pill:hover { border-color: var(--brand-charcoal); background: var(--brand-charcoal); color: var(--cream); } .pill.quiet { border-color: var(--control-line); background: var(--cream); color: var(--rust); } .pill.quiet:hover { border-color: var(--rust); background: var(--rust-soft); color: var(--rust); } /* ---------------------------------------------------------------- * * Sections * ---------------------------------------------------------------- */ main { display: block; } .band { padding-block: 44px; } .band + .band { padding-top: 0; } .band.on-white { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 44px; background: var(--cream); } .band.on-white + .band { padding-top: 44px; } .eyebrow { margin: 0 0 10px; color: var(--rust); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } h1 { max-width: 17ch; margin: 0 0 16px; color: var(--rust); font-size: clamp(27px, 4.2vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.14; } h2 { margin: 0 0 14px; color: var(--rust); font-size: clamp(20px, 2.3vw, 24px); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; } h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.32; } .lead { max-width: 62ch; margin: 0 0 14px; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.62; } .prose { max-width: 66ch; } .prose p, .section-intro { max-width: 66ch; margin: 0 0 14px; color: var(--muted); line-height: 1.7; } .section-intro { margin-bottom: 22px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .hero-aside { margin-top: 22px; color: var(--muted); font-size: 13px; } /* ---------------------------------------------------------------- * * Cards and lists * ---------------------------------------------------------------- */ .cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } .card { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--cream); } .on-white .card { background: var(--rust-soft); } .card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; } /* A stack of reasons. The rule between them is the product's own row rule. */ .reasons { display: grid; margin: 0; padding: 0; gap: 0; list-style: none; } .reasons li { padding-block: 16px; border-top: 1px solid var(--line); } .reasons li:last-child { border-bottom: 1px solid var(--line); } .reasons strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 700; } .reasons span { display: block; max-width: 78ch; color: var(--muted); font-size: 14px; line-height: 1.62; } .plain-list { max-width: 70ch; margin: 0 0 14px; padding-left: 20px; color: var(--muted); line-height: 1.7; } .plain-list li { margin-bottom: 7px; } .plain-list li::marker { color: var(--brand-taupe); } /* A quiet framed note, at the product's small-block radius rather than its card radius. */ .note { max-width: 76ch; padding: 16px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand-taupe); border-radius: var(--block-radius); background: var(--rust-soft); } .note p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.65; } .note p + p { margin-top: 10px; } .on-white .note { background: var(--paper); } /* ---------------------------------------------------------------- * * Policy pages * ---------------------------------------------------------------- */ .doc { max-width: 78ch; padding-block: 40px 8px; } .doc-meta { margin: 0 0 26px; color: var(--muted); font-size: 13px; } .doc h2 { margin-top: 34px; font-size: 19px; } .doc h3 { margin-top: 22px; color: var(--ink); font-size: 15px; } .doc p, .doc li { color: var(--ink-soft); line-height: 1.7; } .doc p { margin: 0 0 13px; } .doc ul { margin: 0 0 13px; padding-left: 20px; } .doc li { margin-bottom: 7px; } .doc li::marker { color: var(--brand-taupe); } .doc code { padding: 1px 6px; border: 1px solid var(--line); border-radius: var(--block-radius); background: var(--rust-soft); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* 0.92em rather than a smaller step: the 11px floor the product holds applies here too, and * the surrounding prose is 15px. */ font-size: 0.92em; white-space: nowrap; } .doc table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; } .doc th, .doc td { padding: 9px 16px 9px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .doc th { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 0.15px; text-transform: uppercase; white-space: nowrap; } .doc td { color: var(--ink-soft); } .table-scroll { overflow-x: auto; } /* ---------------------------------------------------------------- * * Footer * ---------------------------------------------------------------- */ .site-footer { margin-top: 44px; border-top: 1px solid var(--line); background: var(--cream); padding-block: 26px 34px; } .site-footer-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; } .site-footer p { margin: 0; color: var(--muted); font-size: 13px; } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .footer-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; } .footer-links a:hover { color: var(--ink); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { position: static; display: inline-block; padding: 10px 16px; background: var(--rust); color: var(--cream); } /* ---------------------------------------------------------------- * * Narrow * * The product's own floor is 390px, because the broker reads it on a phone. Nothing here may * scroll sideways at that width, so the gutter narrows rather than the content overflowing. * ---------------------------------------------------------------- */ @media (max-width: 620px) { :root { --gutter: 18px; } .band { padding-block: 32px; } .band.on-white { margin-top: 32px; } .band.on-white + .band { padding-top: 32px; } .site-header-inner { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: 12px 6px; } .site-nav { width: 100%; gap: 0 16px; } .site-nav .pill { margin-left: auto; } .hero-actions .pill { flex: 1 1 auto; } h1 { max-width: none; } .doc { padding-top: 30px; } }