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

# Styling

> Themes, the CSS variables you can set, and layout rules.

The `theme` option picks a set of defaults: `light`, `dark`, or `auto` (the shopper's system
setting). To match your own palette, set CSS variables on any ancestor of the container. Set them
on `<html>` or `<body>` so the pop-up's sheet and scrim pick them up too. A variable you set wins
over the theme's default.

## The usual variables

| Variable | Used for | Light default | Dark default |
| - | - | - | - |
| `--krti-text` | the message and the amounts, the card's saving and benefits, the dark badge's fill | `#0b0f14` | `#f5f7fa` |
| `--krti-link` | the Learn more link in the line (defaults to `--krti-brand`) | `#0084ff` | `#1a8fff` |
| `--krti-bg` | the surface of the line and the card, the dark badge's wordmark, the pop-up's sheet | `#ffffff` | `#0c141c` |
| `--krti-border` | the 1 px border of the line and the card | `#e5e7ec` | `#1c2834` |
| `--krti-brand` | the brand badge's fill, the benefit icons, focus rings | `#0084ff` | `#1a8fff` |

## Fine tuning

| Variable | Used for | Light default | Dark default |
| - | - | - | - |
| `--krti-text-secondary` | the card's label and explanation | `#5b6470` | `#9aa6b2` |
| `--krti-text-muted` | the struck-through old amount, the "Pay with" label | `#8a93a0` | `#606c79` |
| `--krti-bg-elevated` | the card's Learn more pill | `#f2f3f6` | `#141e28` |

```css theme={null}
:root {
  --krti-bg: #faf7f2;
  --krti-border: #e8e2d8;
  --krti-text: #1a1a1a;
}
```

## The Krti badge

The line and the card carry the Krti badge: the wordmark on a small pill. The `badge` option
picks its fill.

| `badge` | Light page | Dark page |
| - | - | - |
| `brand` (default) | brand blue, white wordmark | brand blue, white wordmark |
| `dark` | black, white wordmark | white, dark wordmark |

The badge follows `--krti-brand`, `--krti-text` and `--krti-bg`; its white wordmark on the brand
fill is fixed.

## The payment logos

The card's "Pay with" row and the pop-up show the logos of the methods your store accepts:
KNET, Visa, Mastercard, Apple Pay and Google Pay. The chips are white in both themes so the
marks keep their brand colours, with a light hairline border. American Express is never shown.

## Layout rules

* The line needs **320 px**. At that width an offer wraps to two lines; from 600 px every state
  fits one line. "Learn more" sits on its own line under the message, the badge beside it.
* The card puts the three benefits beside the saving from about 440 px and under it below.
* "Learn more" never splits and an amount never separates from its currency. Do not override
  `white-space` on `.krti-link`.
* The font is your page's system stack at the design's sizes (14 px body, 20 px line height,
  22 px in Arabic). Set `font-family` on the container to change it.
* Dark pages: pass `theme: 'dark'` (or `auto`). The pop-up follows the same theme.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.