/* =============================================================================
   notification.zeetsoft.com — public landing page

   The same layout cdn.zeetsoft.com serves at "/": logo over a blue header, a
   hero with artwork on the left and status on the right, a dark strip of entry
   cards, then the support/address footer.

   Written standalone rather than by importing the legacy Alpha template
   (base.css + framework.css + custom.css + style.css, ~86 KB) that the CDN
   loads. That template declares bare `body`, `h1`, `label` and `p` rules, so
   loading it in this app — where one document also hosts the operator console —
   would restyle every console page. Everything below is therefore prefixed
   `.znl`, and `.znl` itself is a fixed full-viewport layer, so the landing and
   the console cannot reach into one another.

   Self-contained for the same reason app.css is: no CDN, no external font, no
   icon pack. A landing page whose job is to say "the gateway is up" must not
   depend on another host being up.
   ============================================================================= */

.znl, .znl * { box-sizing: border-box; }

.znl {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;

    /* Same concrete plate the CDN uses (skins/bg-body1.jpg), fixed so it does not
       scroll with the card. */
    background: #ffffff url("../img/page-bg.jpg") fixed;
    color: #6d6d6d;
    font: 12px Tahoma, Arial, Verdana, sans-serif;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
}

.znl a { text-decoration: none; }

/* 1040px is the template's fixed width; capped rather than fixed so the page
   still holds together on a laptop and on a phone. */
.znl-main {
    width: 100%;
    max-width: 1040px;
    margin: 36px auto;
    padding: 0 16px;
}

/* ---------------------------------------------------------------- header ---- */

.znl-header {
    position: relative;
    background-color: #007bb7;
    border-radius: 10px;
    z-index: 100;
}

/* Straddles the blue panel's top edge, as on the CDN.
   364px is logo.png's natural width — most of it is transparent margin around the building, so
   scaling it down to the ~164px the artwork appears to need shrinks the building to a thumbnail. */
.znl-logo {
    position: absolute;
    top: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 364px;
    z-index: 10;
}

.znl-logo img { display: block; width: 100%; height: auto; }

/* The strip of light behind the logo. */
.znl-menu {
    height: 146px;
    background: url("../img/menu-glow.png") no-repeat center;
}

/* ------------------------------------------------------------------ hero ---- */

.znl-hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 0 60px 34px;
}

.znl-hero-art { flex: 0 0 400px; max-width: 400px; margin-top: 4px; }
.znl-hero-art img { display: block; width: 100%; height: auto; }

.znl-hero-text { flex: 1 1 auto; min-width: 0; margin-top: 40px; }

.znl-hero-text h1 {
    margin: 0 0 24px;
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    font-weight: 400;
    letter-spacing: -2px;
    text-shadow: 0 2px 0 #146e9b;
}

.znl-hero-text p {
    margin: 0 0 15px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 2px 0 #146e9b;
}

.znl-meta {
    display: block;
    margin-top: 22px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 2px 0 #146e9b;
}

/* Green pulse, so "running" is visible before the text is read. */
.znl-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 3px 11px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 20px;
    color: #fff;
    font-size: 11px;
    text-shadow: none;
}

.znl-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7ef2a0;
    box-shadow: 0 0 0 0 rgba(126,242,160,.75);
    animation: znlpulse 2s infinite;
}

@keyframes znlpulse {
    70%  { box-shadow: 0 0 0 8px rgba(126,242,160,0); }
    100% { box-shadow: 0 0 0 0 rgba(126,242,160,0); }
}

/* --------------------------------------------------------------- entries ---- */

.znl-caption {
    background-color: #3e3e3e;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 22px 24px 18px;
}

.znl-cards {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* One hue per destination, set inline as --tc and used by the tile and the
   hover border, so the row can be scanned by colour. */
.znl-card {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 9px;
    text-shadow: none;
    transition: background .14s, border-color .14s, transform .14s;
}

.znl-card:hover {
    background: rgba(255,255,255,.10);
    border-color: var(--tc, #5b9bff);
    transform: translateY(-2px);
}

.znl-card-ico {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--tc, #5b9bff);
}

.znl-card-ico svg { width: 17px; height: 17px; }

.znl-card-txt { min-width: 0; }

.znl-card-t {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13.5px;
    font-weight: bold;
    letter-spacing: -.1px;
}

.znl-card-t svg { width: 11px; height: 11px; color: #b8c2d0; flex: none; }

.znl-card-d {
    display: block;
    margin-top: 3px;
    color: #b0b8c4;
    font-size: 11px;
    line-height: 1.45;
}

.znl-note {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 13px;
    color: #9aa3b0;
    font-size: 10.5px;
    text-shadow: none;
}

.znl-note code {
    padding: 1px 6px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    color: #cbd3de;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 10.5px;
}

/* ---------------------------------------------------------------- footer ---- */

.znl-bottom {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding: 27px 30px 20px;
    border-radius: 10px;
    background: #3b3b3b url("../img/footer-bg.png") repeat;
    color: #fff;
    font-size: 11px;
    text-shadow: 0 1px 0 #282828;
    position: relative;
    z-index: 100;
}

.znl-col { flex: 1 1 240px; min-width: 0; }

.znl-bottom h6 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 0 #282828;
}

.znl-bottom p { margin: 0; line-height: 1.9; }
.znl-bottom a { color: #fff; }
.znl-bottom a:hover { text-decoration: underline; }

.znl-col-logo { flex: 0 0 auto; margin-left: auto; }
.znl-col-logo img { display: block; }

.znl-social { margin-top: 14px; }
.znl-social a {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    vertical-align: middle;
}
.znl-social .znl-fb { background: url("../img/social/fb.png") 0 0 no-repeat; }
.znl-social .znl-tw { background: url("../img/social/tw.png") 0 0 no-repeat; }
/* Sprites carry the hover state 26px down. */
.znl-social .znl-fb:hover { background-position: 0 -26px; }
.znl-social .znl-tw:hover { background-position: 0 -26px; }

/* ------------------------------------------------------------ responsive ---- */

@media (max-width: 900px) {
    .znl-main { margin: 18px auto; }
    .znl-logo { width: 250px; top: -22px; }
    .znl-menu { height: 96px; }
    .znl-hero {
        flex-direction: column;
        align-items: center;
        padding: 0 24px 28px;
        text-align: center;
    }
    .znl-hero-art { flex: 0 0 auto; max-width: 260px; }
    .znl-hero-text { margin-top: 8px; }
    .znl-hero-text h1 { font-size: 34px; line-height: 36px; letter-spacing: -1px; }
    .znl-live { margin-bottom: 10px; }
    .znl-col-logo { margin: 0 auto; }
}