/* InvoiceTools UI components, v1. One place for tokens, buttons, tags, cards, menus and icons. Loaded last in on every page (tools/inject_ui_layer.py). New markup uses the .ui-* classes; the bridge section at the end gives the most repeated legacy buttons the same look without rewriting 265 pages. Motion is transform/opacity only, and off for reduced motion. */ :root{ --ui-ink:#14120F; --ui-ink-2:#2A2621; --ui-muted:#655E56; --ui-faint:#8A8378; --ui-paper:#FBF8F2; --ui-paper-2:#F6F3EC; --ui-surface:#FFFFFF; --ui-line:#E7E2D8; --ui-line-2:#DED8CC; --ui-line-3:#C9C1B3; --ui-cta:#C04E06; --ui-cta-hover:#A94405; --ui-cta-press:#943B04; --ui-accent:#F26207; --ui-cta-tint:#FFF3EA; --ui-focus:0 0 0 2px var(--ui-paper),0 0 0 4px #F26207; --ui-line-control:#B9B1A3; --ui-r-sm:8px; --ui-r-md:10px; --ui-r-lg:14px; --ui-r-pill:999px; --ui-h-sm:32px; --ui-h-md:40px; --ui-h-lg:48px; --ui-shadow-1:0 1px 2px rgba(20,18,15,.08); --ui-shadow-2:0 1px 2px rgba(20,18,15,.05),0 4px 12px rgba(20,18,15,.06); --ui-shadow-3:0 2px 4px rgba(20,18,15,.06),0 12px 28px rgba(20,18,15,.10); --ui-shadow-cta:0 1px 0 rgba(255,255,255,.16) inset,0 1px 2px rgba(20,18,15,.10),0 6px 14px -8px rgba(192,78,6,.55); --ui-ease:cubic-bezier(.2,.7,.3,1); --ui-fast:.12s; --ui-med:.18s; --ui-slow:.24s; --ui-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } /* ---------- brand lockup: one rendering everywhere ---------- */ .brand .lk-word,.brand .lk-word b,.brand .lk-word i, footer .f-logo .lk-word,footer .f-logo .lk-word b,footer .f-logo .lk-word i{ font-style:normal!important;font-weight:800!important;letter-spacing:-.035em!important} /* ---------- icon ---------- */ .ui-ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em} /* ---------- button ---------- */ .ui-btn{--h:var(--ui-h-md);display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--h);padding:0 18px;border-radius:var(--ui-r-md);border:1px solid transparent; font:600 14px/1.1 var(--ui-font);letter-spacing:-.005em;text-decoration:none!important;white-space:nowrap; cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent; transition:background-color var(--ui-fast) ease,border-color var(--ui-fast) ease,color var(--ui-fast) ease, box-shadow var(--ui-med) ease,transform var(--ui-fast) var(--ui-ease)} .ui-btn:focus-visible{outline:none;box-shadow:var(--ui-focus)} .ui-btn:active{transform:scale(.98)} .ui-btn[disabled],.ui-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none} .ui-btn .ui-ic{transition:transform var(--ui-med) var(--ui-ease)} .ui-btn--sm{--h:var(--ui-h-sm);padding:0 12px;font-size:13px;border-radius:var(--ui-r-sm);gap:6px} .ui-btn--lg{--h:var(--ui-h-lg);padding:0 22px;font-size:16px} .ui-btn--block{display:flex;width:100%} @media (pointer:coarse){.ui-btn{--h:44px}.ui-btn--sm{--h:40px}.ui-btn--lg{--h:48px}} .ui-btn--primary{background:var(--ui-cta);color:#fff!important;box-shadow:var(--ui-shadow-cta)} .ui-btn--primary:hover{background:var(--ui-cta-hover)} .ui-btn--primary:active{background:var(--ui-cta-press)} .ui-btn--dark{background:var(--ui-ink);color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -8px rgba(20,18,15,.6)} .ui-btn--dark:hover{background:var(--ui-ink-2)} .ui-btn--secondary{background:var(--ui-surface);color:var(--ui-ink)!important;border-color:var(--ui-line-control);box-shadow:var(--ui-shadow-1)} .ui-btn--secondary:hover{border-color:#8C8474;background:var(--ui-paper-2)} .ui-btn--ghost{background:transparent;color:var(--ui-ink)!important} .ui-btn--ghost:hover{background:var(--ui-paper-2)} /* arrows nudge forward, downloads nudge down */ .ui-btn:hover .ui-ic--fwd{transform:translateX(3px)} .ui-btn:hover .ui-ic--down{transform:translateY(2px)} /* ---------- tag ---------- */ .ui-tag{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:var(--ui-r-pill); font:700 10.5px/1 var(--ui-font);letter-spacing:.06em;text-transform:uppercase;background:#F1EDE5;color:#4A443C} .ui-tag--accent{background:#FDEBDD;color:#9A3F05} /* ---------- card ---------- */ .ui-card{background:var(--ui-surface);border:1px solid var(--ui-line);border-radius:var(--ui-r-lg);box-shadow:var(--ui-shadow-2); transition:transform var(--ui-med) var(--ui-ease),box-shadow var(--ui-med) ease,border-color var(--ui-med) ease} .ui-card--lift:hover{transform:translateY(-3px);border-color:#D6CFC2;box-shadow:var(--ui-shadow-3)} /* ---------- menu (select replacement) ---------- */ .ui-menu{position:relative;display:inline-block} .ui-menu__btn{display:inline-flex;align-items:center;gap:8px;min-height:var(--ui-h-md);padding:0 14px 0 16px; border-radius:var(--ui-r-pill);border:1px solid var(--ui-line-2);background:var(--ui-surface);color:var(--ui-ink); font:600 14px/1 var(--ui-font);cursor:pointer;box-shadow:var(--ui-shadow-1); transition:border-color var(--ui-fast) ease,box-shadow var(--ui-fast) ease} .ui-menu__btn:hover{border-color:#B9B1A3} .ui-menu__btn:focus-visible{outline:none;box-shadow:var(--ui-focus)} .ui-menu__btn[aria-expanded="true"]{border-color:var(--ui-ink);box-shadow:0 0 0 3px rgba(20,18,15,.08)} .ui-menu__btn .ui-ic{transition:transform var(--ui-med) var(--ui-ease)} .ui-menu__btn[aria-expanded="true"] .ui-ic{transform:rotate(180deg)} .ui-menu__key{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7A7368} .ui-menu__val{font-weight:700;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ui-menu__list{position:absolute;z-index:60;top:calc(100% + 8px);left:0;min-width:230px;max-height:min(60vh,420px);overflow:auto; padding:6px;border-radius:14px;background:var(--ui-surface);border:1px solid #E4DED3; box-shadow:0 24px 48px -20px rgba(20,18,15,.35),0 2px 6px rgba(20,18,15,.06); opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);transform-origin:top left; transition:opacity .16s ease,transform .18s var(--ui-ease),visibility 0s linear .18s} .ui-menu.is-open .ui-menu__list{opacity:1;visibility:visible;transform:none;transition-delay:0s} .ui-menu--end .ui-menu__list{left:auto;right:0;transform-origin:top right} .ui-menu__list > *{display:flex!important;align-items:center;justify-content:space-between;gap:10px;width:100%; min-height:40px!important;margin:0!important;padding:8px 12px!important;border:0!important;border-radius:9px!important; background:transparent!important;color:var(--ui-ink)!important;box-shadow:none!important;text-align:left; font:600 14px/1.3 var(--ui-font)!important;transform:none!important;cursor:pointer} .ui-menu__list > *:hover,.ui-menu__list > *:focus-visible{background:#F4F1EA!important;outline:none} .ui-menu__list > [aria-pressed="true"],.ui-menu__list > [aria-selected="true"]{background:#F4F1EA!important;font-weight:750!important} .ui-menu__list > [aria-pressed="true"]::after,.ui-menu__list > [aria-selected="true"]::after{content:"";width:16px;height:16px;flex:none;background:var(--ui-cta); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat} @media (prefers-reduced-motion:reduce){ .ui-btn,.ui-btn .ui-ic,.ui-card,.ui-menu__btn,.ui-menu__btn .ui-ic,.ui-menu__list{transition:none!important} .ui-card--lift:hover,.ui-btn:active{transform:none} } /* ---------- bridge: legacy buttons that repeat across many pages ---------- */ /* header Sign Up: the hover turned the text dark on dark orange (3.1:1) */ header .au-slot a.au-btn.au-primary,header .au-slot a.au-btn.au-primary:hover{color:#fff!important} header .au-slot .au-btn{border-radius:var(--ui-r-md);font-weight:600; transition:background-color var(--ui-med) var(--ui-ease),border-color var(--ui-med) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} header .au-slot .au-btn:active{transform:scale(.98)} header .au-slot .au-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #0B1419,0 0 0 4px #F26207} /* "Two ways to send the document" band, 245 pages */ .tb .tb-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-h-lg);line-height:1.1; padding:0 22px;border-radius:var(--ui-r-md);font:600 15px/1.1 var(--ui-font);letter-spacing:-.005em; box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 6px 14px -8px rgba(20,18,15,.55); transition:background-color var(--ui-med) var(--ui-ease),border-color var(--ui-med) var(--ui-ease),box-shadow var(--ui-med) ease,transform var(--ui-fast) var(--ui-ease)} .tb .tb-go:hover{background:#2A2621;border-color:#2A2621} .tb .tb-go.ghost{border-color:var(--ui-line-control);box-shadow:var(--ui-shadow-1)} .tb .tb-go.ghost:hover{background:var(--ui-paper-2);border-color:#8C8474;color:var(--ui-ink)} .tb .tb-go:active{transform:scale(.98)} .tb .tb-go:focus-visible{outline:none;box-shadow:var(--ui-focus)} @media (max-width:620px){.tb .tb-go{display:flex}} /* industry page call to action, 46 pages */ .tr-live .tr-cta{border-radius:var(--ui-r-md)!important;font-weight:600!important; transition:background-color var(--ui-med) var(--ui-ease),box-shadow var(--ui-slow) ease,transform var(--ui-fast) var(--ui-ease)!important} .tr-live .tr-cta svg{transition:transform var(--ui-med) var(--ui-ease)} .tr-live .tr-cta:hover svg{transform:translateX(3px)} .tr-live .tr-cta:active{transform:scale(.98)!important} .tr-live .tr-cta:focus-visible{outline:none;box-shadow:0 0 0 2px #0B1419,0 0 0 4px #F26207} /* template showcase on industry pages */ .ts-all{transition:border-color var(--ui-med) var(--ui-ease),background-color var(--ui-med) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} .ts-all:active{transform:scale(.98)} @media (prefers-reduced-motion:reduce){ .tb .tb-go,.tr-live .tr-cta,.tr-live .tr-cta svg,header .au-slot .au-btn,.ts-all{transition:none!important} .tb .tb-go:active,.tr-live .tr-cta:active,header .au-slot .au-btn:active,.ts-all:active{transform:none!important} } /* home hero: the free tool is the action, so it carries the brand colour rather than the header's Sign Up (competitor research, v68) */ .v4-cta .go{background:var(--ui-cta)!important;border-color:var(--ui-cta)!important;color:#fff!important; border-radius:var(--ui-r-md);box-shadow:var(--ui-shadow-cta); transition:background-color var(--ui-med) var(--ui-ease),box-shadow var(--ui-med) ease,transform var(--ui-fast) var(--ui-ease)} .v4-cta .go:hover{background:var(--ui-cta-hover)!important} .v4-cta .go:active{transform:scale(.98)} .v4-cta .alt{border-radius:var(--ui-r-md);transition:border-color var(--ui-med) var(--ui-ease),background-color var(--ui-med) var(--ui-ease),transform var(--ui-fast) var(--ui-ease)} .v4-cta .alt:active{transform:scale(.98)} @media (max-width:640px){ .v4-cta{flex-direction:column;align-items:stretch} .v4-cta .go,.v4-cta .alt{display:flex;align-items:center;justify-content:center;width:100%} } @media (prefers-reduced-motion:reduce){.v4-cta .go,.v4-cta .alt{transition:none!important}.v4-cta .go:active,.v4-cta .alt:active{transform:none}} /* Export tiles: the icon sits beside its label, not on a line above it. The tiles were drawn as a column (icon, then text), which made every button two lines tall and read as a card rather than a button. Every page that has an export panel loads this file after its own styles, and some of those pages force Send and track to display:block, so the row is stated with !important. */ .fin-tile,.fin-card #btnSendTracked,.fin-card .fin-send{ display:flex!important;flex-direction:row!important;align-items:center!important; justify-content:center!important;gap:8px!important;text-align:center} .fin-grid .fin-tile{min-height:52px!important} .fin-tile>.fin-ic,.fin-tile>svg,.fin-tile>.its-dot,.fin-card #btnSendTracked>.its-dot{ flex:0 0 auto;display:inline-flex!important;align-items:center;justify-content:center;margin:0!important} .fin-tile>.fin-ic svg{display:block} /* text for screen readers and search engines only */ .visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} /* Phones: the tips bulb and the assistant float at the bottom corners, so the page ends with room to scroll the last lines above them (links at the end of glossary pages sat under them, 23 Sep 2026). */ @media screen and (max-width:700px){body::after{content:"";display:block;height:92px}} /* Calculators: a unit label (ft, months, sq ft/gal) sits inside the field. Taps on it reach the field, the number keeps clear of it, and on phones a row of three such fields stacks: at 75px each the label was printed over the number and "1 coat" read "1 cc" (23 Sep 2026). */ .relative>span.absolute.right-3{pointer-events:none} .relative:has(>span.absolute.right-3)>input{padding-right:4.75rem} @media screen and (max-width:480px){.grid.grid-cols-3:has(.relative>span.absolute.right-3){grid-template-columns:1fr!important}}