(style="--w:900px"), never max-width: on a computer the page is the part that scrolls, and a narrow max-width put its scrollbar in the middle of the window with dead space beside it (Daniel, 11 Oct). With --w the scrolling area fills the window and only the content is narrower, centered. */ .page { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); max-width: var(--w, 1200px); margin: 0 auto; } /* Hidden until shell.js has checked who is signed in, so nobody sees a flash of a screen they are not allowed to use. */ body.booting .page, body.booting:not(.menu-ready) .menu { visibility: hidden; } /* --- 2. The menu on a phone: a tab bar along the bottom ------------------------- */ .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: stretch; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line-2); } .menu .brandmark, .menu .me, .menu .side-only { display: none; } .menu .links { display: flex; flex: 1; margin: 0; padding: 0; list-style: none; } .menu .links li { flex: 1; display: flex; } .menu .links li.desk-only { display: none; } /* phone shows only the five tabs */ .menu a.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10px; font-weight: 500; color: var(--ink-3); text-decoration: none; position: relative; } .menu a.tab svg { width: 26px; height: 26px; } .menu a.tab[aria-current="page"] { color: var(--blue); } .menu a.tab .badge { position: absolute; top: 4px; left: calc(50% + 6px); height: 18px; min-width: 18px; font-size: 11px; } /* --- 3. The menu on a tablet: down the left side --------------------------------- */ @media (min-width: 700px) { .menu { top: 0; right: auto; width: 240px; height: auto; flex-direction: column; padding: 24px 12px 18px; border-top: 0; border-right: 1px solid var(--line); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } .menu .brandmark { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; color: var(--ink); } .menu .brandmark .logo { width: 36px; height: 36px; border-radius: 9px; flex: none; object-fit: cover; } .menu .brandmark .name { font-size: 16px; font-weight: 700; line-height: 1.2; } .menu .brandmark .city { font-size: 12px; color: var(--ink-2); } .menu .links { flex-direction: column; flex: none; gap: 2px; } .menu .links li, .menu .links li.desk-only { display: flex; flex: none; } .menu .links li.phone-only { display: none; } .menu a.tab { flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--ink); } .menu a.tab svg { width: 22px; height: 22px; color: var(--blue); } .menu a.tab:hover { background: var(--fill); } .menu a.tab[aria-current="page"] { background: var(--blue); color: #fff; font-weight: 600; } .menu a.tab[aria-current="page"] svg { color: #fff; } .menu a.tab .badge { position: static; margin-left: auto; } .menu .me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line); color: var(--ink); } .menu .me .who { font-size: 15px; font-weight: 600; } .menu .me .role { font-size: 13px; color: var(--ink-2); } .page { margin-left: 240px; padding: 32px 28px 48px; max-width: none; } /* Your photo is already in the menu here, so screens do not repeat it. */ .phone-only-avatar { display: none !important; } } /* --- 4. The menu on a desktop: a bar across the top ---------------------------- */ @media (min-width: 1100px) { .menu { left: 0; right: 0; bottom: auto; width: auto; height: 64px; flex-direction: row; align-items: center; gap: 28px; padding: 0 max(32px, calc((100% - 1200px) / 2 + 32px)); border-right: 0; border-bottom: 1px solid var(--line); } .menu .brandmark { padding: 0; } .menu .brandmark .city { display: none; } .menu .brandmark .name { font-size: 15px; font-weight: 600; } .menu .brandmark .logo { width: 34px; height: 34px; } .menu .links { flex-direction: row; gap: 24px; flex: 1; } .menu a.tab { height: 64px; padding: 0; border-radius: 0; font-size: 14px; color: var(--ink-2); background: none; } .menu a.tab svg { display: none; } .menu a.tab:hover { background: none; color: var(--ink); } .menu a.tab[aria-current="page"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); } .menu a.tab .badge { margin-left: 4px; } .menu .me { margin: 0; padding: 0; border: 0; } .menu .me .who-text { display: none; } .page { margin: 0 auto; padding: 100px 32px 64px; max-width: var(--w, 1200px); } } /* --- 5. The top of each screen: date line, big title, buttons on the right ------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 12px; margin-bottom: 22px; flex-wrap: wrap; } .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; } /* On a phone the second-choice buttons in a header line up with the title's left edge instead of looking indented. */ @media (max-width: 699px) { .page-head .actions .btn:not(.btn-primary):not(.btn-brand) { padding-left: 0; padding-right: 14px; background: none; } } .back { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; margin: 0 0 6px -8px; } .back svg { width: 26px; height: 26px; } /* Tabs inside a screen ("Active | Waiting | Removed") */ .tabs { display: flex; gap: 8px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 2px; } /* --- 6. Two-column screens on wide screens (a list beside its detail) ------------ */ .split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); } /* minmax: a long name cannot widen the column (12 Oct test) */ @media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .split.wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .grid-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } @media (min-width: 700px) { .grid-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } } .stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 1100px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { padding: 14px; } .stat .k { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); } .stat .v { font-size: 26px; margin-top: 6px; } /* --- 7. Full-screen messages ("Waiting to be approved") -------------------------- */ .standalone { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; } .standalone .box { max-width: 380px; } .standalone .big-icon { width: 64px; height: 64px; border-radius: 12px; margin: 0 auto 18px; color: #fff; display: flex; align-items: center; justify-content: center; } .standalone h1 { font-size: 28px; font-weight: 700; margin-bottom: 10px; } .standalone p { color: var(--ink-2); margin: 0 0 24px; } /* The owner's "trial ended" page: what is kept, as a short list with ticks. */ .standalone .ended-list { text-align: left; margin: 0 0 20px; display: grid; gap: 10px; } .ended-line { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; } .ended-line > span:first-child { flex: none; margin-top: 1px; } /* --- 8. The floating window (decided 10 Oct 2026) ---------------------------- On tablet and desktop the whole app sits in one big rounded window on the business's wave wallpaper, like a Mac app on a nice desktop. A thin frame of wallpaper shows all round; almost no space is lost. Phones stay full screen. shell.js turns this on (html.windowed) and sets --wallpaper. How it works: the page's becomes the window. "transform" makes the fixed menu sit inside the window instead of the browser edge, and the window scrolls inside itself so the wallpaper stays still. */ @media (min-width: 700px) { html.windowed { height: 100%; overflow: hidden; background: #0b2530 var(--wallpaper) center / cover no-repeat; } html.windowed body { position: fixed; inset: 22px; margin: 0; overflow: hidden; border-radius: 14px; transform: translateZ(0); /* the menu is placed inside the window */ background: var(--bg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.22); } /* CAREFUL: the page, not the window, is what scrolls. If the window scrolled, the menu would scroll away with the content. */ html.windowed .page { position: absolute; top: 0; bottom: 0; right: 0; left: 240px; margin: 0; max-width: none; overflow-y: auto; overscroll-behavior: contain; padding: 32px 28px 48px; } html.windowed .menu { border-radius: 14px 0 0 14px; } } @media (min-width: 1100px) { html.windowed body { inset: 30px max(30px, calc((100% - 1440px) / 2)); } html.windowed .page { left: 0; padding: 100px max(32px, calc((100% - var(--w, 1200px)) / 2 + 32px)) 64px; } html.windowed .menu { border-radius: 14px 14px 0 0; padding: 0 max(32px, calc((100% - 1200px) / 2 + 32px)); } } /* Your photo in the menu: a white ring and a soft shadow, like every photo of a person. With no photo yet, a small camera badge says "add one". */ .me-pic { position: relative; display: inline-flex; flex: none; } .me-pic .avatar { box-shadow: 0 0 0 2px #fff, 0 4px 12px -4px rgba(0,0,0,0.35); } .me-cam { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; } /* The account menu that opens from your photo (tablet and computer) */ .menu .me { background: none; border: 0; cursor: pointer; text-align: left; font: inherit; } .acct { position: absolute; z-index: 60; width: 280px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(16,24,40,0.08), 0 24px 48px -16px rgba(16,24,40,0.35); } .acct-who { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .acct-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; text-decoration: none; } .acct-item:hover { background: var(--fill); color: var(--ink); } .acct-item svg { color: var(--ink-2); } .acct-item.danger, .acct-item.danger svg { color: var(--red-ink); } @media (min-width: 700px) { .acct { left: 16px; bottom: 76px; } } @media (min-width: 1100px) { .acct { left: auto; bottom: auto; top: 58px; right: max(32px, calc((100% - 1200px) / 2 + 32px)); } } /* Partners: a new partner's own words, shown on their request so the owner reads them before approving. A message bubble (16px corners, 5px tail). */ .bubble-quote { margin: 12px 0 0 56px; padding: 10px 14px; background: var(--fill); border-radius: 16px 16px 16px 5px; font-size: 15px; line-height: 1.4; color: var(--ink); } /* Partners: referrals held for review (an unusual spike, see migration 010). */ .held-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .held-list li { padding: 8px 12px; border-radius: 10px; background: var(--fill); font-size: 15px; } /* An on/off row inside a .list: words on the left, the switch on the right. Used on a project ("Show the price") and in Share proof ("Show what clients say"). */ .switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; } /* Share proof: the testimonial picker (012). One row per testimonial: a tick box, two lines of their words, the client's name (a star when it is one of the owner's favorites). Scrolls when there are many. */ .said-pick { max-height: 300px; overflow-y: auto; } .said-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; cursor: pointer; } .said-row + .said-row { border-top: 1px solid var(--line); } .said-row input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--blue); } .said-txt { display: grid; gap: 3px; min-width: 0; } .said-words { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .said-txt .small { display: inline-flex; align-items: center; gap: 4px; } .said-txt .star { color: #ff9f0a; display: inline-flex; } /* --- Make a post sheet (postsheet.js), used from Content AND from a job in Projects, so its look lives here (moved from content.html, 11 Oct). --- */ .post-preview { display: block; width: 100%; max-height: 52vh; object-fit: contain; border-radius: 12px; background: var(--fill); } .pick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .pick-row button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } .pick-row button[aria-checked="true"] { background: var(--ink); color: #fff; } /* A style that can't be made yet: still listed, greyed, tap says how to unlock it. */ .pick-row button.off { color: var(--ink-3, #aeaeb2); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); } /* Long testimonials: each sentence a tappable block; picked ones are dark. */ .sentences { display: grid; gap: 6px; } .sentence { text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--fill); color: var(--ink-2); font: inherit; font-size: 15px; line-height: 1.4; cursor: pointer; } .sentence[aria-pressed="true"] { background: color-mix(in srgb, var(--blue) 12%, #fff); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); } .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); } .dot-dark { background: #141518; } .dot-light { background: #f7f5f0; } .dot-photo { background: conic-gradient(#2f6b3a, #8a5a2b, #2b4f7a, #2f6b3a); } .pick-row button[aria-checked="true"] .dot { box-shadow: 0 0 0 2px #fff; } .thumbs-row { display: flex; gap: 8px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; } .thumb { flex: none; width: 72px; height: 72px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; background: var(--fill); } .thumb.pair { width: 112px; } .thumb img { flex: 1; min-width: 0; height: 100%; object-fit: cover; } .thumb[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--blue); } /* --- Lit action buttons (Today and Referrals): small, in their own color, a little lighter at the top, with a crisp edge (no colored glow). Set the color with style="--c:var(--green)". .ghost is the grey second choice. --- */ .act { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; border: 0; cursor: pointer; font: 600 14px/1 inherit; color: #fff; white-space: nowrap; text-decoration: none; background-color: var(--c, var(--blue)); background-image: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.05)); /* Crisp, not glowing (Daniel, 12 Oct: the colored glow under the green buttons was too much): a light top edge, a fine edge, a small tight shadow. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(16,24,40,.18); } .act:hover { color: #fff; filter: brightness(.96); } /* The second choice: a white key with a clear outline and a lift (style "F", Daniel 12 Oct: grey buttons blended into the card). */ .act.ghost { background: linear-gradient(180deg, #fff, #f4f6f9); color: var(--blue); box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(16,24,40,.22), 0 2px 3px rgba(16,24,40,.10), 0 8px 16px -6px rgba(16,24,40,.28); } .act.ghost:hover { color: var(--blue); background: linear-gradient(180deg, #fff, #eef1f5); } /* --- "Add a past testimonial" sheet (pastwords.js), used from Content and Today: small photo previews (tap one to remove) and an Add tile. --- */ .pt-photos { display: flex; flex-wrap: wrap; gap: 8px; } .pt-ph, .pt-add { position: relative; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; flex: none; } .pt-ph { padding: 0; border: 0; cursor: pointer; background: var(--fill); } .pt-ph img { width: 100%; height: 100%; object-fit: cover; } .pt-ph span { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; } .pt-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--line-2, #d1d1d6); } .pt-add[hidden] { display: none; } .pt-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } /* --- Setup → Plan (plancard.js) --------------------------------------------- The plan in plain words, a people meter, and "Manage billing" (Stripe). */ .btn-ghost, .btn-ghost:hover { color: var(--blue); gap: 8px; background: linear-gradient(180deg, #fff, #f4f6f9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(16,24,40,.22), 0 2px 3px rgba(16,24,40,.10), 0 8px 16px -6px rgba(16,24,40,.28); } .btn-ghost:hover { background: linear-gradient(180deg, #fff, #eef1f5); } .plan-card .plan-name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-top: 12px; } .plan-line { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; } .plan-line b { font-size: 15px; } .founder-badge { font-size: 12px; font-weight: 700; color: var(--orange-ink); background: #fff1e0; padding: 4px 8px; border-radius: 6px; } .meter { height: 8px; border-radius: 4px; background: var(--line); margin-top: 7px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--blue); border-radius: 4px; } /* Today: the red "payment didn't go through" card (today.js). */ .btn-red, .btn-red:hover { color: #fff; gap: 8px; background: linear-gradient(180deg, #ff5a50, #ff3b30); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(16,24,40,.18); } .pay-failed { box-shadow: inset 0 0 0 1.5px var(--red), 0 8px 20px -10px rgba(255,59,48,.45); } .pay-failed .plan-line { margin-top: 0; } /* The plan card's buttons: stacked on a phone; normal width, side by side, on tablet and computer. */ .plan-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; } @media (min-width: 700px) { .plan-btns { flex-direction: row; } .plan-btns .btn-big { width: auto; padding: 0 28px; } }