Styling

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`

: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.

Start here

On-site messaging

The usual variables

Fine tuning

The Krti badge

The payment logos

Layout rules

​The usual variables

​Fine tuning

​The Krti badge

​The payment logos

​Layout rules

The usual variables

Fine tuning

The Krti badge

The payment logos

Layout rules