/* ============================================================ MOBILE ONLY Loaded with media="(max-width: 768px)" from app.html and login.html, so no rule in this file ever reaches a screen wider than 768px. Desktop and monitor layouts live in theme.css and are not changed from here. ============================================================ */ /* ---------------- Shell ---------------- */ /* The sign-in page's also carries .app, so every shell rule here is pinned to the app itself (#rmApp) and the page that holds it. */ html:has(#rmApp),html:has(#rmApp) body{height:100%;overflow:hidden;overscroll-behavior:none} body{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* The page fills the whole screen. The logo card and menu tile float over its top edge (they are the desktop sidebar's logo card and icon), and the page runs on down behind Safari's toolbar. --m-top the height the floating cards cover, kept clear by each view. --m-under how far the page runs behind the browser's bottom toolbar: the large viewport (lvh) less the visible one (dvh). Content stops above it; only the background carries on underneath. */ #rmApp{--m-top:calc(64px + env(safe-area-inset-top));--m-under:calc(100lvh - 100dvh); flex-direction:column;height:100vh;height:100dvh;height:100lvh;padding:0;gap:0;position:relative} @supports not (height:100lvh){#rmApp{--m-under:0px}} .m-topbar{display:flex;align-items:flex-start;justify-content:flex-start; position:absolute;top:0;left:0;right:0;z-index:40;pointer-events:none; padding:0;background:none;border:none} .m-topbar > *{pointer-events:auto} /* Card one, as on desktop: touches the top and left edges, so only its bottom-right corner (the one inside the app) is rounded. It is also the menu control: tapping the logo opens the sidebar. */ .m-brand{display:flex;align-items:center;margin:0;cursor:pointer; font:inherit;color:inherit;text-align:left;-webkit-appearance:none;appearance:none; transition:background .15s,transform .15s cubic-bezier(.2,.7,.3,1);transform-origin:top left; padding:calc(12px + env(safe-area-inset-top)) 18px 12px max(16px,env(safe-area-inset-left)); /* Page content scrolls underneath, so the glass sits on a mostly solid base of the page colour and the logo stays crisp over it. */ background:linear-gradient(var(--side-panel),var(--side-panel)),color-mix(in srgb,var(--hero-bg) 78%,transparent); -webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%); border:1px solid var(--side-panel-border);border-top:none;border-left:none; border-radius:0 0 var(--side-round) 0;box-shadow:var(--side-panel-shadow)} .m-brand .m-logo{height:38px;width:auto;margin-right:0} .m-brand:active{background:var(--hover2);transform:scale(.97)} .m-brand:focus-visible{outline:2px solid var(--accent);outline-offset:-4px} /* The main pane runs edge to edge, top of the screen to the bottom. */ .main{flex:1;min-height:0;height:100%;align-self:stretch;margin:0;border:none;border-radius:0} /* Each view's scroller fills the whole pane and carries the clearance as padding inside it: content starts below the floating logo card and ends above the browser's toolbar, but scrolls right to both edges, passing under the logo rather than being cut off in a band beside it. Only the logo card stays pinned in the corner. */ .view > .scroll{padding-top:calc(var(--m-top) + 20px); padding-bottom:calc(96px + env(safe-area-inset-bottom) + var(--m-under))} .view > .lbody{padding-top:var(--m-top); padding-bottom:calc(88px + env(safe-area-inset-bottom) + var(--m-under))} .view > .crm-section,.view > .leads-section{padding-top:var(--m-top); padding-bottom:calc(88px + env(safe-area-inset-bottom) + var(--m-under))} /* ---------------- Sidebar as a slide-out drawer ---------------- The desktop sidebar, moved: its two cards keep their gap, curves and edges. Each card is painted over the shell colour so it reads exactly as it does on desktop, while the gap between them shows the dimmed page. */ .side,.side.off{position:fixed;top:0;bottom:0;left:0;z-index:90; width:min(84vw,300px);min-width:0;padding:0;background:none; transform:translateX(-105%);visibility:hidden; transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s} .app.m-nav-open .side{transform:none;visibility:visible; transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s} .side .wshead,.side .sidebody{background:linear-gradient(var(--side-panel),var(--side-panel)),var(--bg)} .side .wshead,.side.off .wshead{padding-top:calc(16px + env(safe-area-inset-top))} .side .sidebody{padding-bottom:max(12px,env(safe-area-inset-bottom))} /* The desktop collapse control has no meaning in a drawer; always show the full, labelled menu even if the rail was collapsed on a desktop. */ .side .wstoggle,.side .chip,.side.off .chip{display:none} .side.off .wshead{flex-direction:row;gap:9px;padding-right:14px;padding-bottom:16px;padding-left:16px} .side.off .sidebody{padding:12px 0;align-items:stretch} .side.off .wslogo.light{display:block} .side.off .wslogo.dark{display:none} .app.dark .side.off .wslogo.light{display:none} .app.dark .side.off .wslogo.dark{display:block} .side.off .navwrap{padding:0 10px;align-items:stretch} .side.off .navbtn{width:100%;justify-content:flex-start;padding:12px 12px;gap:12px;font-size:15.5px} .side.off .seclabel{display:flex} .side.off .recnav{display:flex} .side.off .recempty{display:block} .side.off .sidefoot{display:block} .side.off .settingsrow{justify-content:flex-start} .side.off .settingsrow .themelabel{font-size:15px;gap:10px} .side.off .rm-pill{display:inline-flex} /* Finger-sized rows in the drawer. */ .side .navbtn{padding:12px 12px;gap:12px;font-size:15.5px} .side .navbtn .rm-pill{margin-left:auto} .side .recbtn{padding:11px 44px 11px 14px;font-size:15px} .side .recdel{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);width:34px;height:34px;right:4px} .side .settingsrow,.side .themerow{padding:11px 8px} .side .themelabel{font-size:15px} .side .secplus{padding:8px;margin-right:-6px} .m-backdrop{display:block;position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.45); opacity:0;pointer-events:none;transition:opacity .24s ease} .app.m-nav-open .m-backdrop{opacity:1;pointer-events:auto} /* ---------------- Home ---------------- */ .scroll{padding:28px 16px calc(96px + env(safe-area-inset-bottom));align-items:flex-start} /* Centred when it fits, top-aligned when it does not: centring with align-items pushes the top of a taller hub (the logo) out of reach. */ .view[data-view-pane="home"] .scroll{align-items:flex-start} .view[data-view-pane="home"] .hub{margin:auto 0} /* The hero scales with the screen's height as well as its width, so on a tall phone it fills the page instead of sitting small in the middle with empty bands above and below. Each clamp keeps small phones as they were and stops growth on the tallest. */ .heromark{width:clamp(64px,13dvh,124px);margin-bottom:clamp(4px,1.4dvh,14px)} /* Two lines reserved so the typed headline does not shift the page as it grows from one line to two. */ .htitle{white-space:normal;font-size:clamp(26px,min(9.4vw,5.4dvh),46px);min-height:2.1em; display:flex;align-items:center;justify-content:center;flex-wrap:nowrap} /* mobile.js wraps the typed text and caret in one line box, so the caret follows the last letter and the pair is centred as a single item. */ .m-htitle-line{display:block;min-width:0;text-align:center} .sub{margin-top:clamp(8px,1.6dvh,16px);font-size:clamp(14.5px,1.95dvh,16.5px);line-height:1.5;max-width:34ch} /* Search bar: one line, as on desktop. theme.css wraps it onto three rows below 720px; that is undone here for phones. */ .sbar{height:clamp(54px,7dvh,62px);margin-top:clamp(20px,4.2dvh,40px);flex-wrap:nowrap;align-items:center;border-radius:999px; padding:0 6px 0 14px;gap:8px} .sbar .iconbtn{width:20px;height:20px;align-self:center} .sbar .iconbtn .ic{width:18px;height:18px} .sfield{flex:1 1 0} .sinput,.sinput.loc{flex:1 1 0;min-width:0;padding-left:0;font-size:16px;text-overflow:ellipsis} .sghost{font-size:16px;overflow:hidden} .sdiv{display:block;height:22px} .sbar .go{width:clamp(42px,5.4dvh,48px);height:clamp(42px,5.4dvh,48px);align-self:center} .poplabel{margin-top:clamp(28px,6.6dvh,64px)} /* On taller phones the centred chips stay clear of the Jarvis orb in the corner, so the home page needs less room held back at the bottom and the hero sits evenly between the logo and the bottom edge. */ @media (min-height:740px){ .view[data-view-pane="home"] > .scroll{padding-bottom:calc(36px + env(safe-area-inset-bottom) + var(--m-under))} } .chips{margin-top:clamp(14px,2.4dvh,22px);max-width:100%;gap:clamp(8px,1.4dvh,12px)} .chipbtn{padding:clamp(10px,1.5dvh,13px) 16px;font-size:clamp(14px,1.9dvh,15.5px);max-width:100%} /* ---------------- Corner dock / Jarvis ---------------- */ .rm-dock{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))} /* The page behind the app. Nothing painted it, so anything that moved the app (the keyboard sliding the page up, an overscroll bounce) showed white. */ /* The page colour (--hero-bg), matching the views and Safari's own bars (see mobile.js), so nothing around the page shows as a band. */ html:has(#rmApp),html:has(#rmApp) body{background:#f7f5ef} html:has(#rmApp.dark),html:has(#rmApp.dark) body{background:#050505} /* Dark mode reads darker on phones: the page drops from #0d0d0d and the dot grid dims to match. Still a shade above --bg (#000) so pane corners show. */ .app.dark{--hero-bg:#050505;--hero-dot:#161616} /* Keyboard open (mobile.js sets these): the dock sits just above the keyboard and the Jarvis panel fits the space that is left. The orb steps aside so the chat gets that room; the panel's own close button still works. */ .m-kb-open .rm-dock{bottom:calc(var(--m-kb,0px) + 8px)} .m-kb-open .jv-panel{max-height:calc(var(--m-vvh,100dvh) - 24px)} .m-kb-open .jv-launcher{display:none} /* ---------------- Page gutters + headings (every view) ---------------- */ .pad{padding:20px 16px 0} /* theme.css gives these views' .pad a 34px right gutter by view name, which outranks the plain rule above and left their cards off-centre. */ .view[data-view-pane="outbound"] .pad,.view[data-view-pane="directsearch"] .pad, .view[data-view-pane="campus"] .pad,.view[data-view-pane="templates"] .pad{padding-right:16px} .panelcard{margin-left:16px;margin-right:16px;padding:16px} .pad .panelcard{margin-left:0;margin-right:0} .mc-profile-card{padding:18px 16px} .lhead{flex-wrap:wrap;gap:10px} .ltitle{font-size:32px} .lbody{padding-bottom:calc(88px + env(safe-area-inset-bottom))} /* ---------------- Pipeline (CRM) ---------------- */ .leads-section,.crm-section{padding:0 0 calc(88px + env(safe-area-inset-bottom))} .crmhead{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:20px 16px 14px} .crmh1{font-size:32px} .crmtools{margin-left:0;width:100%;flex-wrap:wrap;gap:8px} .crmsearch{order:3;flex:1 1 100%;width:auto;padding:10px 12px} .crmsearch input{font-size:16px} .viewsw{flex:0 0 auto} .vbtn{padding:9px 16px} .newdeal{margin-left:auto;padding:11px 16px} .pi-wrap{padding:0 16px 6px} .pi-money{flex:1 1 100%;min-width:0} /* Board: one column at a time, swiped sideways and snapping into place. */ .boardwrap{padding:14px 16px 24px;scroll-snap-type:x mandatory;scroll-padding:0 16px; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .board{gap:12px} .col{flex:0 0 min(82vw,320px);min-width:0;scroll-snap-align:start;height:auto} .dealsel{width:28px;height:28px} .addcard{padding:13px} /* List: each row becomes a small card instead of a five-column table. */ .listwrap{padding:6px 16px 24px} .lrow.lhd{display:none} .lrow{grid-template-columns:1fr auto;grid-template-areas:"co val" "contact contact" "stage ago"; height:auto;gap:6px 12px;padding:14px 16px} .lco{grid-area:co;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lcontact{grid-area:contact} .lstage{grid-area:stage} .lval{grid-area:val;text-align:right} .lago{grid-area:ago;text-align:right} .crm-sales-body{grid-template-columns:1fr} .crmempty{padding:40px 16px} /* ---------------- Results grid (wide spreadsheet) ---------------- Eleven columns of contact data cannot stack sensibly, so the grid keeps its shape and scrolls sideways inside its own box, not the page. */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} /* ---------------- Mission Control ---------------- */ .mc-daily{grid-template-columns:1fr} .mc-profile{gap:16px;flex-wrap:nowrap} /* Photo on the left, name and position beside it on the right. */ .mc-avatar:not(.mc-avatar-sm){width:96px;height:96px} .mc-avatar:not(.mc-avatar-sm) .mc-initials{font-size:34px} .mc-identity{flex:1 1 auto;gap:4px} .mc-name{font-size:24px} .mc-name.is-placeholder{font-size:19px} .mc-position{font-size:14px} .mc-card-head{flex-wrap:wrap;gap:10px} /* Daily tasks: date and streak pills stacked on the right, beside the heading. */ .mc-daily-card .mc-card-head{flex-wrap:nowrap} .mc-daily-card .mc-stats{flex-direction:column;align-items:flex-end;gap:6px} .mc-heat-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; /* theme.css pulls this box 20px past each side for the hover glow, but the card only has 16px of padding here, so the grid and month labels ran over the card's border. Keep the vertical glow room, drop the sideways bleed. */ margin-left:0;margin-right:0;padding-left:0;padding-right:0;scroll-padding-right:0} /* Heatmap: fixed 12px squares with a 2px gap, so they read as squares rather than dots and rows don't stretch apart. The grid is wider than the screen and scrolls; missionControl.js opens it on the current week. */ .mc-heat{min-width:0;width:max-content;gap:6px 8px} .mc-grid{grid-template-rows:repeat(7,12px);grid-auto-columns:12px;gap:2px;align-content:start} .mc-grid .mc-cell{width:12px;height:12px;aspect-ratio:auto;border-radius:2px} .mc-months{gap:2px} .mc-month{min-width:0;width:0;overflow:visible} .mc-days{gap:2px} /* ---------------- Modals ---------------- Bottom sheets: full width, anchored to the bottom where a thumb can reach them, scrolling inside, clear of the home indicator. */ .ovl,.compliance-banner{align-items:flex-end;padding:0} /* A sheet inside the page must end above the browser's toolbar, not under it. */ .ovl{padding-bottom:var(--m-under)} .modal,.compliance-card{width:100%;max-width:100%;max-height:calc(100dvh - 24px); border-radius:20px 20px 0 0;border-left:none;border-right:none;border-bottom:none; padding-bottom:env(safe-area-inset-bottom)} .compliance-card{padding:22px 16px calc(22px + env(safe-area-inset-bottom))} .mhead{padding:18px 16px 14px;position:sticky;top:0;z-index:2;background:var(--card)} .mclose{width:40px;height:40px;display:flex;align-items:center;justify-content:center} .mbody{padding:16px 16px 6px} .mfoot{padding:14px 16px 18px;flex-wrap:wrap} .dhead{padding:18px 16px 4px} .dbody{padding:14px 16px 20px} .frow{flex-direction:column;gap:12px} .dd-edit-grid{grid-template-columns:1fr} .compliance-actions{flex-direction:column-reverse} .compliance-actions button{width:100%;padding:13px 18px} /* Any text field: 16px stops iOS zooming the page when it is focused. */ .app input:not([type=checkbox]):not([type=radio]):not([type=range]), .app select,.app textarea{font-size:16px} /* ---------------- Lead details drawer: full screen ---------------- */ .lead-drawer{width:100%;max-width:100%;height:100dvh;border-left:none; padding-top:env(safe-area-inset-top)} .lead-drawer-body{padding:16px} .lead-drawer-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap} .lead-drawer-row-grid{grid-template-columns:1fr} .lead-drawer-close{width:44px;height:44px} /* ---------------- Jarvis ---------------- */ .jv-bubble{max-width:calc(100vw - 96px)} .jv-bubble-x{width:32px;height:32px;margin:-6px -6px 0 0} .jv-panel{width:calc(100vw - 24px);max-width:none;max-height:calc(100dvh - 150px)} .jv-icon{width:36px;height:36px} .leadtoast{bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)} /* ---------------- Search results toolbar ---------------- */ .tabstrip{padding:9px 16px;overflow-x:auto} .filters{gap:8px;margin-top:14px} .lfsearch{flex:1 1 100%;min-width:0} .lfsearch input{width:100%} .lfsort{max-width:100%} .toolbar{flex-wrap:wrap;gap:12px;padding:14px 16px;margin-top:10px;box-sizing:border-box} .tleft{width:100%} .tools{margin-left:0;width:100%;flex-wrap:wrap;gap:8px} .tools > .export,.tools > .expwrap{flex:1 1 calc(50% - 4px)} .expwrap > .export{width:100%} .export{justify-content:center;padding:12px 14px} .expmenu{right:0;max-width:calc(100vw - 32px)} .session-stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px;padding:14px 16px} /* ---------------- Keep the floating dock out of the way ---------------- With a sheet, the lead drawer or the menu open, the Jarvis orb would sit on top of their buttons (Create, Save, Done), so it steps aside until they close. */ body:has(.ovl:not([hidden])) .m-topbar, body:has(.compliance-banner:not([hidden])) .m-topbar, body:has(.ovl:not([hidden])) .rm-dock, body:has(.compliance-banner:not([hidden])) .rm-dock, body:has(.lead-drawer.is-open) .rm-dock, .app.m-nav-open .rm-dock{opacity:0;visibility:hidden;pointer-events:none} /* ============================================================ Sign in / sign up (login.html) ============================================================ */ body.app{min-height:100vh;min-height:100dvh;box-sizing:border-box; padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))} .auth-card{padding:28px 20px 24px;border-radius:18px} .auth-logo{height:40px;margin-bottom:22px} .auth-sub{font-size:14.5px;margin-bottom:22px} .auth-card label{font-size:11.5px} /* 16px text: anything smaller and iOS zooms the page in on focus. */ .auth-card input{font-size:16px;padding:13px 14px;border-radius:12px} .auth-google,.auth-primary{min-height:50px;font-size:15.5px;border-radius:12px} .auth-alt{font-size:14.5px} .auth-alt a,.auth-foot a{display:inline-block;padding:10px 4px;margin:-10px -4px} .auth-foot{font-size:13px} /* ---------------- Outreach: cadence steps ---------------- Desktop keeps a cadence on one row, so it reads as one sequence. Eight steps in a phone-width card left ~40px each, wrapping "Day 0" and "Break-up" onto two lines. Here the row keeps its one line but gives each step room, and swipes sideways, running to the card's edge so the continuation is visible. */ .cad-steps{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;scrollbar-width:none; margin-right:-16px;padding-right:16px;padding-bottom:2px} .cad-steps::-webkit-scrollbar{display:none} .cad-step{flex:0 0 auto;min-width:74px;padding-right:22px;gap:5px;scroll-snap-align:start} .cad-step:not(:last-child)::after{left:34px;right:4px;top:14px} .cad-step-dot{width:29px;height:29px} .cad-step-day{font-size:12.5px;white-space:nowrap;margin-top:5px} .cad-step-kind{font-size:12.5px;white-space:nowrap} .cad-seq-head{gap:12px}