/* ───────────────────────────────────────────────────────────────────────────── Professional portal — Claude Design turn 12. Imported from the "XpertWorker guide page wireframe" project, options 12a (dashboard 1440) and 12f (dashboard 390), on the scheduler design system: Manrope display / Inter UI / JetBrains Mono numerals, 1px hairlines, 12px card radius, flat white surfaces, no shadows. UPDATED FOR TURN 38 — the control system (see assets/css/xw-controls.css). Turn 24 gave colour a job rather than a preference, and turn 38 finished the thought by saying WHICH job, for the whole site: violet #7c3aed ACTS — and only where nothing else is committing blue #2563eb INFORMS — every link, every "view", every navigation green #15803d CONFIRMS — money that has settled, and nothing else amber #b45309 WARNS — a condition, never the way forward red #dc2626 DESTROYS — outlined, until a word has been typed ink #111111 NEUTRAL — secondary, cancel, and this portal's primary TWO THINGS IN THIS FILE CHANGED SIDES. 1. The filled primary (.pr-btn) was GREEN. Rule 2 forbids it outright — green reports money and confirmation, so a green primary promises the thing has already happened, and every one of these buttons was asking a professional to spend credits he had not spent yet. It is now INK, by the pro portal rule (38a): ink is the primary where violet would clash with money green, and this portal has a settled green figure on every screen. 2. Links stopped taking hues. "View lead →" was violet and "All jobs →" was green; rule 5 forbids violet on a link and green does not ask, it reports. Both are blue now, which is what a door looks like. The public marketing pages at the bottom of this file are the one place violet survives, because they are read by somebody with no wallet, no balance and no earnings on screen. See the .lp-btn note. Colour meanings are shared with assets/css/pro-detail.css, so the dashboard, the lead page and the job page cannot drift apart on what a colour means. Spacing, type ramp and layout are the wireframe's, unchanged. Control geometry is now 38c's ladder — xs 28 / sm 34 / md 42 / lg 50 — rather than this file's own 36/38/48. ───────────────────────────────────────────────────────────────────────── */ .pr { /* line + surface */ --pr-line: #e5e7eb; /* was #E6E9EF — the wireframe's hairline */ --pr-line-soft: #F3F4F6; --pr-surface: #F8F9FA; /* Was #F5F5F5, which is a colour turn 38 does not define. The only thing this fills is a step that has not happened yet, so it takes the hue-blind disabled fill (38b) rather than a grey invented for this file. */ --pr-fill: #f3f4f6; --pr-white: #FFFFFF; /* text */ --pr-ink: #111111; --pr-body: #374151; --pr-muted: #6B7280; --pr-faint: #9CA3AF; /* semantic. Colour carries meaning here and means the SAME thing on the lead and job pages (wireframes 24b / 25a), which is why these names are shared with pro-detail.css: violet — a live lead nobody owns yet green — money, or something that is now yours amber — the two things that can cost you money blue — trust: measured figures, not urgent ones TURN 38 CORRECTION. Green was split in two here — #15803d for a figure, #16a34a for a filled surface. Turn 38 defines exactly one green (#15803d base, #166534 pressed/text), so the second one was a colour this file invented. Both names are kept because pro-detail.css and six pages reference them, but they now resolve to the same, single, defined green. Amber moved the same way: #F59E0B is not a value turn 38 defines, so --pr-warn is the real amber base and --pr-warn-ink is amber's defined text/pressed value. */ --pr-money: #15803d; /* every rupee figure */ --pr-go: #15803d; /* was #16a34a — see note above */ --pr-go-tint: #f0fdf4; --pr-go-line: #bbf7d0; --pr-live: #7c3aed; /* a lead in play: countdown, progress bar */ --pr-live-tint: #f5f3ff; --pr-live-line: #ddd6fe; --pr-trust: #2563eb; /* this week, rating */ --pr-warn: #b45309; /* was #F59E0B */ --pr-warn-ink: #92400e; /* was #B45309 — amber's defined text value */ --pr-danger: #DC2626; --pr-r: 12px; --pr-r-sm: 8px; --pr-display: 'Manrope', system-ui, sans-serif; --pr-ui: 'Inter', system-ui, sans-serif; --pr-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--pr-ui); color: var(--pr-ink); background: var(--pr-white); } .pr-wrap { max-width: 1200px; margin: 0 auto; padding: 22px 32px 44px; display: flex; flex-direction: column; gap: 20px; } /* ── 24a: full-bleed bands ────────────────────────────────────────────────── The dashboard is bands, not a column: grey hero, white leads, grey jobs, white opportunities. Each band runs edge to edge and centres its content on the same 1200px axis. .pr-full cancels base.css's centred 880px column the same way pro-detail.css does for the lead and job pages; scoped to its own class so the other portal pages (jobs, wallet…) keep their .pr-wrap layout. */ .pr-full { max-width: none !important; margin: 0 !important; padding: 0 !important; } .pr-hero { background: var(--pr-surface); border-bottom: 1px solid var(--pr-line); } .pr-sec { background: #fff; } .pr-sec.alt { background: var(--pr-surface); border-top: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line); } .pr-in { max-width: 1200px; margin: 0 auto; padding: 44px 40px; display: flex; flex-direction: column; gap: 20px; } .pr-in.hero { padding: 30px 40px; gap: 22px; } /* 24a's closing strip band is shallower than a content band. */ .pr-in.foot { padding: 26px 40px 36px; } /* The greeting row: who the page belongs to, over the trade, area and radius. */ .pr-hi { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .pr-hi-t { font: 600 30px/1.18 var(--pr-display); letter-spacing: -1.1px; color: var(--pr-ink); } .pr-hi-s { font: 400 12.5px/1.55 var(--pr-ui); color: var(--pr-muted); margin-top: 7px; } /* The one-line caption under a band's content — what the band deliberately leaves out. */ .pr-cap { font: 400 11px/1.55 var(--pr-ui); color: var(--pr-muted); } /* ── the micro label above every card's value ───────────────────────────── */ /* Card label: a 5px coloured dot, then the label in mono. The dot is how the strip says what KIND of number this is before you have read a word of it (wireframe 24a). */ .pr-tag { font: 500 9.5px/1 var(--pr-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--pr-faint); display: flex; align-items: center; gap: 8px; } .pr-tag::before { content: ''; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .pr-tag.go { color: var(--pr-go); } /* 24a: labels use the fill green #16a34a */ .pr-tag.trust { color: var(--pr-trust); } .pr-tag.live { color: var(--pr-live); } .pr-tag.warn { color: var(--pr-warn-ink); } .pr-h2 { font: 600 18px/1.2 var(--pr-display); letter-spacing: -.4px; color: var(--pr-ink); margin: 0; } .pr-h3 { font: 500 13px/1.35 var(--pr-ui); color: var(--pr-ink); margin: 0; } /* ── cards ──────────────────────────────────────────────────────────────── */ .pr-card { border: 1px solid var(--pr-line); border-radius: var(--pr-r); background: var(--pr-white); padding: 18px; display: flex; flex-direction: column; gap: 9px; } .pr-card.flush { padding: 0; overflow: hidden; } /* The 24a strip: four equal columns that FILL the row (auto-fit minted a phantom fifth track at 1200px, so the four cards stopped short of the right edge). 2×2 on a laptop, one column on a phone. Cards stretch to the row's height with 24a's 11px rhythm. */ .pr-4up { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; } .pr-4up > .pr-card { gap: 11px; } .pr-4up > .span-all { grid-column: 1 / -1; } @media (max-width: 1020px) { .pr-4up { grid-template-columns: 1fr 1fr; } } /* 24a: the availability card sits on the green tint, and its state reads at 20px. */ .pr-av { border-color: var(--pr-go-line); background: var(--pr-go-tint); } .pr-4up .pr-stat { font: 600 20px/1.18 var(--pr-display); letter-spacing: -.6px; } /* Figure + hairline + supporting text, the pattern "this week" and "rating" share. */ .pr-figrow { display: flex; align-items: baseline; gap: 18px; } .pr-fig { font: 600 22px/1.18 var(--pr-display); letter-spacing: -.8px; color: var(--pr-ink); } /* 24a's wallet figure is Manrope like the other figures — green because it is money. */ .pr-fig.money { color: var(--pr-money); } .pr-figrow .pr-note { font: 400 11.5px/1.55 var(--pr-ui); color: var(--pr-muted); } .pr-vr { width: 1px; height: 20px; background: var(--pr-line-soft); flex: none; } /* Wallet runway. 4px, same bar the lead countdown uses, so a bar always means "how much of something is left". */ .pr-meter { height: 4px; border-radius: 999px; background: var(--pr-line-soft); overflow: hidden; } .pr-meter i { display: block; height: 100%; border-radius: 999px; background: var(--pr-go); } .pr-3up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pr-2up { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .pr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pr-rowb { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .pr-note { font: 400 10.5px/1.5 var(--pr-ui); color: var(--pr-faint); } .pr-sub { font: 400 11px/1.5 var(--pr-ui); color: var(--pr-muted); } /* ── numbers ────────────────────────────────────────────────────────────── */ .pr-stat { font: 600 17px/1 var(--pr-display); letter-spacing: -.4px; color: var(--pr-ink); } .pr-stat.lg { font-size: 22px; letter-spacing: -.6px; } /* "Online" is a green state, not a violet lead — --pr-live changed meaning in turn 24. */ .pr-stat.live { color: var(--pr-money); } /* MONEY. Mono so digits align down a ledger, green because it is the number that matters most to the person reading it. */ .pr-money { font: 600 13px/1 var(--pr-mono); color: var(--pr-money); font-variant-numeric: tabular-nums; } .pr-money.lg { font-size: 22px; letter-spacing: -.4px; } .pr-money.sm { font-size: 11.5px; } .pr-money.out { color: var(--pr-danger); } /* a debit in the ledger */ /* ── availability toggle ────────────────────────────────────────────────── */ /* 38e freezes the switch at 42×24 with an 18px knob. This was 44×25/19 — close enough to look right on its own and wrong beside every other toggle in the system, which is exactly the drift a shared spec exists to stop. */ .pr-toggle { width: 42px; height: 24px; border-radius: 999px; background: var(--pr-line); padding: 3px; display: flex; justify-content: flex-start; border: 0; cursor: pointer; transition: background .18s ease; flex: none; } .pr-toggle > span { width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s ease; display: block; } /* ON = green because this switch is "available / live", not a preference (38e). */ .pr-toggle.on { background: var(--pr-go); } .pr-toggle.on > span { transform: translateX(18px); } /* ── buttons ──────────────────────────────────────────────────────────────── GEOMETRY is turn 38's md — 42px tall, 12px/18px padding, 8px radius, 600 12.5px (38c). It was 38px / 11px 18px / 12px, which is a size the system does not have; md is "the default, one per card" and this is that button. COLOUR is the one real defect this file carried. .pr-btn was FILLED GREEN, and rule 2 is explicit: green reports money and confirmation, and a green primary promises the thing already happened. "Accept this lead for ₹40" had not happened yet — it was a button asking a professional to spend money, dressed as a receipt. It is INK rather than violet because of the pro portal rule (38a): ink is the primary WHERE VIOLET WOULD CLASH WITH MONEY GREEN, and every screen this button appears on — dashboard, lead, job, jobs, wallet — carries a settled green figure (wallet balance in the header at minimum). Violet is kept for the logged-out marketing pages further down this file, which show no professional's money. */ .pr-btn, .pr-ghost { font: 600 12.5px/1 var(--pr-ui); border-radius: var(--pr-r-sm); padding: 12px 18px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } .pr-btn { background: var(--pr-ink); color: #fff; border: 1px solid var(--pr-ink); } .pr-ghost { background: #fff; color: var(--pr-ink); border: 1px solid var(--pr-line); } /* .go was a second, darker green. With the primary now ink there is nothing for it to mean, and dashboard.php still emits it on the accept-and-view Confirm button, so it is neutralised here rather than left to paint one button green. */ .pr-btn.go { background: var(--pr-ink); border-color: var(--pr-ink); } /* Destructive: OUTLINED, never filled (rule 3). #FCA5A5 was not a defined value; red's outline triple is #fff / #fecaca / #b91c1c. */ .pr-btn.stop { background: #fff; color: var(--xw-red-dark, #b91c1c); border-color: var(--xw-red-border, #fecaca); } /* A content link NAVIGATES, so it is blue and light (rule 5), drawn with 38e's 1px tinted inset underline rather than the browser's. It was ink, which made every "All leads →" read as a control rather than a door. */ .pr-link { font: 600 11.5px/1 var(--pr-ui); color: var(--xw-blue-dark, #1d4ed8); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--xw-blue-border, #bfdbfe); } /* A breadcrumb navigates too, but it sits directly above the H1 and must not outrank it. Same link one step quieter: it keeps the muted grey and drops the tinted rule, because grey text over a blue underline reads as two decisions. (Replaces three copies of an inline style="color:var(--pr-muted)".) */ .pr-link.quiet { color: var(--pr-muted); box-shadow: none; } @media (hover: hover) { .pr-link.quiet:hover { color: var(--pr-ink); box-shadow: none; } /* ink pressed = #242424 (38b) */ .pr-btn:hover, .pr-btn.go:hover { background: var(--xw-ink-dark, #242424); border-color: var(--xw-ink-dark, #242424); } /* .stop must come AFTER .pr-btn:hover — the two have equal specificity, so the later rule wins, and without this the outlined destructive button filled with the primary's colour the moment the cursor touched it. (It did this before these edits too, filling green; rule 3 makes it worth stating explicitly.) */ .pr-btn.stop:hover { background: var(--xw-red-tint, #fef2f2); border-color: var(--pr-danger); color: var(--xw-red-dark, #b91c1c); } .pr-ghost:hover { background: var(--pr-surface); } .pr-link:hover { box-shadow: inset 0 -1px 0 var(--xw-blue, #2563eb); } } /* Disabled is hue-blind (38b): a disabled control carries no meaning, so it is given no colour to carry it with. opacity:.55 kept the hue and just faded it. */ .pr-btn:disabled, .pr-ghost:disabled { background: var(--xw-disabled-bg, #f3f4f6); border-color: var(--xw-disabled-border, #e5e7eb); color: var(--xw-disabled-text, #9ca3af); cursor: default; } /* ── the left-rule alert (low wallet, KYC rejected) ─────────────────────── */ .pr-alert { border-left: 3px solid var(--pr-warn); background: var(--pr-surface); border-radius: 0 var(--pr-r-sm) var(--pr-r-sm) 0; padding: 14px 16px; display: flex; align-items: center; gap: 16px; } .pr-alert.bad { border-left-color: var(--pr-danger); } .pr-alert > .txt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pr-alert .t { font: 500 12.5px var(--pr-ui); color: var(--pr-ink); } .pr-alert .d { font: 400 11px/1.5 var(--pr-ui); color: var(--pr-muted); } .pr-x { background: none; border: 0; font: 15px var(--pr-ui); color: var(--pr-faint); cursor: pointer; line-height: 1; padding: 4px; } /* ── band headers (24a) ───────────────────────────────────────────────────── Label-over-count stack on the left, actions on the right, both sitting on the band's bottom edge — flex-end, not baseline: baseline would hoist the action link up level with the tiny mono label instead of the big count. */ .pr-bandhd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .pr-hdact { flex: none; display: flex; align-items: center; gap: 14px; } /* The connection state. It is a FACT, not a control, and it was drawn in violet — the hue that means "act". Green is what 38a gives to "live", so a connected feed takes green's tint triple; quiet grey while connecting, amber ("offline") on trouble. Badge geometry: 999px, 4px 10px, 600 10px (38e). */ .pr-pulse { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: var(--pr-go-tint); border: 1px solid var(--pr-go-line); font: 600 10px var(--pr-ui); color: var(--xw-green-dark, #166534); white-space: nowrap; } .pr-pulse.off { background: var(--pr-surface); border-color: var(--pr-line); color: var(--pr-faint); } .pr-pulse.down { background: var(--xw-amber-tint, #fffbeb); border-color: var(--xw-amber-border, #fde68a); color: var(--pr-warn-ink); } /* ── a live lead — wireframe 24a's card ───────────────────────────────────── Header (title, one meta line, the countdown), a 4px violet bar, then a footer split by a hairline: the price on the left, "View lead →" and Accept on the right. Cards in a row stretch to the same height; the spacer div between top and footer absorbs the difference so every footer sits on the same line. */ .pr-leads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; } .pr-lead { border: 1px solid var(--pr-line); border-radius: var(--pr-r); background: #fff; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05); display: flex; flex-direction: column; } .pr-lead .top { padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; } .pr-lead .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pr-lead .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .pr-lead .cat { font: 600 16px/1.3 var(--pr-display); letter-spacing: -.5px; color: var(--pr-ink); } .pr-lead .meta { font: 400 11px/1.55 var(--pr-ui); color: var(--pr-muted); } .pr-lead .act { border-top: 1px solid var(--pr-line-soft); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* REVIEW FIX: this was `padding: 11px 19px` — "a touch wider than the base button". 38c freezes the geometry precisely so that no card gets to be a touch anything; a button that is 1px off in both axes is how a system stops reading as one system. Accept is the card's md, like every other md. */ .pr-lead .act .pr-btn { padding: 12px 18px; } /* A direct "asked for you" lead is already half-owned — it sits on the green tint. */ .pr-lead.direct { border-color: var(--pr-go-line); } /* Accepted: the whole card turns green (24a's YOURS card). */ .pr-lead.taken { border-color: var(--pr-go-line); } .pr-lead.taken .act { background: var(--pr-go-tint); border-top-color: var(--pr-go-line); } /* The countdown: mono, ink — it turns amber with the bar in the last minutes. */ .pr-timer { flex: none; font: 600 13px var(--pr-mono); color: var(--pr-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .pr-lead.low .pr-timer { color: var(--pr-warn-ink); } .pr-lead.low .pr-bar > i { background: var(--pr-warn); } /* REVIEW FIX — UNSETTLED GREEN. This block was money-green, and its own label says "TO ACCEPT": it is what the pro will be charged if he presses the button beside it, not a rupee that has moved. Green CONFIRMS — paid, credited, earned, a settled amount — so a green figure here reported a debit that has not happened, on the one card where the pro is deciding whether to let it happen. lead.php already takes the identical figure ("Cost to accept") to ink; the dashboard was the last place the same number was still green. Ink now, on both. The wallet balance, the paid-fee chip and the earnings figures keep their green — those are settled, which is the whole distinction. */ .pr-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pr-price .v { font: 700 14px var(--pr-mono); color: var(--pr-ink); } .pr-price .k { font: 500 9.5px var(--pr-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--pr-muted); white-space: nowrap; } /* The card's door. It was violet while the lead was anybody's and green once it was yours — but rule 5 forbids violet on a link outright ("violet on a link inflates a scroll into a commitment"), and green does not ask, it reports. "View lead →" opens a page and commits nothing, so both states are blue: navigation is blue and light. */ .pr-golink { font: 600 11.5px var(--pr-ui); color: var(--xw-blue-dark, #1d4ed8); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--xw-blue-border, #bfdbfe); } @media (hover: hover) { .pr-golink:hover { box-shadow: inset 0 -1px 0 var(--xw-blue, #2563eb); } } /* A quiet chip, not a solid black pill. These label a job — the date, the fee — and a row of black pills read as buttons and fought the one real button for attention. */ /* Badge geometry, 38e: 999px, padding 4px 10px, 600 10px, and always a tint triple. */ .pr-chip { border-radius: 999px; background: var(--pr-surface); color: var(--pr-body); border: 1px solid var(--pr-line); font: 600 10px var(--pr-mono); letter-spacing: .04em; padding: 4px 10px; white-space: nowrap; } /* The fee a professional already paid is money that has SETTLED, so it takes green's tint triple — tint bg, tint border, and the dark value for the text (38e). */ .pr-chip.paid { background: var(--pr-go-tint); border-color: var(--pr-go-line); color: var(--xw-green-dark, #166534); } /* The chip an accepted lead card wears. #dcfce7 was a second green tint this file invented; the defined one is #f0fdf4. */ .pr-chip.yours { background: var(--pr-go-tint); border-color: var(--pr-go-line); color: var(--xw-green-dark, #166534); } .pr-chip.q { background: #fff; color: var(--pr-body); border: 1px solid var(--pr-line); letter-spacing: 0; font-family: var(--pr-ui); font-size: 10px; } /* .pr-map is gone with the Details drawer — the map lives on the lead/job pages now. */ /* 4px, violet — the same bar the wallet meter uses, so a bar always means "how much of something is left". It follows the card into amber (low) and green (yours). */ .pr-bar { height: 4px; background: var(--pr-line-soft); border-radius: 999px; overflow: hidden; } .pr-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--pr-live); transition: width 1s linear; } /* ── active jobs list ───────────────────────────────────────────────────── */ /* 1fr / 150px, gap 24 — wireframe 24b's "compact row that ships". `auto` let the action block size itself, so the buttons landed in a different place on every row and the eye had to hunt for them. A fixed 150px column means the distance from the job title to the thing you press is short and constant. */ .pr-job { padding: 18px 20px; border-bottom: 1px solid var(--pr-line-soft); display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 24px; align-items: center; } .pr-job:last-child { border-bottom: 0; } .pr-job .who { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* Manrope 15, matching the wireframe — the job title is the thing you scan for. */ .pr-job .ttl { font: 600 15px/1.18 var(--pr-display); letter-spacing: -.4px; color: var(--pr-ink); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pr-job .ref { font: 500 11px var(--pr-mono); color: var(--pr-faint); font-weight: 500; } .pr-job .l1 { font: 400 11px/1.55 var(--pr-ui); color: var(--pr-muted); } .pr-job .l1r { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; } .pr-job .l2 { font: 400 11px/1.55 var(--pr-ui); color: var(--pr-body); } /* Stacked in the 150px column, full width, so both buttons start at the same x. REVIEW FIX: this used to crush both buttons to `padding: 10px`, which is not a size 38c defines and which silently undid the md the .pr-btn/.pr-ghost base sets. Geometry is frozen (38c) — the column controls the WIDTH, not the size. */ .pr-job .btns { display: flex; flex-direction: column; gap: 7px; align-items: stretch; } .pr-job .btns > * { width: 100%; text-align: center; justify-content: center; padding: 12px 18px; } /* The phone row's door — a quiet chevron (24c). Hidden on desktop, where the ghost "View details →" button carries the same link. */ .pr-chev { display: none; font: 400 15px/1 var(--pr-ui); color: var(--pr-faint); text-decoration: none; flex: none; } /* The date as plain text (24c's second line) — desktop shows the chip instead. */ .pr-job .mdate { display: none; } /* ── opportunities — 24a's amber cards ────────────────────────────────────── Amber is reserved for money being missed. Each card opens with the figure that matters (Manrope, over a mono label), names the thing, and offers one specific action — three of these take less height than one grey row did. */ .pr-opps { display: flex; flex-direction: column; gap: 12px; } .pr-opp { border: 1px solid #fde68a; border-radius: var(--pr-r); background: #fffbeb; padding: 18px 20px; display: flex; align-items: center; gap: 18px; } .pr-opp .fig { flex: none; width: 78px; display: flex; flex-direction: column; gap: 3px; } .pr-opp .fig .n { font: 600 28px/1.18 var(--pr-display); letter-spacing: -1px; color: var(--pr-warn-ink); } .pr-opp .fig .k { font: 500 9.5px var(--pr-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--pr-warn-ink); } .pr-opp .t { flex: 1; min-width: 0; font: 600 14px/1.35 var(--pr-display); letter-spacing: -.35px; color: var(--pr-ink); } /* The card is amber because it names a CONDITION (money being missed). Rule 4 then says amber never goes on the way forward, so the action out of it is blue — it opens a page. Amber staying on the description only is what keeps it readable. */ .pr-opp .go { flex: none; font: 600 11.5px var(--pr-ui); color: var(--xw-blue-dark, #1d4ed8); text-decoration: none; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--xw-blue-border, #bfdbfe); } @media (hover: hover) { .pr-opp .go:hover { box-shadow: inset 0 -1px 0 var(--xw-blue, #2563eb); } } /* 24c: on a phone each opportunity ends in a chevron, and the text action becomes one "See all N →" under the (first two) cards. Both are desktop-hidden. */ /* Both are doors out of the amber card, so both are blue for the reason above. #d4a15a was not a defined colour at all. */ .pr-opp .chev { display: none; font: 400 15px/1 var(--pr-ui); color: var(--xw-blue-dark, #1d4ed8); text-decoration: none; flex: none; } .pr-opp-more { display: none; font: 600 11.5px/1 var(--pr-ui); color: var(--xw-blue-dark, #1d4ed8); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; white-space: nowrap; } /* ── whole-surface doors ───────────────────────────────────────────────────── A card or row that opens a page must LOOK like it does and be hittable anywhere: pointer cursor, a quiet hover response, keyboard focus ring. The labelled link ("View details →") stays — it names where you are going; the surface is just a bigger target for the same door. Real controls inside (Call, Accept, toggles) still win — the click delegate skips them. */ .pr-click { cursor: pointer; } .pr-click:focus-visible { outline: 2px solid var(--pr-ink); outline-offset: 2px; } .pr-lead.pr-click, .pr-opp.pr-click { transition: border-color .15s ease, box-shadow .15s ease; } @media (hover: hover) { .pr-job.pr-click:hover { background: var(--pr-surface); } .pr-lead.pr-click:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,.07); } .pr-lead.pr-click.direct:hover, .pr-lead.pr-click.taken:hover { border-color: var(--pr-go); } .pr-opp.pr-click:hover { border-color: var(--pr-warn); } } /* ── the closing stats strip (24a: 22px over the hairline, 18px figures) ── */ .pr-foot { border-top: 1px solid var(--pr-line-soft); padding-top: 22px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .pr-foot a { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 3px; } .pr-foot .pr-stat { font: 600 18px/1.18 var(--pr-display); letter-spacing: -.5px; } .pr-foot .k { font: 400 10.5px/1.55 var(--pr-ui); color: var(--pr-muted); } /* ── empty states ───────────────────────────────────────────────────────── */ .pr-empty { padding: 34px 16px; text-align: center; font: 400 12px var(--pr-ui); color: var(--pr-muted); } /* ── onboarding checklist ───────────────────────────────────────────────── */ .pr-step { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--pr-line-soft); } .pr-step:last-child { border-bottom: 0; } .pr-step .n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 500 11px var(--pr-mono); background: var(--pr-ink); color: #fff; } .pr-step .n.done { background: var(--pr-money); } .pr-step .n.wait { background: var(--pr-fill); color: var(--pr-muted); } .pr-step .n.bad { background: var(--pr-danger); } .pr-step .lbl { flex: 1; font: 500 12.5px var(--pr-ui); color: var(--pr-ink); min-width: 0; } .pr-step.is-done .lbl { color: var(--pr-muted); text-decoration: line-through; text-decoration-color: var(--pr-go-line); } .pr-meter { height: 4px; background: var(--pr-line-soft); border-radius: 999px; overflow: hidden; } .pr-meter > i { display: block; height: 100%; background: var(--pr-go); border-radius: 999px; transition: width .5s ease; } /* ── phone: the shared portal bits (non-dashboard pages) ────────────────── */ @media (max-width: 860px) { .pr-wrap { padding: 14px 16px 34px; gap: 14px; } .pr-3up { grid-template-columns: 1fr 1fr; gap: 10px; } .pr-3up > .span2 { grid-column: 1 / -1; } .pr-2up { grid-template-columns: 1fr; gap: 10px; } .pr-alert { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px; } .pr-alert .pr-btn { align-self: flex-start; margin-top: 4px; } .pr-alert .pr-x { position: absolute; right: 6px; top: 6px; } .pr-alert { position: relative; } } /* The dashboard's own 24c rules live at the END of this file so they always win. */ /* The lead card's Details disclosure (.pr-more/.pr-det/.pr-dl) is gone: the card is a door now, and everything it used to disclose lives on lead.php (wireframe 25b). */ /* ── Cancel: an outline that reads as "destructive" without shouting ──────── It sits beside Complete on every active job. A plain text link was too easy to hit by accident; a solid red button competes with the primary action. An outlined, muted-red button is clearly a different KIND of action from the black Complete next to it, which is the distinction that matters. */ /* Still an outline — rule 3, and filled red is earned only after a typed confirmation, which for this button happens in the dialog it opens, not here. Two things changed: #F3C6C6 was not a defined colour (red's outline border is #fecaca, its text #b91c1c), and it sat at 36px/11.5px/500 beside a 42px primary. Rule 6 — one radius per group — is really one GEOMETRY per group, so Cancel now takes the same md as the Complete it stands next to. */ .pr-cancel { font: 600 12.5px/1 var(--pr-ui); border-radius: var(--pr-r-sm); padding: 12px 18px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--xw-red-dark, #b91c1c); border: 1px solid var(--xw-red-border, #fecaca); cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease; } @media (hover: hover) { .pr-cancel:hover { background: var(--xw-red-tint, #fef2f2); border-color: var(--pr-danger); } } /* The empty state carries a button in the offline case, so it needs to stack. */ .pr-empty .pr-btn { margin-top: 2px; } /* ═══ Settings — Claude Design turn 15 ══════════════════════════════════════ Section rail on the left, grouped cards on the right. On a phone the rail becomes the index and each section is a card in one column (15c). */ .st-grid { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; } .st-rail { position: sticky; top: calc(var(--xw-hdr-h, 66px) + 16px); display: flex; flex-direction: column; gap: 2px; } .st-rail a { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px; font: 500 12.5px var(--pr-ui); color: var(--pr-body); text-decoration: none; } .st-rail a .st-tag { margin-left: auto; font: 500 9.5px var(--pr-mono); color: var(--pr-faint); } .st-rail a.on { background: var(--pr-surface); color: var(--pr-ink); } @media (hover: hover) { .st-rail a:hover { background: var(--pr-surface); } } .st-rail .st-out { color: var(--pr-danger); margin-top: 6px; } .st-secs { display: flex; flex-direction: column; gap: 18px; } .st-sec { border: 1px solid var(--pr-line); border-radius: var(--pr-r); background: #fff; overflow: hidden; scroll-margin-top: calc(var(--xw-hdr-h, 66px) + 16px); } .st-hd { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--pr-line-soft); } .st-hd h2 { font: 600 15px var(--pr-display); letter-spacing: -.3px; color: var(--pr-ink); margin: 0; } .st-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; } /* a labelled row inside a section */ .st-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .st-row .t { font: 500 12.5px var(--pr-ui); color: var(--pr-ink); } .st-row .d { font: 400 11px/1.55 var(--pr-ui); color: var(--pr-muted); margin-top: 2px; } .st-row + .st-row { border-top: 1px solid var(--pr-line-soft); padding-top: 16px; } .st-field { display: flex; flex-direction: column; gap: 6px; } .st-inp, .st-area { width: 100%; border: 1px solid var(--pr-line); border-radius: var(--pr-r-sm); padding: 11px 12px; font: 400 12.5px var(--pr-ui); color: var(--pr-ink); background: #fff; } .st-area { min-height: 84px; resize: vertical; } .st-inp:focus, .st-area:focus { outline: none; border-color: var(--pr-ink); } .st-count { font: 500 9.5px var(--pr-mono); color: var(--pr-faint); letter-spacing: .06em; text-transform: uppercase; } .st-actions { display: flex; gap: 10px; justify-content: flex-end; } /* the "you would only see leads by opening the app" caution */ .st-caution { border-left: 3px solid var(--pr-warn); background: var(--xw-amber-tint, #fffbeb); border-radius: 0 var(--pr-r-sm) var(--pr-r-sm) 0; padding: 11px 13px; font: 400 11px/1.55 var(--pr-ui); color: var(--pr-warn-ink); } .st-meter { height: 4px; background: var(--pr-line-soft); border-radius: 999px; overflow: hidden; } .st-meter > i { display: block; height: 100%; background: var(--pr-money); border-radius: 999px; } @media (max-width: 900px) { .st-grid { grid-template-columns: 1fr; gap: 16px; } .st-rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .st-rail::-webkit-scrollbar { display: none; } .st-rail a { white-space: nowrap; border: 1px solid var(--pr-line); } .st-rail .st-out { display: none; } /* sign-out lives in its own section on a phone */ .st-row { flex-direction: column; align-items: stretch; gap: 10px; } .st-actions { justify-content: stretch; } .st-actions > * { flex: 1; } } /* ═══ Professionals landing — Claude Design turn 16 ═════════════════════════ */ .lp { max-width: 1120px; margin: 0 auto; padding: 0 32px; } .lp-band { padding: 56px 0; border-top: 1px solid var(--pr-line-soft); } .lp-band:first-child { border-top: 0; } .lp-eyebrow { font: 500 9.5px var(--pr-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pr-faint); } .lp-h1 { font: 700 46px/1.08 var(--pr-display); letter-spacing: -1.6px; color: var(--pr-ink); margin: 12px 0 0; } .lp-h2 { font: 600 26px/1.2 var(--pr-display); letter-spacing: -.7px; color: var(--pr-ink); margin: 8px 0 0; } .lp-lede { font: 400 15px/1.65 var(--pr-ui); color: var(--pr-body); margin: 14px 0 0; max-width: 620px; } .lp-sub { font: 400 12.5px/1.6 var(--pr-ui); color: var(--pr-muted); margin: 8px 0 0; max-width: 620px; } .lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } /* lg — 50px, 15px/22px, 8px radius, 600 14px (38c). These are the page primary on the four public pages, and 38c gives the page primary lg. It was 48px/14px/13px, a size the system does not define. */ .lp-btn, .lp-ghost { font: 600 14px var(--pr-ui); border-radius: var(--pr-r-sm); padding: 15px 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; min-height: 50px; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; } /* VIOLET, not ink. The pro portal rule (38a) makes ink the primary where violet would clash with money green — and it names what it is protecting: wallet balance, lead fees, earnings, payouts. None of that is on these four pages, which are read by somebody who does not have an account yet. "Join as a professional" is the one thing on the page that commits, and violet ACTS. (The green figures these pages do carry are prices and the word "Free" — copy about the model, not a professional's own money. See the report.) */ .lp-btn { background: var(--xw-violet, #7c3aed); color: #fff; border-color: var(--xw-violet, #7c3aed); } /* A button that NAVIGATES rather than commits: "Activate with credits" and "Open WhatsApp" both just open another page, and blue is what informs (rule 5). */ .lp-btn.blue { background: var(--xw-blue, #2563eb); border-color: var(--xw-blue, #2563eb); } .lp-ghost { background: #fff; color: var(--pr-ink); border-color: var(--pr-line); } @media (hover: hover) { .lp-btn:hover { background: var(--xw-violet-dark, #6d28d9); border-color: var(--xw-violet-dark, #6d28d9); } .lp-btn.blue:hover { background: var(--xw-blue-dark, #1d4ed8); border-color: var(--xw-blue-dark, #1d4ed8); } .lp-ghost:hover { background: var(--pr-surface); } } .lp-fine { font: 400 11px var(--pr-ui); color: var(--pr-faint); margin-top: 12px; } .lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .lp-stat .n { font: 700 30px/1 var(--pr-display); letter-spacing: -1px; color: var(--pr-ink); } .lp-stat .k { font: 400 11px var(--pr-ui); color: var(--pr-muted); margin-top: 5px; } .lp-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lp-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .lp-card { border: 1px solid var(--pr-line); border-radius: var(--pr-r); padding: 20px; background: #fff; } .lp-card .t { font: 600 14px var(--pr-display); letter-spacing: -.2px; color: var(--pr-ink); } .lp-card .d { font: 400 12px/1.6 var(--pr-ui); color: var(--pr-muted); margin-top: 6px; } /* numbered steps */ .lp-step { display: flex; gap: 14px; } .lp-step .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pr-ink); color: #fff; font: 500 11px/26px var(--pr-mono); text-align: center; } /* the "we never" list — a cross, not a tick */ .lp-never { display: flex; gap: 12px; align-items: flex-start; } .lp-never .x { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #FEF2F2; color: var(--pr-danger); font: 600 11px/20px var(--pr-ui); text-align: center; } .lp-tick { display: flex; gap: 10px; align-items: flex-start; } /* #ECFDF5 was a third green tint. The defined one is #f0fdf4. */ .lp-tick .c { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pr-go-tint); color: var(--pr-money); font: 600 11px/20px var(--pr-ui); text-align: center; } /* the money flow strip */ .lp-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; } .lp-flow .s { flex: 1; min-width: 120px; padding: 16px; border: 1px solid var(--pr-line); } .lp-flow .s:first-child { border-radius: var(--pr-r) 0 0 var(--pr-r); } .lp-flow .s:last-child { border-radius: 0 var(--pr-r) var(--pr-r) 0; } .lp-flow .s + .s { border-left: 0; } .lp-flow .k { font: 400 10.5px var(--pr-ui); color: var(--pr-muted); } .lp-flow .v { font: 600 16px var(--pr-mono); color: var(--pr-ink); margin-top: 4px; } .lp-flow .v.free { color: var(--pr-muted); } .lp-flow .v.paid { color: var(--pr-money); } /* trades */ .lp-trade { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--pr-line); border-radius: var(--pr-r); padding: 15px 16px; font: 500 13px var(--pr-ui); color: var(--pr-ink); text-decoration: none; } @media (hover: hover) { .lp-trade:hover { border-color: var(--pr-ink); } } /* FAQ */ .lp-faq { border: 1px solid var(--pr-line); border-radius: var(--pr-r); overflow: hidden; } .lp-faq details { border-bottom: 1px solid var(--pr-line-soft); } .lp-faq details:last-child { border-bottom: 0; } .lp-faq summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 500 13px var(--pr-ui); color: var(--pr-ink); min-height: 52px; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: '+'; font: 400 16px var(--pr-ui); color: var(--pr-faint); } .lp-faq details[open] summary::after { content: '−'; } .lp-faq .a { padding: 0 18px 16px; font: 400 12.5px/1.7 var(--pr-ui); color: var(--pr-body); } /* the demo request card */ .lp-demo { border: 1px solid var(--pr-ink); border-radius: var(--pr-r); padding: 18px; background: #fff; } .lp-demo .hd { display: flex; align-items: center; justify-content: space-between; } .lp-pill { display: inline-flex; gap: 6px; flex-wrap: wrap; } /* REVIEW FIX: badge type is 600 10px (38e). This was 400 10.5px — the only pill on the marketing pages that disagreed with every other pill in the system. */ .lp-pill span { border: 1px solid var(--pr-line); border-radius: 999px; padding: 4px 10px; font: 600 10px var(--pr-ui); color: var(--pr-body); } /* 16b — the sticky join bar, phone only */ .lp-sticky { display: none; } @media (max-width: 860px) { .lp { padding: 0 16px; } .lp-band { padding: 34px 0; } .lp-h1 { font-size: 32px; letter-spacing: -1px; } .lp-h2 { font-size: 21px; } .lp-hero, .lp-grid2, .lp-grid3 { grid-template-columns: 1fr; gap: 22px; } .lp-grid4 { grid-template-columns: 1fr 1fr; } .lp-stats { grid-template-columns: 1fr 1fr; } /* 38f: on a phone, pairs STACK — they are never side by side — and anything page-level is lg AND full width. `flex:1` put Join and its secondary in two half-width columns, which is the arrangement that rule exists to prevent. */ .lp-cta { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } .lp-cta > * { width: 100%; } .lp-flow .s { flex: 1 1 50%; border-radius: 0 !important; } /* 38f's sticky bar: 11px/14px padding over a hairline, with the lifted shadow — without it the bar and the page below it read as one surface. */ .lp-sticky { display: flex; gap: 12px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--pr-line); box-shadow: 0 -4px 14px rgba(0,0,0,.07); padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); } .lp-sticky .lp-btn { flex: 1; } .lp-sticky .m { font: 400 10.5px/1.35 var(--pr-ui); color: var(--pr-muted); flex: 1; } body { padding-bottom: 76px; } } /* ═══ Motion for the four public pro pages ═════════════════════════════════ Bands rise in as they arrive, anchors glide, accordions open by height rather than snapping. All of it is OFF under prefers-reduced-motion, and the reveal state is only ever applied by JS — so with JS disabled every band is visible at full opacity rather than a blank page. */ html { scroll-behavior: smooth; } .lp-rise { opacity: 0; transform: translateY(14px); } .lp-rise.in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2,.8,.3,1), transform .5s cubic-bezier(.2,.8,.3,1); } /* buttons and cards get a little life without any tap-scale */ .lp-btn, .lp-ghost, .lp-trade, .lp-card { transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } @media (hover: hover) { .lp-card:hover { border-color: var(--xw-line-input, #d1d5db); } .lp-trade:hover { transform: translateX(2px); } .lp-btn:hover { transform: translateY(-1px); } } .lp-btn:active, .lp-ghost:active, .lp-trade:active { transform: none; } /* accordion: animate the panel, and spin the +/− */ .lp-faq details > .a { overflow: hidden; } .lp-faq summary::after { transition: transform .2s ease; display: inline-block; } .lp-faq details[open] summary::after { transform: rotate(180deg); } /* the sticky bar slides up once the hero is past */ .lp-sticky { transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.3,1); } .lp-sticky.show { transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lp-rise, .lp-rise.in { opacity: 1; transform: none; transition: none; } .lp-btn, .lp-ghost, .lp-trade, .lp-card, .lp-sticky, .lp-faq summary::after { transition: none; } .lp-sticky { transform: none; } } /* ── Restored from the wireframes (pieces I had trimmed) ─────────────────── */ /* 17a — the sticky 1..7 step rail beside the steps */ .lp-railed { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 40px; align-items: start; } .lp-srail { position: sticky; top: calc(var(--xw-hdr-h,66px) + 20px); display: flex; flex-direction: column; gap: 2px; } .lp-srail a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; font: 500 12px var(--pr-ui); color: var(--pr-muted); } .lp-srail a i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--pr-line-soft); color: var(--pr-muted); font: 500 10px/20px var(--pr-mono); text-align: center; font-style: normal; } .lp-srail a.on, .lp-srail a:hover { background: var(--pr-surface); color: var(--pr-ink); } .lp-srail a.on i { background: var(--pr-ink); color: #fff; } /* 16a — testimonial band */ .lp-quote { border: 1px solid var(--pr-line); border-radius: var(--pr-r); padding: 20px; background: #fff; display: flex; flex-direction: column; gap: 12px; } .lp-quote p { margin: 0; font: 400 13px/1.7 var(--pr-ui); color: var(--pr-body); } .lp-quote .who { display: flex; align-items: center; gap: 10px; } .lp-quote .av { width: 32px; height: 32px; border-radius: 50%; background: var(--pr-ink); color: #fff; font: 500 11px/32px var(--pr-ui); text-align: center; flex: none; } .lp-quote .nm { font: 600 12px var(--pr-ui); color: var(--pr-ink); } .lp-quote .tr { font: 400 11px var(--pr-ui); color: var(--pr-muted); } .lp-pending { border: 1px dashed #D1D5DB; border-radius: var(--pr-r); padding: 22px; background: var(--pr-surface); text-align: center; } /* 18c — quiet / busy hours strip */ .lp-hours { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .lp-hours .h { border: 1px solid var(--pr-line); border-radius: var(--pr-r-sm); padding: 13px; text-align: center; } .lp-hours .h .k { font: 400 10.5px var(--pr-ui); color: var(--pr-muted); } .lp-hours .h .v { font: 600 12px var(--pr-mono); color: var(--pr-ink); margin-top: 4px; } .lp-hours .h.now { border-color: var(--pr-ink); } /* 18a — group icon beside each FAQ heading */ .lp-gico { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--pr-surface); border: 1px solid var(--pr-line); color: var(--pr-body); font: 600 13px/28px var(--pr-ui); text-align: center; } .lp-ghead { display: flex; align-items: center; gap: 12px; } /* 18a — WhatsApp block */ .lp-wa { border: 1px solid var(--pr-line); border-radius: var(--pr-r); padding: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .lp-wa .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--pr-go-tint); color: var(--pr-money); font: 600 16px/40px var(--pr-ui); text-align: center; flex: none; } @media (max-width: 860px) { .lp-railed { grid-template-columns: 1fr; gap: 18px; } .lp-srail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; } .lp-srail::-webkit-scrollbar { display: none; } .lp-srail a { white-space: nowrap; border: 1px solid var(--pr-line); } .lp-hours { grid-template-columns: 1fr; } } /* ── Contact & support (turn 19) — the form on the design's field style ──── */ .lp-form .f { display: flex; flex-direction: column; gap: 6px; } /* Field labels only. The consent row is also a