/* ─── Smooth Scroll Wrapper ─── */ /* Default: natural scroll (works without ScrollSmoother) */ #smooth-wrapper { overflow-x: hidden; width: 100%; } #smooth-content { width: 100%; } /* ScrollSmoother active: JS adds .ss-active to */ html.ss-active #smooth-wrapper { overflow: hidden; position: fixed; top: 0; left: 0; height: 100%; } /* ─── Base Body ─── */ body { background: var(--bg-void); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); overflow-x: hidden; } /* ─── Container ─── */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-8); } .container--wide { max-width: 1440px; } .container--narrow { max-width: 900px; } /* ─── Section Base ─── */ section { position: relative; overflow: hidden; } /* ─── Grid ─── */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } /* ─── Flex Helpers ─── */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--space-2); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* ─── Section Padding ─── */ .section-pad { padding: var(--space-32) 0; } .section-pad--lg { padding: calc(var(--space-32) * 1.5) 0; } /* ─── Responsive ─── */ @media (max-width: 1024px) { .container { padding: 0 var(--space-6); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 0 var(--space-4); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section-pad { padding: var(--space-20) 0; } .section-pad--lg { padding: var(--space-24) 0; } }