/* ==========================================================================
   FILE        assets/aes-btn-colours.css
   UPLOAD TO   public_html/assets/aes-btn-colours.css
   LOAD        on every page with the site header, after aes-fx.css
   WHAT IT IS  The buttons in Cut Society's colours (Jace, 31 October: "use
               the same colour scheme as has been chosen for Cut Society
               online"): EdgelitCV's, its orange turned gold. Each button's
               mouseover keeps its effect (aes-fx.css) and lights in the
               colour of what the button does:
                 c-blue   what AES does: engineering, the disciplines, BIM,
                          services, delivery
                 c-gold   the offer: the fee estimator, the store, a licence
                 c-green  getting in touch and getting in: contact, call,
                          email, send, sign in, register, the account
                 c-cool   the details: everything else
               aes-ui.js gives each button its colour from where it leads and
               what it says, as cutsociety's build_site.py does
               (button_colour()), so a new button is coloured without being
               tagged by hand.
               The main button (.btn.primary: Contact AES, Send message) is
               EdgelitCV's white hero button at rest, in place of AES red.
   MASTER      JJMcCaffrey/cutsociety, assets/ab-btn-colours.css at d99dcc2
               (AB02, branch ajb-button-meaning, Jace's choice of 31 October:
               "by what the button does"), copied byte for byte below, less
               its last rule, which sets the atom's geometry button in the
               other buttons' type: a change of type, not of colour, and not
               asked for AES. Then the white main button, from the same
               commit's assets/ab-edgelit.css (AB03), where it hangs on
               cutsociety's theme switch, which AES does not have.
   VERSION     REV84  (2026-10-31)
   CHANGES     REV84: new.
   ========================================================================== */

