/* ============================================================
   THE PARTY BACKGROUND
   ------------------------------------------------------------
   One file, linked last in the head of every screen, so the whole
   site sits on the same thing and there is one place to change it.

   The colours are the title card's own: the near-black it sits on,
   its magenta, its gold. Three lights, a scattering of sparks, and
   a handful of soft bokeh circles - the out-of-focus lights you
   get in the background of a photograph taken at a party.

   Nothing here is an image, so it costs no request and no upload
   beyond this file.

   The base colour is set with "html body" rather than "body" on
   purpose. Every page already declares its own body background in
   its own <style> block, and some of those blocks come after this
   file; two selectors beat one, so this wins wherever it is linked
   without a single !important.
============================================================ */

/* The base colour goes on the ROOT element, and the body is made
   see-through.

   This is not a stylistic choice, it is the whole reason the layer
   below is visible at all. An element's own background is painted
   AFTER any child with a negative z-index, so an opaque body
   background covers body::before completely - which is exactly what
   every page here did, each declaring its own solid colour. The only
   place the decoration showed was the strip below the body box on a
   short page.

   html carries the colour instead. It is painted across the whole
   canvas underneath everything, the body paints nothing, and the
   fixed layer sits between the two where it can be seen. */
html {
    background-color: #17020d;
}

html body {
    background-color: transparent;
}

/* ------------------------------------------------------------
   The decoration itself, on a fixed layer behind everything.

   Fixed, not scrolling: a gradient painted on the body is as tall
   as the PAGE, so the lights land differently on a long page than
   a short one and move as you scroll. Pinned to the viewport they
   sit in the same place on every screen - phone upright, phone on
   its side, tablet, desktop - and nothing repaints while scrolling.

   Sizes in vmax so the lights keep their proportion to the screen
   rather than swelling on a narrow one.
------------------------------------------------------------ */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* Bokeh: bigger, softer circles, three tiles at different
           sizes and offsets so no grid is visible. */
        radial-gradient(circle at 50% 50%, rgba(255, 122, 180, 0.22) 0 26px, transparent 27px) 40px  20px  / 420px 380px,
        radial-gradient(circle at 50% 50%, rgba(255, 205, 120, 0.18) 0 18px, transparent 19px) 240px 190px / 330px 310px,
        radial-gradient(circle at 50% 50%, rgba(255, 122, 180, 0.16) 0 34px, transparent 35px) 150px 300px / 560px 500px,

        /* Sparks, like the ones around the "50". */
        radial-gradient(circle, rgba(255, 214, 150, 0.75) 0 1.4px, transparent 2.1px) 0    0    / 150px 150px,
        radial-gradient(circle, rgba(255, 190, 220, 0.55) 0 1.4px, transparent 2.1px) 65px 90px / 200px 200px,
        radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1.1px, transparent 1.7px) 120px 40px / 260px 280px,

        /* Four lights: magenta at the top left, gold opposite it, a
           second gold low on the left, and magenta rising from below
           the fold. Strong enough to be seen on a tall page, where the
           middle is a long way from any of the corners. */
        radial-gradient(70vmax 70vmax at 10%   4%, rgba(232,  30, 132, 0.52), transparent 66%),
        radial-gradient(62vmax 62vmax at 92%  16%, rgba(240, 178,  70, 0.34), transparent 64%),
        radial-gradient(58vmax 58vmax at  4%  74%, rgba(214, 150,  60, 0.22), transparent 64%),
        radial-gradient(85vmax 85vmax at 55% 106%, rgba(206,  24, 112, 0.46), transparent 70%),

        linear-gradient(160deg, #2a0518 0%, #17020d 45%, #2e0718 100%);
}

