@import 'tailwindcss'; /* * Tailwind v4 doesn't scan `node_modules/` by default. The admin UI * (`@ampless/admin`) and runtime UI bits (`@ampless/runtime`) ship * compiled JS that uses Tailwind utility classes; without these * explicit sources, every utility used only inside those packages * (e.g. the admin sidebar's `flex`, `fixed`, `md:sticky`, ...) gets * tree-shaken out of the final CSS, and the admin layout falls back * to browser defaults — sidebar overlaps main content, etc. */ @source '../node_modules/@ampless/admin/dist'; @source '../node_modules/@ampless/runtime/dist'; @plugin '@tailwindcss/typography'; /* DADS theme plugin from Digital Agency. Loaded globally so the * `templates/dads/` theme can use DADS-conformant color variables * (`--color-blue-900` etc., the canonical solidBlue). Other themes * don't reference DADS-specific classes, so the plugin's tokens * sit unused for them — small CSS overhead, no behavior change. */ @plugin '@digital-go-jp/tailwind-theme-plugin'; /* * Tailwind v4 inline theme: every `--color-*` and `--radius-*` token * the framework knows about reads from a CSS variable, so theme * tokens.css files can override them at runtime by changing the right * data-theme block. */ @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); } /* * Color scheme: * * - `:root { color-scheme: light dark }` opts the page into both modes * and asks the browser to pick based on the visitor's * `prefers-color-scheme` setting. * - `html[data-color-scheme='light' | 'dark']` lets the site admin pin * one mode regardless of system preference. The attribute is written * by `app/layout.tsx` from the per-site setting * (`theme.colorScheme`, default `'auto'` = no attribute). * - Token values below (and in each theme's `tokens.css`) use the CSS * `light-dark(L, D)` function so a single declaration covers both * modes — the active `color-scheme` selects between L and D at * paint time. */ :root { color-scheme: light dark; } html[data-color-scheme='light'] { color-scheme: light; } html[data-color-scheme='dark'] { color-scheme: dark; } /* * Default tokens — used as fallback when no theme's `[data-theme=...]` * selector matches (e.g. body has no data-theme attribute, or admin * pages that aren't theme-scoped). Each installed theme ships its own * `themes//tokens.css` overriding these under * `[data-theme='']`. The active theme's tokens win because the * `` attribute makes the scoped selector match. */ :root { --background: light-dark(oklch(1 0 0), oklch(0.145 0 0)); --foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0)); --card: light-dark(oklch(1 0 0), oklch(0.145 0 0)); --card-foreground: light-dark(oklch(0.145 0 0), oklch(0.985 0 0)); --primary: light-dark(oklch(0.205 0 0), oklch(0.985 0 0)); --primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0)); --secondary: light-dark(oklch(0.97 0 0), oklch(0.269 0 0)); --secondary-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0)); --muted: light-dark(oklch(0.97 0 0), oklch(0.269 0 0)); --muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0)); --accent: light-dark(oklch(0.97 0 0), oklch(0.269 0 0)); --accent-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0)); --destructive: light-dark(oklch(0.577 0.245 27.325), oklch(0.396 0.141 25.723)); --destructive-foreground: light-dark(oklch(0.985 0 0), oklch(0.985 0 0)); --border: light-dark(oklch(0.922 0 0), oklch(0.269 0 0)); --input: light-dark(oklch(0.922 0 0), oklch(0.269 0 0)); --ring: light-dark(oklch(0.708 0 0), oklch(0.439 0 0)); --radius: 0.5rem; --ampless-body-font: system-ui, -apple-system, sans-serif; } body { font-family: var(--ampless-body-font, system-ui, -apple-system, sans-serif); background: var(--background); color: var(--foreground); } * { border-color: var(--border); } /* Tighten list spacing inside `.prose`. The Typography plugin's default treats every

as roughly a paragraph's worth of vertical rhythm, and tiptap wraps each list item in

— so we get double margins and the list looks like loose paragraphs rather than a list. */ .prose :where(li):not(:where([class~='not-prose'] *)) { margin-top: 0.25em; margin-bottom: 0.25em; } .prose :where(li > p):not(:where([class~='not-prose'] *)) { margin-top: 0; margin-bottom: 0; } /* Default styling for first-party plugin hooks. publicHtmlForPost output renders OUTSIDE .prose (sibling of the post body), so it inherits no typography. Zero-specificity :where() so any theme tokens.css or site CSS override always wins. */ :where(.ampless-reading-time) { margin: 1.25rem 0; /* symmetric margin — works for either beforeContent or afterContent placement */ font-size: 0.8125rem; color: var(--muted-foreground); } :where(.ampless-ai-actions) { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; /* symmetric margin — works for either beforeContent or afterContent placement */ font-size: 0.8125rem; } :where(.ampless-ai-actions a) { color: var(--muted-foreground); text-decoration: none; border: 1px solid var(--border); border-radius: 9999px; /* pill shape. Themes that want --radius instead can override in one line. */ padding: 0.25em 0.85em; white-space: nowrap; } :where(.ampless-ai-actions a:hover) { color: var(--foreground); border-color: var(--foreground); } :where(.ampless-ai-actions .ampless-ai-actions-sep) { display: none; /* separators are redundant once links are rendered as pills */ }