/* 10hub suite — the one frame every estimator shares (owner decision, 2026-09-02).
*
* The project estimator set the pattern: numbered panels down the left, the
* working-estimate ticket sticky on the right, one button set, one mobile bar.
* This sheet gives the trade tools that frame on top of their own palette
* variables (every colour falls back sensibly when a tool lacks the token).
* It styles the FRAME only — a tool's inputs and pricing are its own.
*
*
*
*
workbench: inputs | ticket
* the panels
*
*
*
01 Job details
*
Who and where
*
…
*
* … the tool's own fields …
*
*
*
*
*
…
phone: the total, always in reach
*/
.thf-wb{display:grid;grid-template-columns:minmax(0,1fr) 388px;gap:28px;align-items:start;
max-width:1240px;margin:0 auto;padding:24px 24px 88px}
.thf-col{display:flex;flex-direction:column;gap:24px;min-width:0}
/* ---- panels ---- */
.thf-panel{position:relative;background:var(--card,var(--surface,#fff));
border:1px solid var(--line,rgba(0,0,0,.09));border-radius:20px;padding:34px 32px;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -16px rgba(0,0,0,.14)}
.thf-ph{display:flex;align-items:flex-start;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.thf-ph>div{flex:1;min-width:180px}
.thf-ph h2{font-family:var(--f-display,"Satoshi","Inter",system-ui,sans-serif);font-size:24px;font-weight:500;
letter-spacing:-.03em;line-height:1.15;margin:12px 0 0;color:var(--ink,#0A0A0A)}
.thf-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:0;
font-family:var(--f-body,"Inter",system-ui,sans-serif);font-size:10.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink-3,var(--muted,#6B6B6B));line-height:1.5}
.thf-num{font-weight:700;color:var(--accent,#487468)}
@supports (background-clip:text) or (-webkit-background-clip:text){
.thf-num{background:var(--iris,linear-gradient(100deg,#487468,#5FA184 45%,#8FBFB0));
-webkit-background-clip:text;background-clip:text;color:transparent}
}
.thf-hint{font-size:14.5px;color:var(--ink-2,var(--muted,#505050));margin:5px 0 0;line-height:1.5}
.thf-tag{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#487468);
background:var(--accent-soft,#EEF6F3);border:1px solid rgba(72,116,104,.3);padding:3px 8px;border-radius:999px;margin-left:8px;
vertical-align:middle}
/* a tool's own cards inside a panel read as sub-blocks, not as cards on cards */
.thf-panel .card{box-shadow:none;border:1px solid var(--line-soft,var(--line,rgba(0,0,0,.07)));
background:var(--paper,#F7F7F7);border-radius:14px;padding:18px;margin-bottom:14px}
.thf-panel .card:last-child{margin-bottom:0}
.thf-panel .card h2{font-size:14px}
/* ---- the ticket ---- */
.thf-side{position:sticky;top:64px}
.thf-ticket{overflow:hidden;border-radius:26px;background:var(--card,var(--surface,#fff));
border:1px solid var(--line,rgba(0,0,0,.09));
box-shadow:0 2px 6px rgba(0,0,0,.05),0 20px 48px -24px rgba(0,0,0,.20)}
.thf-ticket.card{padding:0;margin:0 0 18px}
.thf-thead{padding:22px 22px 18px;border-bottom:1px solid var(--line-soft,rgba(0,0,0,.055))}
.thf-tproj{font-family:var(--f-display,"Satoshi","Inter",system-ui,sans-serif);font-size:20px;font-weight:500;
letter-spacing:-.03em;margin-top:8px;color:var(--ink,#0A0A0A)}
.thf-tmeta{font-size:11.5px;color:var(--ink-3,var(--muted,#6B6B6B));margin-top:6px;letter-spacing:.08em;font-weight:500;
text-transform:uppercase}
.thf-tsection{padding:16px 22px}
.thf-tsection+.thf-tsection{border-top:1px solid var(--line-soft,rgba(0,0,0,.055))}
.thf-ticket .thf{margin:0 22px 16px;border-radius:14px}
.thf-acts{display:flex;gap:8px;padding:16px 22px 20px;flex-wrap:wrap;border-top:1px solid var(--line-soft,rgba(0,0,0,.055))}
.thf-acts .btn{flex:1 1 auto;justify-content:center}
/* ---- mobile bar: the number follows the thumb ---- */
.thf-mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:70;display:none;align-items:center;gap:12px;
padding:10px 10px 10px 18px;border-radius:999px;background:var(--card,var(--surface,#fff));
border:1px solid var(--line,rgba(0,0,0,.09));box-shadow:0 2px 6px rgba(0,0,0,.05),0 20px 48px -24px rgba(0,0,0,.30);
transform:translateY(140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.thf-mbar.show{transform:none}
.thf-mbar .thf-mbl{flex:1;min-width:0}
.thf-mbar .thf-mblbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,var(--muted,#6B6B6B));font-weight:500}
.thf-mbar .thf-mbval{font-family:var(--f-display,"Satoshi","Inter",system-ui,sans-serif);font-size:19px;font-weight:500;
letter-spacing:-.03em;color:var(--ink,#0A0A0A);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the bar's button stays a pill beside the number, whatever the page's own .btn
says (the paint tool's is display:block, width:100% - on a phone it sat on top
of the total; owner, 2026-09-08: "the pricing is blocked by this black button") */
.thf-mbar .btn,.thf-mbar a.btn,.thf-mbar button.btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
width:auto;max-width:44%;margin:0;padding:10px 16px;font-size:13px;line-height:1;white-space:nowrap;border-radius:999px}
.thf-mbar .thf-mbl{overflow:hidden}
@media (max-width:1100px){
.thf-wb{grid-template-columns:1fr;gap:20px}
.thf-side{position:static}
.thf-mbar{display:flex}
}
@media (max-width:720px){
.thf-wb{padding:14px 12px 96px}
.thf-panel{padding:22px 16px;border-radius:16px}
.thf-ph h2{font-size:21px}
.thf-panel .card{padding:14px}
}
@media print{.thf-mbar{display:none !important}.thf-side{position:static}}
/* ---- one ticket look (owner, 2026-09-02): the tools' own rows read like the
estimator's, the dark block is the ONLY total, actions sit at the bottom ---- */
.thf-ticket .qrow,.thf-ticket .sumline,.thf-ticket .t-row,.thf-ticket .totLine,.thf-ticket .tot-line{
display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;
font-size:14px;color:var(--ink-2,var(--muted,#505050));font-family:var(--f-body,"Inter",system-ui,sans-serif);
border-bottom:1px dashed var(--line-soft,rgba(0,0,0,.07))}
.thf-ticket .qrow>span:last-child,.thf-ticket .sumline .val,.thf-ticket .t-row>span:last-child,.thf-ticket .t-row .v,
.thf-ticket .totLine .amt,.thf-ticket .tot-line .amt{color:var(--ink,#0A0A0A);font-variant-numeric:tabular-nums;font-family:inherit;font-weight:500;font-size:13.5px}
.thf-ticket .qrow.sub,.thf-ticket .sumline.sub{font-size:12.5px;color:var(--ink-3,var(--muted,#6B6B6B))}
.thf-ticket .sumline.sub{border-top:0;margin-top:0;padding-top:6px}
/* the dark block carries the total and the range - the tool's own grand row is redundant beside it */
.thf-ticket:has(.thf:not([hidden])) :is(.qrow.total,.sumline.total,.grand,.rangeBig,#hoSummary .rangeNote,.margin-badge){display:none !important}
.thf-ticket .chip{font-size:11.5px;padding:4px 9px;border-radius:999px;background:var(--accent-soft,#EEF6F3);color:var(--accent,#487468);font-weight:600}
/* the action row, same set and look everywhere */
.thf-acts .btn,.thf-acts button,.thf-acts a{font-family:var(--f-body,"Inter",system-ui,sans-serif);font-size:13.5px;font-weight:600;
padding:11px 16px;min-height:42px;border-radius:999px;border:1px solid var(--line,rgba(0,0,0,.09));background:var(--paper,#F7F7F7);
color:var(--ink-2,#505050);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto}
.thf-acts .btn.primary,.thf-acts .primary,.thf-acts .cta{background-color:#030C0D;background-image:var(--ink-grad,linear-gradient(rgba(0,0,0,.6) -15%,#030C0D 100%));color:#fff;border-color:transparent;flex-basis:100%}
.thf-acts .btn.ghost,.thf-acts .ghost{background:transparent}
/* mode-only spans in the shared action rows: every tool sets body.ho in Homeowner mode */
body.ho .thf-acts .pro-only,body.ho .thf-mbar .pro-only{display:none !important}
body:not(.ho) .thf-acts .ho-only,body:not(.ho) .thf-mbar .ho-only{display:none !important}
/* ---- the homeowner ticket, one shape for every estimator (owner, 2026-09-07:
"make them all look the same, professional, clean, reliable") ----
head (eyebrow · Your price range · tool) → the tool's own summary →
the shared total / schedule / finance (js/10hub-finance.js) → the request
form's buttons (Request a site walk, Save to My quotes) → Copy summary |
Email me the PDF → Reset → the fine print. */
.thf-lead{padding:6px 22px 0}
.thf-lead .thl{margin:0}
.thf-lead .thl-open{padding:14px 18px;font-size:15px}
.thf-lead .thl-note{margin:8px 0 0}
.thf-acts-std{display:grid;gap:8px;padding:12px 22px 16px;border-top:0}
.thf-acts-std .thf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.thf-acts-std .btn,.thf-acts-std button{width:100%;justify-content:center;margin:0}
.thf-acts-std .btn.ghost,.thf-acts-std .ghost{background:transparent}
.thf-tfine{margin:0;padding:0 22px 20px;font-size:12px;line-height:1.5;color:var(--ink-3,var(--muted,#6B6B6B))}
body:not(.ho) .thf-tfine.ho-only{display:none}
/* ---- the tool header's view pills, one look for every estimator (owner,
2026-09-07: the paint header's "30-second ballpark | Full estimator" on
every tool). The quick-start module (js/10hub-quickstart.js) drives them:
30-second ballpark shows the three-question card, Full estimator hides it
and goes to the details. */
.thf-views{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--card,#fff);border:1px solid var(--line,rgba(0,0,0,.09));
box-shadow:0 1px 2px rgba(18,32,26,.04);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.thf-views::-webkit-scrollbar{display:none}
.thf-views .pn-item{font-family:var(--f-body,"Inter",system-ui,sans-serif);font-size:13px;font-weight:500;color:var(--ink-3,var(--muted,#6B6B6B));
text-decoration:none;padding:8px 14px;border-radius:999px;border:0;background:transparent;cursor:pointer;white-space:nowrap;line-height:1;
transition:color .2s,background .2s;touch-action:manipulation}
.thf-views .pn-item:hover:not(.active){color:var(--ink,#0A0A0A)}
.thf-views .pn-item.active{background-color:#030C0D;background-image:var(--ink-grad,linear-gradient(rgba(0,0,0,.6) -15%,#030C0D 100%));color:#fff;font-weight:600}
html[data-audience="homeowner"] .thf-views .aud-pro{display:none}
/* ---- dark (owner, 2026-09-07): the share image's deep green. The tokens
every tool and page reads, swapped on html[data-theme="dark"]; the surfaces
that do not read tokens are handled in css/10hub-atmos.css. The choice is
the strip's sun / moon button, kept in this browser as '10hub-theme'. */
html[data-theme="dark"]{color-scheme:dark;
--paper:#0f1412; --card:#16201b; --card-2:#1a2620; --surface:#16201b; --surface-2:#1a2620;
--ink:#f2f5f3; --ink-2:#c9d1cc; --ink-3:#9aa59f; --ink-4:#8d9791; --muted:#9aa59f;
--line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08); --line-3:rgba(255,255,255,.2); --line-soft:rgba(255,255,255,.08);
--mint:#8FBFB0; --mint-bg:#1b2f26; --mint-line:rgba(158,216,196,.35); --mint-deep:#9ED8C4;
--accent:#9ED8C4; --accent-ink:#0f1412; --accent-soft:#1b2f26; --glass-fill:#1b2f26;
--good:#9ED8C4; --warn:#e2b978; --warn-bg:#2f2a1e;
--danger:#f0a3a3; --danger-bg:#3a1f1f; --danger-line:#6b3535; --rose:#3a2a2a; --cream:#2b2822;
--ink-grad:linear-gradient(rgba(255,255,255,.35) -15%,#B9E3D3 100%);
--lift-light:0 1px 2px rgba(0,0,0,.3),0 14px 34px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);
--lift-dark:0 1px 2px rgba(0,0,0,.4),0 14px 34px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
--shadow:var(--lift-light);
background:#0f1412}
html[data-theme="dark"] body{color:var(--ink)}
/* the primary buttons turn mint with dark ink; the view pills too */
html[data-theme="dark"] .thf-acts .btn.primary,html[data-theme="dark"] .thf-acts .primary,html[data-theme="dark"] .thf-acts .cta,
html[data-theme="dark"] .thf-views .pn-item.active{color:#0f1412}
html[data-theme="dark"] .thf-acts .btn,html[data-theme="dark"] .thf-acts .cta{border-color:rgba(255,255,255,.14)}