/* ============================================================ Kaleo Arts — Shared v3 stylesheet The "stage-lit editorial" system extracted from index-v3.html ============================================================ */ :root { /* Stage-dark palette pulled from the photos */ --stage: oklch(11% 0.018 260); --stage-2: oklch(15% 0.02 260); --stage-3: oklch(19% 0.022 260); --rule: oklch(28% 0.02 260); --cream: oklch(96% 0.015 82); --cream-mute: oklch(82% 0.02 78); --cream-fade: oklch(62% 0.02 260); --amber: oklch(75% 0.15 68); --amber-hot: oklch(68% 0.18 55); --bright: oklch(94% 0.028 82); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background: var(--stage); /* Belt-and-suspenders horizontal overflow lock. body: overflow-x hidden alone lets some browsers still report scrollWidth > innerW on the element (from transformed/scaled descendants like .hero-img with hero-drift, or the ticker's duplicated content), which causes iOS momentum touch to rubber-band horizontally — the "slight pan left/right as I scroll" the user described. Clamping too eliminates the horizontal scroll region entirely. */ overflow-x: hidden; /* Also lock the width so no descendant can push the html box wider. */ max-width: 100%; } body { background: var(--stage); color: var(--cream); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; max-width: 100%; font-weight: 400; } a { color: inherit; text-decoration: none; } em { font-style: italic; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } .wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; position: relative; } .wrap-lg { max-width: 1600px; margin: 0 auto; padding: 0 40px; position: relative; } /* ==================== NAV ==================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 20px 0; background: oklch(11% 0.018 260 / 0.7); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid oklch(28% 0.02 260 / 0.6); transition: padding .3s, background .3s; } .nav.compact { padding: 12px 0; } .nav-inner { max-width: 1600px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-logo { font-family: 'DM Serif Display', serif; font-weight: 400; font-size: 26px; letter-spacing: -0.025em; color: var(--cream); display: inline-flex; align-items: center; gap: 10px; line-height: 1; } .nav-logo em { font-style: italic; color: var(--amber); font-weight: 400; } .nav-logo .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 4px; box-shadow: 0 0 12px var(--amber); } .nav-logo-mark { display: block; height: 32px; width: auto; filter: drop-shadow(0 2px 12px oklch(75% 0.15 68 / 0.25)); transition: height .3s, transform .3s; } .nav.compact .nav-logo-mark { height: 26px; } .nav-links { display: flex; gap: 26px; font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 400; color: var(--cream-mute); align-items: center; } .nav-links a { transition: color .2s; position: relative; } .nav-links a:hover { color: var(--amber); } .nav-links a.current { color: var(--cream); } /* Underline: grows L→R on enter, exits L→R on leave (origin flips from right → left on hover). Skip the Enroll CTA. */ .nav-links a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .nav-links a:not(.nav-cta):hover::after, .nav-links a.current:not(.nav-cta)::after { transform: scaleX(1); transform-origin: left; } .nav-cta { padding: 10px 18px; background: var(--amber); color: var(--stage) !important; border-radius: 100px; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; transition: all .2s; } .nav-cta:hover { background: var(--cream); } .nav-cta.current::after { display: none; } /* ---------- Mobile hamburger + drawer ---------- */ .nav-burger { display: none; /* hidden on desktop; shown below 960px */ background: transparent; border: 0; padding: 12px; cursor: pointer; width: 48px; height: 48px; /* Fixed positioning so it can sit above the drawer (z:70) while the drawer covers the full viewport. The burger lives as a sibling of