/* Sculpt & Doshas — Mobile mode overrides * Activated by setting data-mobile="1" on . * Wraps the site in a phone-like frame and stacks every section. */ body[data-mobile-preview="1"] { background: #d9d3c6; padding: 24px 0; } body[data-mobile-preview="1"] #root { width: 390px; margin: 0 auto; background: var(--bg); border-radius: 36px; box-shadow: 0 0 0 10px #1a1410, 0 0 0 11px #2a2520, 0 30px 60px rgba(0,0,0,.25); overflow: hidden; position: relative; } /* Status bar */ body[data-mobile-preview="1"] #root::before { content: '9:41'; position: sticky; top: 0; z-index: 1000; display: block; background: var(--bg); padding: 14px 28px 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); text-align: left; letter-spacing: -0.02em; } /* ── Generic layout overrides ─────────────────────────────────────── */ /* Single column grids */ body[data-mobile="1"] [style*="grid-template-columns"]:not([data-cols2]), body[data-mobile="1"] [style*="gridTemplateColumns"]:not([data-cols2]) { grid-template-columns: 1fr !important; gap: 24px !important; } body[data-mobile="1"] [style*="display: grid"]:not([data-cols2]), body[data-mobile="1"] [style*="display:grid"]:not([data-cols2]) { grid-template-columns: 1fr !important; } body[data-mobile="1"] [data-cols2] { grid-template-columns: repeat(2, 1fr) !important; } /* Flex rows that wrap */ body[data-mobile="1"] [style*="flex-wrap: wrap"] { gap: 16px !important; } /* Section padding compaction */ body[data-mobile="1"] section:not([data-bleed]) { padding: 36px 20px !important; } body[data-mobile="1"] section:not([data-bleed]) > div { max-width: 100% !important; } /* Hero */ body[data-mobile="1"] section[id="hero"], body[data-mobile="1"] section:first-of-type { padding: 0 !important; } body[data-mobile="1"] section h1, body[data-mobile="1"] section [class*="font-display"]:not([data-fit]) { font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.08 !important; } /* Headings */ body[data-mobile="1"] h1 { font-size: 36px !important; } body[data-mobile="1"] h2 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.1 !important; } body[data-mobile="1"] h3 { font-size: 18px !important; } /* Force flex columns where flex was a row */ body[data-mobile="1"] [style*="display: flex"][style*="justify-content: space-between"]:not([style*="align-items: center"]) { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } /* Images full-width */ body[data-mobile="1"] section img { max-width: 100%; } /* Stats band */ body[data-mobile="1"] section[style*="grid-template-columns: repeat(4"] > div, body[data-mobile="1"] [style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } /* Filter pill row should still scroll horizontally */ body[data-mobile="1"] [style*="border-bottom: 1px solid"][style*="display: flex"] { overflow-x: auto !important; overflow-y: hidden !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body[data-mobile="1"] [style*="border-bottom: 1px solid"][style*="display: flex"]::-webkit-scrollbar { display: none; } /* Hide complex desktop nav, swap with hamburger only */ body[data-mobile="1"] header nav { display: none !important; } /* Mobile header */ body[data-mobile="1"] header { padding: 14px 20px !important; } /* Hide custom cursor in mobile mode */ body[data-mobile="1"] .lbh-cursor, body[data-mobile="1"] .lbh-cursor-dot { display: none !important; } /* Tweaks panel still floats outside the frame */ body[data-mobile="1"] [data-tweaks-panel] { position: fixed !important; } /* Carousel cards visible count → 1.2 on mobile */ body[data-mobile="1"] [style*="gridAutoColumns"], body[data-mobile="1"] [style*="grid-auto-columns"] { grid-auto-columns: 78% !important; } /* Marquee speed */ body[data-mobile="1"] .marquee-track { animation-duration: 24s !important; gap: 2.5rem !important; } /* Reduce all big font sizes that use clamp 4.5vw — recompute */ body[data-mobile="1"] [style*="clamp(32px, 4.5vw, 64px)"], body[data-mobile="1"] [style*="clamp(32px, 4.4vw, 60px)"], body[data-mobile="1"] [style*="clamp(28px, 3.6vw, 44px)"], body[data-mobile="1"] [style*="clamp(28px, 3.2vw, 40px)"], body[data-mobile="1"] [style*="clamp(24px, 3.2vw, 40px)"] { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.01em !important; } /* Min-height busts */ body[data-mobile="1"] section[style*="min-height: 720"], body[data-mobile="1"] section[style*="height: 720"] { min-height: 0 !important; height: auto !important; } body[data-mobile="1"] [style*="min-height: 720"] { min-height: 0 !important; } /* Footer columns → stack */ body[data-mobile="1"] footer { padding: 36px 20px 24px !important; } /* Padding on intermediate divs that have large horizontal padding */ body[data-mobile="1"] [style*="padding: 75px 80px"], body[data-mobile="1"] [style*="padding: 63px 80px"], body[data-mobile="1"] [style*="padding: 50px 80px"], body[data-mobile="1"] [style*="padding: 50px 40px"], body[data-mobile="1"] [style*="padding: 60px 40px"], body[data-mobile="1"] [style*="padding: 80px 40px"] { padding: 36px 20px !important; } /* Center column-style items */ body[data-mobile="1"] [style*="max-width: 1320"], body[data-mobile="1"] [style*="max-width: 1240"], body[data-mobile="1"] [style*="max-width: 1100"], body[data-mobile="1"] [style*="max-width: 1500"] { max-width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Sticky elements unstick */ body[data-mobile="1"] [style*="position: sticky"] { position: relative !important; } /* Carousel inner padding */ body[data-mobile="1"] [style*="padding: '0 56px'"], body[data-mobile="1"] [style*="padding:'0 56px'"] { padding: 0 16px !important; } /* Trio premium / showcase huge elements */ body[data-mobile="1"] [style*="aspectRatio: '4/5'"] [style*="aspect-ratio: 4 / 5"], body[data-mobile="1"] [style*="aspect-ratio:4/5"] { aspect-ratio: 1 / 1 !important; }