/* Cronitor marketing v5 — shared tokens + components (locked aesthetic) */
:root, [data-theme="light"] {
--bg: #FFFFFF; --panel: #FAFAF8; --rule: #E4E4E0; --rule-strong: #0B0021;
--ink: #0B0021; --body: #3E3B52; --muted: #6E6B80;
--accent: #2E16B5; --accent-soft: #EEEBFB;
/* the glyphs' live moment (CAPABILITY GLYPHS): the palette's up green */
--accent-2: var(--up);
--green: #00DF4D; --up: #00B833; --down: #E62144; --gold: #F5C51C;
--card-shadow: 0 1px 2px rgba(11,0,33,0.06);
--alert-bg: #FFFFFF; --band-bg: #0B0021; --band-text: #EFEDEA; --band-muted: #9B98AC;
--band-rule: #2A2735; --band-accent: #9D8CFF;
--logo: url("cronitor-logo.bbb5e4d2893d.svg"); --logofilter: none;
/* incident lifecycle — status pages only, mirrors the app's ISSUE_STATE_BADGE_COLORS */
--inc-investigating: #FF354C; --inc-identified: #FB923C;
--inc-monitoring: #44B2FD; --inc-resolved: #00DF4D;
/* RUM load-time series — app RUM_PERFORMANCE_DIMENSIONS. Series identities, not statuses. */
--rum-frontend: #7C46EC; --rum-network: #FACC15; --rum-backend: #00961C;
}
[data-theme="dark"] {
--bg: #0E0E12; --panel: #15151A; --rule: #26262E; --rule-strong: #EFEDEA;
--ink: #EFEDEA; --body: #B9B7C4; --muted: #807E8C;
--accent: #9D8CFF; --accent-soft: #1E1A33;
--green: #00F770; --up: #00F770; --down: #FF354C; --gold: #F5C51C;
--card-shadow: 0 12px 32px rgba(0,0,0,0.45);
--alert-bg: #17171D; --band-bg: #15151A; --band-text: #EFEDEA; --band-muted: #807E8C;
--band-rule: #26262E; --band-accent: #9D8CFF;
--logo: url("cronitor-logo-light.b228d5deb878.svg"); --logofilter: invert(0.88) brightness(1.1);
--inc-investigating: #FF354C; --inc-identified: #FB923C;
--inc-monitoring: #44B2FD; --inc-resolved: #00F770;
}
* { box-sizing: border-box; }
html { border-top: 3px solid var(--gold); }
body { background: var(--bg); color: var(--ink); font-family: "JetBrains Mono", monospace; }
.sans { font-family: "Instrument Sans", sans-serif; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
a { color: inherit; }
h1, h2, h3 { letter-spacing: -0.025em; }
/* nav */
nav.site { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--bg); z-index: 50; }
/* `>` matters: the nav row is the wrap that is a DIRECT child of the nav.
A dropdown panel inside the nav carries its own .wrap so its columns
land on the page's content column, and a descendant selector here made
that panel a 66px centred flex row. */
nav.site > .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo {
width: 122px;
height: 30px;
background: var(--logo) no-repeat left center / contain;
margin-top: -7px;
background-image: url("cronitor-nav-logo.b4857294586b.svg");
}
nav.site a.nl { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 500; }
nav.site a.nl:hover { color: var(--accent); }
nav.site .spacer { flex: 1; }
.btn { display: inline-block; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 600;
padding: 11px 20px; text-decoration: none; border-radius: 2px; border: 1px solid var(--ink); font-family: inherit; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.theme-toggle { cursor: pointer; border: 1px solid var(--rule); background: transparent; color: var(--muted);
border-radius: 2px; padding: 8px 10px; font-size: 12px; font-family: inherit; }
/* type helpers */
@keyframes blink { 50% { opacity: 0; } }
.cursor { display: inline-block; width: 0.14em; height: 0.85em; background: var(--accent); margin-left: 8px;
vertical-align: baseline; opacity: 0.8; animation: blink 1.3s steps(1) infinite; }
.seclabel { font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted); display: flex; justify-content: space-between; }
.seclabel b { color: var(--accent); font-weight: 500; }
.agent-note { font-size: 12px; color: var(--muted); }
.agent-note a { color: var(--accent); text-decoration: none; }
/* monitor board */
.figure { border: 1px solid var(--rule-strong); background: var(--bg); border-radius: 3px; overflow: hidden; box-shadow: var(--card-shadow); }
.chrome { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--rule);
background: var(--panel); font-size: 11px; color: var(--muted); }
.health i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0 5px 0 10px; }
.health .u { background: var(--up); } .health .d { background: var(--down); }
.board { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--bg); }
.board td { padding: 11px 9px; border-top: 1px solid var(--rule); white-space: nowrap; }
.board td:first-child { padding-left: 16px; }
.board em { font-style: normal; font-size: 9px; letter-spacing: 0.08em; color: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 2px 5px; border-radius: 2px; }
.ticks i { display: inline-block; width: 5px; height: 13px; border-radius: 1px; background: var(--green); margin-right: 2px; opacity: 0.9; }
.st { text-align: right; padding-right: 16px !important; color: var(--up); }
@keyframes rowFail { to { background: color-mix(in srgb, var(--down) 11%, var(--bg)); } }
@keyframes tickFail { to { background: var(--down); } }
@keyframes stFail { to { color: var(--down); font-weight: 700; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.fail-1 { animation: rowFail 0.3s 1.2s forwards; }
.fail-1 .st { animation: stFail 0.3s 1.2s forwards; }
.fail-1 .ticks i:nth-last-child(-n+2) { animation: tickFail 0.3s 1.2s forwards; }
.fail-2 { animation: rowFail 0.3s 2.6s forwards; }
.fail-2 .st { animation: stFail 0.3s 2.6s forwards; }
.fail-2 .ticks i:last-child { animation: tickFail 0.3s 2.6s forwards; }
.alert { position: absolute; width: 248px; background: var(--alert-bg); border: 1px solid var(--rule-strong);
border-radius: 3px; padding: 10px 12px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 14%, transparent);
font-size: 11px; opacity: 0; z-index: 5; }
.alert .arow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.alert .chan { font-size: 10px; color: var(--muted); }
.alert b { display: block; font-size: 11.5px; color: var(--down); font-weight: 600; }
.alert .chip { display: inline-block; font-size: 9px; color: #fff; border-radius: 2px; padding: 2px 6px; }
.alert.slack .chip { background: #4A154B; }
.alert.pd .chip { background: #04AC38; }
.alert.em .chip { background: #B23121; }
/* logo cells */
.logocell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
padding: 22px 8px; }
.logocell img { height: 24px; max-width: 88%; object-fit: contain;
filter: brightness(0) saturate(100%) invert(0.44); }
[data-theme="dark"] .logocell img { filter: brightness(0) saturate(100%) invert(0.6); }
/* THE OPTICAL TABLE. `height` here is a CEILING, not the rendered height:
`.logocell img` also carries `max-width` and `object-fit: contain`, so for
any mark wider than ~4:1 the WIDTH cap binds first and the authored height
is never reached. That is why this table does not — and cannot — agree with
the marquee's `h` in v5-shared.js, which is a true rendered height because
`.lm-item img` is `max-width: none`. Johnson & Johnson is the clearest
case: 38px here against 12px there, but 10.27:1 under a 97% cap renders
~16.5px tall on the wall. The two numbers describe different quantities
under different sizing regimes; they are not a discrepancy to reconcile.
(Reported rather than "fixed" — see LOGO-WALL-SPEC.md §1.)
AngelList retired 2026-08-27 with the churn; it is on no page. */
.logocell img[alt="Disney"] { height: 34px; max-width: 96%; }
.logocell img[alt="Johnson & Johnson"] { height: 38px; max-width: 97%; }
/* marks added in the 2026-08-27 refresh whose artwork is not a plain
horizontal wordmark, so the 24px default reads wrong. Ratios measured from
the shipped files. */
/* Keygen needs no height override — it is the full icon+wordmark lockup at
4.73:1, which renders 114px at the default 24px. */
/* Pure-lowercase wordmarks whose box top is set by a lone ascender read low
when the box is centred. -6% is the measured fit; -8% over-corrects.
`%` not `px` deliberately — translateY(%) resolves against the element's
own height, so one rule is right at both 24px and the wall's 30px. */
.logocell img[alt="Meesho"],
.logocell img[alt="Zendesk"] { transform: translateY(-6%); }
.logocell img[alt="Control Plane"] { height: 33px; } /* two-line stacked, 2.88:1 */
.logocell img[alt="Primary"] { height: 42px; max-width: 96%; } /* arched emblem, 1.75:1 */
.logocell img[alt="Good Eggs"] { height: 32px; } /* two-line horizontal lockup, 3.365:1 */
.logocell img[alt="Ravelry"] { height: 26px; } /* 3.21:1 */
.logocell img[alt="Razer"] { height: 22px; } /* 6.30:1 */
.logocell img[alt="Stadium Goods"] { max-width: 96%; } /* 9.70:1 — max-width binds before height */
.logocell img[alt="ZenGaming"] { max-width: 96%; } /* 9.16:1 — widest in the set */
.logocell img[alt="Reddit"] { filter: grayscale(1) brightness(1.25) opacity(0.82); }
[data-theme="dark"] .logocell img[alt="Reddit"] { filter: grayscale(1) invert(0.75); }
.logocell span { display: none; }
.logocell:hover { background: var(--accent-soft); }
/* Customer wall: a row-major sequential deal, coordinated by v5-motion.
The resting state is the complete wall. Only the running controller ghosts
the marks, so a fast scroll, missing JS, or reduced motion never exposes an
empty grid. The wrapper owns motion because several marks carry optical
translateY corrections on the image itself. */
.logowall .grid[data-logo-deal] .logocell { position: relative; perspective: 480px; }
.logowall .grid[data-logo-deal] .logo-mark {
display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
opacity: 1; transform: none; backface-visibility: hidden;
transition: opacity 120ms var(--ease-shift), transform 120ms var(--ease-shift);
}
.logowall .grid[data-logo-deal].is-sequencing .logo-mark { will-change: transform, opacity; }
.logowall .grid[data-logo-deal].is-sequencing .logocell.is-waiting .logo-mark {
opacity: 0.16; transform: scale(0.96);
}
.logowall .grid[data-logo-deal].is-sequencing .logocell.is-dealing .logo-mark {
animation: logoDealIn 300ms var(--ease-enter) both;
}
@keyframes logoDealIn {
0% { opacity: 0.16; transform: translateX(var(--logo-slide)) rotateY(var(--logo-turn)) scale(0.92); }
72% { opacity: 1; transform: translateX(var(--logo-bump)) rotateY(0) scale(1.025); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.logowall .grid[data-logo-deal] .logocell,
.logowall .grid[data-logo-deal] .logo-mark {
animation: none !important; transition: none !important;
opacity: 1 !important; transform: none !important; box-shadow: none !important;
}
}
/* mini-figures */
.minifig { border: 1px solid var(--rule-strong); background: var(--bg); border-radius: 3px; overflow: hidden;
box-shadow: var(--card-shadow); font-size: 11.5px; }
.minifig .pad { padding: 15px; }
@keyframes lineIn { from { opacity: 0; } to { opacity: 1; } }
.loglines div { padding: 6px 0; border-top: 1px dashed var(--rule); color: var(--body); opacity: 0; animation: lineIn 0.15s forwards; }
.loglines div:first-child { border-top: 0; }
.loglines div:nth-child(1) { animation-delay: 0.2s; } .loglines div:nth-child(2) { animation-delay: 0.5s; }
.loglines div:nth-child(3) { animation-delay: 0.8s; } .loglines div:nth-child(4) { animation-delay: 1.1s; }
.loglines div:nth-child(5) { animation-delay: 1.4s; }
.loglines .t { color: var(--muted); margin-right: 10px; }
.loglines .okk { color: var(--up); }
@keyframes grow { from { width: 0; } }
.latrow { display: grid; grid-template-columns: 86px 1fr 52px; gap: 12px; align-items: center; padding: 7px 0; color: var(--body); }
.latrow .bar { height: 8px; border-radius: 1px; background: var(--accent); opacity: 0.85; animation: grow 0.8s ease-out both; }
.latrow:nth-child(2) .bar { animation-delay: 0.15s; } .latrow:nth-child(3) .bar { animation-delay: 0.3s; }
.latrow:nth-child(4) .bar { animation-delay: 0.45s; } .latrow:nth-child(5) .bar { animation-delay: 0.6s; }
.latrow .v { text-align: right; color: var(--muted); }
.ssl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--up); font-size: 11px; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); } 60% { box-shadow: 0 0 0 9px transparent; } }
.hbrow { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; padding: 8px 0;
border-top: 1px dashed var(--rule); color: var(--body); }
.hbrow:first-child { border-top: 0; }
.hbrow i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); animation: pulse 2.2s infinite; }
.hbrow:nth-child(2) i { animation-delay: 0.4s; } .hbrow:nth-child(3) i { animation-delay: 0.9s; } .hbrow:nth-child(4) i { animation-delay: 1.3s; }
.hbrow .t { color: var(--muted); font-size: 10.5px; }
@keyframes tickIn { from { opacity: 0; transform: scaleY(0.3); } to { opacity: 1; transform: none; } }
.sp-title { display: flex; align-items: center; gap: 9px; color: var(--up); font-weight: 600; padding-bottom: 12px; font-size: 12.5px; }
.sp-title i { width: 9px; height: 9px; border-radius: 50%; background: var(--up); animation: pulse 2.6s infinite; }
.uprow { padding: 8px 0; border-top: 1px solid var(--rule); color: var(--body); }
.uprow .lbl { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; }
.uprow .lbl b { color: var(--up); font-weight: 500; }
.upticks i { display: inline-block; width: 4px; height: 15px; border-radius: 1px; background: var(--green);
margin-right: 1.5px; animation: tickIn 0.3s both; }
.upticks i.dn { background: var(--down); }
.upticks i:nth-child(3n) { animation-delay: 0.1s; } .upticks i:nth-child(3n+1) { animation-delay: 0.25s; }
@keyframes draw { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
.rum svg polyline { stroke-dasharray: 700; animation: draw 1.6s ease-out forwards; }
.rumstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; border: 1px solid var(--rule); }
.rumstats div { padding: 10px 12px; border-right: 1px solid var(--rule); }
.rumstats div:last-child { border-right: 0; }
.rumstats b { display: block; font-size: 17px; color: var(--ink); }
.rumstats span { font-size: 9px; color: var(--muted); letter-spacing: 0.06em; }
/* feature copy */
.kicker { font-size: 11px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 14px; }
.fcopy h2 { font-size: 25px; font-weight: 700; line-height: 1.25; margin-bottom: 14px; }
.fcopy p { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.65; color: var(--body); margin-bottom: 16px; }
.fcopy ul { list-style: none; margin-bottom: 22px; padding: 0; }
.fcopy li { font-size: 13px; color: var(--body); padding: 4px 0 4px 24px; position: relative; }
.fcopy li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }
/* integration fan-out */
.route { position: relative; border: 1px solid var(--band-rule); border-radius: 3px; padding: 22px; font-size: 11.5px; }
.route .src { display: inline-block; border: 1px solid var(--down); color: var(--down); border-radius: 2px;
padding: 8px 12px; margin-bottom: 26px; }
.route .dests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--band-rule); }
.route .dest { border-right: 1px solid var(--band-rule); border-bottom: 1px solid var(--band-rule);
padding: 10px 12px; color: var(--band-muted); }
.route .dest:nth-child(3n) { border-right: 0; }
.route .dest:nth-child(n+10) { border-bottom: 0; }
@keyframes routePulse { 0% { opacity: 0.2; } 12% { opacity: 1; color: var(--band-text);
background: color-mix(in srgb, var(--band-accent) 22%, transparent); } 30%,100% { opacity: 0.75; background: transparent; } }
.route .dest { animation: routePulse 6s infinite; }
.route .dest:nth-child(1) { animation-delay: 0.2s; } .route .dest:nth-child(2) { animation-delay: 0.6s; }
.route .dest:nth-child(3) { animation-delay: 1.0s; } .route .dest:nth-child(4) { animation-delay: 1.4s; }
.route .dest:nth-child(5) { animation-delay: 1.8s; } .route .dest:nth-child(6) { animation-delay: 2.2s; }
.route .dest:nth-child(7) { animation-delay: 2.6s; } .route .dest:nth-child(8) { animation-delay: 3.0s; }
.route .dest:nth-child(9) { animation-delay: 3.4s; } .route .dest:nth-child(10) { animation-delay: 3.8s; }
.route .dest:nth-child(11) { animation-delay: 4.2s; } .route .dest:nth-child(12) { animation-delay: 4.6s; }
/* Every other looping component in this sheet has a `reduce` branch; this one
did not, so the only infinite animation on the page stayed live for exactly
the reader who asked for it not to. The resting frame of routePulse is
30%–100% of the cycle — opacity 0.75, transparent fill — so stating that
statically IS the finished drawing, not a blank one. */
@media (prefers-reduced-motion: reduce) {
.route .dest { animation: none; opacity: 0.75; }
}
/* The shared motion coordinator owns authored content motion. CSS timelines
inside an idle/paused figure must not keep speaking while another figure
has the page-wide lock. Interactive hover/focus feedback lives outside
[data-v5-motion] and is intentionally unaffected. */
[data-v5-motion-state="idle"] *,
[data-v5-motion-state="paused"] * {
animation-play-state: paused !important;
}
/* footer */
footer.site { border-top: 1px solid var(--rule-strong); padding: 48px 0 40px; background: var(--panel); }
footer.site .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
footer.site h4 { font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 14px; font-weight: 500; }
footer.site a { display: block; color: var(--body); text-decoration: none; font-size: 12px; padding: 3.5px 0; }
footer.site a:hover { color: var(--accent); }
footer.site .logo { margin-bottom: 12px; }
footer.site .fine { font-size: 10px; color: var(--muted); margin-top: 16px; line-height: 1.7; }
/* quotes / cases */
.qcard { padding: 24px; }
.qcard p { font-family: "Instrument Sans", sans-serif; font-size: 13.5px; line-height: 1.6; color: var(--body); margin-bottom: 18px; }
.qcard b { display: block; font-size: 12px; }
.qcard span { font-size: 10.5px; color: var(--muted); }
.ccard { padding: 24px; text-decoration: none; color: var(--ink); display: block; }
.ccard:hover { background: var(--accent-soft); }
.ccard em { font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; color: var(--accent); }
.ccard p { font-family: "Instrument Sans", sans-serif; font-size: 15px; line-height: 1.5; margin: 10px 0 12px; }
.ccard span { font-size: 11px; color: var(--muted); }
.ornament { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: 0.5em; }
/* company attribution logos */
.cologo { height: 17px; object-fit: contain; display: block; margin-top: 9px; }
.cologo.inline { display: inline-block; height: 13px; vertical-align: -3px; margin: 0 0 0 6px; }
[data-theme="dark"] .cologo { filter: grayscale(1) invert(0.85) brightness(1.4); }
/* case study plates (dark in both themes — real logos, real titles, real quotes) */
.casecard { background: var(--panel); color: var(--ink); padding: 28px; display: block; text-decoration: none; }
.casecard:hover { background: var(--accent-soft); }
.casecard .clogo { height: 24px; display: block; margin-bottom: 18px; }
.casecard em { font-style: normal; font-size: 9.5px; letter-spacing: 0.12em; color: var(--accent); }
.casecard h3 { font-family: "Instrument Sans", sans-serif; font-size: 17px; line-height: 1.4; margin: 10px 0; color: var(--ink); font-weight: 600; letter-spacing: 0; }
.casecard q { display: block; font-family: "Instrument Sans", sans-serif; font-size: 12.5px; line-height: 1.6; color: var(--body); margin-bottom: 16px; }
.casecard .rm { font-size: 11px; color: var(--accent); }
/* integration fan-out marks */
.dest img { height: 15px; vertical-align: -3px; margin-right: 9px; }
/* grouped board: type headers instead of per-row chips */
.board .ghead td { padding: 8px 16px 6px; font-size: 9px; letter-spacing: 0.14em; color: var(--muted);
background: var(--panel); border-top: 1px solid var(--rule); font-weight: 600; }
.board .ghead:first-child td { border-top: 0; }
/* bands are light now — remap the band palette to the page palette */
.band { --band-bg: var(--panel); --band-text: var(--ink); --band-muted: var(--body);
--band-rule: var(--rule); --band-accent: var(--accent); }
.band .btn { background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.band .btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
/* typographic integration cells (no borrowed logo art) */
.dest b { display: block; font-weight: 600; font-size: 12px; color: var(--band-text); margin-bottom: 3px; }
.dest span { display: block; font-size: 10px; color: var(--band-muted); }
.clogo.inv { filter: invert(0.93); }
[data-theme="dark"] .clogo.inv { filter: none; }
/* third failure in the sequence (job -> heartbeat -> check) */
.fail-3 { animation: rowFail 0.3s 4.0s forwards; }
.fail-3 .st { animation: stFail 0.3s 4.0s forwards; }
.fail-3 .ticks i:last-child { animation: tickFail 0.3s 4.0s forwards; }
/* ---------- product page grammar ---------- */
.phero { padding: 72px 0 80px; }
.phero .wrap { display: grid; grid-template-columns: 46% 54%; gap: 52px; align-items: center; }
.phero .kicker { font-size: 11px; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 16px; }
.phero h1 { font-size: 46px; font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 24px; }
.phero .checks { list-style: none; padding: 0; margin: 0 0 30px; }
.phero .checks li { font-family: "Instrument Sans", sans-serif; font-size: 15px; color: var(--body); padding: 5px 0 5px 26px; position: relative; }
.phero .checks li::before { content: "✓"; position: absolute; left: 0; color: var(--up); font-weight: 700; font-family: "JetBrains Mono", monospace; }
.phero .cta-row { display: flex; gap: 12px; }
.phero .stage { position: relative; }
/* HERO / MARQUEE RIGHT RULE. Hero drawings are 600px frames inside either a
600px or 620px stage, with a hard-offset plate painted beyond the frame.
Align the OUTER plate—not the foreground border—to the marquee's right rule:
auto consumes any spare stage width, then `right` pulls the frame back by
the plate depth. Page-local `margin: 0` continues to own stacked layouts;
this shared desktop rule is the paired-hero alignment contract. */
@media (min-width: 1152px) {
.phero .stage > :first-child {
--hero-backplate-offset: 8px;
margin-left: auto;
right: var(--hero-backplate-offset);
}
}
.phero .agent-note { margin-top: 20px; }
/* capability grid: 3-col ruled cells */
.capgrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; }
.cap { padding: 20px 22px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cap:nth-child(3n) { border-right: 0; }
.cap b { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.cap p { font-family: "Instrument Sans", sans-serif; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.cap:hover { background: var(--accent-soft); }
/* code figure with tabs */
.codefig { border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; box-shadow: var(--card-shadow); }
.codetabs { display: flex; border-bottom: 1px solid var(--rule); background: var(--panel); font-size: 10.5px; color: var(--muted); }
.codetabs span { padding: 10px 14px; border-right: 1px solid var(--rule); cursor: pointer; }
.codetabs span.on { color: var(--accent); background: var(--bg); font-weight: 600; }
.codefig pre { margin: 0; padding: 18px; font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: 1.75; color: var(--body); overflow-x: auto; background: var(--bg); }
.codefig .cmt { color: var(--muted); }
.codefig .hl { color: var(--accent); }
/* stats strip (real numbers from live site) */
.stats {
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--panel);
margin-bottom: 20px;
}
.stats .grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.stats .cell { padding: 26px 20px; border-right: 1px solid var(--rule); }
.stats .cell:last-child { border-right: 0; }
.stats b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.stats span { font-size: 9.5px; letter-spacing: 0.08em; color: var(--muted); }
/* cross-sell strip: five tools */
/* A modest, shared transition into One Platform. This replaces the old large
per-template top padding without letting the label collide with a preceding
border (most visibly when it follows the stats strip). */
.platform-head { padding-top: 24px; }
/* .platform — section wrapper for the strip. Owns the component's own vertical
rhythm so pages don't restate it: 24px above matches .capsection (44px clear of
the section-head), 46px below pairs with the following section's 10px top pad for
the 56px gap signed off on the Jobs page. */
/* ---------- COMPONENT: "FROM THE FIELD" PROOF BLOCK ---------------------
One bordered frame divided into three cells: the rotating testimonial as a
full-width top cell, two case studies sharing the row beneath it.
The rotator's OWN border is dissolved here and replaced by a shared hairline
against the case-study row. That is the whole trick — .fieldblock already
supplies the strong border and 3px radius, so leaving the component's frame
on would nest a box inside a box, which this system never does. Gutters are
pulled to 28px so the quote, the attribution and the case-study logos all
land on the same vertical rules.
Usage:
v5-shared.js fills in the rotator and both case studies.
NOTE: .fieldsec encodes the home page's 72px rhythm. Pages with a tuned gap
(e.g. the 56px the cross-sell strip sets up) should bring their own section
wrapper and use .fieldblock alone, or .fieldsec will silently overwrite it. */
.fieldsec { padding: 72px 0; }
.fieldsec .seclabel { padding-bottom: 12px; }
.fieldblock { border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; }
.fieldblock .quoterotator { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
padding: 30px 28px; align-content: center; }
/* data-cases="none": testimonial only, no case-study row. The rotator is then the
frame's only cell, so its bottom hairline has nothing to divide and comes off. */
.fieldblock.fb-solo .quoterotator { border-bottom: 0; }
.fieldblock .fb-cases { display: grid; grid-template-columns: 1fr 1fr; }
.fieldblock .fb-cases .casecard { border-right: 1px solid var(--rule); }
.fieldblock .fb-cases .casecard:last-child { border-right: 0; }
.xsell { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; }
.xsell a { padding: 18px; border-right: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.xsell a:last-child { border-right: 0; }
.xsell a:hover { background: var(--accent-soft); }
.xsell em { font-style: normal; font-size: 9px; letter-spacing: 0.1em; color: var(--muted); display: block; margin-bottom: 10px; }
.xsell b { display: block; font-size: 13.5px; margin-bottom: 6px; }
.xsell p { font-family: "Instrument Sans", sans-serif; font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.xsell a.here { background: var(--accent-soft); }
.xsell a.here em { color: var(--accent); }
/* ---------- product figure library (moved from layout-d) ---------- */
/* JOBS figure — job status cards (current-site concept, restyled) */
.jcard { border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--bg); padding: 14px 16px; margin-bottom: 12px; font-size: 11.5px; }
.jcard:last-child { margin-bottom: 0; }
.jtop { display: flex; justify-content: space-between; margin-bottom: 10px; }
.jtop b { font-size: 12.5px; }
.jtop span { color: var(--muted); }
.jprog { height: 6px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
@keyframes fillbar { from { width: 0; } to { width: 74%; } }
.jprog i { display: block; height: 100%; background: var(--accent); animation: fillbar 2.4s 0.4s ease-out both; }
.jmeta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.jmeta .run { color: var(--accent); }
.jcard.failcard { border-color: color-mix(in srgb, var(--down) 55%, var(--rule)); }
.jcard.failcard .jmeta .bad { color: var(--down); font-weight: 600; }
/* CHECKS figure — url node + radiating assertions (current-site concept) */
.ckurl { border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--bg); padding: 10px 14px;
font-size: 12px; text-align: center; width: fit-content; margin: 0 auto; }
.ckstem { width: 1px; height: 16px; background: var(--rule-strong); margin: 0 auto; }
.ckgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@keyframes ckIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ck { border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); padding: 10px 12px; font-size: 10.5px;
color: var(--body); animation: ckIn 0.35s both; }
.ck b { color: var(--up); font-weight: 600; margin-right: 6px; }
.ck:nth-child(1) { animation-delay: 0.3s; } .ck:nth-child(2) { animation-delay: 0.65s; }
.ck:nth-child(3) { animation-delay: 1.0s; } .ck:nth-child(4) { animation-delay: 1.35s; }
/* HEARTBEATS figure — event stream timelines (current-site concept) */
.hstream { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px dashed var(--rule); }
.hstream:first-child { border-top: 0; }
.hstream .hl { font-size: 10.5px; color: var(--muted); }
.hdots { display: flex; justify-content: space-between; align-items: center; }
@keyframes dotIn { from { opacity: 0; } to { opacity: 1; } }
.hdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); animation: dotIn 0.2s both; }
.hdots i:nth-child(1) { animation-delay: 0.1s; } .hdots i:nth-child(2) { animation-delay: 0.35s; }
.hdots i:nth-child(3) { animation-delay: 0.6s; } .hdots i:nth-child(4) { animation-delay: 0.85s; }
.hdots i:nth-child(5) { animation-delay: 1.1s; } .hdots i:nth-child(6) { animation-delay: 1.35s; }
.hdots i:nth-child(7) { animation-delay: 1.6s; } .hdots i:nth-child(8) { animation-delay: 1.85s; }
.hdots i:last-child { animation-name: dotIn, pulse; animation-duration: 0.2s, 2.2s; animation-delay: 1.85s, 2.1s; animation-iteration-count: 1, infinite; }
.hdots i.gap { background: transparent; border: 1.5px solid var(--down); animation-name: dotIn; }
.hnote { font-size: 10px; color: var(--down); text-align: right; padding-top: 8px; }
/* ---------- THE SWEEP: motion signature + causal timing system ---------- */
:root {
--ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
--ease-shift: cubic-bezier(0.2, 0, 0, 1);
--ease-data: cubic-bezier(0.45, 0, 0.55, 1);
--time-micro: 110ms; --time-state: 180ms; --time-shift: 320ms; --time-enter: 420ms;
}
.sweepline { position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
background: var(--accent); opacity: 0.55; z-index: 4; pointer-events: none; }
.sweepline::after { content: ""; position: absolute; top: 0; left: -2px; width: 5px; height: 3px; background: var(--accent); }
[data-sweep-board] td { font-variant-numeric: tabular-nums; }
tr.preprint td { color: transparent; }
tr.preprint .ticks i, tr.preprint em { opacity: 0; }
tr td, tr .ticks i, tr em { transition: color 60ms steps(1, end), opacity 120ms var(--ease-shift); }
tr.swept-fail { background: color-mix(in srgb, var(--down) 8%, var(--bg)); box-shadow: inset 2px 0 0 var(--down); }
.st.st-bad { color: var(--down) !important; font-weight: 700; }
.ticks i.tick-bad { background: var(--down); }
/* alert cards: hidden until swept; controlled settle, no bounce */
.alert.sweep-card, .toast.sweep-card { opacity: 0; animation: none; }
@keyframes alertSettle {
0% { opacity: 0; transform: translate3d(24px, 0, 0); }
82% { opacity: 1; transform: translate3d(-2px, 0, 0); }
100% { opacity: 1; transform: none; }
}
.alert.sweep-card.alert-on, .toast.sweep-card.alert-on { animation: alertSettle var(--time-enter) var(--ease-enter) forwards; }
/* backplate depth: the instrument sits on a plate, consequences escape it.
MUST be a box-shadow, not a `z-index:-1` ::before. A negative-z-index child
paints above its own stacking context's background AND border, but below
in-flow descendants — so a pseudo-element plate with an opaque --panel fill
(a) erased the slab's right + bottom --rule-strong border, (b) flooded the
interior, since .top/.copycell/.boardcell are all transparent, and (c) drew
its own hairline 7px INSIDE the top/left edges. Read: content inset from a
frame top-left, spilling past a pale line bottom-right. An outer box-shadow
paints strictly outside the border box and under the element's own border,
so it cannot erase the frame or tint the content. */
/* THE BASE RULE. This sheet used to ship `.slab.backplate` and not `.slab`, so
every page that used a slab redeclared the base locally — four properties
copied N times, with `.backplate` below depending on the `overflow: hidden`
it could not see. component-library 07 logged it as a known gap. */
.slab { border: 1px solid var(--rule-strong); border-radius: 3px; overflow: hidden; position: relative; }
.slab.backplate { overflow: visible !important; background: var(--bg);
box-shadow: 7px 7px 0 0 var(--panel), 7px 7px 0 1px var(--rule); }
.slab.backplate .boardcell, .slab.backplate .top { border-radius: 3px 3px 0 0; }
.slab.backplate .statusbar { border-radius: 0 0 3px 3px; }
/* ---------- attribution headshots (press-credential treatment) ---------- */
.qcard .who { display: flex; align-items: flex-start; gap: 14px; margin-top: 4px; }
.qcard .who img.face { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--rule-strong);
border-radius: 2px; filter: grayscale(1) contrast(1.04); transition: filter var(--time-state, 180ms) var(--ease-shift, ease); flex: none; }
.qcard:hover .who img.face { filter: grayscale(0) contrast(1); }
[data-theme="dark"] .qcard .who img.face { filter: grayscale(1) contrast(0.95) brightness(0.92); }
[data-theme="dark"] .qcard:hover .who img.face { filter: grayscale(0) brightness(0.98); }
.qcard .who .meta b { display: block; font-size: 12px; }
.qcard .who .meta span { font-size: 10.5px; color: var(--muted); }
.qcard .who .meta img.cologo { margin-top: 7px; }
.qcard .who .initials { width: 56px; height: 56px; flex: none; border: 1px solid var(--rule-strong);
border-radius: 2px; background: var(--panel); display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
/* attribution: name / role · company / customer since */
.qcard .who .meta { display: block !important; min-height: 0 !important; margin-top: -4px; }
.qcard .who .meta b { display: block; font-size: 13px; line-height: 1.4; }
.qcard .who .meta .role { display: block; font-family: "Instrument Sans", sans-serif; font-size: 13px;
line-height: 1.4; color: var(--body); letter-spacing: 0; }
.qcard .who .meta .since { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--muted);
line-height: 1.4; margin-top: 6px; }
/* h1 cursor retired — the blinking caret at the end of headlines was distracting.
Kept as a no-op so existing markup/flap logic stays valid. */
h1 .cursor { display: none; }
/* ============================================================
LOGO MARQUEE
One continuous row of customer marks, no dividers. Hydrated by
v5-shared.js out of the existing `.logos .grid` markup, so page HTML
needs no changes. The `.lm` class is added by the script; the extra
class beats the per-page `.logos .grid { display:grid }` rules on
specificity without needing !important.
Motion: the track holds the list twice and translates by -50%, so the
wrap is invisible. It is parked by default and moves only while hovered.
Only `transform` animates. Duration is set inline by the script from the
measured set width (constant px/sec).
============================================================ */
.logos .grid.lm { display: block; padding: 0; border-left: 0; border-right: 0;
grid-template-columns: none; }
.logos .grid.lm .lm-viewport { height: 96px; overflow: hidden; position: relative;
border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.logos .grid.lm .lm-track { display: flex; width: max-content; height: 100%;
align-items: center; will-change: transform; transform: translate3d(0, 0, 0);
animation: lm-scroll 60s linear infinite; animation-play-state: paused; }
/* Hover is direct interaction: move while engaged, then hold that position.
A background tab stays paused even if the pointer remains over the strip. */
.logos .grid.lm:hover .lm-track { animation-play-state: running; }
.logos .grid.lm .lm-track.is-paused { animation-play-state: paused; }
.logos .grid.lm .lm-set { display: flex; height: 100%; align-items: center;
margin: 0; padding: 0; list-style: none; }
.logos .grid.lm .lm-item { flex: 0 0 auto; display: flex; height: 100%;
align-items: center; justify-content: center; padding: 0 var(--lm-gap, 30px); }
.logos .grid.lm .lm-item img { display: block; width: auto; max-width: none;
user-select: none; -webkit-user-drag: none;
filter: grayscale(1) brightness(var(--lm-tone, 1)); }
[data-theme="dark"] .logos .grid.lm .lm-item img {
filter: grayscale(1) brightness(var(--lm-tone, 1)) invert(1); }
@keyframes lm-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* prefers-reduced-motion: the FULL list, wrapped, no animation.
------------------------------------------------------------------------
THIS BLOCK USED TO HIDE MOST OF THE MARKS FROM THE PEOPLE WHO ASKED FOR
LESS MOTION. It set `width: 100%` on the track and `justify-content:
space-between` on the set while `.lm-item` stayed `flex: 0 0 auto` and
`.lm-viewport` stayed `overflow: hidden` at a fixed 96px/72px. A
non-shrinking row is not made to fit by `space-between`: it simply
overflows and the viewport eats it. Measured at 375: nine items summing
751px in a 335px box — five marks entirely invisible, a sixth half-cut.
The bug was invisible to every gate because the marquee's viewport is
allowlisted in the clip gate (e1), and that blessing is only legitimate
while the ribbon is ACTUALLY SCROLLING: a ribbon longer than its frame is
the component when it moves, and is hidden content when it does not.
**Do not allowlist `.lm-viewport` when `.is-static` is present.**
Three things make it right, and they only work together:
1. `flex-wrap: wrap` on the set, so a row that does not fit becomes rows;
2. `height: auto` on the viewport, the track, the set and the items, so
the extra rows have somewhere to go — the fixed 96px (72px below md)
is what turned wrapping into clipping;
3. `align-content` + `row-gap`, so the wrapped rows are spaced like rows
and not jammed against the top edge.
`overflow: hidden` is deliberately KEPT: with 1+2+3 nothing overflows, so
the clip gate can now assert that honestly instead of being told to look
away. */
.logos .grid.lm.is-static .lm-track { animation: none; width: 100%; height: auto; }
.logos .grid.lm.is-static .lm-viewport { height: auto; }
.logos .grid.lm.is-static .lm-set { width: 100%; height: auto;
flex-wrap: wrap; justify-content: center; align-items: center;
align-content: center; row-gap: 16px;
padding: 22px var(--lm-gap, 30px); }
.logos .grid.lm.is-static .lm-item { height: auto; padding: 0 var(--lm-gap, 30px); }
@media (prefers-reduced-motion: reduce) {
.logos .grid.lm .lm-track { animation: none; }
}
/* ============================================================
COMPONENT — ALERT TOAST
One component, many payloads. Used wherever Cronitor notifies
a human: hero figures, product figures, integration fan-outs.
Anatomy:
.toast the card
.toast-head chip + destination on one line
.toast-chip platform badge (Slack, PagerDuty…)
.toast-dest where it went (#ops-alerts, on-call: primary)
.toast-msg the event, one line, status-coloured
.toast-meta optional second line (muted, sparse)
Status: default = down/red. .is-up = recovery. .is-warn = degraded.
Motion: .is-hidden then .is-in → settle from the right, no bounce.
Layout: static by default; add .is-float + inline top/right for figures,
or wrap several in .toast-stack for a pile.
============================================================ */
.toast { width: 248px; background: var(--alert-bg); border: 1px solid var(--rule-strong);
border-radius: 3px; padding: 10px 12px; font-size: 11px;
box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 14%, transparent); }
.toast-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.toast-chip { display: inline-block; font-size: 9px; line-height: 1.5; color: #fff;
background: var(--ink); border-radius: 2px; padding: 2px 6px; white-space: nowrap; }
.toast-dest { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast-msg { display: block; font-size: 11.5px; font-weight: 600; color: var(--down); }
.toast-msg::before { content: "● "; }
.toast-meta { display: block; margin-top: 5px; font-size: 10px; color: var(--muted); }
.toast.is-up .toast-msg { color: var(--up); }
.toast.is-up .toast-msg::before { content: "✓ "; }
.toast.is-warn .toast-msg { color: var(--gold); }
.toast.is-warn .toast-msg::before { content: "▲ "; }
/* platform chips — brand colour is allowed here (it identifies a third party) */
.toast-chip.slack { background: #4A154B; }
.toast-chip.pagerduty { background: #04AC38; }
.toast-chip.email { background: #B23121; }
.toast-chip.sms { background: #2E6F9E; }
.toast-chip.teams { background: #4B53BC; }
.toast-chip.discord { background: #5865F2; }
.toast-chip.opsgenie { background: #172B4D; }
.toast-chip.telegram { background: #2AABEE; }
.toast-chip.webhook { background: var(--accent); }
/* entrance */
.toast.is-hidden { opacity: 0; }
.toast.is-in { animation: alertSettle var(--time-enter) var(--ease-enter) forwards; }
.toast.is-float { position: absolute; z-index: 5; }
.toast-stack { display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
.toast.is-hidden { opacity: 1; }
.toast.is-in { animation: none; }
}
/* ============================================================
THE HERO ALERT STACK — ONE PLACEMENT FOR EVERY HERO.
Six heroes raise an alert over a 600px figure and, until this rule existed,
all six placed it differently: `right:-24/top:64`, `right:-30/top:-53`,
`right:-26/bottom:-52`, `right:-70/bottom:-44`, plus the homepage's own
ladder. Four of them also carried a private media query to drop the card
into the flow, at four different breakpoints (643.98 / 645.98 / 683.98 /
689.98), each derived from that page's own overhang, each with its own
forty-line comment explaining the derivation. That is five copies of one
decision, and the next person to move the corner would have moved one of
them.
WEAR `herostack` ON THE POSITIONED WRAPPER — the box that already carries
`position: relative` and the 600px figure track — and the cards inside it
are placed by this rule alone. A page supplies its CARDS and, if its frame
is inset inside that wrapper, its SHOULDER. It does not supply geometry.
THE CARD NEVER JOINS THE FLOW. That is the substantive change and it is what
removes the dead band: an in-flow card has to be RESERVED (or the figure
reflows mid-story), and a reservation is a hole in the page for every frame
the card is not up — 140px of it under the homepage board at 375, between
the figure and the logo marquee. Absolute at every width means the stage is
exactly as tall as its figure, there is nothing to reserve, and nothing can
shift. The card overhangs the frame's top-right corner instead, which is
where it already sat on desktop.
THE OVERHANG IS A BUDGET, NOT A TASTE. `--hero-card-overhang` is the negative
margin that moves the card past the frame's right rule, and it is capped by
the gutter: the shared wrap gutter is 20px below md and 40px from md, so the
card hangs 30px at md and up and sits FLUSH below it. Flush rather than 20px
because the entrance still travels 24px sideways (alertSettle), and 20 + 24
would push the document 4px wider than the viewport while it animates —
a transient overflow a persistent-only clip gate cannot see. Below md the
entrance is swapped for a vertical one instead, which is the same fix the
homepage needed and which the four product pages were all still missing.
`--hero-card-rise` is how far it clears the frame's top edge. 20px: a
stacked hero has 36px of `.phero .wrap` gap above its figure, so the card
still leaves 16px of air under the copy. Do not raise it without checking
that gap — it is the only thing between the card and the CTA row.
`--hero-card-slot` is the card's index in the stack, 0 for a hero with one
card and written by the page's script for a hero with several. It must be
DERIVED from the frame's own state, never accumulated, or seeking and
scrubbing backwards land on stale offsets.
============================================================ */
.herostack {
--hero-card-overhang: 0;
/* past the frame's right rule */
--hero-card-rise: 20px;
/* above the frame's top rule */
--hero-card-pitch: 69px;
/* card height + gap; only used past slot 0 */
--hero-frame-shoulder: 0px;
/* frame inset inside this wrapper, if any */
}
@media (min-width: 768px) {
.herostack {
--hero-card-overhang: -30px;
}
}
.herostack>.toast.is-float,
.herostack>.alert.sweep-card,
.herostack>.toast.sweep-card {
position: absolute;
/* Keep the two lengths out of calc(): Yuglify turns 0px custom properties
into unitless 0, which invalidates mixed length arithmetic at runtime. */
right: var(--hero-frame-shoulder);
margin-right: var(--hero-card-overhang);
top: calc(var(--hero-card-slot, 0) * var(--hero-card-pitch) - var(--hero-card-rise));
bottom: auto;
left: auto;
transition: top var(--time-shift) var(--ease-shift);
}
/* A CARD THAT IS NOT ON SCREEN JUMPS, IT DOES NOT SLIDE. Off-screen cards park
at the bottom of the stack so an arriving alert never travels, but the
stack's depth changes underneath them — transitioning that is an invisible
box moving for no reason, and it makes the geometry unmeasurable in flight.
The only slide left is the one a reader is meant to see: a visible card
moving up into space a withdrawal has just vacated. */
.herostack>.toast.is-hidden,
.herostack>.alert.sweep-card:not(.alert-on):not(.alert-out) {
transition: none;
}
/* THE ENTRANCE COMES FROM THE FLOW'S DIRECTION WHEN THERE IS NO GUTTER TO FLY
IN FROM. alertSettle starts at translate3d(24px,0,0), which is right for a
card arriving past the right edge of a figure that has room beside it. Below
md there is no room: the card is flush with the frame and those 24px are
4px of horizontal document overflow for the ~400ms of the entrance.
Measured at 375 on the homepage: scrollWidth 379 against clientWidth 375,
transient, which is exactly why a persistent-only clip gate never saw it.
Only `animation-name` is overridden, so duration, easing and fill still come
from the rule above. */
@keyframes heroLand {
0% {
opacity: 0;
transform: translate3d(0, 7px, 0);
}
100% {
opacity: 1;
transform: none;
}
}
@media (max-width: 767.98px) {
.herostack>.toast.is-in,
.herostack>.alert.sweep-card.alert-on,
.herostack>.toast.sweep-card.alert-on {
animation-name: heroLand;
}
}
@media (prefers-reduced-motion: reduce) {
.herostack>.toast.is-float,
.herostack>.alert.sweep-card,
.herostack>.toast.sweep-card {
transition: none;
}
}
/* ============================================================
COMPONENT — QUOTE ROTATOR
The six customer testimonials, one at a time. Same anatomy as
the cards on the Customers page: headshot + name / role · company
/ CUSTOMER SINCE. Swaps every 7s, pauses on hover, fixed height
so the page never reflows.
Usage:
============================================================ */
.quoterotator { border: 1px solid var(--rule-strong); border-radius: 3px; padding: 30px 34px;
display: grid; grid-template-columns: 1fr 250px; gap: 40px; align-items: center; min-height: 132px; }
.quoterotator .qr-slot { position: relative; }
.quoterotator .qr-q { font-family: "Instrument Sans", sans-serif; font-size: 16px; line-height: 1.6;
color: var(--body); margin: 0; }
.quoterotator .qr-who { display: flex; align-items: flex-start; gap: 14px; }
.quoterotator .qr-who img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--rule-strong);
border-radius: 2px; filter: grayscale(1) contrast(1.04); flex: none;
transition: filter var(--time-state) var(--ease-shift); }
.quoterotator:hover .qr-who img { filter: grayscale(0) contrast(1); }
[data-theme="dark"] .quoterotator .qr-who img { filter: grayscale(1) contrast(0.95) brightness(0.92); }
[data-theme="dark"] .quoterotator:hover .qr-who img { filter: grayscale(0) brightness(0.98); }
.quoterotator .qr-meta { margin-top: -4px; }
.quoterotator .qr-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; }
.quoterotator .qr-role { display: block; font-family: "Instrument Sans", sans-serif; font-size: 13px;
line-height: 1.4; color: var(--body); }
.quoterotator .qr-since { display: block; font-size: 10px; letter-spacing: 0.1em; color: var(--muted);
line-height: 1.4; margin-top: 6px; }
.quoterotator .qr-fade { animation: qrIn 320ms var(--ease-enter) both; }
@keyframes qrIn { from { opacity: 0; transform: translate3d(0, 5px, 0); } to { opacity: 1; transform: none; } }
.quoterotator .qr-dots { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.quoterotator .qr-dots i { width: 14px; height: 2px; background: var(--rule); display: block; cursor: pointer; }
.quoterotator .qr-dots i.on { background: var(--accent); }
.quoterotator .qr-idx { margin-left: auto; font-size: 9.5px; letter-spacing: 0.12em; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .quoterotator .qr-fade { animation: none; } }
/* ============================================================
COMPONENT — CAPABILITY GLYPHS
Small graphical marks for the capability grids on product pages.
Reference sheet: _capglyphs.html.
Usage:
v5-shared.js builds the mark and runs the sweep. Adding a glyph to
another grid is one attribute per cell plus one on the grid.
GRAMMAR
Every glyph is the same 48x28 instrument (28x28 in the square): a 1px
--rule bezel over a --bg plate, marks drawn as one inline SVG on whole
pixels, inset 3px from the bezel. Every glyph is a miniature of the
data shape its concept actually produces, never a pictogram of it.
Three inks. --muted for context. --accent (violet) for history and the
subject, on one ladder: 1 for the subject, 0.55 for history, 0.3 for
context, a 0.12 fill. --accent-2 for the live moment — the running
job, the latest beat, the visitor, the check just added — once per
glyph, and last in its entrance. --accent-2 is --up, the same green
as a healthy monitor: the live moment is the system working. Gold and
red stay reserved for monitor state. No gradients, no blur, no glow.
MOTION
The rules below are the RESTING state, which is also the FINAL state,
so a glyph that never plays — reduced motion, JS off, an observer that
never fires — is already correct and legible. Motion is scoped to
.is-play only, one entrance per glyph under 550ms, and animates
transform / opacity / clip-path only, with steps(1) for discrete marks.
============================================================ */
/* PLACEMENT — the kicker row becomes a chrome bar: label left,
instrument flush right. Because it is flush right the glyphs land on a
shared vertical edge down the grid and read as a column — a set, at a
glance. Quotes .seclabel and .fchrome, which already do this. */
.gchrome { display: flex; align-items: center; justify-content: space-between;
gap: 20px; min-height: 28px; }
/* a cell with no kicker to pair with — the instrument still hangs right */
.gchrome.is-bare { justify-content: flex-end; }
/* the chrome bar carries the kicker's leading, so the heading tightens up.
Scoped through [data-glyph] so it outranks per-page .pcell/.cap rules. */
[data-glyph] .gchrome + h3,
[data-glyph] .gchrome + b { margin-top: 10px; }
.capglyph { position: relative; flex: none; display: block; width: 48px; height: 28px;
border: 1px solid var(--rule); background: var(--bg); overflow: hidden; font-size: 0; }
/* ---- SQUARE VARIANT — 28x28, for a LEADING position ----
Opt in with data-glyph-size="sq" on the cell or any ancestor of it
(the nav puts it once on .nm-grid). 28 is the landscape mark's own
height, so the vertical grid is the same grid and only the width
moves. Each mark is REDRAWN for the square, not rescaled: a scale()
puts every hairline on a fractional device pixel. */
.capglyph.is-sq { width: 28px; height: 28px; }
/* discrete marks step in — no fade on something that is either on or off */
@keyframes cgStep { from { opacity: 0; } }
/* ---- MARKS — product: jobs · checks · heartbeats · statuspages · sites;
capability: performance · coverage · alerts ----
Drawn by productGlyphSvg() (v5-shared.js and app/src/components/
productGlyphSvg.js, twins). The SVG covers the whole box; the box's own
border is the bezel. Paint classes: f- fill, s- stroke; ac = --accent,
mu = --muted, ru = --rule, k2 = --accent-2, soft = --accent-soft. */
.capglyph > .cg-svg { position: absolute; left: -1px; top: -1px; display: block; overflow: hidden; }
.cg-svg .f-ac { fill: var(--accent); }
.cg-svg .f-mu { fill: var(--muted); }
.cg-svg .f-ru { fill: var(--rule); }
.cg-svg .f-k2 { fill: var(--accent-2); }
.cg-svg .f-soft { fill: var(--accent-soft); }
.cg-svg .f-bg { fill: var(--bg); }
.cg-svg .s-ac, .cg-svg .s-mu, .cg-svg .s-ru, .cg-svg .s-k2 { fill: none; stroke-width: 1; }
.cg-svg .s-ac { stroke: var(--accent); }
.cg-svg .s-mu { stroke: var(--muted); }
.cg-svg .s-ru { stroke: var(--rule); }
.cg-svg .s-k2 { stroke: var(--accent-2); }
.cg-svg polyline, .cg-svg .ln { stroke-linejoin: round; stroke-linecap: round; }
/* the visitor's cursor keeps a plate-coloured outline so it reads over the line */
.cg-svg .cur { stroke: var(--bg); stroke-width: 0.8; stroke-linejoin: round; paint-order: stroke; }
/* motion: context, then history, then the green live moment last */
.capglyph.is-play .x-sweep { animation: cgSweep 520ms var(--ease-data) both; transform-box: view-box; }
@keyframes cgSweep { from { opacity: 0.2; transform: rotate(-275deg); } }
.capglyph.is-play .x-pop, .capglyph.is-play .x-ping, .capglyph.is-play .x-up, .capglyph.is-play .x-bar,
.capglyph.is-play .x-grow { transform-box: fill-box; }
.capglyph.is-play .x-pop { animation: cgPop 200ms var(--ease-enter) both; animation-delay: var(--d, 0ms);
transform-origin: center; }
@keyframes cgPop { from { opacity: 0; transform: scale(0.2); } }
/* one ping: overshoot, then settle at the resting opacity */
.capglyph.is-play .x-ping { animation: cgPing 420ms var(--ease-enter) both; animation-delay: var(--d, 0ms);
transform-origin: center; }
@keyframes cgPing { 0% { opacity: 0; transform: scale(0.2); } 45% { opacity: 1; transform: scale(1.5); } 100% { transform: scale(1); } }
.capglyph.is-play .x-wipe { animation: cgWipe 520ms var(--ease-data) both; }
@keyframes cgWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.capglyph.is-play .x-up { animation: cgUp 160ms var(--ease-data) both; animation-delay: var(--d, 0ms);
transform-origin: bottom; }
@keyframes cgUp { from { transform: scaleY(0); } }
.capglyph.is-play .x-step { animation: cgStep 1ms steps(1, end) both; animation-delay: var(--d, 0ms); }
.capglyph.is-play .x-fade { animation: cgFade 260ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@keyframes cgFade { from { opacity: 0; } }
.capglyph.is-play .x-cursor { animation: cgCursor 320ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@keyframes cgCursor { from { opacity: 0; transform: translate(5px, 5px); } }
.capglyph.is-play .x-bar { animation: cgGrow 200ms var(--ease-shift) both; animation-delay: var(--d, 0ms);
transform-origin: left; }
@keyframes cgGrow { from { transform: scaleX(0); } }
/* jobs: a bar fills while the playhead crosses it, so both run linear on one clock */
.capglyph.is-play .x-grow { animation: cgGrow var(--t, 100ms) linear both; animation-delay: var(--d, 0ms);
transform-origin: left; }
.capglyph.is-play .x-ph { animation: cgPlayhead var(--t, 480ms) linear both; }
@keyframes cgPlayhead { from { transform: translateX(var(--from, 0px)); } }
.capglyph.is-play .x-arc { animation: cgArc 300ms var(--ease-enter) both; animation-delay: var(--d, 0ms);
transform-box: view-box; }
@keyframes cgArc { from { opacity: 0; transform: translateX(-2px); } }
/* alerts: the notification card arrives from the right */
.capglyph.is-play .x-slide { animation: cgSlide 300ms var(--ease-enter) both; animation-delay: var(--d, 0ms); }
@keyframes cgSlide { from { opacity: 0; transform: translateX(8px); } }
/* the whole design has to stand without motion, and here it does: the
resting state above IS the finished drawing. */
@media (prefers-reduced-motion: reduce) {
.capglyph *, .capglyph *::after { animation: none !important; }
}
/* ============================================================
COMPONENT — TOP-NAV DROPDOWN MENUS
Built by v5-shared.js out of the plain `Product` / `Developers`
links every page already ships. No page markup changes.
PRODUCT is full width. Five cells will not fit under a trigger
180px from the left edge without either stacking to two rows or
shrinking below the width the descriptions need, and the strip
already has a full-width precedent on this site: the cross-sell.
The panel bleeds edge to edge, but the CELLS sit in a .wrap, so
its five columns land on exactly the x positions of the
cross-sell strip further down the same page. Two views of one
object, aligned.
DEVELOPERS is anchored: five one-line rows, ~330px, measured off
its trigger. A full-width panel for five short rows would be a
mostly-empty band across the viewport.
DEPTH is a hard offset, never blur. The anchored
panel takes the alert card's 4px 4px 0; the full-bleed panel
takes a bottom-only offset, because a right-hand offset on an
edge-to-edge panel is a shadow with nothing to fall on.
MOTION is 130ms of opacity and a 4px lift, and nothing else. The
panel is hidden with `visibility`, not `display`, so it holds a
real box from first paint — which is what lets the capability
glyphs inside it draw once at load, before the menu is ever
opened, and lets `visibility: hidden` keep the links out of the
tab order and the accessibility tree while closed.
============================================================ */
/* THE TRIGGER'S RESET AND TYPE ARE NOT NAV-SPECIFIC; ITS COLOURS ARE.
This declaration used to be one `nav.site .nm-trigger` block bundling a UA
button reset (background/border/padding/font-family) with the nav type and
the nav hover colour. That made a component impossible to document or reuse:
a `.nm-trigger` standing anywhere but inside a `nav.site` rendered as a
default browser button, which is why component-library 24 had to point at
the live nav instead of showing a specimen. Split, so the reset travels with
the class and only the palette stays scoped.
The reset is at (0,1,0) on purpose. Inside the nav it is *supposed* to lose
to the sheet's `nav.site > .wrap > .nl` (0,3,1) below lg — it already did,
since the old (0,2,1) form lost to it too — and there is no other rule in
the sheet that matches the trigger, so desktop is unchanged. Verified by
computed style at 1440: identical before and after. */
.nm-trigger { display: inline-flex; align-items: center; gap: 7px;
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted);
background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.2; }
nav.site .nm-trigger:hover,
nav.site .nm-trigger[aria-expanded="true"] { color: var(--accent); }
nav.site .nm-trigger:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* 1px chevron — same hairline grammar as the rules and glyphs, not an icon */
.nm-caret { width: 5px; height: 5px; margin-top: -3px; flex: none;
border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
transform: rotate(45deg); transition: transform var(--time-state) var(--ease-shift); }
.nm-trigger[aria-expanded="true"] .nm-caret { transform: rotate(225deg) translate(-2px, -2px); }
/* `top: 100%; margin-top: 1px`, NOT a calc() adding the 1px: the production
bundle goes through yuglify, whose cssmin strips the spaces around `+`
inside calc(), which is invalid CSS. The browser dropped the whole `top`
and the panel opened over the nav bar. The 1px steps over nav.site's
bottom rule. See tests/v5-shared.test.js. */
.nm-panel { position: absolute; top: 100%; margin-top: 1px; z-index: 1;
background: var(--bg); opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(-4px);
transition: opacity 130ms var(--ease-shift), transform 130ms var(--ease-shift),
visibility 0s 130ms; }
.nm-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto;
transform: none; transition-delay: 0s, 0s, 0s; }
.nm-panel a:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.nm-wide { left: 0; right: 0; border-bottom: 1px solid var(--rule-strong);
box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 8%, transparent); }
.nm-anchor { left: 0; width: 330px; border: 1px solid var(--rule-strong); border-radius: 2px;
box-shadow: 4px 4px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
/* ---- PRODUCT: a five-cell ruled row, the cross-sell strip's geometry ----
TWO ROWS, not four. The cell used to run: chrome bar (`01` left,
instrument right) / name / description / `Learn more →`. Both ends of
that went:
- the `01`–`05` index earns its place in the cross-sell strip, where it
numbers five ordered products on a page. In a menu it is an ordinal
nobody navigates by, and it was the only reason the instrument needed
a row to itself.
- `Learn more →` repeated five times inside five links, in a panel
where every row is a link by definition. The sibling Developers menu
never had one; with it, the two menus in one nav disagreed about what
a menu row is. The hover fill and the accent name are the affordance.
So the instrument moves down beside the NAME, pairing the mark with the
thing it measures instead of with a number.
Placement is explicit grid, which means the component's DOM order
(chrome, name, description) is untouched — the glyph component still
inserts its own bare .gchrome ahead of everything and knows nothing
about this. */
.nm-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
/* WHY THE INSTRUMENT LEADS THE NAME, AND WHAT IT COST.
The cell is 216px at 1280 and 36px of that is padding, so 180px of
content. Leading with the 48x28 landscape mark takes 58 of those 180,
which is a third of the cell handed to a decoration, and the name is
shunted 58px right of its own description. That is why the mark had to
be redrawn square first: the 28x28 variant costs 40px including its
gap — 22% of the cell instead of 32% — and the name still clears its
longest string, `Status Pages`, by 28px inside the 140px that leaves.
WHERE THE DESCRIPTION ALIGNS: the cell's left edge, not the name's.
Both were built and looked at, and the arithmetic decides it before
taste gets a vote. Measured on the live page, at 13.5px Instrument
Sans / 1.6 the five descriptions all hold TWO lines down to a 153px
measure and the longest two break to three at 152. Indenting the
description to the name leaves 180 - 40 = 140px. So a name-aligned
description is three lines for `Share uptime on a public or private
status page.` and `Track website traffic, errors, and performance.`
while the other three stay at two — the shared baseline gone, which is
the whole thing this layout exists to protect. Getting a name-aligned
description back to 153px would need the glyph and its gap under 27px
TOTAL, and a ~20px instrument is a smudge, not an instrument.
(This is where the previous pass went wrong, and it is worth writing
down: it assumed the descriptions needed all 180px. They do not. The
floor is 153. The 48x28 mark failed because 122 < 153, not because
180 was required — and 153 is what leaves a square mark room to lead.)
So the description keeps the full 180px and starts at the cell edge,
under the glyph rather than under the name. The pair that shares a
left edge is therefore INSTRUMENT + PROSE, with the name inset between
them. Two things stop that reading as a ragged L. The inset is 40px,
not 58 — closer to one indent than to a second column. And the mark is
square, so it has a left edge of its own to hold the corner, where the
48px landscape mark had a long horizontal top that pulled the eye
right and away from the text below it.
THE RHYTHM is unchanged, and that is the second dividend of drawing
the square variant at 28: the row is still exactly as tall as the
instrument. The name is centred in a 28px row — a 21px line box
(15.5px JetBrains Mono) leaves 3.5px of slack under it, so 5px of
row-gap reads as ~15px of white between the name's descender and the
description's cap. Top pad 16 measures to the instrument; bottom 17
measures to the last line of prose, whose 1.6 line-height already
carries ~2px of half-leading under it, so the two optical margins
match. The cell is the same height it was with the mark on the right. */
/* The column gap goes 10 -> 12 with the mark. Trailing, it was the space
between a name and something hanging off the far edge of the cell and
10px was plenty; leading, it is the space between a mark and the label
it introduces, and 10 read as a collision. 12 is four of the glyph's
own 3px increments and two thirds of the cell's 18px inset, so the
pair still sits inside the cell as one object. 14 detaches them. */
.nm-cell { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
align-items: center; column-gap: 12px; row-gap: 5px; padding: 16px 18px 17px;
border-left: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.nm-cell:first-child { border-left: 0; }
.nm-cell:hover { background: var(--accent-soft); }
/* TYPE IS NAV-ONLY, and deliberately not .xsell's.
These sizes used to be inherited from the cross-sell strip — 13.5/11.5 —
and that inheritance was the mistake. A footer strip is scanned
peripherally on the way past; a dropdown is read at close attention by
someone who deliberately opened it. They are different reading
distances and want different scales. The tell is that 11.5px was below
the design system's own prose floor: prose is Instrument Sans 13.5–15.5px /
1.6–1.75, so the description was never set as prose at all. It is now,
at the bottom of that range. The name goes to 15.5px to stay a heading
above it, keeping the ~1.15 name/description ratio the old pair had.
16.5px is the last size that fits `Status Pages` in the 122px name
column and 17px wraps it, so 15.5 also keeps ~10px of slack in hand —
and the square mark widened that column from 122 to 140, so the slack
is now ~28px. .xsell's own type is untouched. */
.nm-cell b { grid-area: 1 / 2; font-size: 15.5px; }
.nm-cell .gchrome { grid-area: 1 / 1; }
/* the glyph component tightens a heading that sits UNDER its chrome bar;
these sit side by side, so that 10px would be a stray indent */
.nm-cell .gchrome + b { margin-top: 0; }
.nm-cell:hover b { color: var(--accent); }
.nm-cell p { grid-area: 2 / 1 / 3 / -1; font-family: "Instrument Sans", sans-serif;
font-size: 13.5px; line-height: 1.6; color: var(--muted); }
/* ---- DEVELOPERS: five ruled rows sharing 1px borders ---- */
.nm-list a { display: block; padding: 13px 16px; text-decoration: none; color: var(--ink);
border-top: 1px solid var(--rule); }
.nm-list a:first-child { border-top: 0; }
.nm-list a:hover { background: var(--accent-soft); }
.nm-list b { display: block; font-size: 12.5px; font-weight: 600; }
.nm-list a:hover b { color: var(--accent); }
.nm-list p { font-family: "Instrument Sans", sans-serif; font-size: 11.5px; line-height: 1.45;
color: var(--muted); margin-top: 4px; }
.nm-ext { color: var(--muted); font-size: 9.5px; margin-left: 6px; vertical-align: 1px; }
/* Narrow: five columns of prose stop working long before the nav wraps.
The breakpoint is measured, not chosen, and it MOVES whenever the cell
does — 1060 when the name ran at 13.5px, 1130 at 15.5px beside a 48px
instrument, and 1050 now that the instrument is 28px and leads.
TWO constraints, and for the first time the name is the tighter one.
1. THE NAME. `Status Pages` is 12 characters of JetBrains Mono, whose
advance is exactly 0.6em, so at 15.5px it is 111.6px of ink. Its
column is the cell less 1px of border, 36px of padding, the 28px
instrument and the 12px gap — cell - 77 — and .wrap (max-width
1160, 40px gutters) makes cell = (vw - 80) / 5. One line therefore
wants vw >= 1023. Measured rather than trusted: it still sets on one
line at 1034 and wraps at 1032, the extra ~2px being the line
breaker's own rounding.
2. THE DESCRIPTIONS. They now take the full cell width, so their
measure is cell - 37, and all five hold two lines down to 153px
(152 breaks the longest two to three). That wants vw >= 1027.
Stack at 1050, not 1034. Stacking at the wrap point leaves the layout
a subpixel from breaking; at 1051 — the narrowest five-column width
this leaves — the name column is 117.2px against 111.6 of ink and the
description measure is 157.2 against a 152.2 break, so both carry
~5px, which is the margin every earlier version carried. Below
it the longest name wraps and that one cell's description drops out of
line with the other four — the shared baseline is the thing being
protected.
Note the direction of the change: the square mark bought 80px of
five-column range back, because it takes 40px of the cell where the
landscape mark took 58. */
@media (max-width: 1050px) {
.nm-grid { grid-template-columns: 1fr; }
.nm-cell { border-left: 0; border-top: 1px solid var(--rule); padding: 12px 0; }
.nm-cell:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nm-panel { transition: opacity 0s, transform 0s, visibility 0s; transform: none; }
.nm-caret { transition: none; }
}
/* ============================================================
COMPONENT: AUTH CARD (page-login, page-signup)
============================================================
The card shell and its form controls were copy-pasted into both auth
pages'