/* ============================================================================= * EVPS-1000X -- Layout presets. * Applied via the `data-evps-layout` attribute on (set before paint by * the ClientAreaHeaderOutput hook). The default value "sidebar" intentionally * has NO rules here -- it is the theme's native layout. * * Targets the real app-shell classes: * .evps-app (CSS grid: var(--evps-sidebar-w) 1fr) * .evps-sidebar / .evps-main / .evps-content / topbar * ============================================================================= */ /* --- Compact rail: icon-only sidebar, expands on hover (progressive, :has) --- */ html[data-evps-layout="rail"] .evps-app { grid-template-columns: var(--evps-sidebar-w-sm) 1fr; } html[data-evps-layout="rail"] .evps-nav-item__label, html[data-evps-layout="rail"] .evps-nav-item__badge, html[data-evps-layout="rail"] .evps-sidebar__group-label, html[data-evps-layout="rail"] .evps-sidebar__brand-text, html[data-evps-layout="rail"] .evps-sidebar__user-info { display: none; } html[data-evps-layout="rail"] .evps-nav-item { justify-content: center; padding: 10px; } /* Hover-expand (browsers with :has -- all current evergreens). Falls back to a static rail where :has is unsupported, which is still fully usable. */ html[data-evps-layout="rail"] .evps-app:has(.evps-sidebar:hover) { grid-template-columns: var(--evps-sidebar-w) 1fr; } html[data-evps-layout="rail"] .evps-sidebar:hover .evps-nav-item__label, html[data-evps-layout="rail"] .evps-sidebar:hover .evps-nav-item__badge, html[data-evps-layout="rail"] .evps-sidebar:hover .evps-sidebar__group-label, html[data-evps-layout="rail"] .evps-sidebar:hover .evps-sidebar__brand-text, html[data-evps-layout="rail"] .evps-sidebar:hover .evps-sidebar__user-info { display: ''; } html[data-evps-layout="rail"] .evps-sidebar:hover .evps-nav-item { justify-content: flex-start; padding: 10px 12px; } html[data-evps-layout="rail"] .evps-sidebar { transition: none; } /* --- Boxed: centered max-width canvas with side gutters --- */ html[data-evps-layout="boxed"] .evps-app { max-width: 1480px; margin-inline: auto; border-inline: 1px solid var(--evps-border); box-shadow: 0 0 60px rgba(0,0,0,.18); } /* --- Wide: remove inner content max-width caps for big tables/dashboards --- */ html[data-evps-layout="wide"] .evps-content, html[data-evps-layout="wide"] .evps-content > .container, html[data-evps-layout="wide"] .evps-content > .container-fluid { max-width: none; width: 100%; } /* --- Focus: hide the sidebar, center a comfortable reading column --- */ html[data-evps-layout="focus"] .evps-app { grid-template-columns: 0 1fr; } html[data-evps-layout="focus"] .evps-sidebar { display: none; } html[data-evps-layout="focus"] .evps-content { max-width: 1040px; margin-inline: auto; } /* keep the hamburger visible so navigation stays reachable in focus mode */ html[data-evps-layout="focus"] .evps-topbar__hamburger { display: inline-flex; } /* ============================================================================= * LAYOUT MODE endpoints (Feature #4 -- Dynamic Layouts). * * These are the values resolved by ThemePresets::resolveLayoutForContext() * from the admin's chosen layout MODE (Default | Left | Dynamic). They are * distinct from the structural presets above: * * data-evps-layout="left" -> Portal shell: full left sidebar, framed * content column. Modelled on ThemeMetro * "Croster" -- a persistent vertical nav with * a comfortable, capped reading column. * data-evps-layout="default" -> Public/marketing shell: wide, full-bleed * content with the sidebar de-emphasised so * landing/order pages breathe edge-to-edge. * * "Dynamic" mode emits "left" on Client-Portal pages and "default" on public * pages; "Left" mode emits "left" everywhere. All styled below with EVPS-1000X * tokens (glass surfaces, rounded cards, light/dark aware via --evps-* vars). * ============================================================================= */ /* --- LEFT (Croster-style Client Portal) -------------------------------------- * Reinforce the native sidebar grid and give the content a framed, centred * reading column so the portal feels like a focused app, not a full-bleed site. */ html[data-evps-layout="left"] .evps-app { grid-template-columns: var(--evps-sidebar-w, 252px) 1fr; } html[data-evps-layout="left"] .evps-sidebar { display: flex; /* ensure visible even if a public override hid it */ border-right: 1px solid var(--evps-border, #232a39); } /* Framed, capped content column -- the Croster "boxed portal" feel, token-driven */ html[data-evps-layout="left"] .evps-content { max-width: var(--evps-content-max, 1320px); margin-inline: auto; width: 100%; } /* Soft glass header that reads against either light or dark surfaces */ html[data-evps-layout="left"] .evps-topbar { background: color-mix(in srgb, var(--evps-surface, #12161f) 88%, transparent); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--evps-border, #232a39); } /* Collapse to a single column on mobile -- the hamburger drives the off-canvas sidebar, exactly as the native shell does. */ @media (max-width: 768px) { html[data-evps-layout="left"] .evps-app { grid-template-columns: 1fr; } } /* --- DEFAULT (public / marketing, wide & full-bleed) ------------------------- * On public pages we want the content edge-to-edge for big hero/landing/order * sections. We keep the sidebar in the DOM (navigation must stay reachable) but * collapse it to a slim rail so the marketing canvas dominates. The hamburger * stays available so every nav item is still one tap away. */ html[data-evps-layout="default"] .evps-app { grid-template-columns: 0 1fr; } html[data-evps-layout="default"] .evps-sidebar { /* Visually removed on public pages, but still reachable via the topbar hamburger / Cmd-K palette. Width 0 keeps it out of the flow without removing it from the accessibility tree's reachable controls. */ width: 0; min-width: 0; overflow: hidden; border-right: 0; } /* Remove the inner content max-width caps so hero/landing sections go full-bleed */ html[data-evps-layout="default"] .evps-content, html[data-evps-layout="default"] .evps-content > .container, html[data-evps-layout="default"] .evps-content > .container-fluid { max-width: none; width: 100%; } html[data-evps-layout="default"] .evps-page { max-width: none; } /* Keep navigation reachable: hamburger always visible in this mode */ html[data-evps-layout="default"] .evps-topbar__hamburger { display: inline-flex; } /* Translucent header reads well over full-bleed hero imagery */ html[data-evps-layout="default"] .evps-topbar { background: color-mix(in srgb, var(--evps-surface, #12161f) 82%, transparent); -webkit-backdrop-filter: saturate(140%) blur(8px); backdrop-filter: saturate(140%) blur(8px); } @media (max-width: 768px) { html[data-evps-layout="default"] .evps-app { grid-template-columns: 1fr; } } /* Respect reduced-motion: the backdrop-filter is static, but disable any inherited grid transition so a dynamic public<->portal switch is instant. */ @media (prefers-reduced-motion: reduce) { html[data-evps-layout="left"] .evps-app, html[data-evps-layout="default"] .evps-app { transition: none; } }