/* Stylesheet for the my-club.online showcase.
 *
 * WHAT THIS FILE IS
 * -----------------
 * Semantic UI paints the page; this file re-paints the parts that carry the brand. It is
 * loaded after semantic.min.css (see apps/templates/html_head.html), so a selector of equal
 * specificity wins here -- which is why several rules below repeat .ui, to match the
 * specificity Semantic uses for the same property rather than to raise it.
 *
 * WHERE THE VALUES COME FROM
 * --------------------------
 * The commercial leaflet (myclub:documentation/mailing/leaflet/css/print.css) already carries
 * a complete, recent visual system for this brand. A prospect holding the PDF should recognise
 * the site, so the palette and the type scale are its own, not a second system invented here.
 * See documentation/myclub/vitrine-plan-refonte.md, step 1.
 *
 * HOW THE BRAND COLOUR REACHES THE MARKUP
 * ---------------------------------------
 * The templates carry Semantic's "blue" class where the MyGym ones carry "green" -- one
 * variable, brand_color, set in apps/myclub/templates/base.html -- and the rules below repaint
 * that blue. Keeping a Semantic colour name in the markup (rather than inventing a "myclub"
 * one) means the templates shared with MyGym, buy.html and services_included.html among them,
 * pick up the brand without having to know which site is being served.
 */

/* --------------------------------------------------------------------------------------
 * Palette
 * --------------------------------------------------------------------------------------
 * --accent is the leaflet's turquoise. At 2.9:1 on white it is a graphic colour, not a text
 * colour: anything that has to be read -- an eyebrow, an icon next to a label -- uses
 * --accent-ink instead, which clears 5:1. White on --brand clears 13:1, and --muted 5.9:1.
 */
:root {
    --ink: #101a3c;
    --brand: #1b2a5b;
    --brand-hover: #24387a;
    --brand-active: #16224a;
    --accent: #00a99d;
    --accent-ink: #007d74;
    --accent-strong: #008f85;
    --accent-soft: #e2f4f2;
    --muted: #5a6478;
    --rule: #dde2ea;
    --tint: #f4f6fa;
    --paper: #ffffff;
}

/* --------------------------------------------------------------------------------------
 * Base typography
 * --------------------------------------------------------------------------------------
 * Lato is the product's own face and Semantic embarks it locally, in 400 and 700 -- there is
 * no Black, so the display sizes get their weight from size and tracking, not from a 900 the
 * browser would have to fake.
 *
 * The 16px body replaces the two nested `style="font-size: 110%"` wrappers home.html used to
 * carry, which produced body copy larger than some of the headings above it.
 */
body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}

p {
    font-size: 17px;
    line-height: 1.62;
}

strong {
    font-weight: 700;
}

/* Headings. Sizes are explicit because Semantic sets them per element (h1.ui.header) and per
   variation (.ui.large.header) with values that no longer form a scale once the body grows. */
