@charset "utf-8";
/*
 * Visitics — cookieless web analytics, heatmaps and an AI chatbot for websites and e-shops.
 * https://www.getvisitics.com · info@getvisitics.com · software as a service provided by Esentra, s.r.o., Slovakia
 *
 * SPDX-FileCopyrightText: 2026 Esentra, s.r.o. <info@esentra.sk>
 *
 * SPDX-License-Identifier: LicenseRef-Esentra-Proprietary
 *
 * All rights reserved. No licence is granted without a written agreement with Esentra, s.r.o.
 * The terms: LICENSE and LICENSES/LicenseRef-Esentra-Proprietary.txt.
 */

/* The status page of Visitics — the ember palette of the product, light or dark by the system setting.
   States are always said in words too (the colour only helps); text colours have ≥ 4.5 : 1 on their background. */

:root {
  --bg: #faf7f5; --card: #ffffff; --ink: #1f1915; --ink-2: #5b524d; --muted: #6e645e; --line: #ece4df;
  --accent: #c2410c; --flame: linear-gradient(100deg, #ffb938 0%, #ff7a2e 48%, #f2456e 100%);
  --ok: #087a33; --ok-bg: #e7f6ec; --deg: #8f5f00; --deg-bg: #fff4d6; --part: #b2400d; --part-bg: #ffe9dc;
  --maj: #b42318; --maj-bg: #fde7e5; --mnt: #1f5e80; --mnt-bg: #e3f0f7; --none: #d9d0ca;
  --bar-ok: #22a35a; --bar-minor: #e3a008; --bar-partial: #f07a3a; --bar-major: #d0342c; --bar-maint: #3a8fc0;
  --shadow: 0 1px 2px rgba(40, 20, 10, .05), 0 10px 30px -14px rgba(40, 20, 10, .18);
  --font: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #120d0b; --card: #1d1714; --ink: #f6eee8; --ink-2: #cdbfb6; --muted: #a39891; --line: #33281f;
    --accent: #ffb25c;
    --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .12); --deg: #f0c043; --deg-bg: rgba(240, 192, 67, .12); --part: #f59a62; --part-bg: rgba(245, 154, 98, .13);
    --maj: #f47a7a; --maj-bg: rgba(244, 122, 122, .13); --mnt: #6cbbe6; --mnt-bg: rgba(108, 187, 230, .13); --none: #3a2f29;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: .18em; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; }
