# Clarflow — Complete Content
> Clarflow is an AI-powered quiz funnel builder for ecommerce brands. Build interactive product recommendation quizzes, lead capture funnels, and personalized shopping experiences — no code required.
---
# Documentation
## CSS Classes Reference
> Complete reference for all Clarflow CSS classes. Target and style every part of your funnel — questions, inputs, buttons, headers, and more.
# Clarflow CSS Classes Reference
Target and style every part of your funnel with custom CSS. All classes follow the `cf-` prefix convention and are organized in three tiers: **global**, **step-level**, and **instance-level**.
---
## Layout & DOM Structure
The funnel renders as a 3-child flex column that fills the viewport:
```text
[data-clarflow-root] <- flex-col, 100dvh, overflow:hidden (also .cf-root)
|- [data-clarflow-header] <- flex-shrink:0 (logo, back, progress)
|- [data-clarflow-content] <- flex:1, overflow-y:auto (ONLY scrollable area) (also .cf-content)
| └─ .cf-step <- step container
| └─ .cf-step-content <- padded inner box (default content padding)
└─ [data-clarflow-button-portal] <- flex-shrink:0 (continue button) (also .cf-button-portal)
```
**Protected properties** (cannot be overridden by custom CSS):
- `[data-clarflow-root]`: display, flex-direction, height, overflow
- `[data-clarflow-content]`: flex, min-height, overflow-y
- `[data-clarflow-button-portal]`: flex-shrink
> Always use `!important` when overriding inline styles. CSS is auto-scoped inside `[data-clarflow-root]`.
---
## Step Classes
| Class | Description |
|-------|-------------|
| `.cf-step` | Every step container |
| `.cf-step-content` | Padded inner box inside each step (carries the default content padding) |
| `.cf-step-{N}` | Specific step by position (1-based) |
| `.cf-step-first` | First step in the funnel |
| `.cf-step-last` | Last step in the funnel |
| `.cf-step-odd` | Steps in odd positions (1, 3, 5…) |
| `.cf-step-even` | Steps in even positions (2, 4, 6…) |
`.cf-step-content` is the child of `.cf-step` that holds the step's elements with the default
padding. Zero its padding to go full-bleed / edge-to-edge (covers, hero images, custom HTML).
**Examples:**
```css
/* Style only the first step */
.cf-step-first {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}
/* Add extra padding to the last step */
.cf-step-last {
padding-bottom: 60px !important;
}
/* Full-bleed step: kill the inner padding so a cover/hero hits the edges */
.cf-step-3 .cf-step-content {
padding: 0 !important;
}
```
### Content padding variables
`.cf-step-content`'s padding is driven by two CSS variables (so you can adjust it without a
structural selector). Set them on a step (or globally) and they cascade into the inner box:
| Variable | Default | Controls |
|----------|---------|----------|
| `--cf-content-padding-x` | `24px` | Left/right padding of `.cf-step-content` |
| `--cf-content-padding-y` | `32px` | Top/bottom padding of `.cf-step-content` |
```css
/* Full-bleed cover on step 1 — zero the vertical padding via the variable */
.cf-step-1 { --cf-content-padding-y: 0; }
/* Tighter horizontal gutters across the whole funnel */
.cf-step { --cf-content-padding-x: 12px; }
```
---
## Step Transition Animations
Add an animation when the funnel moves between steps. There's one catch: the renderer reuses the **same** `.cf-step` DOM node and only swaps the step class, so an animation keyed on `.cf-step` alone fires once on load and never re-fires. The standard fix is to key the animation off the **parity classes** `.cf-step-odd` / `.cf-step-even` — they flip on every navigation, which restarts the animation each step.
Define two **identical but differently named** keyframes (one per parity) and point each parity class at one:
```css
@keyframes cf-slide-a {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes cf-slide-b {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
.cf-step {
animation-duration: 0.3s !important;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
animation-fill-mode: both !important;
}
.cf-step-odd { animation-name: cf-slide-a !important; }
.cf-step-even { animation-name: cf-slide-b !important; }
```
> Why two keyframes? A CSS animation only restarts when its `animation-name` actually changes. `cf-slide-a` and `cf-slide-b` are identical but differently named, so alternating them per parity forces the browser to re-run the animation on every step.
Swap the `transform` for any effect: slide up (`translateY(24px)`), pop (`scale(0.96)`), or a pure fade (drop the `transform` and animate opacity only).
---
## Element Type Classes
Every sub-element gets a global class based on its type:
| Class | Element |
|-------|---------|
| `.cf-title` | Title elements |
| `.cf-text` | Text blocks |
| `.cf-image` | Image elements |
| `.cf-question` | Question elements |
| `.cf-input` | Input fields |
| `.cf-dropdown` | Dropdown selects |
| `.cf-loading` | Loading elements |
| `.cf-custom-html` | Custom HTML blocks |
**Step-scoped:** `.cf-step-{N}-{type}` (e.g., `.cf-step-2-question`)
**Instance-scoped:** `.cf-step-{N}-el-{E}` (e.g., `.cf-step-2-el-1` for the first element in step 2)
**Inner element hooks** — target the rendered content directly (no Tailwind/structural selectors needed):
| Class | Element |
|-------|---------|
| `.cf-title-text` | The title's text element (h1 / rich-text body) |
| `.cf-text-body` | The text block's paragraph / rich-text body |
| `.cf-input-field` | The `` element itself |
| `.cf-dropdown-select` | The `