h1.ui.header {
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
h2.ui.header {
    font-size: 30px;
    line-height: 1.16;
    letter-spacing: -0.015em;
}
h3.ui.header {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
h1.ui.header,
h2.ui.header,
h3.ui.header,
h4.ui.header {
    text-wrap: balance;
}
.ui.header {
    color: var(--ink);
}

/* An eyebrow: the leaflet's small turquoise line above a title. It names the register of
   the section that follows -- "A shift in philosophy", "In practice" -- where a second
   heading level would only compete with the title under it. */
.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin-bottom: 0.5em;
}

/* --------------------------------------------------------------------------------------
 * Masthead
 * --------------------------------------------------------------------------------------
 * The darkest tone of the palette, so the fixed bar reads as chrome rather than as content.
 * Semantic tints the active item with rgba(0,0,0,.1), invisible on an already dark navy, so
 * it is lightened instead of darkened.
 */
.ui.ui.inverted.blue.menu {
    background-color: var(--ink);
}
.ui.ui.inverted.blue.menu .active.item {
    background-color: rgba(255, 255, 255, 0.14);
}
.ui.ui.inverted.blue.menu .item:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------------------
 * Calls to action
 * -------------------------------------------------------------------------------------- */
.ui.blue.button,
.ui.blue.buttons .button {
    background-color: var(--brand);
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover,
.ui.blue.button:focus,
.ui.blue.buttons .button:focus {
    background-color: var(--brand-hover);
}
.ui.blue.button:active,
.ui.blue.buttons .button:active {
    background-color: var(--brand-active);
}

/* --------------------------------------------------------------------------------------
 * Headings, lists, figures
 * -------------------------------------------------------------------------------------- */
.ui.blue.header {
    color: var(--brand);
}
a.ui.blue.header:hover {
    color: var(--brand-hover);
}
.ui.blue.dividing.header {
    border-bottom: 2px solid var(--accent);
}

/* The icon a section heading opens with: the one place the turquoise appears at full
   strength, against the navy of the words next to it. */
.ui.blue.header > i.icon {
    color: var(--accent-ink);
}

/* Feature lists. The checkmark is the accent; the sentence under it is secondary text, and
   was rendering at the same weight and colour as the item it explains. */
.ui.relaxed.list > .item > i.check.icon,
.ui.list > .item > i.check.icon {
    color: var(--accent-ink);
}
.ui.list .item .header {
    color: var(--ink);
}
.ui.list .item .description {
    color: var(--muted);
}

/* Icons carrying the brand class. Semantic writes i.blue.icon.icon.icon.icon.icon.icon to
   win over every component that colours an icon, so an override has to match that weight --
   hence the repetition. The checkmarks of services_included.html are turquoise like the ones
   in the feature lists above: same meaning, same colour. */
i.ui.blue.icon.icon.icon.icon.icon.icon {
    color: var(--brand);
}
i.ui.blue.check.icon.icon.icon.icon.icon.icon,
i.ui.blue.checkmark.icon.icon.icon.icon.icon.icon {
    color: var(--accent-ink);
}

.ui.blue.labels .label,
.ui.ui.ui.blue.label {
    background-color: var(--brand);
    border-color: var(--brand);
}
.ui.blue.labels a.label:hover,
a.ui.ui.ui.blue.label:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}
.ui.blue.card,
.ui.blue.cards > .card,
.ui.cards > .blue.card {
    box-shadow: 0 0 0 1px var(--rule), 0 2px 0 0 var(--brand), 0 1px 3px 0 var(--rule);
}
.ui.blue.segment:not(.inverted) {
    border-top: 2px solid var(--brand);
}
.ui.blue.statistic > .value,
.ui.blue.statistics .statistic > .value,
.ui.statistics .blue.statistic > .value {
    color: var(--brand);
}
.ui.statistics .statistic > .label {
    color: var(--muted);
}

/* --------------------------------------------------------------------------------------
 * Surfaces
 * --------------------------------------------------------------------------------------
 * Semantic draws every rule and border in a warm grey (#d4d4d5, #rgba(34,36,38,.15)). The
 * palette's --rule is the same value pulled towards the navy, so the page reads as one
 * family instead of two.
 */
.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.attached.header,
.ui.table,
.ui.celled.table tr td,
.ui.celled.table tr th {
    border-color: var(--rule);
}
.ui.table thead th {
    background: var(--tint);
    color: var(--ink);
    border-color: var(--rule);
}
.ui.divider:not(.vertical):not(.horizontal) {
    border-top-color: var(--rule);
    border-bottom-color: var(--paper);
}

/* The explanatory boxes that close each section. Semantic's info blue belongs to no palette
   here; the accent's own tint does. */
.ui.info.message {
    background-color: var(--accent-soft);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px rgba(0, 169, 157, 0.25), 0 0 0 0 transparent;
}
.ui.info.message .icon,
.ui.icon.info.message > .icon {
    color: var(--accent-ink);
}
.ui.info.message a {
    color: var(--brand);
}

/* Footer. The shared template renders a Semantic inverted segment, whose #1b1c1d is a warm
   near-black that belongs to no brand. */
.ui.inverted.vertical.footer.segment {
    background-color: var(--ink);
}
.footer.segment {
    padding: 5em 0em;
}

/* --------------------------------------------------------------------------------------
 * Layout
 * --------------------------------------------------------------------------------------
 * Semantic caps a text container at 700px, which is right for an article and wrong for the
 * account and ticket pages that use it here -- tables and filter forms live in them.
 */
.ui.text.container {
    max-width: 100% !important;
    width: 1400px !important;
}

/* --------------------------------------------------------------------------------------
 * The opening screen
 * --------------------------------------------------------------------------------------
 * Left: the promise, the daily grind it answers, and the two things a prospect wants next.
 * Right: the product itself, which this page did not show at all. Semantic's stackable grid
 * puts the screenshot under the text below 768px, where it belongs.
 */
/* The masthead is position:fixed, so it takes no space in the flow. base.html offsets the
   page with two hidden dividers -- 2em, where the bar measures 71px -- so the first line of
   every page slid under it. Visible only where the page opens on something with little
   padding of its own, which the hero does. */
.pusher {
    padding-top: 2.5em;
}

.language-switch {
    padding-bottom: 0;
}

.hero {
    padding: 2.5em 0 3.5em;
}
.hero .grid > .column {
    padding-top: 0;
}

.hero-logo {
    width: 72px;
    height: 72px;
    display: block;
    margin-bottom: 1.4em;
}

/* --accent-strong rather than --accent-ink: at 44px the darker tone reads as a second navy
   instead of as the brand's turquoise, and large text only has to clear 3:1. */
h1.ui.header.hero-title {
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -0.025em;
    max-width: 18ch;
    margin: 0.2em 0 0.6em;
}
.hero-title em {
    font-style: normal;
    color: var(--accent-strong);
}

.lead {
    font-size: 20px;
    line-height: 1.5;
    color: var(--muted);
    max-width: 54ch;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-top: 1.8em;
}
.brochure-link {
    color: var(--muted);
    font-size: 15px;
    white-space: nowrap;
}
.brochure-link:hover {
    color: var(--brand);
}

.hero-shot {
    margin: 0;
}
.hero-shot img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 10px;
}
.hero-shot figcaption {
    margin-top: 0.8em;
    max-width: 300px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
}

