/* ========================================================================== layout.css — Page scaffolding & structural regions Levii Portal · Layout Base / Phase 2 ========================================================================== */ body { display: flex; flex-direction: column; min-height: 100dvh; /* `clip` prevents horizontal overflow WITHOUT turning into a scroll container — `overflow-x: hidden` would, which breaks/clips the sticky nav while scrolling on mobile (cut-off pill + shadow). */ overflow-x: clip; } main { flex: 1 0 auto; width: 100%; } /* Anchor targets clear the sticky nav. */ :where(section, article)[id] { scroll-margin-top: calc(var(--nav-height) + 1rem); } /* ---- Ambient page background ----------------------------------------- */ .page-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); overflow: hidden; } .page-bg::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 90vh; background: var(--gradient-aurora); filter: blur(60px); opacity: 0.9; animation: aurora-drift 24s var(--ease-in-out) infinite; } .page-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient( circle at 1px 1px, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 0 ); background-size: 36px 36px; opacity: 0.5; mask-image: radial-gradient(70% 60% at 50% 0%, #000 0%, transparent 75%); } /* ---- Split & bento layouts ------------------------------------------- */ .split { display: grid; gap: var(--space-2xl); align-items: center; grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: -1; } .bento { display: grid; gap: var(--space-md); grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(180px, auto); } .bento__cell { grid-column: span 2; } .bento__cell--wide { grid-column: span 4; } .bento__cell--full { grid-column: span 6; } .bento__cell--tall { grid-row: span 2; } /* ---- Stats strip ------------------------------------------------------ */ .stats { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; } .stat__value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 850; line-height: 1; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { margin-top: var(--space-2xs); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; } /* ---- Logo cloud / trust bar ------------------------------------------ */ .logo-cloud { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-2xl); align-items: center; justify-content: center; opacity: 0.72; } .logo-cloud img, .logo-cloud svg { height: 26px; width: auto; filter: grayscale(1); opacity: 0.8; } /* ---- CTA band --------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; border-radius: var(--radius-2xl); padding: clamp(2.5rem, 6vw, 5rem); text-align: center; color: #fff; background: var(--gradient-brand); background-size: 200% 200%; box-shadow: var(--shadow-xl); } .cta-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% -10%, rgba(255, 255, 255, 0.35), transparent 60%); pointer-events: none; } .cta-band > * { position: relative; } .cta-band h2 { color: #fff; } .cta-band .lead { color: rgba(255, 255, 255, 0.9); } /* ---- Consent banner (injected by analytics.js) ----------------------- */ .consent { position: fixed; left: 50%; bottom: var(--space-md); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); width: min(680px, calc(100% - 2 * var(--gutter))); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-xl); background: var(--glass-bg); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl); animation: fade-up var(--dur-slow) var(--ease-out) both; } .consent p { flex: 1 1 240px; font-size: var(--text-sm); color: var(--text-secondary); margin: 0; } .consent a { text-decoration: underline; text-underline-offset: 2px; } .consent__actions { display: flex; gap: var(--space-2xs); }