/* Neon tube frames + steel rivets (ClNeonFrame / ClRivet in the Flutter
   kit) - the feature pages' closing CTA pill, the download sign and the
   error page's status sign. Candidate for cl.css once the other pages
   (landing hero sign) settle on the same markup. */

.cl-neonframe{position:relative;border-radius:var(--nf-radius,30px);border:3px solid #F2FFFE;
  box-shadow:0 0 6px #00F5D4,0 0 18px #00BFD4,0 0 42px rgba(0,191,212,.55),inset 0 0 6px #00F5D4,inset 0 0 22px rgba(0,191,212,.5)}
.cl-neonframe--magenta{border-color:#FFF0FF;
  box-shadow:0 0 6px #FF00FF,0 0 18px #FF00FF,0 0 44px rgba(204,0,204,.6),inset 0 0 6px #FF00FF,inset 0 0 24px rgba(204,0,204,.5)}

/* Four screw heads, --rivet-inset inside the tube (10px on the download
   sign, 14px on the error sign). */
.cl-rivet{position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#d9dbe3,#5d6170);box-shadow:0 1px 2px rgba(0,0,0,.8)}
.cl-rivet--tl{top:var(--rivet-inset,10px);left:var(--rivet-inset,10px)}
.cl-rivet--tr{top:var(--rivet-inset,10px);right:var(--rivet-inset,10px)}
.cl-rivet--bl{bottom:var(--rivet-inset,10px);left:var(--rivet-inset,10px)}
.cl-rivet--br{bottom:var(--rivet-inset,10px);right:var(--rivet-inset,10px)}

/* The brick wall (ClBrickBackdrop): 1100px tiles under an ink wash. Pages
   put their own colour haze on top via --brick-haze. */
.cl-brick{background:
  var(--brick-haze,linear-gradient(transparent,transparent)),
  linear-gradient(180deg,#14121F 0%,rgba(20,18,31,var(--brick-edge,.86)) 20%,rgba(20,18,31,var(--brick-mid,.8)) 50%,rgba(20,18,31,var(--brick-edge,.86)) 80%,#14121F 100%),
  url('/_site/img/brick-wall.jpg') center/1100px auto repeat,
  #14121F}