/* Layout Modes - Flexible Viewport Width System */ /* Allows specific pages to use wider or narrower layouts */ /* Usage in templates: - Add data-layout="wide" to tag for 90% viewport width - Add data-layout="ultra-wide" to tag for 95% viewport width - Add data-layout="full" to tag for 98% viewport width - Default (no attribute) uses 1400px max-width */ /* Wide Layout - 90% viewport width */ body[data-layout="wide"] .header-content, body[data-layout="wide"] .main-content { max-width: 90vw; } /* Ultra-Wide Layout - 95% viewport width */ body[data-layout="ultra-wide"] .header-content, body[data-layout="ultra-wide"] .main-content { max-width: 95vw; } /* Full Layout - 98% viewport width (almost edge-to-edge) */ body[data-layout="full"] .header-content, body[data-layout="full"] .main-content { max-width: 98vw; } /* Narrow Layout - Reduce to 1200px for focused reading */ body[data-layout="narrow"] .header-content, body[data-layout="narrow"] .main-content { max-width: 1200px; } /* Extra Narrow Layout - 1000px for article/document reading */ body[data-layout="extra-narrow"] .header-content, body[data-layout="extra-narrow"] .main-content { max-width: 1000px; } /* Utility classes for individual sections that need different widths */ .container-wide { max-width: 90vw !important; margin: 0 auto; } .container-ultra-wide { max-width: 95vw !important; margin: 0 auto; } .container-full { max-width: 98vw !important; margin: 0 auto; } /* Responsive adjustments */ @media (max-width: 768px) { /* On mobile, all layouts use full width minus padding */ body[data-layout="wide"] .header-content, body[data-layout="wide"] .main-content, body[data-layout="ultra-wide"] .header-content, body[data-layout="ultra-wide"] .main-content, body[data-layout="full"] .header-content, body[data-layout="full"] .main-content { max-width: 100%; padding-left: var(--space-4); padding-right: var(--space-4); } }