/** * layout_grid.css * * Site-wide layout grid system. * Defines spacing tokens, page container, content grids, stack utilities, * and carousel bleed patterns. * * HOW TO USE GLOBALLY: * Add to the * shared base template (before page-specific stylesheets). * Currently loaded via the discovery_pools.html include. * * DESIGN DECISIONS: * - Variables are defined independently so this file works without * redesign_theme.css (they share the same values; keep in sync). * - "Right-bleed carousel" pattern: left edge aligns with the page * content grid, right edge extends to the viewport edge, hinting * that the user can scroll. Requires overflow-x: clip on . */ /* ================================================================ Tokens ================================================================ */ :root { /* Spacing scale */ --lg-gutter: 18px; /* page edge padding; primary gap between components */ --lg-gutter-sm: 12px; /* card inner padding; secondary gap */ --lg-gutter-xs: 8px; /* tight / inline spacing */ --lg-gutter-lg: 24px; /* looser section-level spacing */ /* Page container */ --lg-max-width: 1120px; /* max content width — mirrors --max in redesign_theme.css */ /* Carousel */ --lg-carousel-bleed: var(--lg-gutter); /* * How much the right-bleed carousel extends past the content area. * Matches the page gutter so the carousel sits flush with the * viewport edge on screens narrower than --lg-max-width. */ } /* ================================================================ Page container ================================================================ .lg-wrap – centered, max-width column with edge gutters. Equivalent to .wrap in redesign_theme.css. Use .wrap on pages that already load redesign_theme.css; use .lg-wrap on new standalone pages. ================================================================ */ .lg-wrap { max-width: var(--lg-max-width); margin-inline: auto; padding-inline: var(--lg-gutter); } /* ================================================================ Content grids ================================================================ All grid variants align to the page's --lg-gutter rhythm so components snap to the same invisible columns across sections. ================================================================ */ /* 12-column base grid */ .lg-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--lg-gutter); row-gap: var(--lg-gutter); } /* Fixed-count grids */ .lg-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lg-gutter); } .lg-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lg-gutter); } .lg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg-gutter); } /* Auto-fill: wraps when columns drop below 280 px */ .lg-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--lg-gutter); } /* Responsive collapse for fixed-count grids */ @media (max-width: 900px) { .lg-grid-3, .lg-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .lg-grid-2, .lg-grid-3, .lg-grid-4 { grid-template-columns: 1fr; } } /* Column-span utilities (children of .lg-grid) */ .lg-col-1 { grid-column: span 1; } .lg-col-2 { grid-column: span 2; } .lg-col-3 { grid-column: span 3; } .lg-col-4 { grid-column: span 4; } .lg-col-6 { grid-column: span 6; } .lg-col-8 { grid-column: span 8; } .lg-col-9 { grid-column: span 9; } .lg-col-12 { grid-column: span 12; } /* ================================================================ Stack (vertical rhythm) ================================================================ */ .lg-stack > * + * { margin-top: var(--lg-gutter); } .lg-stack-sm > * + * { margin-top: var(--lg-gutter-sm); } /* ================================================================ Carousel: right-bleed ================================================================ Pattern: the carousel's left edge aligns with the page content grid; the right edge bleeds to the viewport edge, making partial cards visible and signalling horizontal scrollability. HOW IT WORKS: The carousel container sits inside .wrap / .lg-wrap, which has padding-inline: --lg-gutter on both sides. By adding --lg-carousel-bleed to the width we extend the container into the right gutter, reaching the viewport edge on screens narrower than --lg-max-width. The left gutter is left intact, so the first card stays aligned with all other page content. REQUIREMENTS: 1. body (or a scroll-root ancestor) must have overflow-x: clip to suppress the horizontal scrollbar without creating a new scroll container (which would break position: sticky). 2. The .wrap / .lg-wrap parent must NOT have overflow: hidden. USAGE: Add class="lg-carousel-bleed-right" to the carousel element, or apply the rule directly as done for discovery swipers below. ================================================================ */ .lg-carousel-bleed-right { width: calc(100% + var(--lg-carousel-bleed)); }