Search UI

The Universal Search in this project is powered by Pagefind. The search UI is pre-built, so we use src/styles/pagefind.css to override its default styles to match our premium aesthetic.

File Location

src/styles/pagefind.css

Custom CSS Properties

Pagefind exposes several variables that we override to sync with our theme.css.

:root {
  --pagefind-ui-scale: 0.75;
  --pagefind-ui-primary: var(--color-primary);
  --pagefind-ui-text: var(--foreground);
  --pagefind-ui-background: var(--background);
  --pagefind-ui-border: color-mix(in srgb, var(--foreground), transparent 90%);
  --pagefind-ui-border-radius: 0.75rem;
  --pagefind-ui-font: 'Inter', sans-serif;
}

Dark Mode Support

We explicitly redefine these variables inside the .dark selector to ensure the search modal adapts automatically to theme switching.

.dark {
  --pagefind-ui-primary: var(--color-primary);
  --pagefind-ui-background: var(--background);
  /* ... */
}

Advanced Overrides

We also use !important rules in this file to force certain layouts, such as making the search input background transparent or removing default styling from the results drawer.

.pagefind-ui__drawer {
    background-color: transparent !important;
}