:focus-visible { outline: 3px solid #ff7a2e; outline-offset: 2px; border-radius: 4px; }
.st-wrap { width: min(100% - 2rem, 860px); margin-inline: auto; }
.st-skip { position: absolute; left: -9999px; top: .5rem; padding: .5rem .8rem; background: var(--card); border-radius: 8px; }
.st-skip:focus { left: .5rem; z-index: 10; }
.st-demo { margin: 0; padding: .45rem 1rem; text-align: center; font-size: .85rem; font-weight: 650; color: #1a0e08; background: var(--flame); }

/* Header */
.st-header { border-bottom: 1px solid var(--line); background: var(--card); }
.st-header__in { display: flex; align-items: center; gap: 1rem; min-height: 68px; flex-wrap: wrap; padding-block: .5rem; }
.st-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; margin-right: auto; }
.st-brand__mark { width: 34px; height: 34px; filter: drop-shadow(0 4px 10px rgba(255, 122, 46, .3)); }
.st-brand__text { display: grid; line-height: 1.05; }
.st-brand__text b { font-size: 1.2rem; letter-spacing: -.02em; }
.st-brand__text small { color: var(--muted); font-weight: 650; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.st-langs { display: flex; gap: .15rem; }
.st-langs a { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border-radius: 999px; color: var(--ink-2); font-weight: 650; font-size: .85rem; text-decoration: none; }
.st-langs a[aria-current] { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.st-to { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--flame); color: #1a0e08; font-weight: 700; font-size: .9rem; text-decoration: none; }

main { padding: 2rem 0 3rem; }

/* The overall state */
.st-hero { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 18px; color: var(--ink); background: var(--card); box-shadow: var(--shadow); border-left: 6px solid var(--c, var(--ok)); }
.st-hero h1 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.st-hero p { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.st-hero__ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cbg, var(--ok-bg)); color: var(--c, var(--ok)); }
.st-hero__ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.st-hero--operational { --c: var(--ok); --cbg: var(--ok-bg); }
.st-hero--degraded { --c: var(--deg); --cbg: var(--deg-bg); }
.st-hero--partial { --c: var(--part); --cbg: var(--part-bg); }
.st-hero--major { --c: var(--maj); --cbg: var(--maj-bg); }
.st-hero--maintenance { --c: var(--mnt); --cbg: var(--mnt-bg); }
.st-note { margin-top: .9rem; padding: .7rem 1rem; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
.st-note--warn { border-color: var(--deg); background: var(--deg-bg); color: var(--ink); }

/* Sections */
.st-sec { margin-top: 2.25rem; }
.st-sec > h2 { font-size: 1.15rem; margin-bottom: .9rem; }
.st-muted { color: var(--muted); }
.st-kicker { color: var(--accent); font-size: .8rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; margin-top: 1rem; }
.st-title { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); margin: .3rem 0 1rem; }
.st-lead { color: var(--ink-2); margin-bottom: 1.5rem; }
.st-back a, .st-more { font-weight: 650; text-decoration: none; }
.st-more { display: inline-flex; margin-top: 1rem; }

/* An incident */
.st-inc { position: relative; margin-bottom: 1rem; padding: 1.1rem 1.25rem 1.1rem 1.5rem; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.st-inc::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--c, var(--deg)); }
.st-inc--degraded { --c: #e3a008; } .st-inc--partial { --c: #f07a3a; } .st-inc--major { --c: #d0342c; } .st-inc--maintenance { --c: #3a8fc0; }
.st-inc__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; justify-content: space-between; }
.st-inc__head h3 { font-size: 1.08rem; }
.st-inc__head a { color: var(--ink); text-decoration: none; }
.st-inc__head a:hover { text-decoration: underline; }
.st-inc__meta { margin-top: .3rem; color: var(--muted); font-size: .88rem; }
.st-badge { display: inline-flex; padding: .12rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.st-badge--degraded { color: var(--deg); background: var(--deg-bg); } .st-badge--partial { color: var(--part); background: var(--part-bg); }
.st-badge--major { color: var(--maj); background: var(--maj-bg); } .st-badge--maintenance { color: var(--mnt); background: var(--mnt-bg); }
.st-upd { margin: .9rem 0 0; padding: 0 0 0 1rem; list-style: none; border-left: 2px solid var(--line); display: grid; gap: .7rem; }
.st-upd li { position: relative; }
.st-upd li::before { content: ''; position: absolute; left: -1.38rem; top: .45rem; width: .62rem; height: .62rem; border-radius: 50%; background: var(--card); border: 2px solid var(--c, var(--deg)); }
.st-upd li:first-child::before { background: var(--c, var(--deg)); }
.st-upd b { font-weight: 700; }
.st-upd time { color: var(--muted); font-size: .85rem; margin-left: .3rem; }
.st-upd p { margin-top: .15rem; color: var(--ink-2); }

/* Components and the bars of days */
.st-comps { margin: 0; padding: 0; list-style: none; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.st-comp { padding: 1.1rem 1.25rem; }
.st-comp + .st-comp { border-top: 1px solid var(--line); }
.st-comp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.st-comp__head h3 { font-size: 1rem; }
.st-comp__head p { color: var(--muted); font-size: .85rem; }
.st-state { display: inline-flex; align-items: center; gap: .4rem; flex: none; font-size: .88rem; font-weight: 700; white-space: nowrap; }
.st-state i { width: .62rem; height: .62rem; border-radius: 50%; background: currentColor; }
.st-state--operational { color: var(--ok); } .st-state--degraded { color: var(--deg); } .st-state--partial { color: var(--part); }
.st-state--major { color: var(--maj); } .st-state--maintenance { color: var(--mnt); } .st-state--unknown { color: var(--muted); }
.st-state--major i { animation: st-pulse 1.6s ease-in-out infinite; }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 5px rgba(208, 52, 44, .22); } }
.st-bars { position: relative; display: flex; gap: 2px; height: 34px; }
.st-bar { flex: 1; min-width: 0; border-radius: 3px; background: var(--bar-ok); transition: transform .12s ease, filter .12s; cursor: default; }
.st-bar:hover, .st-bar:focus-visible { transform: scaleY(1.12); filter: brightness(1.08); }
.st-bar--none { background: var(--none); } .st-bar--minor { background: var(--bar-minor); } .st-bar--partial { background: var(--bar-partial); }
.st-bar--major { background: var(--bar-major); } .st-bar--maint { background: var(--bar-maint); }
.st-comp__foot { display: flex; align-items: center; gap: .75rem; margin-top: .45rem; color: var(--muted); font-size: .8rem; }
.st-comp__foot .st-uptime { margin-inline: auto; font-weight: 650; color: var(--ink-2); }
.st-new30 { display: none; }
@media (max-width: 640px) {
  .st-bar--old { display: none; }
  .st-old { display: none; }
  .st-new30 { display: inline; }
}
.st-tip { position: fixed; z-index: 20; max-width: 260px; padding: .55rem .7rem; border-radius: 10px; background: #1f1915; color: #f6eee8; font-size: .8rem; line-height: 1.45; white-space: pre-line; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); pointer-events: none; }
.st-tip b { display: block; margin-bottom: .15rem; }
.st-how { margin-top: .8rem; color: var(--muted); font-size: .88rem; }
.st-how summary { cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; }

/* The past days */
.st-days { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; }
.st-days > li > h3 { font-size: .95rem; padding-bottom: .4rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
.st-days .st-inc { margin-bottom: .6rem; }

/* Footer */
.st-footer { border-top: 1px solid var(--line); padding: 1.5rem 0 2rem; color: var(--muted); font-size: .85rem; }
.st-footer__in { display: grid; gap: .35rem; }
.st-footer a { color: inherit; }

@media (max-width: 520px) {
  .st-header__in { gap: .5rem; }
  .st-to { order: 3; width: 100%; justify-content: center; }
  .st-hero { flex-direction: column; align-items: flex-start; }
  .st-comp__head { flex-direction: column; gap: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Keyboard: the days of a component are one stop; the chosen day is outlined. */
.st-bars:focus-visible { outline-offset: 4px; }
.st-bar.is-on { outline: 2px solid var(--ink); outline-offset: 1px; transform: scaleY(1.12); }
.st-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-inc__head a { display: inline-block; padding: .15rem 0; }