/** * Akar theme shell — served as /theme.css (static file) for simpler HTML and better crawler compatibility. * Theme option tokens (--color-*, --page-background, etc.) still come from the small inline block in BaseLayout. */ /** * Public deployment only — set on from BaseLayout. * Theme --page-background is first in configurable.css var() chain so it wins over these surface tints. */ html[data-public-site] { --public-surface-fallback: linear-gradient(165deg, #e0f2fe 0%, #bfdbfe 42%, #eff6ff 100%); } /** * Surface markers for multi-app setup (same UI, different background for clarity). * Order: admin | member | public | ssg */ html[data-surface='admin'] { --app-surface-background: radial-gradient(circle at 30% 20%, #bbf7d0 0%, #22c55e 45%, #14532d 100%); } html[data-surface='member'] { --app-surface-background: radial-gradient(circle at 30% 20%, #ffedd5 0%, #f59e0b 45%, #9a3412 100%); } html[data-surface='public'] { --app-surface-background: radial-gradient(circle at 30% 20%, #dbeafe 0%, #3b82f6 45%, #1e3a8a 100%); } html[data-surface='ssg'] { --app-surface-background: radial-gradient(circle at 30% 20%, #fef9c3 0%, #facc15 45%, #854d0e 100%); } /* Configurable Template Styles — CSS variables from theme settings (inline block + DB) */ html[data-mirror-theme-runtime] { --font-resizer-multiplier: 1; } /* * Background must be full-viewport but must never leak into the admin UI. * Scoped to the theme wrapper; fixed pseudo-element avoids global body/html selectors. */ html[data-mirror-theme-runtime] .theme-container { font-size: calc(1rem * var(--font-resizer-multiplier, 1)); } .theme-container { color: var(--color-font, #1f2937); position: relative; isolation: isolate; } .theme-container::before { content: ''; position: fixed; inset: 0; background: var( --page-background, var( --app-surface-background, var( --public-surface-fallback, var(--background-gradient, radial-gradient(circle, #ffffff 50%, #86e7b8 100%)) ) ) ); background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: -1; } .theme-container p, .theme-container h1, .theme-container h2, .theme-container h3, .theme-container h4, .theme-container h5, .theme-container h6, .theme-container span, .theme-container div, .theme-container a, .theme-container li, .theme-container td, .theme-container th, .theme-container label, .theme-container input[type='text'], .theme-container input[type='email'], .theme-container textarea, .theme-container select, .theme-container button { color: var(--color-font, #1f2937); } /* Base reset (was inline in BaseLayout ) */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; max-width: 100vw; } body { margin: 0; padding: 0; overflow-x: hidden; font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji'; } /* Layout shell (was trailing