(see templates/base.html's main_data_attrs block and templates/public/base_public.html's override). Every rule here overrides this design system's OWN tokens (--primary/--radius/--shadow/etc., defined at :root in site.css) rather than inventing a parallel set -- Bootstrap's own CSS variables are already remapped onto these same tokens (`--bs-border-radius: var(--radius)`, `--bs-box-shadow: var(--shadow)`, see site.css), which is what lets every ordinary .card/.btn-primary/ .hero-section already used across the public site re-theme itself here with ZERO markup changes -- these ten blocks are the entire mechanism. Selector uses $= (ends-with), not *=/^=, because a preset key is "{category}__{style}" (e.g. "home__modern") -- one style block matches every category that picks it, which is the whole reason ten style blocks cover eighty presets instead of needing eighty. Scoped to

, not or :root: a page's own preset must never restyle the header/nav/footer, which stay on the tenant's normal site-wide theme (Settings > Appearance's portal_ui_preset) regardless of what any one page picks. See base_public.html's own comment on this. MOBILE: nothing here needs a media query of its own. Every category's starter content (apps.public.page_presets.CATEGORIES) uses only Bootstrap's own responsive grid (.row/.col-*), which already stacks to one column below the `md` breakpoint -- these blocks only ever change COLOR/SHADOW/RADIUS/BACKGROUND, never layout, so there is nothing here that could need a breakpoint of its own. Verified by apps/public/tests/test_page_presets.py. CONTRAST: every hero background/text pairing below is WCAG AA-checked against BOTH the h1 (needs 3:1, "large text") and the .lead paragraph beside it -- which renders at 88% opacity (site.css's own `.hero-section p.lead { opacity:.88 }`) and so needs checking against its BLENDED effective color, not its nominal one, against the FULL 4.5:1 threshold. Four of the ten needed a shade adjusted from an earlier draft to clear that; the story of why is in apps.public.page_presets.STYLES' own comments and the check itself is pinned in test_page_presets.py so a future edit here cannot regress it silently. This file's ten blocks are GENERATED from apps.public.page_presets.STYLES -- if you are editing a color by hand here, you are editing a copy: change the Style() entry in that module instead, or the two will drift. ───────────────────────────────────────────────────────────────────────── */ main[data-page-preset]:not([data-page-preset=""]) { background: var(--bg); color: var(--text); /* Plain "color: var(--text)" above only fixes elements that actually inherit "color" -- Bootstrap's own headings/.text-muted/.lead read "--bs-body-color"/"--bs-secondary-color" instead, and site.css only bridges those onto --text/--muted for the TENANT-WIDE preset, scoped to html[data-portal-preset] body -- a selector this

-scoped preset never matches. Without this, headings silently kept the tenant preset's body color instead of this page's -- measured as near-invisible near-black heading text on the "dark" style's own #111827 cards. Same bridge, same reasoning, one scope narrower. */ --bs-body-color: var(--text); --bs-secondary-color: var(--muted); --bs-border-color: var(--border); --bs-tertiary-bg: var(--surface); } /* Flat -- Clean solid color, no gradients, gentle shadow. The site's own default look. */ main[data-page-preset$="__flat"] { --primary: #12856E; --primary-dark: #0b5f4f; --primary-light: #e3f5f1; --accent: #0ea5e9; --bg: #f4f7f6; --surface: #ffffff; --text: #16231f; --muted: #5c6d68; --border: #d7e3e0; --radius: .5rem; --shadow-sm: 0 1px 2px rgba(15,35,30,.06); --shadow: 0 4px 10px -2px rgba(15,35,30,.10); --shadow-lg: 0 12px 24px -6px rgba(15,35,30,.14); } main[data-page-preset$="__flat"] .hero-section { background:#0f6f5c; } /* Modern -- Bold gradient hero, soft deep shadows, generous rounded corners. */ main[data-page-preset$="__modern"] { --primary: #4f46e5; --primary-dark: #3730a3; --primary-light: #eef2ff; --accent: #a855f7; --bg: #f5f4fe; --surface: #ffffff; --text: #1e1b3a; --muted: #635f82; --border: #e1defa; --radius: 1.25rem; --shadow-sm: 0 2px 8px -2px rgba(79,70,229,.14); --shadow: 0 12px 28px -8px rgba(79,70,229,.24); --shadow-lg: 0 24px 48px -12px rgba(79,70,229,.30); } main[data-page-preset$="__modern"] .hero-section { background:linear-gradient(135deg,#4f46e5 0%,#7e22ce 100%); } /* Professional -- Navy and charcoal corporate palette, crisp minimal shadow, structured grid. */ main[data-page-preset$="__professional"] { --primary: #1b4b8a; --primary-dark: #123a63; --primary-light: #e8eef6; --accent: #c99b3a; --bg: #f6f7f9; --surface: #ffffff; --text: #111827; --muted: #5b6472; --border: #d7dce3; --radius: .25rem; --shadow-sm: 0 1px 0 rgba(17,24,39,.08); --shadow: 0 2px 0 rgba(17,24,39,.10), 0 1px 4px rgba(17,24,39,.12); --shadow-lg: 0 4px 0 rgba(17,24,39,.10), 0 8px 16px rgba(17,24,39,.14); } main[data-page-preset$="__professional"] .hero-section { background:#122f57; } /* Glassmorphism -- Frosted translucent panels over a soft colorful background wash. */ main[data-page-preset$="__glass"] { --primary: #6366f1; --primary-dark: #4338ca; --primary-light: #eef2ff; --accent: #22d3ee; --bg: #eef2ff; --surface: rgba(255,255,255,.72); --text: #1e1b3a; --muted: #5f5f82; --border: rgba(255,255,255,.5); --radius: 1rem; --shadow-sm: 0 2px 8px -2px rgba(99,102,241,.10); --shadow: 0 8px 24px -6px rgba(99,102,241,.20); --shadow-lg: 0 20px 40px -10px rgba(99,102,241,.26); } main[data-page-preset$="__glass"] .hero-section { background:radial-gradient(circle at 15% 20%,rgba(99,102,241,.55),transparent 45%),radial-gradient(circle at 85% 75%,rgba(34,211,238,.5),transparent 45%),linear-gradient(160deg,#eef2ff,#e0f2fe);color:#1e1b3a; } main[data-page-preset$="__glass"] .card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Neumorphism -- Soft embossed surfaces in one muted tone -- shape and depth instead of color. */ main[data-page-preset$="__neumorph"] { --primary: #5b6472; --primary-dark: #3f4753; --primary-light: #eef1f4; --accent: #7c8794; --bg: #e6e9ee; --surface: #e6e9ee; --text: #2c333b; --muted: #6b7480; --border: #d3d8de; --radius: 1.5rem; --shadow-sm: 3px 3px 6px rgba(163,177,198,.5), -3px -3px 6px rgba(255,255,255,.7); --shadow: 6px 6px 14px rgba(163,177,198,.55), -6px -6px 14px rgba(255,255,255,.8); --shadow-lg: 10px 10px 22px rgba(163,177,198,.6), -10px -10px 22px rgba(255,255,255,.85); } main[data-page-preset$="__neumorph"] .hero-section { background:#e6e9ee;color:#2c333b; } main[data-page-preset$="__neumorph"] .card { transition:transform .15s ease; } main[data-page-preset$="__neumorph"] .card:hover { transform:translate(-2px,-2px); } /* Minimal -- Near-white canvas, one accent, no shadow, thin hairlines, lots of air. */ main[data-page-preset$="__minimal"] { --primary: #111827; --primary-dark: #000000; --primary-light: #f3f4f6; --accent: #dc2626; --bg: #ffffff; --surface: #ffffff; --text: #111827; --muted: #6b7280; --border: #e5e7eb; --radius: .125rem; --shadow-sm: none; --shadow: none; --shadow-lg: 0 1px 2px rgba(17,24,39,.06); } main[data-page-preset$="__minimal"] .hero-section { background:#ffffff;color:#111827; border-bottom:1px solid var(--border); } /* Bold & Vibrant -- Saturated color blocks, thick borders, hard offset shadow -- playful and loud. */ main[data-page-preset$="__vibrant"] { --primary: #f97316; --primary-dark: #c2410c; --primary-light: #ffedd5; --accent: #ec4899; --bg: #fff7ed; --surface: #ffffff; --text: #1c1917; --muted: #78716c; --border: #1c1917; --radius: 1rem; --shadow-sm: 3px 3px 0 #1c1917; --shadow: 5px 5px 0 #1c1917; --shadow-lg: 8px 8px 0 #1c1917; } main[data-page-preset$="__vibrant"] .hero-section { background:linear-gradient(120deg,#f97316,#f472b6);color:#1c1917; } main[data-page-preset$="__vibrant"] .card { border-width:2px; transition:transform .15s ease; } main[data-page-preset$="__vibrant"] .card:hover { transform:translate(-2px,-2px); } /* Editorial -- Muted earthy palette, understated shadow, magazine-quiet spacing. */ main[data-page-preset$="__editorial"] { --primary: #9a3412; --primary-dark: #7c2d12; --primary-light: #fef3ea; --accent: #556b2f; --bg: #faf6f0; --surface: #fffdf9; --text: #2c241c; --muted: #7a6e5f; --border: #e6dccb; --radius: .375rem; --shadow-sm: 0 1px 2px rgba(44,36,28,.06); --shadow: 0 4px 12px -4px rgba(44,36,28,.12); --shadow-lg: 0 10px 24px -6px rgba(44,36,28,.16); } main[data-page-preset$="__editorial"] .hero-section { background:#efe6d8;color:#2c241c; } /* Dark Mode -- Deep charcoal canvas, neon accent, glow shadows. */ main[data-page-preset$="__dark"] { --primary: #818cf8; --primary-dark: #6366f1; --primary-light: #312e81; --accent: #22d3ee; --bg: #0b1220; --surface: #111827; --text: #e5e7eb; --muted: #9aa4b2; --border: #293244; --radius: 1rem; --shadow-sm: 0 0 0 1px rgba(129,140,248,.12); --shadow: 0 0 0 1px rgba(129,140,248,.14), 0 12px 28px -6px rgba(34,211,238,.25); --shadow-lg: 0 0 0 1px rgba(129,140,248,.18), 0 24px 48px -10px rgba(34,211,238,.32); } main[data-page-preset$="__dark"] .hero-section { background:radial-gradient(circle at 20% 20%,#1e2a4a,#0b1220 60%);color:#e5e7eb; } /* Retro -- Warm mustard and terracotta, chunky corners, hard nostalgic drop shadow. */ main[data-page-preset$="__retro"] { --primary: #c2732a; --primary-dark: #9a5a1f; --primary-light: #fbe8d1; --accent: #2f6f6a; --bg: #fbf1de; --surface: #fff8ec; --text: #3a2a1a; --muted: #7a6650; --border: #e8d4ac; --radius: 1.25rem; --shadow-sm: 2px 2px 0 rgba(58,42,26,.25); --shadow: 4px 4px 0 rgba(58,42,26,.28); --shadow-lg: 7px 7px 0 rgba(58,42,26,.3); } main[data-page-preset$="__retro"] .hero-section { background:linear-gradient(180deg,#f0c187,#e0a862);color:#3a2a1a; } main[data-page-preset$="__retro"] .card { transition:transform .15s ease; } main[data-page-preset$="__retro"] .card:hover { transform:translate(-2px,-2px); } /* ── Reduced motion: every hover-transform above is decorative, never the only way to see a state change (the card's content is identical either way) -- disabled outright for anyone who has asked the OS for less motion, same rule this codebase already applies to scroll-reveal animation (see anim_presets). ── */ @media (prefers-reduced-motion: reduce) { main[data-page-preset] .card { transition: none !important; } main[data-page-preset] .card:hover { transform: none !important; } }