/* ------------------------------------------------------------
   Reports are printed. Ink is expensive and a black page is
   unreadable on paper, so none of this goes near the printer.
------------------------------------------------------------ */
@media print {
    html, html body { background-color: #ffffff; }
    body::before { display: none; }
}


/* ============================================================
   THE TITLE CARD
   ------------------------------------------------------------
   One picture, Logo.png, on screen the instant the page opens,
   with a glint of light round its edge three seconds later. The
   timing is in Fifty-And-Fabulous-title-slides.js; how the flash
   looks is further down this file.

   It was two pictures until 2026-08-30, the second fading up over
   the first, which is why the script is still named for a slide
   show. Everything that positioned that overlay has gone.
============================================================ */
#cr-title-slides {
    position: relative;

    /* Half the width it used to fill, and centred in what is left.
       The pictures inside are w-full, so they follow this box rather
       than the section around it - which means one number here sizes
       the title card at every screen width instead of a different
       rule per breakpoint. */
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

/* Half that again on the gallery, where the pictures are the point and
   the title card is only a header. Set with a class on the wrapper
   rather than by page, so the two sizes live side by side here and
   neither has to know about the other. */
#cr-title-slides.cr-title-small {
    width: 25%;
}

/* A PHONE, WHERE ALMOST EVERYONE WILL SEE THIS
   ------------------------------------------------------------
   A percentage of a laptop is a comfortable size; the same
   percentage of a phone held in one hand is a stamp. So a phone
   gets its own two sizes, and which one depends on how it is being
   held.

   Both selectors are answered in each case, so it does not matter
   which size the page asked for: on a phone there is one sensible
   answer and this is it. */

/* HELD UPRIGHT. Width is the scarce thing and height is not, so the
   card takes nearly all of it.

   101%, not 92%, because ten per cent more than 92 is more than the
   box it sits in. The section around it carries a rem of padding each
   side, and the half a per cent of negative margin lets the card use a
   sliver of that rather than pushing the page sideways. The result is
   the ten per cent, and nothing overflows. */
@media (max-width: 767px) and (orientation: portrait) {
    #cr-title-slides,
    #cr-title-slides.cr-title-small {
        width: 101%;
        margin-left: -0.5%;
        margin-right: -0.5%;
    }
}

/* A TABLET, HELD UPRIGHT. Wider than a phone, so the card does not
   need to take nearly the whole screen - but the laptop size is lost
   on it. Grown by steps from the laptop size, and now nearly the whole
   width: 25% to 37.5% to 56.25% to 61.9% to 92.85%.

   min-width keeps phones out of it, and portrait keeps every laptop
   and desktop out, since those are landscape. A phone on its side is
   caught by the rule below, which is more specific about height. */
@media (min-width: 768px) and (orientation: portrait) {
    #cr-title-slides.cr-title-small {
        width: 92.85%;
    }
}

/* TURNED ON ITS SIDE. Now the opposite is true: plenty of width and
   almost no height. A card at the portrait size would be taller than
   the screen and push the photographs off the bottom, so it is half
   that.

   Matched on HEIGHT rather than width. A phone on its side is as
   wide as a small tablet - an iPhone Pro Max is over 900px - so a
   max-width test either misses it or catches tablets with it. Short
   is what actually distinguishes it. */
@media (orientation: landscape) and (max-height: 500px) {
    #cr-title-slides,
    #cr-title-slides.cr-title-small {
        width: 36.8%;
    }
}

/* A TABLET ON ITS SIDE. Half again on the laptop size and then a fifth
   more: 25% to 37.5% to 45%. Smaller than the same tablet held upright,
   which is right - on its side there is less height to spare.

   The hard part is telling a tablet on its side from a laptop, since
   both are wide, tall and landscape. pointer: coarse is what separates
   them - a finger rather than a mouse. min-height keeps the phones out,
   because they are caught by the rule above and want the smaller size. */
@media (orientation: landscape) and (min-height: 501px) and (pointer: coarse) {
    #cr-title-slides.cr-title-small {
        width: 45%;
    }
}

