Styles & CSS Variables
Citera’s styling has three pieces: an inlined token system
(css-variables.liquid), the main stylesheet (base.css), and the
critical-path stylesheet (critical.css).
css-variables.liquid
An inlined <style> block that turns theme settings into CSS custom properties.
It runs first in the <head> so every rule downstream can rely on the tokens.
Fonts
--font-body--family,--font-body--style,--font-body--weight--font-heading--family,--font-heading--style,--font-heading--weight- Font faces are loaded via the
font_facefilter withdisplay: swap.
Typography scale
--type-base— base font size (16–20px, merchant-set)--type-scale— heading size multiplier (100–140%)
Layout
--page-width— 80rem / 96rem / 120rem--page-margin— page padding (12–60px)--section-spacing— gap between sections (0–100px)
Radii
--radius-button,--radius-input,--radius-card
Color schemes
Three schemes, each exposed as a .color-{scheme-id} class with six variables:
--color-background,--color-background-image(solid + gradient)--color-foreground(text)--color-border--color-button,--color-button-text
Sections pick a scheme via a class like color-scheme-2. That’s how one page can
alternate light/dark/accent backgrounds while sharing one token system.
base.css
The main design-system stylesheet:
- CSS reset (box-sizing, html/body, headings, links)
- Design tokens (spacing scale
--space-2xs…--space-3xl, type scale--text-h1…--text-xs, shadows, z-indices, easings) - Typography per heading level
- Layout primitives (container, grid, full-width utilities)
- Rich-text (RTE) styles
- Accessibility (
visually-hidden, focus outlines, skip link) - Utility classes (margins, paddings, alignment, colors)
critical.css
Critical-path styles that must apply before render:
- HTML/body reset (flex setup, scroll-behavior, min-height)
- Scroll lock (for open modals/drawers)
- Image reset (
display:block, responsive sizing) - Form elements,
<dialog>styling - Text wrapping (
text-wrap: pretty,overflow-wrap) - Section grid setup (
--content-width,--content-margin,--content-grid) for constrained vs full-width layouts
Responsive breakpoints
| Breakpoint | Target |
|---|---|
| 480px | Large phone |
| 750px | Tablet |
| 990px | Laptop |
| 1400px | Desktop |
| 2560px | Ultrawide |
Fluid type uses clamp(); slideshows and carousels use CSS scroll-snap.