@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* Leon's own Century Gothic, shipped with the app so every machine renders the
brand identically instead of falling back to Poppins. Served under a distinct
family name so a differing copy installed locally can't be picked up instead.
Only ONE weight exists (Regular 400) — the @font-face is therefore declared at
400 alone, which lets the browser synthesize bold where the app asks for it.
Do NOT write `font-weight: 400 700` here: that would claim the file covers
bold, and every bold heading in the app would render as regular. If a real
Century Gothic Bold file ever turns up, add it as a second @font-face at 700
and the synthesis stops on its own.
The LEON wordmark stays vector art (logo/leon-wordmark.svg) — its E is three
bars with a metallic gradient, which is lettering, not type. */
@font-face {
font-family: 'Century Gothic Leon';
src: url('fonts/CenturyGothicLeon.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
:root {
--leon-black: #161311;
--leon-brown: #6b4a34;
--leon-brown-dark: #4a3325;
--leon-brown-light: #b08968;
--leon-cream: #f7f3ee;
--leon-white: #ffffff;
--leon-line: #e5ded4;
--leon-green: #3a7d44;
--leon-yellow: #c99a2e;
--leon-red: #b83b3b;
}
* { box-sizing: border-box; }
html, body {
background: var(--leon-cream);
color: var(--leon-black);
font-family: 'Century Gothic Leon', 'Century Gothic', 'Poppins', 'Avenir Next', 'Segoe UI', sans-serif;
margin: 0;
-webkit-font-smoothing: antialiased;
}
.font-brand {
font-family: 'Century Gothic Leon', 'Century Gothic', 'Poppins', 'Avenir Next', sans-serif;
letter-spacing: 0.14em;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--leon-line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--leon-brown-light); }
/* One toolbar on screen, and it is the specific one.
A hub that has its own subtabs renders under them; when it does,
the page-level fallback above the tabs stands down. Sitting above the tabs
it read as acting on the whole page, which was the wrong promise — expand,
print and PDF act on the subtab you are actually looking at. */
.hub-wrap:has(.hub-tools-child) > .hub-tools-parent { display: none; }
/* ...and the same reasoning one level further down. A hub whose subtab has
subtabs of ITS OWN rendered a toolbar under each bar, so you got two
identical sets of ⤢ ⤡ 🖨 📄 stacked a few hundred pixels apart with no way
to tell which acted on what. The innermost one wins, because that is the
screen you are actually looking at: any toolbar that is followed by another
one deeper in the page stands down.
Two forms because the nested toolbar may be a direct later sibling or sit
inside one — a tab bar is always followed by the content it switches. */
.hub-tools-child:has(~ .hub-tools-child),
.hub-tools-child:has(~ * .hub-tools-child) { display: none; }
/* A subtab bar reads as a sequence, like the project tabs above it — a light
chevron between the buttons, put there by a sibling selector so the 23 places
that render one of these bars need no markup change. The chevron sits inside
the following button's padding, so clicking it selects that tab, which is the
nearest sensible thing for a decoration to do. */
.subtab-btn + .subtab-btn::before {
content: '\203A';
margin-right: 0.5rem;
font-weight: 400;
opacity: 0.22;
}
/* A section locked by . It is being READ, so it should look like a
document and not like a form full of disabled boxes: the frames come off, the
values sit as plain type under their labels, and the eye follows the content
instead of the containers. Pressing Edit puts the boxes back, which is also
the clearest possible signal that the section is now live.
Pointer events are killed on the controls only — not the whole block — so the
text can still be selected and copied while locked. */
.leon-locked input,
.leon-locked select,
.leon-locked textarea,
.leon-locked button,
.leon-locked [contenteditable="true"] { pointer-events: none; }
.leon-locked input,
.leon-locked select,
.leon-locked textarea {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
-webkit-appearance: none;
appearance: none;
font-weight: 500;
}
/* An empty locked field would otherwise be an invisible gap — a dash says
"nothing here" rather than leaving the reader to wonder. */
.leon-locked input:placeholder-shown::placeholder { color: transparent; }
.leon-locked .lp-empty::after { content: '—'; color: var(--leon-line); }
/* Tighter, because a read-only block does not need room to click in. */
.leon-locked .grid { row-gap: 0.6rem; }
/* Print rules */
@media print {
.no-print { display: none !important; }
/* ------------------------------------------------------------------
Scoped print. The region being printed is CLONED into #leon-print-holder
(printRegion, components.jsx) with its form controls turned into plain
values, so what follows only has to make that clone READ like a document.
Everything else is display:none — safe, because the printed thing is a
separate subtree rather than a descendant of what is hidden. That keeps
normal document flow, which is what lets the letterhead repeat and the
pages break properly.
The letterhead is the of a table wrapping the whole document.
`position: fixed` repeats an element but does NOT reserve space for it, so
the content ran underneath it; `display: table-header-group` does both. */
body.print-scope > *:not(#leon-print-holder) { display: none !important; }
body.print-scope { background: #fff !important; }
@page { margin: 12mm; }
#leon-print-holder {
font-family: 'Century Gothic Leon', 'Century Gothic', Poppins, Arial, sans-serif;
color: #161311;
font-size: 9pt;
line-height: 1.4;
}
/* table-layout:fixed pins the page to the sheet. Without it a single
nowrap row inside the content stretched the wrapping table and everything
— letterhead included — ran off the right edge. */
#leon-print-holder table.lp-page { width: 100%; table-layout: fixed; border-collapse: collapse; }
#leon-print-holder table.lp-page > thead { display: table-header-group; }
#leon-print-holder table.lp-page > tfoot { display: table-footer-group; }
#leon-print-holder table.lp-page > thead > tr > td,
#leon-print-holder table.lp-page > tfoot > tr > td,
#leon-print-holder table.lp-page > tbody > tr > td { padding: 0; border: 0; }
#leon-print-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 10mm; padding: 0 0 2.5mm; margin-bottom: 4mm;
border-bottom: 1.2pt solid #161311;
}
#leon-print-header .lp-brand img { display: block; height: 8mm; width: auto; }
#leon-print-header .lp-brand-sub {
font-size: 5pt; letter-spacing: 0.3em; color: #6b4a34; margin-top: 1.2mm; padding-left: 0.3em;
}
#leon-print-header .lp-meta { text-align: right; }
#leon-print-header .lp-heading { font-size: 11pt; font-weight: bold; line-height: 1.2; }
#leon-print-header .lp-line { font-size: 7.5pt; color: #58504a; }
#leon-print-header .lp-date { color: #8a827b; margin-top: 0.8mm; }
#leon-print-footer {
border-top: 0.5pt solid #d8d0c6; margin-top: 4mm; padding-top: 1.5mm;
font-size: 6.5pt; color: #8a827b; text-align: center;
}
/* SCALE. The screen sets pixel widths, min-widths and horizontal scrollers
that have no meaning on paper — a table declared min-width:900px simply
ran off the sheet. Every one of those is released, including inline
styles, which !important overrides. */
#leon-print-holder .lp-body,
#leon-print-holder .lp-body * {
box-shadow: none !important;
max-height: none !important;
overflow: visible !important;
min-width: 0 !important;
max-width: 100% !important;
float: none !important;
position: static !important;
transform: none !important;
/* Screen rows are built not to wrap and not to shrink. Paper has a hard
width, so both have to give — otherwise the row is simply cut off. */
white-space: normal !important;
flex-shrink: 1 !important;
overflow-wrap: anywhere;
}
#leon-print-holder .lp-body table { width: 100% !important; table-layout: auto; }
/* Anything the screen sized in a fixed column (a picker, a date box) is now
just text, so it takes the width its content needs. */
#leon-print-holder .lp-body .leon-print-value { width: auto !important; font-weight: 600; }
/* Flatten the app's card chrome — nothing keeps a fill, a shadow or a
rounded corner, because none of that reads as a document on paper. */
#leon-print-holder .lp-body div[class*="rounded"],
#leon-print-holder .lp-body div[class*="bg-"] {
border-radius: 0 !important;
background: transparent !important;
}
#leon-print-holder .lp-body div[class*="rounded-xl"],
#leon-print-holder .lp-body div[class*="rounded-lg"] {
border: 0 !important;
padding: 0 !important;
margin: 0 0 2mm 0 !important;
}
/* A collapsible's header, kept as the section's name. */
#leon-print-holder .lp-section-title {
font-size: 10pt; font-weight: bold;
border-bottom: 0.8pt solid #161311; padding: 0 0 1.2mm; margin: 5mm 0 2mm;
page-break-after: avoid; break-after: avoid;
}
#leon-print-holder .lp-body > * > .lp-section-title:first-child { margin-top: 0; }
/* Tables are the backbone of most of these screens, so they get real
document treatment: hairline rules, a header band, and a header row that
repeats when a table runs over a page. */
#leon-print-holder .lp-body table { border-collapse: collapse; font-size: 8pt; margin-bottom: 3mm; }
#leon-print-holder .lp-body thead { display: table-header-group; }
#leon-print-holder .lp-body tr { page-break-inside: avoid; break-inside: avoid; }
#leon-print-holder .lp-body th {
text-align: left; font-size: 6.5pt; letter-spacing: 0.05em; text-transform: uppercase;
color: #58504a; border-bottom: 0.9pt solid #161311; padding: 1.4mm 1.6mm 1mm;
background: transparent !important;
}
#leon-print-holder .lp-body td { padding: 1.2mm 1.6mm; border-bottom: 0.4pt solid #e5ded4; vertical-align: top; }
/* Badges read as small-caps labels rather than filled pills. */
#leon-print-holder .lp-body span[class*="rounded-full"] {
background: transparent !important; color: #161311 !important;
border: 0.5pt solid #b3a99e; border-radius: 0 !important;
padding: 0.2mm 1mm !important; font-size: 6pt;
}
#leon-print-holder .lp-body h1 { font-size: 13pt; }
#leon-print-holder .lp-body h2 { font-size: 11pt; }
#leon-print-holder .lp-body h3 { font-size: 9.5pt; }
#leon-print-holder .lp-body h1,
#leon-print-holder .lp-body h2,
#leon-print-holder .lp-body h3 { page-break-after: avoid; break-after: avoid; }
#leon-print-holder .lp-body img { max-width: 100% !important; height: auto !important; }
a[href]:after { content: none !important; }
/* Browsers omit background colors/shading by default when printing to
save ink — without this, table row backgrounds and shaded header bands
(e.g. the AIA print package's category-subtotal and Change Order rows)
silently vanish on the printed/PDF page even though they render fine
on screen, taking the borders' visual contrast down with them. */
.print-area, .print-area * {
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
color-adjust: exact !important;
}
}
.print-only { display: none; }
/* The AIA Application for Payment print package (§ AIA print template
request) must print landscape, per the client's own reference document —
both its pages are wider than tall. Scoped to this one document only, via
a named page bound to .aia-print-package, so every other printable
document in the app (Submittals, Quotes, Selection Sheets, etc., all of
which use the shared .print-area class) is unaffected and stays portrait. */
@page aia-landscape {
size: landscape;
}
.aia-print-package {
page: aia-landscape;
}
/* AIA G702/G703 print package — repeated table headers across pages happen
natively via in a real ; these two classes handle the two
things browsers don't do automatically: never split one billing row
across a page break, and always start the continuation sheet on its own
page. */
.aia-no-row-break { break-inside: avoid; page-break-inside: avoid; }
.aia-page-break { break-before: page; page-break-before: always; }
/* Collapsible section chevron */
.chev {
transition: transform 0.15s ease;
}
.chev.open {
transform: rotate(90deg);
}
/* Subtle card hover lift */
.hub-card {
transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hub-card:hover {
box-shadow: 0 6px 24px rgba(22,19,17,0.08);
transform: translateY(-1px);
}
input, select, textarea {
font-family: inherit;
}
input:focus, select:focus, textarea:focus, button:focus {
outline: none;
}
/* Quote-draft cells. An input with a transparent border and no value is
invisible, so an unfilled row read as four gaps followed by numbers — the
single biggest reason the draft table looked like it did not line up. A
resting underline says "there is a field here"; it firms up on hover and
becomes a real box on focus. */
.q-cell {
border: 1px solid transparent;
border-bottom-color: var(--leon-line);
border-radius: 3px;
background: transparent;
padding: 2px 4px;
}
.q-cell::placeholder { color: rgba(0,0,0,.22); font-style: italic; }
.q-cell:hover:not(:disabled) { border-color: var(--leon-line); background: #fff; }
.q-cell:focus { outline: none; border-color: var(--leon-brown); background: #fff; }
.q-cell:disabled { border-bottom-color: transparent; }
/* Zebra striping does more for an 18-column table than any amount of spacing.
It is driven by the row's own index, not :nth-child — an expanded line
inserts a second , which makes positional striping go out of step — and
by a direct-child selector, or the working panel's own nested table inherits
the stripes. */
.q-rows > tbody > tr.q-alt { background: rgba(0,0,0,.018); }
.q-rows > tbody > tr:hover:not(.q-detail) { background: rgba(140,106,68,.06); }
/* ── A slide deck printed as SLIDES ──────────────────────────────────────────
The app's normal print path flattens a region into document markup — right
for a table or a form, and wrong for a deck, whose whole meaning is where
things sit on the page. So a deck gets its own path: the slides are rendered
as they are, one to a landscape sheet, and the browser's own "Save as PDF"
writes the file. The pictures come through because these are the real
rendered slides rather than a re-drawing of them. */
@media print {
body.qd-print-scope > *:not(#qd-print-holder) { display: none !important; }
#qd-print-holder { display: block !important; position: static !important;
left: auto !important; top: auto !important; width: 100% !important; }
#qd-print-holder .qd-sheet {
width: 100%; break-after: page; page-break-after: always; break-inside: avoid;
page-break-inside: avoid; margin: 0; padding: 0; box-shadow: none;
}
#qd-print-holder .qd-sheet:last-child { break-after: auto; page-break-after: auto; }
@page { size: 297mm 167mm; margin: 0; } /* 16:9 at A4 width, no margin */
}
#qd-print-holder { position: absolute; left: -99999px; top: 0; width: 1120px; }