/* ═══════════════════════════════════════════════════════════════════════════ RivCut home — signed-in Status dashboard, mobile only Loaded on index.html only, AFTER css/rc-shell.css. Ports the prototype's `isHome` screen (RivCut Mobile App.dc.html:50-213). ── WHY THIS IS GATED SO TIGHTLY ───────────────────────────────────────── index.html is the highest-value SEO page on the site and the first thing an anonymous visitor sees. So the dashboard renders ONLY when all three hold: 1. viewport <= 1023px 2. the visitor is signed in (proved by /api/auth/me, not a stale token) 3. js/rc-home.js has added .rc-home-on / .rc-home-takeover to The server-rendered HTML is never altered, so Googlebot and every signed-out visitor get today's marketing page byte-for-byte. Nothing here can fire at >=1024px: every rule is inside a screen-and-max-width block. `screen and` matters — Chrome's print viewport is ~816px, so a bare max-width block would restyle the printed page too. That bit this project once already. ═══════════════════════════════════════════════════════════════════════ */ /* Injected markup is inert until JS opts the page in. */ .rc-home { display: none; } @media screen and (max-width: 1023px) { body.rc-home-on .rc-home { display: block; } /* Returning customers (they have orders) get the dashboard INSTEAD of the marketing pitch. Customers with no orders keep the pitch below the dashboard, because the marketing page already makes that case better than a duplicated in-app version would. */ body.rc-home-takeover main > *:not(.rc-home) { display: none !important; } body.rc-home-takeover .hero { display: none !important; } /* The prototype's screen padding is 4px 18px 26px, but that assumes an app shell with no fixed chrome above it. Here .nav is position:fixed at top:var(--rc-promo-h), so without this clearance the dashboard slides underneath it and the greeting disappears behind the logo. --rc-nav-h is measured by js/rc-home.js; 64px is the observed default. */ .rc-home { padding: calc(var(--rc-promo-h, 0px) + var(--rc-nav-h, 64px) + 14px) 18px 26px; background: #F4F6F8; } body.rc-home-on { background: #F4F6F8 !important; } /* ── header ────────────────────────────────────────────────────────────── The site nav already carries the logo, and the prototype's bell is omitted on purpose: the only notifications endpoint is admin-only and returns other customers' names, emails and order totals. So this is just the greeting. */ .rc-home-hd { margin: 2px 0 18px; } .rc-home-hello { font: 800 22px/1.15 'Geist', system-ui, sans-serif; letter-spacing: -.6px; color: var(--dark, #0B1F3B); } .rc-home-co { font-size: 12px; color: #8A9099; margin-top: 3px; } .rc-home-eyebrow { font: 600 12px/1 'IBM Plex Sans', system-ui, sans-serif; color: #8A9099; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 10px; } /* ── active job (prototype :141) ─────────────────────────────────────── */ .rc-home-active { display: block; width: 100%; text-align: left; background: var(--dark, #0B1F3B); border: 0; border-radius: 18px; padding: 20px; color: #fff; cursor: pointer; box-shadow: 0 12px 30px rgba(11, 31, 59, .18); text-decoration: none; font: inherit; } .rc-home-active:active { opacity: .92; } .rc-home-active-row { display: flex; align-items: center; gap: 16px; } .rc-home-ring { position: relative; width: 70px; height: 70px; flex: none; } .rc-home-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 19px 'Geist', system-ui, sans-serif; } .rc-home-active-name { font: 700 17px/1.25 'Geist', system-ui, sans-serif; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-home-active-meta { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-home-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(76, 141, 255, .18); color: #93C5FD; border-radius: 20px; padding: 4px 11px; font-size: 12px; font-weight: 700; } .rc-home-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #4C8DFF; position: relative; flex: none; } .rc-home-chip-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(76, 141, 255, .4); } @media (prefers-reduced-motion: no-preference) { .rc-home-chip-dot::after { animation: rc-pulse 2s infinite; } } .rc-home-active-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); } .rc-home-foot-k { font-size: 11px; color: rgba(255,255,255,.45); } .rc-home-foot-v { font: 700 14px 'Geist', system-ui, sans-serif; margin-top: 2px; } /* ── quick actions (prototype :165) ──────────────────────────────────── */ .rc-home-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 20px; } .rc-home-action { display: block; text-align: left; background: #fff; border: 1px solid var(--rc-line, #DFE3E8); border-radius: 15px; padding: 15px; min-height: 44px; cursor: pointer; text-decoration: none; color: inherit; font: inherit; } .rc-home-action:active { background: #F7F9FC; } .rc-home-action-icon { width: 34px; height: 34px; border-radius: 10px; background: #E5EDF8; display: flex; align-items: center; justify-content: center; margin-bottom: 11px; } .rc-home-action-t { font: 700 14px 'Geist', system-ui, sans-serif; color: var(--dark, #0B1F3B); } .rc-home-action-s { font-size: 12px; color: #8A9099; margin-top: 2px; } /* ── empty state (prototype :69) ─────────────────────────────────────── */ .rc-home-empty { background: #fff; border: 1px solid var(--rc-line, #DFE3E8); border-radius: 20px; padding: 30px 22px; text-align: center; margin-top: 8px; } .rc-home-empty-icon { width: 64px; height: 64px; border-radius: 20px; background: #E5EDF8; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .rc-home-empty-h { font: 800 20px/1.2 'Geist', system-ui, sans-serif; letter-spacing: -.5px; margin-bottom: 8px; color: var(--dark, #0B1F3B); } .rc-home-empty-p { font-size: 13px; color: #6E7580; line-height: 1.6; margin-bottom: 20px; } .rc-home-empty-cta { display: block; background: var(--blue, #0d4fb4); color: #fff; border: 0; border-radius: 13px; padding: 15px; min-height: 48px; font: 700 14px 'Geist', system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 22px rgba(13, 79, 180, .25); text-decoration: none; } /* ── orders list (prototype :196) ────────────────────────────────────── */ .rc-home-orders-hd { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 11px; } .rc-home-orders-t { font: 700 16px 'Geist', system-ui, sans-serif; color: var(--dark, #0B1F3B); } .rc-home-seeall { font-size: 13px; font-weight: 600; color: var(--blue, #0d4fb4); text-decoration: none; padding: 14px 0 14px 14px; margin: -14px 0; } .rc-home-list { display: flex; flex-direction: column; gap: 10px; } .rc-home-order { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--rc-line, #DFE3E8); border-radius: 15px; padding: 13px 14px; min-height: 44px; text-decoration: none; color: inherit; } .rc-home-order:active { background: #F7F9FC; } .rc-home-order-thumb { width: 44px; height: 44px; border-radius: 11px; flex: none; background: linear-gradient(160deg, #F7F9FC, #E4E9F0); border: 1px solid #E6E9EE; display: flex; align-items: center; justify-content: center; color: #A8AEB7; } .rc-home-order-b { flex: 1; min-width: 0; } .rc-home-order-id { font: 700 14px 'Geist', system-ui, sans-serif; letter-spacing: -.2px; } .rc-home-order-m { font-size: 12px; color: #8A9099; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-home-pill { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; border-radius: 20px; padding: 4px 10px; flex: none; } @media (prefers-reduced-motion: no-preference) { .rc-home { animation: rc-in .28s var(--rc-ease, ease); } } }