/* ============================================================ base.css — Foundation Responsive Styles Part of Mosaiq Studio Mobile Responsive Hardening (Gap J) Contents: 1. Breakpoint CSS custom properties (scoped to [data-responsive-viewport]) 2. Container max-widths at each breakpoint 3. Responsive grid columns (12 MD+, 6 SM, 4 XS) 4. Bottom margin/padding stack for mobile vertical rhythm 5. Safe-area padding for notch / rounded corners devices 6. Overlay default (hidden) state 7. Drawer default (off-screen) state 8. Table-responsive horizontal scrolling 9. Main content responsive padding All responsive layout styles are scoped via [data-responsive-viewport] attribute selector on , matching viewport-manager.js hook values: XS <576px, SM 576-767px, MD 768-991px, LG 992-1199px, XL >=1200px ============================================================ */ /* ═══════════════════════════════════════════════════════════════════════ 1. BREAKPOINT CSS CUSTOM PROPERTIES Defined on [data-responsive-viewport] so they cascade to all children only when the attribute is present. viewport-manager.js sets the attribute on . ═══════════════════════════════════════════════════════════════════════ */ [data-responsive-viewport] { --bp-xs: 576px; --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; } /* ═══════════════════════════════════════════════════════════════════════ 2. CONTAINER MAX-WIDTHS AT EACH BREAKPOINT Content containers (main, .container, [class*="container"]) get capped widths proportional to the viewport size. ═══════════════════════════════════════════════════════════════════════ */ [data-responsive-viewport="XS"] main, [data-responsive-viewport="XS"] .container, [data-responsive-viewport="XS"] [class*="container"] { max-width: 100%; } [data-responsive-viewport="SM"] main, [data-responsive-viewport="SM"] .container, [data-responsive-viewport="SM"] [class*="container"] { max-width: 540px; } [data-responsive-viewport="MD"] main, [data-responsive-viewport="MD"] .container, [data-responsive-viewport="MD"] [class*="container"] { max-width: 720px; } [data-responsive-viewport="LG"] main, [data-responsive-viewport="LG"] .container, [data-responsive-viewport="LG"] [class*="container"] { max-width: 960px; } [data-responsive-viewport="XL"] main, [data-responsive-viewport="XL"] .container, [data-responsive-viewport="XL"] [class*="container"] { max-width: 1140px; } /* ═══════════════════════════════════════════════════════════════════════ 3. RESPONSIVE GRID COLUMNS Default grid system: 12 columns on MD+, 6 columns on SM, 4 columns on XS. Use .responsive-grid on any container that should follow the breakpoint column counts. ═══════════════════════════════════════════════════════════════════════ */ .responsive-grid { display: grid; gap: 16px; } /* XS: 4 columns — tightest grid for smallest screens */ [data-responsive-viewport="XS"] .responsive-grid { grid-template-columns: repeat(4, 1fr); } /* SM: 6 columns — moderate density on small tablets */ [data-responsive-viewport="SM"] .responsive-grid { grid-template-columns: repeat(6, 1fr); } /* MD, LG, XL: 12 columns — full desktop grid */ [data-responsive-viewport="MD"] .responsive-grid, [data-responsive-viewport="LG"] .responsive-grid, [data-responsive-viewport="XL"] .responsive-grid { grid-template-columns: repeat(12, 1fr); } /* ═══════════════════════════════════════════════════════════════════════ 4. BOTTOM MARGIN / PADDING STACK (Mobile Vertical Rhythm) Consistent spacing between vertically stacked elements on narrow viewports. Applied via .v-stack on a container whose direct children should be spaced uniformly. ═══════════════════════════════════════════════════════════════════════ */ [data-responsive-viewport] .v-stack > * + * { margin-top: 16px; } /* Tighter stack for dense lists (e.g. chat messages, ticket items) */ [data-responsive-viewport] .v-stack--dense > * + * { margin-top: 8px; } /* Loose stack for card-like items */ [data-responsive-viewport] .v-stack--loose > * + * { margin-top: 24px; } /* Container padding with consistent bottom rhythm */ [data-responsive-viewport="XS"] main, [data-responsive-viewport="SM"] main { padding-bottom: 48px; } [data-responsive-viewport="XS"] .v-stack, [data-responsive-viewport="SM"] .v-stack { padding-bottom: 16px; } /* ------------------------------------------------------------------ 5. SAFE-AREA PADDING Respects iOS notch, Dynamic Island, and rounded corners. Applied to body so content avoids hardware insets. ------------------------------------------------------------------ */ body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); } /* ------------------------------------------------------------------ 6. SAFE-AREA TOOLBAR SUPPORT The toolbar element gets extra padding on devices with a top safe-area (notch / Dynamic Island). ------------------------------------------------------------------ */ @supports (padding: env(safe-area-inset-top)) { .toolbar-new { padding-top: env(safe-area-inset-top, 0px); } } /* ------------------------------------------------------------------ 7. FOUC COMPLEMENT Hide hamburger and more-overflow buttons by default. These are toggled visible by viewport-manager.js after the JavaScript event loop initialises and determines the current viewport size. Matches the inline style block in base.html so there is no flash before the external stylesheet loads. ------------------------------------------------------------------ */ .hamburger__button, .more-overflow__button { display: none !important; } /* ------------------------------------------------------------------ 7. OVERLAY DEFAULT STATE Overlay is hidden until user opens the navigation drawer. Visibility + opacity are used (rather than display) to allow CSS transitions between states. ------------------------------------------------------------------ */ .hamburger__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--rh-overlay-z-index, 2000); background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity var(--rh-transition-collapse, 150ms ease-in), visibility var(--rh-transition-collapse, 150ms ease-in); } /* ------------------------------------------------------------------ 8. DRAWER DEFAULT STATE Navigation drawer sits off-screen to the left and only slides in when the hamburger menu is activated. ------------------------------------------------------------------ */ .hamburger__drawer { position: fixed; top: 0; left: 0; width: var(--rh-drawer-width-sm, 320px); height: 100%; z-index: var(--rh-drawer-z-index, 2100); background: var(--rh-drawer-bg, #fff); box-shadow: var(--rh-drawer-shadow, 0 0 12px rgba(0, 0, 0, 0.15)); transform: translateX(-100%); transition: transform var(--rh-transition-collapse, 150ms ease-in); overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); } /* ------------------------------------------------------------------ 9. TABLE-RESPONSIVE Wrapping container for tables that may overflow the viewport on small screens. Touch-scroll is enabled via the vendor prefixed property for iOS Safari compatibility. ------------------------------------------------------------------ */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; } .table-responsive > table { margin-bottom: 0; min-width: max-content; } /* ------------------------------------------------------------------ 10. MAIN CONTENT RESPONSIVE PADDING Default desktop padding shrinks on viewports narrower than the SM breakpoint (640px) to reclaim horizontal space. ------------------------------------------------------------------ */ main { padding: 76px 24px 48px; } #main-content { scroll-margin-top: 60px; } /* Mobile (<=640px) — tighten main padding */ @media (max-width: 640px) { main { padding: 68px 16px 16px; } }