custom.css

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* PHP Debugger brand: primary red from the design mockups. */
:root {
  --ifm-color-primary: #e5322d;
  --ifm-color-primary-dark: #d42621;
  --ifm-color-primary-darker: #c8241f;
  --ifm-color-primary-darkest: #a51e1a;
  --ifm-color-primary-light: #e84b47;
  --ifm-color-primary-lighter: #e95854;
  --ifm-color-primary-lightest: #ee7f7c;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(229, 50, 45, 0.08);
  --phpdbg-surface: #f6f6f7;
  --phpdbg-card-border: #e6e6e8;
  --phpdbg-dark-panel: #111113;

  /* Theme-inverted surfaces (dark panel on light pages and vice versa),
     used by the navbar and the CTA banner. */
  --phpdbg-inverse-surface: #111113;
  --phpdbg-inverse-text: #ffffff;
  --phpdbg-inverse-muted: rgba(255, 255, 255, 0.75);

  /* Navbar is theme-inverted for contrast: dark bar on light pages. */
  --ifm-navbar-background-color: #111113;
  --ifm-navbar-link-color: rgba(255, 255, 255, 0.85);
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
}

[data-theme='dark'] {
  --ifm-color-primary: #ef4444;
  --ifm-color-primary-dark: #e5322d;
  --ifm-color-primary-darker: #d42621;
  --ifm-color-primary-darkest: #a51e1a;
  --ifm-color-primary-light: #f15b5b;
  --ifm-color-primary-lighter: #f36d6d;
  --ifm-color-primary-lightest: #f79191;
  --ifm-background-color: #0d0d0f;
  --ifm-background-surface-color: #131316;
  --docusaurus-highlighted-code-line-bg: rgba(239, 68, 68, 0.12);
  --phpdbg-surface: #17171a;
  --phpdbg-card-border: #26262b;
  --phpdbg-dark-panel: #131316;

  --phpdbg-inverse-surface: #f6f6f7;
  --phpdbg-inverse-text: #17171a;
  --phpdbg-inverse-muted: rgba(0, 0, 0, 0.65);

  /* ...and a light bar on dark pages. */
  --ifm-navbar-background-color: #f6f6f7;
  --ifm-navbar-link-color: #1c1c1f;
  --ifm-navbar-link-hover-color: var(--ifm-color-primary);
}

/* Make the color-mode toggle and hamburger follow the inverted navbar text color. */
.navbar {
  color: var(--ifm-navbar-link-color);
}

/* Navbar brand: the lockup image contains the full logo, title, and subtitle.
   The mocks show a tall navbar with a large lockup. */
:root {
  --ifm-navbar-height: 5.25rem;
}

.navbar__logo {
  height: 4rem;
}

.navbar__brand {
  margin-right: 2rem;
}

/* The lockup is 4.5:1, so a fixed 4rem height makes it 288px wide -- wider than
   the room left beside the hamburger and search on a small phone, which pushed
   the whole document sideways. Below the navbar's own breakpoint let the width
   lead and the height follow, so it shrinks to fit instead of overflowing. */
@media (max-width: 996px) {
  .navbar__brand {
    margin-right: 0.5rem;
  }

  .navbar__logo {
    height: auto;
    max-height: 4rem;
    max-width: 55vw;
  }
}


.navbar__link {
  font-weight: 500;
  position: relative;
}

/* Small red bottom border on hover (the mocks show it on the selected item;
   we show it on hover instead). */
.navbar__link::after {
  content: '';
  position: absolute;
  left: var(--ifm-navbar-item-padding-horizontal);
  right: var(--ifm-navbar-item-padding-horizontal);
  bottom: -0.35rem;
  height: 2px;
  background-color: var(--ifm-color-primary);
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

/* No persistent highlight: active items look like the rest, red is hover-only. */
.navbar__link--active {
  color: var(--ifm-navbar-link-color);
}

.navbar__link--active:hover {
  color: var(--ifm-navbar-link-hover-color);
}

/* Sidebar: small-caps category headers and a red-tinted active item, per the mocks. */
.theme-doc-sidebar-item-category > .menu__list-item-collapsible > .menu__link {
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ifm-color-emphasis-600);
}

.theme-doc-sidebar-item-category > .menu__list-item-collapsible:hover,
.theme-doc-sidebar-item-category
  > .menu__list-item-collapsible
  > .menu__link:hover {
  background: none;
  color: var(--ifm-color-primary);
}

.theme-doc-sidebar-item-link .menu__link {
  font-size: 0.9rem;
}

.theme-doc-sidebar-item-link .menu__link--active {
  background-color: rgba(229, 50, 45, 0.08);
}

[data-theme='dark'] .theme-doc-sidebar-item-link .menu__link--active {
  background-color: rgba(239, 68, 68, 0.12);
}

/* Content polish */
.markdown h1:first-child {
  font-size: 2.5rem;
}

article a {
  font-weight: 500;
}

.breadcrumbs__link {
  font-size: 0.8rem;
}

/* Anchor that src/theme/DocItem/Content puts on the page title, so the "on this
   page" title entry has something to link to. Docusaurus only gives its own
   headings the offset that clears the sticky navbar, so set it here too. */
#page-top {
  scroll-margin-top: calc(var(--ifm-navbar-height) + 1rem);
}

/* Admonitions ship in Infima's green/blue/grey, which reads as a foreign palette
   next to the neutral surfaces and single red accent used everywhere else. Put
   the informational ones on the same card surface as the rest of the site, with
   the brand red as the accent.

   Deliberately not warning and danger: those are meant to stop the reader, and
   they can only do that if they still look different from an ordinary aside. */
.theme-admonition-note,
.theme-admonition-tip,
.theme-admonition-info {
  --ifm-alert-background-color: var(--phpdbg-surface);
  --ifm-alert-background-color-highlight: transparent;
  --ifm-alert-foreground-color: var(--ifm-font-color-base);
  --ifm-alert-border-color: var(--ifm-color-primary);
  border: 1px solid var(--phpdbg-card-border);
  border-left: 3px solid var(--ifm-color-primary);
  border-radius: 0.75rem;
}

.theme-admonition-note [class*='admonitionIcon'] svg,
.theme-admonition-tip [class*='admonitionIcon'] svg,
.theme-admonition-info [class*='admonitionIcon'] svg {
  fill: var(--ifm-color-primary);
}

/* Mark links that leave the site. Internal links are written relative, so the
   protocol prefix is a reliable test. The marker sits inside the link so it
   inherits colour and underline, and is hidden from assistive technology --
   screen readers announce the destination from the href already. */
.markdown a[href^='http']::after {
  content: '\2197';
  display: inline-block;
  margin-left: 0.25em;
  padding: 0 0.25em;
  border: 1px solid currentColor;
  border-radius: 0.25em;
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 0.15em;
  opacity: 0.75;
}