/* ============================================================
   THE CARD BEHIND THE CONTENT - HIDDEN, NOT DELETED
   ------------------------------------------------------------
   Every screen used to sit on a navy card with a pale outline and
   a drop shadow. Against the party background that reads as a
   window cut out of the old site, so the fill, the outline and the
   shadow are switched off and the content sits straight on the
   background.

   Nothing is removed from any page. Each page still declares its
   own card exactly as it did; this file is linked LAST in every
   head, so these three lines come after and win. Delete this whole
   block and every card comes back, everywhere, untouched.

   Two selectors because the site builds its card two ways:
     .panel            the sign-in and the admin screens
     .bg-[#2a0715]     the participant screens, a Tailwind class
                       (escaped here - the brackets and the hash
                       are not ordinary characters in a selector)

   Screen only. Reports are printed on a white page that sets its
   own panel back to white, and that must not be overridden.
============================================================ */
@media screen {
    .panel,
    .bg-\[\#2a0715\],

    /* The photo upload page wraps everything in .wrap and paints it -
       the same card by another name. */
    .wrap {
        background: transparent;
        border: 0;
        box-shadow: none;
    }
}


/* ============================================================
   THE HEADINGS
   ------------------------------------------------------------
   The participant screens colour their headings with Tailwind's
   text-yellow-100 and text-yellow-200 - a pale lemon that belonged
   to an older navy and gold. Against the party colours it
   reads as washed out.

   Retuned to the gold of the title card's ring and lettering, which
   is warmer and sits properly beside the pink.

   Done here rather than by changing the class on thirty-odd tags:
   this file is linked last in every head, so a plain class selector
   is enough to win, and one line changes every heading on the site.
   Delete this block and the lemon comes back.
============================================================ */
.text-yellow-100 { color: #f6cd7a; }
.text-yellow-200 { color: #f0bc55; }


/* ============================================================
   THE TAILWIND BLUES
   ------------------------------------------------------------
   The pages still name a dozen of Tailwind's blue and sky shades
   as classes rather than as colours - text-blue-100 on paragraphs,
   text-blue-900 on the gold buttons, border-sky-400 on the rules
   between sections. They are the last of an older navy
   and they cannot be reached by changing a hex value, because there
   is no hex value in the page to change.

   Each is answered here with its place in the new scheme: the pale
   blues become the same soft pink as everything else secondary, the
   dark blues become the wine that replaced the navy, and the edges
   become a faint pink line.

   This file is linked last in every head, so a plain class selector
   is enough to win. Delete this block and the blues come back.
============================================================ */
.text-blue-100,
.text-blue-200,
.text-indigo-100  { color: #f2a8cd; }

.text-blue-900,
.text-blue-950    { color: #2a0715; }

.bg-blue-800      { background-color: #5a1038; }
.bg-blue-900,
.bg-sky-900       { background-color: #2a0715; }

.border-sky-200   { border-color: #ffc9e4; }
.border-sky-400,
.border-indigo-300,
.border-indigo-400 { border-color: rgba(242, 168, 205, .45); }


/* ============================================================
   THE SPARKLE, ONCE LOGO2 HAS ARRIVED
   ------------------------------------------------------------
   A single flare of gold and pink light around the edge of the
   second title card, a moment after it has finished fading up.

   drop-shadow and not box-shadow: box-shadow would draw a
   rectangle round the image, and the picture is a circle on a
   transparent square. drop-shadow follows what is actually
   painted, so the light hugs the ring.

   Two shadows stacked - a tight warm one and a wide pink one -
   so it reads as a glint rather than a halo.
============================================================ */
@keyframes cr-title-sparkle {
    0% {
        filter: drop-shadow(0 0 0    rgba(255, 225, 170, 0))
                drop-shadow(0 0 0    rgba(255, 120, 190, 0));
    }
    30% {
        filter: drop-shadow(0 0 14px rgba(255, 235, 190, 0.95))
                drop-shadow(0 0 38px rgba(255, 110, 185, 0.80));
    }
    55% {
        filter: drop-shadow(0 0 8px  rgba(255, 235, 190, 0.55))
                drop-shadow(0 0 22px rgba(255, 110, 185, 0.45));
    }
    100% {
        filter: drop-shadow(0 0 0    rgba(255, 225, 170, 0))
                drop-shadow(0 0 0    rgba(255, 120, 190, 0));
    }
}

/* Not tied to the title card any more: the slide show puts the logo up
   before the QR code and wants the same glint on it, so anything given
   this class gets the flash. */
.cr-sparkle {
    animation: cr-title-sparkle 1100ms ease-out 1;
}

/* Somebody who has asked for less movement gets the picture and
   not the flash. */
@media (prefers-reduced-motion: reduce) {
    .cr-sparkle { animation: none; }
}