/* * UrPage shared theme stylesheet — the asset the generated tenant page links * at /_urpage/theme.css (DE-0043 §6/§3). * * SOURCE OF TRUTH + WIRING. This file is the canonical definition of the * curated theme presets. The generator (server/internal/page/render.go) emits * ... * and serves this asset off Caddy's file_server for the `/_urpage/*` prefix on * the `*.urpage.net` tenant hosts (server/internal/api/urpage.go). The web * marketing app's write-scope is `web/`, so this file lives here as the source * of truth; the deploy / server cohort copies it to the edge `/_urpage/` * location (flagged for the orchestrator — see the report). The authoring form * does NOT @import this file (it would leak the `body`/`*` resets into the SPA); * the form's live preview re-declares the same tokens scoped to its preview * container instead (ThemePreview in PublishPage.tsx). * * THEME KEYS (must equal page.ValidThemes + THEME_KEYS in profileSchema.ts): * warm — parchment & terracotta (default; matches yo.urspace.net) * cool — slate & blue * forest — soft green & deep evergreen * * ACCESSIBILITY (DE-0043 §6 "usable by everyone"). Every text/link/control * colour pair was contrast-checked to WCAG 2.1 AA (4.5:1 normal text). The * verified ratios (lowest shown per theme): * warm: body 13.86:1, secondary 5.34:1, link 5.06:1, button 5.25:1 * cool: body 13.16:1, secondary 5.59:1, link 5.79:1, button 5.94:1 * forest: body 13.58:1, secondary 6.05:1, link 5.63:1, button 5.74:1 * The 1px separators (--up-border) are decorative — the cards are also * distinguished by a background-colour difference, so per WCAG 1.4.11 the * border is not the sole means of identifying a component and is exempt from * the 3:1 non-text bar (the same posture src/index.css's --border takes). * * Colours are bare HSL channel triples consumed via hsl(var(--token)), the * same convention as src/index.css + tailwind.config.ts, so a downstream tool * can read or recolour them uniformly. */ :root { /* Token NAMES are theme-independent; the values are set per data-theme below. Declaring them here documents the contract (every theme defines exactly this set) and gives the default (warm) a base in case data-theme is somehow absent. */ --up-bg: 40 33% 96%; --up-surface: 40 40% 93%; --up-ink: 30 12% 15%; --up-muted: 30 8% 38%; --up-accent: 12 80% 42%; --up-accent-ink: 40 33% 98%; --up-border: 35 20% 85%; --up-radius: 0.5rem; --up-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --up-font-serif: Georgia, "Times New Roman", serif; --up-maxw: 38rem; } /* warm — parchment & terracotta (default). */ [data-theme="warm"] { --up-bg: 40 33% 96%; --up-surface: 40 40% 93%; --up-ink: 30 12% 15%; --up-muted: 30 8% 38%; --up-accent: 12 80% 42%; --up-accent-ink: 40 33% 98%; --up-border: 35 20% 85%; } /* cool — slate & blue. */ [data-theme="cool"] { --up-bg: 210 30% 97%; --up-surface: 210 28% 93%; --up-ink: 215 30% 18%; --up-muted: 215 15% 38%; --up-accent: 212 72% 40%; --up-accent-ink: 210 40% 98%; --up-border: 214 22% 82%; } /* forest — soft green & deep evergreen. */ [data-theme="forest"] { --up-bg: 110 28% 97%; --up-surface: 120 24% 93%; --up-ink: 150 30% 14%; --up-muted: 150 16% 32%; --up-accent: 152 58% 28%; --up-accent-ink: 110 30% 98%; --up-border: 120 20% 80%; } /* ---- Page layout. Selectors match the class names the generator emits in server/internal/page/render.go (pageTemplateText): .urpage, .urpage-header, .urpage-name, .urpage-tagline, .urpage-contact, .urpage-hours, .urpage-hours-list, .urpage-links. Mobile-first, single-column, generous line length — "modern, accessible, fast by construction" (DE-0043 §1). ---- */ * { box-sizing: border-box; } html { font-size: 100%; } body { margin: 0; background: hsl(var(--up-bg)); color: hsl(var(--up-ink)); font-family: var(--up-font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } .urpage { max-width: var(--up-maxw); margin: 0 auto; padding: 3rem 1.25rem 4rem; } .urpage-header { margin-bottom: 2rem; } .urpage-name { font-family: var(--up-font-serif); font-size: clamp(1.75rem, 5vw, 2.5rem); line-height: 1.15; margin: 0 0 0.5rem; } .urpage-tagline { font-size: 1.125rem; color: hsl(var(--up-muted)); margin: 0; } .urpage-contact, .urpage-hours, .urpage-links { background: hsl(var(--up-surface)); border: 1px solid hsl(var(--up-border)); border-radius: var(--up-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .urpage-contact p, .urpage-contact address { margin: 0.25rem 0; } .urpage-address { font-style: normal; color: hsl(var(--up-muted)); } .urpage h2 { font-family: var(--up-font-serif); font-size: 1.125rem; margin: 0 0 0.75rem; } .urpage-hours-list { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; margin: 0; } .urpage-hours-list dt { font-weight: 600; } .urpage-hours-list dd { margin: 0; color: hsl(var(--up-muted)); } .urpage-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .urpage-links a { display: block; text-align: center; background: hsl(var(--up-accent)); color: hsl(var(--up-accent-ink)); text-decoration: none; font-weight: 600; padding: 0.75rem 1rem; border-radius: var(--up-radius); } .urpage-links a:hover { filter: brightness(0.93); } /* Inline links (phone, email) use the accent colour as text on the page bg — the 5:1+ AA-verified pair, not the button treatment. */ .urpage-contact a { color: hsl(var(--up-accent)); text-decoration: none; } .urpage-contact a:hover { text-decoration: underline; } /* Visible keyboard focus on every interactive element — the AA focus-visible requirement (WCAG 2.4.7), not left to the UA default which some themes render invisibly against the accent fill. */ .urpage a:focus-visible { outline: 3px solid hsl(var(--up-ink)); outline-offset: 2px; }