/* cms-hawk theme: default v1.0.0 */ :root { --color-primary: #6366f1; --color-primary-foreground: #ffffff; --color-secondary: #e5e7eb; --color-secondary-foreground: #111827; --color-accent: #ec4899; --color-accent-foreground: #ffffff; --color-background: #ffffff; --color-foreground: #111827; --color-muted: #6b7280; --color-border: #e5e7eb; --font-sans: 'Figtree', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-serif: ui-serif, Georgia, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --text-base: 1rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 1rem; --radius-full: 9999px; --spacing: 0.25rem; } /* theme-block-rules.css */ /* * theme-block-rules.css * * Static, repo-managed selectors that map data-cms-block markers onto * theme tokens (CSS custom properties resolved via :root in the * compiled theme CSS). * * This file is concatenated into every compiled theme's CSS, so all * themes get the same rule shape — they only differ in the variable * values they ship. Blocks stay dumb (they emit data-cms-block); the * theme system owns the visual mapping. * * Adding a new selector here is part of the BLOCK / RENDERER contract, * not a theme concern. Theme authors override the variables. */ /* ---- Heading ---- */ /* Tailwind 4 ships no default heading sizes — without these every * heading collapses to body size (16px). The scale is a sane * baseline that authors / themes can override per token later. * * `color: inherit` so headings inside a dark Container (e.g. the hero * with background-color set inline via styleHints) flip to the * Container's text colour automatically. The body rule below seeds * the page-level default. */ [data-cms-block="heading"] { color: inherit; /* Headings use the theme's display font when it defines one, else the * body font. Themes set --font-display via a 'font-display' token. */ font-family: var(--font-display, var(--font-sans)); font-weight: 700; line-height: 1.15; /* Heading rhythm: a small bottom margin (em-relative, so it scales with * the heading size) so a heading isn't glued to the paragraph below it — * no Spacer needed. Kept tight (headings read best close to their body). */ margin: 0 0 0.3em; } h1[data-cms-block="heading"] { font-size: clamp(2rem, 4.5vw, 3.75rem); letter-spacing: -0.02em; } h2[data-cms-block="heading"] { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -0.015em; } h3[data-cms-block="heading"] { font-size: 1.5rem; letter-spacing: -0.01em; } h4[data-cms-block="heading"] { font-size: 1.25rem; } h5[data-cms-block="heading"] { font-size: 1.125rem; } h6[data-cms-block="heading"] { font-size: 1rem; } /* Body / text colour comes from the theme, but the public page's * overrides it. Force the * theme's surface so the active theme actually paints the page. */ body { background-color: var(--color-background); color: var(--color-foreground); font-family: var(--font-sans); } /* ---- Rich text / Text ---- */ /* Inherit so a parent Container's text colour (via styleHints) wins. * The body baseline below provides the page default. */ [data-cms-block="richtext"], [data-cms-block="text"] { color: inherit; font-family: var(--font-sans); } /* Text is a real paragraph: normal

rhythm via a bottom margin (em-relative, * so it scales with the text size) instead of reaching for Spacer blocks * between paragraphs. Bottom-only keeps spacing predictable in every context — * block flow, flex and grid alike — with no leading gap and no margin-collapse * surprises. It's a stylesheet rule (not an inline style) so it stays * overridable. */ p[data-cms-block="text"] { margin: 0 0 1em; } /* Inside a gap-spaced container (Grid cell), the container's gap is the only * spacing — drop the paragraph/heading bottom margins so nothing stacks on top * of the gap. Descendant (not child) selector so it works through the editor's * per-block wrapper divs too, keeping canvas and public in sync. */ [data-cms-flow="gap"] [data-cms-block="text"], [data-cms-flow="gap"] [data-cms-block="heading"] { margin-bottom: 0; } /* ---- Link ---- */ [data-cms-block="link"] { color: var(--color-primary); } [data-cms-block="link"]:hover { text-decoration: underline; } /* ---- Button ---- */ [data-cms-block="button"] { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: var(--radius-md); padding: 0.5rem 1rem; font-family: var(--font-sans); font-weight: 500; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } [data-cms-block="button"][data-variant="primary"] { background-color: var(--color-primary); color: var(--color-primary-foreground); } [data-cms-block="button"][data-variant="secondary"] { background-color: var(--color-secondary); color: var(--color-secondary-foreground); } [data-cms-block="button"][data-variant="accent"] { background-color: var(--color-accent); color: var(--color-accent-foreground); } [data-cms-block="button"][data-variant="outline"] { border: 1px solid var(--color-border); color: var(--color-foreground); background-color: transparent; } [data-cms-block="button"][data-variant="ghost"] { color: var(--color-foreground); background-color: transparent; } /* ---- Card ---- */ [data-cms-block="card"] { background-color: var(--color-background); color: var(--color-foreground); border: 1px solid var(--color-border); border-radius: var(--radius-lg); } /* ---- Badge ---- */ [data-cms-block="badge"] { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; background-color: var(--color-secondary); color: var(--color-secondary-foreground); } /* ---- Callout ---- */ [data-cms-block="callout"] { border-radius: var(--radius-md); border-left: 4px solid var(--color-primary); padding: 1rem; background-color: color-mix(in oklab, var(--color-primary) 8%, var(--color-background)); color: var(--color-foreground); } /* ---- Separator / Border ---- */ [data-cms-block="separator"], [data-cms-block="border"] { border-color: var(--color-border); } /* ---- Container / Flex / Grid / Spacer / ScrollArea / Accordion / Tabs ---- */ /* Layout primitives are mostly Tailwind-driven; we don't restyle them * here, but we still emit the marker so plugins / themes can target * them by variant via: * [data-cms-block="flex"][data-variant="hero"] { ... } */