/* look14-chrome.css — v469 E · the chrome: the card's navigation bar, the tab bar's active glyph, toasts, loading. Joe, Fri 23 Oct 2026, 9:07pm: "Make 5 more upgrades please" (after v468; the brief is still "make it look like a billion dollar crm … think of yourself as a world class software engineer"). WHY. Around every screen sat the same cheap chrome: the open card's bar on Business ("← All cards · Calendar · Put away") drawn as three gray lumps with the title pushed to the left; the open card ringed in orange; the tab you are on sitting in an orange pill while its icon weighed the same as the others; a toast that was a dark slab with an orange dash at the bottom of the screen; loading bars in a shape no list of ours has. The best iPhone apps do these the same way every time: a navigation bar (a chevron and the place you came from on the left in the tint, the title centered, one text action on the right, a hairline under), no ring on the thing you opened, a FILLED glyph for the tab you are on and nothing else, a banner that drops in from the top with the app's icon, and placeholder rows shaped like the rows that are coming. WHAT (paint only — every button is the element the app already draws; nothing is re-parented): 1 · #lxbar (board.js): a navigation bar — "‹ All cards" 17 px in the tint (the ← in the words is hidden; look14-chrome.js copies the words without it into data-l14-t, and a drawn chevron goes before them), the title centered 17 px semibold, "Put away" / "Add to my page" as 17 px text on the right, a hairline under; the open card after it has a soft edge instead of look12's orange ring (section.bc.pin). 2 · the tab bar (nav.tabs, look12-nav.css): the tab you are on keeps look12's filled shapes but loses the orange pill behind the icon (iOS fills the glyph and leaves it at that); the labels are 10 px medium like the iPhone's. NOT touched: any box, padding, margin or line box — tabs.js measures the bar's height and place (v446–v455) and menubar.js slims it; the label keeps look2's .792rem line box, so a 10 px word sits in exactly the box an 11 px one did. 3 · #toast (dashboard.php; app.js toast(), board.js msToast/calShareCopy): an iOS banner at the top — the app's icon tile, "Jetsy · now" 13 px quiet (look14-chrome.js writes the words, EN/ES), the message 15 px semibold; slides down and back (the way out is look14-chrome.js's .l14-out, 240 ms while [hidden] is already set); reduced motion: no slide. 4 · loading (skel.js's .jskel-wrap): rows shaped like look13's lists (a 40 px coin, a 17 px line and a 13 px line, a value on the right, hairlines between), the whole-screen shape's strip as four tiles, a gentler sheen (transform only; reduced motion: none); after 3 s on the whole-screen shape a quiet "Still loading…" strip (look14-chrome.js, .l14-slow). 5 · headings: left at look12's sizes on purpose — bench/t_v463_one.py holds `.h:not(.cl-h) > h2` at 22 px and a card title at 17 px. LIGHT MODE (html.je-light): easy2.js flips the literal colors of every rule that does not name je-light, so every color here is a variable: dark values under html:not(.nolook14), light values again under html.je-light:not(.nolook14) (never flipped; it wins). OFF: localStorage nolook14 = 1 → html.nolook14 before first paint; every rule here is under html:not(.nolook14), so v468 comes back exactly. ES5 everywhere; no @import, no outside URL (the icon tile's image is the app's own brand/email file). */ /* ------------------------------------------------------------------------------------------------ the roles ---- */ html:not(.nolook14){ --l14-tint:#FF8A3D; /* the tint: the brand's orange lifted for dark glass (7:1 on the page) */ --l14-t1:#F5F7FB; --l14-t2:#A7B3C6; --l14-t3:#8794A8; --l14-hair:rgba(255,255,255,.09); /* the hairline under the navigation bar, between placeholder rows */ --l14-edge:rgba(255,255,255,.07); /* the open card's soft edge */ --l14-card-sh:0 12px 30px rgba(0,0,0,.35); --l14-toast:rgba(24,32,48,.94); --l14-toast-sh:0 14px 36px -8px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08); --l14-tile:#0B1019; /* the app icon's own dark tile */ --l14-skel:rgba(255,255,255,.07); --l14-sheen:rgba(255,255,255,.09); --l14-knock:#0A0F18; /* a filled tab glyph's cut-outs, in the bar's own color now that the pill is gone */ --j12n-knock:var(--l14-knock); } @supports (color:color-mix(in srgb,red 50%,blue)){ html:not(.nolook14){--l14-tint:color-mix(in srgb,var(--or,#FF6A1A) 82%,#fff)} /* a company's own color tints the chrome, as it tints the tab */ } /* ======================================================== 1 · the card's navigation bar (#lxbar, Business) ==== */ html:not(.nolook14) body #main #lxbar.lx-bar{ display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,auto) minmax(0,1fr);align-items:center;column-gap:6px;row-gap:0; min-height:44px;margin:0 0 10px!important;padding:0 0 2px!important; box-shadow:0 1px 0 var(--l14-hair); /* the hairline */ } /* the way back: the chevron and the place you came from, in the tint; the ← in the words is hidden (font-size 0 keeps the words for a screen reader and for the Spanish pass), the words are drawn from data-l14-t */ html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"], html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]{ justify-self:start;display:inline-flex!important;align-items:center;gap:3px;max-width:100%;min-width:0;min-height:44px; margin:0 0 0 -4px!important;padding:0 6px 0 4px!important;border-radius:14px!important; background:transparent!important;box-shadow:none!important;border:0!important; color:var(--l14-tint)!important;font-size:0!important;line-height:22px!important;letter-spacing:0!important;white-space:nowrap; -webkit-tap-highlight-color:transparent; } html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]::before, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]::before{ content:"";flex:0 0 auto;width:12px;height:20px;background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 20px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M10 2 2 10l8 8' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 20px no-repeat; } html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]::after, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]::after{ content:attr(data-l14-t);flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:400 17px/22px var(--j12-sf);letter-spacing:-.01em; } /* until look14-chrome.js has copied the words (a freshly drawn bar, ~60 ms; or no script at all): the button's own words, as they are */ html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]:not([data-l14-t]), html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]:not([data-l14-t]){font:400 17px/22px var(--j12-sf)!important;letter-spacing:-.01em!important} html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]:not([data-l14-t])::before, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]:not([data-l14-t])::before, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]:not([data-l14-t])::after, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]:not([data-l14-t])::after{content:none;display:none} html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxback"]:active, html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]:active, html:not(.nolook14) body #main #lxbar.lx-bar>.b.cmk-bar:active{opacity:.55;transform:none!important} /* the title: centered, one line, "…" when the phone is narrow (look12's 17 px semibold stays) */ html:not(.nolook14) body #main #lxbar.lx-bar>span{ grid-column:2;justify-self:center;max-width:100%;min-width:0;margin:0!important;padding:0!important; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--l14-t1)!important; font:600 17px/22px var(--j12-sf)!important;letter-spacing:-.01em!important; } /* "Showing all N on one page" (the one-page mode's bar): a sentence, 15 px, two lines at most */ html:not(.nolook14) body #main #lxbar.lx-bar>.b[data-bact="lxcards"]+span{ white-space:normal;font:500 15px/20px var(--j12-sf)!important;color:var(--l14-t2)!important; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; } /* the action on the right: text in the tint; "Add to my page" (.pri) is the bold one. A block, so its words end in "…" instead of spilling (a button's flex text cannot) */ html:not(.nolook14) body #main #lxbar.lx-bar>.b.cmk-bar{ grid-column:3;justify-self:end;display:block!important;max-width:100%;min-width:0;box-sizing:border-box;min-height:44px;margin:0 -4px 0 0!important;padding:11px 4px 11px 6px!important; border-radius:14px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important; color:var(--l14-tint)!important;font:400 17px/22px var(--j12-sf)!important;letter-spacing:-.01em!important;text-align:right; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-tap-highlight-color:transparent; } /* a narrow phone, long words (Spanish: "Todas las tarjetas · Seguimiento · Quitar de mi página"): look14-chrome.js marks the bar .l14-tight when the way back or the action would be cut — the way back is its chevron alone (its words stay for a screen reader), the action steps down to 15 px, the title takes the room between */ html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight{grid-template-columns:auto minmax(0,1fr) auto} html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight>.b[data-bact="lxback"]::after, html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight>.b[data-bact="lxcards"]::after{display:none} html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight>.b[data-bact="lxback"], html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight>.b[data-bact="lxcards"]{min-width:44px;justify-content:center;padding:0!important} html:not(.nolook14) body #main #lxbar.lx-bar.l14-tight>.b.cmk-bar{max-width:none;font-size:15px!important;line-height:20px!important;padding:12px 4px 12px 6px!important} /* its column is auto now: whole words */ html:not(.nolook14) body #main #lxbar.lx-bar>.b.cmk-bar.pri{font-weight:600!important} html:not(.nolook14) body #main #lxbar.lx-bar>.b:focus-visible{outline:2px solid var(--l14-tint)!important;outline-offset:-2px} /* the open card: no orange ring — a soft edge and the card's shadow */ html:not(.nolook14) body #main#main #lxbar~section.bc.pin:not(.tc-collapsed){box-shadow:inset 0 0 0 1px var(--l14-edge),var(--l14-card-sh)!important} /* ============================================================================ 2 · the tab bar (nav.tabs) ==== */ /* the tab you are on: the glyph filled (look12-nav's path rules) and NO pill — the box, padding and margin look12 gave the svg stay exactly as they are, only its background goes */ html:not(.nolook14) body nav.tabs #tabbar .tb[aria-selected="true"] svg{background:transparent!important} /* the labels: 10 px medium, the iPhone's own; the line box is look2's (.792rem) — the bar is not a pixel taller or shorter */ html:not(.nolook14) body nav.tabs #tabbar .tb>span:not(.badge):not(.jmb-b):not(.jmb-dot){ font-size:.625rem!important;font-weight:500!important;letter-spacing:0!important;line-height:.792rem!important; } html:not(.nolook14) body nav.tabs #tabbar .tb[aria-selected="true"]>span:not(.badge):not(.jmb-b):not(.jmb-dot){font-weight:600!important} /* Business's chart: filled bars read heavier than a 3.4 stroke — the three bars become solid columns */ html:not(.nolook14) body #tabbar .tb[aria-selected="true"] svg path[d^="M7 15V9"]{stroke-width:4.2} /* ============================================================================== 3 · the toast as a banner ==== */ @keyframes l14-toast-in{0%{transform:translateY(calc(-100% - 20px));opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes l14-toast-out{0%{transform:translateY(0);opacity:1}100%{transform:translateY(calc(-100% - 20px));opacity:0}} html:not(.nolook14) body #toast#toast.toast{ position:fixed;top:calc(env(safe-area-inset-top,0px) + 8px)!important;bottom:auto!important;left:8px!important;right:8px!important; z-index:9500;width:auto!important;max-width:430px!important;margin:0 auto!important;box-sizing:border-box; display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center; padding:10px 14px 10px 10px!important;border-radius:20px!important;border:0!important; background:var(--l14-toast)!important;-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%); box-shadow:var(--l14-toast-sh)!important;color:var(--l14-t1)!important; font:600 15px/20px var(--j12-sf)!important;letter-spacing:-.01em;text-align:left!important;text-shadow:none; pointer-events:none;transform:none; animation:l14-toast-in 360ms cubic-bezier(.2,.8,.2,1) both; } html:not(.nolook14) body #toast#toast.toast.l14-out[hidden]{display:grid!important;animation:l14-toast-out 240ms cubic-bezier(.4,0,.6,1) both} /* the app's icon tile: the Jetsy head (brand/email ships in every release) on its dark tile, 9 px corners like a home-screen icon */ html:not(.nolook14) body #toast#toast.toast::before{ content:""!important;grid-row:1/3;grid-column:1;width:38px!important;height:38px!important;border-radius:9px;flex:none; background:url(../brand/email/jetsy-icon-mark-colour-300w.png) center/72% no-repeat,var(--l14-tile)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3)!important; } /* "Jetsy · now" above the message (look14-chrome.js writes data-l14-app) */ html:not(.nolook14) body #toast#toast.toast::after{ content:attr(data-l14-app);grid-row:1;grid-column:2;display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:500 13px/16px var(--j12-sf);letter-spacing:0;color:var(--l14-t3); } html:not(.nolook14) body #toast#toast.toast:not([data-l14-app])::after{content:none} html:not(.nolook14) body #toast#toast.toast>*{grid-column:2;min-width:0} html:not(.nolook14) body #toast#toast.toast .jms-tw{display:block} /* the Ask Jetsy button no longer needs to step aside (the toast is at the top now) */ html:not(.nolook14):not(.j2-bar) body:has(> #toast:not([hidden])) #j2btn.j2-btn{opacity:1!important;visibility:visible!important} /* ================================================================== 4 · loading: rows shaped like the rows coming ==== */ @keyframes l14-sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}} html:not(.nolook14) body .jskel-wrap{padding:0} html:not(.nolook14) body .jskel-wrap .jskel{background:var(--l14-skel)!important;border-radius:8px} html:not(.nolook14) body .jskel-wrap .jskel::after{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--l14-sheen) 50%,rgba(255,255,255,0) 100%)!important; animation:l14-sheen 1.6s cubic-bezier(.4,0,.2,1) infinite} /* a row: the coin, two lines (17 px and 13 px), a value — look13's list row, with a hairline between rows */ html:not(.nolook14) body .jskel-wrap .jskel-row{gap:12px;padding:11px 0;box-shadow:0 1px 0 var(--l14-hair)} html:not(.nolook14) body .jskel-wrap .jskel-row:last-child{box-shadow:none} html:not(.nolook14) body .jskel-wrap .jskel-row .jskel.dot{width:40px;height:40px;border-radius:50%!important} html:not(.nolook14) body .jskel-wrap .jskel-row .jskel-l{gap:7px} html:not(.nolook14) body .jskel-wrap .jskel-row .jskel.a{height:13px;width:58%;border-radius:7px} /* .jskel.b is a bar, not a button: look12's .b (44 px, 14 px corners, a glass fill) reached it until now */ html:not(.nolook14) body #main .jskel-wrap .jskel-row .jskel.b{height:10px!important;min-height:0!important;width:36%;padding:0!important;border-radius:6px!important;box-shadow:none!important;font-size:0} html:not(.nolook14) body .jskel-wrap .jskel-row .jskel.n{height:13px;width:44px;border-radius:7px} /* the heading placeholder: a 22 px title's weight; the whole-screen strip: four tiles with 16 px corners */ html:not(.nolook14) body .jskel-wrap .jskel-hd{height:18px;width:40%;margin:4px 0 12px;border-radius:9px} html:not(.nolook14) body .jskel-wrap .jskel-strip{gap:8px;margin:0 0 14px} html:not(.nolook14) body .jskel-wrap .jskel-strip .jskel{height:64px;border-radius:16px!important} /* "Still loading…" under the whole-screen shape after 3 s (look14-chrome.js) */ html:not(.nolook14) body #main>.l14-slow{ display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:10px 12px;border-radius:14px; background:var(--l14-skel);color:var(--l14-t2);font:500 13px/18px var(--j12-sf); } html:not(.nolook14) body #main>.l14-slow::before{ content:"";flex:none;width:16px;height:16px;border-radius:50%;box-sizing:border-box; border:2px solid var(--l14-hair);border-top-color:var(--l14-tint);animation:l14-spin 900ms linear infinite; } @keyframes l14-spin{to{transform:rotate(360deg)}} /* =========================================================================================== light mode ==== */ html.je-light:not(.nolook14){ --l14-tint:#C2410C; --l14-t1:#0B1220; --l14-t2:#3D4859; --l14-t3:#5F6B7E; --l14-hair:rgba(10,20,40,.10); --l14-edge:rgba(10,20,40,.08); --l14-card-sh:0 10px 26px rgba(16,32,58,.10); --l14-toast:rgba(255,255,255,.94); --l14-toast-sh:0 14px 36px -8px rgba(16,32,58,.35),0 0 0 1px rgba(10,20,40,.08); --l14-tile:#0B1019; --l14-skel:rgba(16,32,58,.07); --l14-sheen:rgba(255,255,255,.75); --l14-knock:#F7F9FC; --j12n-knock:var(--l14-knock); } @supports (color:color-mix(in srgb,red 50%,blue)){ html.je-light:not(.nolook14){--l14-tint:color-mix(in srgb,var(--or,#FF6A1A) 74%,#000)} } html.je-light:not(.nolook14) body #main #lxbar.lx-bar>span{color:#0B1220!important} html.je-light:not(.nolook14) body #toast#toast.toast{color:#0B1220!important} html.je-light:not(.nolook14) body #toast#toast.toast::before{box-shadow:inset 0 0 0 1px rgba(10,20,40,.08),0 1px 2px rgba(16,32,58,.18)!important} /* ============================================================================ when the phone asks for less ==== */ @media (prefers-reduced-motion:reduce){ html:not(.nolook14) body #toast#toast.toast, html:not(.nolook14) body #toast#toast.toast.l14-out[hidden]{animation:none!important} html:not(.nolook14) body #toast#toast.toast.l14-out[hidden]{display:none!important} html:not(.nolook14) body .jskel-wrap .jskel::after{animation:none!important;opacity:0} html:not(.nolook14) body #main>.l14-slow::before{animation:none!important;border-top-color:var(--l14-hair)} } @media (prefers-reduced-transparency:reduce){ html:not(.nolook14) body #toast#toast.toast{-webkit-backdrop-filter:none;backdrop-filter:none;background:#161E2C!important} html.je-light:not(.nolook14) body #toast#toast.toast{background:#FFFFFF!important} } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ html:not(.nolook14) body #toast#toast.toast{background:#161E2C!important} html.je-light:not(.nolook14) body #toast#toast.toast{background:#FFFFFF!important} } /* v469 merge: the Follow up card's "Days before a quote joins the list" row — the words take the room, the picker stays small */ html:not(.nolook14) body #main .fu-root .fu-qd{flex-wrap:nowrap!important} html:not(.nolook14) body #main .fu-root .fu-qd>span{flex:1 1 auto!important;min-width:0;white-space:normal;line-height:1.3} html:not(.nolook14) body #main .fu-root .fu-qd>select{flex:0 0 auto!important;width:auto!important;max-width:6.5rem!important;min-width:4.2rem!important}