/* --------------------------------------------------------------------------------------
 * The band under it: what the product is, and what it costs
 * --------------------------------------------------------------------------------------
 * Full width, so it reads as a statement rather than as another paragraph. White on --brand
 * clears 13:1, and the turquoise of the figures clears 4.6:1 on the same ground.
 */
.brand-band {
    background: var(--brand);
    color: #ffffff;
    padding: 3em 0;
}
.brand-band .definition {
    font-size: 18px;
    line-height: 1.55;
    max-width: 78ch;
    margin-bottom: 2em;
}
.brand-band .definition strong {
    color: #ffffff;
}
/* display:block on the two spans rather than a flex column on the cell: Semantic's own
   .ui.stackable.grid > .column rules outweigh a .band-stats .column selector, and the value
   and its label ended up side by side. */
.band-stats .v,
.band-stats .l {
    display: block;
}
.band-stats .v {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3em;
}
.band-stats .l {
    font-size: 14.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------------------
 * The body: four arguments, twelve claims, one chip grid
 * --------------------------------------------------------------------------------------
 * What this replaced was five identical panels of decorative icons followed by fifty-two
 * bullets of equal weight -- 12 800px of page on a phone, and no picture of the product.
 * The rhythm here alternates a full-width band (tinted or navy) with a contained section,
 * so the visitor can tell one argument from the next by looking rather than by reading.
 */
.section {
    padding: 4.2em 0;
}
.ui.header.section-title {
    max-width: 26ch;
    margin-top: 0;
}

/* The four complaints. A rule in the accent rather than a bullet: these are not features,
   and a checkmark in front of a grievance would read as a promise. */
.pains {
    background: var(--tint);
    padding: 3.2em 0;
}
.pains-grid {
    margin-top: 0.6em;
}
.pains-grid p {
    margin: 0;
    padding-left: 1em;
    border-left: 3px solid var(--accent);
}

/* The volunteer-planning sequence. A real order -- nobody can be assigned before saying
   when they can -- so it is an <ol> and the numbers come from a counter rather than from
   markup that would let them drift out of step with the list. */
.steps-flow {
    counter-reset: step;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2em;
    margin: 2.6em 0 0;
    padding: 0;
}
.steps-flow > li {
    counter-increment: step;
}
.steps-flow > li::before {
    content: counter(step);
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 0.9em;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
}
.steps-flow h3.ui.header {
    font-size: 19px;
    margin: 0 0 0.4em;
}
.steps-flow p {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
}

/* Screenshots. The first pictures of the product this page has ever carried, so they get a
   caption that says what is being looked at rather than repeating the heading above. */
.shot {
    margin: 0;
}
.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 10px;
}
.shot figcaption {
    margin-top: 0.7em;
    font-size: 14px;
    line-height: 1.4;
    color: var(--muted);
}
.wide-shot {
    margin-top: 3em;
}

.pullquote {
    max-width: 34ch;
    margin: 2.4em 0 0;
    padding-left: 0.9em;
    border-left: 3px solid var(--accent);
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--brand);
}

.ui.header.outcomes-title {
    margin-top: 2.6em;
}
.outcomes p {
    margin: 0;
    padding-top: 0.8em;
    border-top: 2px solid var(--accent);
    font-size: 16px;
    color: var(--muted);
}
.outcomes strong {
    color: var(--ink);
}

.tint-band {
    background: var(--tint);
    padding: 3.4em 0;
}
.tint-band .ui.grid {
    align-items: center;
}

