/* DRAFT — colour pass for the Hardstyle and Uptempo program pages.
   Borrows what the homepage already does: a gradient rule under each eyebrow, panels that carry a
   faint tint of the page's accent instead of flat grey, coloured yes/no cards, and a wash behind a
   few sections so the page stops reading as one long black column.
   Hardstyle keeps its cyan, Uptempo takes the red the homepage already uses for that card. */

main.temp-program{--c1:#20d5e5;--c1rgb:32,213,229;--c2:#ff2a83;--c2rgb:255,42,131}
main.temp-program[data-program="uptempo"]{--c1:#ed2941;--c1rgb:237,41,65;--c2:#ff69a6;--c2rgb:255,105,166}

/* ---------------------------------------------------------------- eyebrow + gradient rule */
.temp-program .tp-section .tp-eyebrow,
.temp-program .tp-section-head .tp-eyebrow{position:relative;padding-bottom:14px}
.temp-program .tp-section .tp-eyebrow::after,
.temp-program .tp-section-head .tp-eyebrow::after{
  content:"";position:absolute;left:0;bottom:0;width:58px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--c1),var(--c2))}
/* centred heads get a centred rule */
.temp-program .tp-section-head[style*="center"] .tp-eyebrow::after,
.temp-program .tp-section.tp-final .tp-eyebrow::after{left:50%;transform:translateX(-50%)}

/* ---------------------------------------------------------------- a wash behind alternating sections */
.temp-program #pain,.temp-program #outcomes,.temp-program #fit,.temp-program #faq{
  background-image:radial-gradient(58% 52% at 6% 0,rgba(var(--c1rgb),.075),transparent 68%)}
.temp-program #method,.temp-program #curriculum,.temp-program #proof{
  background-image:radial-gradient(58% 52% at 94% 0,rgba(var(--c2rgb),.065),transparent 68%)}
.temp-program .tp-final{
  background-image:radial-gradient(70% 90% at 50% 100%,rgba(var(--c1rgb),.10),transparent 70%)}

/* ---------------------------------------------------------------- panels stop being flat grey */
.temp-program :is(.hs-pain-grid,.ut-pain-grid)>*,
.temp-program :is(.hs-card-grid,.ut-card-grid)>*,
.temp-program :is(.hs-faq-grid,.ut-faq-grid)>article,
.temp-program :is(.hs-steps,.ut-steps)>li{
  position:relative;border:1px solid rgba(var(--c1rgb),.2);border-radius:18px;
  background:radial-gradient(ellipse at 0 0,rgba(var(--c1rgb),.075),transparent 62%),linear-gradient(150deg,#131822,#0b0e14);
  transition:transform .25s ease,border-color .25s ease,box-shadow .3s ease}
/* the step items already use ::before for their number, so only the others get a top edge */
.temp-program :is(.hs-pain-grid,.ut-pain-grid)>*::after,
.temp-program :is(.hs-card-grid,.ut-card-grid)>*::after{
  content:"";position:absolute;top:-1px;left:26px;width:58px;height:2px;border-radius:4px;
  background:var(--c1);box-shadow:0 0 12px rgba(var(--c1rgb),.85),0 0 26px rgba(var(--c1rgb),.4)}
@media (hover:hover){
  .temp-program :is(.hs-pain-grid,.ut-pain-grid)>*:hover,
  .temp-program :is(.hs-card-grid,.ut-card-grid)>*:hover,
  .temp-program :is(.hs-faq-grid,.ut-faq-grid)>article:hover,
  .temp-program :is(.hs-steps,.ut-steps)>li:hover{
    transform:translateY(-4px);border-color:rgba(var(--c1rgb),.5);
    box-shadow:0 20px 42px #0006,0 0 30px rgba(var(--c1rgb),.10)}}

/* the numbered circles pick up a glow, like the ones Codex just shipped higher up the page */
.temp-program :is(.hs-steps,.ut-steps)>li::before{
  border-color:rgba(var(--c1rgb),.5)!important;background:rgba(var(--c1rgb),.07)!important;
  box-shadow:0 0 18px rgba(var(--c1rgb),.22)}

/* ---------------------------------------------------------------- yes / no cards read as yes and no */
.temp-program .nz-fit-card.is-yes{
  border-color:rgba(var(--c1rgb),.4);
  background:radial-gradient(ellipse at 0 0,rgba(var(--c1rgb),.10),transparent 62%),#0c1017}
.temp-program .nz-fit-card.is-no{
  border-color:rgba(var(--c2rgb),.34);
  background:radial-gradient(ellipse at 0 0,rgba(var(--c2rgb),.09),transparent 62%),#0c1017}

/* ---------------------------------------------------------------- small accents in the copy */
.temp-program :is(.hs-statement,.ut-statement){
  border-left:3px solid var(--c1);padding-left:20px;
  box-shadow:-14px 0 28px -20px rgba(var(--c1rgb),.9)}
.temp-program .tp-facts strong{color:var(--c1)}
.temp-program :is(.hs-final-punch,.ut-final-punch){color:var(--c2)}
.temp-program .tp-intro strong,.temp-program .tp-lede strong{color:var(--c1)}

/* ---------------------------------------------------------------- keep it quiet for anyone who asked */
@media (prefers-reduced-motion:reduce){
  .temp-program :is(.hs-pain-grid,.ut-pain-grid)>*,
  .temp-program :is(.hs-card-grid,.ut-card-grid)>*,
  .temp-program :is(.hs-faq-grid,.ut-faq-grid)>article,
  .temp-program :is(.hs-steps,.ut-steps)>li{transition:none}}