/*
 * Splash / "coming soon" page for anonymous visitors at /.
 *
 * Reimplements the look of the old third-party template kit it replaces (warm
 * olive field, fine texture, centred serif wordmark, translucent description
 * card) without its baggage: no jQuery 1.5.1, no Modernizr 1.7, no
 * plaintext-http Google Fonts, and no PNG background tiles — the texture and
 * both gradients are pure CSS now.
 *
 * The grey.ooo brand bar sits above all this and keeps the brand kit's own dark
 * palette. The warm backdrop itself now lives in warm-field.css, shared with
 * the login and register pages; what is left here is this page's own layout.
 */

/* .gooo-topbar's background is a translucent glass fill, so it needs an opaque
   dark surface underneath — on the app pages .gooo-shell provides that, and
   there is no shell here. */
body {
    margin: 0;
    background: var(--gooo-bg);
}

/* Paint comes from .warm-field (warm-field.css), also on the <main>. */
.splash {
    min-height: calc(100vh - var(--gooo-topbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem 4rem;
    text-align: center;
    font-family: var(--gooo-font);
    font-size: 14px;
}

.splash__inner {
    width: 100%;
    max-width: 30rem;
}

/*
 * Self-hosted rather than linked from Google: the splash is the first thing an
 * anonymous visitor loads, and the old template kit's plaintext-http webfont
 * link was one of the things replacing it was meant to be rid of. This is the
 * `latin` subset only (215 codepoints, 21KB) — enough for the wordmark, and the
 * `latin-ext` subset deliberately not shipped since nothing here needs it.
 */
@font-face {
    font-family: "Racing Sans One";
    src: url("../fonts/RacingSansOne-Regular-j3HRcw2.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*
 * The heading behind the wordmark. Visually hidden rather than removed so the
 * document keeps a real <h1>; the SVG beside it is the visible article.
 */
.splash__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Wordmark geometry is baked into the markup as per-letter transforms, because
 * the letters scale as well as follow the arc and no single text-on-a-path can
 * do both. To change the arc, fan, rotation or face, recompute the <g> list
 * from the font's own advance widths rather than nudging the numbers by hand —
 * the viewBox is cropped to the rotated bounding box and will not survive it.
 *
 * width is capped in ch-independent units so the sign scales with the card
 * below it; the aspect ratio (2.03) comes from that cropped viewBox.
 */
.splash__wordmark {
    display: block;
    /* 92% rather than 100%: the lockup is rotated, so its corners reach further
       than the copy below it and it crowds the screen edge on a phone. */
    width: min(92%, 22rem);
    height: auto;
    margin: 0 auto 2.2rem;
    overflow: visible;
    filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.45));
}

.splash__wordmark text {
    font-family: "Racing Sans One", ui-serif, Georgia, serif;
    fill: #fff;
    text-anchor: middle;
}

/* Left-aligned prose under a centred wordmark, as the original had it. */
.splash__card {
    padding: 1.15rem 1.4rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.2);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.splash__card p {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    line-height: 1.5;
}

.splash__card p:last-child {
    margin-bottom: 0;
}

.splash__card a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.splash__card a:hover {
    text-decoration-thickness: 2px;
}