/* ========================================================================== Abnio Analytics — www.abnio.com -------------------------------------------------------------------------- One stylesheet for the whole marketing site. Built on the SAME v7 token values the customer dashboard (frontend/src/theme/tokens.css) and the staff console already ship, so www / dash / staff resolve to one identity. House rules, carried from the product: · Flat surfaces. Borders do the work; shadows are near-absent. · No gradients, no glow, ever. · Orange is interactive/brand. Green means healthy or rising. Nothing else on the site is allowed to be green. · Monospace marks a MEASURED VALUE. Prose is never mono; a number is never anything else. Numerals are tabular so columns line up. · Light and dark are both first-class. `data-theme` on wins over the `prefers-color-scheme` default; each page stamps it pre-paint. This file replaced a 986-line sheet that had accumulated three complete redesigns stacked on top of each other, each re-declaring :root and the whole heading scale. Keep it ONE system: if a rule needs an override to work, fix the rule. ========================================================================== */ /* --- Tokens: light ------------------------------------------------------ */ :root { color-scheme: light; --ground: #f7f6f3; --surface: #ffffff; --inset: #f3f1ed; --border: #e9e6e0; --border-strong: #d9d5cd; --text: #211f1b; --muted: #6a665e; /* Matches frontend/src/theme/tokens.css exactly. Do not lighten it: --faint carries 11-13px labels (.micro, .breadcrumb, .form-privacy, .updated), so it needs the 4.5:1 small-text ratio, not the 3:1 large-text one. At #837d73 it measured 3.62:1 on --inset and failed all three grounds. */ --faint: #736d64; --accent: #c05612; --accent-ink: #ae4e12; --accent-weak: #fbede1; --on-accent: #ffffff; --good: #237a49; --good-weak: #e4f2e9; --warn: #856107; --crit: #c13a30; /* The dark band inverts locally, so it reads the same in both themes. */ --band: #1c1a18; --band-text: #f4f2ee; --band-muted: #a8a299; --band-border: #35312c; --band-accent: #e8843f; --shadow-sm: 0 1px 2px rgba(40, 32, 20, .05); --shadow: 0 1px 2px rgba(40, 32, 20, .06), 0 4px 12px rgba(40, 32, 20, .06); /* Radius varies by hierarchy — panels, controls and chips are not all the same shape. A single radius on everything is the card-kit tell. */ --r: 12px; --r-sm: 9px; --r-xs: 6px; --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; /* Type scale — restrained on purpose. Desktop values; the two breakpoint blocks near the bottom step them down and change nothing else. */ --t-h1: 38px; --t-h2: 26px; --t-h3: 17px; --t-body: 16.5px; --t-small: 14.5px; --t-micro: 11px; --gutter: 48px; --section-y: 72px; } /* --- Tokens: dark ------------------------------------------------------- */ /* Declared twice on purpose: once for the system preference (skipped when the visitor has explicitly chosen light) and once for the explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --ground: #17161a; --surface: #1e1c22; --inset: #26242b; --border: #2e2b33; --border-strong: #3f3b45; --text: #edebef; --muted: #a09b9b; --faint: #928c94; --accent: #e8843f; --accent-ink: #f2a672; --accent-weak: #2e2015; --on-accent: #1a1205; --good: #46b37b; --good-weak: #122a1d; --warn: #cfa24c; --crit: #e0685e; --band: #121115; --band-text: #edebef; --band-muted: #a09b9b; --band-border: #2e2b33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); } } :root[data-theme='dark'] { color-scheme: dark; --ground: #17161a; --surface: #1e1c22; --inset: #26242b; --border: #2e2b33; --border-strong: #3f3b45; --text: #edebef; --muted: #a09b9b; --faint: #928c94; --accent: #e8843f; --accent-ink: #f2a672; --accent-weak: #2e2015; --on-accent: #1a1205; --good: #46b37b; --good-weak: #122a1d; --warn: #cfa24c; --crit: #e0685e; --band: #121115; --band-text: #edebef; --band-muted: #a09b9b; --band-border: #2e2b33; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .35); } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--accent-weak); color: var(--text); } h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.02em; } h1 { font-size: var(--t-h1); line-height: 1.15; } h2 { font-size: var(--t-h2); line-height: 1.22; } h3 { font-size: var(--t-h3); line-height: 1.35; letter-spacing: -.01em; } p { margin: 0; } /* Keyboard focus is visible everywhere, from one rule. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: var(--r-sm); background: var(--text); color: var(--ground); font-size: var(--t-small); font-weight: 600; transform: translateY(-180%); } .skip-link:focus { transform: none; } /* --- Shared primitives -------------------------------------------------- */ .shell { width: min(1120px, calc(100% - var(--gutter))); margin-inline: auto; } /* A measured value. Never prose. */ .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } /* A small structural label. Used where it names a real thing — never stacked above every heading as decoration. */ .micro { font-family: var(--mono); font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .lede { max-width: 62ch; color: var(--muted); font-size: 17.5px; line-height: 1.62; } .section { padding-block: var(--section-y); } .section--alt { background: var(--inset); } .section + .section { border-top: 1px solid var(--border); } /* Heading block: heading left, supporting paragraph beside it. One left edge for both; nothing on this site is centred. */ .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; align-items: start; margin-bottom: 36px; } .head > p { max-width: 54ch; color: var(--muted); } .head-stack { display: grid; gap: 12px; } .grid { display: grid; gap: 1px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* A 1px-gap grid that reads as one ruled table rather than a row of floating cards — the dashboard's metric-strip treatment, reused. */ .cells { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--border); } .cells > * { background: var(--surface); } /* --- Controls ----------------------------------------------------------- */ .btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { border-color: var(--text); } .btn--primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } .btn--primary:hover { border-color: var(--accent-ink); background: var(--accent-ink); } .btn--sm { min-height: 36px; padding: 0 13px; font-size: 13.5px; } /* A text link that reads as a link without a glyph pinned to the end of it. */ .link { display: inline-block; padding-bottom: 1px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); font-size: var(--t-small); font-weight: 600; transition: border-color .15s ease; } .link:hover { border-bottom-color: var(--accent); } .chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-xs); background: var(--inset); color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; } .chip--human { background: var(--accent-weak); color: var(--accent-ink); } .chip--good { background: var(--good-weak); color: var(--good); } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(12px); transition: border-color .2s ease; } .site-header.is-scrolled { border-bottom-color: var(--border); } .nav { display: flex; min-height: 64px; align-items: center; gap: 28px; } .brand { display: inline-flex; align-items: center; gap: 9px; flex: none; font-size: 17px; font-weight: 680; letter-spacing: -.03em; } .brand-mark { position: relative; width: 24px; height: 24px; flex: none; border-radius: var(--r-xs); background: var(--text); } /* Three ascending bars — the mark is a chart, not an abstract glyph. */ .brand-mark::before { position: absolute; left: 6px; bottom: 6px; width: 3px; height: 5px; border-radius: 1px; background: var(--accent); box-shadow: 5px -3px 0 var(--accent), 10px -6px 0 var(--accent); content: ''; } .nav-links { display: flex; align-items: center; gap: 26px; margin-inline-start: 12px; color: var(--muted); font-size: var(--t-small); font-weight: 550; } .nav-links a { padding-block: 6px; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; } .nav-links a:hover { color: var(--text); } .nav-links a[aria-current='page'] { border-bottom-color: var(--accent); color: var(--text); } /* Shown only inside the mobile panel — see the 720px block. */ .nav-login { display: none; } .nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .theme-toggle, .mobile-toggle { display: inline-flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: transparent; color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; } .theme-toggle:hover, .mobile-toggle:hover { border-color: var(--border-strong); color: var(--text); } .theme-toggle svg, .mobile-toggle svg { width: 17px; height: 17px; } /* Which icon shows follows the SAME resolution order as the tokens: an explicit choice wins, otherwise the system preference decides. */ .theme-toggle .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .sun { display: none; } :root:not([data-theme='light']) .theme-toggle .moon { display: block; } } :root[data-theme='dark'] .theme-toggle .sun { display: none; } :root[data-theme='dark'] .theme-toggle .moon { display: block; } :root[data-theme='light'] .theme-toggle .sun { display: block; } :root[data-theme='light'] .theme-toggle .moon { display: none; } .mobile-toggle { display: none; } /* --- Hero --------------------------------------------------------------- */ .hero { padding-block: 64px 44px; } .hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; } .hero h1 { max-width: 19ch; } .hero-copy { margin-top: 18px; max-width: 46ch; color: var(--muted); font-size: 17px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .hero-proof { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13.5px; } .hero-proof span { display: inline-flex; align-items: center; gap: 7px; } .hero-proof span::before { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--good); content: ''; } /* --- Hero product mock -------------------------------------------------- */ /* Built from the same parts as the real dashboard: a 1px-gap metric strip with mono numerals, then a request table. Its CONTENT is the argument — browser visitors against total server requests, and how much of that traffic was a machine. */ .mock { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); } .mock-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--inset); } .mock-dots { display: flex; gap: 5px; } .mock-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); } .mock-path { color: var(--faint); font-family: var(--mono); font-size: 11.5px; } .mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; } .mock-head strong { font-size: 15px; font-weight: 640; letter-spacing: -.015em; } .mock-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--border); } .mock-metrics > div { display: grid; gap: 3px; padding: 12px 13px; background: var(--surface); } .mock-metrics small { color: var(--faint); font-size: 11px; } .mock-metrics b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .mock-metrics em { color: var(--good); font-family: var(--mono); font-size: 11px; font-style: normal; } .mock-metrics em.is-flat { color: var(--faint); } .mock-table { overflow: hidden; margin: 16px; border: 1px solid var(--border); border-radius: var(--r-sm); } .mock-table-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--inset); } .mock-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 12px; font-family: var(--mono); font-size: 12px; } .mock-row + .mock-row { border-top: 1px solid var(--border); } .mock-row > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .mock-row .status { color: var(--good); font-variant-numeric: tabular-nums; } /* The page's ONE motion moment: the request rows arrive once, then stop. It demonstrates what the product does rather than decorating the page. */ .mock-row { opacity: 0; animation: row-in .34s ease-out forwards; } .mock-row:nth-child(1) { animation-delay: .10s; } .mock-row:nth-child(2) { animation-delay: .19s; } .mock-row:nth-child(3) { animation-delay: .28s; } .mock-row:nth-child(4) { animation-delay: .37s; } .mock-row:nth-child(5) { animation-delay: .46s; } @keyframes row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- Cards -------------------------------------------------------------- */ /* Flex column rather than grid so the closing link can be pushed to the bottom with `margin-top: auto`. Cards in a row have different amounts of copy; their links still line up along one baseline. */ .card { display: flex; flex-direction: column; gap: 9px; padding: 26px 24px; background: var(--surface); } .card h3 { letter-spacing: -.015em; } .card p { color: var(--muted); font-size: var(--t-small); line-height: 1.58; } .card .link { margin-top: auto; padding-top: 12px; align-self: start; } /* The product trio carries an identifying mark, not a sequence number: the three modules are parallel, not ordered. */ .card-mark { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; margin-bottom: 4px; border-radius: var(--r-xs); background: var(--accent-weak); color: var(--accent-ink); } .card-mark svg { width: 17px; height: 17px; } .card-list { display: grid; gap: 7px; margin: 6px 0 0; padding: 0; color: var(--muted); font-size: var(--t-small); list-style: none; } .card-list li { position: relative; padding-left: 16px; line-height: 1.5; } .card-list li::before { position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--border-strong); content: ''; } /* --- Feature rows ------------------------------------------------------- */ .feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .feature + .feature { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--border); } .feature--flip .feature-visual { order: -1; } .feature-copy h2 { margin-bottom: 14px; } .feature-copy > p { max-width: 50ch; color: var(--muted); } .tick-list { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; color: var(--muted); font-size: var(--t-small); list-style: none; } .tick-list li { position: relative; padding-left: 22px; line-height: 1.5; } .tick-list li::before { position: absolute; left: 0; top: .3em; width: 14px; height: 14px; border-radius: 50%; background: var(--good-weak); content: ''; } .tick-list li::after { position: absolute; left: 4px; top: .58em; width: 5px; height: 2.5px; border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(-45deg); content: ''; } .visual { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .visual-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: var(--inset); } .visual-head strong { font-size: 13.5px; font-weight: 620; } .row-list { display: grid; } .row-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 15px; font-size: 13px; } .row-list > div + div { border-top: 1px solid var(--border); } .row-list b { color: var(--faint); font-family: var(--mono); font-size: 11px; font-weight: 600; } .row-list small { color: var(--faint); } .row-list em { color: var(--muted); font-family: var(--mono); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; } /* Generative-visibility readout: a proportion bar, not a donut. A bar is honest about a rate and stays readable at 13px; a ring is decoration. */ .rate { display: grid; gap: 14px; padding: 18px 16px; } .rate-bar { display: flex; overflow: hidden; height: 10px; border-radius: var(--r-xs); background: var(--inset); } .rate-bar i { display: block; height: 100%; } .rate-legend { display: grid; gap: 10px; } .rate-legend > div { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 13px; } .rate-legend i { width: 9px; height: 9px; border-radius: 2px; } .rate-legend small { display: block; color: var(--faint); font-size: 12px; } .rate-legend b { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; } /* --- Dark band ---------------------------------------------------------- */ .band { background: var(--band); color: var(--band-text); } .band h2 { max-width: 20ch; } .band .lede { color: var(--band-muted); } .band-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } .band-intro { display: grid; gap: 16px; justify-items: start; } .band-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; } .band-point { display: grid; gap: 7px; align-content: start; } .band-point strong { font-size: 15px; font-weight: 620; } .band-point p { color: var(--band-muted); font-size: var(--t-small); line-height: 1.55; } .band-point .micro { color: var(--band-accent); } .band .btn { border-color: var(--band-border); background: transparent; color: var(--band-text); } .band .btn:hover { border-color: var(--band-muted); } /* --- Numbered steps ----------------------------------------------------- */ /* The only numbering on the site, because installing IS a sequence. */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r); background: var(--border); } .step { counter-increment: step; display: grid; align-content: start; gap: 9px; padding: 26px 24px; background: var(--surface); } .step::before { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-weak); color: var(--accent-ink); font-family: var(--mono); font-size: 11.5px; font-weight: 700; content: counter(step); } .step p { color: var(--muted); font-size: var(--t-small); line-height: 1.55; } /* --- FAQ ---------------------------------------------------------------- */ .faq { border-top: 1px solid var(--border); } .faq details { border-bottom: 1px solid var(--border); } .faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 0; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { flex: none; margin-top: 1px; color: var(--muted); font-family: var(--mono); font-size: 17px; line-height: 1.1; content: '+'; } .faq details[open] summary { color: var(--accent-ink); } .faq details[open] summary::after { content: '\2212'; } .faq p { max-width: 74ch; padding-bottom: 20px; color: var(--muted); font-size: var(--t-small); line-height: 1.62; } /* --- CTA ---------------------------------------------------------------- */ .cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 56px; align-items: center; padding: 40px 44px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .cta-copy { display: grid; gap: 12px; } .cta h2 { max-width: 24ch; } .cta p { max-width: 54ch; color: var(--muted); } .cta .hero-actions { margin-top: 0; } /* --- Sub-page hero, breadcrumb ------------------------------------------ */ .page-hero { padding-block: 52px 46px; border-bottom: 1px solid var(--border); } .page-hero h1 { max-width: 24ch; } .page-hero .lede { margin-top: 16px; } .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--faint); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; } .breadcrumb a:hover { color: var(--text); } /* The trailing is the CURRENT PAGE, not a separator — it has to be readable. The separator is generated here instead, so no page has to type a slash and the two cannot drift apart. */ .breadcrumb span { color: var(--faint); } .breadcrumb a + span::before { margin-right: 8px; color: var(--border-strong); content: '/'; } /* The email address ships as an SVG wordmark rather than text, to make harvesting a little harder. It is painted as a MASK, not an : an SVG loaded through is an independent document, so its `fill:currentColor` resolves against that document (black) and never sees the host page — which left the mark invisible on a dark background. As a mask the colour comes from this page, so it follows the theme toggle exactly. */ .email-mark { display: block; width: 217px; height: 18px; max-width: 100%; background-color: var(--accent-ink); -webkit-mask: url('/assets/contact.svg') no-repeat left center; mask: url('/assets/contact.svg') no-repeat left center; -webkit-mask-size: contain; mask-size: contain; } /* --- Capability blocks -------------------------------------------------- */ .capability + .capability { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--border); } .capability h2 { margin-bottom: 12px; scroll-margin-top: 92px; } .capability .lede { margin-bottom: 26px; } .cap { display: grid; align-content: start; gap: 7px; padding: 22px; background: var(--surface); } .cap strong { font-size: 15px; font-weight: 620; letter-spacing: -.01em; } .cap p { color: var(--muted); font-size: var(--t-small); line-height: 1.55; } /* --- Legal pages -------------------------------------------------------- */ .legal-wrap { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 56px 80px; } .legal-nav { position: sticky; top: 88px; display: grid; gap: 2px; align-content: start; } .legal-nav .micro { margin-bottom: 8px; } .legal-nav a { padding: 5px 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; } .legal-nav a:hover { color: var(--accent-ink); } .legal { max-width: 74ch; } .legal h2 { margin: 44px 0 12px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 20px; scroll-margin-top: 92px; } .legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .legal h3 { margin: 24px 0 8px; font-size: 15.5px; } .legal p, .legal li { color: var(--muted); font-size: 15.5px; line-height: 1.68; } .legal p + p { margin-top: 12px; } .legal ul, .legal ol { display: grid; gap: 7px; margin: 12px 0; padding-left: 20px; } .legal a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); } .legal strong { color: var(--text); font-weight: 620; } .legal .cells { margin: 20px 0; } .legal .email-mark { margin-top: 18px; } .legal table { width: 100%; margin: 16px 0; border-collapse: collapse; font-size: 14px; } .legal th, .legal td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; } .legal th { background: var(--inset); font-weight: 620; } .legal-note { /* Symmetric, because a note is used both as a trailing caveat after a section and as a leading summary above the first heading — and `.legal h2:first-of-type` deliberately has no top margin of its own. */ margin-block: 28px; padding: 16px 18px; border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-sm); background: var(--surface); color: var(--muted); font-size: var(--t-small); line-height: 1.58; } .updated { color: var(--faint); font-family: var(--mono); font-size: 12px; } /* --- Data residency ----------------------------------------------------- */ .region { display: grid; align-content: start; gap: 8px; padding: 22px; background: var(--surface); } .region strong { font-size: 15px; font-weight: 620; } .region p { color: var(--muted); font-size: var(--t-small); line-height: 1.55; } .region .chip { justify-self: start; } /* --- Contact ------------------------------------------------------------ */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; padding-block: 56px 88px; } .form-card { padding: 30px 30px 32px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .form-head { margin-bottom: 22px; } .form-head h2 { font-size: 20px; } .form-head p { margin-top: 6px; color: var(--muted); font-size: var(--t-small); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .field { display: grid; gap: 6px; } .field--full { grid-column: 1 / -1; } .field label { font-size: 13.5px; font-weight: 600; } .field label span { color: var(--faint); font-weight: 500; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--ground); font-size: var(--t-small); transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { min-height: 128px; line-height: 1.55; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-weak); } /* Honeypots. Hidden from people and assistive tech, still filled by bots. */ .form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } .form-privacy { max-width: 46ch; color: var(--faint); font-size: 12.5px; line-height: 1.5; } .form-privacy a { border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-ink); } .form-status { margin-top: 14px; color: var(--muted); font-size: 13.5px; } .form-status.is-error { color: var(--crit); } .form-success { display: grid; gap: 10px; justify-items: start; padding: 30px; border: 1px solid var(--good); border-radius: var(--r); background: var(--good-weak); } .form-success h2 { color: var(--good); font-size: 19px; } .form-success p { color: var(--muted); font-size: var(--t-small); } /* An author `display` beats the UA's `[hidden] { display: none }` regardless of specificity, so the success panel would show before submission without this. contact.js flips `hidden`, and this is what makes that work. */ .form-success[hidden] { display: none; } .contact-aside { display: grid; gap: 16px; align-content: start; } .contact-block { display: grid; gap: 7px; padding: 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } .contact-block strong { font-size: 14.5px; font-weight: 620; } .contact-block p { color: var(--muted); font-size: 13.5px; line-height: 1.55; } .contact-block a { color: var(--accent-ink); font-family: var(--mono); font-size: 13.5px; } /* --- Footer ------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--inset); } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 52px 36px; } .footer-about p { margin-top: 14px; max-width: 34ch; color: var(--muted); font-size: 13.5px; line-height: 1.58; } .footer-col { display: grid; gap: 9px; align-content: start; } .footer-col .micro { margin-bottom: 3px; } .footer-col a { color: var(--muted); font-size: 13.5px; } .footer-col a:hover { color: var(--accent-ink); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; padding-block: 18px 30px; border-top: 1px solid var(--border); color: var(--faint); font-size: 12.5px; } /* --- Responsive --------------------------------------------------------- */ /* The scale steps down; the system does not change. */ /* Navigation collapses on its OWN breakpoint, earlier than everything else. Five links plus two buttons and the brand need about 763px of bar; below that the links wrap to a second row and the header looks broken. That happens well above the 720px breakpoint where the rest of the layout steps down, so the two cannot share a query. */ @media (max-width: 860px) { .nav { position: relative; } .nav-links { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 20px 14px; border: 1px solid var(--border); border-radius: 0 0 var(--r) var(--r); /* An opaque surface with depth, so the panel reads as floating above the page rather than as more page. */ background: var(--surface); box-shadow: var(--shadow); } .nav.is-open .nav-links { display: flex; } .nav-links a { padding-block: 11px; border-bottom: 1px solid var(--border); font-size: 15px; } .nav-links a:last-child { border-bottom: 0; } .mobile-toggle { display: inline-flex; } /* The header's "Log in" is dropped for width, so it moves into the panel. It is never simply removed, or returning customers lose their way in. */ .nav-login { display: block; } .nav-actions .btn:not(.btn--primary) { display: none; } } @media (max-width: 1000px) { :root { --gutter: 40px; --section-y: 64px; } .hero-grid, .feature, .band-grid, .contact-grid, .legal-wrap, .head { grid-template-columns: minmax(0, 1fr); } .hero-grid, .feature, .band-grid, .contact-grid, .legal-wrap { gap: 40px; } .head { gap: 14px; margin-bottom: 30px; } .hero { padding-block: 48px 56px; } .feature--flip .feature-visual { order: 0; } .grid--3, .grid--4, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legal-nav { position: static; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { :root { --gutter: 32px; --section-y: 52px; --t-h1: 30px; --t-h2: 23px; --t-body: 16px; } .grid--2, .grid--3, .grid--4, .steps, .band-points, .form-grid, .mock-metrics { grid-template-columns: minmax(0, 1fr); } .feature + .feature { margin-top: 44px; padding-top: 44px; } .capability + .capability { margin-top: 44px; padding-top: 44px; } .cta { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; padding: 30px 24px 32px; } .form-card { padding: 22px 20px 24px; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } .lede, .hero-copy { font-size: 16.5px; } } @media (max-width: 460px) { :root { --gutter: 28px; } .footer-grid { grid-template-columns: minmax(0, 1fr); } } /* --- Motion preference -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .mock-row { opacity: 1; animation: none; } } /* --- Print -------------------------------------------------------------- */ @media print { .site-header, .site-footer, .hero-actions, .theme-toggle, .mobile-toggle { display: none; } body { background: #fff; color: #000; } /* The hero rows start at opacity 0 and are revealed by an animation. Print does not run it, so without this the request table prints blank. */ .mock-row { opacity: 1; animation: none; } }