> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mochacola.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS

> Kenny's CSS playground — small styling projects for learning Mintlify

<Accordion title="Code block styling" defaultOpen={false}>
  <Accordion title="How this was built" defaultOpen={false}>
    Mintlify renders code blocks with [Shiki](https://shiki.style) and exposes syntax colors as CSS variables when `styling.codeblocks.theme` is set to `css-variables` in [`docs.json`](https://mintlify.com/docs/create/code).

    [`custom.css`](https://mintlify.com/docs/customize/custom-scripts#custom-css) at the project root is picked up automatically — no import needed — and overrides those `--mint-token-*` variables, swaps the font to [JetBrains Mono](https://www.jetbrains.com/lp/mono/), and adds a themed border, glow, and scrollbar.

    `--mint-token-*` are inherited CSS custom properties, so wrapping a code block in `<div className="theme-name">` overrides the palette for just that block — the site-wide default in `:root` stays untouched everywhere else.
  </Accordion>

  <Accordion title="Aurora — colors & fonts" defaultOpen={false}>
    * <span className="color-swatch" style={{backgroundColor: "#0f172a"}} /> Background `#0f172a`
    * <span className="color-swatch" style={{backgroundColor: "#c084fc"}} /> Keyword `#c084fc`
    * <span className="color-swatch" style={{backgroundColor: "#60a5fa"}} /> Function `#60a5fa`
    * <span className="color-swatch" style={{backgroundColor: "#4ade80"}} /> String `#4ade80`
    * <span className="color-swatch" style={{backgroundColor: "#fbbf24"}} /> Constant / parameter `#fbbf24`
    * <span className="color-swatch" style={{backgroundColor: "#64748b"}} /> Comment `#64748b` (italic)
    * Font: JetBrains Mono
  </Accordion>

  <div className="theme-aurora">
    <CodeGroup>
      ```javascript hero.js theme={"theme":"css-variables"}
      // comments get a muted, italic treatment
      const greet = (name) => {
        const message = `Hello, ${name}!`;
        return message.trim();
      };

      export const isReady = true;
      ```

      ```python aurora.py theme={"theme":"css-variables"}
      # same palette, different language
      def greet(name: str) -> str:
          message = f"Hello, {name}!"
          return message.strip()

      is_ready = True
      ```
    </CodeGroup>
  </div>

  <Accordion title="Sunset — colors & fonts" defaultOpen={false}>
    * <span className="color-swatch" style={{backgroundColor: "#1a1025"}} /> Background `#1a1025`
    * <span className="color-swatch" style={{backgroundColor: "#ff6b9d"}} /> Keyword `#ff6b9d`
    * <span className="color-swatch" style={{backgroundColor: "#ffa94d"}} /> Function `#ffa94d`
    * <span className="color-swatch" style={{backgroundColor: "#ffd93d"}} /> String `#ffd93d`
    * <span className="color-swatch" style={{backgroundColor: "#ff8787"}} /> Constant / parameter `#ff8787`
    * <span className="color-swatch" style={{backgroundColor: "#9a7f8f"}} /> Comment `#9a7f8f` (italic)
    * Font: JetBrains Mono
  </Accordion>

  <div className="theme-sunset">
    <CodeGroup>
      ```javascript sunset.js theme={"theme":"css-variables"}
      // warm palette: pink keywords, orange functions, yellow strings
      const launch = (destination) => {
        const eta = `arriving at ${destination} soon`;
        return eta.toUpperCase();
      };
      ```

      ```python sunset.py theme={"theme":"css-variables"}
      # warm palette: pink keywords, orange functions, yellow strings
      def launch(destination: str) -> str:
          eta = f"arriving at {destination} soon"
          return eta.upper()
      ```
    </CodeGroup>
  </div>

  <Accordion title="Ocean — colors & fonts" defaultOpen={false}>
    * <span className="color-swatch" style={{backgroundColor: "#0a1e26"}} /> Background `#0a1e26`
    * <span className="color-swatch" style={{backgroundColor: "#4fd1c5"}} /> Keyword `#4fd1c5`
    * <span className="color-swatch" style={{backgroundColor: "#63b3ed"}} /> Function `#63b3ed`
    * <span className="color-swatch" style={{backgroundColor: "#81e6d9"}} /> String `#81e6d9`
    * <span className="color-swatch" style={{backgroundColor: "#f6ad55"}} /> Constant / parameter `#f6ad55`
    * <span className="color-swatch" style={{backgroundColor: "#5c8a99"}} /> Comment `#5c8a99` (italic)
    * Font: JetBrains Mono
  </Accordion>

  <div className="theme-ocean">
    <CodeGroup>
      ```javascript ocean.js theme={"theme":"css-variables"}
      // cool palette: teal keywords, sky-blue functions, aqua strings
      const dive = (depth) => {
        const status = `descending to ${depth}m`;
        return status.toUpperCase();
      };
      ```

      ```python ocean.py theme={"theme":"css-variables"}
      # cool palette: teal keywords, sky-blue functions, aqua strings
      def dive(depth: int) -> str:
          status = f"descending to {depth}m"
          return status.upper()
      ```
    </CodeGroup>
  </div>
</Accordion>

<Accordion title="Hover interactive cards" defaultOpen={false}>
  <Accordion title="How this was built" defaultOpen={false}>
    Mintlify renders each `<Card>` as a plain `.card` div inside a `.card-group` grid — both real, stable class names, not scoped/hashed, so `custom.css` can target them directly.

    Each card below is individually wrapped in its own `<div className="card-tilt">` (or `card-glow` / `card-lift`), and each wrapper class defines exactly one effect, scoped as `.card-tilt .card:hover`: tilt is a `perspective()` + `rotateX`/`rotateY` transform and nothing else, glow is a radial `box-shadow` halo with no movement, and lift is a straight `translateY(-14px)` with a grounding drop shadow — no rotation or glow on either. The icon (an SVG using a CSS mask, not a fill) recolors on all three via `.card:hover svg`.

    It's pure CSS — no JavaScript — so the tilt is a fixed angle rather than one that follows the cursor.
  </Accordion>

  <CardGroup cols={3}>
    <div className="card-tilt">
      <Card title="Tilt" icon="cube">
        Hover for a 3D rotation only.
      </Card>
    </div>

    <div className="card-glow">
      <Card title="Glow" icon="sparkles">
        Hover for a soft accent halo only.
      </Card>
    </div>

    <div className="card-lift">
      <Card title="Lift" icon="arrow-up">
        Hover to lift straight off the page.
      </Card>
    </div>
  </CardGroup>
</Accordion>

<Accordion title="Custom scrollbar" defaultOpen={false}>
  <Accordion title="How this was built" defaultOpen={false}>
    Two APIs, set globally on `html` in `custom.css`, cover every browser: Firefox reads the standard `scrollbar-width` / `scrollbar-color` properties, while Chrome, Safari, and Edge use the older `::-webkit-scrollbar`, `::-webkit-scrollbar-track`, and `::-webkit-scrollbar-thumb` pseudo-elements. Setting both themes the scrollbar everywhere on the site — including the browser window's own scrollbar, not just inside a bounded container like the one below.

    Code blocks keep the separate, thinner scrollbar from the "Code block styling" section above — `pre::-webkit-scrollbar` wins there since a tag + pseudo-element selector beats the sitewide `::-webkit-scrollbar` rule on specificity.
  </Accordion>

  <div className="scroll-demo not-prose">
    1. Scroll inside this box
    2. Same green theme as the rest of the site
    3. Firefox: `scrollbar-width` + `scrollbar-color`
    4. Everywhere else: `::-webkit-scrollbar*`
    5. Applied globally on `html`, so the browser window's own scrollbar matches too
    6. Rounded thumb, transparent track
    7. Hover the thumb for a brighter green
    8. Almost there
    9. Last one — you found the bottom
  </div>
</Accordion>