/* =========================================================================== v2/page.css — the page shell + canonical layered layout. NO variables. Two styles: .dark and .light. LAYERING (the layout the page DEFAULTS to): .page (body canvas, darkest) -> .page-wrapper (transparent flex column) -> .panel-inner-recessed (the recessed content surface where content lives) The recessed panel auto-themes from the .page.dark / .page.light ancestor, so the fleet markup (
) works with no extra class. =========================================================================== */ /* structure — same in every style. No outer padding on the canvas: the inset comes from .page-wrapper (margin 5px + padding 10px), matching the v2 reference. (A stray padding:24px here was never part of the design — it pushed the whole shell in on apps that put class="page" on , e.g. galen/tickets.) */ .page { min-height: 100vh; margin: 0; padding: 0; font-family: 'Montserrat', system-ui, sans-serif; } /* ---- DARK style — page is the DARKEST shade; panels lift up from here ----- */ .page.dark { background: #262626; color: #e0e0e0; } /* ---- LIGHT style — page is off-white; panels brighten to pure white ------- */ .page.light { background: #f5f5f5; color: #2a2a2a; } /* =========================================================================== PAGE SHELL — canonical layout primitives (drop-in compatible class names). =========================================================================== */ /* transparent flex column under the canvas — the canvas shows through it */ .page-wrapper { margin: 5px; padding: 10px; display: flex; flex-direction: column; gap: 10px; } .page-wrapper > main { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* the recessed content surface — the DEFAULT place page content lives */ .panel-inner-recessed { margin: 0; padding: 15px; flex: 1; border-radius: 5px; } .page.dark .panel-inner-recessed { background: #2e2e2e; border: 1px solid #000000; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); } .page.light .panel-inner-recessed { background: #ffffff; border: 1px solid #cfcfcf; box-shadow: inset 0 0 10px rgba(0,0,0,0.08); } /* in-page title row (h1 left) */ .page-title { font-size: 18px; font-weight: 300; margin: 0; padding: 0 5px; letter-spacing: 0.5px; } .page.dark .page-title { color: #e0e0e0; } .page.light .page-title { color: #2a2a2a; } /* copyright / footer strip */ .body-footer { text-align: center; font-size: 11px; padding: 8px 0; } .page.dark .body-footer { color: #a0a0a0; } .page.light .body-footer { color: #666666; }