/*
Theme Name: Curio demo
Description: A deliberately near-empty page for the Curio chat demo. It renders the TechNerdXp lockup in the centre of the viewport and nothing else, so the only thing on screen to interact with is the chat widget. Internal — never ships in the plugin zip.
Author: TechNerdXp
Author URI: https://technerdxp.com/
Version: 3.0.0
License: GPLv2 or later
Text Domain: curio-demo
*/

/* The page is the backdrop, not the demo.
 *
 * Everything here is tuned to stay under the chat widget rather than compete
 * with it. The lockup is the same one the listing banner uses — serif wordmark,
 * the descriptor beneath it letter-spaced in the brand orange — but set small
 * and damped, because the widget in the corner is what the link exists to show
 * and a centred logo that shouts is the fastest way to make somebody look at
 * the wrong half of the page. */

:root {
    /* Straight out of the brand artwork in assets-wporg: the same warm
     * off-white the listing screenshots are shot on, the same ink, the same
     * orange as the dot in the middle of the Curio mark. */
    --page: #faf9f7;
    --page-deep: #f1efea;
    --ink: #22252b;

    /* The wordmark sits lighter than body ink so it recedes, and the descriptor
     * uses a darker orange than the mark's #e9622d: the brand orange is a
     * 3:1 colour on this ground before the damping below, and this is text. */
    --wordmark: #3a3f47;
    --descriptor: #c2410c;

    --dot: rgba(34, 37, 43, 0.05);

    /* The one knob that decides how much the lockup competes with the chat.
     *
     * Measured rather than guessed. At full strength the wordmark reads about
     * 9:1 against the page while the widget's launcher reads about 17:1 — only
     * twice the contrast, and the wordmark has the middle of an empty screen
     * while the launcher has a corner, so the wordmark wins. At 0.45 it falls
     * to roughly 2.3:1, about an eighth of the launcher.
     *
     * It damps the whole lockup in one move, which is why it is opacity and not
     * a pair of paler colours: the wordmark and the descriptor have to recede
     * together or the orange line becomes the loudest thing on the page.
     *
     * Lower to 0.35 or 0.30 to push it further back. Much under that and it
     * stops reading as a mark and starts looking like a rendering fault. */
    --mark-opacity: 0.45;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--page);
    color: var(--ink);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Two layers: a fine dot grid for texture, and a soft radial that lifts the
     * centre and lets the corners fall away. The dots are barely above the
     * background on purpose — at full strength they read as a broken image. */
    background-image:
        radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0),
        radial-gradient(ellipse 80% 60% at 50% 42%, var(--page) 0%, var(--page-deep) 100%);
    background-size: 22px 22px, 100% 100%;
    background-attachment: fixed, fixed;
}

/* dvh first so the lockup sits in the true centre on mobile, where browser
   chrome makes vh taller than what you can actually see. vh is the fallback. */
.stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1.5rem;
    box-sizing: border-box;
}

.lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: var(--mark-opacity);
    user-select: none;
    text-align: center;
}

/* A system serif, not a web font. Loading a typeface from a CDN for one word on
   a demo page would break the same rule the plugin holds itself to on the front
   end, and every one of these ships with the operating system. */
.wordmark {
    font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
        "Times New Roman", serif;
    font-size: clamp(1.35rem, 3.6vw, 2rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--wordmark);
}

.descriptor {
    font-size: clamp(0.58rem, 1.3vw, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--descriptor);
}

/* The widget is fixed to a bottom corner. On a short viewport the lockup and
   the launcher can meet; nudge the lockup up rather than let them collide. */
@media (max-height: 420px) {
    .stage {
        align-items: flex-start;
        padding-top: 2rem;
    }
}