/* ============================================================ ANVUL PLATFORM — dashboard screen components + homeowner status ============================================================ */ /* ---- Loading skeletons ---- One reusable shimmer block shown on a data surface while its fetch is in flight (paired with aria-busy="true" on the surface, removed when data lands). Static fallback for reduced-motion; the shimmer only animates when motion is welcome. A row helper (.skel-row) and a circle (.skel-c) compose the few placeholders the loaders inject — leads rows, insight metric values, the readiness rings/checklist. */ .skel { display: block; border-radius: var(--r-sm); background: var(--line-soft); } .skel-row { height: 12px; } .skel-c { border-radius: 50%; } @media (prefers-reduced-motion: no-preference) { .skel { background: linear-gradient(90deg, var(--line-soft), var(--paper-2), var(--line-soft)); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; } } @keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* a surface mid-fetch dims its (about-to-be-replaced) content a touch */ [aria-busy="true"] { cursor: progress; } /* one-shot fade-up for freshly-rendered data (request list, dashboards) so content arrives instead of hard-snapping in; off under reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .ui-in { animation: ui-in .26s ease both; } } @keyframes ui-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Marketing dashboard hero — ONE headline number (cost per job-ready lead) promoted above the supporting metric grid: large, tabular, terracotta when live. */ .mktx-hero { border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--paper-2, #f7f6f3); padding: 16px 18px; margin-bottom: 12px; } .mktx-hero-l { font-size: 12.5px; font-weight: 600; color: var(--fg-soft, #6f6f6a); text-transform: uppercase; letter-spacing: .04em; } .mktx-hero-v { font-family: var(--display, "Space Grotesk", sans-serif); font-size: 44px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--line-ink, #2a2a28); margin: 4px 0 6px; } .mktx-hero-live .mktx-hero-v { color: var(--signal-ink); } .mktx-hero-c { font-size: 13px; color: var(--fg-soft, #6f6f6a); line-height: 1.5; max-width: 60ch; } @media (max-width: 560px){ .mktx-hero-v { font-size: 36px; } } /* ---- Overview HERO — the ONE dominant action (UX audit fix) ---- The single primary decision on the readiness screen: "Review & approve your site → go live". One terracotta primary button; the quiet inline link ("Ask for a change first") is the only secondary. Everything else on the screen (the stage tracker, the two concierge columns) sits BELOW this and is demoted to ghost/links — so the firm is never asked to choose between five equal-weight CTAs. The .is-live variant swaps to an honest "you're live" confirmation whose only action is a ghost "View your site". */ .rd-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; padding: 22px 24px; border-radius: var(--r-lg); border: 1px solid var(--signal-line); background: linear-gradient(120deg, var(--signal-soft), var(--paper) 78%); box-shadow: var(--shadow-sm); } .rd-hero .rd-hero-b { flex: 1; min-width: 240px; } .rd-hero .rd-hero-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-deep); } .rd-hero .rd-hero-h { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.03em; line-height: 1.1; margin: 7px 0 7px; } .rd-hero .rd-hero-p { font-size: 13.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 62ch; } .rd-hero .rd-hero-act { display: flex; flex-direction: column; align-items: stretch; gap: 9px; flex: none; min-width: 220px; } .rd-hero .rd-hero-act .btn { white-space: normal; text-align: center; } /* FIX G: the confirm-before-charge / go-live-fixer panel is injected inside .rd-hero-act (flex:none; min-width:220px). Give it the full column width and wrap long domains so "…live today on reg-bailey-heating.co.uk" is never sheared on desktop. */ .own-confirm { width: 100%; box-sizing: border-box; } .own-confirm p { overflow-wrap: anywhere; } .rd-hero .rd-hero-link { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg-soft); padding: 4px 6px; border-radius: var(--r-sm); transition: color .14s, background .14s; } .rd-hero .rd-hero-link:hover { color: var(--signal-deep); background: var(--signal-soft); } .rd-hero .rd-hero-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--signal-soft); } /* :focus-visible — keyboard ring */ /* live state: calmer, success-led — the green seal reads "done", the action is secondary */ .rd-hero.is-live { border-color: var(--ok-line); background: linear-gradient(120deg, var(--ok-soft), var(--paper) 80%); } .rd-hero.is-live .rd-hero-k { color: var(--ok-ink, var(--ok)); } @media (max-width: 640px) { .rd-hero { padding: 20px; gap: 16px; } .rd-hero .rd-hero-act { width: 100%; min-width: 0; } } /* ==================================================================== GO-LIVE-ON-PAY + the post-pay "LEVEL UP your live site" loop (FUNNEL-MODEL §6.1 — the panel's #1 conversion fix). A PAID funnel firm gets ONE clean state, not a chore board: C — paid, not-yet-live → the .lv-switch hero: "your site's built, switch it on" (one terracotta button → POST /publish). D — live → the .rd-hero.is-live "you're live" seal + the .lv-card OPTIONAL level-up checklist (polish, never a gate). Reuses the existing token palette only. ==================================== */ /* Switch-on hero: the built-and-ready state reads as a confident go button. The money line states plainly that the monthly only starts now, at go-live. */ .rd-hero.lv-switch .rd-hero-h { max-width: 22ch; } .lv-money { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; margin: 11px 0 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--paper); border: 1px solid var(--signal-line); display: inline-block; } .lv-money b { color: var(--fg); } /* small reassurance under the switch-on CTA — no call needed (PART 2.5) */ .lv-reassure { font-size: 12px; color: var(--fg-faint); line-height: 1.45; margin: 4px 0 0; text-align: center; } /* ==================================================================== PREMIUM CONCIERGE MOMENTS — the pay / wait / unveil / go-live beats made to FEEL like real people built the site by hand (the £1,499 promise). Ink & Signal tokens only. Every reveal degrades to a static state under prefers-reduced-motion (guards at the end of this block). ==================================================================== */ /* ---- "real people build this by hand" strip — the build wait (Task 1) ---- */ .bt-strip { display: flex; align-items: flex-start; gap: 13px; margin-top: 14px; padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--signal-line); background: linear-gradient(180deg, var(--paper), var(--signal-soft)); } .bt-mark { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(155deg, oklch(0.605 0.155 47), var(--signal-ink)); box-shadow: 0 0 0 3px var(--signal-soft), inset 0 1px 0 oklch(1 0 0 / 0.25); } .bt-mark svg { width: 19px; height: 19px; display: block; } .bt-body { min-width: 0; } .bt-line { margin: 1px 0 0; font-size: 13px; font-weight: 600; color: var(--fg); line-height: 1.4; } .bt-due { margin: 5px 0 0; font-size: 12.5px; color: var(--fg-soft); line-height: 1.45; } .bt-due b { color: var(--signal-deep); font-weight: 700; } .bt-sign { margin: 7px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fg-faint); } /* ---- "A note from your designer" — the authored touch (Task 2) ---- */ .ob-note { margin: 14px 0 0; padding: 14px 16px 12px; border-radius: var(--r); border: 1px solid var(--signal-line); border-left: 3px solid var(--signal); background: var(--paper); box-shadow: var(--shadow-sm); } .ob-note-cap { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 9px; } .ob-note-ico { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: linear-gradient(155deg, oklch(0.605 0.155 47), var(--signal-ink)); } .ob-note-ico svg { width: 13px; height: 13px; } .ob-note-body { margin: 0; font-family: var(--display); font-weight: 500; font-size: 15px; line-height: 1.5; letter-spacing: -0.01em; color: var(--fg); white-space: pre-line; } /* keep the note's own line breaks */ .ob-note-sign { margin: 9px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fg-faint); } /* ---- THE UNVEILING — the finished site shown large + proud (Task 2) ---- */ .ob-unveil-wrap { padding: 6px 2px; } .ob-unveil-eye { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-deep); } .ob-unveil-h { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; color: var(--fg); margin: 5px 0 0; } .ob-unveil { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-strong); background: #fff; box-shadow: 0 1px 2px oklch(0.4 0.03 60 / 0.06), 0 22px 46px -26px oklch(0.42 0.06 55 / 0.5); } .ob-unveil-bar { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); } .ob-unveil-dots { display: inline-flex; gap: 5px; flex: none; } .ob-unveil-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .ob-unveil-addr { font-family: var(--mono); font-size: 11.5px; color: var(--fg-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ob-unveil-frame { position: relative; height: 420px; background: #fff; } .ob-unveil-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; } .ob-unveil-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 15px; } /* ---- GO-LIVE CELEBRATION — a real moment (Task 3) ---- */ .rd-hero.rd-celebrate { flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 32px 24px 26px; position: relative; overflow: hidden; } .rd-celebrate .gl-body { max-width: 54ch; } .rd-celebrate .rd-hero-k { color: var(--ok-ink, var(--ok)); } .rd-celebrate .rd-hero-h { font-size: clamp(24px, 4vw, 33px); margin: 7px 0 8px; } .rd-celebrate .rd-hero-p { margin: 0 auto; } .rd-celebrate .gl-money { display: inline-block; margin: 13px auto 0; } .rd-celebrate .gl-money b { color: var(--ok-ink, var(--fg)); } /* the celebratory seal — a check that pops, radiating rings + a confetti burst */ .gl-seal { position: relative; width: 74px; height: 74px; margin: 2px auto 12px; } .gl-seal-badge { position: relative; z-index: 2; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(155deg, oklch(0.7 0.15 155), oklch(0.52 0.13 156)); box-shadow: 0 0 0 6px var(--ok-soft), 0 14px 28px -10px oklch(0.5 0.13 155 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.3); } .gl-seal-badge svg { width: 38px; height: 38px; } .gl-seal-rings { position: absolute; inset: 0; z-index: 1; } .gl-seal-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid oklch(0.6 0.14 155); opacity: 0; } .gl-confetti { position: absolute; left: 50%; top: 42%; width: 0; height: 0; z-index: 3; pointer-events: none; } .gl-confetti i { position: absolute; width: 7px; height: 11px; border-radius: 1px; opacity: 0; } /* the LARGE live address — one-tap copy + native share */ .golive-url { width: 100%; max-width: 520px; margin: 20px auto 4px; padding: 16px 18px 17px; border-radius: var(--r-lg); border: 1px solid var(--ok-line); background: var(--ok-soft); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6); } .golive-url-lab { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok-ink, var(--ok)); margin-bottom: 9px; } .golive-url-row { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; } .golive-url-a { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 3.2vw, 25px); letter-spacing: -0.02em; color: var(--fg); text-decoration: none; overflow-wrap: anywhere; } .golive-url-a:hover { color: var(--signal-ink); text-decoration: underline; } .golive-url-copy { display: inline-flex; align-items: center; gap: 6px; flex: none; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--signal-deep); background: var(--paper); border: 1px solid var(--signal-line); border-radius: 999px; padding: 7px 13px; transition: background .14s, border-color .14s, color .14s; } .golive-url-copy svg { width: 15px; height: 15px; } .golive-url-copy:hover { background: var(--signal-soft); border-color: var(--signal); color: var(--signal-ink); } .golive-url-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--signal-soft); } .golive-url-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 15px; } .golive-url-act--solo { margin: 20px auto 0; } .golive-url-act .btn { white-space: nowrap; } .golive-url-act .btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; } .gl-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin-top: 16px; } /* motion — the reveal beats. All collapse to static under reduced-motion below. */ @media (prefers-reduced-motion: no-preference) { .ob-unveil.is-reveal { animation: obUnveilIn .7s var(--ease-out, cubic-bezier(.2,.7,.2,1)) both; } @keyframes obUnveilIn { from { opacity: 0; transform: translateY(15px) scale(.985); } to { opacity: 1; transform: none; } } .ob-unveil.is-reveal .ob-unveil-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 32%, oklch(1 0 0 / 0.5) 49%, transparent 66%); transform: translateX(-120%); animation: obUnveilSheen 1.15s var(--ease-out, ease) .38s 1; } @keyframes obUnveilSheen { to { transform: translateX(120%); } } .rd-celebrate:not(.is-still) .gl-seal-badge { animation: glPop .6s cubic-bezier(.2,1.3,.35,1) both; } @keyframes glPop { 0% { opacity: 0; transform: scale(.3); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: none; } } .rd-celebrate:not(.is-still) .gl-seal-rings i { animation: glRing 1.7s ease-out 2; } .rd-celebrate:not(.is-still) .gl-seal-rings i:nth-child(2) { animation-delay: .85s; } @keyframes glRing { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.15); } } .rd-celebrate:not(.is-still) .gl-confetti i { animation: glConfetti 1.2s ease-out both; } @keyframes glConfetti { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--cx,0), var(--cy,60px)) rotate(var(--cr,240deg)); } } .gl-confetti i:nth-child(1) { --cx:-100px; --cy:44px; --cr:210deg; background: var(--signal); animation-delay: .00s; } .gl-confetti i:nth-child(2) { --cx:-80px; --cy:70px; --cr:300deg; background: #e2a33c; animation-delay: .05s; } .gl-confetti i:nth-child(3) { --cx:-62px; --cy:32px; --cr:150deg; background: var(--ok); animation-delay: .02s; } .gl-confetti i:nth-child(4) { --cx:-46px; --cy:84px; --cr:260deg; background: var(--signal-deep); animation-delay: .08s; } .gl-confetti i:nth-child(5) { --cx:-30px; --cy:54px; --cr:120deg; background: var(--signal-ink); animation-delay: .01s; } .gl-confetti i:nth-child(6) { --cx:-16px; --cy:90px; --cr:320deg; background: #e2a33c; animation-delay: .06s; } .gl-confetti i:nth-child(7) { --cx:-6px; --cy:36px; --cr:180deg; background: var(--signal); animation-delay: .03s; } .gl-confetti i:nth-child(8) { --cx:8px; --cy:74px; --cr:240deg; background: var(--ok); animation-delay: .07s; } .gl-confetti i:nth-child(9) { --cx:18px; --cy:48px; --cr:140deg; background: var(--signal-deep); animation-delay: .02s; } .gl-confetti i:nth-child(10) { --cx:32px; --cy:92px; --cr:280deg; background: var(--signal); animation-delay: .05s; } .gl-confetti i:nth-child(11) { --cx:46px; --cy:34px; --cr:200deg; background: #e2a33c; animation-delay: .01s; } .gl-confetti i:nth-child(12) { --cx:62px; --cy:68px; --cr:160deg; background: var(--signal-ink); animation-delay: .08s; } .gl-confetti i:nth-child(13) { --cx:80px; --cy:50px; --cr:300deg; background: var(--ok); animation-delay: .04s; } .gl-confetti i:nth-child(14) { --cx:100px; --cy:84px; --cr:220deg; background: var(--signal-deep); animation-delay: .06s; } } @media (max-width: 640px) { .ob-unveil-frame { height: 340px; } .rd-hero.rd-celebrate { padding: 26px 18px 22px; } } /* The OPTIONAL level-up card — calm, success-led (green), clearly polish not a gate. */ .lv-card { border-color: var(--ok-line); background: linear-gradient(150deg, var(--ok-soft), var(--paper) 30%); } .lv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .lv-head-t { min-width: 0; } .lv-eyebrow { font-family: var(--mono); font-size: var(--text-xs, 10.5px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ok-ink, var(--ok)); } .lv-h { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.3vw, 22px); letter-spacing: -0.02em; line-height: 1.1; margin: 5px 0 0; } .lv-sub { font-size: 13px; color: var(--fg-soft); line-height: 1.55; margin: 10px 0 0; max-width: 64ch; } /* progress meter — starts PART-done (the basics are already ticked), never 0/N */ .lv-meter { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; min-width: 150px; } .lv-meter-bar { width: 150px; height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .lv-meter-fill { display: block; height: 100%; border-radius: 999px; background: var(--ok, #2f9e6e); background: linear-gradient(90deg, var(--signal, #c75b39), var(--ok, #2f9e6e)); transition: width .4s ease; } .lv-meter-cap { font-size: 11.5px; color: var(--fg-faint); } .lv-meter-cap b { color: var(--fg); font-family: var(--mono); } /* "already done for you" basics — quiet green ✓ chips so the part-done meter is honest */ .lv-basics { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; } .lv-basic { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-soft); padding: 4px 10px 4px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--ok-line); } .lv-basic svg { width: 13px; height: 13px; flex: none; color: var(--ok-ink, var(--ok)); } /* the optional items — ONE highlighted "do this next" (.is-next), the rest quiet; a done item recedes to a green ✓ row. */ .lv-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .lv-item { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line-soft); background: var(--paper); } .lv-ico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--bg, #fff); border: 1px solid var(--line-soft); color: var(--fg-soft); } .lv-ico svg { width: 17px; height: 17px; } .lv-body { min-width: 0; flex: 1; line-height: 1.3; } .lv-body b { font-size: 13.5px; display: block; color: var(--fg); } .lv-body span { font-size: 12px; color: var(--fg-soft); } .lv-act { flex: none; } .lv-item.done { background: transparent; border-color: transparent; } .lv-item.done .lv-ico { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok-ink, var(--ok)); } .lv-item.done .lv-body b { color: var(--fg-soft); font-weight: 600; } /* the single highlighted next ask — terracotta-tinted, the one clear thing to do */ .lv-item.is-next { border: 1.5px solid var(--signal-line); background: var(--signal-soft); } .lv-item.is-next .lv-ico { background: var(--paper); border-color: var(--signal-line); color: var(--signal-ink, var(--signal-deep)); } .lv-item.is-next .lv-body b { color: var(--fg); } /* the prominent DOMAIN callout — the marquee "own your business" upgrade (its handoff form, incl. £199 done-for-you, lives on the domain screen). */ .lv-domain { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 15px 16px; border-radius: 12px; border: 1.5px solid var(--signal-line); background: linear-gradient(120deg, var(--signal-soft), var(--paper) 82%); } .lv-domain-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--signal-line); color: var(--signal-ink, var(--signal-deep)); } .lv-domain-ic svg { width: 21px; height: 21px; } .lv-domain-b { min-width: 0; flex: 1; line-height: 1.4; } .lv-domain-b b { font-size: 14px; display: block; color: var(--fg); } .lv-domain-b p { font-size: 12.5px; color: var(--fg-soft); margin: 2px 0 0; } .lv-domain .btn { flex: none; } .lv-domain.done { border-color: var(--ok-line); background: linear-gradient(120deg, var(--ok-soft), var(--paper) 82%); } .lv-domain.done .lv-domain-ic { border-color: var(--ok-line); color: var(--ok-ink, var(--ok)); } @media (max-width: 640px) { .lv-head { align-items: flex-start; } .lv-meter, .lv-meter-bar { width: 100%; min-width: 0; align-items: stretch; } .lv-meter { align-items: flex-start; } .lv-item { flex-wrap: wrap; } .lv-body { flex: 1 1 100%; order: 2; } .lv-act { order: 3; } .lv-domain { flex-wrap: wrap; } .lv-domain-b { flex: 1 1 100%; } } /* ==================================================================== SELF-SERVE FUNNEL machine (Task 6) — the Overview's A Audit → B Activate → C Building → D Live states. Plain/correct here; Task 7 elevates the audit + pricing. Reuses the existing token palette (--signal / --warn / --ok); nothing new is invented. A legacy firm has no [data-funnel-phase] so none of this applies. ==================================================== */ /* Per-phase ACCENT token: pre-activation (A/B) leads with the brand --signal, building (C) goes amber --warn, live (D) goes green --ok. Used sparingly as a thin top accent on the audit/pricing cards so the state reads at a glance. */ .screen[data-funnel-phase] { --rd-accent: var(--signal); } .screen[data-funnel-phase="C"] { --rd-accent: var(--warn); } .screen[data-funnel-phase="D"] { --rd-accent: var(--ok); } .rd-audit, .rd-activate { border-top: 2px solid var(--rd-accent, var(--signal)); } /* 4-stage tracker (#rdStageRow) — done / now / next / todo. The row keeps its inline flex; only the per-stage chips are styled here so the new "next" sub-state (the gated upcoming step) has its own emphasis. */ .rd-stage { flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 13px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--paper); } .rd-stage-ico { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--paper); border: 1.5px dashed var(--line-soft); color: var(--fg-faint); } .rd-stage-ico svg { width: 12px; height: 12px; } .rd-stage-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; } .rd-stage-t { min-width: 0; line-height: 1.25; } .rd-stage-t b { font-size: 13px; display: block; color: var(--fg-faint); } .rd-stage-t span { font-size: 11px; color: var(--fg-faint); } .rd-stage-sep { align-self: center; color: var(--fg-faint); font-size: 15px; } .rd-stage.done .rd-stage-ico { background: var(--ok-soft); color: var(--ok-ink, var(--ok)); border: 1px solid var(--ok-line); } .rd-stage.now { border: 1.5px solid var(--signal); } .rd-stage.now .rd-stage-ico { background: var(--signal); color: #fff; border: 0; } .rd-stage.now .rd-stage-t b { color: var(--fg); font-weight: 700; } /* NEXT — the upcoming gated step: signal-tinted chip + arrow glyph, its own state. */ .rd-stage.next { border: 1.5px solid var(--signal-line); background: var(--signal-soft); } .rd-stage.next .rd-stage-ico { background: var(--signal-soft); color: var(--signal-ink, var(--signal-deep)); border: 1.5px solid var(--signal-line); } .rd-stage.next .rd-stage-t b { color: var(--signal-ink, var(--signal-deep)); font-weight: 700; } /* mobile — 4 stages must not crush at ~340px: wrap to 2x2, drop the 2nd-line notes + separators. #rdStageRow carries flex-wrap inline so this only kicks in narrow. */ @media (max-width: 560px) { #rdStageRow .rd-stage { flex: 1 1 calc(50% - 6px); } #rdStageRow .rd-stage-sep { display: none; } .rd-stage-t span { display: none; } } /* ==================================================================== TASK 7 — high-end funnel surfaces (#rdAudit · #rdActivate · account). "The reading": an editorial instrument panel built ONLY from the platform tokens — mono eyebrows -> Space Grotesk headlines -> Hanken body, one terracotta accent, honest evidence as the hero. Green = included, amber = your budget ON TOP. A legacy firm never renders any of this. ==================================================================== */ /* visually-hidden (a11y) — screen-reader-only text, e.g. the nav ", locked" suffix */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- #rdAudit STATE A — ONE card, ONE decision (Task 7 rebuild). The honest pre-purchase pitch: the product's genuine value prop (headline + mechanism), a single gap line assembled ONLY from real audit.findings, the activate decision, and a quiet inline stepper. No before/after split, no iframe, no scorecard, no browser chrome, no subdomain — just one beat. ---- */ .rd-auditA { max-width: 640px; margin: 4px auto; overflow: hidden; border-color: var(--signal-line); background: linear-gradient(168deg, var(--signal-soft), var(--paper) 60%); } .rd-auditA .sa { display: flex; flex-direction: column; gap: 16px; padding: clamp(28px, 5vw, 44px); } .sa-eyebrow { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--signal-deep); } .sa-h { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4.4vw, 34px); letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: 20ch; text-wrap: balance; } .sa-mech { font-size: var(--text-md); color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 52ch; } /* the honest gap line — quiet, left-accent (no heavy box); assembled from real findings */ .sa-gap { margin: 2px 0; padding: 3px 0 3px 15px; border-left: 2px solid var(--signal-line); font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.5; max-width: 56ch; } .sa-host { color: var(--signal-deep); font-weight: 600; text-decoration: none; white-space: nowrap; } .sa-host:hover { text-decoration: underline; } .sa-gap a { color: var(--signal-deep); } /* the single decision + a quiet preview link (link only — never an iframe) */ .sa-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; } .sa-preview { font-family: var(--sans); font-size: var(--text-sm); font-weight: 600; color: var(--fg-soft); text-decoration: none; white-space: nowrap; } .sa-preview:hover { color: var(--signal-deep); } .sa-preview:focus-visible { outline: none; border-radius: var(--r-sm); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .sa-fee { font-size: var(--text-xs); color: var(--fg-faint); margin: -8px 0 0; } .sa-risk { font-size: 12.5px; color: var(--fg-soft); margin: 0; line-height: 1.5; } /* the stepper — ONE inline mono row (wraps cleanly): Audit · Claimed · Activate · Live */ .sa-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.02em; text-transform: uppercase; } .sa-step { display: inline-flex; align-items: center; gap: 5px; } .sa-step svg { width: 11px; height: 11px; } .sa-step.done { color: var(--ok-ink); } .sa-step.now { color: var(--fg); font-weight: 600; } .sa-step.todo { color: var(--fg-faint); } .sa-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; } .sa-sep { color: var(--fg-faint); } @media (max-width: 560px) { .sa-act { flex-direction: column; align-items: stretch; gap: 12px; } .sa-act .btn { width: 100%; } .sa-preview { text-align: center; } } /* ---- #rdActivate — recommendation-led pricing (3 tiers, Growth pre-selected) ---- */ .rd-activate { padding: 22px; } .rd-act-head { margin-bottom: 24px; } .rd-act-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--signal-deep); } .rd-act-title { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.4vw, 24px); letter-spacing: -0.03em; line-height: 1.06; margin: 7px 0 6px; } .rd-act-sub { font-size: 13.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 70ch; } .rd-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; } /* FIX #3 — the ownership ladder leads with the ONE recommended rung (centred), the other three fold into a quiet disclosure; the 5-piece cost ledger + the aftercare-optional note declutter the decision moment. */ #rdLadder { display: flex; flex-direction: column; align-items: center; gap: 14px; } #rdLadder > .rd-plan { width: 100%; max-width: 470px; cursor: default; } .rd-more { width: 100%; max-width: 470px; } .rd-more > summary, .sb-pieces > summary { cursor: pointer; list-style: none; } .rd-more > summary::-webkit-details-marker, .sb-pieces > summary::-webkit-details-marker { display: none; } .rd-more > summary { text-align: center; font-size: 13px; color: var(--fg-soft); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); transition: color .14s, border-color .14s; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } /* FIX E: ≥44px tap target */ .rd-more > summary:hover { color: var(--fg); border-color: var(--line-strong); } .rd-more[open] > summary { margin-bottom: 12px; color: var(--fg); } .rd-plans-more { display: grid; grid-template-columns: 1fr; gap: 12px; } .sb-pieces { margin: 4px 0 2px; } .sb-pieces > summary { font-size: 12.5px; color: var(--fg-soft); padding: 6px 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; } /* FIX E: ≥44px tap target */ .sb-pieces > summary:hover { color: var(--fg); } .sb-pieces[open] > summary { margin-bottom: 8px; } .sb-aftercare { font-size: 12.5px; line-height: 1.5; color: var(--fg-soft); text-align: center; margin: 14px auto 0; max-width: 520px; } .rd-plan { position: relative; display: flex; flex-direction: column; gap: 9px; cursor: pointer; isolation: isolate; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); padding: 20px 18px 18px; transition: border-color var(--dur-1, .14s) var(--ease-soft, ease), box-shadow var(--dur-2, .28s) var(--ease-out, ease), transform var(--dur-1, .14s) var(--ease-out, ease); } .rd-plan:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow); } .rd-plan-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .rd-plan.is-best { border-color: var(--signal-line); } .rd-plan.is-selected { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .rd-plan.is-selected:hover { box-shadow: 0 0 0 3px var(--signal-soft), var(--shadow); } /* a11y: keyboard focus ring must be VISIBLE on white (signal-soft alone read as ~invisible). :has(:focus-visible) → ring on keyboard, not mouse click. */ .rd-plan:has(:focus-visible) { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .rd-plan-flag { position: absolute; top: -11px; left: 16px; right: 16px; text-align: center; font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; background: var(--signal-ink); border-radius: 999px; padding: 3px 11px; box-shadow: 0 6px 16px var(--signal-glow); } .rd-plan-pick { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--paper); display: grid; place-items: center; color: transparent; transition: background .14s, border-color .14s; } .rd-plan-pick svg { width: 11px; height: 11px; } .rd-plan.is-selected .rd-plan-pick { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; } .rd-plan-rank { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); padding-right: 26px; } /* the recommended tier's who-it's-for tagline reads as a quiet badge so Growth is the obvious default (PART 2.4) */ .rd-plan.is-best .rd-plan-rank { display: inline-flex; align-self: flex-start; align-items: center; padding: 3px 9px; background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: 999px; color: var(--signal-deep); } .rd-plan-name { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1; } .rd-plan-blurb { font-size: 12.5px; color: var(--fg-soft); line-height: 1.45; margin: -2px 0 2px; } .rd-plan-price { display: flex; flex-direction: column; gap: 3px; padding-top: 11px; margin-top: 2px; border-top: 1px solid var(--line-soft); } .rd-plan-act { font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -0.03em; line-height: 1; color: var(--fg); } .rd-plan-act-l { font-size: 11.5px; color: var(--fg-soft); line-height: 1.35; } .rd-plan-act-l b { color: var(--fg); font-weight: 700; } .rd-plan-monthly { font-size: 12px; color: var(--fg-soft); line-height: 1.4; } .rd-plan-monthly b { color: var(--fg); font-weight: 700; } .rd-plan-feats { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; } .rd-plan-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--fg); line-height: 1.4; } .rd-plan-feat svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--ok-ink); } /* FIX A (mobile clip <=390px): the money CTA on a pricing-ladder card MUST wrap + stay ≥44px tall. Base .btn is white-space:nowrap (anvul-platform.css:106), which sheared "Deposit £199 (refundable)…"; the .rd-hero fix (line 59) never covered .rd-plan .btn. */ .rd-plan .btn { white-space: normal; line-height: 1.2; text-align: center; min-height: 44px; } /* FIX C: the reconciliation micro-line under the recommended rung's price (£199 + balance = the one owned price), so the two amounts don't read as a third, competing number. */ .rd-plan-recon { font-size: 11.5px; color: var(--fg-faint); line-height: 1.35; margin-top: 1px; } /* FIX D: the recommended lead card is direct-to-checkout (never a radio) — so its pick badge is a SOLID "chosen for you" tick (the exact fill the .is-selected state uses), not an empty (unticked-radio) ring. */ .rd-plan-pick.is-chosen { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; } /* THE unmissable managed-ad-spend callout — amber so it can't read as "included" */ .rd-adspend { margin-top: auto; padding-top: 12px; } .rd-adspend-box, .rd-acct-adspend { border: 1.5px solid var(--warn-line); border-radius: 10px; background: var(--warn-soft); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; } .rd-adspend-tag { align-self: flex-start; font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.50 0.12 70); background: var(--paper); border: 1px solid var(--warn-line); border-radius: 999px; padding: 2px 8px; } .rd-adspend-t { font-size: 11.5px; color: var(--fg); line-height: 1.45; } .rd-adspend-t b { font-weight: 700; } .rd-act-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; } .rd-act-back { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--fg-soft); padding: 6px 8px; border-radius: var(--r-sm); transition: color .14s, background .14s; } .rd-act-back:hover { color: var(--signal-deep); background: var(--signal-soft); } .rd-act-back:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .rd-reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); } .rd-reassure li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-soft); } .rd-reassure svg { width: 15px; height: 15px; flex: none; color: var(--ok-ink); } @media (max-width: 860px) { .rd-plans { grid-template-columns: 1fr; } .rd-plan-flag { left: 16px; right: auto; } } /* ---- §3 value anchor — real UK component costs beside your price (the saving is NEVER stated: both numbers shown, the installer subtracts). A clean ledger, not a wall. ---- */ .sb-anchor { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 18px 20px; margin-bottom: 18px; } .sb-anchor-k { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-deep); } .sb-anchor-t { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; line-height: 1.25; margin: 5px 0 0; color: var(--fg); } /* "real UK rates, 2025 · how we costed this" — a quiet, verifiable affordance, not a cocky tag (PART 2.2) */ .sb-anchor-src { font: inherit; font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--fg-faint); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .sb-anchor-src:hover { color: var(--signal-deep); } .sb-anchor-src:focus-visible { outline: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .sb-cost-note { margin: 8px 0 0; padding: 9px 12px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line-soft); font-size: 12px; color: var(--fg-soft); line-height: 1.5; max-width: 72ch; } .sb-cost-note[hidden] { display: none; } .sb-ledger { margin: 14px 0 0; padding: 0; } .sb-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-soft); } .sb-row dt { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--fg-soft); line-height: 1.35; } .sb-row dd { flex: none; margin: 0; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--fg); white-space: nowrap; } .sb-tot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-top: 11px; padding-top: 12px; border-top: 1.5px solid var(--line-strong); } .sb-tot-l { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-faint); } .sb-tot-v { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); } .sb-tot-sep { color: var(--fg-faint); } .sb-tot-run { font-size: 13px; color: var(--fg-soft); } .sb-tot-run b { color: var(--fg); font-weight: 700; } .sb-you { margin: 13px 0 0; padding: 11px 14px; border-radius: 9px; background: var(--signal-soft); border: 1px solid var(--signal-line); font-size: 14px; color: var(--fg); line-height: 1.4; } .sb-you b { font-weight: 700; color: var(--signal-ink); } .sb-why { margin: 11px 0 0; font-size: 12.5px; font-style: italic; color: var(--fg-soft); line-height: 1.5; max-width: 66ch; } .sb-dare { margin: 7px 0 0; font-size: 12.5px; font-style: italic; color: var(--fg-faint); } /* ---- §5 ownership & exit (paywall-trust) + a QUIET §4 Static Build Export expander ---- */ .sb-own { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); } .sb-own-h { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg); } .sb-own-p { font-size: 13px; color: var(--fg-soft); line-height: 1.6; margin: 0; max-width: 76ch; } .sb-own-link { background: none; border: 0; padding: 0; font: inherit; color: var(--signal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .sb-own-link:hover { color: var(--signal-ink); } .sb-own-link:focus-visible { outline: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .sb-buyout { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); padding: 14px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sb-buyout[hidden] { display: none; } .sb-buyout-note { font-size: 12px; color: var(--fg-soft); line-height: 1.45; margin: 0 0 10px; } .sb-buyout-tbl { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 12.5px; } .sb-buyout-tbl th, .sb-buyout-tbl td { text-align: right; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; } .sb-buyout-tbl thead th { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); } .sb-buyout-tbl thead th:first-child, .sb-buyout-tbl tbody th { text-align: left; } .sb-buyout-tbl tbody th { font-weight: 700; color: var(--fg); } .sb-buyout-tbl tbody td { font-family: var(--mono); color: var(--fg-soft); } .sb-buyout-tbl tbody tr:last-child th, .sb-buyout-tbl tbody tr:last-child td { border-bottom: 0; } /* ---- §4 Static Build Export — the QUIET "Ownership & exit" line on Plan & billing ---- */ .sb-acct-own { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .sb-acct-own[hidden] { display: none; } .sb-own-head { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); margin: 0 0 6px; } .sb-own-line { font-size: 13px; color: var(--fg-soft); line-height: 1.55; margin: 0; } .sb-own-line b { color: var(--fg); } .sb-own-fine { font-size: 12px; color: var(--fg-faint); line-height: 1.5; margin: 6px 0 0; max-width: 70ch; } /* ---- Account — funnel firm's REAL activation + monthly + go-live + ad-spend ---- */ .rd-acct-adspend { margin: 14px 0 4px; } .rd-acct-adspend .rd-adspend-t { font-size: 12px; } /* ---- entrance: the scorecard + tier cards arrive in a tasteful cascade ---- */ @media (prefers-reduced-motion: no-preference) { #view-app .screen[data-active] .rd-plan { animation: anv-card var(--dur-3, .5s) var(--ease-out, ease) both; } #view-app .screen[data-active] .rd-plans .rd-plan:nth-child(1) { animation-delay: .06s; } #view-app .screen[data-active] .rd-plans .rd-plan:nth-child(2) { animation-delay: .13s; } #view-app .screen[data-active] .rd-plans .rd-plan:nth-child(3) { animation-delay: .20s; } } /* ---- Launch Readiness ---- */ .lr-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; } .lr-score { display: flex; align-items: center; gap: 20px; padding: 22px; } .lr-score .lrs-body { min-width: 0; } .lr-score .lrs-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-faint); } .lr-score h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; margin: 4px 0 6px; } .lr-score p { font-size: 13px; color: var(--fg-soft); margin: 0; line-height: 1.45; } .lr-score .lrs-state { font-size: 13px; font-weight: 700; margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; } .lr-score .lrs-state.ok { color: var(--ok); } .lr-score .lrs-state.warn { color: oklch(0.50 0.12 70); } /* ---- Skin picker ---- */ .picker-layout { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; } .picker-list { display: flex; flex-direction: column; gap: 9px; max-height: 720px; overflow-y: auto; padding-right: 4px; } .picker-item { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; transition: border-color .14s, box-shadow .14s; text-align: left; width: 100%; font-family: var(--sans); } .picker-item:hover { border-color: var(--line-strong); } .picker-item[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .picker-sw { width: 42px; height: 42px; border-radius: 9px; flex: none; display: flex; align-items: flex-end; padding: 5px; gap: 3px; } .picker-sw i { width: 8px; height: 8px; border-radius: 2px; } .picker-item .pi-b { flex: 1; min-width: 0; } .picker-item .pi-b b { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; } .picker-item .pi-b span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); } .picker-item .pi-ck { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; } .picker-item[aria-pressed="true"] .pi-ck { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; } .picker-item[aria-pressed="true"] .pi-ck svg { width: 11px; height: 11px; } .picker-item:not([aria-pressed="true"]) .pi-ck svg { display: none; } .preview-frame { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); } .preview-chrome { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); } .preview-chrome .dots { display: flex; gap: 6px; } .preview-chrome .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); } .preview-chrome .pc-url { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); flex: 1; text-align: center; } .preview-body { padding: 0; transition: background .3s; } /* the live re-skinned mini homepage */ .mini { padding: 28px; transition: all .3s; min-height: 420px; } .mini-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; margin-bottom: 14px; } .mini h2 { font-size: 30px; line-height: 1.04; margin: 0 0 12px; letter-spacing: -0.03em; text-wrap: balance; } .mini p { font-size: 14px; line-height: 1.5; margin: 0 0 18px; max-width: 42ch; } .mini-cap { border-radius: 12px; padding: 16px; max-width: 340px; } .mini-cap .mc-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.7; } .mini-fields { display: flex; gap: 8px; margin-bottom: 10px; } .mini-fields .mf { flex: 1; border-radius: 7px; padding: 9px 11px; font-family: var(--mono); font-size: 12px; } .mini-fields .mf.a { flex: 0 0 64px; } .mini-btn { border-radius: 8px; padding: 12px; text-align: center; font-weight: 700; font-size: 14px; } .mini-note { font-size: 11px; margin-top: 10px; opacity: 0.7; line-height: 1.4; } .tune-panel { margin-top: 16px; } .tune-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .tune-row:last-child { border-bottom: 0; } .tune-row .tr-l { flex: 1; min-width: 0; } .tune-row .tr-l b { display: block; font-size: 13.5px; font-weight: 700; } .tune-row .tr-l span { font-size: 12.5px; color: var(--fg-soft); } .swatches { display: flex; gap: 7px; } .swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 2px solid transparent; transition: transform .12s; } .swatch:hover { transform: scale(1.1); } .swatch[aria-pressed="true"] { border-color: var(--fg); box-shadow: 0 0 0 2px var(--paper) inset; } .tune-input { font-family: var(--sans); font-size: 13.5px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 12px; width: 280px; max-width: 50vw; } .tune-input:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } /* :focus-visible — ring on keyboard, not mouse click */ /* bob guard chip */ .guard { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 6px; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); } .guard svg { width: 12px; height: 12px; } .guard.warn { background: var(--warn-soft); color: oklch(0.5 0.12 70); border-color: var(--warn-line); } /* ---- Service board ---- */ .svc-board { display: flex; flex-direction: column; gap: 12px; } .svc-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); } .svc-item .toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); position: relative; cursor: pointer; transition: background .18s; flex: none; border: 0; } .svc-item .toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .svc-item .toggle[aria-pressed="true"] { background: var(--ok); } .svc-item .toggle[aria-pressed="true"]::after { transform: translateX(18px); } .svc-item .si-b b { font-size: 14.5px; font-weight: 700; display: block; } .svc-item .si-b span { font-size: 12.5px; color: var(--fg-soft); } .svc-item.is-off { opacity: 0.62; } .svc-item.is-off .si-b b::after { content: " · hidden"; font-family: var(--mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; } .svc-cons { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); text-align: right; line-height: 1.5; } .svc-cons .ok { color: var(--ok); } .svc-cons .warn { color: oklch(0.5 0.12 70); } /* ---- Proof ---- */ .proof-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .proof-item { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--paper); } .proof-item .pi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .proof-strength { display: flex; gap: 4px; } .proof-strength i { width: 26px; height: 5px; border-radius: 3px; background: var(--line-strong); } .proof-strength i.on { background: var(--ok); } .proof-strength.weak i.on { background: var(--warn); } .dropzone { border: 1.5px dashed var(--line-strong); border-radius: var(--r-sm); padding: 18px; text-align: center; font-size: 13px; color: var(--fg-faint); cursor: pointer; transition: border-color .15s, background .15s; } .dropzone:hover { border-color: var(--signal); background: var(--signal-soft); color: var(--signal-deep); } .dropzone svg { width: 22px; height: 22px; display: block; margin: 0 auto 8px; } /* ---- Publish gate ---- */ .gate-head { display: flex; align-items: center; gap: 22px; padding: 26px; border-radius: var(--r-lg); background: var(--ink); color: var(--on-ink); margin-bottom: 22px; } .gate-head.ready { background: linear-gradient(120deg, var(--ink), oklch(0.3 0.06 250)); } .gate-head .gh-body { flex: 1; } .gate-head .gh-body .ghl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink-faint); } .gate-head .gh-body h2 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; margin: 5px 0 6px; } .gate-head .gh-body p { font-size: 14px; color: var(--on-ink-soft); margin: 0; } .gate-head .ring::before { background: var(--ink); } .gate-head .ring .rv { color: var(--on-ink); } .gate-list { display: flex; flex-direction: column; gap: 10px; } /* ---- Leads inbox ---- */ .lead-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .lead-table { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); } .lead-row { display: grid; grid-template-columns: auto 1.4fr 1fr 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .12s; } .lead-row:last-child { border-bottom: 0; } .lead-row:hover { background: var(--paper-2); } .lead-row.unread { background: var(--signal-soft); } .lead-row.unread:hover { background: oklch(0.94 0.035 250); } .lead-av { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff; } .lead-who b { font-size: 14.5px; font-weight: 700; display: block; } .lead-who span { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); } .lead-route { font-size: 13px; color: var(--fg-soft); } .lead-route b { color: var(--fg); font-weight: 600; } .lead-meta { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); } .lead-row .chev { color: var(--fg-ghost); } /* ---- Lead detail (14-part) ---- */ .ld-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; } .ld-block { border-bottom: 1px solid var(--line-soft); padding: 16px 0; } .ld-block:last-child { border-bottom: 0; } .ld-block .ldb-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 8px; } .ld-signal { display: flex; align-items: center; gap: 10px; padding: 9px 0; } .ld-signal .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .ld-signal[data-c="found"] .dot { background: var(--ok); } .ld-signal[data-c="inferred"] .dot { background: var(--signal); } .ld-signal[data-c="missing"] .dot, .ld-signal[data-c="confirm"] .dot { background: var(--fg-ghost); } .ld-signal .lk { font-size: 13.5px; } .ld-signal .lk b { font-weight: 600; } .ld-signal .lt { margin-left: auto; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); } .dnp { display: flex; gap: 8px; flex-wrap: wrap; } .dnp-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--block); background: var(--block-soft); border: 1px solid var(--block-line); border-radius: 999px; padding: 6px 12px; } .dnp-chip svg { width: 12px; height: 12px; } .call-opener { background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 18px; } .call-opener .co-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; } .call-opener p { font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--on-ink); } /* ---- Studio ---- */ .studio { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; } .studio-edit { display: flex; flex-direction: column; gap: 14px; } .edit-field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; } .edit-field textarea, .edit-field input { width: 100%; font-family: var(--sans); font-size: 13.5px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 12px; resize: vertical; } .edit-field textarea:focus-visible, .edit-field input:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } /* :focus-visible */ .scan-line { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 9px 12px; border-radius: var(--r-sm); } .scan-line.ok { background: var(--ok-soft); color: var(--ok); } .scan-line.block { background: var(--block-soft); color: var(--block); } .scan-line svg { width: 15px; height: 15px; flex: none; } /* ---- Insight (marketing engine) ---- */ .insight-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; } .metric { border: 1px solid var(--line); border-radius: var(--r); padding: var(--space-5); background: var(--paper); } /* --space-5=20px */ .metric .mk-l { font-size: var(--text-sm); color: var(--fg-soft); margin-bottom: 8px; } /* --text-sm=13px */ .metric .mk-v { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } /* tnum: figures don't jitter width on live update; 32px display size kept literal */ .metric .mk-ctx { font-family: var(--mono); font-size: var(--text-xs); color: var(--fg-faint); margin-top: 8px; line-height: 1.5; } /* --text-xs=11px */ .metric .mk-ctx b { color: var(--signal-deep); } .bar-compare { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .bar-compare .bc { } .bar-compare .bc-l { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; } .bar-compare .bc-l b { font-weight: 700; } .bar-compare .bc-t { height: 10px; border-radius: 6px; background: var(--line-soft); overflow: hidden; } .bar-compare .bc-t i { display: block; height: 100%; border-radius: 6px; background: var(--signal); } /* ---- Account / network ---- */ .recap { border: 1px solid var(--signal-line); background: var(--signal-soft); border-radius: var(--r); padding: 22px; } .recap h3 { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0 0 14px; letter-spacing: -0.02em; } .recap-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 16px; } .recap-stats .rs b { font-family: var(--display); font-weight: 700; font-size: var(--text-2xl); display: block; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* tnum; --text-2xl=24px */ .recap-stats .rs span { font-size: 12px; color: var(--fg-soft); } .network-cue { border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 20px; display: flex; align-items: center; gap: 16px; background: var(--paper); } .network-cue .nc-ico { width: 46px; height: 46px; border-radius: 11px; background: var(--ink); color: var(--signal); display: grid; place-items: center; flex: none; } .bob-sugg.strat { border-color: var(--signal-line); } .bob-sugg.strat:hover { background: var(--signal-soft); } .bob-sugg.strat b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); margin-right: 7px; vertical-align: middle; } /* ============================================================ CAMPAIGNS (£399 / 5 Bob-generated test campaigns) ============================================================ */ .cmp-hero { border: 1px solid var(--signal-line); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--signal-soft), var(--paper)); padding: 26px; } .cmp-hero-b .cmp-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-deep); } .cmp-hero-b h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; margin: 8px 0 10px; } .cmp-hero-b > p { font-size: 14.5px; color: var(--fg-soft); line-height: 1.55; margin: 0 0 20px; max-width: 70ch; } .cmp-hero-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .cmp-price { display: flex; flex-direction: column; } .cmp-price b { font-family: var(--display); font-weight: 700; font-size: 36px; letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .cmp-price span { font-size: 12.5px; color: var(--fg-faint); margin-top: 4px; } .cmp-meta { display: flex; flex-direction: column; gap: 7px; } .cmp-meta div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-soft); } .cmp-meta svg { width: 15px; height: 15px; color: var(--ok); flex: none; } .cmp-angles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .cmp-angle { display: flex; align-items: center; gap: 13px; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 14px 16px; cursor: pointer; transition: border-color .14s, box-shadow .14s; font-family: var(--sans); } .cmp-angle:hover { border-color: var(--line-strong); } .cmp-angle.on { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .cmp-angle .ca-ic { font-size: 22px; flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--signal-soft); border: 1px solid var(--signal-line); color: var(--signal-deep); } .cmp-angle .ca-ic svg { width: 18px; height: 18px; } .cmp-angle .ca-b { flex: 1; min-width: 0; } .cmp-angle .ca-b b { display: block; font-size: 14px; font-weight: 700; } .cmp-angle .ca-b span { font-size: 12.5px; color: var(--fg-soft); } .cmp-angle .ca-ck { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; display: grid; place-items: center; color: #fff; } .cmp-angle.on .ca-ck { background: var(--signal-ink); border-color: var(--signal-ink); } .cmp-angle .ca-ck svg { width: 12px; height: 12px; } .cmp-angle:not(.on) .ca-ck svg { display: none; } .cmp-angle.is-locked { cursor: default; opacity: 0.66; background: var(--paper-2); } .cmp-angle.is-locked:hover { border-color: var(--line); } .cmp-angle.is-locked .ca-ic { background: var(--paper); border-color: var(--line-strong); color: var(--fg-faint); } .cmp-angle .ca-lock { width: 22px; height: 22px; flex: none; display: grid; place-items: center; color: var(--fg-ghost); } .cmp-angle .ca-lock svg { width: 15px; height: 15px; } .cmp-bar { display: flex; align-items: center; gap: 16px; margin-top: 18px; flex-wrap: wrap; } .cmp-genbar { display: flex; align-items: center; gap: 14px; border: 1px solid var(--signal-line); background: var(--signal-soft); border-radius: var(--r); padding: 16px 18px; margin: 22px 0 16px; } .cmp-genbar .cgb-b { flex: 1; } .cmp-genbar .cgb-b b { display: block; font-size: 14.5px; font-weight: 700; } .cmp-genbar .cgb-b span { font-size: 13px; color: var(--fg-soft); } .cgb-spin { width: 22px; height: 22px; border: 2.5px solid var(--signal-line); border-top-color: var(--signal); border-radius: 50%; animation: cgbSpin .8s linear infinite; flex: none; } @keyframes cgbSpin { to { transform: rotate(360deg); } } .cmp-done { display: flex; align-items: center; gap: 14px; border: 1px solid var(--ok-line); background: var(--ok-soft); border-radius: var(--r); padding: 16px 18px; margin: 22px 0 16px; flex-wrap: wrap; } .cmp-done .cmp-done-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--ok); color: #fff; display: grid; place-items: center; flex: none; } .cmp-done .cmp-done-ic svg { width: 20px; height: 20px; } .cmp-done > div { flex: 1; min-width: 180px; } .cmp-done b { display: block; font-size: 14.5px; font-weight: 700; } .cmp-done span { font-size: 13px; color: var(--fg-soft); } /* post-approve test-and-scale plan */ .cmp-plan { border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); padding: 18px; margin-top: 16px; } .cmp-plan-h { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 16px; } .cmp-plan-h b { display: block; font-size: 14.5px; font-weight: 700; } .cmp-plan-h span { font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .cmp-plan-steps { display: flex; flex-direction: column; gap: 12px; } .cps { display: flex; gap: 13px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--paper-2); } .cps-n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 600; background: var(--ink); color: var(--signal); } .cps b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; } .cps span { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; } .cmp-plan-f { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--fg-soft); } .cmp-plan-f b { color: var(--fg); } .cmp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .cmp-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; } .cmp-card-h { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--line); } .cmp-card-h .cc-ic { font-size: 17px; display: inline-grid; place-items: center; color: var(--signal-deep); } .cmp-card-h .cc-ic svg { width: 16px; height: 16px; } .cmp-card-h b { font-size: 14px; font-weight: 700; flex: 1; } .cmp-card-h .cc-gen { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); } .cmp-card-h .cc-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ok); } .cmp-card-h .cc-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .cmp-ad { margin: 14px 15px; border: 1px solid var(--line); border-radius: 9px; padding: 13px; background: var(--paper-2); } .cmp-ad-url { font-family: var(--mono); font-size: 10.5px; color: var(--ok); margin-bottom: 6px; } .cmp-ad-h { font-size: 15px; font-weight: 700; color: var(--signal-deep); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 5px; } .cmp-ad-d { font-size: 12.5px; color: var(--fg-soft); line-height: 1.45; margin-bottom: 8px; } .cmp-ad-cta { font-size: 12.5px; font-weight: 700; color: var(--ink); } .cmp-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 15px 14px; } .cmp-guard { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--ok); } .cmp-guard svg { width: 12px; height: 12px; } .cmp-conv { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); } .cmp-conv b { color: var(--signal-deep); } @media (max-width: 720px) { .cmp-angles, .cmp-grid { grid-template-columns: 1fr; } } /* ============================================================ TERRITORY PICKER MODAL (Manage area) ============================================================ */ .anv-modal-scrim { position: fixed; inset: 0; z-index: 120; background: oklch(0.18 0.03 264 / 0.55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 20px; animation: anvFade .2s ease both; } @keyframes anvFade { from { opacity: 0; } to { opacity: 1; } } .anv-modal { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; animation: anvPop .26s cubic-bezier(.18,1.2,.4,1) both; } @keyframes anvPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } .anv-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .anv-modal-head .amh-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--signal-deep); } .anv-modal-head h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 4px 0 0; } .anv-modal-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--fg-faint); cursor: pointer; padding: 0 4px; } .anv-modal-x:hover { color: var(--fg); } .anv-modal-sub { font-size: 13.5px; color: var(--fg-soft); line-height: 1.5; margin: 12px 0 18px; } .terr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .terr { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 12px 13px; cursor: pointer; transition: border-color .14s, box-shadow .14s, background .14s; font-family: var(--sans); } .terr:hover:not(:disabled) { border-color: var(--signal); } .terr.on { border-color: var(--signal); background: var(--signal-soft); box-shadow: 0 0 0 2px var(--signal-soft); } .terr:disabled { opacity: 0.5; cursor: not-allowed; background: var(--paper-2); } .terr .terr-c { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; } .terr .terr-n { font-size: 12px; color: var(--fg-soft); } .terr .terr-s { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; color: var(--fg-faint); } .terr.on .terr-s { color: var(--signal-deep); } .anv-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; } .umb-checks { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; } /* ============ GROWTH: checkout sheet ============ */ .anv-modal.cko { max-width: 440px; } .cko-box { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); padding: 14px 16px; margin: 16px 0 12px; } .cko-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 5px 0; } .cko-line b { font-weight: 700; } .cko-line.muted { color: var(--fg-faint); font-size: 12.5px; } .cko-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-size: 14px; } .cko-total b { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; } .cko-monthly { font-size: 12px; color: var(--fg-soft); margin-top: 6px; } .cko-monthly b { color: var(--fg); } .cko-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; margin-bottom: 14px; } .cko-brand { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; background: var(--ink); color: #fff; border-radius: 4px; padding: 3px 6px; } .cko-num { font-size: 13px; color: var(--fg-soft); flex: 1; } .cko-change { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--signal-deep); } .cko-fine { font-size: 11.5px; color: var(--fg-faint); text-align: center; margin: 10px 0 0; line-height: 1.5; } .cko-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 8px; animation: cgbSpin .7s linear infinite; } .cko-spin.dark { border-color: var(--line-strong); border-top-color: var(--fg); } .cko-done { text-align: center; padding: 18px 6px 6px; } .cko-done-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; } .cko-done-ic svg { width: 26px; height: 26px; } .cko-done h3 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; } .cko-done p { font-size: 13.5px; color: var(--fg-soft); line-height: 1.55; margin: 0 0 18px; } .bil-invoices { margin-top: 16px; } .bil-inv { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; } .bil-inv:last-child { border-bottom: 0; } .bil-inv span:first-child { flex: 1; color: var(--fg-soft); } .bil-inv b { font-weight: 700; } /* toast */ .anv-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 300; background: var(--ink); color: var(--on-ink, #fff); font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 10px; box-shadow: var(--shadow-lg); max-width: 90vw; text-align: center; animation: filIn .25s ease both; } .anv-toast.out { transition: opacity .3s, transform .3s; opacity: 0; transform: translateX(-50%) translateY(8px); } /* ============ GROWTH: roles ============ */ .roleswitch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--paper-2); padding: 12px 16px; margin-bottom: 20px; } .roleswitch .rs-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-faint); } .rs-pills { display: flex; gap: 6px; flex-wrap: wrap; } .role-pill { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg-soft); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: all .14s; } .role-pill[aria-pressed="true"] { background: var(--ink); color: var(--on-ink, #fff); border-color: var(--ink); } .mcs-bar.readiness { border-left: 3px solid var(--warn); background: linear-gradient(180deg, var(--warn-soft), var(--paper)); } .mcs-bar.readiness .mcs-ico { color: oklch(0.5 0.12 70); } .nav-lock { margin-left: auto; display: inline-grid; place-items: center; width: 18px; height: 18px; opacity: 0.55; } .nav-lock svg { width: 13px; height: 13px; } .grants-lock { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--warn-line); border-left: 3px solid var(--warn); border-radius: var(--r); background: var(--warn-soft); padding: 16px 18px; margin-bottom: 18px; } .grants-lock .gl-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--paper); border: 1px solid var(--warn-line); display: grid; place-items: center; flex: none; color: oklch(0.5 0.12 70); } .grants-lock .gl-ico svg { width: 18px; height: 18px; } .grants-lock b { display: block; font-size: 14px; font-weight: 700; } .grants-lock span { font-size: 13px; color: var(--fg-soft); line-height: 1.5; } .screen.is-locked-soft > *:not(.grants-lock) { opacity: 0.45; pointer-events: none; } .memq { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .mem-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; background: var(--paper); } .mem-row.pending { border-left: 3px solid var(--signal); background: var(--signal-soft); } .mem-av { width: 34px; height: 34px; border-radius: 9px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: #fff; } .mem-b { flex: 1; min-width: 0; } .mem-b b { display: block; font-size: 13.5px; font-weight: 700; } .mem-b span { font-size: 12px; color: var(--fg-soft); } .rev-tiers { border-top: 1px solid var(--line-soft); padding-top: 14px; } .rt-row { display: grid; grid-template-columns: 110px 1fr 44px auto; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; } .rt-row .rt-n { color: var(--fg-soft); } .rt-row b { font-family: var(--display); font-weight: 700; } .rt-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; } .rt-bar i { display: block; height: 100%; border-radius: 4px; background: var(--line-strong); } .rt-row.on .rt-bar i { background: var(--signal); } .rt-row.on .rt-n, .rt-row.on b { color: var(--fg); font-weight: 700; } .rt-now { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); } .rt-row.on .rt-now { color: var(--signal-deep); } /* ============ GROWTH: domain wizard ============ */ .domw { display: flex; flex-direction: column; gap: 14px; } .domw-bob { display: flex; gap: 12px; align-items: flex-start; } .domw-bob b { display: block; font-size: 14px; font-weight: 700; } .domw-bob span { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; } .domw-step { display: flex; gap: 12px; align-items: flex-start; transition: opacity .25s; } .domw-step.is-dim { opacity: 0.35; pointer-events: none; } .dw-n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--ink); color: var(--signal); } .dw-b { flex: 1; min-width: 0; } .dw-b > b { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; } .dw-hint { display: block; font-size: 12px; color: var(--fg-soft); margin-bottom: 8px; line-height: 1.45; } .dw-regs { display: flex; gap: 6px; flex-wrap: wrap; } .dw-reg { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; cursor: pointer; } .dw-reg.on { background: var(--ink); color: #fff; border-color: var(--ink); } .dw-rec { display: flex; align-items: center; gap: 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; flex-wrap: wrap; } .dw-t { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; background: var(--ink); color: #fff; border-radius: 4px; padding: 3px 7px; } .dw-rec code { font-family: var(--mono); font-size: 12px; color: var(--fg); background: var(--paper); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; } .dw-copy { margin-left: auto; background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--signal-deep); } .dw-check { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-soft); margin-top: 10px; line-height: 1.5; } .dw-ok { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: inline-grid; place-items: center; flex: none; } .dw-ok svg { width: 13px; height: 13px; } /* ============ GROWTH: articles ============ */ .arts-list { display: flex; flex-direction: column; gap: 9px; } .art-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; background: var(--paper); } .art-row.drafting { border-style: dashed; background: var(--paper-2); } .art-b { flex: 1; min-width: 0; } .art-b b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .art-b span { font-size: 12px; color: var(--fg-soft); } /* ============ GROWTH: not-MCS-yet front door ============ */ .anv-modal.nmc { max-width: 640px; } .nmc-routes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 14px; } .nmc-route { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); padding: 16px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .nmc-route.feature { border-color: var(--signal-line); background: var(--signal-soft); } .nmc-r-h { display: flex; flex-direction: column; gap: 6px; } .nmc-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); } .nmc-tag.gold { color: var(--signal-deep); } .nmc-r-h b { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; } .nmc-route p { font-size: 12.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; } .nmc-price { font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); } .nmc-route .btn { margin-top: auto; } .nmc-proof { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 2px; } .nmc-proof .input { font-size: 13px; } .nmc-attach { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg-soft); background: var(--paper); border: 1px dashed var(--line-strong); border-radius: 9px; padding: 9px 12px; cursor: pointer; } .nmc-attach svg { width: 14px; height: 14px; } .nmc-attach.on { color: var(--ok); border-style: solid; border-color: var(--ok-line); background: var(--ok-soft); } .nmc-checking { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fg-soft); padding: 10px 0; } .nmc-ok { display: flex; gap: 11px; align-items: flex-start; } .nmc-ok b { display: block; font-size: 13.5px; font-weight: 700; } .nmc-ok span { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; } .nmc-flywheel { display: flex; gap: 13px; align-items: flex-start; border-top: 1px solid var(--line-soft); padding-top: 14px; } .nmc-fw-ic { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--ink); color: var(--signal); display: grid; place-items: center; } .nmc-fw-ic svg { width: 18px; height: 18px; } .nmc-flywheel b { display: block; font-size: 13.5px; font-weight: 700; } .nmc-flywheel span { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; } @media (max-width: 560px) { .nmc-routes { grid-template-columns: 1fr; } } /* ============ GROWTH: areas ============ */ .areas-list { display: flex; flex-direction: column; gap: 8px; } .area-row { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; background: var(--paper); } .area-row.new { animation: filIn .3s ease both; } .ar-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .ar-dot.live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .ar-dot.building { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .ar-b { flex: 1; min-width: 0; } .ar-b b { display: block; font-size: 13.5px; font-weight: 700; } .ar-b span { font-size: 11.5px; color: var(--fg-soft); } .terr-count { font-size: 13.5px; color: var(--fg-soft); } .terr-count b { color: var(--ink); font-weight: 700; } @media (max-width: 480px) { .terr-grid { grid-template-columns: 1fr 1fr; } } .ed-page { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer; flex: none; max-width: 150px; } .ed-page:focus-visible { outline: none; border-color: var(--signal); } /* :focus-visible */ .ed-zoom { flex: none; } .ed-canvas.zoomed { overflow: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ SEO SERVICE × AREA MATRIX ============================================================ */ .seo-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .seo-matrix { border-collapse: collapse; width: 100%; min-width: 440px; } .seo-matrix th { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-soft); padding: 8px 10px; text-align: center; } /* AA: --fg-faint (0.58 L) town headers were ~3.2:1 on white; --fg-soft (0.44) passes 4.5:1 */ .seo-matrix th.sm-svc { text-align: left; color: var(--fg); font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; text-transform: none; white-space: nowrap; } .seo-matrix td { padding: 4px; text-align: center; } .sm-cell { width: 38px; height: 34px; border-radius: 8px; border: 1.5px dashed var(--line-strong); background: var(--paper); color: var(--fg-ghost); font-size: 16px; cursor: pointer; display: inline-grid; place-items: center; transition: all .14s; } .sm-cell:hover { border-color: var(--signal); color: var(--signal-deep); } .sm-cell.on { background: var(--ok); border: 1.5px solid var(--ok); color: #fff; } @media (max-width: 600px) { .seo-matrix-wrap { margin: 0 -4px; } } /* Services-led coverage (replaced the confusing service×town grid) */ .svc-cov-list { display: flex; flex-direction: column; gap: 10px; } .svc-cov { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); } .svc-cov .sc-info { flex: 1; min-width: 0; } .svc-cov .sc-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; } .svc-cov .sc-top b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .svc-cov .sc-n { font-size: 12.5px; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 6px; } .svc-cov .sc-n.ok { color: var(--ok-ink); font-weight: 600; } /* was #1d7a4d — token holds same hex */ .svc-cov .sc-n .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-ink); } .svc-cov .sc-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; } .svc-cov .sc-bar span { display: block; height: 100%; background: var(--signal-ink); border-radius: 999px; transition: width .3s; } /* was #aa4810 */ .svc-cov .sc-pub { flex: none; } .svc-cov .sc-done { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--ok-ink); background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; } @media (max-width: 560px) { .svc-cov { flex-wrap: wrap; } .svc-cov .sc-pub, .svc-cov .sc-done { width: 100%; text-align: center; } } /* "Your rankings, climbing" — honest GSC-style visual */ .rank-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .rk-stat { background: var(--canvas); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; } .rk-v { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* tnum */ .rk-l { font-size: 11.5px; color: var(--fg-soft); margin-top: 2px; } .rk-d { font-size: 11px; color: var(--ok-ink); font-weight: 600; margin-top: 4px; } /* was #1d7a4d */ .rank-chart { width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 6px 8px; } .rk-svg { width: 100%; height: auto; display: block; } .rk-line { fill: none; stroke: var(--signal-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* was #aa4810 */ .rk-dot { fill: var(--signal-ink); } .rk-dot.end { stroke: #fff; stroke-width: 2; } .rk-grid { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; } .rk-gl, .rk-xl { font-family: var(--mono); font-size: 9px; fill: var(--fg-soft); } @media (max-width: 620px) { .rank-stats { grid-template-columns: repeat(2, 1fr); } } /* "Every page Bob's written for you" — full transparency: read + flag any page */ .bob-pages { display: flex; flex-direction: column; gap: 9px; } .bp-row { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 12px 14px; transition: border-color .14s; } .bp-row.flagged { border-color: oklch(0.62 0.14 70); background: var(--warn-soft); } .bp-head { display: flex; align-items: center; gap: 12px; } .bp-b { flex: 1; min-width: 0; } .bp-t { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bp-sub { font-size: 11.5px; color: var(--fg-soft); margin-top: 2px; } .bp-acts { display: flex; align-items: center; gap: 7px; flex: none; } .bp-view, .bp-flag { font-family: var(--sans); font-size: 12px; font-weight: 600; border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background .14s, border-color .14s, color .14s; } .bp-view { color: var(--fg); background: var(--paper); border: 1px solid var(--line-strong); } .bp-view:hover { border-color: var(--signal); background: var(--signal-soft); color: var(--signal-deep); } .bp-view svg { width: 13px; height: 13px; } .bp-flag { color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line); } .bp-flag:hover { border-color: oklch(0.62 0.14 70); color: oklch(0.5 0.14 70); } .bp-flag.on { color: oklch(0.5 0.14 70); border-color: oklch(0.62 0.14 70); background: var(--warn-soft); font-weight: 700; } .bp-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed oklch(0.62 0.14 70 / 0.4); font-size: 12.5px; color: oklch(0.42 0.1 70); line-height: 1.45; } .bp-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; } .bp-note b { font-weight: 700; } .bp-empty { font-size: 13px; color: var(--fg-soft); padding: 4px 2px; } .bp-note em { font-style: italic; } /* "Ask Bob to redo it" — the action that closes the flag→fix loop */ .bp-redo { font-family: var(--sans); font-size: 12px; font-weight: 700; border-radius: var(--r-sm); padding: 7px 12px; cursor: pointer; white-space: nowrap; color: #fff; background: var(--signal); border: 1px solid var(--signal); transition: background .14s; } .bp-redo:hover { background: var(--signal-deep); } .bp-redo:disabled { opacity: .65; cursor: default; } /* inline note editor (replaces the old window.prompt) */ .bp-edit { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); } .bp-ta { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px; line-height: 1.45; color: var(--fg); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; } .bp-ta:focus-visible { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } /* :focus-visible */ .bp-edit-acts { display: flex; gap: 7px; margin-top: 8px; flex-wrap: wrap; } @media (max-width: 560px) { .bp-head { flex-wrap: wrap; } .bp-acts { width: 100%; } .bp-view, .bp-flag, .bp-redo { flex: 1; justify-content: center; text-align: center; } } /* ============================================================ BOB-AWARE BLOCK BUILDER (editor Blocks mode) ============================================================ */ .ed-mode { display: flex; gap: 4px; padding: 8px 16px 0; } .em-tab { flex: 1; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px; cursor: pointer; transition: background .14s, color .14s; } .em-tab[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } .ed-blocks { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; } .ebk-intro { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; margin: 0 0 14px; } .ebk-list { display: flex; flex-direction: column; gap: 8px; } .ebk-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 11px 12px; } .ebk-box.locked { background: var(--paper-2); border-style: dashed; } .ebk-grip { color: var(--fg-ghost); font-size: 12px; cursor: grab; width: 10px; flex: none; } .ebk-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--signal-soft); color: var(--signal-deep); } .ebk-ic svg { width: 16px; height: 16px; } .ebk-b { flex: 1; min-width: 0; } .ebk-b b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; } .ebk-b span { font-size: 11.5px; color: var(--fg-faint); line-height: 1.35; display: block; } .ebk-st { font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; flex: none; } .ebk-st.done { background: var(--ok-soft); color: var(--ok); } .ebk-st.todo { background: var(--warn-soft); color: oklch(0.5 0.12 70); } .ebk-lock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--signal-deep); white-space: nowrap; flex: none; } .ebk-lock svg { width: 11px; height: 11px; } .ebk-acts { display: flex; align-items: center; gap: 4px; flex: none; } .ebk-fill { font-family: var(--sans); font-size: 11px; font-weight: 700; color: #fff; background: var(--signal); border: 0; border-radius: 6px; padding: 6px 9px; cursor: pointer; white-space: nowrap; transition: background .14s; } .ebk-fill:hover { background: var(--signal-deep); } .ebk-x { background: none; border: 0; color: var(--fg-ghost); font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; } .ebk-x:hover { color: var(--block); } .ebk-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .ebk-add-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 9px; } .ebk-palette { display: flex; flex-wrap: wrap; gap: 7px; } .ebk-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--fg); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: border-color .14s, background .14s; } .ebk-chip:hover { border-color: var(--signal); background: var(--signal-soft); color: var(--signal-deep); } .ebk-chip svg { width: 13px; height: 13px; } /* ============================================================ GROWTH LADDER (account tiers: Non-MCS → MCS → Umbrella) ============================================================ */ .ladder { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-sm); padding: 22px; } .ladder-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .rung { border: 1px solid var(--line); border-radius: var(--r); padding: 16px; background: var(--paper-2); position: relative; } .rung.current { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); background: var(--paper); } .rung.done { opacity: 0.82; } .rung-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .rung-n { width: 24px; height: 24px; border-radius: 7px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; background: var(--canvas2); color: var(--fg-faint); } .rung.done .rung-n { background: var(--ok); color: #fff; } .rung.current .rung-n { background: var(--signal); color: #fff; } .rung-h b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; flex: 1; } .rung-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 7px; } .rung.done .rung-tag { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); } .rung.current .rung-tag { background: var(--signal-soft); color: var(--signal-deep); border-color: var(--signal-line); } .rung p { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; margin: 0; } .rung p b { color: var(--fg); font-weight: 700; } @media (max-width: 720px) { .ladder-track { grid-template-columns: 1fr; } } /* ============================================================ GRANTS & SCHEMES ENGINE ============================================================ */ .grants-hero { display: flex; gap: 22px; align-items: center; padding: 26px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--signal-soft), var(--paper)); border: 1px solid var(--signal-line); flex-wrap: wrap; } .grants-hero .gh-l { flex: 1; min-width: 240px; } .grants-hero .gh-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--signal-deep); } .grants-hero h2 { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.03em; line-height: 1.08; margin: 8px 0 10px; } .grants-hero .gh-l p { font-size: 14px; color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 60ch; } .grants-hero .gh-sync { display: flex; align-items: center; gap: 11px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; flex: none; } .gh-sync .gs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); flex: none; } .gh-sync b { display: block; font-size: 13.5px; font-weight: 700; } .gh-sync span { font-size: 12px; color: var(--fg-faint); } .grants-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .grant-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 18px; box-shadow: var(--shadow-sm); } .grant-card.soon { background: var(--paper-2); border-style: dashed; } .grant-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .grant-top b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .grant-v { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ok); white-space: nowrap; } .grant-st { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 5px; padding: 3px 8px; white-space: nowrap; } .grant-card p { font-size: 13px; color: var(--fg-soft); line-height: 1.5; margin: 0 0 10px; } .grant-for { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--signal-deep); } @media (max-width: 720px) { .grants-grid { grid-template-columns: 1fr; } } /* ============================================================ MCS BAR + BUDGET FILTER (services screen) ============================================================ */ .mcs-bar { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--ok-line); border-radius: var(--r); background: var(--ok-soft); flex-wrap: wrap; } .mcs-bar .mcs-ico { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--ok); color: #fff; display: grid; place-items: center; } .mcs-bar .mcs-ico svg { width: 21px; height: 21px; } .mcs-bar .mcs-b { flex: 1; min-width: 200px; } .mcs-bar .mcs-b b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .mcs-bar .mcs-b span { font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .mcs-bar .mcs-link { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ok); text-decoration: none; white-space: nowrap; flex: none; } .svc-range { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; white-space: nowrap; } /* SELF-SERVE price cell: editable affordance + the "not set" prompt + inline editor. */ .svc-range.editable { cursor: pointer; transition: border-color .15s, background .15s; } .svc-range.editable:hover { border-color: var(--ok-line); background: var(--ok-soft); } .svc-range .svc-range-unset { color: var(--fg-faint); font-style: italic; } .svc-range .svc-range-hidden { color: var(--fg-faint); font-style: italic; text-decoration: line-through; text-decoration-thickness: 1px; } .svc-range .svc-range-edit { margin-left: 7px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ok-ink); } .svc-price-edit { border: 1px solid var(--ok-line); background: var(--ok-soft); border-radius: var(--r); padding: 13px 15px; margin-top: -4px; } .svc-price-edit .spe-state { font-size: 12.5px; color: var(--fg-soft); margin: 0 0 10px; line-height: 1.45; } .svc-price-edit .spe-state.spe-warn { color: var(--block); font-weight: 500; } .svc-price-edit .spe-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; } .svc-price-edit .spe-hide { color: var(--block); } .svc-price-edit .spe-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; } .svc-price-edit .spe-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--fg-soft); text-transform: uppercase; letter-spacing: 0.03em; } .svc-price-edit .spe-money { position: relative; display: inline-flex; align-items: center; } .svc-price-edit .spe-money::before { content: "£"; position: absolute; left: 11px; font-family: var(--mono); font-size: 14px; color: var(--fg-soft); pointer-events: none; } .svc-price-edit .spe-money .input { width: 120px; padding-left: 22px; font-size: 14px; } .svc-price-edit .spe-hint { font-size: 12.5px; color: var(--fg-soft); margin: 10px 0 0; line-height: 1.45; } .svc-price-edit .spe-msg { font-size: 12.5px; color: var(--block); margin: 8px 0 0; font-weight: 500; } /* Checklist: the price_ranges row's "{decided}/{total} services priced or hidden" count. Two classes beat the page's inline ".ck-meta span" muted rule so the status stands out. */ .ck-meta .ck-val { display: block; color: var(--ok-ink); font-weight: 600; font-size: .83rem; margin-top: 3px; } .filter-demo { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--paper-2); } .fil-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .fil-head span { font-size: 13px; color: var(--fg-soft); } .fil-head b { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--signal-deep); } .fil-range { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: var(--line-strong); outline: none; margin: 6px 0 16px; } .fil-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--signal); cursor: pointer; box-shadow: 0 2px 8px var(--signal-glow); border: 3px solid #fff; } .fil-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--signal); cursor: pointer; border: 3px solid #fff; } .fil-chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 34px; } .fil-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); border: 1px solid var(--ok-line); animation: filIn .25s ease both; } .fil-chip .fc-r { font-family: var(--mono); font-weight: 400; opacity: 0.8; } .fil-chip.out { background: var(--paper); color: var(--fg-ghost); border-color: var(--line); } @keyframes filIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } .fil-note { font-size: 11.5px; color: var(--fg-faint); margin: 12px 0 0; } /* ============================================================ AREA LOCK (territory exclusivity) ============================================================ */ .area-lock { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--signal-line); border-radius: var(--r); background: linear-gradient(120deg, var(--signal-soft), var(--paper)); flex-wrap: wrap; } .area-lock .al-ico { width: 42px; height: 42px; border-radius: 11px; flex: none; background: var(--ink); color: var(--signal); display: grid; place-items: center; } .area-lock .al-ico svg { width: 20px; height: 20px; } .area-lock .al-b { flex: 1; min-width: 200px; } .area-lock .al-b b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .area-lock .al-b span { font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .area-lock .al-b span b { display: inline; color: var(--signal-deep); font-weight: 600; } .area-lock .al-form { display: flex; gap: 8px; flex: 1 1 320px; min-width: 240px; } .area-lock .al-form .al-in { flex: 1; min-width: 0; } .area-lock .al-form .btn { flex: none; white-space: nowrap; } .al-hint { max-width: 64ch; } @media (max-width: 640px) { .area-lock .al-form { flex-basis: 100%; } .area-lock .al-form .btn { flex: 1 1 auto; } } /* SEO education — teach what SEO is + what it does for the firm. UX audit #4: this explainer was tall enough to push the coverage MAP below the fold and steal its focus. Tightened (smaller heading, leaner step cards, less margin) so the map is the clear hero of the screen — no content removed. */ .seo-edu { margin-bottom: 16px; } .seo-edu-top { max-width: 72ch; margin-bottom: 13px; } .seo-edu-h { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 7px 0 6px; line-height: 1.15; } .seo-edu-lede { font-size: 14px; color: var(--fg-soft); line-height: 1.55; margin: 0; } .seo-edu-lede b { color: var(--fg); font-weight: 700; } .seo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .seo-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px 12px; box-shadow: var(--shadow-sm); } .seo-step .ss-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--signal); font-family: var(--display); font-weight: 700; font-size: 13.5px; margin-bottom: 9px; } .seo-step h4 { font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; margin: 0 0 5px; } .seo-step p { font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; margin: 0; } .seo-step p b { color: var(--fg); font-weight: 700; } @media (max-width: 720px) { .seo-steps { grid-template-columns: 1fr; } } /* SEO service-area MAP picker (Leaflet) — the hero of this screen (UX audit #4): a slightly stronger frame + shadow lifts it above the leaner explainer above. */ .area-map { background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px; margin-bottom: 18px; } .amap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .amap-head .al-ico { width: 42px; height: 42px; border-radius: 11px; flex: none; background: var(--ink); color: var(--signal); display: grid; place-items: center; } .amap-head .al-ico svg { width: 21px; height: 21px; } .amap-head .al-b b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.02em; } .amap-head .al-b span { font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .amap-grid { display: grid; grid-template-columns: 1.7fr 300px; gap: 16px; align-items: stretch; } .amap-canvas { position: relative; min-height: 420px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-strong); background: var(--canvas); z-index: 0; } .amap-canvas .leaflet-container { height: 100%; width: 100%; font-family: var(--sans); background: var(--canvas); } .amap-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-faint); font-family: var(--mono); font-size: 12px; } .amap-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .amap-ctl { display: flex; flex-direction: column; gap: 7px; } .amap-ctl-l { font-size: 12.5px; font-weight: 700; color: var(--fg-soft); } .amap-ctl-l b { color: var(--signal-deep); font-weight: 700; } .amap-range { width: 100%; accent-color: var(--signal-ink); cursor: pointer; } /* was #aa4810 */ .amap-base-row { display: flex; gap: 6px; } .amap-base-row .input { flex: 1; min-width: 0; height: 40px; padding: 0 11px; font-size: 13.5px; } .amap-base-row .btn { flex: none; height: 40px; } /* match input height — field+button read as one unit (UX audit) */ .amap-sel { border-top: 1px solid var(--line); padding-top: 13px; } .amap-clear { background: none; border: 0; color: var(--fg-faint); font-family: var(--sans); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; } .amap-clear:hover { color: var(--block); } .amap-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 132px; overflow-y: auto; } .amap-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--fg); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: 999px; padding: 3px 5px 3px 9px; } .amap-chip button { background: none; border: 0; color: var(--signal-deep); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 50%; } .amap-chip button:hover { color: var(--block); } /* committed (locked-in) coverage — a filled terracotta chip with a lock, NOT removable on the map; it survives a marker move, Clear all + a downgrade. */ .amap-chip.locked { background: var(--signal-ink); border-color: var(--signal-ink); color: #fff; padding-right: 8px; } .amap-lock { display: inline-flex; align-items: center; color: #fff; opacity: .92; } .amap-lock svg { width: 11px; height: 11px; } .amap-side > .btn-primary { margin-top: auto; } .amap-fallback { font-size: 12px; margin: 2px 0 0; text-align: center; } .amap-typelink { background: none; border: 0; color: var(--signal-deep); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; } .amap-typebox { margin-top: 16px; } .amap-cap { font-size: 12px; line-height: 1.45; color: #8a3a08; background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--r-sm); padding: 9px 11px; } .amap-cap b { font-weight: 700; } .amap-cap button { background: none; border: 0; color: var(--signal-ink); font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0; font-size: 12px; } /* was #aa4810 */ .amap-cap.pulse { animation: amap-cap-pulse .5s ease; } @keyframes amap-cap-pulse { 0%,100% { box-shadow: none; } 35% { box-shadow: 0 0 0 4px var(--signal-soft); } } @media (max-width: 760px) { .amap-grid { grid-template-columns: 1fr; } .amap-canvas { min-height: 300px; } } /* Leaflet divIcon markers — town dots + the firm's base pin */ .leaflet-div-icon.amap-town, .leaflet-div-icon.amap-base-pin { background: transparent; border: 0; } .amap-town { display: flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; } .amap-town i { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--fg-ghost); box-shadow: 0 1px 3px rgba(20,20,30,.35); flex: none; transition: transform .12s, background .12s, border-color .12s; } .amap-town b { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--fg); background: rgba(255,255,255,.92); padding: 1px 5px; border-radius: 5px; box-shadow: 0 1px 3px rgba(20,20,30,.18); border: 1px solid var(--line); } .amap-town:hover i { border-color: var(--signal); } .amap-town.on i { background: var(--signal-ink); border-color: #fff; transform: scale(1.3); } /* was #aa4810 ×1 */ .amap-town.on b { background: var(--signal-ink); color: #fff; border-color: var(--signal-ink); font-weight: 700; } /* was #aa4810 ×2 */ /* committed/locked town — a halo ring marks coverage that can't be removed here */ .amap-town.locked i { box-shadow: 0 0 0 2px var(--signal-soft), 0 0 0 3px var(--signal-ink), 0 1px 3px rgba(20,20,30,.35); } .amap-town.locked { cursor: default; } .amap-base-pin span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--signal-ink), 0 2px 8px rgba(20,20,30,.5); } /* was #aa4810 */ .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7); } /* ============================================================ PAGES HUB + MARKETING HUB ============================================================ */ .pages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .page-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); padding: 18px; display: flex; flex-direction: column; gap: 8px; } .page-card .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .page-card .pc-top b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .page-card .pc-lock { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--signal-deep); background: var(--signal-soft); border: 1px solid var(--signal-line); padding: 3px 8px; border-radius: 999px; } .page-card .pc-lock svg { width: 11px; height: 11px; } .page-card .pc-d { font-size: 13px; color: var(--fg-soft); line-height: 1.5; margin: 0; flex: 1; } .page-card .pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; } .page-card .pc-count { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); } .page-card .pc-actions { display: flex; gap: 6px; } .mkt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .mkt-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); padding: 18px; display: flex; gap: 14px; align-items: flex-start; } .mkt-card .mkt-ico { width: 44px; height: 44px; border-radius: 11px; flex: none; background: var(--signal-soft); border: 1px solid var(--signal-line); color: var(--signal-deep); display: grid; place-items: center; } .mkt-card .mkt-ico svg { width: 22px; height: 22px; } .mkt-card .mkt-b { flex: 1; min-width: 0; } .mkt-card .mkt-b b { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .mkt-card .mkt-st { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); white-space: nowrap; flex: none; } .mkt-card .mkt-b p { font-size: 13px; color: var(--fg-soft); line-height: 1.5; margin: 6px 0 12px; } @media (max-width: 720px) { .pages-grid, .mkt-grid { grid-template-columns: 1fr; } } /* ============================================================ SMART QUESTIONS (Bob-tunable) — locked property layer + editor ============================================================ */ .lock-banner { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(120deg, var(--paper-2), var(--paper)); flex-wrap: wrap; } .lock-banner .lb-ico { width: 40px; height: 40px; border-radius: 11px; flex: none; background: var(--ink); color: var(--signal); display: grid; place-items: center; } .lock-banner .lb-ico svg { width: 20px; height: 20px; } .lock-banner .lb-body { flex: 1; min-width: 180px; } .lock-banner .lb-body b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .lock-banner .lb-body span { font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .lock-banner .lb-chain { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .lock-banner .lc { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; padding: 5px 10px; border-radius: 6px; background: var(--canvas); border: 1px solid var(--line-strong); color: var(--fg-soft); white-space: nowrap; } .lock-banner .lc.open { background: var(--signal-soft); border-color: var(--signal-line); color: var(--signal-deep); font-weight: 600; } .lock-banner .lca { color: var(--fg-ghost); font-size: 12px; } .q-list { display: flex; flex-direction: column; gap: 12px; } .q-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-sm); overflow: hidden; } .q-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .q-grip { color: var(--fg-ghost); cursor: grab; flex: none; } .q-grip svg { width: 16px; height: 16px; display: block; } .q-num { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 12px; background: var(--ink); color: var(--on-ink); } .q-title { flex: 1; min-width: 0; font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--fg); border: 1px solid transparent; border-radius: 7px; padding: 7px 9px; background: transparent; transition: border-color .14s, background .14s; } .q-title:hover { background: var(--paper-2); } .q-title:focus-visible { outline: none; border-color: var(--signal); background: var(--paper); box-shadow: 0 0 0 3px var(--signal-soft); } /* :focus-visible */ .q-type-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); border: 1px solid var(--line-strong); border-radius: 5px; padding: 4px 8px; white-space: nowrap; flex: none; } .q-del { flex: none; background: none; border: 0; color: var(--fg-ghost); cursor: pointer; padding: 6px; border-radius: 6px; transition: color .14s, background .14s; } .q-del:hover { color: var(--block); background: var(--block-soft); } .q-del svg { width: 16px; height: 16px; display: block; } .q-opts { padding: 0 16px 14px 54px; display: flex; flex-direction: column; gap: 7px; } .q-opt { display: flex; align-items: center; gap: 9px; } .q-opt .qo-mark { width: 15px; height: 15px; border: 1.5px solid var(--line-strong); flex: none; } .q-card[data-type="choice"] .qo-mark, .q-card[data-type="scale"] .qo-mark { border-radius: 50%; } .q-card[data-type="multi"] .qo-mark { border-radius: 4px; } .q-opt input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 13px; color: var(--fg); border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; background: transparent; } .q-opt input:hover { background: var(--paper-2); } .q-opt input:focus-visible { outline: none; border-color: var(--signal); background: var(--paper); box-shadow: 0 0 0 2px var(--signal-soft); } /* :focus-visible */ .q-opt .qo-del { background: none; border: 0; color: var(--fg-ghost); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; } .q-opt .qo-del:hover { color: var(--block); } .q-opt-add { font-family: var(--mono); font-size: 11.5px; color: var(--signal-deep); background: none; border: 0; cursor: pointer; padding: 4px 0; text-align: left; display: inline-flex; align-items: center; gap: 6px; } .q-text-note, .q-scale-note { font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); padding: 2px 0; } .q-guard { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--ok); padding: 0 16px 12px 54px; } .q-guard svg { width: 12px; height: 12px; } .q-guard.warn { color: oklch(0.5 0.12 70); } .q-add { margin-top: 14px; } .q-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .q-type { text-align: left; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 13px; cursor: pointer; transition: border-color .14s, box-shadow .14s; font-family: var(--sans); } .q-type:hover { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .q-type b { display: block; font-size: 13.5px; font-weight: 700; color: var(--fg); } .q-type span { font-size: 12px; color: var(--fg-soft); } @media (max-width: 720px) { .q-types { grid-template-columns: 1fr 1fr; } .q-opts, .q-guard { padding-left: 16px; } } /* ============================================================ SHOPIFY-STYLE SKIN EDITOR (picker screen) ============================================================ */ .content:has(.screen[data-screen="picker"][data-active]) { max-width: none; padding: 0; } /* full-screen editor — hide dashboard sidebar while tuning (Shopify-style) so the preview gets real room */ #view-app:has(.screen[data-screen="picker"][data-active]) { grid-template-columns: 1fr; } /* On phones/tablets the fixed bottom tab-bar (<=920px) would float over the editor's Bob composer — reserve its height at the editor's foot so the send control stays tappable. Full-bleed sides are kept (0). */ @media (max-width: 920px) { .content:has(.screen[data-screen="picker"][data-active]) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); } } #view-app:has(.screen[data-screen="picker"][data-active]) .side { display: none; } /* grid-template-rows: minmax(0,1fr) is load-bearing — without an explicit row track the single implicit row sizes to Bob's tall content (~3300px) instead of the container height, so the chat composer was pushed thousands of px below the fold (clipped by overflow:hidden) and couldn't be typed in. Constraining the row + the body's min-height:0 keeps the composer pinned in view. The 76px offset matches the app top-bar height above the editor (was 57). */ .editor { display: grid; grid-template-columns: 132px 1fr 332px; grid-template-rows: minmax(0, 1fr); height: calc(100vh - 76px); background: var(--canvas); overflow: hidden; } .ed-rail { background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; padding: 12px 10px; } .ed-rail .erl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); padding: 4px 6px 10px; } .ed-skin { display: block; width: 100%; border: 1px solid var(--line); border-radius: 11px; padding: 7px; background: var(--paper); cursor: pointer; margin-bottom: 8px; text-align: left; transition: border-color .14s, box-shadow .14s; font-family: var(--sans); } .ed-skin:hover { border-color: var(--line-strong); } .ed-skin[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .ed-skin .esw { height: 40px; border-radius: 7px; display: flex; align-items: flex-end; gap: 3px; padding: 6px; margin-bottom: 7px; } .ed-skin .esw i { width: 8px; height: 8px; border-radius: 2px; } .ed-skin b { display: block; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: -0.01em; line-height: 1.15; } .ed-skin span { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); } .ed-stage { display: flex; flex-direction: column; min-width: 0; background: oklch(0.93 0.005 264); } .ed-toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); } .ed-toolbar .dots { display: flex; gap: 6px; flex: none; } .ed-toolbar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); } .ed-toolbar .url { font-family: var(--mono); font-size: 12px; color: var(--fg-faint); background: var(--canvas); border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; text-align: center; flex: 1; max-width: 320px; margin: 0 auto; } .ed-vp { flex: none; } .ed-canvas { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 18px; } .ed-frame { background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line-strong); flex: none; transition: width .3s ease, height .3s ease, border-radius .3s ease; } .ed-frame.mobile { border-radius: 30px; } .ed-frame iframe { border: 0; display: block; background: #fff; transform-origin: top left; } .ed-bob { background: var(--paper); border-left: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; } .ed-bob-head { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 11px; align-items: center; } /* Bob's persistent avatar — animated branded emblem (matches the typing state) */ .bob-face { width: 38px; height: 38px; border-radius: 11px; flex: none; background: var(--ink); position: relative; overflow: hidden; display: grid; place-items: center; } .bob-face::before { content: ""; position: absolute; inset: -32%; background: conic-gradient(from 0deg, transparent 0deg, var(--signal) 70deg, oklch(0.7 0.16 290) 150deg, transparent 230deg); animation: bobspin 3.8s linear infinite; } .bob-face .core { position: relative; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3.5px var(--ink); } @media (prefers-reduced-motion: reduce) { .bob-face::before { animation: none; } } .ed-bob-head .bob-badge { width: 36px; height: 36px; border-radius: 10px; } .ed-bob-head .ebh-n { flex: 1; min-width: 0; } .ed-bob-head .ebh-n b { font-family: var(--display); font-size: 15px; display: block; letter-spacing: -0.01em; } .ed-bob-head .ebh-status { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 6px; } .ed-bob-head .ebh-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft); } .ed-bob-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 13px; } .bob-msg { background: var(--paper-2); border: 1px solid var(--line); border-radius: 13px; border-top-left-radius: 4px; padding: 12px 14px; font-size: 13px; line-height: 1.5; animation: scrIn .3s ease both; } .bob-msg .who { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--signal-deep); display: block; margin-bottom: 5px; } .bob-msg b { font-weight: 700; } .bob-msg.me { background: var(--ink); color: var(--on-ink); border: 0; border-top-left-radius: 13px; border-top-right-radius: 4px; margin-left: 32px; } .bob-msg.me .who { color: var(--signal-line); } .bob-msg.warn { border-color: var(--warn-line); background: var(--warn-soft); } .bob-ctrl { display: flex; flex-direction: column; } .bob-ctrl label, .bob-lbl { font-size: 12px; font-weight: 700; color: var(--fg-soft); margin-bottom: 8px; } .bob-ctrl .tune-input { width: 100%; max-width: none; } .bob-sugg { border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; cursor: pointer; transition: border-color .14s, background .14s; text-align: left; background: var(--paper); font-family: var(--sans); } .bob-sugg:hover { border-color: var(--signal-line); background: var(--signal-soft); } .bob-sugg b { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; } .bob-sugg span { color: var(--fg-soft); font-size: 12px; } .ed-bob-foot { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--paper); } .composer { border: 1.5px solid var(--line-strong); border-radius: 16px; background: var(--paper); transition: border-color .15s, box-shadow .15s; } .composer:focus-within { border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); } .composer-attach { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 10px 0; } .composer-attach:empty { display: none; } .bob-chip { position: relative; width: 54px; height: 54px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); flex: none; background: var(--paper-2); } .bob-chip img, .bob-chip video { width: 100%; height: 100%; object-fit: cover; display: block; } .bob-chip .vidtag { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,.65); color: #fff; border-radius: 4px; font-size: 8px; padding: 1px 4px; font-family: var(--mono); letter-spacing: .04em; } .bob-chip .rm { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; padding: 0; } .bob-chip .rm svg { width: 10px; height: 10px; } .composer-row { display: flex; align-items: flex-end; gap: 4px; padding: 7px 8px; } .composer-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--fg-faint); cursor: pointer; display: grid; place-items: center; transition: background .14s, color .14s; } .composer-icon:hover { background: var(--paper-2); color: var(--signal-deep); } .composer-icon svg { width: 19px; height: 19px; } .composer-input { flex: 1; border: 0; background: transparent; resize: none; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--fg); padding: 8px 2px; max-height: 120px; min-height: 22px; outline: none; } .composer-input::placeholder { color: var(--fg-ghost); } .composer-send { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .14s, transform .12s, opacity .14s; } .composer-send:hover:not(:disabled) { background: var(--signal-deep); } .composer-send:active:not(:disabled) { transform: scale(.92); } .composer-send:disabled { opacity: .4; cursor: not-allowed; background: var(--line-strong); } .composer-send svg { width: 17px; height: 17px; } .composer-hint { font-size: 11px; color: var(--fg-faint); margin: 9px 4px 2px; text-align: center; } .composer-hint b { color: var(--signal-deep); font-weight: 600; } /* message media */ .bob-media { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .bob-media img, .bob-media video { width: 100%; max-width: 188px; border-radius: 10px; display: block; border: 1px solid var(--line-ink); } .bob-msg.me .bob-media:last-child:only-child, .bob-msg.me .bob-media:last-child { margin-bottom: 6px; } /* typing emblem — the "Bob is thinking" indicator */ .bob-typing { display: flex; gap: 10px; align-items: flex-end; animation: scrIn .25s ease both; } .bob-typing .bob-av { width: 32px; height: 32px; border-radius: 10px; flex: none; background: var(--ink); display: grid; place-items: center; position: relative; overflow: hidden; } .bob-typing .bob-av::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent 0deg, var(--signal) 90deg, transparent 200deg); animation: bobspin 1.05s linear infinite; } .bob-typing .bob-av::after { content: ""; position: relative; width: 24px; height: 24px; border-radius: 7px; background: var(--ink); display: block; box-shadow: 0 0 0 1px var(--ink); } .bob-typing .bob-av .core { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: #fff; } @keyframes bobspin { to { transform: rotate(360deg); } } .bob-typing .dots { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; border-bottom-left-radius: 4px; padding: 13px 15px; display: flex; gap: 5px; align-items: center; } .bob-typing .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-ghost); animation: bobdot 1.25s infinite ease-in-out; } .bob-typing .dots i:nth-child(2) { animation-delay: .16s; } .bob-typing .dots i:nth-child(3) { animation-delay: .32s; } @keyframes bobdot { 0%, 65%, 100% { transform: translateY(0); opacity: .45; } 32% { transform: translateY(-5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .bob-typing .bob-av::before, .bob-typing .dots i { animation: none !important; } } /* native composer on iPad / phone — sticky bottom + safe area */ @media (max-width: 1100px) { .ed-bob-foot { position: sticky; bottom: 0; z-index: 2; padding-bottom: max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px oklch(0.2 0.02 264 / 0.05); } } @media (max-width: 1100px) { .editor { grid-template-columns: 1fr; height: auto; grid-template-rows: auto 60vh auto; } .ed-rail { display: flex; gap: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .ed-rail .erl { display: none; } .ed-skin { width: 132px; flex: none; margin-bottom: 0; } .ed-bob { border-left: 0; border-top: 1px solid var(--line); } /* toolbar needs ~940px for one row — let it wrap on anything narrower */ .ed-toolbar { flex-wrap: wrap; row-gap: 9px; } .ed-toolbar .url { flex: 1 1 120px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* phone: the toolbar was one 978px non-wrapping row — controls past ~354px (page select, Desktop/Mobile, zoom, Open, Apply skin) were cut out of frame. Wrap into rows, drop the decorative browser chrome, give everything 44px. */ @media (max-width: 700px) { .ed-toolbar { padding: 12px; } .ed-toolbar .dots, .ed-toolbar .url { display: none; } .ed-page { flex: 1 1 140px; min-width: 0; max-width: none; height: 44px; min-height: 44px; } .ed-toolbar .btn { min-height: 44px; } .ed-vp, .ed-zoom { flex: 1 1 auto; display: flex; } .ed-vp button, .ed-zoom button { flex: 1; min-height: 40px; } #edOpen { flex: 1 1 auto; } #edApply { flex: 2 1 auto; } /* Bob panel: tabs, block boxes and palette chips get real hit areas */ .em-tab { min-height: 44px; } .ebk-fill { min-height: 40px; padding: 8px 13px; } .ebk-x { padding: 10px 12px; font-size: 18px; } .ebk-chip { min-height: 44px; padding: 8px 14px; } .bob-sugg { min-height: 44px; } /* Preview canvas on a phone: fitFrame() scales the 1280 desktop base by availW/baseW (~0.27 at 390px) → an unreadable postage stamp. Override the JS-set inline transform/size so the firm sees a REAL, readable preview: render the iframe at a true mobile viewport (≈full canvas width) at 100% scale, and let the iframe scroll its own content vertically. The canvas gets generous height so it's a usable phone-sized preview, not a thumbnail. Desktop (>700px) keeps fitFrame's exact 1280 / 390 scaling untouched. */ .ed-canvas { padding: 0; align-items: stretch; justify-content: stretch; overflow: hidden; min-height: 70vh; } .ed-frame { width: 100% !important; height: 100% !important; min-height: 70vh; border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; } .ed-frame iframe { width: 100% !important; height: 100% !important; min-height: 70vh; transform: none !important; /* drop the postage-stamp scale */ flex: 1; -webkit-overflow-scrolling: touch; } } /* ============================================================ HOMEOWNER STATUS PAGE (tokenised, no-login) ============================================================ */ .ho { min-height: 100vh; background: var(--canvas); display: flex; flex-direction: column; align-items: center; padding: 0 20px; } .ho-top { width: 100%; max-width: 620px; display: flex; align-items: center; justify-content: space-between; padding: 22px 0; } .ho-card { width: 100%; max-width: 620px; } .ho-hero { text-align: center; padding: 18px 0 26px; } .ho-seal { width: 56px; height: 56px; border-radius: 16px; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; box-shadow: 0 10px 28px oklch(0.62 0.13 155 / 0.3); } .ho-seal svg { width: 28px; height: 28px; } .ho-hero h1 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.03em; margin: 0 0 8px; } .ho-hero p { font-size: 15px; color: var(--fg-soft); margin: 0; line-height: 1.55; } .ho-ref { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--fg-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; margin-top: 14px; } .ho-ref b { color: var(--fg); } .ho-timeline { display: flex; flex-direction: column; gap: 0; } .ho-tl { display: flex; gap: 14px; padding: 14px 0; } .ho-tl .tl-mark { display: flex; flex-direction: column; align-items: center; } .ho-tl .tl-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; } .ho-tl.done .tl-dot { background: var(--ok); color: #fff; } .ho-tl.done .tl-dot svg { width: 12px; height: 12px; } .ho-tl.active .tl-dot { background: var(--signal); color: #fff; box-shadow: 0 0 0 5px var(--signal-soft); } .ho-tl.wait .tl-dot { background: var(--paper); border: 2px dashed var(--line-strong); } .ho-tl .tl-line { width: 2px; flex: 1; background: var(--line-strong); margin: 4px 0; min-height: 14px; } .ho-tl:last-child .tl-line { display: none; } .ho-tl .tl-b b { font-size: 14.5px; font-weight: 700; display: block; } .ho-tl .tl-b span { font-size: 13px; color: var(--fg-soft); } .ho-tl .tl-b time { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); } .ho-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ho-foot { max-width: 620px; width: 100%; text-align: center; padding: 26px 0 40px; font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint); } @media (max-width: 720px) { .picker-layout { grid-template-columns: 1fr; } .ld-grid { grid-template-columns: 1fr; } .studio { grid-template-columns: 1fr; } .lr-scores { grid-template-columns: 1fr; } .insight-grid, .proof-grid { grid-template-columns: 1fr; } /* Lead inbox: the pre-assessment (route + EPC flag + time) IS the pitch — it must stay visible on a phone. Don't hide it; reflow the row into a 2-line card: line 1 = name + address, line 2 = route + EPC chip + time (wrapped). Avatar + chevron span both rows; route + meta sit side-by-side on line 2. */ .lead-row { grid-template-columns: auto 1fr auto auto; grid-template-areas: "av who who chev" "av route meta chev"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 16px; } .lead-row .lead-av { grid-area: av; align-self: center; } .lead-row .lead-who { grid-area: who; align-self: end; } .lead-row .chev { grid-area: chev; align-self: center; } .lead-row .lead-route { grid-area: route; align-self: start; line-height: 1.5; min-width: 0; } .lead-row .lead-meta { grid-area: meta; align-self: start; line-height: 1.5; white-space: nowrap; margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--line-strong); } .ho-actions { grid-template-columns: 1fr; } } /* ---- Proof screen: photo promotion + testimonials + video (collection UI) ---- */ .promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; } .promo { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); } .promo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .promo figcaption { font-size: 11.5px; font-weight: 700; color: var(--fg-soft); padding: 7px 10px 4px; } .promo-acts { display: flex; gap: 6px; padding: 4px 10px 10px; } .promo-btn { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 10px; cursor: pointer; } .promo-btn.on { background: var(--ink); color: var(--on-ink, #fff); border-color: var(--ink); } .promo-btn:disabled { opacity: .5; cursor: wait; } .t-card { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 10px; background: var(--paper); } .t-quote { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1.5px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--fg); resize: vertical; box-sizing: border-box; } .t-quote:focus-visible { outline: none; border-color: var(--signal-deep); } /* :focus-visible */ .t-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; } .t-row input { flex: 1; min-width: 120px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--fg); } .t-row input:focus-visible { outline: none; border-color: var(--signal-deep); } /* :focus-visible */ .t-card .q-guard { margin-top: 9px; } /* ---- editor "Your content" strip (slots → Proof) ---- */ .ed-slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg); background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; cursor: pointer; margin-bottom: 6px; } .ed-slot:hover { border-color: var(--signal-line); } .ed-slot .es-v { font-size: 11.5px; font-weight: 700; color: var(--signal-deep); white-space: nowrap; } .ed-slot .es-v.ok { color: var(--ok); display: inline-flex; align-items: center; gap: 4px; } /* ---- GBP guided setup wizard ---- */ .gbp-steps { display: grid; gap: 9px; margin: 14px 0 4px; max-height: 52vh; overflow-y: auto; } .gbp-step { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 14px; cursor: pointer; background: var(--paper); } .gbp-step.done { border-color: var(--ok-line); background: var(--ok-soft, var(--paper-2)); } .gbp-step input { margin-top: 4px; accent-color: var(--signal-deep); } .gbp-step .gbp-n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 11.5px; font-weight: 700; background: var(--paper-2); border: 1px solid var(--line-strong); color: var(--fg-soft); } .gbp-step.done .gbp-n { background: var(--ok); border-color: var(--ok); color: #fff; } .gbp-step .gbp-b b { display: block; font-size: 13.5px; margin-bottom: 3px; } .gbp-step .gbp-b > span { display: block; font-size: 12.5px; color: var(--fg-soft); line-height: 1.5; } .gbp-step .gbp-b a { color: var(--signal-deep); font-weight: 700; } .gbp-copy { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--signal-deep); background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 6px; padding: 3px 8px; margin-left: 7px; cursor: pointer; vertical-align: 1px; } .gbp-code { display: block; font-family: var(--mono); font-size: 11px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; margin: 7px 0 2px; word-break: break-all; } /* Reviews engine modal */ .rev-lbl { display: block; font-size: 12.5px; font-weight: 700; margin: 0 0 7px; } .rev-lbl .muted { font-weight: 400; } .rev-block { margin-top: 18px; } .rev-err { color: var(--bad, #b3261e); font-size: 12.5px; margin: 10px 0 0; } .rev-draft { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--paper-2); } .rev-pre { white-space: pre-wrap; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; margin: 6px 0 0; color: var(--fg); } .rev-seo { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; } .rev-seo-row { display: flex; gap: 11px; align-items: flex-start; } .rev-seo-row .rev-tick { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 800; } .rev-seo-row.done .rev-tick { background: var(--ok); color: #fff; } .rev-seo-row.todo .rev-tick { background: var(--paper-2); border: 1px solid var(--line-strong); color: var(--fg-soft); } .rev-seo-row b { display: block; font-size: 13px; } .rev-seo-row span { display: block; font-size: 12px; color: var(--fg-soft); line-height: 1.5; } .gr-stars { color: #e7a615; letter-spacing: 1px; } /* Founding-Member scarcity banner */ /* fallback was #1f6f4f (GREEN) while --signal-deep is terracotta everywhere — a no-op today (the var is always defined) but it diverged on intent; matched the fallback to --signal-deep's real terracotta (#aa4810 deep accent). */ .founding-banner { display: block; border: 1px solid var(--signal-deep, #aa4810); background: var(--ok-soft, var(--paper-2)); border-radius: var(--r); padding: 13px 16px; margin: 0 0 16px; } .founding-banner > b { display: block; font-size: 14px; } .founding-banner > span { display: block; font-size: 12.5px; color: var(--fg-soft); margin-top: 3px; } .founding-banner > span b { display: inline; color: var(--signal-deep, #aa4810); } /* Price-display toggle */ .price-toggle { margin: 0 0 16px; } .price-toggle .pt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; background: var(--paper); } .price-toggle .pt-row b { display: block; font-size: 13.5px; } .price-toggle .pt-row small { display: block; font-size: 12px; color: var(--fg-soft); margin-top: 2px; } .pt-switch { flex: none; width: 44px; height: 26px; border-radius: 99px; border: none; background: var(--line-strong, #c9c9c4); cursor: pointer; position: relative; transition: background .18s; } .pt-switch.on { background: var(--ok, #1f9d57); } .pt-switch span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .18s; } .pt-switch.on span { left: 21px; } /* ── Managed (concierge "done-for-you") controls ───────────────────────────── The ONE affordance for a setting Anvul manages for the firm: a read-only value + a "Managed by Anvul" chip + a "Request a change" button → the request panel. */ .managed-banner { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-soft, #6f6f6a); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--r-sm, 8px); padding: 9px 11px; margin-bottom: 12px; line-height: 1.45; } .managed-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); background: var(--paper-2, #f7f6f3); padding: 12px 13px; } .managed-row + .managed-row { margin-top: 8px; } .managed-main { min-width: 0; } .managed-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .managed-head b { font-size: 14px; } .managed-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--signal-ink); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: 99px; padding: 2px 8px; white-space: nowrap; flex: none; } .managed-chip svg { flex: none; } .managed-value { font-size: 13.5px; color: var(--fg); margin-top: 5px; line-height: 1.45; } .managed-sub { display: block; font-size: 12.5px; color: var(--fg-soft, #6f6f6a); margin-top: 4px; line-height: 1.45; } .managed-req { flex: none; align-self: center; white-space: nowrap; } .managed-pending { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--signal-ink); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--r-sm, 8px); padding: 8px 11px; margin-bottom: 10px; } .managed-pending svg { flex: none; } .managed-pending .lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--signal-ink); font-weight: 700; text-decoration: underline; cursor: pointer; } @media (max-width: 560px){ .managed-row { flex-direction: column; align-items: stretch; } .managed-req { align-self: flex-start; } } /* Firm video upload */ .vid-up { margin-bottom: 6px; } .vid-bar { height: 8px; border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 10px; } .vid-bar span { display: block; height: 100%; width: 0; background: var(--signal-deep); transition: width .2s; } /* ---- SEO paced / drip rollout + Bob's work log (the "automation made concrete" surface: a real progress bar + a running log of what Bob did). Colored dots are decorative — every row's meaning is in its text, so AA holds. ---- */ .rollout-bar { height: 9px; border-radius: 99px; background: var(--paper-2); border: 1px solid var(--line-soft); overflow: hidden; margin: 4px 0 11px; } .rollout-bar span { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ok), var(--signal-deep)); transition: width .55s ease; } .rollout-meta { font-size: 13.5px; color: var(--fg-soft); margin: 0 0 15px; } .rollout-meta b { color: var(--fg); font-weight: 700; } .worklog { display: flex; flex-direction: column; gap: 9px; } .wl-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--fg-soft); line-height: 1.45; } .wl-row b { color: var(--fg); font-weight: 700; } .wl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--line-strong); } .wl-done .wl-dot { background: var(--ok); } .wl-active .wl-dot { background: var(--signal-deep); box-shadow: 0 0 0 3px var(--signal-soft); } .wl-plan .wl-dot { background: var(--fg-faint); } .wl-warn .wl-dot { background: oklch(0.5 0.12 70); } .rollout-foot { border-top: 1px solid var(--line-soft); padding-top: 10px; } /* ============================================================ AWARD POLISH — additive, token-only, AA, keyboard-only focus. (dash.css loads last on the platform page, so these rules win.) ============================================================ */ /* FIX #1 — Tell-Bob dock kind-chips. .sig-fchip is only defined in anvul-hq.css, which this page never loads, so the four chips rendered as raw browser buttons. Re-home a pill rule here, mirroring the .seg button look + the .pill shape (quiet on --paper, dark --ink fill when selected). The chips sit on a light dock pane, so the light treatment is the correct one. */ .sig-fchip { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--fg-soft); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background .14s, color .14s, border-color .14s; display: inline-flex; align-items: center; gap: 7px; } .sig-fchip:hover { border-color: var(--fg-ghost); } .sig-fchip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); } /* WCAG 2.5.5 (Target Size) — give every interactive cockpit control a >=44px touch target on coarse pointers (touch). Desktop / fine-pointer is untouched. .btn-sm / .seg button / .req-tabs button live in anvul-platform.css; this file loads after it, so these min-sizes win the cascade. The reviews Hide / Copy / Open buttons are all .btn-sm, so .btn-sm already covers them (kept explicit below for clarity). */ @media (pointer: coarse) { .sig-fchip { min-height: 44px; } .btn-sm { min-height: 44px; min-width: 44px; padding-top: 10px; padding-bottom: 10px; } .seg button, .req-tabs button { min-height: 44px; } .rv-hide, .rv-reply, .rev-copy { min-height: 44px; } .nav-item { min-height: 44px; } } /* FIX #7 — .bob-compose (Services → Questions "Ask Bob to build a question" composer) had no CSS anywhere loaded, so the input + ↑ button reflowed onto two lines. Mirror the dock composer-row: one flex line, button sized consistently and non-shrinking. */ .bob-compose { display: flex; gap: 8px; align-items: center; } .bob-compose .btn { flex: none; } /* FIX #4 — designed keyboard-only focus ring on the primary controls (the rest of the app already has one on inputs/OTP/composer/dock/FAB). :focus-visible only — never bare :focus — so a mouse click never shows a ring. Signal-based so it reads AA on BOTH the dark --ink rail and the light --paper cards. • Light-card controls reuse the established box-shadow ring (matches .input / .tune-input / .edit-field). --signal-soft is the visible halo against white surfaces. • The dark left rail (.nav-item) gets a solid --signal (terracotta, 0.645) outline instead — --signal-soft would wash out on --ink. */ .btn:focus-visible, .seg button:focus-visible, .sig-fchip:focus-visible, .svc-item .toggle:focus-visible, .toggle:focus-visible, .lead-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--signal), 0 0 0 4px var(--signal-soft); } /* solid --signal inner ring clears WCAG 2.4.7 (--signal-soft alone measured ~1.1:1) */ .lead-row:focus-visible { position: relative; z-index: 1; } /* lift the ring above sibling row borders */ .nav-item:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* ============================================================ FIX-BATCH 1 — cockpit polish ============================================================ */ /* D4 — the Managed-Google-Ads card pill ("You fund · we manage · every lead free") overflowed to a ragged 2nd line at <=400px because .pill is nowrap. On the narrowest phones only, let it wrap cleanly INSIDE the pill (normal wrapping, smaller font/gap). Scoped to the marker class so no other pill changes. */ @media (max-width: 400px) { .mkt-fund-pill { white-space: normal; font-size: 10px; gap: 5px; line-height: 1.35; text-align: center; padding: 5px 10px; } } /* ============================================================ FIRST-RUN COACH — the once-only 3-step orientation tour (maybeShowCoach in anvul-app.js). Desktop: a compact card anchored bottom-right. Mobile (<=920px, where the console mostly lives): a full-width bottom SHEET sitting clear of the 56px tab-bar + the Care FAB, safe-area aware, with 44px+ tap targets. Warm "Ink & Signal" surface — a terracotta eyebrow, generous type, one primary CTA. Reduced-motion collapses the enter/exit to instant. ============================================================ */ .anv-coach { position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 40px)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-xl, 18px); box-shadow: 0 24px 60px -18px oklch(0.2 0.03 264 / 0.34), 0 4px 14px -8px oklch(0.2 0.03 264 / 0.3); padding: 20px 20px 16px; opacity: 0; transform: translateY(10px) scale(0.985); } .anv-coach.anv-coach-in { opacity: 1; transform: none; } .anv-coach.anv-coach-out { opacity: 0; transform: translateY(10px) scale(0.985); } @media (prefers-reduced-motion: no-preference) { .anv-coach { transition: opacity .24s var(--ease-out, ease), transform .24s var(--ease-out, ease); } } /* a hairline of warm signal along the top edge — the brand's "verified/safe" tell */ .anv-coach::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--signal), transparent); opacity: .8; } .anv-coach-x { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--fg-faint); border-radius: 50%; cursor: pointer; transition: background .14s, color .14s; } .anv-coach-x:hover, .anv-coach-x:focus-visible { background: var(--paper-2); color: var(--fg); } .anv-coach-eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-deep, #a8480f); margin-bottom: 8px; padding-right: 30px; } .anv-coach-h { margin: 0 0 8px; font-family: var(--display, inherit); font-weight: 700; font-size: 20px; line-height: 1.2; color: var(--fg); } .anv-coach-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-soft); } .anv-coach-p b { color: var(--fg); font-weight: 700; } .anv-coach-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } .anv-coach-dots { display: flex; gap: 6px; } .anv-coach-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong, #d4d4d8); transition: background .16s, width .16s; } .anv-coach-dot.on { width: 18px; border-radius: 3px; background: var(--signal); } .anv-coach-actions { display: flex; align-items: center; gap: 8px; } /* the spotlight on the current step's rail item */ .anv-coach-spot { position: relative; } .nav-item.anv-coach-spot { box-shadow: inset 0 0 0 2px var(--signal); border-radius: var(--r-sm, 8px); } @media (prefers-reduced-motion: no-preference) { .nav-item.anv-coach-spot, .botnav-item.anv-coach-spot { animation: anvCoachSpot 1.6s ease-in-out infinite; } @keyframes anvCoachSpot { 0%,100% { filter: none; } 50% { filter: brightness(1.08); } } } /* MOBILE — a bottom sheet clear of the tab-bar + Care FAB, safe-area aware. */ @media (max-width: 920px) { .anv-coach { left: 12px; right: 12px; width: auto; bottom: calc(var(--botnav-h, 56px) + 18px + env(safe-area-inset-bottom)); border-radius: 20px; padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateY(14px); } .anv-coach.anv-coach-in { transform: none; } .anv-coach.anv-coach-out { transform: translateY(14px); } .anv-coach-x { width: 40px; height: 40px; top: 9px; right: 9px; } .anv-coach-h { font-size: 21px; } .anv-coach-p { font-size: 14.5px; } .anv-coach-foot { margin-top: 18px; } /* 44px+ targets on a phone */ .anv-coach-actions .btn { min-height: 44px; padding: 10px 18px; } .botnav-item.anv-coach-spot::after { content: ""; position: absolute; inset: 2px 6px; border: 2px solid var(--signal); border-radius: 12px; pointer-events: none; } } @media (max-width: 390px) { .anv-coach-h { font-size: 20px; } .anv-coach-actions .btn-quiet { padding-left: 10px; padding-right: 10px; } } /* ============================================================ FIX-BATCH 2 — demo honesty: "Example" stamps + conversion nudges Trust-first MCS firms read a populated demo panel (a lead, the firm card, a climbing chart) before the top demo strip, so every demo surface carries its own unmissable tag. .ex-tag uses the on-system signal tint + the AA-on-it terracotta (#a8480f, same as .pill.sig / the demo strip link). Every tag is stripped from the DOM the moment a real session hydrates (clearDemoTags), so a signed-in firm never sees one. ============================================================ */ .ex-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #a8480f; background: var(--signal-soft); border: 1px solid var(--signal-line); white-space: nowrap; line-height: 1.2; } .ex-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; } /* compact lead-row variant: sits first in .lr-top so "Example" is read before the name */ .lead-row.lr-rich .lr-ex { flex: none; } /* lead-detail "Example lead" banner */ .ex-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; color: var(--fg-soft); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 14px; } /* first-run leads empty state: the three levers that bring a new firm's first organic lead forward (share link / connect Google / claim towns) */ .le-step { display: block; padding: 9px 12px; margin-bottom: 7px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 13px; line-height: 1.45; color: var(--fg); text-decoration: none; transition: border-color .14s, background .14s; } .le-step:last-child { margin-bottom: 0; } .le-step:hover, .le-step:focus-visible { border-color: var(--signal-line); background: var(--signal-soft); } .le-step .muted { font-size: 12px; } /* demo rankings caption (above the illustrative climb) */ .rk-ex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 1.5; color: var(--fg-soft); margin: 0 0 8px; } /* concierge requests turnaround note */ .req-turn { font-size: 12.5px; color: var(--fg-soft); margin: 0 0 12px; } /* speed-to-lead nudge in a real lead's detail */ .lead-speed { font-size: 13px; line-height: 1.5; color: var(--fg-soft); margin: 10px 0 0; } .lead-speed b { color: var(--signal-deep); } /* ============================================================ CONNECT GOOGLE — bespoke concierge console (.gx) The high-end framing of the one handover the firm makes: an ink header band (the moment) over a warm-paper body holding two "channels" — Google Business Profile (reviews + map pin) and Google Search Console (real rankings, read-only OAuth). The honest-state UI stays JS-hydrated into #connectGbp / #connectGsc (loadConnect); .gx only elevates structure + type + the shared atoms, fully scoped so nothing leaks to other screens. The body keeps the light palette (no colour inversion of the injected content); "high-end" comes from a Cormorant Garamond display, restraint, generous space, and a single terracotta (--signal) accent — the brand's "verified / safe" colour. ============================================================ */ .gx { position: relative; margin-bottom: 24px; border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; isolation: isolate; } /* — ink header band (the dramatic moment against the light dashboard) — */ .gx-head { position: relative; padding: 38px 40px 32px; color: var(--on-ink); background: radial-gradient(140% 130% at 92% -35%, oklch(0.55 0.16 45 / 0.5), transparent 56%), radial-gradient(130% 150% at -12% 125%, oklch(0.36 0.03 264 / 0.65), transparent 60%), linear-gradient(176deg, var(--ink-2), var(--ink) 70%); } .gx-head > * { position: relative; z-index: 1; } /* ultra-fine diagonal hatch for texture/atmosphere (CSS-only, CSP-safe) */ .gx-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light; background: repeating-linear-gradient(135deg, oklch(1 0 0 / 0.02) 0 1.5px, transparent 1.5px 5px); } /* a hairline of warm light along the band's base */ .gx-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--signal-glow) 25%, var(--signal-glow) 75%, transparent); } .gx-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .gx-cred { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; background: #fff; box-shadow: 0 8px 22px oklch(0.08 0.04 264 / 0.55), inset 0 0 0 1px oklch(0 0 0 / 0.07); } .gx-cred svg { width: 25px; height: 25px; display: block; } .gx-eyebrow { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); } .gx-title { margin: 0 0 16px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(34px, 5vw, 50px); line-height: 1.0; letter-spacing: 0; color: var(--on-ink); } .gx-title em { display: block; font-style: italic; font-weight: 500; color: var(--signal); } .gx-lede { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.64; color: var(--on-ink-soft); } .gx-lede b { color: var(--on-ink); font-weight: 600; } /* — warm-paper body — */ .gx-body { position: relative; padding: 6px 22px 16px; background: linear-gradient(180deg, var(--signal-soft), var(--paper) 150px); } /* — a channel = product-mark column + the JS-hydrated card — */ .gx-channel { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 24px 4px; align-items: start; } .gx-channel + .gx-channel { border-top: 1px solid var(--line); } .gx-mark { display: flex; flex-direction: column; align-items: center; gap: 9px; } .gx-mark-disc { width: 50px; height: 50px; border-radius: 15px; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--signal); box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(1 0 0 / 0.06); } .gx-mark-disc svg { width: 23px; height: 23px; } .gx-mark-no { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: 21px; line-height: 1; color: var(--fg-ghost); } /* the injected card → a flush channel panel, not a boxed card */ .gx-channel > .card { background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 1px 0; min-width: 0; } /* — elevate the shared atoms inside the console (still light palette) — */ .gx .h-card-title { font-size: 19px; letter-spacing: -0.015em; } .gx .cn-connect-row { gap: 10px; } .gx .cn-connect-row .input { padding: 13px 15px; } /* premium primary CTA — warm gradient + deeper lift */ .gx .btn-primary { background: linear-gradient(180deg, #c25e1f, #aa4810); box-shadow: 0 10px 26px var(--signal-glow), inset 0 1px 0 oklch(1 0 0 / 0.18); } .gx .btn-primary:hover { background: linear-gradient(180deg, #cf6624, #a5440d); transform: translateY(-1px); } /* the connected "seal" — a struck terracotta disc (brand-verified), not a generic green tick */ .gx .chk.done .chk-ico { background: radial-gradient(120% 120% at 30% 22%, oklch(0.72 0.13 52 / 0.6), transparent 70%), var(--signal-ink); color: #fff; box-shadow: 0 5px 14px var(--signal-glow), inset 0 0 0 1px oklch(1 0 0 / 0.22), inset 0 -2px 5px oklch(0 0 0 / 0.28); } /* faint lift on the neutral "optional / soon" pill so it reads as considered, not flat */ .gx .pill { box-shadow: var(--shadow-sm); } /* CONNECT-screen section divider (UX audit #4): sets the "Your web address" domain handoff apart from the Google connect above as a distinct ask — a centred mono label seated on a hairline rule, in the Ink & Signal register. */ .cn-sep { display: flex; align-items: center; gap: 14px; margin: 28px 0 4px; } .cn-sep::before, .cn-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); } .cn-sep span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; } @media (max-width: 640px) { .gx-head { padding: 28px 22px 24px; } .gx-body { padding: 4px 14px 12px; } .gx-channel { grid-template-columns: 1fr; gap: 12px; padding: 22px 2px; } .gx-mark { flex-direction: row; gap: 12px; } } /* one orchestrated, motion-safe entrance — staggered, end state always visible */ @media (prefers-reduced-motion: no-preference) { .gx { animation: gx-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .gx-body > .gx-channel { animation: gx-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .gx-body > .gx-channel:nth-child(1) { animation-delay: 0.12s; } .gx-body > .gx-channel:nth-child(2) { animation-delay: 0.22s; } @keyframes gx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } /* ============================================================ COVERAGE BY PLAN — the towns-fenced ladder (.cov-tiers) On the Area & SEO screen, right under the coverage map: the firm's subscription tier IS how many towns we cover, so this strip shows the whole ladder (area count as the hero number) with the firm's real tier highlighted in terracotta and each higher tier showing the extra towns it unlocks — the honest "upgrade = more coverage" lever. Caps/prices are canonical (billing.TIER_META / seo_town_cap), rendered by loadCoverTiers() in anvul-app.js. ============================================================ */ .cov-tiers { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 20px 20px 18px; } .cov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; } .cov-head-l { min-width: 0; } .cov-h { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; margin: 8px 0 6px; } .cov-sub { font-size: 13px; line-height: 1.55; margin: 0; max-width: 64ch; } .cov-sub b { color: var(--fg); font-weight: 700; } .cov-cta { flex: none; } .covt-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .covt { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper-2); padding: 14px 13px 13px; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .12s; } .covt-areas { display: flex; align-items: baseline; gap: 4px; } .covt-areas b { font-family: var(--display); font-weight: 800; font-size: 27px; letter-spacing: -0.03em; line-height: 1; color: var(--fg); } .covt-areas span { font-size: 11px; color: var(--fg-faint); font-weight: 600; } .covt-name { font-weight: 700; font-size: 13.5px; margin-top: 9px; } .covt-price { font-family: var(--mono); font-size: 12px; color: var(--fg-soft); margin-top: 1px; } .covt-price i { font-style: normal; color: var(--fg-faint); } .covt-note { font-size: 11px; color: var(--fg-faint); margin-top: 8px; line-height: 1.35; } /* activation — a DISTINCT one-off line under the monthly headline (never folded in) */ .covt-setup { font-size: 10.5px; color: var(--fg-faint); margin-top: 2px; line-height: 1.3; } /* recommended (Growth) — preselected default highlight when no current tier */ .covt.is-rec { background: linear-gradient(180deg, var(--signal-soft), var(--paper)); } .covt.is-rec .covt-areas b { color: var(--signal-ink); } .covt-badge { display: inline-block; align-self: flex-start; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px; } .covt-badge.cur { background: var(--signal-ink); color: #fff; } .covt-badge.up { background: var(--signal-soft); color: #a8480f; border: 1px solid var(--signal-line); } /* the firm's current tier — terracotta highlight (the area number leads) */ .covt.is-current { border-color: var(--signal-ink); background: linear-gradient(180deg, var(--signal-soft), var(--paper)); box-shadow: 0 8px 22px var(--signal-glow); } .covt.is-current .covt-areas b { color: var(--signal-ink); } /* higher tiers a firm could move up to — a quiet hover lift */ .covt.is-up:hover { border-color: var(--signal-line); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cov-foot { font-size: 11.5px; line-height: 1.5; margin: 14px 0 0; } .cov-foot a { color: var(--signal-deep); font-weight: 600; } @media (max-width: 880px) { .covt-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .cov-head { gap: 12px; } .cov-cta { width: 100%; } .cov-cta .btn { width: 100%; } .covt-row { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ MOBILE BOTTOM-NAV CLEARANCE (UX audit fix #2) ------------------------------------------------------------ The fixed Overview/Leads/Analytics tab-bar (.botnav, shown <=920px) was floating over the foot of content — on a 390px phone it hid the last of the numbered next-steps list. The clearance was also brittle: the <=920px `.content` padding in anvul-screens.css carries NO !important, and skin-mobile.css (which loads after this file) sets `.content { ... 74px !important }` at <=600px — too short now that the bar is the only fixed footer (the old "Ask Bob" FAB was removed). And the editor/picker screen reserved just 64px — tighter than the bar. Fix: ONE authoritative clearance, sized off a single --botnav-h token (the 56px tab item + a comfortable gap + the home-indicator safe area), applied consistently to EVERY screen's content for the whole range the bar is shown. `.app .content` (one extra class) + !important deliberately out-specifies the later skin-mobile.css `.content` !important rule by specificity, so the bar can never tuck content under it again — on any screen, at any phone width. */ /* --botnav-h = the elevated bar's own height (6px top pad + 54px tap row + 6px bottom pad); the home-indicator safe-area is added ON TOP in every clearance calc below. Bumped from 56→66 when the bar was elevated (2026-07-16). ONE token still drives every clearance (content foot, care-fab, cm-composer). */ .app { --botnav-h: 66px; } @media (max-width: 920px) { /* clear the bar + ~30px breathing room + the iOS home-indicator safe area; applies on every screen so the mobile nav behaves identically throughout */ .app .content { padding-bottom: calc(var(--botnav-h) + 30px + env(safe-area-inset-bottom)) !important; } /* the full-bleed editor/picker keeps its zero side padding but must reserve the SAME bar clearance at its foot (Bob's composer sits just above it) */ .content:has(.screen[data-screen="picker"][data-active]) { padding-bottom: calc(var(--botnav-h) + 30px + env(safe-area-inset-bottom)) !important; } } /* ==================================================================== PREVIEW-FIRST LANDING (PART 1) — the magic-link's new front door. An un-activated funnel firm lands FULL-BLEED on its OWN property-first preview site, under a sticky premium activation header. Dashboard chrome is hidden so it reads as THEIR site; the audit is a "See the gap" sheet and pricing is the action. Built only from the Ink & Signal tokens — paper bar, one terracotta accent, mono eyebrow, Space Grotesk — to read trustworthy and high-end, never a cheap claim. C/D firms never see this surface. ==================================================================== */ .fp-stage { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--canvas); animation: fpFade var(--dur-3, .42s) var(--ease-out, ease) both; } .fp-stage[hidden] { display: none; } /* must beat display:flex */ @keyframes fpFade { from { opacity: 0; } to { opacity: 1; } } /* hide the cockpit chrome behind the full-bleed preview (focus + scroll safety) */ body.fp-open { overflow: hidden; } body.fp-open .side, body.fp-open .topbar, body.fp-open .mtop, body.fp-open .botnav { display: none; } /* ---- the sticky premium activation header ---- */ .fp-bar { flex: none; position: relative; z-index: 1; background: linear-gradient(180deg, var(--paper), oklch(0.99 0.007 62)); border-bottom: 1px solid var(--signal-line); box-shadow: 0 1px 0 oklch(1 0 0 / 0.7), 0 14px 28px -22px oklch(0.48 0.10 45 / 0.6); } .fp-bar-in { max-width: 1260px; margin: 0 auto; padding: 13px clamp(16px, 3vw, 26px); display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; } .fp-brand { display: flex; align-items: center; gap: 12px; flex: none; } .fp-mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(155deg, oklch(0.605 0.155 47), var(--signal-ink)); box-shadow: 0 0 0 3px var(--signal-soft), 0 3px 8px -2px oklch(0.5 0.15 45 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.25); } .fp-mark svg { width: 22px; height: 22px; display: block; } .fp-mark .hh-fill { fill: #fff; } .fp-mark .hh-rib { fill: none; stroke: var(--signal-ink); stroke-width: 1.3; stroke-linecap: round; } .fp-brand-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fp-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal-deep); } .fp-firm { font-family: var(--display); font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: var(--fg); line-height: 1.25; } .fp-firm b { font-weight: 700; } .fp-gap { flex: 1 1 240px; min-width: 0; margin: 0; padding-left: 18px; border-left: 1px solid var(--line); font-size: 13px; color: var(--fg-soft); line-height: 1.5; } /* Founder 2026-07-05 preview review: ONE calm terracotta activation panel. The hero "Switch it on" is grounded (a hugging shadow, not a floaty halo); the £199 next-step reassurance sits under it; and the two secondary links are a deliberate, balanced pair on their own hairline-topped row — so the buyer reads "my private preview · I can switch it on" without competing CTAs, and £199 is disclosed before the tap. The warm-panel chrome is added in the mobile block; desktop keeps a clean stack. */ .fp-cta { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: center; gap: 0; } .fp-cta .btn-primary { white-space: nowrap; font-size: 15px; padding: 13px 28px; border-radius: 11px; background: linear-gradient(180deg, var(--signal-ink), #9b400c); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.18), 0 1px 2px oklch(0.34 0.10 40 / 0.28), 0 7px 15px -8px oklch(0.5 0.15 44 / 0.55); } .fp-cta .btn-primary:hover { background: linear-gradient(180deg, #9b400c, #863707); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), 0 1px 2px oklch(0.34 0.10 40 / 0.32), 0 9px 20px -8px oklch(0.5 0.15 44 / 0.6); } .fp-cta .btn-primary:active { transform: translateY(1px); box-shadow: inset 0 1px 2px oklch(0.3 0.10 40 / 0.35), 0 3px 8px -5px oklch(0.5 0.15 44 / 0.5); } /* restore the keyboard focus ring — the scoped box-shadow above would otherwise beat .btn:focus-visible (equal specificity, defined earlier) and hide it. */ .fp-cta .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal), 0 7px 15px -8px oklch(0.5 0.15 44 / 0.5); } .fp-microcopy { margin: 11px 0 0; font-size: 12px; line-height: 1.4; color: var(--fg-soft); max-width: 300px; text-align: center; } .fp-microcopy b { color: var(--fg); font-weight: 700; } .fp-links { display: flex; align-items: center; justify-content: center; gap: 0; align-self: stretch; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--signal-line); } .fp-link { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12.5px; font-weight: 600; white-space: nowrap; color: var(--fg-soft); padding: 9px 15px; border-radius: var(--r-sm); transition: color .14s, background .14s; } .fp-link:hover { color: var(--signal-ink); background: oklch(0.94 0.05 58); } .fp-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } .fp-link + .fp-link { position: relative; } .fp-link + .fp-link::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: var(--signal-line); } .fp-link-quiet { color: var(--fg-soft); } /* ---- the full-bleed preview — their REAL, interactive property-first site ---- */ .fp-frame { flex: 1; position: relative; min-height: 0; background: var(--paper-2); box-shadow: inset 0 8px 18px -16px oklch(0.35 0.05 45 / 0.5); } .fp-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--paper); } .fp-try { position: absolute; left: clamp(12px, 2.5vw, 22px); bottom: clamp(12px, 2.5vw, 22px); z-index: 1; pointer-events: none; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--fg-soft); background: oklch(1 0 0 / 0.9); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); animation: fpTry 9s ease forwards; } @keyframes fpTry { 0%, 72% { opacity: 1; } 100% { opacity: 0; } } .fp-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 32px; } .fp-empty-h { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--fg); margin: 0; } .fp-empty-p { font-size: 13.5px; color: var(--fg-soft); line-height: 1.55; margin: 0; max-width: 46ch; } /* ---- the "See the gap" justification sheet (reuses the audit card) ---- */ .fp-sheet { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: clamp(14px, 3vw, 28px); animation: fpFade .2s ease both; } .fp-sheet[hidden] { display: none; } .fp-sheet-scrim { position: absolute; inset: 0; background: oklch(0.16 0.03 264 / 0.52); backdrop-filter: blur(2px); } .fp-sheet-card { position: relative; z-index: 1; width: 100%; max-width: 660px; max-height: 100%; overflow: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); -webkit-overflow-scrolling: touch; animation: fpRise var(--dur-3, .42s) var(--ease-out, ease) both; } @keyframes fpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .fp-sheet-card .rd-auditA { margin: 0; max-width: none; border-radius: var(--r-lg); } .fp-sheet-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--fg-soft); box-shadow: var(--shadow-sm); transition: color .14s, border-color .14s, background .14s; } .fp-sheet-x svg { width: 17px; height: 17px; } .fp-sheet-x:hover { color: var(--fg); border-color: var(--line-strong); background: var(--paper-2); } .fp-sheet-x:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--signal); } @media (prefers-reduced-motion: reduce) { .fp-stage, .fp-sheet, .fp-sheet-card { animation: none; } .fp-try { animation: none; } .fp-curtain, .fp-curtain-mark, .fp-curtain-eye, .fp-curtain-t { animation: none; } } /* ---- CURTAIN-LIFT — the one first-land reveal beat (Task 5). A brand mark + "Prepared for {Firm}" holds briefly, then the whole panel lifts up to reveal the preview behind it. JS omits it entirely under reduced-motion (instant, as before). */ .fp-curtain { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; will-change: transform; background: linear-gradient(180deg, var(--paper), var(--canvas)); animation: fpCurtainLift .5s var(--ease-out, cubic-bezier(.4,0,.2,1)) .7s forwards; } @keyframes fpCurtainLift { from { transform: translateY(0); } to { transform: translateY(-101%); } } .fp-curtain-in { display: flex; flex-direction: column; align-items: center; gap: 13px; padding: 24px; text-align: center; } .fp-curtain-mark { width: 76px; height: 76px; border-radius: 20px; overflow: hidden; display: block; box-shadow: 0 0 0 1px var(--signal-line), 0 18px 40px -18px oklch(0.5 0.12 45 / 0.5); animation: fpCurtainMark .55s var(--ease-out, ease) both; } .fp-curtain-eye { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--signal-deep); animation: fpCurtainText .5s ease .12s both; } .fp-curtain-t { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 3vw, 25px); letter-spacing: -0.02em; color: var(--fg); animation: fpCurtainText .5s ease .2s both; } .fp-curtain-t b { font-weight: 700; } @keyframes fpCurtainMark { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: none; } } @keyframes fpCurtainText { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } /* ---- responsive: stack the header on narrow screens (brand · CTAs) ---- */ @media (max-width: 720px) { .fp-bar-in { padding: 10px 15px; gap: 8px 12px; } /* CTA-size audit (founder, 2026-07-06): the full header ate 317px of a 390×844 first screen (38%) before the firm saw its OWN site — and the gap line duplicates the "See what changes" sheet word-for-word. Mobile diet: fold the gap line into the sheet it opens, tighten the panel's air. 317px → ~220px (26%), +97px of THEIR site on first paint. The button itself is untouched — 46px tall is the correct tap target; the size problem was the frame, not the button. Desktop unchanged (the gap line stays visible there). */ .fp-gap { display: none; } /* the warm terracotta activation panel — mobile-only, so desktop keeps a clean bar */ .fp-cta { width: 100%; order: 2; margin-left: 0; padding: 12px 14px 9px; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--paper), var(--signal-soft)); border: 1px solid var(--signal-line); box-shadow: 0 1px 2px oklch(0.5 0.06 45 / 0.05), 0 12px 26px -18px oklch(0.5 0.10 45 / 0.34); } .fp-cta .btn-primary { width: 100%; } .fp-cta .fp-microcopy { margin-top: 8px; font-size: 11.5px; } .fp-cta .fp-links { margin-top: 7px; padding-top: 5px; } .fp-cta .fp-link { padding: 7px 13px; } } /* ============================================================ OWNERSHIP RECEIPT — the account-screen centerpiece for a firm on the deposit_then_own OWNERSHIP model. ONE calm, confident card: what they've paid (a hero figure + progress), what's left (a single balance, or an elegant 0% instalment schedule), and what owning means. The legacy tier-ladder + subscription "Plan & billing" chrome is removed in anvul-app.js for owned firms, so nothing on screen contradicts the ownership model. ============================================================ */ .own-receipt { padding: 0; overflow: hidden; box-shadow: var(--shadow); } .own-receipt > * { padding-left: 24px; padding-right: 24px; } /* header */ .own-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-top: 22px; } .own-eyebrow { display: block; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 7px; } .own-title { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.08; letter-spacing: -0.025em; margin: 0; color: var(--fg); } .own-head .pill { flex: none; margin-top: 2px; } /* hero figure — the emotional core: paid-so-far toward outright ownership */ .own-figure { padding-top: 18px; padding-bottom: 4px; } .own-fig-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .own-fig-num { font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 0.95; letter-spacing: -0.035em; color: var(--fg); font-variant-numeric: tabular-nums; } .own-fig-sub { font-size: var(--text-sm); color: var(--fg-soft); } .own-prog { height: 7px; border-radius: 99px; background: var(--line-soft); margin: 15px 0 11px; overflow: hidden; } .own-prog-fill { display: block; height: 100%; min-width: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--signal), var(--signal-deep)); box-shadow: 0 0 0 1px oklch(0.555 0.150 45 / 0.10) inset; } @media (prefers-reduced-motion: no-preference) { .screen[data-active] .own-prog-fill { animation: own-prog-grow 0.9s var(--ease-out, ease) both; } @keyframes own-prog-grow { from { width: 0 !important; } } } .own-plan-line { font-size: var(--text-sm); color: var(--fg-soft); } /* balance (deposit firms) / paid-in-full (owned outright) */ .own-balance { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--signal-line); background: var(--signal-soft); border-radius: var(--r); } .own-receipt .own-balance { margin-left: 24px; margin-right: 24px; padding-left: 18px; padding-right: 18px; } .own-balance-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 7px; } .own-balance-amt { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.025em; color: var(--fg); font-variant-numeric: tabular-nums; } .own-balance p { margin: 9px 0 0; font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.55; } .own-balance--done { border-color: var(--ok-line); background: var(--ok-soft); } /* 0% instalment schedule */ .own-sched { padding-top: 14px; } .own-sched-cap { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.03em; color: var(--fg-faint); margin-bottom: 11px; } .own-sched-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .own-row { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); } .own-row.next { border-color: var(--signal-line); background: var(--signal-soft); box-shadow: 0 0 0 1px var(--signal-line); } .own-row.paid { background: var(--paper); } .own-ord, .own-row .own-tick { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; } .own-ord { font-family: var(--display); font-weight: 700; font-size: 12.5px; background: var(--line-soft); color: var(--fg-faint); } .own-row.next .own-ord { background: var(--signal); color: #fff; } .own-row .own-tick { background: var(--ok); color: #fff; } .own-row .own-tick svg { width: 14px; height: 14px; } .own-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .own-row-amt { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; } .own-row-due { font-size: 12px; color: var(--fg-soft); } .own-row.paid .own-row-due { color: var(--ok); } .own-row-chip { margin-left: auto; flex: none; } /* what owning means — a refined, restful checklist */ .own-promises { margin-top: 20px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--line-soft); } .own-prom-h { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 13px; } .own-promises ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .own-promises li { display: flex; gap: 11px; align-items: flex-start; font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.5; } .own-promises .own-tick { flex: none; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); margin-top: 1px; } .own-promises .own-tick svg { width: 12px; height: 12px; } /* footer reassurance */ .own-foot { padding-top: 0; padding-bottom: 20px; } .own-foot p { margin: 0; font-size: 12.5px; color: var(--fg-faint); line-height: 1.55; } .own-foot-link { font: inherit; color: var(--signal-deep); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .own-foot-link:hover { color: var(--signal); } /* areas card goes full-width once the subscription card is removed */ .grid-2.acct-grid-solo { grid-template-columns: 1fr; } /* ── CARE plans — the OPTIONAL ongoing "looking-after" subscription, offered AFTER a firm owns its site outright. The account-screen step sits right under the ownership receipt; the same cards are reused in the picker modal (.care-modal). ─────────── */ .care-step { padding: 22px 24px 24px; } .care-step.care-offer { border-color: var(--signal-line); box-shadow: var(--shadow); } .care-step-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .care-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-deep); margin-bottom: 7px; } .care-eyebrow-ok { color: var(--ok); } .care-eyebrow .own-tick { width: 16px; height: 16px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: inline-grid; place-items: center; } .care-eyebrow .own-tick svg { width: 10px; height: 10px; } .care-step-t { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -0.025em; margin: 0; color: var(--fg); } .care-step-sub { font-size: var(--text-sm); color: var(--fg-soft); line-height: 1.55; margin: 9px 0 0; max-width: 66ch; } .care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; } @media (max-width: 760px) { .care-grid { grid-template-columns: 1fr; } } .care-card { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 18px 16px 16px; display: flex; flex-direction: column; } .care-card.care-pop { border-color: var(--signal-line); box-shadow: 0 0 0 1px var(--signal-line); } .care-card.care-current { border-color: var(--ok-line); box-shadow: 0 0 0 1px var(--ok-line); } .care-badge { position: absolute; top: -10px; left: 16px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--signal); padding: 3px 9px; border-radius: 99px; } .care-badge-cur { background: var(--ok); left: auto; right: 16px; } .care-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .care-name { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; margin: 0; color: var(--fg); } .care-amt { white-space: nowrap; } .care-price { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; } .care-per { font-size: 12px; color: var(--fg-faint); } .care-tag { font-size: 12.5px; color: var(--fg-soft); margin: 6px 0 12px; line-height: 1.4; } .care-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; } .care-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--fg-soft); line-height: 1.45; } .care-feats .own-tick { flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin-top: 1px; } .care-feats .own-tick svg { width: 11px; height: 11px; } .care-card .btn { margin-top: auto; } .care-decline { margin-top: 16px; } .care-fine { font-size: 11.5px; color: var(--fg-faint); text-align: center; margin: 8px 0 0; line-height: 1.5; } /* current-care summary (owned firms) + the inline change/cancel rows */ .care-have { margin-top: 12px; display: flex; flex-direction: column; gap: 3px; } .care-have b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.015em; color: var(--fg); } .care-have .muted { font-size: 13px; color: var(--fg-soft); line-height: 1.5; } .care-have-act, .care-line-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .care-line-act { margin-top: 12px; } .care-cancel { color: var(--fg-faint); } .care-mini { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .care-mini b { display: block; font-size: 14px; color: var(--fg); margin-bottom: 2px; } .care-mini .muted { font-size: 12.5px; color: var(--fg-soft); } /* Stripe Elements card field (the care card-collection sheet) */ .care-card-el { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; background: var(--paper); margin: 4px 0 6px; } .care-card-err { color: oklch(0.55 0.17 25); font-size: 12.5px; margin: 4px 0 0; } .care-modal .care-grid { margin-top: 8px; } /* =================================================================== CARE STATION (Phase 2) — the conversation thread + the baby-easy tile intake. Distinct from the care PICKER above (.care-card / .care-step): the conversation card is .care-req and the story strip is .care-stp, so the two never collide. Reuses the shared tokens + .btn/.pill/.card/.lnk patterns. =================================================================== */ /* ---- the Ask head (caretaker + allowance meter + CTA) ---- */ .care-ask { padding: 22px 22px 20px; } .care-ask-top { align-items: flex-start; gap: 14px; margin-bottom: 16px; } .care-ask-sub { font-size: 13.5px; color: var(--fg-soft); line-height: 1.5; margin: 4px 0 0; max-width: 52ch; } .care-ask-meter { flex: none; } .care-ask-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .care-meter { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: var(--ok-soft); color: var(--ok-ink); border: 1px solid var(--ok-line); white-space: nowrap; } .care-meter-full { background: var(--warn-soft); color: oklch(0.5 0.12 70); border-color: var(--warn-line); } .care-meter-unl { background: var(--signal-soft); color: var(--signal-deep); border-color: var(--signal-line); } /* the named caretaker (Premium) */ .care-caretaker { display: flex; align-items: center; gap: 12px; padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .care-ct-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; } .care-ct-mono { display: grid; place-items: center; background: var(--signal-soft); color: var(--signal-deep); font-weight: 700; font-size: 18px; text-transform: uppercase; } .care-ct-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .care-ct-k { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg-faint); } .care-ct-id b { font-size: 15px; color: var(--fg); } .care-ct-r { font-size: 12px; color: var(--fg-soft); } /* the Basic 2nd-piece upgrade card + the warm gate */ .care-upgrade { margin-top: 16px; padding: 16px; border: 1px solid var(--signal-line); background: var(--signal-soft); border-radius: var(--r); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .care-up-h { display: flex; flex-direction: column; gap: 3px; } .care-up-h .muted { font-size: 12.5px; line-height: 1.45; } .care-up-skip { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--fg-faint); cursor: pointer; text-decoration: underline; } .care-gate { padding: 24px 22px; } .care-gate-t { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -0.02em; margin: 4px 0 0; color: var(--fg); } .care-gate-sub { font-size: 13.5px; color: var(--fg-soft); line-height: 1.55; margin: 9px 0 0; max-width: 60ch; } .care-gate .care-grid { margin-top: 20px; } /* ---- the conversation card ---- */ .care-req { position: relative; } .care-req + .care-req { margin-top: 14px; } .care-req-top { align-items: flex-start; gap: 12px; margin-bottom: 14px; } .care-req-h { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .care-req-t { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--fg); } .care-req-line { font-size: 13px; color: var(--fg-soft); line-height: 1.4; } .care-due { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--signal-deep); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; } .care-req-pill { flex: none; } .care-req-body { font-size: 14px; color: var(--fg); line-height: 1.55; margin: 0 0 12px; } .care-req-when { display: block; font-size: 11.5px; color: var(--fg-faint); margin-top: 12px; } .care-req-live { border-color: var(--ok-line); } .care-req-attn { border-color: var(--warn-line); } .care-req-closed { opacity: 0.72; } /* the 4-step story strip */ .care-story { display: flex; align-items: flex-start; gap: 0; margin: 2px 0 16px; } .care-stp { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; flex: none; text-align: center; } .care-stp-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); color: var(--fg-ghost); border: 1.5px solid var(--line); } .care-stp-ic svg { width: 14px; height: 14px; } .care-stp-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .care-stp-l { font-size: 10.5px; font-weight: 600; color: var(--fg-faint); max-width: 66px; line-height: 1.15; } .care-stp-bar { flex: 1 1 auto; height: 2px; min-width: 14px; background: var(--line); margin: 12px 3px 0; border-radius: 2px; } .care-stp-bar-on { background: var(--ok-line); } .care-stp-done .care-stp-ic { background: var(--ok-soft); color: var(--ok-ink); border-color: var(--ok-line); } .care-stp-done .care-stp-l { color: var(--fg-soft); } .care-stp-now .care-stp-ic { background: var(--signal); color: #fff; border-color: var(--signal); box-shadow: 0 0 0 4px var(--signal-glow); } .care-stp-now .care-stp-l { color: var(--signal-deep); font-weight: 700; } /* the inline preview + approve loop */ .care-preview { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 6px 0 0; background: var(--paper-2); } /* "what we changed" — a one-line, slug-free summary so the firm can judge before approving */ .care-preview-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 11px 14px; background: var(--signal-soft); border-bottom: 1px solid var(--signal-line); } .care-preview-sum-k { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--signal-deep); } .care-preview-sum-v { font-size: 13.5px; font-weight: 600; color: var(--fg); line-height: 1.4; } .care-preview-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 12.5px; color: var(--fg-soft); border-bottom: 1px solid var(--line); } .care-preview-open { font-weight: 600; color: var(--signal-deep); white-space: nowrap; } /* Legible on a phone: the responsive site renders at the card width (mobile layout = legible), in a fixed-height SCROLLABLE window (sandboxed iframe). Scroll the page to see it all; "Open full page" gives the full read. */ .care-preview-frame { height: clamp(340px, 56vh, 480px); overflow: auto; -webkit-overflow-scrolling: touch; background: #fff; position: relative; } .care-preview-frame iframe { width: 100%; min-height: 100%; border: 0; display: block; } .care-req-act { display: flex; gap: 10px; padding: 14px; flex-wrap: wrap; } .care-req-act .btn { flex: 1 1 200px; white-space: normal; line-height: 1.15; } /* wrap "Looks great — make it live" instead of clipping at 320px */ .care-req-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; } .care-live-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ok-ink); } .care-undo { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--fg-faint); cursor: pointer; text-decoration: underline; } /* ---- the baby-easy tile SHEET ---- */ .care-sheet-root { position: fixed; inset: 0; z-index: 130; display: flex; align-items: flex-end; justify-content: center; } .care-sheet-backdrop { position: absolute; inset: 0; background: oklch(0.18 0.03 264 / 0.5); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; } .care-sheet-in .care-sheet-backdrop { opacity: 1; } .care-sheet { position: relative; width: 100%; max-width: 560px; max-height: 90vh; background: var(--paper); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transform: translateY(101%); transition: transform .28s cubic-bezier(.2,.9,.3,1); } .care-sheet-in .care-sheet { transform: translateY(0); } @media (min-width: 640px) { .care-sheet-root { align-items: center; padding: 20px; } .care-sheet { border-radius: var(--r-lg); max-height: 88vh; } } .care-sheet-grab { display: block; margin: 9px auto 0; border: 0; background: none; padding: 6px 0; cursor: pointer; } .care-sheet-grab span { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line-strong); } .care-sheet-scroll { overflow-y: auto; padding: 6px 22px calc(24px + env(safe-area-inset-bottom)); } .care-sheet-head { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; position: sticky; top: 0; background: var(--paper); z-index: 1; } .care-sheet-title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin: 0; flex: 1; outline: none; } .care-sheet-x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--fg-faint); cursor: pointer; padding: 0 4px; flex: none; } .care-sheet-x:hover { color: var(--fg); } .care-sheet-back { background: none; border: 1px solid var(--line); border-radius: 9px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; color: var(--fg-soft); flex: none; } .care-sheet-back:hover { border-color: var(--line-strong); color: var(--fg); } .care-sheet-sub { font-size: 13.5px; color: var(--fg-soft); line-height: 1.5; margin: 6px 0 16px; } .care-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .care-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; text-align: left; padding: 15px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); cursor: pointer; min-height: 108px; transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease; } .care-tile:hover { border-color: var(--signal-line); box-shadow: 0 2px 12px oklch(0 0 0 / 0.05); } .care-tile:active { transform: scale(.985); } .care-tile-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--signal-soft); color: var(--signal-deep); flex: none; } .care-tile-ic svg { width: 20px; height: 20px; } .care-tile-t { font-weight: 700; font-size: 14.5px; color: var(--fg); } .care-tile-b { font-size: 11.5px; color: var(--fg-faint); line-height: 1.35; } .care-caps { display: flex; flex-direction: column; gap: 18px; margin: 4px 0 18px; } .care-cap-l { display: block; font-weight: 600; font-size: 13.5px; color: var(--fg); margin-bottom: 9px; } .care-cap-hint { font-size: 12px; color: var(--fg-faint); line-height: 1.4; margin: 7px 0 0; } .care-chips { display: flex; flex-wrap: wrap; gap: 8px; } .care-chip { font-size: 13px; font-weight: 600; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--fg-soft); cursor: pointer; min-height: 40px; transition: background .12s ease, border-color .12s ease, color .12s ease; } .care-chip:hover { border-color: var(--line-strong); } .care-chip[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; } .care-chip-other { border-style: dashed; } .care-cap-custom { margin-top: 10px; } .care-cap-in { position: relative; } .care-cap-money .care-cap-pre { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--fg-soft); font-weight: 700; pointer-events: none; } .care-cap-money .input { padding-left: 26px; } .care-cap-msg { display: block; font-size: 12px; color: var(--fg-faint); margin-top: 6px; } .care-photo-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .care-photo-add { margin-top: 2px; } .care-seealso { display: inline-block; margin: 0 0 14px; font-size: 13px; color: var(--signal-deep); background: none; border: 0; padding: 0; font-weight: 600; cursor: pointer; text-decoration: underline; } .care-sheet-send { margin-top: 4px; } .care-sheet-foot { font-size: 12px; color: var(--fg-faint); line-height: 1.45; margin: 12px 0 4px; text-align: center; } .care-sheet-foot.err { color: var(--block); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .care-sheet, .care-sheet-backdrop { transition: none; } .care-sheet { transform: none; } } /* ==================================================================== CARE STATION — the impeccable refinements (the panel's cheap-to-fix cluster): the one-thumb FAB, the per-card human identity, the promised-by-at-ask, the legible preview summary, the warm needs_input + tweak reply, the sticky send footer, and the keystone story animation. Built on the same tokens above. ==================================================================== */ /* ---- a HUMAN FACE + name on every card, every tier ---- */ .care-rid { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; } .care-rid-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; } .care-rid-mono { display: grid; place-items: center; background: var(--signal-soft); color: var(--signal-deep); font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .02em; } .care-rid-n { font-size: 13px; font-weight: 600; color: var(--fg); display: inline-flex; align-items: baseline; gap: 7px; min-width: 0; } .care-rid-r { font-size: 11.5px; font-weight: 500; color: var(--fg-faint); } /* ---- the project-quote chip (Basic/Pro project = a quote, never a blank) ---- */ .care-due.care-quote { color: var(--fg-soft); background: var(--paper-2); border-color: var(--line-strong); } /* ---- "what we changed" summary above the preview ---- */ .care-preview-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } /* ---- the warm needs_input ask + the shared inline reply composer ---- */ .care-need { margin: 2px 0; padding: 14px; border: 1px solid var(--warn-line); background: var(--warn-soft); border-radius: var(--r); } .care-need-h { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: oklch(0.48 0.12 70); } .care-need-ask { font-size: 13.5px; color: var(--fg); line-height: 1.5; margin: 7px 0 11px; } .care-reply { margin-top: 10px; } .care-reply-need { margin-top: 0; } .care-preview > .care-reply { padding: 0 14px 14px; margin-top: -2px; } .care-reply-in { width: 100%; resize: vertical; min-height: 52px; } .care-reply-act { display: flex; align-items: center; gap: 12px; margin-top: 9px; } .care-reply-cancel { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--fg-faint); cursor: pointer; text-decoration: underline; } /* ---- the promised-by date painted in the send sheet (the keystone differentiator) ---- */ .care-promise-row { display: flex; justify-content: center; margin-bottom: 11px; } .care-promise { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--signal-deep); background: var(--signal-soft); border: 1px solid var(--signal-line); border-radius: 999px; padding: 7px 15px; } /* ---- M5: a sticky, keyboard-aware send footer (never drops below the fold) ---- */ .care-sheet-footer { position: sticky; bottom: 0; z-index: 1; background: var(--paper); padding-top: 12px; margin-top: 2px; box-shadow: 0 -12px 16px -12px oklch(0 0 0 / 0.14); } .care-sheet-footer .care-sheet-foot { margin: 10px 0 2px; } /* ---- the Basic "one more this month?" carry-through panel ---- */ .care-2nd { display: flex; flex-direction: column; gap: 11px; padding: 8px 0 6px; } .care-2nd-p { font-size: 13.5px; color: var(--fg); line-height: 1.55; margin: 4px 0 6px; } /* ---- C1: the persistent one-thumb "Ask" FAB (mobile only) ---- */ .care-fab { display: none; } @media (max-width: 920px) { /* Founder 2026-07-04 review: the FAB sat too close to the bottom nav and floated over on-screen buttons ("should feel helpful, not blocking actions"). Lift it further clear of the nav (+24px) and make it a touch more compact so it stops covering the adjacent CTA. */ .care-fab { position: fixed; z-index: 75; right: 16px; bottom: calc(var(--botnav-h, 56px) + 24px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; padding: 0 16px 0 13px; height: 46px; border: 0; border-radius: 999px; background: var(--signal); color: #fff; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; box-shadow: 0 10px 26px oklch(0 0 0 / 0.24), 0 2px 6px oklch(0 0 0 / 0.14); transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease; } .care-fab svg { width: 19px; height: 19px; } .care-fab:active { transform: scale(.95); } /* The checklist parks each row's action button on the right edge — exactly where this FAB sits — so it covered "Replace" / "Add a job" / the colour swatch (UX audit H2). Hide it ONLY while the checklist is the active view (readiness screen + the checklist card visible); it shows normally on every other screen. */ body:has(.screen[data-screen="readiness"][data-active] #obChecklistCard:not([hidden])) .care-fab { display: none; } } body.fp-open .care-fab { display: none; } /* CONCIERGE INTAKE (audit 2026-07-07 P1): the FAB floated over the Postcode field on the new-firm intake — the one phase with no hide rule. #ciGo is the intake's submit button, present exactly while the form is on screen; the FAB is useless here anyway (an unauthed prospect's Ask dead-ends at "sign in first"). */ body:has(#ciGo) .care-fab { display: none; } /* FIX B: the pricing/activate surface is a decision moment — don't let the +Ask care FAB float over the recommended CTA. .rd-activate carries [hidden]=false only in funnel phase B, so :has() scopes this to exactly that screen (same :has() support the app already uses, e.g. .rd-plan:has). The 56px bottom nav is already cleared by .app .content. */ body:has(.rd-activate:not([hidden])) .care-fab { display: none; } /* ---- C6: ANIMATE THE KEYSTONE — the story progresses; "Live ✓" feels like an arrival ---- */ @keyframes careNowPulse { 0%, 100% { box-shadow: 0 0 0 4px var(--signal-glow); } 50% { box-shadow: 0 0 0 8px transparent; } } .care-stp-now .care-stp-ic { animation: careNowPulse 2.2s ease-in-out infinite; } @keyframes careBarGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } .care-stp-bar-on { transform-origin: left center; animation: careBarGrow .5s var(--ease-out, ease) both; } @keyframes careArrive { 0% { transform: scale(1); } 32% { transform: scale(1.012); } 100% { transform: scale(1); } } @keyframes careLivePop { 0% { transform: scale(.4); opacity: 0; } 55% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } } .care-req-arrive { animation: careArrive .6s var(--ease-out, ease) both; box-shadow: 0 0 0 1px var(--ok-line), 0 10px 34px oklch(0.72 0.13 150 / 0.18); } .care-req-arrive .care-story .care-stp:last-child .care-stp-ic, .care-req-arrive .care-live-ok svg { animation: careLivePop .58s var(--ease-out, ease) both; } @media (prefers-reduced-motion: reduce) { .care-stp-now .care-stp-ic, .care-stp-bar-on, .care-req-arrive, .care-req-arrive .care-story .care-stp:last-child .care-stp-ic, .care-req-arrive .care-live-ok svg { animation: none; } .care-fab { transition: none; } } /* ============================================================ LEAN-TO-5 RAIL — Care emphasis · the "ready to approve" dot · the side-foot overflow links · the mobile Care tab. Care is the paid relationship, so it reads as the hero of the rail; the dot (updateCareBadges) pulls the firm to an approval. ============================================================ */ /* Care rail item — emphasised: a soft signal wash + a signal edge so it sits above the other rail items without shouting. (0.645 0.15 47 = the --signal terracotta.) */ .nav-item-care { background: oklch(0.645 0.15 47 / 0.10); box-shadow: inset 0 0 0 1px var(--line-ink); } .nav-item-care:hover { background: oklch(0.645 0.15 47 / 0.16); } .nav-item-care[aria-current="true"] { background: oklch(0.645 0.15 47 / 0.18); } .nav-item-care svg { color: var(--signal); opacity: 1; } .nav-item-care .ni-main { color: var(--on-ink); } /* The "something needs you" dot — on the Care rail item, the mobile Care tab, and the +Ask FAB. Hidden until updateCareBadges lights it (preview_ready / needs_input). */ .care-dot { margin-left: auto; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex: none; box-shadow: 0 0 0 3px oklch(0.645 0.15 47 / 0.26); } .care-dot[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .care-dot { animation: careDotPulse 2s ease-in-out infinite; } } @keyframes careDotPulse { 0%,100% { box-shadow: 0 0 0 3px oklch(0.645 0.15 47 / 0.30); } 50% { box-shadow: 0 0 0 7px oklch(0.645 0.15 47 / 0); } } /* Side-foot overflow: quiet links (Complete-your-site, Ideas) — present but never competing with the 5-item rail. */ .side-foot-links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .side-foot-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: var(--r-sm); font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--on-ink-faint); cursor: pointer; text-align: left; } .side-foot-link svg { width: 15px; height: 15px; flex: none; opacity: 0.7; } .side-foot-link:hover { background: var(--ink-2); color: var(--on-ink-soft); } .side-foot-link[hidden] { display: none; } /* Mobile bottom-bar: the Care tab carries a soft emphasis, but the CURRENT tab must always win (founder 2026-07-04 review, Fix 4: the permanently-orange Care heart read as "active" on the Home/build screen, fighting the "Home" header). The active tab [aria-current="true"] gets an unambiguous "you are here" — orange icon+label + a top indicator bar — and Care's ambient orange is dropped WHEN Care isn't the current tab. */ @media (max-width: 920px) { .botnav-item { position: relative; } /* Active ("you are here") — matches the top header, so Home lights up during build. The elevated bar (anvul-screens.css) carries the single premium tell: a terracotta "pill" that slides behind the active icon. The older top-edge bar is retired here (::before → none) so there's ONE clean indicator, not two. */ .botnav-item[aria-current="true"] { color: #fff; } .botnav-item[aria-current="true"] svg { color: var(--signal); opacity: 1; } .botnav-item[aria-current="true"]::before { display: none; content: none; } /* Care keeps a gentle emphasis but no longer masquerades as active: its heart is tinted only while Care is NOT the current tab, and lighter than the active state. */ .botnav-item.botnav-care:not([aria-current="true"]) { color: var(--on-ink-soft); } .botnav-item.botnav-care:not([aria-current="true"]) svg { color: var(--signal); opacity: 0.7; } .botnav-item.botnav-care .bn-ic { position: relative; } .botnav-item.botnav-care .care-dot { position: absolute; top: -4px; left: 100%; margin-left: -8px; box-shadow: 0 0 0 2px var(--ink); } } /* The FAB's dot sits top-right of the pill (a white dot ringed in signal on the terracotta fab). .care-fab is position:fixed, so it's the containing block. */ .care-fab-dot { position: absolute; top: 7px; right: 9px; margin: 0; background: #fff; box-shadow: 0 0 0 2px var(--signal); } /* ==================================================================== FIX F — the post-pay "finish your site" checklist, reframed. The base .ob-* / .chk rows live in anvul-platform.css; these are the REORDER additions only: an honest "what's left" cue, the ONE blocking step (phone + towns) made primary, and an "Add more — optional" disclosure for everything non-blocking — so a just-paid firm isn't met by an 8-row wall. Reuses the existing token palette only. ================= */ /* the "what's left" cue — one honest line (only phone+towns gate publish) */ .ob-cue { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; line-height: 1.3; } .ob-cue-ico { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; } .ob-cue-ico svg { width: 12px; height: 12px; } .ob-cue.is-need { background: var(--signal-soft); border: 1px solid var(--signal-line); color: var(--signal-deep); } .ob-cue.is-need .ob-cue-ico { background: var(--signal-ink); color: #fff; } .ob-cue.is-ready { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok-ink, var(--ok)); } .ob-cue.is-ready .ob-cue-ico { background: var(--ok); color: #fff; } /* the ONE blocking step (phone + towns) + its form + submit, made primary */ .ob-primary { border: 1px solid var(--signal-line); border-radius: var(--r-lg, 14px); background: linear-gradient(160deg, var(--signal-soft), var(--paper) 44%); padding: 2px 15px 14px; } .ob-primary > .chk { border-bottom: 0; } .ob-primary .ob-contactform { margin: 2px 0 4px; } .ob-hint { font-size: 12px; color: var(--fg-faint); line-height: 1.4; margin: 5px 0 0; } /* everything non-blocking, behind a clearly-optional disclosure */ .ob-optional { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); } .ob-optional > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; box-sizing: border-box; padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--fg); } /* min-height ≥44px tap target */ .ob-optional > summary::-webkit-details-marker { display: none; } .ob-opt-tag { font-family: var(--mono); font-size: var(--text-xs, 10.5px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); } .ob-optional[open] > summary { border-bottom: 1px solid var(--line-soft); } .ob-optional-body { padding: 2px 14px 8px; } /* ── MEDIUM UX fixes (2026-07-05). Scoped to the checklist so none of the tap-size bumps leak to .btn-sm / thumbs elsewhere in the app. ───────────────────────── */ /* M2 — checklist row actions + the colour swatch to a comfortable tap size (≥40px, ≥44px on touch). The
summary already does 44px. Does NOT enlarge .btn-sm globally — only inside the checklist card's row actions. */ #obChecklistCard .chk-act .btn-sm, #obChecklistCard .ob-colour { min-height: 40px; } #obChecklistCard .ob-colour { width: 48px; } @media (pointer: coarse) { #obChecklistCard .chk-act .btn-sm, #obChecklistCard .ob-colour { min-height: 44px; } #obChecklistCard .ob-colour { width: 52px; } } /* M3 — the live "towns you cover" chip echo under the contact mini-form. */ .ob-town-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; } .ob-town-chips:empty { display: none; } .ob-town-chip { font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 999px; background: var(--signal-soft); border: 1px solid var(--signal-line); color: var(--signal-deep); } /* M4 — the optional-section summary: a flexible title (so the count + "why" sit right), the live "N of M added" count, a softer "why", and a rotating chevron so the now-collapsed section still reads as expandable. */ .ob-opt-sum { flex: 1; min-width: 0; } .ob-opt-count { color: var(--signal-deep); } .ob-opt-count.is-all { color: var(--ok-ink, var(--ok)); } .ob-opt-why { font-weight: 500; color: var(--fg-soft); } .ob-optional > summary::after { content: "\25B8"; flex: none; color: var(--fg-faint); font-size: 11px; transition: transform .15s; } .ob-optional[open] > summary::after { transform: rotate(90deg); } /* M4 — the uploaded-photo strip, capped to one row (~4 tiles) with a "+N more" reveal so it never adds scroll. The logo strip (no cap) is unaffected. */ .ob-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .ob-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--paper); flex: none; } .ob-thumbs.is-capped { flex-wrap: nowrap; overflow: hidden; } .ob-thumbs.is-capped .ob-thumb-extra { display: none; } .ob-thumbs.is-expanded { flex-wrap: wrap; overflow: visible; } .ob-thumbs.is-expanded .ob-thumb-extra { display: block; } .ob-thumb-more { flex: none; width: 54px; height: 54px; border-radius: 8px; border: 1px dashed var(--line-strong); background: var(--paper-2); color: var(--fg-soft); font-size: 11px; font-weight: 700; line-height: 1.15; cursor: pointer; padding: 2px; } .ob-thumbs.is-expanded .ob-thumb-more { display: none; } /* =========================================================================== CONCIERGE MESSENGER — the firm↔Anvul running thread (fluid, mobile-first). Firm messages sit RIGHT (signal fill); team replies LEFT ("Your Care team" or a real first name). FirmRequest cards render INLINE via the existing .care-req atoms. NO typing indicators, NO presence dots — honest by design. =========================================================================== */ .cm-panel { display: flex; flex-direction: column; min-height: calc(100vh - 230px); min-height: calc(100dvh - 230px); } .cm-thread { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 6px 2px 14px; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .cm-thread { scroll-behavior: auto; } } .cm-thread .care-req { margin: 4px 0; } /* inline request cards breathe */ .cm-thread .care-req + .care-req { margin-top: 4px; } .cm-feed-in { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; } /* leave room for the sticky composer so scroll-to-newest never hides behind it */ .cm-feed-in > * { scroll-margin-bottom: 104px; } /* Day separator */ .cm-day { align-self: center; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--fg-faint); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 12px; margin: 4px 0; } /* "Load earlier messages" — a quiet, centred pill at the very top of the thread. 44px+ tap target on a phone; disabled state reads "Loading…". */ .cm-earlier { align-self: center; min-height: 40px; padding: 9px 18px; margin: 2px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--fg-soft); font-family: var(--sans); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .14s, background .14s, color .14s; } .cm-earlier:hover, .cm-earlier:focus-visible { border-color: var(--signal-line); background: var(--signal-soft); color: var(--fg); } .cm-earlier:disabled { opacity: .6; cursor: default; } @media (max-width: 480px) { .cm-earlier { min-height: 44px; } } /* One message row + bubble */ .cm-msg { display: flex; flex-direction: column; max-width: 82%; } .cm-msg-firm { align-self: flex-end; align-items: flex-end; } .cm-msg-team { align-self: flex-start; align-items: flex-start; } .cm-msg-system { align-self: center; align-items: center; max-width: 90%; } .cm-name { font-size: 11.5px; font-weight: 700; color: var(--signal-ink, #aa4810); margin: 0 4px 3px; } .cm-bubble { border-radius: 16px; padding: 9px 13px; font-size: 14.5px; line-height: 1.42; word-break: break-word; white-space: pre-wrap; box-shadow: var(--shadow-sm); } .cm-msg-firm .cm-bubble { background: #aa4810; color: #fff; border-bottom-right-radius: 5px; } .cm-msg-team .cm-bubble { background: var(--paper-2); color: var(--fg); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .cm-msg-system .cm-bubble { background: transparent; box-shadow: none; color: var(--fg-faint); font-size: 12.5px; text-align: center; padding: 2px 8px; } .cm-bubble a { color: inherit; text-decoration: underline; } .cm-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .cm-imgs img { width: 116px; height: 88px; object-fit: cover; border-radius: 10px; cursor: pointer; } /* Meta: time + tick states (one tick = sent; "Seen" only when truly seen) */ .cm-meta { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-faint); margin: 3px 4px 0; } .cm-tick { display: inline-flex; align-items: center; gap: 2px; } .cm-tick svg { width: 13px; height: 13px; } .cm-tick-seen { color: var(--signal, #c75b39); font-weight: 700; } .cm-msg.is-sending { opacity: .62; } .cm-arrive { animation: cmArrive .34s ease-out both; } @keyframes cmArrive { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cm-arrive { animation: none; } } /* Sticky composer — a modern chat dock: a translucent paper glass that floats over the scrolling thread with a soft lift, so bubbles slide UNDER it. */ .cm-composer { position: sticky; bottom: 0; z-index: 4; background: oklch(1 0 0 / 0.86); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); border-top: 1px solid var(--line); padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px)); margin: 0 -2px; box-shadow: 0 -10px 24px -20px oklch(0.2 0.02 264 / 0.5); } .cm-ooh { font-size: 12px; color: var(--fg-soft); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 6px 11px; margin-bottom: 8px; } /* Kind picker — one tap tags the message (change = default and rides untagged; bug/feature become typed signal on our side). Wraps clean at 390px. */ .cm-kind-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cm-kind { border: 1px solid var(--line-strong); background: var(--paper-2); color: var(--fg-soft); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .cm-kind:hover { color: var(--signal, #c75b39); border-color: var(--signal-line); } .cm-kind[aria-pressed="true"] { background: var(--signal-soft); border-color: var(--signal, #c75b39); color: #8f3d08; } .cm-kind:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--signal-soft); border-color: var(--signal, #c75b39); } .cm-kind-note { font-size: 12px; color: var(--fg-soft); margin: -2px 2px 8px; } @media (prefers-reduced-motion: reduce) { .cm-kind { transition: none; } } /* The tiny tag a tagged firm bubble wears (silent for "change"/untagged). */ .cm-kind-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 1.5px 7px; border: 1px solid; } .cm-kind-tag-bug { color: var(--block); border-color: var(--block-line); background: var(--block-soft); } .cm-kind-tag-feature { color: var(--signal, #c75b39); border-color: var(--signal-line); background: var(--signal-soft); } .cm-attach-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .cm-attach-row .req-thumb img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; } .cm-composer-in { display: flex; align-items: flex-end; gap: 8px; } .cm-input { flex: 1 1 auto; resize: none; max-height: 132px; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 20px; padding: 10px 15px; font: inherit; font-size: 14.5px; line-height: 1.4; background: var(--paper-2); color: var(--fg); } .cm-input:focus-visible { outline: none; border-color: var(--signal, #c75b39); box-shadow: 0 0 0 4px var(--signal-soft); } .cm-send, .cm-attach-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s var(--ease-out, ease), background .15s, box-shadow .15s, color .15s; } .cm-send { background: #aa4810; color: #fff; box-shadow: 0 6px 16px var(--signal-glow); } .cm-send:not(:disabled):active { transform: scale(.92); } .cm-send:not(:disabled):hover { background: #8f3d08; } .cm-send:disabled { opacity: .4; cursor: default; box-shadow: none; } .cm-attach-btn { background: var(--paper-2); color: var(--fg-soft); border: 1px solid var(--line-strong); } .cm-attach-btn:hover { color: var(--signal, #c75b39); border-color: var(--signal-line); } .cm-attach-btn:active { transform: scale(.92); } @media (prefers-reduced-motion: reduce) { .cm-send, .cm-attach-btn { transition: none; } } /* Clear the mobile bottom nav so the composer never hides behind it */ @media (max-width: 720px) { .cm-composer { bottom: calc(var(--botnav-h, 66px) + env(safe-area-inset-bottom, 0px)); } .cm-panel { min-height: calc(100vh - 168px); min-height: calc(100dvh - 168px); } }