/* ==========================================================================
   PEAK VIEW ALUMNI ASSOCIATION - profile custom CSS
   maintained by the PV Alumni Sub-Committee

   v6 - Nina: took the brick background off, took the pink down, made the text
        actually readable. this is a REBRAND. please leave it alone.
   v7 - Vic: put SOME of the pink back. we are not a bank.
   ========================================================================== */

:root {
  /* Maroon and forest, off the actual brand guide, which we do have. */
  --sk-bg: #2a0813;
  --sk-tile: url("../assets/2005/tile-pv.svg");

  --sk-text: #f3e2e7;
  --sk-dim: #c9a3b0;
  --sk-faint: #a8828f;
  --sk-heading: #ffffff;
  --sk-name-sub: #e7c3cf;

  --sk-link: #8fd9c0;
  --sk-link-visited: #ff9ec4;

  --sk-border: #7d3b52;
  --sk-border-soft: #58283a;
  --sk-pic-border: #3f6e5e;

  --sk-box: rgb(64 14 30 / 0.76);
  --sk-box-deep: rgb(42 8 19 / 0.86);
  --sk-well: #1c0510;

  --sk-head-1: #9b3453;
  --sk-head-2: #571026;

  --sk-mast-1: #a03a5b;
  --sk-mast-2: #7b1e3b;
  --sk-mast-3: #571026;
  --sk-mast-4: #8a2745;
  --sk-mast-gloss: #d98aa6;
  --sk-mast-border: #3f6e5e;

  --sk-tab-1: #571026;
  --sk-tab-2: #3b0d1e;
  --sk-tab-text: #f0c6d4;
  --sk-tab-sep: #7d3b52;
  --sk-tab-hover: #7b1e3b;
  --sk-tab-active: #3f6e5e;

  --sk-btn-1: #3f6e5e;
  --sk-btn-2: #2a4d41;
  --sk-btn-text: #eafaf3;
  --sk-btn-hover-1: #52907b;
  --sk-btn-hover-2: #356354;

  --sk-accent: #ff9ec4;
  --sk-accent-1: #ffb3d1;
  --sk-accent-2: #e0568f;
  --sk-accent-edge: #a52b60;
  --sk-accent-ink: #3b0619;

  --sk-eq-1: #8fd9c0;
  --sk-eq-2: #2a4d41;
  --sk-led: #8fd9c0;

  /* Vic wanted Comic Sans. This was the compromise. */
  --sk-display: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
}

/* Peak View round everything, because the school website does. It does not
   look the same, because the school website is not a purple social network. */
.box, .masthead, .tabs, .old-site, .enter-btn, .contact-btn { border-radius: 10px; }
.masthead { border-radius: 10px 10px 0 0; }
.tabs { border-radius: 0 0 10px 10px; }
.box__head { border-radius: 9px 9px 0 0; }
.contact-btn { border-radius: 999px; }
.enter-btn { border-radius: 999px; padding: 7px 18px; }

.masthead__logo { letter-spacing: -1px; font-weight: bold; }
.masthead__logo em { color: #8fd9c0; }

/* The crest, at the size the brand guide specifies, which Nina printed out. */
.crest-block { text-align: center; padding: 6px 0 2px; }
.crest-block img {
  width: 132px;
  background: #ffffff;
  padding: 8px;
  border: 1px solid var(--sk-pic-border);
  border-radius: 999px;
}
.crest-block p { font-size: 9px; color: var(--sk-faint); margin: 6px 0 0; }

/* A pill strip instead of Union High's gold bar. Deliberately not a gold bar. */
.est-strip {
  display: inline-block;
  background: linear-gradient(180deg, #3f6e5e, #2a4d41);
  color: #eafaf3;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 3px 14px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.motto-strip {
  background: rgb(63 110 94 / 0.22);
  border: 1px solid var(--sk-pic-border);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
  text-align: center;
}
.motto-strip .latin {
  display: block;
  font-family: var(--sk-display);
  font-size: 14px;
  color: #8fd9c0;
}
.motto-strip .en {
  display: block;
  font-size: 11px;
  color: var(--sk-text);
  margin-top: 4px;
  font-weight: bold;
}

/* The thing Nina did not manage to remove in the rebrand. */
.glitter-holdover {
  text-align: center;
  padding: 6px 0 0;
}

.rival-note {
  border: 1px solid #3f6e5e;
  border-left: 4px solid #8fd9c0;
  background: rgb(26 46 39 / 0.6);
  border-radius: 10px;
  padding: 8px;
  font-size: 10px;
  color: #cfe9e0;
}
.rival-note b { color: #8fd9c0; }

/* Vic's one surviving contribution to v7. */
.sparkle-title {
  background-image: linear-gradient(90deg, #ff9ec4, #ffd6e6, #8fd9c0, #ff9ec4);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pv-sparkle 5s linear infinite;
}
@keyframes pv-sparkle { to { background-position: 300% 0; } }