*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* Bright body — same as v33 */
--bg: #ffffff;
--bg-2: #fafafa;
--bg-3: #f6f6f7;
--surface: #ffffff;
--line: #ededee;
--line-2: #e3e3e5;
--line-3: #c8c8cc;
--ink: #0c0c0d;
--ink-2: #1f1f22;
--ink-3: #3f3f44;
--muted: #3a3a40; /* darkened from #6e6e76 for readability on white */
--soft: #98989f; /* decorative only — never carries information */
--faint: #d6d6d9;
/* Dark hero palette — true charcoal, neutral with faint warm undertone */
--dark: #2a2c30;
--dark-2: #34373c;
--dark-3: #3e4248;
--dark-line: rgba(255,255,255,.05);
--dark-line-2: rgba(255,255,255,.09);
--dark-ink: #f5f7fa;
--dark-ink-2: rgba(245,247,250,.84);
--dark-muted: rgba(245,247,250,.6);
--dark-soft: rgba(245,247,250,.4);
/* Uptimia green — refined, with brighter shade for dark surfaces */
--accent: #007e42;
--accent-2: #006336;
--accent-soft: #f0f7f3;
--accent-line: #d4e8de;
--accent-bright: #4ec97e; /* brighter green that reads on dark */
--accent-glow: rgba(78,201,126,.18);
/* Status */
--good: #007e42;
--warn: #b67800;
--bad: #c0382b;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Geist', 'SF Pro Text', 'Segoe UI', sans-serif;
--display: 'Inter', -apple-system, BlinkMacSystemFont, 'Geist', 'SF Pro Display', 'Segoe UI', sans-serif;
--serif: 'New York', 'Iowan Old Style', 'Charter', Georgia, serif;
--mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
--container: 1344px;
--container-narrow: 880px;
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 7px;
--ease: cubic-bezier(.22,.61,.36,1);
}
/* `height:100%` here capped the body to viewport height, which broke the
sticky top nav past the hero — let body grow with its content instead. */html{overflow-x:clip}
body{
font-family:var(--sans);
background:var(--bg);
color:var(--ink);
font-size:16px;line-height:1.6;font-weight:450;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
font-feature-settings:'cv11','ss01','ss03','tnum';
overflow-x:clip;
}
::selection{background:var(--ink);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.container.narrow{max-width:var(--container-narrow)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
/* Eyebrow — section kicker, hidden site-wide per design */.eyebrow{
display:none;
}
.eyebrow .dot{
display:none;
}
/* Eyebrow on dark */.on-dark .eyebrow{color:var(--dark-muted)}
.on-dark .eyebrow .dot{
background:var(--accent-bright);
box-shadow:0 0 0 3px rgba(78,201,126,.16),0 0 8px rgba(78,201,126,.4);
}
.accent-italic{
font-family:var(--serif);font-style:italic;font-weight:400;
color:var(--accent);letter-spacing:-.005em;
}
.on-dark .accent-italic{color:var(--accent-bright)}
.lede{font-size:17.5px;color:var(--muted);line-height:1.55;max-width:62ch}
/* Buttons */.btn{
display:inline-flex;align-items:center;gap:.5em;
height:44px;padding:0 20px;border-radius:10px;
font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;
transition:all .18s var(--ease);cursor:pointer;border:1px solid transparent;
white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--bg-2)}
.btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:8px}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(2px)}
/* Buttons on dark surface */.on-dark .btn-primary{background:var(--accent-bright);color:var(--dark);border-color:var(--accent-bright)}
.on-dark .btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.on-dark .btn-ghost{
background:rgba(255,255,255,.04);color:var(--dark-ink);
border:1px solid var(--dark-line-2);
}
.on-dark .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
/* Sections */section{padding:112px 0;position:relative}
section.alt{background:var(--bg-2)}
section.dark{background:var(--ink);color:#fff}
.sec-head{margin-bottom:48px;max-width:760px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-h{
font-family:var(--display);font-weight:600;font-size:clamp(34px,4vw,52px);
letter-spacing:-.025em;line-height:1.04;margin-top:0;color:var(--ink);
}
.on-dark .sec-h{color:var(--dark-ink)}
.sec-sub{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.55;max-width:60ch}
.on-dark .sec-sub{color:var(--dark-ink-2)}
.sec-head.center .sec-sub{margin-left:auto;margin-right:auto}
/* ---------------- Top nav (sits over the dark hero) ---------------- */.nav{
position:sticky;top:0;z-index:50;
background:rgba(28,32,39,.55);
backdrop-filter:saturate(160%) blur(14px);
-webkit-backdrop-filter:saturate(160%) blur(14px);
border-bottom:1px solid var(--dark-line);
transition:background .25s ease, border-color .25s ease;
}
/* When user scrolls past the hero, nav transitions to bright */.nav-inner{
max-width:var(--container);margin:0 auto;padding:0 28px;
height:64px;display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.brand{
font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em;
display:flex;align-items:center;gap:9px;color:var(--dark-ink);
transition:color .25s ease;
}
.brand-mark{
width:22px;height:22px;border-radius:6px;
background:linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(255,255,255,.05);
}
.brand-mark::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:6px;height:6px;border-radius:50%;background:#fff;
}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px}
.nav-links a{color:var(--dark-ink-2);transition:color .18s var(--ease);font-weight:500}
.nav-links a:hover{color:var(--dark-ink)}
.nav .btn-ghost{
background:rgba(255,255,255,.04);color:var(--dark-ink);
border:1px solid var(--dark-line-2);
}
.nav .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.nav .btn-primary{background:var(--accent-bright);color:var(--dark);border-color:var(--accent-bright)}
.nav .btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* ---------------- Hero (DARK) ---------------- *//* Hero runs 1440px wide so the dashboard demo card has room to breathe; the
rest of the marketing page sections stay at the default 1344px container. */.hero{
background:var(--dark);
color:var(--dark-ink);
padding:120px 0 110px;
position:relative;overflow:hidden;
margin-top:-65px;padding-top:145px;
}
.hero > .container{max-width:1440px}
/* Neutral dark — depth comes from a single soft top-edge highlight, not color */.hero::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 1400px 500px at 50% -10%, rgba(255,255,255,.04), transparent 60%),
radial-gradient(ellipse 700px 400px at 85% 30%, rgba(78,201,126,.05), transparent 65%);
}
/* Faint film-grain for premium tactile feel */.hero::after{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.5;mix-blend-mode:overlay;
}
/* Green horizon line — single hairline accent at bottom of hero (the brand signature) */.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:.85fr 1.15fr;gap:88px;align-items:center}
.hero h1{
font-family:var(--display);font-weight:600;
font-size:clamp(44px,5.4vw,57px);
line-height:1.02;letter-spacing:-.034em;
margin-top:0;color:var(--dark-ink);
}
.hero h1 em{
font-family:var(--serif);font-style:italic;font-weight:400;
color:var(--accent-bright);letter-spacing:-.01em;
}
.hero .lede{
margin-top:24px;font-size:19px;max-width:54ch;
color:var(--dark-ink-2);
}
.hero-cta{margin-top:36px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-cta .btn-primary{background:var(--accent-bright);color:var(--dark);border-color:var(--accent-bright)}
.hero-cta .btn-primary:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero-cta .btn-ghost{
background:rgba(255,255,255,.04);color:var(--dark-ink);
border:1px solid var(--dark-line-2);
}
.hero-cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32)}
.hero-meta{margin-top:24px;color:var(--dark-muted);font-size:13px;display:flex;gap:24px;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:7px}
.hero-meta .item svg{flex:0 0 auto;color:var(--accent-bright)}
/* ===== Hero SCREENSHOT — real dashboard image (kept for fallback) ===== */.hero-shot{
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 4px rgba(0,0,0,.12),0 30px 70px -24px rgba(0,0,0,.42);
background:#fff;
position:relative;
}
.hero-shot img{
display:block;width:100%;height:auto;
}
/* ===== Hero DASHBOARD — HTML/CSS recreation of the real /cp dashboard =====
Mirrors the actual product chrome: dark sidebar, topbar, monitor card grid.
Tokens (#2c3e50 sidebar, #00a35f brand, #f4f4f5 canvas) match the canonical
mockup at docs/dashboard-mockups/dashboard.html. *//* Tilted-3D wrapper. Perspective lives on the parent so the dashboard
itself can rotate in z-space; a soft brand-green halo sits beneath it. */.hero-dash-wrap{
perspective:2200px;
position:relative;
}
.hero-dash-wrap::after{
content:'';
position:absolute;left:8%;right:8%;bottom:-30px;height:80px;
background:radial-gradient(ellipse at center, rgba(0,163,95,.45), transparent 70%);
filter:blur(20px);
z-index:0;pointer-events:none;
}
.hero-dash{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 4px rgba(0,0,0,.12),0 30px 70px -24px rgba(0,0,0,.42);
position:relative;
/* Block text selection/copy — this is a marketing mockup, not real content. */
user-select:none;
-webkit-user-select:none;
cursor:default;
}
/* Anti-text-selection mask applied to every graphic mockup on the page —
consumers see the visuals but can't copy mock content. Each container
gets user-select:none, a transparent overlay ::before that intercepts
mouse events, and image drag-prevention. The .hero-dash variants above
already set their own version of this. */.mock,
.eng-vis,
.timeline-card{
user-select:none;
-webkit-user-select:none;
cursor:default;
position:relative;
}
.mock::before,
.eng-vis::before,
.timeline-card::before{
content:'';position:absolute;inset:0;z-index:10;
pointer-events:auto;background:transparent;
}
.mock img,
.eng-vis img,
.timeline-card img{
-webkit-user-drag:none;user-drag:none;pointer-events:none;
}
/* When wrapped in .hero-dash-wrap, tilt back and replace the flat shadow
with a deeper one plus a green-tinted side glow. */.hero-dash-wrap > .hero-dash{
transform:rotateY(-9deg) rotateX(6deg) rotateZ(.5deg) scale(.92);
transform-origin:center center;
box-shadow:0 2px 4px rgba(0,0,0,.18),
0 60px 100px -30px rgba(0,0,0,.55),
-40px 30px 80px -40px rgba(0,163,95,.28);
transition:transform .6s cubic-bezier(.2,.7,.2,1);
z-index:1;
}
.hero-dash-wrap:hover > .hero-dash{
transform:rotateY(-5deg) rotateX(3deg) rotateZ(0) scale(.92);
}
@media (prefers-reduced-motion: reduce){.hero-dash-wrap > .hero-dash{transition:none}
}
/* Transparent overlay that captures all mouse interaction. Sits above the card
contents but is invisible — prevents click-drag selection and link clicks. */.hero-dash::before{
content:'';position:absolute;inset:0;z-index:10;
pointer-events:auto;background:transparent;
}
/* Don't let the logo image be dragged out as a file. */.hero-dash img{
-webkit-user-drag:none;user-drag:none;pointer-events:none;
}
.hero-dash .app{display:grid;grid-template-columns:158px 1fr;min-height:470px}
/* Sidebar */.hero-dash .sb{
background:#2c3e50;color:#f4f4f5;
display:flex;flex-direction:column;font-size:11.5px;
}
.hero-dash .sb-head{
height:38px;padding:0 12px;
display:flex;align-items:center;justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,.06);
}
.hero-dash .sb-logo{display:inline-flex;align-items:center}
/* Two-logo toggle (wordmark vs. icon-only) — default desktop shows
the wordmark; the ≤980px override below swaps to the icon-only mark
to mirror the real CP's collapsed sidebar state. */.hero-dash .sb-logo-big{display:block;height:18px;width:auto}
.hero-dash .sb-logo-small{display:none;height:18px;width:auto}
.hero-dash .sb-collapse{
width:22px;height:22px;border-radius:5px;
display:grid;place-items:center;color:rgba(255,255,255,.5);
}
.hero-dash .sb-collapse svg{width:13px;height:13px}
.hero-dash .sb-nav{padding:8px 6px;flex:1;overflow:hidden}
.hero-dash .sb-item{
display:flex;align-items:center;gap:8px;
padding:5px 8px;border-radius:5px;
color:rgba(255,255,255,.78);font-weight:500;letter-spacing:-.005em;
margin:1px 0;cursor:default;
}
.hero-dash .sb-item svg{width:12px;height:12px;opacity:.8;flex:0 0 auto}
.hero-dash .sb-item .chev{margin-left:auto;opacity:.55}
.hero-dash .sb-item.active{
background:#34495e;color:#fff;font-weight:600;
}
.hero-dash .sb-item.active svg{color:#fff;opacity:1}
.hero-dash .sb-sub{display:flex;flex-direction:column;margin:0 0 4px 22px}
.hero-dash .sb-sub a{
padding:3px 8px;border-radius:4px;
color:rgba(255,255,255,.62);font-size:11px;font-weight:500;
text-decoration:none;cursor:default;
}
.hero-dash .sb-sub a.active{background:#34495e;color:#fff;font-weight:600}
.hero-dash .sb-divider{
height:1px;background:rgba(255,255,255,.06);margin:6px 8px;
}
/* ≤980px — collapse the in-mockup sidebar to an icons-only rail
(mirrors the real CP's collapsed sidebar state). Placed AFTER all
default .hero-dash .sb-* rules so source-order specificity wins.
- sidebar track 158px → 48px
- hide text labels via font-size:0
- hide chevrons, sub-nav, collapse button
- swap wordmark logo for icon-only logo */@media (max-width:980px){.hero-dash .app{grid-template-columns:48px 1fr}
.hero-dash .sb-nav{padding:8px 4px}
.hero-dash .sb-item{
justify-content:center;padding:8px 0;gap:0;font-size:0;
}
.hero-dash .sb-item .chev{display:none}
.hero-dash .sb-sub{display:none}
.hero-dash .sb-head{padding:0;justify-content:center}
.hero-dash .sb-collapse{display:none}
.hero-dash .sb-logo-big{display:none}
.hero-dash .sb-logo-small{display:block}
}
/* Main area */.hero-dash .main{display:flex;flex-direction:column;min-width:0;background:#f4f4f5}
.hero-dash .tb{
height:40px;display:flex;align-items:center;gap:10px;padding:0 14px;
background:#fff;border-bottom:1px solid var(--line);
}
.hero-dash .tb-search{
flex:1;display:flex;align-items:center;gap:7px;
height:26px;padding:0 10px;
border:1px solid var(--line-2);border-radius:6px;background:#fafafa;
color:var(--soft);font-size:11.5px;
}
.hero-dash .tb-search svg{width:12px;height:12px;color:var(--soft)}
.hero-dash .tb-actions{display:flex;align-items:center;gap:4px}
.hero-dash .tb-ico{
width:24px;height:24px;border-radius:5px;
display:grid;place-items:center;color:var(--muted);
}
.hero-dash .tb-ico svg{width:13px;height:13px}
.hero-dash .tb-user{
display:inline-flex;align-items:center;gap:6px;
padding:3px 4px 3px 8px;border-radius:99px;
font-size:11.5px;font-weight:500;color:var(--ink);
}
.hero-dash .tb-user .ava{
width:22px;height:22px;border-radius:50%;
background:#00a35f;
color:#fff;font-weight:600;font-size:10px;
display:grid;place-items:center;
}
/* Card grid */.hero-dash .grid{
flex:1;padding:12px;
display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
align-content:start;overflow:hidden;
}
.hero-dash .mcard{
background:#fff;border:1px solid var(--line);border-radius:7px;
padding:9px 10px;box-shadow:0 1px 1px rgba(15,17,26,.03);
display:flex;flex-direction:column;gap:4px;min-height:80px;
}
.hero-dash .mcard.down{background:#fef5f5;border-color:#f5cdcd}
.hero-dash .mcard-top{display:flex;align-items:center;gap:6px;min-width:0}
.hero-dash .mcard-dot{
width:6px;height:6px;border-radius:50%;background:#15803d;flex:0 0 auto;
}
.hero-dash .mcard.down .mcard-dot{background:#b91c1c}
.hero-dash .mcard-name{
font-weight:600;font-size:11.5px;color:var(--ink);letter-spacing:-.01em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;
}
.hero-dash .mcard.down .mcard-name{color:#b91c1c}
.hero-dash .mcard-tag{
font-family:var(--mono);font-size:8px;font-weight:600;
color:var(--muted);letter-spacing:.08em;
padding:1px 4px;border:1px solid var(--line-2);border-radius:3px;
background:#fafafa;flex:0 0 auto;
}
.hero-dash .mcard-top .right{
margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--soft);
}
.hero-dash .mcard-cb{
width:11px;height:11px;border:1px solid var(--line-3);
border-radius:2px;display:inline-block;
}
.hero-dash .mcard-dots{
color:var(--soft);font-size:11px;line-height:1;letter-spacing:0;font-weight:700;
}
.hero-dash .mcard-mid{
display:flex;align-items:center;gap:6px;min-width:0;font-size:10.5px;
}
.hero-dash .mcard-status{
font-family:var(--mono);font-weight:600;font-size:9.5px;
color:#15803d;letter-spacing:.04em;flex:0 0 auto;
display:inline-flex;align-items:center;gap:4px;
}
.hero-dash .mcard.down .mcard-status{color:#b91c1c}
.hero-dash .mcard-status .d{
width:5px;height:5px;border-radius:50%;background:#15803d;display:inline-block;
}
.hero-dash .mcard.down .mcard-status .d{background:#b91c1c}
.hero-dash .mcard-url{
font-family:var(--mono);font-size:10px;color:var(--muted);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:1;min-width:0;letter-spacing:-.005em;
}
.hero-dash .mcard.down .mcard-url{color:#b91c1c;opacity:.8}
.hero-dash .mcard-foot{
display:flex;align-items:center;justify-content:space-between;
font-family:var(--mono);font-size:10.5px;font-weight:600;
color:#15803d;font-variant-numeric:tabular-nums;margin-top:auto;
}
.hero-dash .mcard.down .mcard-foot{color:#b91c1c}
.hero-dash .mcard-ms{color:var(--ink);font-weight:500}
.hero-dash .mcard-ms.muted{color:var(--soft);font-weight:400}
/* ===== Hero LIVE FEED — continuous-scroll log of checks ===== *//* Sells "the product is breathing right now". CSS-only loop: 8 unique rows are
duplicated below, the track scrolls 0 → -50% over 38s, and a top/bottom mask
fades rows in/out at the edges so the loop is seamless. */.hero-feed{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 2px 4px rgba(0,0,0,.12),0 30px 70px -24px rgba(0,0,0,.42);
font-family:var(--sans);
position:relative;
}
.hf-head{
height:50px;padding:0 18px;
display:flex;align-items:center;gap:12px;
border-bottom:1px solid var(--line);
background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(10px);
-webkit-backdrop-filter:saturate(180%) blur(10px);
}
.hf-brand{
display:inline-flex;align-items:center;gap:9px;
font-family:var(--display);font-size:13.5px;font-weight:600;
color:var(--ink);letter-spacing:-.012em;
}
.hf-brand-mark{
width:20px;height:20px;border-radius:5px;
background:linear-gradient(135deg,#4ec97e 0%,#00a35f 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);position:relative;
}
.hf-brand-mark::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:6px;height:6px;border-radius:50%;background:#fff;
}
.hf-pill{
display:inline-flex;align-items:center;gap:6px;
padding:3px 9px 3px 8px;border-radius:99px;
background:#e6f6ee;color:#007a47;
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
border:1px solid #c8ecd6;
}
.hf-pill-dot{
width:6px;height:6px;border-radius:50%;background:#00a35f;
animation:hf-pulse 1.6s ease-out infinite;
}
@keyframes hf-pulse{0% {box-shadow:0 0 0 0 rgba(0,163,95,.55)}
100% {box-shadow:0 0 0 7px rgba(0,163,95,0)}
}
.hf-counter{
margin-left:auto;
font-family:var(--mono);font-size:11px;color:var(--muted);
letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.hf-counter .hf-sep{color:var(--soft);margin:0 6px}
/* Scrolling window — masked at top/bottom so rows fade in/out at the edges */.hf-window{
height:368px;overflow:hidden;position:relative;
background:#fff;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.hf-track{
display:flex;flex-direction:column;
animation:hf-stream 38s linear infinite;
will-change:transform;
}
@keyframes hf-stream{0% {transform:translateY(0)}
100% {transform:translateY(-50%)}
}
@media (prefers-reduced-motion: reduce){.hf-track{animation:none}
.hf-pill-dot{animation:none}
}
/* Row */.hf-row{
display:grid;
grid-template-columns:24px 1fr auto auto;
gap:14px;align-items:center;
padding:11px 18px;
border-bottom:1px solid var(--line);
font-size:12.5px;flex:0 0 auto;
}
.hf-ico{
width:20px;height:20px;border-radius:50%;
display:grid;place-items:center;flex:0 0 auto;
}
.hf-ico svg{width:11px;height:11px}
.hf-ico.ok{background:#e6f6ee;color:#15803d}
.hf-ico.warn{background:#fef3e2;color:#b45309}
.hf-ico.bad{background:#fdecec;color:#b91c1c}
.hf-ico.alert{background:#eef0fb;color:#4338ca}
.hf-meta{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.hf-name{
font-weight:600;color:var(--ink);letter-spacing:-.005em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hf-tag{
font-family:var(--mono);font-size:9.5px;font-weight:600;
color:var(--muted);letter-spacing:.06em;
padding:1px 5px;border:1px solid var(--line-2);border-radius:4px;
background:#fafafa;flex:0 0 auto;
}
.hf-tag.alert{background:#eef0fb;color:#4338ca;border-color:#d8ddef}
.hf-region{
font-family:var(--mono);font-size:10.5px;color:var(--muted);
letter-spacing:.02em;
}
.hf-result{
font-family:var(--mono);font-size:11.5px;font-weight:500;
font-variant-numeric:tabular-nums;letter-spacing:-.005em;flex:0 0 auto;
}
.hf-result.good{color:#15803d}
.hf-result.warn{color:#b45309}
.hf-result.bad{color:#b91c1c;font-weight:600}
.hf-result.info{color:#4338ca}
.hf-time{
font-family:var(--mono);font-size:10.5px;color:var(--soft);
font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:54px;text-align:right;
}
/* Hero monitor card — light card on dark hero. No outer border (reads as a hard
white edge against the charcoal) — the shadow alone carries the lift. */.hero-card{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:
0 2px 4px rgba(0,0,0,.12),
0 30px 70px -24px rgba(0,0,0,.42);
position:relative;
}
.hc-body{padding:22px}
.hc-name{display:flex;align-items:center;gap:12px}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(0,126,66,.35)}
70%{box-shadow:0 0 0 6px rgba(0,126,66,0)}
100%{box-shadow:0 0 0 0 rgba(0,126,66,0)}
}
.hc-spark{display:flex;gap:2px;align-items:flex-end;height:22px}
.hc-spark span{width:3px;border-radius:1px;background:var(--accent);opacity:.55}
/* ===== Hero demo card — dashboard preview variant (.hc-app) =====
Mirrors the real product dashboard: dark slate-blue sidebar, light tiles,
availability KPI chart, monitor table with status pills + sparklines.
Visual tokens (#2c3e50 sidebar, #00a35f brand, #f4f4f5 canvas) come from
docs/dashboard-mockups/dashboard.html — keep them in sync. */.hc-app{display:grid;grid-template-columns:48px 1fr;min-height:380px}
.hc-app .hc-sb{
background:#2c3e50;
padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:4px;
}
/* Brand mark — white tile with green dot, matches the dashboard mockup's
"white box, ink-colored glyph" pattern (the U is implied by the dot). */.hc-app .hc-sb-mark{
width:26px;height:26px;border-radius:7px;
background:#fff;
margin-bottom:6px;flex:0 0 auto;position:relative;
box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.hc-app .hc-sb-mark::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:9px;height:9px;border-radius:50%;
background:linear-gradient(135deg,var(--accent-bright) 0%,var(--accent) 100%);
}
/* Sidebar nav items — real-looking icon tiles, not placeholder squares */.hc-app .hc-sb-item{
width:28px;height:28px;border-radius:7px;
display:grid;place-items:center;
color:rgba(255,255,255,.55);
flex:0 0 auto;transition:color .15s,background .15s;
}
.hc-app .hc-sb-item svg{width:14px;height:14px}
.hc-app .hc-sb-item.active{
background:#34495e;
color:#fff;
}
.hc-app .hc-sb-item:not(.active):hover{color:rgba(255,255,255,.85)}
.hc-app .hc-main{display:flex;flex-direction:column;min-width:0;background:#f4f4f5}
.hc-app .hc-topbar{
height:42px;display:flex;align-items:center;gap:10px;
padding:0 14px;border-bottom:1px solid var(--line);
background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(10px);
-webkit-backdrop-filter:saturate(180%) blur(10px);
}
.hc-app .hc-crumb{
font-size:12.5px;color:var(--muted);letter-spacing:-.005em;flex:1;
display:flex;align-items:center;gap:6px;font-weight:500;
}
.hc-app .hc-crumb .crumb-sep{color:var(--soft);font-weight:400}
.hc-app .hc-crumb .crumb-tail{color:var(--ink);font-weight:600}
.hc-app .hc-seg{
display:inline-flex;background:#fff;border:1px solid var(--line-2);
border-radius:7px;padding:2px;gap:0;
}
.hc-app .hc-seg button{
appearance:none;border:none;background:transparent;
font:inherit;font-size:10.5px;font-weight:500;color:var(--muted);
padding:3px 8px;border-radius:5px;cursor:pointer;letter-spacing:.02em;
}
.hc-app .hc-seg button.active{background:#00a35f;color:#fff}
.hc-app .hc-avatar{
width:22px;height:22px;border-radius:50%;flex:0 0 auto;
background:#00a35f;
}
.hc-app .hc-body{padding:14px;display:flex;flex-direction:column;gap:12px;background:#f4f4f5}
/* KPI tile */.hc-app .hc-tile{
background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.hc-app .hc-tile-head{
display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;
}
.hc-app .hc-label{
font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);
}
.hc-app .hc-delta{
display:inline-flex;align-items:center;gap:4px;
font-size:10.5px;font-weight:600;color:#15803d;
background:#e6f6ee;border-radius:99px;padding:2px 8px;
font-variant-numeric:tabular-nums;
}
.hc-app .hc-kpi{
font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.025em;
color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}
.hc-app .hc-kpi-suffix{color:var(--muted);font-size:18px;font-weight:500;margin-left:2px}
.hc-app .hc-chart{display:block;width:100%;height:54px;margin-top:8px}
/* Monitor table */.hc-app .hc-table{
background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
box-shadow:0 1px 2px rgba(15,17,26,.04);
}
.hc-app .hc-trow{
display:grid;grid-template-columns:1fr auto 60px;gap:10px;
align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);
font-size:12px;
}
.hc-app .hc-trow:last-child{border-bottom:none}
.hc-app .hc-trow.head{
background:#fafafa;padding:6px 12px;
font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);
}
.hc-app .hc-mon{display:flex;align-items:center;gap:8px;min-width:0}
.hc-app .hc-mon .hc-name{
font-weight:600;font-size:12.5px;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:inline-block;
}
.hc-app .hc-pill{
display:inline-flex;align-items:center;gap:5px;
padding:2px 7px 2px 6px;border-radius:99px;
font-size:10px;font-weight:600;letter-spacing:.02em;
border:1px solid transparent;white-space:nowrap;flex:0 0 auto;
}
.hc-app .hc-pill .d{width:5px;height:5px;border-radius:50%;display:inline-block}
.hc-app .hc-pill.ok{background:#e6f6ee;color:#15803d;border-color:#cfead9}
.hc-app .hc-pill.ok .d{background:#15803d}
.hc-app .hc-pill.warn{background:#fef3e2;color:#b45309;border-color:#f3e0bd}
.hc-app .hc-pill.warn .d{background:#b45309}
.hc-app .hc-pill.bad{background:#fdecec;color:#b91c1c;border-color:#f5cdcd}
.hc-app .hc-pill.bad .d{background:#b91c1c}
.hc-app .hc-type{
font-family:var(--mono);font-size:9.5px;font-weight:500;
color:var(--muted);letter-spacing:.05em;
padding:1px 5px;border:1px solid var(--line-2);border-radius:4px;
background:#fafafa;flex:0 0 auto;
}
.hc-app .hc-resp{display:flex;align-items:center;gap:8px}
.hc-app .hc-ms{
font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:500;
font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.hc-app .hc-ms .u{color:var(--muted);font-size:10.5px;margin-left:1px;font-weight:400}
.hc-app .hc-spark-svg{width:60px;height:16px;display:block}
.hc-app .hc-up{
font-family:var(--mono);font-size:11.5px;font-weight:500;text-align:right;
font-variant-numeric:tabular-nums;
}
.hc-app .hc-up.good{color:#15803d}
.hc-app .hc-up.warn{color:#b45309}
.hc-app .hc-up.bad{color:#b91c1c}
/* Trust float card on the dark hero — softer *//* Hero stat strip — built into the bottom of the dark hero *//* ---------------- Trust stat band ---------------- */.trusted-band{
border-bottom:1px solid var(--line);padding:44px 0;background:var(--bg);
}
.proof-row{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.proof-cell{
text-align:center;padding:0 12px;position:relative;
}
.proof-cell + .proof-cell::before{
content:'';position:absolute;left:0;top:14%;bottom:14%;width:1px;
background:var(--line-2);
}
.proof-num{
font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.022em;
color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;
}
.proof-num .plus,.proof-num .unit{
font-size:.6em;color:var(--muted);font-weight:500;letter-spacing:0;margin-left:1px;
}
.proof-lbl{
margin-top:9px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);font-weight:500;
}
/* ---------------- Engines (tabbed) ---------------- */.engines{display:grid;grid-template-columns:300px 1fr;gap:48px;margin-top:32px}
.eng-rail{display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.eng-tab{
text-align:left;padding:18px 22px;background:none;cursor:pointer;
border:none;border-left:2px solid transparent;margin-left:-1px;
font-family:inherit;color:var(--muted);transition:all .2s var(--ease);
border-radius:0 8px 8px 0;
}
.eng-tab .et-num{
font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em;
display:block;margin-bottom:4px;font-weight:500;
}
.eng-tab .et-title{
font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink-2);
letter-spacing:-.012em;display:block;
}
.eng-tab .et-sub{font-size:13px;color:var(--muted);margin-top:4px;display:none;line-height:1.4}
.eng-tab:hover .et-title{color:var(--ink)}
.eng-tab.active{background:var(--accent-soft);border-left-color:var(--accent)}
.eng-tab.active .et-num{color:var(--accent)}
.eng-tab.active .et-title{color:var(--ink)}
.eng-tab.active .et-sub{display:block}
.eng-stage{
background:#fff;border:1px solid var(--line);border-radius:16px;
padding:40px;min-height:480px;
box-shadow:0 1px 2px rgba(12,12,13,.03),0 24px 60px -32px rgba(12,12,13,.1);
}
.eng-panel{display:none}
.eng-panel.active{display:block;animation:fadein .4s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}
}
.eng-panel h3{
font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.022em;
line-height:1.12;margin-bottom:12px;color:var(--ink);max-width:42ch;
}
.eng-panel p.eng-lead{color:var(--muted);max-width:54ch;margin-bottom:28px;font-size:15.5px}
.eng-panel ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:8px}
.eng-panel li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.eng-panel li svg{flex:0 0 auto;color:var(--accent);margin-top:3px}
.eng-vis{
margin-top:28px;background:var(--bg-2);border:1px solid var(--line);
border-radius:10px;padding:20px;
}
.eng-vis-bars{display:flex;align-items:flex-end;gap:5px;height:80px;margin-top:12px}
.eng-vis-bars span{flex:1;background:var(--accent);border-radius:2px 2px 0 0;opacity:.32}
.eng-vis-bars span.tall{opacity:.85}
.eng-vis-key{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
/* SSL ring */.ssl-ring{display:flex;align-items:center;gap:28px}
.ring{
width:120px;height:120px;border-radius:50%;
background: conic-gradient(var(--accent) 0 78%, var(--line) 78% 100%);
display:grid;place-items:center;position:relative;
}
.ring::after{content:'';position:absolute;inset:12px;border-radius:50%;background:var(--bg-2)}
.ring-num{position:relative;z-index:1;font-family:var(--display);font-weight:600;font-size:28px;color:var(--ink);text-align:center;letter-spacing:-.02em}
.ring-num small{display:block;font-family:var(--sans);font-weight:500;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-top:2px}
/* ---------------- How it works ---------------- */.how-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* ---------------- Use cases (segmented control — canonical) ---------------- */.role-pill-wrap{
display:flex;justify-content:center;
margin-bottom:48px;
}
.role-pills{
/* Wrap to a second row when localized labels (NL/DE/etc.) push total width
past max-width. flex:1->1 1 auto on .role-pill lets each chip size to
its own content instead of forcing 4 equal-width slots. */
display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
padding:6px;background:var(--bg-3);border-radius:14px;border:1px solid var(--line);
width:100%;max-width:780px;
}
.role-pill{
border:none;background:transparent;cursor:pointer;font:inherit;
padding:10px 16px;border-radius:9px;
display:flex;align-items:center;gap:10px;text-align:left;
color:var(--muted);flex:1 1 auto;
transition:all .2s var(--ease);
}
.role-pill:hover{color:var(--ink-2);background:rgba(255,255,255,.55)}
.role-pill.active{
background:#fff;color:var(--ink);
box-shadow:
0 1px 2px rgba(12,12,13,.06),
0 4px 10px -4px rgba(12,12,13,.10);
}
.role-pill .rp-icon{
width:30px;height:30px;border-radius:8px;
display:grid;place-items:center;
background:rgba(255,255,255,.5);color:var(--ink-3);
border:1px solid transparent;flex:0 0 auto;
transition:all .2s var(--ease);
}
.role-pill.active .rp-icon{
background:var(--accent-soft);color:var(--accent);
border-color:var(--accent-line);
}
.role-pill .rp-text{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.role-pill .rp-label{
font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.01em;
line-height:1.2;color:inherit;
white-space:nowrap;
}
.role-pill .rp-sub{
font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);font-weight:600;line-height:1;
white-space:nowrap;
}
.role-pill.active .rp-sub{color:var(--accent)}
.role-pill .rp-arrow{display:none}
.role-panel{display:none;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.role-panel.active{display:grid;animation:fadein .4s var(--ease)}
.role-panel h3{
font-family:var(--display);font-weight:600;font-size:36px;letter-spacing:-.028em;
line-height:1.06;margin-bottom:16px;color:var(--ink);
}
.role-panel h3 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em}
.role-panel p.lede{font-size:17px;margin-bottom:24px}
.role-bullets{list-style:none;display:flex;flex-direction:column;gap:12px}
.role-bullets li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-2);font-size:14.5px}
.role-bullets li svg{flex:0 0 auto;color:var(--accent);margin-top:3px}
/* role visuals *//* ---- Use-cases panel visuals: bright (matches Status-pages sp-card) ----
Each visual maps the dark-mode tokens (used inside the rules below) back
onto bright/light values — no need to rewrite each rule. *//* Light-mode fixups for elements that used dark-only color values *//* Devs — codebox (DARK) *//* dark-mode syntax colors *//* keyword — soft pink *//* string — bright green *//* comment — muted *//* variable — soft blue *//* ---------- Browser-frame mockup (use-case visualisations) ---------- */.role-mockup{
/* Same anti-text-selection treatment as other mockups */
user-select:none;-webkit-user-select:none;cursor:default;position:relative;
}
.role-mockup::before{
content:'';position:absolute;inset:0;z-index:10;pointer-events:auto;background:transparent;
}
.browser-frame{
border-radius:12px;overflow:hidden;background:#fff;
box-shadow:0 2px 4px rgba(0,0,0,.08),0 30px 70px -28px rgba(0,0,0,.35);
}
.browser-frame .bf-chrome{
display:flex;align-items:center;gap:10px;
padding:8px 12px;
background:linear-gradient(180deg,#edf0f3 0%,#e2e6ea 100%);
border-bottom:1px solid #d4d9de;
}
.browser-frame .bf-tl{display:flex;gap:5px;flex:0 0 auto}
.browser-frame .bf-tl span{width:9px;height:9px;border-radius:50%;display:inline-block}
.browser-frame .bf-tl span:nth-child(1){background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.browser-frame .bf-tl span:nth-child(2){background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.browser-frame .bf-tl span:nth-child(3){background:#28c840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.1)}
.browser-frame .bf-url{
flex:1;display:flex;align-items:center;gap:6px;
background:#fff;border:1px solid #d4d9de;border-radius:6px;padding:3px 10px;
font-family:var(--mono);font-size:10.5px;color:#4b5563;min-width:0;
}
.browser-frame .bf-url .lock{width:9px;height:9px;color:#15803d;flex:0 0 auto}
.browser-frame .bf-url .host{color:#9ca3af}
.browser-frame .bf-url .path{color:#111}
/* Inner dashboard inside the frame loses its own outer chrome */.browser-frame > .hero-dash{border-radius:0;box-shadow:none}
/* ---------- Reports body (PM use-case panel) ---------- */.rpt{padding:14px;font-family:var(--sans)}
/* ---------- Dark API console (Dev use-case) ----------
A terminal-style window with a method/URL header and a JSON response.
No browser chrome — just the console itself, on a dark canvas. */.dev-console{
background:#1a2230;border-radius:12px;overflow:hidden;
box-shadow:0 2px 4px rgba(0,0,0,.12),0 30px 70px -28px rgba(0,0,0,.55);
/* Same anti-text-selection treatment as the other mockups */
user-select:none;-webkit-user-select:none;cursor:default;position:relative;
}
.dev-console::before{
content:'';position:absolute;inset:0;z-index:10;pointer-events:auto;background:transparent;
}
.dev-console-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:9px 14px;
background:rgba(255,255,255,.025);
border-bottom:1px solid rgba(255,255,255,.06);
}
.dev-console-req{
display:flex;align-items:center;gap:8px;min-width:0;
}
.dev-console-method{
font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.08em;
color:#34d399;
}
.dev-console-url{
font-family:var(--mono);font-size:11px;color:#cbd5e1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.dev-console-status{
display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
font-family:var(--mono);font-size:10px;color:#34d399;font-weight:600;letter-spacing:.04em;
}
.dev-console-status .d{
width:5px;height:5px;border-radius:50%;background:#34d399;
}
.dev-console-status .lat{color:#94a3b8;font-weight:500}
.dev-console-body{
padding:14px 16px;
}
.dev-console-body pre{
margin:0;
font-family:var(--mono);font-size:10.5px;line-height:1.6;
color:#e5e7eb;white-space:pre;overflow-x:auto;
}
.dev-console-body pre .c {color:#64748b;font-style:italic}
/* comments (curl line) */.dev-console-body pre .k {color:#7dd3fc}
/* JSON keys */.dev-console-body pre .s {color:#86efac}
/* strings */.dev-console-body pre .n {color:#fbbf24}
/* numbers */.dev-console-body pre .kw{color:#f472b6}
/* keywords (null) *//* ---------- Webhook detail body (Dev use-case) ----------
Shows a single webhook's config + recent deliveries + sample payload. *//* ---------- Report detail body (PM use-case) ----------
Renders a single report's contents on the dashboard canvas. */.rpt-detail{padding:14px;font-family:var(--sans);color:#0f172a}
.rpt-d-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid #e6e6e3;
}
.rpt-d-crumb{font-size:11px;color:#6b7280;display:inline-flex;align-items:center;gap:4px}
.rpt-d-crumb strong{
color:#0f172a;font-weight:600;font-size:13px;
font-family:var(--display);letter-spacing:-.012em;
}
.rpt-d-meta{font-family:var(--mono);font-size:10px;color:#6b7280}
.rpt-d-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.rpt-d-kpi{padding:10px 11px;background:#fff;border:1px solid #e6e6e3;border-radius:7px}
.rpt-d-kpi .lbl{font-size:9px;color:#6b7280;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.rpt-d-kpi .num{
font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.02em;
margin-top:4px;line-height:1;color:#0f172a;
}
.rpt-d-kpi .num small{font-family:var(--sans);font-size:10px;color:#6b7280;font-weight:500}
.rpt-d-kpi .delta{
display:inline-flex;align-items:center;gap:2px;font-family:var(--mono);
font-size:9px;font-weight:600;margin-top:4px;
}
.rpt-d-kpi .delta.up{color:#15803d}
.rpt-d-kpi .delta.dn{color:#b91c1c}
.rpt-d-svc{
background:#fff;border:1px solid #e6e6e3;border-radius:7px;
padding:10px 12px;margin-bottom:8px;
}
.rpt-d-svc-h{
display:flex;align-items:center;justify-content:space-between;
font-size:9.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.08em;
font-weight:600;margin-bottom:8px;
}
.rpt-d-svc-h .scale{
font-family:var(--mono);font-size:9px;text-transform:none;letter-spacing:0;
font-weight:500;color:#a8a8a4;
}
.rpt-d-svc .svc-row{
display:grid;grid-template-columns:74px 1fr 44px;gap:8px;align-items:center;
font-size:10.5px;padding:3px 0;
}
.rpt-d-svc .svc-row .nm{color:#0f172a;font-weight:500}
.rpt-d-svc .svc-row .bar{
height:5px;border-radius:3px;background:#f4f4f5;position:relative;overflow:hidden;
}
.rpt-d-svc .svc-row .bar::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w);
background:#15803d;border-radius:3px;
}
.rpt-d-svc .svc-row .bar.warn::before{background:#b45309}
.rpt-d-svc .svc-row .pct{
font-family:var(--mono);font-size:10px;color:#0f172a;font-weight:500;text-align:right;
}
.rpt-d-svc .svc-row .pct.warn{color:#b45309}
.rpt-d-events{
background:#fff;border:1px solid #e6e6e3;border-radius:7px;padding:6px 12px;
}
.rpt-d-events .evt-row{
display:flex;align-items:center;gap:8px;font-size:10.5px;padding:5px 0;
}
.rpt-d-events .evt-row + .evt-row{border-top:1px solid #f4f4f5}
.rpt-d-events .evt-row .d{width:5px;height:5px;border-radius:50%;flex:0 0 auto}
.rpt-d-events .evt-row .d.ok{background:#15803d}
.rpt-d-events .evt-row .d.warn{background:#b45309}
.rpt-d-events .evt-row .d-desc{
flex:1;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.rpt-d-events .evt-row .d-when{
font-family:var(--mono);font-size:9px;color:#6b7280;
}
/* OWNER — calm dashboard overview (plain-English status cards) */.own-dash{padding:18px 16px 16px;font-family:var(--sans);color:#0f172a}
.own-hello{margin-bottom:14px}
.own-hello-h{
font-family:var(--display);font-weight:600;font-size:16px;color:#0f172a;
letter-spacing:-.01em;line-height:1.25;
}
.own-hello-sub{
font-size:11px;color:#6b7280;margin-top:3px;
}
.own-cards{display:flex;flex-direction:column;gap:8px}
.own-card{
background:#fff;border:1px solid #e6e6e3;border-radius:8px;
padding:11px 13px;
}
.own-card.warn{border-color:#fcd9a8;background:#fffaf2}
.own-c-row{display:flex;align-items:center;gap:10px}
.own-c-dot{
width:7px;height:7px;border-radius:50%;background:#15803d;flex:0 0 auto;
box-shadow:0 0 0 2px rgba(21,128,61,.14);
}
.own-c-dot.warn{background:#b45309;box-shadow:0 0 0 2px rgba(180,83,9,.16)}
.own-c-host{
font-family:var(--mono);font-size:12px;color:#0f172a;font-weight:600;
flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.own-c-status{
font-size:10px;font-weight:600;letter-spacing:.02em;
padding:2px 8px;border-radius:999px;flex:0 0 auto;
}
.own-c-status.ok{color:#15803d;background:rgba(21,128,61,.1)}
.own-c-status.warn{color:#b45309;background:rgba(180,83,9,.12)}
.own-c-meta{
font-size:10.5px;color:#6b7280;margin-top:5px;padding-left:17px;line-height:1.45;
}
.own-card.warn .own-c-meta strong{color:#b45309;font-weight:600}
/* AGENCY — white-label public status page (agency-branded purple) */.ag-status{
--ag-brand:#6d28d9;
--ag-brand-soft:rgba(109,40,217,.08);
--ag-ink:#1f1b2e;
--ag-muted:#6b6478;
--ag-line:#ece8f3;
background:#fdfcff;font-family:var(--sans);color:var(--ag-ink);
padding:18px 18px 14px;
}
.ag-s-head{
display:flex;align-items:center;justify-content:space-between;
padding-bottom:14px;border-bottom:1px solid var(--ag-line);margin-bottom:14px;
}
.ag-s-logo{display:inline-flex;align-items:center;gap:9px}
.ag-s-mark{
width:18px;height:18px;border-radius:5px;background:var(--ag-brand);
position:relative;flex:0 0 auto;
}
.ag-s-mark::after{
content:'';position:absolute;inset:4px;border-radius:2px;
background:#fff;transform:rotate(45deg);
}
.ag-s-brand{
font-family:var(--display);font-weight:700;font-size:12px;
letter-spacing:.16em;color:var(--ag-ink);
}
.ag-s-nav{
font-size:10.5px;color:var(--ag-muted);text-transform:uppercase;
letter-spacing:.1em;font-weight:500;
}
.ag-s-banner{
background:var(--ag-brand-soft);
border-left:3px solid var(--ag-brand);
border-radius:6px;padding:11px 14px;margin-bottom:14px;
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.ag-s-pulse{
width:8px;height:8px;border-radius:50%;background:var(--ag-brand);
box-shadow:0 0 0 3px rgba(109,40,217,.18);flex:0 0 auto;
}
.ag-s-banner-h{
font-family:var(--display);font-weight:600;font-size:14px;
color:var(--ag-ink);letter-spacing:-.005em;flex:1 1 auto;
}
.ag-s-banner-sub{
font-family:var(--mono);font-size:10px;color:var(--ag-muted);flex:0 0 auto;
}
.ag-s-services{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.ag-s-row{
display:grid;
grid-template-columns:1.2fr 1.4fr auto;
gap:14px;align-items:center;
padding:10px 12px;background:#fff;border:1px solid var(--ag-line);border-radius:7px;
}
.ag-s-svc{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-s-name{font-size:12px;font-weight:600;color:var(--ag-ink)}
.ag-s-meta{font-family:var(--mono);font-size:9.5px;color:var(--ag-muted)}
.ag-s-bars{display:flex;gap:2px;flex:1 1 auto;align-items:stretch;min-width:0}
.ag-s-bars i{
flex:1 1 0;height:18px;background:var(--ag-brand);opacity:.85;border-radius:1px;
min-width:0;
}
.ag-s-bars i.warn{background:#b45309;opacity:1}
.ag-s-pill{
font-size:10px;font-weight:600;padding:3px 9px;border-radius:999px;
letter-spacing:.02em;flex:0 0 auto;
}
.ag-s-pill.ok{color:var(--ag-brand);background:var(--ag-brand-soft)}
.ag-s-foot{
display:flex;justify-content:space-between;align-items:center;
padding-top:11px;border-top:1px solid var(--ag-line);
font-size:10.5px;color:var(--ag-muted);
}
.ag-s-foot strong{color:var(--ag-ink);font-weight:600}
/* PMs — branded weekly report (DARK) *//* Owners — interactive wizard mock (DARK) *//* Agencies — multi-client roster (DARK) *//* Agency status pill on dark *//* ---------------- Status pages ---------------- */.sp-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center}
.sp-card{
background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
box-shadow:0 1px 2px rgba(12,12,13,.04),0 24px 60px -32px rgba(12,12,13,.14);
}
/* Browser-style URL bar (keep, but switch to white) */.sp-bar{padding:11px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:#fff;gap:14px}
.sp-bar .dots{display:flex;gap:5px;flex:0 0 auto}
.sp-bar .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-3);opacity:.55}
.sp-lang{
appearance:none;background:#fff;border:1px solid var(--line-2);
padding:5px 26px 5px 12px;border-radius:7px;font:inherit;font-size:11.5px;color:var(--ink-2);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 8px center;cursor:pointer;
transition:border-color .15s var(--ease);flex:0 0 auto;
}
.sp-lang:hover{border-color:var(--ink-3)}
/* Branded header row: logo + name + subscribe action */.sp-headerline{
padding:14px 20px;border-bottom:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.sp-brand{
display:flex;align-items:center;gap:10px;
font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.012em;color:var(--ink);
}
.sp-mark{
width:22px;height:22px;border-radius:6px;flex:0 0 auto;
background:#6d28d9;position:relative;
}
.sp-mark::after{
content:'';position:absolute;inset:5px;border-radius:2px;
background:#fff;transform:rotate(45deg);
}
.sp-subscribe{
display:inline-flex;align-items:center;gap:6px;
padding:6px 11px;border-radius:7px;
background:var(--bg-2);border:1px solid var(--line-2);
font-size:11.5px;color:var(--ink-2);font-weight:500;
transition:all .15s var(--ease);cursor:pointer;
}
.sp-subscribe:hover{background:#fff;border-color:var(--ink-3)}
.sp-subscribe svg{color:var(--ink-3);flex:0 0 auto}
.sp-head-actions{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
/* State band — currently in incident (warn) */.sp-state-band{
padding:11px 20px;
background:var(--warn-soft, #faf3e3);
border-bottom:1px solid #ecd4a3;
display:flex;align-items:center;gap:9px;
font-size:12.5px;color:var(--warn);font-weight:500;
}
.sp-state-band .pulse-warn{
width:8px;height:8px;border-radius:50%;background:var(--warn);
box-shadow:0 0 0 3px rgba(182,120,0,.18);
animation:halo-warn 2s ease-out infinite;flex:0 0 auto;
}
.sp-state-band .when{
margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--warn);opacity:.75;font-weight:500;
}
@keyframes halo-warn{0%{box-shadow:0 0 0 0 rgba(182,120,0,.4)}
70%{box-shadow:0 0 0 7px rgba(182,120,0,0)}
100%{box-shadow:0 0 0 0 rgba(182,120,0,0)}
}
/* Active-incident card */.sp-incident{
padding:18px 20px;border-bottom:1px solid var(--line);
}
.sp-incident .lbl{
font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);font-weight:600;margin-bottom:5px;
}
.sp-incident h5{
font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.012em;
color:var(--ink);margin-bottom:14px;
}
.sp-updates{
border-left:2px solid #ecd4a3;padding-left:16px;
display:flex;flex-direction:column;gap:16px;
}
.sp-update{position:relative}
.sp-update::before{
content:'';position:absolute;left:-21px;top:5px;
width:9px;height:9px;border-radius:50%;background:var(--warn);
border:2px solid #fff;box-shadow:0 0 0 1px #ecd4a3;
}
.sp-update:first-child::before{
background:var(--warn);
box-shadow:0 0 0 3px rgba(182,120,0,.18);
animation:halo-warn 2s ease-out infinite;
}
.sp-update .when{
font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:500;
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.sp-update .when .tag{
font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
padding:2px 6px;border-radius:4px;
background:var(--warn-soft, #faf3e3);color:var(--warn);border:1px solid #ecd4a3;
}
.sp-update p{margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.5;max-width:46ch}
/* Services list */.sp-services{padding:6px 20px}
.sp-svc{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.sp-svc:last-child{border-bottom:none}
.sp-svc .svc-name{font-weight:500;color:var(--ink-2)}
.sp-svc .svc-bars{display:flex;gap:2px}
.sp-svc .svc-bars i{width:4px;height:18px;background:var(--accent);border-radius:1px;opacity:.85}
.sp-svc .svc-bars i.warn{background:var(--warn)}
.sp-svc .svc-bars i.recent{opacity:1}
/* Footer row */.sp-foot-row{
padding:11px 20px;border-top:1px solid var(--line);background:var(--bg-2);
display:flex;align-items:center;justify-content:space-between;
font-size:11px;color:var(--muted);
}
.sp-foot-row .subs{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.sp-foot-row .subs svg{color:var(--soft)}
.sp-foot-row a,.sp-foot-row .sp-subscribe-cta{color:var(--accent);font-weight:500}
.sp-foot-row a:hover{text-decoration:underline}
/* ---------------- Why Uptimia ---------------- *//* Bright stat strip in body */.stat-strip{
display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;
border-top:1px solid var(--line);
}
/* ---------------- Testimonial ---------------- *//* ---------------- Locations / map ---------------- */.map-card{
background:#fff;border:1px solid var(--line);border-radius:16px;padding:48px 36px 36px;
margin-top:32px;text-align:center;position:relative;overflow:hidden;
box-shadow:0 1px 2px rgba(12,12,13,.04),0 24px 60px -32px rgba(12,12,13,.1);
}
.map-pin{
position:absolute;width:8px;height:8px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 3px rgba(0,126,66,.2);
}
.map-pin::after{
content:'';position:absolute;inset:-4px;border-radius:50%;
border:1.5px solid var(--accent);opacity:0;animation:pin-pulse 2.4s ease-out infinite;
}
@keyframes pin-pulse{0%{opacity:.7;transform:scale(.6)}
100%{opacity:0;transform:scale(2.2)}
}
/* ---------------- Integrations ---------------- */.int-wrapper{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.int-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.int-tile{
aspect-ratio:1;background:#fff;border:1px solid var(--line);border-radius:12px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
text-align:center;padding:16px 10px;
transition:all .2s var(--ease);cursor:pointer;position:relative;
}
.int-tile:hover{
border-color:var(--line-3);
transform:translateY(-2px);
box-shadow:0 1px 2px rgba(12,12,13,.04),0 10px 20px -10px rgba(12,12,13,.14);
}
.int-tile .int-logo{
width:34px;height:34px;
display:grid;place-items:center;flex:0 0 auto;
}
.int-tile .int-logo svg,.int-logo img{width:100%;height:100%;display:block;transition:transform .25s var(--ease)}
.int-tile:hover .int-logo svg,.int-tile:hover .int-logo img{transform:scale(1.08)}
.int-tile .int-text{display:flex;flex-direction:column;gap:2px}
.int-tile .it-name{font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
.int-tile .it-cat{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:500;line-height:1}
/* ---------------- Pricing ---------------- */.price-toggle{
display:inline-flex;background:var(--bg-2);border:1px solid var(--line);
padding:4px;border-radius:999px;gap:2px;margin:24px auto 0;
}
.sec-head.center + .price-toggle{display:flex;width:fit-content}
.price-toggle .pt-opt{
background:transparent;border:0;cursor:pointer;
padding:9px 18px;border-radius:999px;
font:inherit;font-size:13px;font-weight:600;color:var(--muted);
display:inline-flex;align-items:center;gap:7px;
transition:all .18s var(--ease);
}
.price-toggle .pt-opt:hover{color:var(--ink-2)}
.price-toggle .pt-opt.active{
background:#fff;color:var(--ink);
box-shadow:0 1px 2px rgba(12,12,13,.06),0 1px 1px rgba(12,12,13,.04);
}
.price-toggle .pt-save{
font-size:10.5px;font-weight:600;letter-spacing:.02em;
color:var(--accent);background:var(--accent-soft);
padding:2px 7px;border-radius:999px;text-transform:lowercase;
}
/* Show only the price matching the current data-period; hide the other */.price-grid[data-period="annual"] .amt-monthly,
.price-grid[data-period="monthly"] .amt-annual,
.price-grid[data-period="annual"] .bill-monthly,
.price-grid[data-period="monthly"] .bill-annual{display:none}
.price-billed{
font-family:var(--mono);font-size:10.5px;color:var(--muted);
letter-spacing:.02em;margin-top:-8px;
}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.price-card{
background:#fff;border:1px solid var(--line);border-radius:16px;
padding:32px 28px;display:flex;flex-direction:column;gap:18px;
transition:all .2s var(--ease);position:relative;
}
.price-card:hover{border-color:var(--line-3)}
.price-card.feat{
border-color:var(--ink);
box-shadow:0 1px 2px rgba(12,12,13,.04),0 24px 50px -24px rgba(12,12,13,.18);
}
.price-card.feat .price-badge{
position:absolute;top:-11px;left:24px;
background:var(--ink);color:#fff;padding:4px 12px;border-radius:999px;
font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.price-name{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.012em}
.price-amount{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.price-amount .amt{font-weight:600;font-size:48px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.price-amount .per{font-size:13px;color:var(--muted);font-weight:500}
.price-desc{color:var(--muted);font-size:14px}
.price-feats{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:8px;font-size:14px;color:var(--ink-2);padding-top:18px;border-top:1px solid var(--line)}
.price-feats li{display:flex;gap:10px}
.price-feats li svg{flex:0 0 auto;color:var(--accent);margin-top:3px}
.price-card .btn{align-self:stretch;justify-content:center;margin-top:auto}
/* ---------------- FAQ ---------------- */.faq-list{max-width:760px;margin:32px auto 0}
.faq-item{border-bottom:1px solid var(--line);padding:0}
.faq-item summary{
list-style:none;cursor:pointer;padding:22px 0;
font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.014em;color:var(--ink);
display:flex;justify-content:space-between;align-items:center;gap:18px;
transition:color .2s var(--ease);
}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
content:'';width:14px;height:14px;flex:0 0 auto;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;
transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(180deg)}
.faq-item p{padding:0 0 22px;color:var(--muted);font-size:15px;max-width:62ch;line-height:1.6}
/* ---------------- Final CTA — dark, mirroring the hero's tone ---------------- */.final-cta{
background:var(--dark);color:#fff;
border-radius:20px;padding:80px 56px;text-align:center;
margin:48px auto;max-width:var(--container);
position:relative;overflow:hidden;
}
.final-cta::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 1000px 400px at 50% -20%, rgba(255,255,255,.04), transparent 60%),
radial-gradient(ellipse 700px 400px at 80% 30%, rgba(78,201,126,.08), transparent 65%);
}
.final-cta::after{
content:'';position:absolute;left:24px;right:24px;bottom:0;height:1px;pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(78,201,126,.4) 50%, transparent);
}
.final-cta > *{position:relative;z-index:1}
.final-cta h2{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.4vw,52px);letter-spacing:-.028em;line-height:1.04;color:#fff}
.final-cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-bright);letter-spacing:-.01em}
.final-cta p{margin-top:18px;color:var(--dark-ink-2);max-width:540px;margin-left:auto;margin-right:auto;font-size:17px}
/* Try-it-now URL input — replaces the two-button row */.final-cta .try-go{
background:var(--accent-bright);color:var(--dark);
border:none;padding:11px 18px;border-radius:9px;
font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;
display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
transition:background .15s var(--ease),color .15s var(--ease);
}
.final-cta .try-go:hover{background:#fff;color:var(--ink)}
.final-cta .try-go .arr{transition:transform .2s var(--ease)}
.final-cta .try-go:hover .arr{transform:translateX(2px)}
.final-cta .try-reassure{
margin-top:14px;
display:inline-flex;gap:18px;justify-content:center;flex-wrap:wrap;
font-size:12px;color:var(--dark-ink-2);
}
.final-cta .try-reassure span{display:inline-flex;align-items:center;gap:6px}
.final-cta .try-reassure svg{color:var(--accent-bright);flex:0 0 auto}
.final-cta .meta{margin-top:24px;color:var(--dark-soft);font-size:13px}
/* ---------------- Footer (charcoal) ---------------- */footer.foot{
padding:72px 0 32px;background:var(--dark);color:var(--dark-ink-2);
border-top:1px solid var(--dark-line);
}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px}
.foot-brand .brand{color:var(--dark-ink)}
.foot-brand p{color:var(--dark-muted);font-size:14px;margin-top:14px;max-width:32ch;line-height:1.55}
/* =========================================================
v42 — visual additions (replaces text-heavy sections)
========================================================= *//* ---- HOW IT WORKS — visual product steps ---- */.how-v{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;
}
.how-v .step{
background:#fff;border:1px solid var(--line);border-radius:16px;
padding:28px 26px 26px;display:flex;flex-direction:column;gap:18px;
position:relative;overflow:hidden;
box-shadow:0 1px 2px rgba(12,12,13,.03),0 16px 40px -28px rgba(12,12,13,.08);
}
.how-v .step-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.how-v .step-num{
font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.16em;font-weight:600;
}
.how-v .step-time{
font-family:var(--mono);font-size:10.5px;color:var(--soft);letter-spacing:.04em;
}
.how-v h3{
font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.014em;color:var(--ink);
}
.how-v p{font-size:13.5px;color:var(--muted);line-height:1.55}
/* shared mini-mock containers — warm cream panel, flat, with a clear hairline */.mock{
background:#f4f4f5; /* cool zinc — matches the dashboard canvas */
border:1px solid var(--line-2);
border-radius:12px;
padding:0;font-size:12.5px;
}
.mock-inner{
padding:16px;
position:relative;
}
.mock-inner.tight{padding:0;overflow:hidden;border-radius:11px}
/* Step 1 — URL form + auto-detect */.mock-form{display:flex;flex-direction:column;gap:10px}
.mock-input{
display:flex;align-items:center;gap:8px;
background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:9px 11px;
font-family:var(--mono);font-size:12px;color:var(--ink-2);
}
.mock-input .lock{color:var(--accent)}
.mock-input .url{flex:1;letter-spacing:-.005em}
.mock-input .caret{
width:1.5px;height:14px;background:var(--accent);
animation:blink 1.1s steps(1,end) infinite;
}
@keyframes blink{50%{opacity:0}
}
.mock-detect{
display:flex;flex-direction:column;gap:6px;font-family:var(--sans);
}
.mock-detect .lbl{
font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;
margin-bottom:2px;
}
.det-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:7px 9px;background:#fff;border:1px solid var(--line);border-radius:7px;
font-size:12px;color:var(--ink-2);
}
.det-row .left{display:flex;align-items:center;gap:8px}
.det-row .tag{
font-family:var(--mono);font-size:9.5px;color:var(--accent);letter-spacing:.08em;
background:var(--accent-soft);border:1px solid var(--accent-line);
padding:1px 6px;border-radius:4px;font-weight:600;
}
.det-row svg{color:var(--accent);flex:0 0 auto}
/* Step 2 — channel toggles */.mock-channels{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ch{
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 11px;
font-size:12.5px;color:var(--ink-2);font-family:var(--sans);
}
.ch .ch-name{display:flex;align-items:center;gap:8px;font-weight:500}
.ch .ch-name svg{flex:0 0 auto;color:var(--ink-3)}
.ch.on{border-color:var(--accent-line);background:var(--accent-soft)}
.ch.on .ch-name svg{color:var(--accent)}
.toggle{
width:26px;height:14px;border-radius:99px;background:var(--line-2);position:relative;
transition:background .2s var(--ease);flex:0 0 auto;
}
.toggle::after{
content:'';position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
top:2px;left:2px;transition:left .2s var(--ease);
box-shadow:0 1px 2px rgba(0,0,0,.1);
}
.ch.on .toggle{background:var(--accent)}
.ch.on .toggle::after{left:14px}
.quiet-pill{
margin-top:4px;display:inline-flex;align-items:center;gap:6px;
font-family:var(--mono);font-size:10.5px;color:var(--muted);
padding:4px 9px;background:#fff;border:1px solid var(--line);border-radius:99px;
align-self:flex-start;
}
.quiet-pill svg{color:var(--soft);flex:0 0 auto}
/* Step 3 — Slack-style alert message (now lives inside .mock-inner.tight) */.mock-slack{
background:#fff;border:none;border-radius:0;overflow:hidden;
font-family:var(--sans);
}
.slack-bar{
padding:8px 12px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);
display:flex;align-items:center;gap:6px;background:var(--bg-2);
}
.slack-bar .hash{color:var(--soft);font-weight:600}
.slack-msg{padding:14px 14px 12px;display:flex;gap:10px;font-size:12.5px;line-height:1.45}
.slack-av{
width:30px;height:30px;border-radius:6px;flex:0 0 auto;
background:#fff;
display:grid;place-items:center;
box-shadow:inset 0 0 0 1px var(--line-2);
}
.slack-av img{
width:18px;height:auto;display:block;
}
.slack-body{flex:1;min-width:0}
.slack-name{font-weight:600;color:var(--ink);font-size:13px;display:flex;align-items:baseline;gap:8px}
.slack-name .stamp{font-weight:400;color:var(--soft);font-size:10.5px;font-family:var(--mono);letter-spacing:0}
.slack-text{margin-top:3px;color:var(--ink-2)}
.slack-text .ok{color:var(--accent);font-weight:500}
.slack-meta{
margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted);
display:flex;gap:10px;flex-wrap:wrap;
}
.slack-meta span{display:inline-flex;align-items:center;gap:4px}
.slack-meta svg{color:var(--accent)}
/* ---- ANATOMY OF AN INCIDENT — visual timeline ---- */.timeline-card{
background:#fff;border:1px solid var(--line);border-radius:18px;
overflow:hidden;
box-shadow:0 1px 2px rgba(12,12,13,.03),0 24px 60px -32px rgba(12,12,13,.1);
margin-top:32px;
}
.timeline-header{
padding:20px 28px;display:flex;justify-content:space-between;align-items:center;
border-bottom:1px solid var(--line);font-size:12.5px;
background:var(--bg-2);
}
.timeline-header .who{display:flex;align-items:center;gap:10px;color:var(--ink-2);min-width:0;flex:1}
.timeline-header .who .pulse{
/* Resolved state — green and steady, not red & pulsing */
width:7px;height:7px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 3px rgba(0,126,66,.18);
animation:halo 2.6s ease-out infinite;
}
.timeline-header .status{
display:flex;align-items:center;gap:10px;flex-shrink:0;
font-family:var(--mono);font-size:11.5px;color:var(--muted);
}
.timeline-header .status-pill{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px 3px 7px;border-radius:999px;
background:var(--accent-soft);color:var(--accent);
border:1px solid var(--accent-line);
font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;
}
.timeline-header .status-pill svg{flex:0 0 auto}
.timeline-header .dur{color:var(--ink-2);font-weight:600}
.timeline-header .when{font-family:var(--mono);color:var(--muted);font-size:11.5px}
/* Timeline — 4 horizontal stages. Inside each stage, items stack vertically:
[node] → [stamp] → [title] → [copy] → [chips]. A thin horizontal connector
sits at the node's vertical center, BETWEEN consecutive nodes — so it never
overlays the timestamp text below. Equal 14px buffer on both sides. */.timeline-track{
position:relative;display:grid;grid-template-columns:repeat(4,1fr);
gap:16px;padding:32px 0 28px;
}
.tl-stage{
position:relative;text-align:left;padding:0 14px;
display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
/* Horizontal connector — centered between this stage's node and the next.
Math:
- node-right inside stage box = padding-left(14) + node-width(28) = 42
- left = 42 + 14 (buffer) = 56
- right = -16 (line ends at next cell's left edge; next-node-left in
that cell = padding-left(14), so buffer is 14 again ⇒ symmetric)
- top = node-height/2 = 14 (node center) */.tl-stage:not(:last-child)::after{
content:'';position:absolute;
left:56px;right:-16px;top:14px;
height:1.5px;border-radius:1px;
transform:translateY(-0.75px);opacity:.9;
}
.tl-stage[data-state="bad"]:not(:last-child)::after { background:var(--bad) }
.tl-stage[data-state="warn"]:not(:last-child)::after{ background:var(--warn) }
/* Page on-call (warn) → Recovery (good): fade amber into green */.tl-stage:nth-of-type(3):not(:last-child)::after{
background:linear-gradient(90deg,var(--warn),var(--accent));
}
/* Trailing line after the last (Recovery) node — extends to the right edge
so the timeline doesn't end abruptly. Fades from green to transparent. */.tl-stage:last-child::after{
content:'';position:absolute;
left:56px;right:0;top:14px;
height:1.5px;border-radius:1px;
transform:translateY(-0.75px);opacity:.9;
background:linear-gradient(90deg,var(--accent),rgba(0,126,66,0));
}
.tl-stage .node{
width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid var(--line-2);
display:grid;place-items:center;position:relative;margin:0;z-index:1;
transition:all .2s var(--ease);
order:-1; /* render node ABOVE the timestamp in the flex column */
}
.tl-stage .node svg{width:14px;height:14px}
.tl-stage[data-state="bad"] .node{border-color:var(--bad); background:#fff;color:var(--bad)}
.tl-stage[data-state="warn"] .node{border-color:var(--warn); background:#fff;color:var(--warn)}
.tl-stage[data-state="good"] .node{
border-color:var(--accent);
background:var(--accent);
color:#fff;
}
.tl-stage[data-state="good"] .node svg{stroke-width:2}
.tl-stage[data-state="bad"] .node::before,
.tl-stage[data-state="warn"] .node::before{
content:'';position:absolute;inset:-5px;border-radius:50%;
border:1.5px solid currentColor;opacity:0;animation:pin-pulse 2.4s ease-out infinite;
}
.tl-stage .stamp{
font-family:var(--mono);font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.04em;
margin:0;
}
.tl-stage h4{
font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.012em;color:var(--ink);
margin:0;
}
.tl-stage p{
font-size:12.5px;color:var(--muted);line-height:1.5;
margin:0;max-width:none;
}
.tl-stage .chips{
margin-top:4px;display:flex;gap:5px;flex-wrap:wrap;
}
.tl-stage .chip{
font-family:var(--mono);font-size:10px;letter-spacing:.05em;font-weight:500;
padding:2px 7px;border-radius:4px;
background:var(--bg-2);color:var(--ink-3);border:1px solid var(--line);
}
.tl-stage .chip.acc{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.tl-stage .chip.warn{background:#fdf3e1;color:var(--warn);border-color:#ecd4a3}
/* ---- WHY UPTIMIA — visual cells (warm cream panel, flat, hairline) ---- *//* Cell 1 — patchwork → unified *//* Cell 2 — setup timer */@keyframes fill{0%{width:0%}
60%{width:100%}
80%{width:100%;opacity:1}
100%{width:100%;opacity:0}
}
/* Cell 3 — sign-up card *//* Cell 4 — EU map *//* ---- Why Uptimia — patchwork vs. all-in price comparison ---- */.patch-scenario{
display:flex;width:fit-content;align-items:center;gap:7px;
margin:32px auto 0;
padding:7px 14px;border-radius:999px;
background:var(--bg-2);border:1px solid var(--line);
font-family:var(--mono);font-size:11.5px;color:var(--ink-2);letter-spacing:.01em;
}
.patch-scenario svg{color:var(--accent);flex:0 0 auto}
.patch-compare{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:28px;align-items:stretch;
margin-top:24px;
}
.patch-col{
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:24px 24px 18px;display:flex;flex-direction:column;
box-shadow:0 1px 2px rgba(12,12,13,.03);
}
.patch-col.patch-right{
background:linear-gradient(180deg,#fff,var(--accent-soft) 220%);
border-color:var(--accent-line);
box-shadow:0 1px 2px rgba(12,12,13,.03),0 24px 60px -32px rgba(0,163,95,.18);
}
.patch-col-h{
padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
display:flex;flex-direction:column;gap:3px;
}
.patch-right .patch-col-h{border-bottom-color:var(--accent-line)}
.patch-lbl{
font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);
letter-spacing:-.01em;
}
.patch-lbl.up{color:var(--accent)}
.patch-meta{
font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.02em;
}
.patch-list{
list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;flex:1;
}
.patch-list li{
display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:11px;
font-size:13.5px;color:var(--ink-2);
}
.patch-list li .brand-dot{
width:8px;height:8px;border-radius:2px;background:var(--c,#888);flex:0 0 auto;
}
.patch-list li .brand-dot.c1{background:#3b82f6}
.patch-list li .brand-dot.c2{background:#a855f7}
.patch-list li .brand-dot.c3{background:#f59e0b}
.patch-list li .brand-dot.c4{background:#06b6d4}
.patch-list li .brand-dot.c5{background:#ef4444}
.patch-list li .nm{font-weight:600;color:var(--ink)}
.patch-list li .role{color:var(--muted);font-size:12.5px}
.patch-list li .price{
font-family:var(--mono);font-size:12.5px;color:var(--ink-2);font-weight:500;
text-align:right;
}
.patch-list li .price small{color:var(--muted);font-size:9.5px;margin-left:1px}
.patch-list.inc li{
display:flex;align-items:center;gap:10px;
}
.patch-list.inc li svg{color:var(--accent);flex:0 0 auto}
.patch-list.inc li .nm{font-weight:500;color:var(--ink-2)}
.patch-total{
margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
display:flex;justify-content:space-between;align-items:baseline;
}
.patch-right .patch-total{border-top-color:var(--accent-line)}
.patch-total .t-lbl{
font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;
}
.patch-total .t-num{
font-family:var(--display);font-weight:600;font-size:28px;color:var(--ink);
letter-spacing:-.02em;
}
.patch-total .t-num small{font-family:var(--sans);font-size:12px;color:var(--muted);font-weight:500;margin-left:2px}
.patch-total.up .t-num{color:var(--accent)}
.patch-arrow{
display:flex;align-items:center;justify-content:center;color:var(--ink-3);
padding:0 2px;
}
.patch-savings{
margin:32px auto 0;text-align:center;max-width:780px;
font-family:var(--display);font-size:18px;color:var(--ink);letter-spacing:-.008em;line-height:1.4;
}
.patch-savings strong{color:var(--accent);font-weight:700}
@media (max-width:880px){.patch-compare{grid-template-columns:1fr;gap:18px}
.patch-arrow{transform:rotate(90deg);padding:4px 0}
}
/* ---- Use cases — scenario-led cards ---- *//* "when" scenario line — italic-serif, slightly muted *//* ---- Inline CTA strip (between sections) ---- */.inline-cta{
margin:0 auto;max-width:var(--container);
padding:0 28px;
}
.inline-cta .strip{
margin:64px 0 -32px;
background:#fff;border:1px solid var(--line);border-radius:14px;
padding:22px 28px;
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
box-shadow:0 1px 2px rgba(12,12,13,.03);
}
.inline-cta .copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.inline-cta .eyebrow-mini{
font-family:var(--mono);font-size:10.5px;color:var(--accent);
letter-spacing:.16em;font-weight:600;text-transform:uppercase;
}
.inline-cta h4{
font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.014em;
color:var(--ink);
}
.inline-cta h4 em{
font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);
letter-spacing:-.005em;
}
.inline-cta .meta{font-size:12.5px;color:var(--muted);margin-top:1px}
/* ---- Hero card: one extra animated touch (live latency line) ---- */@keyframes scan{0% {background-position: -50% 0%}
100%{background-position: 150% 0%}
}
/* ---------------- Responsive ---------------- */@media (max-width:980px){section{padding:80px 0}
/* Eyebrow: switch from inline-flex (where the dot wraps to its own
line when the text is too long) to plain inline so the dot stays
attached to the first word and the text wraps as inline content. */.eyebrow{display:none}
.eyebrow .live-dot{
display:inline-block;vertical-align:middle;
margin-right:8px;position:relative;top:-1px;
}
.proof-row{grid-template-columns:repeat(2,1fr);gap:24px 0}
.proof-cell:nth-child(3)::before{display:none}
.proof-cell:nth-child(3),.proof-cell:nth-child(4){padding-top:24px;border-top:1px solid var(--line)}
/* Force a 2×2 grid for the 4 role pills at mobile widths — the natural
flex-wrap was producing a 3+1 layout which looked off-balance. */.role-pills{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
justify-content:stretch;
}
.role-pill{padding:12px 12px 14px;gap:8px;width:100%}
/* Keep the label visible at mobile widths — icon-only pills are
too cryptic to know which tab does what. Only the "Reports /
Code-first / No-code / White-label" sub-line is hidden. */.role-pill .rp-text{display:flex}
.role-pill .rp-sub{display:none}
.role-pill .rp-label{font-size:13px}
.hero{padding-top:140px;padding-bottom:80px}
.hero-grid,.engines,.role-panel.active,.sp-grid,.int-wrapper{grid-template-columns:1fr;gap:48px}
.stat-strip, .price-grid, .foot-grid, .how-grid{grid-template-columns:1fr 1fr}
.how-grid{border-bottom:none}
.int-wall{grid-template-columns:repeat(3,1fr)}
.nav-links{display:none}
.sec-h{font-size:32px}
.how-v{grid-template-columns:1fr;gap:14px}
.timeline-track{grid-template-columns:1fr 1fr;gap:32px 14px}
.timeline-track::before{display:none}
.timeline-header{flex-direction:column;align-items:flex-start;gap:8px}
.timeline-header .status{flex-wrap:wrap}
}
@media (max-width:560px){.stat-strip, .price-grid, .foot-grid, .how-grid{grid-template-columns:1fr}
.int-wall{grid-template-columns:repeat(2,1fr)}
.final-cta{padding:48px 28px;margin:24px 16px}
.timeline-track{grid-template-columns:1fr}
}
/* ── Probes network section (homepage) ─────────────────────────── */.probes-net{ padding:96px 0 88px; }
.probes-net .sec-h{ color:var(--dark-ink); }
.probes-net .sec-sub{ color:var(--dark-ink-2); }
.probes-net .cp-kpi-strip{
display:flex; flex-wrap:wrap; justify-content:center;
gap:10px; margin:34px auto 0; max-width:880px;
}
.probes-net .cp-kpi{
display:inline-flex; align-items:center; gap:8px;
padding:9px 14px;
border-radius:999px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
color:#fff; text-decoration:none;
font-size:13px; line-height:1;
transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.probes-net .cp-kpi:hover{
background:rgba(255,255,255,.11);
border-color:rgba(255,255,255,.22);
transform:translateY(-1px);
}
.probes-net .cp-kpi-n{
font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,Monaco,monospace);
font-weight:600; font-size:14px;
color:var(--accent-bright,#4ec97e);
}
.probes-net .cp-kpi-l{ color:rgba(255,255,255,.78); }
.probes-net-foot{ margin-top:30px; text-align:center; }
.probes-net-link{
display:inline-flex; align-items:center; gap:8px;
color:var(--dark-ink); text-decoration:none;
font-size:14px; font-weight:600;
padding:10px 18px; border-radius:999px;
border:1px solid rgba(255,255,255,.18);
background:transparent;
transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.probes-net-link:hover{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.32);
transform:translateY(-1px);
}
.probes-net-link svg{ transition:transform .15s ease; }
.probes-net-link:hover svg{ transform:translateX(2px); }
@media (max-width: 720px){.probes-net{ padding:64px 0 56px; }
.probes-net .cp-kpi-strip{ gap:8px; }
.probes-net .cp-kpi{ padding:8px 12px; font-size:12px; }
}