/* ==========================================================================
   UNION HIGH ALUMNI ASSOCIATION - profile custom CSS
   pasted into the custom CSS box by R. Marlow, class of 91

   I have set the colours to the PROPER school colours. The purple the site
   gives you is not a Union High colour and I am not having it.
   ========================================================================== */

:root {
  /* Navy and gold, taken off the letterhead. */
  --sk-bg: #0d1524;
  --sk-tile: url("../assets/2005/tile-uh.svg");

  --sk-text: #dfe4ef;
  --sk-dim: #9aa6c0;
  --sk-faint: #7d88a3;
  --sk-heading: #ffffff;
  --sk-name-sub: #b6c0d8;

  --sk-link: #e8c87a;
  --sk-link-visited: #c9a24b;

  --sk-border: #3d4f77;
  --sk-border-soft: #2b3a5c;
  --sk-pic-border: #c9a24b;

  --sk-box: rgb(20 32 58 / 0.78);
  --sk-box-deep: rgb(13 21 36 / 0.86);
  --sk-well: #080d18;

  --sk-head-1: #2b4272;
  --sk-head-2: #16233d;

  --sk-mast-1: #2f4878;
  --sk-mast-2: #1b2a4a;
  --sk-mast-3: #111c33;
  --sk-mast-4: #24365c;
  --sk-mast-gloss: #6d84b8;
  --sk-mast-border: #c9a24b;

  --sk-tab-1: #1b2a4a;
  --sk-tab-2: #111c33;
  --sk-tab-text: #d8c493;
  --sk-tab-sep: #2b3a5c;
  --sk-tab-hover: #24365c;
  --sk-tab-active: #c9a24b;

  --sk-btn-1: #2b4272;
  --sk-btn-2: #16233d;
  --sk-btn-text: #ecdcb4;
  --sk-btn-hover-1: #3a5691;
  --sk-btn-hover-2: #1e2f52;

  --sk-accent: #c9a24b;
  --sk-accent-1: #e2bd63;
  --sk-accent-2: #a8842f;
  --sk-accent-edge: #6f5619;
  --sk-accent-ink: #1a1405;

  --sk-eq-1: #e2bd63;
  --sk-eq-2: #8a6a1f;
  --sk-led: #d8c493;
}

/* The active tab is gold, so its white label vanishes. Fixed by making the
   label dark, which was easier than picking a different gold. */
.tabs .is-current a { color: #14203a; text-shadow: none; }

/* Rex found the serif on the school website and applied it to headings here.
   It is not the same serif. It is close enough for him. */
:root { --sk-display: Georgia, "Times New Roman", serif; }

.masthead__logo { letter-spacing: 0; }
.masthead__logo em { color: var(--sk-accent); font-style: italic; }

/* A gold rule under the masthead, because the letterhead has one. */
.masthead { border-bottom-width: 3px; }

/* The crest, at the size Rex insists is correct. */
.crest-block { text-align: center; padding: 4px 0 2px; }
.crest-block img {
  width: 150px;
  background: #ffffff;
  padding: 6px;
  border: 2px ridge var(--sk-accent);
}
.crest-block p {
  font-size: 9px;
  color: var(--sk-faint);
  margin: 5px 0 0;
  font-style: italic;
}

/* An "established" strip. Peak View do not have one of these. */
.est-strip {
  background: linear-gradient(180deg, #c9a24b, #8a6a1f);
  color: #14203a;
  font-family: var(--sk-display);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 3px;
  text-align: center;
  padding: 3px;
  border-radius: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* The motto, in Latin, in italics, centred. Non-negotiable. */
.motto-strip {
  border-top: 1px solid var(--sk-accent);
  border-bottom: 1px solid var(--sk-accent);
  padding: 8px 4px;
  margin: 8px 0;
  text-align: center;
}
.motto-strip .latin {
  display: block;
  font-family: var(--sk-display);
  font-style: italic;
  font-size: 15px;
  color: var(--sk-accent);
}
.motto-strip .en {
  display: block;
  font-size: 10px;
  color: var(--sk-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 3px;
}

/* The rivalry box. Rex added this. It has been reported four times. */
.rival-note {
  border: 1px solid #7a2222;
  border-left: 4px solid #a83232;
  background: rgb(45 12 12 / 0.6);
  border-radius: 3px;
  padding: 8px;
  font-size: 10px;
  color: #e8b8b8;
}
.rival-note b { color: #ff9c9c; }