/* The proof blocks. The picture and the claim swap sides from one block to the next on a
   wide screen; the markup keeps the claim first everywhere, so a phone -- where the grid
   stacks in source order -- reads the sentence before the screenshot. */
.proof-block {
    align-items: center;
    margin-top: 3.4em;
}
@media only screen and (min-width: 768px) {
    .proof-block.mirrored .proof-text {
        order: 2;
    }
    .proof-block.mirrored .proof-figure {
        order: 1;
    }
}
.proof-block .ui.relaxed.list .item .content {
    font-size: 16.5px;
    line-height: 1.55;
}

/* Everything the four blocks have no room to prove. Chips rather than a fifth bulleted
   list: a visitor scans this for the one word that matters to their club. */
.ui.header.also-title {
    margin-top: 3em;
}
.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    list-style: none;
    margin: 1.2em 0 0;
    padding: 0;
}
.chip-grid > li {
    padding: 0.55em 1em;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--tint);
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------------------
 * Qualification, price, and the way out
 * --------------------------------------------------------------------------------------
 * The page used to end on a table of hosting services. It now ends on an action, with the
 * price -- read from the same LicensingPlan rows as the pricing page -- and a plain account
 * of who this product is not for, immediately before it.
 */

/* "Not yet, if" is not a warning: these are honest limits, not errors, so the marker is the
   secondary grey of the palette rather than a red one. */
.fit-no .ui.list > .item > i.icon {
    color: var(--muted);
}
.fit-grid .ui.list .item .content {
    font-size: 16.5px;
    line-height: 1.55;
}

.tint-band .ui.grid.pricing-grid {
    align-items: flex-start;
}
/* Semantic heads a table with the same near-white this band is painted in, so the header row
   disappeared into the ground. */
.tint-band .ui.table thead th {
    background: #e7ebf2;
}
.price-table td:not(:first-child),
.price-table th:not(:first-child) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.note {
    font-size: 14px;
    color: var(--muted);
}
.renewal {
    margin-top: 1.4em;
}

.support-text {
    max-width: 68ch;
}

/* The closing band reuses the navy of the figures band, so the two ends of the page match.
   The step numbers and the button invert: white on navy rather than navy on tint. */
.closing-band h2.ui.header,
.closing-band .steps-flow h3.ui.header {
    color: #ffffff;
}
/* A solid turquoise disc with a navy digit: 4.7:1. The other way round -- turquoise on a
   translucent white disc over the navy -- came out at 3.2:1, which is a graphic contrast,
   not a reading one. */
.closing-band .steps-flow > li::before {
    background: var(--accent);
    color: var(--brand);
}
.closing-band .steps-flow p {
    color: rgba(255, 255, 255, 0.82);
}
.closing-band .hero-actions {
    margin-top: 2.4em;
}
.closing-band .ui.button:not(.basic) {
    background: #ffffff;
    color: var(--brand);
}
.closing-band .ui.button:not(.basic):hover,
.closing-band .ui.button:not(.basic):focus {
    background: var(--accent-soft);
    color: var(--brand-active);
}

@media only screen and (max-width: 767.98px) {
    .pusher {
        padding-top: 2em;
    }
    .hero {
        padding: 1.5em 0 2em;
    }
    /* Full-width buttons: two calls to action of different widths, stacked, read as one
       important and one optional. They are not. */
    .hero-actions .ui.button {
        width: 100%;
        margin-right: 0;
    }
    .brand-band {
        padding: 2.2em 0;
    }
    .hero-shot img,
    .hero-shot figcaption {
        max-width: 260px;
    }
    .band-stats .v {
        font-size: 28px;
    }
    .section {
        padding: 2.6em 0;
    }
    .pains,
    .tint-band {
        padding: 2.2em 0;
    }
    .steps-flow {
        grid-template-columns: 1fr;
        gap: 1.7em;
        margin-top: 2em;
    }
    .wide-shot {
        margin-top: 2em;
    }
    .pullquote {
        font-size: 19px;
    }
    .proof-block {
        margin-top: 2.4em;
    }
    /* Two by two rather than four in a stack. Semantic's stackable grid puts every column
       at width:100%, which turns four short figures into most of a phone screen and breaks
       the one thing this block is for: reading them as one set. The selector repeats the
       whole of Semantic's own (.ui.stackable.grid > .column:not(.row)) because that rule is
       !important too: between two !important declarations, specificity decides. */
    .ui.stackable.grid.band-stats > .column:not(.row) {
        width: 50% !important;
    }
}