gtbop-archive-site/site/stylesheets/uga-brand.css

/* ================================================================
   UGA Brand Stylesheet — GTBOP Documentation Site
   Reference: brand.uga.edu/visual-identity/visual-style/

   Primary:  Bulldog Red #BA0C2F | Arch Black #000000 | Chapel Bell White #FFFFFF
   Neutral:  Stegeman #9EA2A2 | Creamery #D6D2C4 | Sanford #554F47
   Accent:   Lake Herrick #00A3AD | Olympic #004E60 | Odyssey #C8D8EB
             Hedges #B4BD00 | Glory Glory #E4002B

   Typography: Oswald (headings) | Merriweather Sans (body) | Georgia (fallback)
   Rule: Never place red text on black or black text on red.
   ================================================================ */

/* ── Google Fonts: Oswald for headings ──────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&display=swap');

/* ================================================================
   LIGHT MODE
   ================================================================ */
[data-md-color-scheme="default"] {
  /* Primary — Bulldog Red */
  --md-primary-fg-color:            #BA0C2F;
  --md-primary-fg-color--light:     #cf3d5e;
  --md-primary-fg-color--dark:      #8a0923;
  --md-primary-bg-color:            #FFFFFF;
  --md-primary-bg-color--light:     #FFFFFF;

  /* Accent — Olympic (darker teal, passes WCAG AA on white) */
  --md-accent-fg-color:             #004E60;
  --md-accent-fg-color--transparent: rgba(0, 78, 96, 0.1);
  --md-accent-bg-color:             #FFFFFF;

  /* Default backgrounds */
  --md-default-fg-color:            #000000;
  --md-default-fg-color--light:     #554F47;
  --md-default-fg-color--lighter:   #9EA2A2;
  --md-default-fg-color--lightest:  rgba(0, 0, 0, 0.07);
  --md-default-bg-color:            #FFFFFF;
  --md-default-bg-color--light:     #F9F8F6;
  --md-default-bg-color--lighter:   #F4F2EF;
  --md-default-bg-color--lightest:  #D6D2C4;

  /* Links */
  --md-typeset-a-color:             #004E60;

  /* Code blocks */
  --md-code-bg-color:               #F4F2EF;
  --md-code-fg-color:               #000000;

  /* Footer */
  --md-footer-bg-color:             #000000;
  --md-footer-bg-color--dark:       #000000;
  --md-footer-fg-color:             #FFFFFF;
  --md-footer-fg-color--light:      #D6D2C4;
  --md-footer-fg-color--lighter:    #9EA2A2;
}

/* ================================================================
   DARK MODE
   ================================================================ */
[data-md-color-scheme="slate"] {
  /* Primary — Bulldog Red */
  --md-primary-fg-color:            #BA0C2F;
  --md-primary-fg-color--light:     #cf3d5e;
  --md-primary-fg-color--dark:      #8a0923;
  --md-primary-bg-color:            #FFFFFF;
  --md-primary-bg-color--light:     #E0E0E0;

  /* Accent — Lake Herrick (brighter teal, good contrast on dark) */
  --md-accent-fg-color:             #00A3AD;
  --md-accent-fg-color--transparent: rgba(0, 163, 173, 0.15);
  --md-accent-bg-color:             #1a1a1a;

  /* Dark backgrounds — near-black */
  --md-default-fg-color:            #E0E0E0;
  --md-default-fg-color--light:     #BBBBBB;
  --md-default-fg-color--lighter:   #9EA2A2;
  --md-default-fg-color--lightest:  rgba(255, 255, 255, 0.07);
  --md-default-bg-color:            #121212;
  --md-default-bg-color--light:     #1a1a1a;
  --md-default-bg-color--lighter:   #222222;
  --md-default-bg-color--lightest:  #2a2a2a;

  /* Links */
  --md-typeset-a-color:             #00A3AD;

  /* Code blocks */
  --md-code-bg-color:               #1e1e1e;
  --md-code-fg-color:               #E0E0E0;

  /* Footer */
  --md-footer-bg-color:             #0a0a0a;
  --md-footer-bg-color--dark:       #000000;
  --md-footer-fg-color:             #E0E0E0;
  --md-footer-fg-color--light:      #9EA2A2;
  --md-footer-fg-color--lighter:    #666666;
}

/* ================================================================
   TYPOGRAPHY — Oswald headings
   UGA Brand: Oswald light (300) and medium (500) only
   ================================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  text-transform: none;
}

.md-typeset h1 {
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Navigation tabs — Oswald medium */
.md-tabs__link {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Site title in header */
.md-header__title {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
}

/* ================================================================
   LINK STYLES — accessible contrast
   ================================================================ */
.md-typeset a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.md-typeset a:hover,
.md-typeset a:focus {
  text-decoration-thickness: 2px;
}

/* Navigation links should not be underlined */
.md-nav a,
.md-tabs a,
.md-header a,
.md-footer a {
  text-decoration: none;
}

/* ================================================================
   FOCUS INDICATORS — accessibility
   High-visibility focus rings for keyboard navigation
   ================================================================ */
*:focus-visible {
  outline: 3px solid #00A3AD;
  outline-offset: 2px;
}

.md-header *:focus-visible,
.md-footer *:focus-visible {
  outline-color: #FFFFFF;
}

/* ================================================================
   BUTTONS — UGA brand button style
   Lake Herrick background, rounded, Merriweather Sans
   ================================================================ */
.md-typeset .md-button {
  background-color: #004E60;
  color: #FFFFFF;
  border: none;
  border-radius: 25px;
  font-family: "Merriweather Sans", sans-serif;
  font-weight: 300;
  font-size: 0.8rem;
  padding: 0.5em 1.2em;
  text-decoration: none;
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus {
  background-color: #00A3AD;
  color: #FFFFFF;
  text-decoration: none;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  background-color: #00A3AD;
  color: #000000;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:hover,
[data-md-color-scheme="slate"] .md-typeset .md-button:focus {
  background-color: #00c4d0;
  color: #000000;
}

/* ================================================================
   NAVIGATION SIDEBAR — brand styling
   ================================================================ */
.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--md-accent-fg-color);
}

.md-nav__link--active {
  color: var(--md-accent-fg-color);
  font-weight: 700;
}

/* ================================================================
   HEADER — ensure white text on Bulldog Red
   (Brand rule: white provides sufficient contrast for red)
   ================================================================ */
.md-header {
  background-color: var(--md-primary-fg-color);
  color: #FFFFFF;
}

/* ================================================================
   ADMONITIONS — use brand neutral tones
   ================================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-left-width: 4px;
}

/* ================================================================
   TABLES — accessible styling
   ================================================================ */
.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--lighter);
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* ================================================================
   GRID CARDS on homepage — brand accent
   ================================================================ */
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  border-color: var(--md-accent-fg-color);
}

/* ================================================================
   SELECTION — brand highlight
   ================================================================ */
::selection {
  background-color: #C8D8EB;
  color: #000000;
}

[data-md-color-scheme="slate"] ::selection {
  background-color: #004E60;
  color: #FFFFFF;
}

/* ================================================================
   SCROLLBAR — subtle brand theming (webkit browsers)
   ================================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--md-default-bg-color--light);
}

::-webkit-scrollbar-thumb {
  background: var(--md-default-fg-color--lighter);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--md-default-fg-color--light);
}