/* ========================================================================== Layout Utilities ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); } .section { padding: var(--section-padding); position: relative; } /* Subtle noise texture on light sections */ .section::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); background-size: 256px 256px; pointer-events: none; z-index: 0; } .section > * { position: relative; z-index: 1; } .section--dark { background-color: var(--color-primary); color: var(--color-text-light); } .section--alt { background-color: var(--color-surface-alt); } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--40-60 { grid-template-columns: 2fr 3fr; align-items: center; } .flex { display: flex; } .flex--center { align-items: center; justify-content: center; } .flex--between { align-items: center; justify-content: space-between; } .flex--gap-4 { gap: var(--space-4); } .flex--gap-5 { gap: var(--space-5); } .flex--wrap { flex-wrap: wrap; } .text-center { text-align: center; } /* Scroll reveal: hidden states only apply when JS is running (.js on ) */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .js .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } .reveal-delay-5 { transition-delay: 500ms; } .reveal-delay-6 { transition-delay: 600ms; } .reveal-delay-7 { transition-delay: 700ms; } /* Reveal variants */ .js .reveal--slide-left { opacity: 0; transform: translateX(-40px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .js .reveal--slide-right { opacity: 0; transform: translateX(40px); transition: opacity var(--transition-slow), transform var(--transition-slow); } .js .reveal--scale { opacity: 0; transform: scale(0.9); transition: opacity var(--transition-slow), transform var(--transition-slow); } .js .reveal--slide-left.is-visible, .js .reveal--slide-right.is-visible, .js .reveal--scale.is-visible { opacity: 1; transform: none; }