custom.css

/*
 * Legal Disclaimer for Web license
 *
 * License to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 *
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media.
 *
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * flatfile.com (monthly pageviews: <50K)
 *
 */

/* complete */

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Regular.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Bold.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Italic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-BoldItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-BoldItalic.woff")
      format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BookItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BookItalic.woff")
      format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Medium.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Medium.woff")
      format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-MediumItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-MediumItalic.woff")
      format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Black.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-Black.woff")
      format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BlackItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Book.woff2/fonts/CircularXXWeb-BlackItalic.woff")
      format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Thin.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ThinItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ThinItalic.woff")
      format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-Light.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-LightItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-LightItalic.woff")
      format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlack.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlack.woff")
      format("woff");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularXXWeb";
  src: url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlackItalic.woff2")
      format("woff2"),
    url("https://flatfile.com/fonts/CircularXXWeb-ExtraBlackItalic.woff")
      format("woff");
  font-weight: 950;
  font-style: italic;
  font-display: swap;
}

/* Friends Fonts */
@font-face {
  font-family: "Friends";
  src: url("https://flatfile.com/fonts/Friends-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Friends";
  src: url("https://flatfile.com/fonts/Friends-UltraBold.otf")
    format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Light mode overrides */
:root {
  --primary: 0 0 0;
  --background-light: 255 255 255;
  --text-light: 0 0 0;
  --border-light: rgba(0, 0, 0, 0.1);

  /* Light mode grays */
  /* --gray-50: 0 0 0; */
  /* --gray-100: 0 0 0; */
  --gray-200: 0 0 0;
  --gray-300: 0 0 0;
  --gray-400: 0 0 0;
  --gray-500: 0 0 0;
  --gray-600: 0 0 0;
  --gray-700: 0 0 0;
  --gray-800: 0 0 0;
  --gray-900: 0 0 0;
  --gray-950: 0 0 0;
}

/* Dark mode overrides */
:root.dark {
  --primary: 255 255 255;
  --background-dark: 0 0 0;
  --text-dark: 255 255 255;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* Dark mode grays */
  --gray-50: 255 255 255;
  --gray-100: 255 255 255;
  --gray-200: 255 255 255;
  --gray-300: 255 255 255;
  --gray-400: 255 255 255;
  --gray-500: 255 255 255;
  --gray-600: 255 255 255;
  --gray-700: 255 255 255;
  --gray-800: 255 255 255;
  --gray-900: 255 255 255;
  --gray-950: 255 255 255;
}

/* Square all corners */
* {
  border-radius: 0 !important;
}

/* Hide dark mode toggle border*/
button[aria-label="Toggle dark mode"] {
  border: none;
  background-color: transparent;
}

/* Hide scrollbar */
* {
  -ms-overflow-style: none !important;  
  scrollbar-width: none !important;
}

/* Change font weight for text-2xl */
.text-2xl {
  font-weight: 450 !important;
}

/* Hide .h-5 elements */
.h-5 {
  display: none;
}

/* Uppercase and add letter spacing to left nav headers */
.pl-4 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Remove text transform and letter spacing for table of contents */
#table-of-contents-content .pl-4 {
  text-transform: none;
  letter-spacing: normal;
}

/* Dark mode hover background buttons lighter shades */
button.relative:not(.dark):hover {
  background-color: rgba(250, 250, 250, 0.1); 
}

/* Remove hover background on buttons */
html [class*="group-hover:bg-gray-200/50"],
html [class*="dark:group-hover:bg-gray-700/60"],
html .group:hover {
  background-color: transparent !important;
  transition: none !important;
  animation: none !important;
  -webkit-animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Light mode card border color should be black */
.card.block.not-prose {
  border-color: black; /* Light mode */
}
/* Dark mode card border color should be white */
:root.dark .card.block.not-prose {
  border-color: white; /* Dark mode */
}

/* Make filter tags text more visible in dark mode */
.dark .dark\:text-gray-300 {
  color: rgba(255, 255, 255, 0.9) !important; /* Brighter white for better visibility */
}

/* Increase contrast for filter tag backgrounds in dark mode */
.dark .dark\:bg-gray-900 {
  background-color: rgba(30, 30, 30, 0.8) !important; /* Slightly lighter background */
}

/* Improve hover state visibility in dark mode */
.dark .dark\:text-gray-300:hover {
  color: white !important;
  background-color: rgba(50, 50, 50, 0.9) !important;
}

/* ONLY fix selected filter tags in dark mode */
.dark #changelog-filters button:not(.dark\:bg-gray-900),
.dark #changelog-filters-content button:not(.dark\:bg-gray-900) {
  background-color: #444 !important; /* Dark gray background */
  color: white !important; /* White text */
  border: 1px solid white !important; /* White border */
}

/* Fix hover state in light mode */
#changelog-filters-content button:hover {
  color: white !important; /* Ensure text is white on hover */
}