/* ========================================================================== TenantSectionLayout.css Shared layout for constrained tenant sections (single source of truth). Use with the `tenant-section` class; exclude full-width breakout sections. ========================================================================== */ /* ---------- Footer-matching defaults ---------- Loaded FIRST in , so template CSS (loaded via @section Styles) can override --footer-bg / --footer-text for templates whose footer uses a different background. var() references resolve lazily at computed-value time, so --section-bg-1 / --primary-color pick up their Razor-computed values from the body inline :root in RenderTemplate.cshtml. ------------------------------------------------ */ :root { --footer-bg: var(--section-bg-1); --footer-text: var(--primary-color); /* UX semantic tokens — static constants, not brand-derived */ --ux-success: #28a745; --ux-success-bg: #e8f5e9; --ux-success-border: #a5d6a7; --ux-error: #dc3545; --ux-error-bg: #fdecea; --ux-error-border: #ef9a9a; --ux-warning: #ffc107; --ux-warning-bg: #fff8e1; } .tenant-theme { --template-content-width: 1200px; min-height: 100vh; } .tenant-section { max-width: var(--template-content-width); width: 100%; margin: 0 auto 2.7rem auto; padding: 2.6rem 1.5rem; box-sizing: border-box; } @media (max-width: 800px) { .tenant-section { max-width: 100vw; padding: 1.5rem 0.8rem 1.8rem 0.8rem; } } /* ========================================================================== Breakout-class reset — container-less tenant rendering The full-width-breakout hack (left: 50%; margin-left: -50vw) was designed for a centered max-width container. Tenant pages render without one, so sections flow naturally at full width. ========================================================================== */ body.tenant-site [class*="full-width-breakout"], body.tenant-site .social-media-section, body.tenant-site .site-footer { left: 0; right: auto; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* Calendly section uses ID-scoped rules — need higher specificity */ body.tenant-site #calendlyembed { left: 0; right: auto; margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* ========================================================================== Powered-by attribution footer — rendered by _Layout.cshtml for all tenant sites. Uses --footer-bg and --footer-text (defaulted above, overrideable by template CSS) so the attribution visually merges with the template footer above it. ========================================================================== */ .tenant-powered-by-footer { padding: 0 1rem 1rem; margin: 0; font-family: var(--font-sans, 'DM Sans', system-ui, sans-serif); font-size: 1rem; text-align: center; background: var(--footer-bg); color: var(--footer-text); border-top: none; } footer.tenant-powered-by-footer a { color: inherit; text-decoration: none; font-weight: 600; transition: opacity 0.2s ease; } footer.tenant-powered-by-footer a:hover { opacity: 0.7; text-decoration: none; } /* ========================================================================== Template Error Fallback ========================================================================== */ .template-error { color: var(--ux-error); text-align: center; font-size: 1.25rem; font-weight: 600; padding: 1.5rem 0; }