/*
    STORM :: frontend

    The public landing page. Dark chrome, full bleed hero, two outlined
    calls to action.
*/

.fe-root {
    background: var(--pt-bg);
    color: var(--pt-text);
}

/* -- Header ------------------------------------------------------------- */

.fe-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4);
    padding: 14px var(--space-6);
    background: var(--pt-header);
    flex: none;
}

.brand-wordmark { display: flex; align-items: center; gap: 10px; }

.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-words strong { font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.01em; }
.brand-words em { font-style: normal; font-size: var(--text-sm); opacity: .72; letter-spacing: .02em; }

.fe-head-centre { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fe-head-title { font-size: var(--text-xl); font-weight: 700; white-space: nowrap; }

.fe-head-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); }

.fe-head-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pt-accent);
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
}
.fe-head-link:hover { filter: brightness(1.25); }

/* -- Nav ---------------------------------------------------------------- */

.fe-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--pt-nav);
    flex: none;
}

.fe-nav-item {
    position: relative;
    padding: 14px 22px;
    border: 0;
    background: none;
    color: #e9edf3;
    font-family: inherit;
    font-size: var(--text-md);
    cursor: pointer;
}

.fe-nav-item + .fe-nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 25%;
    height: 50%;
    border-left: 1px solid rgba(255, 255, 255, .18);
}

.fe-nav-item:hover { background: rgba(255, 255, 255, .06); }

.fe-nav-item.is-active::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    border-bottom: 3px solid #fff;
}

/* -- Hero --------------------------------------------------------------- */

.fe-hero {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;

    /*
        With no supplied image the backdrop is generated: a blue wash, a
        suggestion of a road surface, and a battenburg stripe along the
        bottom. It reads as a police photograph without needing one.
    */
    background-color: #0f2f6b;
    background-image:
        radial-gradient(ellipse at 20% 40%, rgba(52, 118, 214, .55), transparent 60%),
        radial-gradient(ellipse at 80% 60%, rgba(18, 44, 98, .8), transparent 65%),
        linear-gradient(180deg, #11326f 0%, #0a1c38 100%);
}

.fe-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background:
        repeating-linear-gradient(90deg,
            #0b53c4 0 52px,
            #d9e021 52px 104px);
    opacity: .9;
}

.fe-hero.has-image::after { opacity: .55; }

.fe-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-8);
    text-align: center;
}

.fe-title {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .7);
    margin: 0;
}

.fe-sub {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: #e6ecf6;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

.fe-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }

.fe-btn {
    padding: 11px 26px;
    border: 1px solid rgba(255, 255, 255, .85);
    background: rgba(10, 22, 48, .35);
    color: #fff;
    font-family: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: background .14s ease;
}

.fe-btn:hover { background: rgba(255, 255, 255, .18); }