/* ---- the master, cutsociety assets/ab-btn-colours.css at d99dcc2 ---- */
/* ---------- EdgelitCV's colours (edgelit-backlit.css: --glow and --lit) ---------- */
.btn.c-blue  {--hc:91,108,255; --hlit:#B9C2FF; --hink:#FFFFFF}
.btn.c-gold  {--hc:255,196,64; --hlit:#FFE29A; --hink:#1C1300}
.btn.c-green {--hc:47,210,126; --hlit:#9CF0C3; --hink:#04140C}
.btn.c-cool  {--hc:169,210,255;--hlit:#DCEBFF; --hink:#06122B}

/* ---------- the effects' palette, from the colour ---------- */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool){
  --ck-core:rgb(var(--hc));
  --ck-ring:color-mix(in srgb,rgb(var(--hc)) 55%,#FFFFFF);
  --ck-mid:color-mix(in srgb,rgb(var(--hc)) 45%,#0A1430);
  --ck-deep:color-mix(in srgb,rgb(var(--hc)) 28%,#040A1A);
}
/* The fades as EdgelitCV's buttons finish theirs (edgelit.css .btn: transition box-shadow .2s ease, transform .2s ease;
   Jace, 31 October: "keep the fades finish like" edgelitcv.com): the glow fades in and out in a fifth of a second,
   eased, and the edge, the face and the words keep the same pace, so all of it arrives and leaves together (aes.css
   faded only the edge and the face, and the glow came and went at once). The bloom keeps its own 1.2 s light. */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool){
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease}
@media (prefers-reduced-motion:reduce){.btn:is(.c-blue,.c-gold,.c-green,.c-cool){transition:none}}
/* EdgelitCV's lit edge on every mouseover: the border and a soft glow in the colour. */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool):is(:hover,:focus-visible,.is-hover){
  border-color:rgba(var(--hc),.9);box-shadow:0 0 0 1px rgba(var(--hc),.25),0 0 20px rgba(var(--hc),.45)}

/* the arrow (fx-icon): EdgelitCV's card button, its face washed in the colour */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-icon:is(:hover,:focus-visible,.is-hover){background:rgba(var(--hc),.18);color:#FFFFFF}
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-icon:is(:hover,.is-hover) .fx-arr{color:var(--hlit);text-shadow:0 0 10px rgba(var(--hc),.9)}

/* sweep: the fill runs the colour's ramp; the words turn dark where the colour is light */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-sweep:is(:hover,.is-hover){color:var(--hink);box-shadow:0 0 22px rgba(var(--hc),.55)}

/* trace: the light runs the border in the colour */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-trace:is(:hover,.is-hover){box-shadow:0 0 24px rgba(var(--hc),.45)}

/* shine and float */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-shine:is(:hover,.is-hover){box-shadow:0 0 22px rgba(var(--hc),.45)}
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-float::after{background:radial-gradient(ellipse at center,rgba(var(--hc),.65) 0%,transparent 75%)}

/* scan: the lit band in the colour */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-scan::before{
  background:linear-gradient(0deg,transparent 0%,rgba(var(--hc),0) 30%,rgba(var(--hc),.75) 48%,rgba(242,247,255,.9) 50%,rgba(var(--hc),.5) 54%,transparent 75%);
  background-size:100% 300%;background-position:0 0}

/* bloom: dark, a white flash, settles in the colour (in place of Cherenkov blue) */
.btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-bloom:is(:hover,:focus-visible,.is-hover){animation:ab-bloom-c 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ab-bloom-c{
  0%  {background:var(--ck-deep);border-color:var(--ck-mid);box-shadow:0 0 0 rgba(0,0,0,0)}
  35% {background:color-mix(in srgb,rgb(var(--hc)) 22%,#FFFFFF);border-color:#FFFFFF;color:#04112A;
       box-shadow:0 0 0 2px rgba(242,247,255,.6),0 0 46px rgba(var(--hc),.85)}
  100%{background:rgb(var(--hc));border-color:var(--ck-ring);color:var(--hink);
       box-shadow:0 0 0 1px rgba(var(--hc),.6),0 0 34px rgba(var(--hc),.75),inset 0 0 16px rgba(242,247,255,.25)}}

/* The home page's top row is coloured at rest by stronger rules (ab-edgelit.css: html[data-theme] .hero .cta-row .btn and
   :nth-child), which would hold its rest edge and words under the pointer. These outrank them (html body adds the
   weight), for the mouseover only. */
html body .hero .cta-row .btn:is(.c-blue,.c-gold,.c-green,.c-cool):is(:hover,:focus-visible,.is-hover){
  border-color:rgba(var(--hc),.9);box-shadow:0 0 0 1px rgba(var(--hc),.25),0 0 20px rgba(var(--hc),.45);color:#FFFFFF}
html body .hero .cta-row .btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-sweep:is(:hover,.is-hover){color:var(--hink);box-shadow:0 0 22px rgba(var(--hc),.55)}
html body .hero .cta-row .btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-trace:is(:hover,.is-hover){box-shadow:0 0 24px rgba(var(--hc),.45)}
html body .hero .cta-row .btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-shine:is(:hover,.is-hover){box-shadow:0 0 22px rgba(var(--hc),.45)}

@media (prefers-reduced-motion:reduce){
  .btn:is(.c-blue,.c-gold,.c-green,.c-cool).fx-bloom:is(:hover,:focus-visible,.is-hover){animation:none;background:rgb(var(--hc));color:var(--hink)}
}

/* ---- the main button, white: cutsociety assets/ab-edgelit.css at d99dcc2 (AB03) ----
   Jace, 31 October: "the main button to be like the white" on edgelitcv.com. EdgelitCV's white hero button, Try it for
   free (edgelit-hero.css, .btn.b-white): a white edge, a soft white glow and a faint white wash from its top left
   corner, white words. Its mouseover is by what it does (above). cutsociety writes it under html[data-theme="edgelit"];
   :root body carries the same weight here, so it outranks aes.css's red .btn.primary, as it does there. */
:root body .btn.primary{--bc:220,232,255;color:#FFFFFF;border:1px solid rgba(var(--bc),.8);
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--bc),.22),transparent 70%),rgba(var(--bc),.06);
  box-shadow:0 0 0 1px rgba(var(--bc),.2),0 0 18px rgba(var(--bc),.35),inset 0 1px 0 rgba(255,255,255,.06)}