/* PerfHQ marketing site — shared stylesheet.
*
* Four hand-written static pages, no build step. Deployed by
* .github/workflows/website-deploy.yml (`aws s3 sync --delete` + CloudFront
* invalidation). Design tokens follow designs/spec/tokens.css for the neutrals;
* the accent is the logo orange, which is the site's own decision — the product
* UI is emerald. See designs/website-content.md for the content and the brief.
*
* Fonts are self-hosted in fonts/. They are deliberately not loaded from Google:
* hotlinking would disclose every visitor's IP address to a third party, which
* this site's privacy notice says we do not do.
*/
/* ---------------------------------------------------------------- fonts --- */
/* Inter and Plus Jakarta Sans are loaded from Google Fonts by a in each
* page's , not from this file. Both are variable fonts, so the six
* weights the design uses cost two files.
*
* Note the consequence: the visitor's browser requests them from
* fonts.googleapis.com and fonts.gstatic.com directly, which discloses their IP
* address and user agent to Google. That is disclosed in section 7 of the
* privacy notice. If it is ever removed from there, self-host these instead —
* take the `latin` @font-face blocks from the Google Fonts CSS API and serve
* the .woff2 each one points at from this directory.
*/
/* ---------------------------------------------------------------- tokens --- */
:root {
--bg: #f4f5f7;
--surface: #ffffff;
--ink: #0f1115;
--muted: #697080;
--line: #e5e7ea;
--accent: #f27d20;
/* The brand orange is only 2.7:1 on white, so it cannot carry link text in
* the light theme. `--accent` stays the brand colour and is used for marks,
* rules and tiles; `--accent-text` is the accessible companion used wherever
* the accent has to be read. In the dark theme the brand orange already
* clears 6:1, so the two are the same value there. */
--accent-text: #ad5a0a;
--tint: rgba(242, 125, 32, 0.1);
--display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--body: 'Inter', system-ui, -apple-system, sans-serif;
--wrap: 1080px;
--gutter: 28px;
--measure: 640px;
--radius: 16px;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0e1014;
--surface: #1a1e26;
--ink: #f4f5f7;
--muted: #8a92a0;
--line: #262b33;
--accent-text: #f27d20;
--tint: rgba(242, 125, 32, 0.16);
}
}
/* ------------------------------------------------------------------ base --- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
/* Wide content scrolls inside its own container; the page never does. */
overflow-x: hidden;
text-wrap: pretty;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
font-family: var(--display);
margin: 0;
}
p {
margin: 0;
}
a {
color: var(--accent-text);
text-decoration: none;
}
a:hover {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
a:focus-visible,
:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 3px;
border-radius: 4px;
}
img,
svg {
max-width: 100%;
}
/* The only emphasis treatment in the system: ink at 600 inside muted body copy. */
strong {
color: var(--ink);
font-weight: 600;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--surface);
color: var(--ink);
padding: 12px 18px;
border: 1px solid var(--line);
border-radius: 10px;
z-index: 40;
}
.skip-link:focus {
left: 16px;
top: 12px;
}
/* ---------------------------------------------------------------- layout --- */
.wrap {
max-width: var(--wrap);
margin: 0 auto;
padding: 0 var(--gutter);
}
.site-header {
position: sticky;
top: 0;
z-index: 20;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 14px;
padding-bottom: 14px;
}
.brand {
display: flex;
align-items: center;
/* 44px tall target without moving the mark off the baseline. */
padding: 8px 0;
}
.brand img {
display: block;
height: 26px;
width: auto;
}
/* The light/dark swap is a + prefers-color-scheme source rather than
* two ![]()
s toggled with display:none — browsers fetch a display:none image
* anyway, so that would download both wordmarks on every page. */
.site-nav {
display: flex;
align-items: center;
gap: 28px;
font-size: 15px;
font-weight: 500;
}
.site-nav a {
color: var(--muted);
padding: 10px 0;
}
.site-nav a[aria-current='page'] {
color: var(--accent-text);
}
main {
display: block;
}
.site-footer {
border-top: 1px solid var(--line);
background: var(--bg);
}
.site-footer .wrap {
display: grid;
gap: 18px;
padding-top: 40px;
padding-bottom: 56px;
}
.footer-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
font-size: 15px;
}
.footer-row a {
color: var(--muted);
}
.footer-legal {
color: var(--muted);
font-size: 14px;
}
/* ------------------------------------------------------------- type scale --- */
.hero {
padding: 96px 0 56px;
max-width: 820px;
}
.hero h1 {
font-weight: 800;
font-size: 60px;
line-height: 1.06;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.hero p {
font-size: 21px;
line-height: 1.5;
color: var(--muted);
max-width: 660px;
}
.page-head {
padding: 88px 0 56px;
max-width: 760px;
}
.page-head h1 {
font-weight: 800;
font-size: 52px;
line-height: 1.08;
letter-spacing: -0.03em;
margin-bottom: 20px;
}
.page-head p {
font-size: 20px;
line-height: 1.5;
color: var(--muted);
}
/* The privacy notice leads with a masthead and a callout rather than a subhead. */
.page-head--notice {
padding: 80px 0 40px;
max-width: 720px;
}
.page-head--notice .meta {
font-size: 15px;
margin-bottom: 28px;
}
.lead {
font-size: 18px;
}
.lead-lg {
font-size: 19px;
line-height: 1.6;
}
.body-muted {
color: var(--muted);
}
/* -------------------------------------------------------------- sections --- */
/* Two-column section: a rail on the left, the body on the right. */
.rail {
padding: 80px 0 0;
display: grid;
grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
gap: 48px;
align-items: start;
scroll-margin-top: 88px;
}
/* Home uses a narrower rail with a small muted label rather than a heading. */
.rail--eyebrow {
padding-top: 88px;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}
.rail--eyebrow > h2 {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.02em;
color: var(--muted);
padding-top: 8px;
}
.rail > h2 {
font-weight: 700;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* First section on a page already has the page head's bottom padding above it. */
.rail--first {
padding-top: 0;
}
.rail-last {
padding-bottom: 96px;
}
.prose {
display: grid;
gap: 20px;
max-width: var(--measure);
}
.stack-12 {
display: grid;
gap: 12px;
max-width: var(--measure);
}
/* ----------------------------------------------------------- components --- */
.card {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 24px;
display: grid;
gap: 8px;
align-content: start;
}
.card h3 {
font-weight: 700;
font-size: 17px;
}
.card p {
color: var(--muted);
font-size: 15px;
}
/* The access notice on Home, and the lede on Privacy. */
.panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
padding: 32px 36px;
display: grid;
gap: 14px;
max-width: 760px;
}
.panel h2 {
font-weight: 700;
font-size: 20px;
letter-spacing: -0.01em;
}
.panel p {
color: var(--muted);
}
/* Audience cards on Home. */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: 16px;
}
.cards .card {
padding: 26px;
gap: 12px;
}
.cards .card h3 {
font-size: 18px;
}
.tile {
width: 34px;
height: 34px;
border-radius: 10px;
background: var(--tint);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 800;
font-size: 14px;
color: var(--accent-text);
}
/* The capability index on Home — full-width rows inside one card. */
.rows {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.rows a {
display: grid;
grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
gap: 20px;
padding: 20px 24px;
border-bottom: 1px solid var(--line);
color: var(--ink);
text-decoration: none;
}
.rows a:last-child {
border-bottom: 0;
}
.rows a:hover {
background: var(--tint);
color: var(--ink);
text-decoration: none;
}
.rows .row-label {
font-weight: 600;
font-size: 16px;
}
.rows .row-note {
color: var(--muted);
font-size: 15px;
}
/* The two large cards on Home. */
.split {
padding: 88px 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 16px;
}
.split .card {
padding: 32px;
gap: 16px;
}
.split .card h2 {
font-weight: 700;
font-size: 24px;
line-height: 1.25;
letter-spacing: -0.015em;
}
.split .card p {
font-size: 16px;
}
.aside-note {
font-size: 15px;
font-style: italic;
color: var(--muted);
border-left: 2px solid var(--accent);
padding-left: 14px;
}
/* Get the app. */
.cta {
padding: 88px 0 96px;
}
.cta .card {
padding: 40px;
gap: 24px;
justify-items: start;
}
.cta h2 {
font-weight: 700;
font-size: 28px;
letter-spacing: -0.02em;
}
.appstore {
display: flex;
align-items: center;
gap: 12px;
background: var(--ink);
color: var(--bg);
border-radius: 14px;
padding: 14px 22px;
min-height: 44px;
font-family: var(--display);
font-weight: 700;
font-size: 16px;
text-decoration: none;
}
.appstore:hover {
opacity: 0.88;
color: var(--bg);
text-decoration: none;
}
.cta .fineprint {
display: grid;
gap: 6px;
}
.cta .fineprint p {
color: var(--muted);
font-size: 15px;
}
/* Section index on Features. */
.index-nav {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 20px 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 14px;
font-weight: 500;
}
.index-nav a {
color: var(--muted);
}
/* Lists. */
.list-dash,
.list-term,
.list-kv {
margin: 0;
padding: 24px;
list-style: none;
display: grid;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
max-width: var(--measure);
}
.list-dash {
gap: 12px;
}
.list-dash li {
display: grid;
grid-template-columns: 16px 1fr;
gap: 12px;
color: var(--muted);
font-size: 15px;
}
.list-dash li::before {
content: '—';
color: var(--accent-text);
}
.list-term {
gap: 14px;
}
.list-term li {
display: grid;
gap: 4px;
font-size: 15px;
}
.list-term .term {
font-weight: 600;
}
.list-term .def {
color: var(--muted);
}
/* Retention list on Privacy: label left, period right, figures aligned. */
.list-kv {
gap: 14px;
max-width: none;
}
.list-kv li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
font-size: 15px;
align-items: baseline;
}
.list-kv li .k {
color: var(--muted);
}
.list-kv li .v {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.list-kv li.stacked {
grid-template-columns: 1fr;
gap: 4px;
}
.list-kv li.stacked .k {
color: var(--ink);
font-weight: 600;
}
.list-kv li.stacked .v {
color: var(--muted);
font-weight: 400;
}
.subcards {
display: grid;
gap: 12px;
}
/* Tables on Privacy. Wide content scrolls in its own container. */
.tablewrap {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow-x: auto;
max-width: 100%;
}
.tablewrap table {
border-collapse: collapse;
width: 100%;
font-size: 15px;
}
.tablewrap th {
text-align: left;
padding: 16px 20px;
border-bottom: 1px solid var(--line);
font-weight: 600;
font-size: 14px;
color: var(--muted);
}
.tablewrap td {
padding: 14px 20px;
border-bottom: 1px solid var(--line);
color: var(--muted);
vertical-align: top;
}
.tablewrap tbody tr:last-child td {
border-bottom: 0;
}
.tablewrap td:first-child {
font-weight: 500;
color: var(--ink);
}
.table--permissions table {
min-width: 440px;
}
.table--providers table {
min-width: 600px;
}
/* Privacy article and its sticky contents. */
.article-layout {
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: 56px;
align-items: start;
}
.toc {
position: sticky;
top: 96px;
display: grid;
gap: 8px;
font-size: 14px;
border-top: 1px solid var(--line);
padding-top: 20px;
}
.toc a {
color: var(--muted);
}
.article {
display: grid;
gap: 56px;
max-width: 680px;
}
.article > section {
display: grid;
gap: 16px;
scroll-margin-top: 96px;
}
.article h2 {
font-weight: 700;
font-size: 26px;
letter-spacing: -0.02em;
}
.article h3 {
font-weight: 700;
font-size: 18px;
}
.article p {
color: var(--muted);
line-height: 1.65;
}
.article .card h3 {
font-size: 17px;
}
.article .card p {
font-size: 15px;
}
/* Support: contact pair and the questions list. */
.contact-pair {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 12px;
}
.contact-pair .card p {
color: var(--ink);
font-size: 15px;
}
.contact-pair .card a {
font-family: var(--display);
font-weight: 700;
font-size: 16px;
}
/* Deliberately all open rather than an accordion: nine short answers read
* faster than nine disclosure widgets, and the page stays findable with
* in-page search. */
.faq {
display: grid;
max-width: var(--measure);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
overflow: hidden;
}
.faq > div {
padding: 24px;
border-bottom: 1px solid var(--line);
display: grid;
gap: 8px;
}
.faq > div:last-child {
border-bottom: 0;
}
.faq h3 {
font-weight: 700;
font-size: 17px;
}
.faq p {
color: var(--muted);
font-size: 15px;
}
/* --------------------------------------------------------- responsive --- */
@media (max-width: 820px) {
.rail,
.rail--eyebrow,
.article-layout {
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.rail--eyebrow > h2 {
padding-top: 0;
}
.prose,
.stack-12,
.list-dash,
.list-term,
.faq {
max-width: none;
}
/* The contents list stops being a sidebar and stops being sticky. */
.toc {
position: static;
grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
gap: 8px 20px;
}
.article {
max-width: none;
}
.hero h1 {
font-size: 48px;
}
.page-head h1 {
font-size: 44px;
}
}
@media (max-width: 560px) {
:root {
--gutter: 20px;
}
.hero {
padding: 56px 0 40px;
}
.hero h1 {
font-size: 38px;
}
.hero p {
font-size: 18px;
}
.page-head {
padding: 56px 0 40px;
}
.page-head h1 {
font-size: 36px;
}
.page-head p {
font-size: 18px;
}
.rail,
.rail--eyebrow,
.split,
.cta {
padding-top: 56px;
}
.rail-last,
.cta {
padding-bottom: 64px;
}
.rail > h2 {
font-size: 24px;
}
.article {
gap: 44px;
}
.article h2 {
font-size: 23px;
}
.panel {
padding: 24px;
}
.split .card,
.cta .card {
padding: 24px;
}
.lead-lg {
font-size: 17px;
}
/* Label above description rather than beside it. */
.rows a {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* -------------------------------------------------------------- print --- */
@media print {
.site-header,
.site-footer,
.toc,
.index-nav,
.skip-link {
display: none;
}
body {
background: #fff;
color: #000;
font-size: 11pt;
}
.article-layout {
grid-template-columns: 1fr;
}
.article > section {
break-inside: avoid;
}
a {
color: #000;
text-decoration: underline;
}
}