/* Cypher Ai — phone override layer. Loaded only on the /m/ mirrors, last in . Same visual identity (fonts, colors, radii, copy, order) but tuned for the phone screen: single-column, larger tap targets, softer heavy loops, lazy images, and a sticky Book-Consultation action. */ /* ---- Layout: stack multi-column grids, keep identity ---- */ @media (max-width: 809.98px) { /* Process, whatwedo orbit, antimetal features, solutions panels, footer grids — collapse to single column without touching type or palette. */ .rl-globe__grid-layout, .wwd-grid-layout, .am-features-grid, .am-how-grid, .rl-process__grid, .ssr-variant [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Globe: reduce canvas scale on phones to free GPU and data more evenly */ #rl-globe-canvas { width: 100% !important; max-height: 52vh; } /* Hero H1: the two heading rows (text + pill + text) measure 428px/728px at Framer's 44px phone font and clip mid-letter on phone screens. The pills are fixed-size, so the font must cover them too: 5vw keeps the widest row inside the viewport with margins across 390-809px (verified 19.5px @390, 27px @539, 40px @809). Same family, weight, color. */ #hero h1.framer-styles-preset-wd4756 { --framer-font-size: clamp(16px, 5vw, 44px) !important; } /* Solutions: the desktop horizontal pin is mobile-gated in JS, but ensure no pin spacer bleeds a gap on phones. Panels 2-5 keep their SSR dimmed state (opacity .28, translateY 34px) because the desktop scrub never runs on phones — normalize them so every panel heading reads normally. */ #rl-solutions { height: auto !important; min-height: 0 !important; } #rl-solutions [data-htext] { opacity: 1 !important; transform: none !important; } #rl-solutions [data-imagemask] { clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%) !important; } /* The native #intro section was replaced by the injected intro2 section (inject.js) but never actually hidden — it renders as a blank cream viewport-height stretch. Superseded content: hide on phones. */ #intro { display: none !important; } /* Framer's editor affordance (draggable 30px pencil circle, fixed right edge) — authoring tool, not site content. Same spirit as the export's own hide-block for the Framer badge/CTA. */ #__framer-editorbar-container, #__framer-editorbar, #__framer-editorbar-button { display: none !important; } /* WhatWeDo mobile: the orbit wrap's margin-top:auto absorbed ALL leftover 100svh space (dead band between text and orbit). Reclaim it: tighter paddings, shorter uniform desc block (uniform height keeps the % scroll math correct), hide the stray arrow glyph, slightly larger orbit. */ .wwd-mobile { position: sticky !important; top: 0 !important; height: 100svh !important; padding: 4.25rem 1.25rem 1.25rem !important; } .wwd-mobile__title { margin-top: 0.75rem !important; } .wwd-mobile__arrow { display: none !important; } .wwd-mobile__desc, .wwd-mobile__desc-item { height: 110px !important; } /* Balance the leftover 100svh space: two auto margins split it evenly above the card row and between row and orbit (instead of pooling it all between text and orbit), and the orbit grows past the old 380px cap to use the space. */ .wwd-mobile__row { margin-top: auto !important; padding-top: 1rem; } .wwd-mobile__orbit-wrap { margin-top: auto !important; padding-bottom: 0.5rem !important; } .wwd-orbit--mobile { width: min(84vw, 46svh) !important; } /* Footer CTA: the phone variant stretches the translucent outer pill to 100% width while the inner black button stays min-content (nested misaligned pills). Make the inner button fill the pill — one clean full-width CTA. */ .framer-qqegc2 { width: 100% !important; } .framer-qqegc2 .framer-1610r1m-container { width: 100% !important; } .framer-qqegc2 a { width: 100% !important; justify-content: center !important; } /* About: 6-card grid → 1 column */ .cypher-about-grid { grid-template-columns: 1fr !important; } /* Header/nav: slightly more breathing room for thumbs */ .m-menu-row, .framer-menu { gap: 10px !important; } /* Tap targets: FAQ rows, modal cards, pills, socials, spinner controls at least 44px without changing copy or hit style. */ summary, [role="button"], .rl-chip, .framer-1w5wt8r, .cypher-social-link, .am-ticker-icon, .wwd-orbit__content button { min-height: 44px; display: inline-flex; align-items: center; } /* Sticky phone CTA (opt-in via body class, JS adds it once phone.css loads) */ .m-sticky { position: fixed; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; display: flex; gap: 10px; font-size: 15px; } .m-sticky a { flex: 1; text-align: center; min-height: 54px; line-height: 54px; border-radius: 16px; font-weight: 800; text-decoration: none; } .m-sticky .m-sticky-call { flex: 0 0 30%; background: #141417; border: 1px solid rgba(255, 255, 255, 0.09); color: #f5f4f0; } .m-sticky .m-sticky-book { background: linear-gradient(135deg, #00ffa3, #00e5ff); color: #03110b; } /* Above-fold images: keep eager; below-fold will be lazy-assigned by JS. */ /* No font swaps — same Inter/Instrument Serif, same weights. */ } @media (prefers-reduced-motion: reduce) { .wwd-orbit__glow, .am-spinner__ring, .am-pixel-veil { animation: none !important; } }