/* ============================================================================= LAVL Portal Kit 2.0.1 Shared design kit for Limitless AVL internal web tools. Provenance. Almost nothing here is new. The values were lifted out of boxsales/src/style.css (build 3.12.1), which is production CSS hardened over many releases and 573 automated checks, and reconciled against the brand docs brand/Brand-UI-tokens.md and brand/Brand-Kit-One-Pager.md. Where the two disagreed the brand doc won. The README lists every disagreement. IMMUTABLE. This file is never edited once published. A change means a new version number and a new filename. Old versions are never deleted, so a tool that is not touched keeps rendering exactly as it did on the day it shipped. Loads no fonts and no external resources of any kind. The host page is responsible for loading Lemon Milk Pro or Montserrat if it wants them. The stacks below degrade to system fonts on their own. 2.0.0, 2026-09-02. Two changes that made this a major: a. Everything below the tokens is scoped under .lavl-kit. Put class="lavl-kit" on to get the primitives (buttons, fields, cards, tables, dialogs). Leave it off and the kit contributes only its tokens and the lavl- prefixed chrome, so it can be linked into a tool that has its own stylesheet without changing a pixel of it. b. The chrome section at the end: the shared header, strip, columns and footer every staff tool now carries. Order of sections: 1. Tokens 2. Base 3. Safari and iOS fixes 4. Primitives ============================================================================= */ /* ============================================================================= SECTION 1. TOKENS Three tiers, named broad to specific. Primitives are raw values and should almost never be referenced by a tool. Semantic tokens are the layer a tool reads. Scales are spacing, radius, type, shadow and control sizing. ============================================================================= */ :root{ /* --- 1a. Primitives. Raw values, no meaning attached. ------------------- */ --lavl-orange-500:#F8860C; /* brand doc, the signature orange */ --lavl-orange-050:#FDEAD9; /* brand doc, accent soft, tints and chips */ --lavl-red-600:#C21607; /* brand doc, the signature red */ --lavl-red-800:#A01800; /* source .paperin a, red that passes on white */ --lavl-red-300:#FF6A58; /* source .pill.r, red that reads on ink */ --lavl-ink-900:#0A0D12; /* brand doc ink, page background */ --lavl-ink-800:#14171C; /* source --ink2, card surface */ --lavl-ink-700:#191D24; /* source --ink3, raised surface */ --lavl-line-700:#242A33; /* source --line, hairline */ --lavl-line-600:#333C48; /* source --line2, stronger hairline */ --lavl-text-050:#EEF1F5; /* source --text */ --lavl-text-300:#A8B1BD; /* source --muted */ --lavl-text-500:#7B8593; /* source --muted2 */ --lavl-green-500:#2FBF71; /* source --green, success and auto filled */ --lavl-amber-500:#F0B429; /* source --amber, warning */ --lavl-white:#FFFFFF; --lavl-paper-ink:#141414; /* source .paperin, text on white */ --lavl-paper-line:#CFCFCF; /* source .paper border */ --lavl-gradient:linear-gradient(135deg,#F8860C,#C21607); /* --- 1b. Semantic. This is the layer a tool should use. ----------------- */ --color-bg:var(--lavl-ink-900); --color-surface:var(--lavl-ink-800); --color-surface-2:var(--lavl-ink-700); --color-text:var(--lavl-text-050); --color-text-dim:var(--lavl-text-300); --color-text-mute:var(--lavl-text-500); --color-border:var(--lavl-line-700); --color-border-strong:var(--lavl-line-600); --color-primary:var(--lavl-orange-500); --color-primary-ink:var(--lavl-white); --color-gradient:var(--lavl-gradient); --color-ok:var(--lavl-green-500); --color-warn:var(--lavl-amber-500); --color-danger:var(--lavl-red-600); --color-danger-text:var(--lavl-red-300); --color-focus-ring:rgba(248,134,12,.16); /* source .field input:focus */ /* --- 1c. Scales. -------------------------------------------------------- */ --space-1:4px; --space-2:6px; --space-3:8px; --space-4:10px; --space-5:12px; --space-6:14px; --space-7:18px; --space-8:24px; --radius-sm:10px; /* form controls */ --radius-md:12px; /* boxed elements, alerts, toast */ --radius-lg:14px; /* cards and dialog sheets, source --rad */ --radius-pill:999px; /* No @font-face and no network request. Lemon Milk Pro is the brand display face and is loaded per page by the host tool, never site wide. Montserrat is the shipped fallback in Box Sales. Both fall through to system UI. */ --font-display:"Lemon Milk Pro","Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --text-xs:11px; --text-sm:12.5px; --text-md:14.5px; /* body default, source body{font:14.5px/1.5} */ --text-lg:17px; --text-xl:19px; --text-2xl:22px; --shadow-1:0 14px 34px rgba(0,0,0,.5); /* source .slist */ --shadow-2:0 16px 40px rgba(0,0,0,.55); /* source #toast */ /* 44px is load bearing. It is the minimum comfortable iOS touch target and, more importantly here, it is the single height every control in a field row is pinned to so an input, a select, a button and a checkbox all start and end at the same y. Selects in particular fall back to the browser's own intrinsic height without it and sit short beside their neighbours. Do not lower this and do not let a control opt out of it. */ --control-h:44px; /* One gutter for the brand bar, header and layout so they stay in line at every width. 18px on a desktop, 12px on a phone. Source --pad. */ --gutter:clamp(12px,2.2vw,18px); } /* Light surface. The source is a dark product, but it does carry one real light surface: the email preview sheet and the print stylesheet. Those exact values are reused here rather than a new palette being invented. Put class="theme-light" on any element to flip the semantic tokens beneath it. */ .theme-light{ --color-bg:#F4F5F7; /* derived, so a white card reads as a card */ --color-surface:var(--lavl-white); /* source .paper */ --color-surface-2:#E8EAED; /* derived */ --color-text:var(--lavl-paper-ink); /* source .paperin */ --color-text-dim:#4A4F57; /* derived */ --color-text-mute:#6B7280; /* derived */ --color-border:var(--lavl-paper-line); /* source .paper border */ --color-border-strong:#B4B4B4; /* derived */ --color-primary:var(--lavl-red-800); /* source .paperin a, orange fails on white */ --color-danger-text:var(--lavl-red-800); --shadow-1:0 14px 34px rgba(0,0,0,.12); --shadow-2:0 16px 40px rgba(0,0,0,.16); } /* ============================================================================= SECTION 2. BASE ============================================================================= */ .lavl-kit *{box-sizing:border-box} body.lavl-kit,body.lavl-kit{margin:0;padding:0} body.lavl-kit{ background:var(--color-bg); color:var(--color-text); font:var(--text-md)/1.5 var(--font-body); -webkit-text-size-adjust:100%; } .lavl-kit h1,.lavl-kit h2,.lavl-kit h3{font-family:var(--font-display);margin:0} .lavl-kit button,.lavl-kit input,.lavl-kit select,.lavl-kit textarea{font-family:var(--font-body);font-size:var(--text-md);color:var(--color-text)} .lavl-kit a{color:var(--color-primary);text-decoration:none} .lavl-kit a:hover{text-decoration:underline} .lavl-kit ::placeholder{color:var(--color-text-mute)} .lavl-hide{display:none !important}/* --- The notch. ------------------------------------------------------------- Every LAVL tool declares . That extends the page under the iPhone status bar and under the home indicator, so without these rules the top strip renders behind the clock. That was a live bug, not a hypothetical. Anything pinned to the top, bottom or sides of the viewport needs the inset added to its own padding. Use these two helpers or copy the pattern. */ .lavl-safe-top{padding-top:env(safe-area-inset-top)} .lavl-safe-x{ padding-left:max(var(--gutter),env(safe-area-inset-left)); padding-right:max(var(--gutter),env(safe-area-inset-right)); }/* The page shell. Side insets on both edges, and the bottom pad clears the home indicator plus room for a fixed toast. Source .layout. */ .lavl-shell{ max-width:min(1760px,95vw); margin:0 auto; padding:var(--gutter) max(var(--gutter),env(safe-area-inset-right)) calc(70px + env(safe-area-inset-bottom)) max(var(--gutter),env(safe-area-inset-left)); }/* ============================================================================= SECTION 3. SAFARI AND iOS FIXES This is the most valuable part of the kit. Each rule below cost a real debugging session on a real device. Every one carries the reason it exists. Do not "clean these up". Removing any of them reintroduces a shipped bug. ============================================================================= *//* FIX 1. Native select appearance strip plus a drawn chevron. WHY: Safari draws native selects at its own tiny intrinsic height no matter what the stylesheet says, so a select always came out shorter than the input sitting next to it. Status sat short beside Client PO number, State sat short beside City and ZIP. appearance:none hands height control back to us, but it also removes the chevron, so the chevron is drawn back on as an inline data URI. No network request and nothing to 404. */ .lavl-kit select{ -webkit-appearance:none; appearance:none; min-height:var(--control-h); background-color:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--space-3) 32px var(--space-3) 11px; line-height:1.4; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a8b1bd' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; } .lavl-kit select:focus{outline:none;border-color:var(--color-primary)}/* FIX 2. Date input width guard everywhere, appearance strip only on narrow. WHY: a date input on iOS ignores the box it is in and renders at its own intrinsic width, which pushed the date and needed-by fields clean out of frame. appearance:none is the iOS fix. But on DESKTOP Safari the same appearance:none also strips the calendar picker affordance, which made the date fields look like dead text boxes. So the width guard applies at every width and the appearance strip applies only where the iOS bug actually lives. The two halves of this fix are deliberately not in the same block. */ .lavl-kit input[type="date"]{min-width:0;max-width:100%} @media (max-width:900px){ .lavl-kit input[type="date"]{-webkit-appearance:none;appearance:none} }/* The picker glyph is near black and vanishes on an ink background. */ .lavl-kit ::-webkit-calendar-picker-indicator{filter:invert(.7)}/* FIX 3. Growing textareas must be display:block. WHY: as inline-block a textarea leaves a roughly 6px baseline gap under itself inside its cell, which floated every description box about 3px above the rest of its row. Measured live 2026-08-14. The gap is invisible on its own and obvious the moment the textarea sits in a centered row of inputs. */ .lavl-kit textarea.grow{ display:block; width:100%; resize:none; overflow:hidden; line-height:1.4; }/* FIX 4. The fixed label strip in field rows. WHY: the old approach let the label flex-grow to absorb a stretched field's slack. That works on a field with exactly two children and silently fails on any field with a third, for example a field whose label carries a hint, and left the inputs in that row 12px out of line with their neighbours. Pinning every label box to the same fixed height means every control in the row starts at the same y no matter how the hint text wraps. The grid must be align-items:start or the rows stretch and undo it. Proven live by injecting this into the running page and measuring. Only applies once the row is actually multi-column, because on one column there is nothing to line up with and a fixed label strip just reads as a gap. */ .lavl-kit .grid2,.lavl-kit .grid3{align-items:start} @container (min-width:400px){ .lavl-kit .grid2>.field>label:first-child,.lavl-kit .grid3>.field>label:first-child{ flex:0 0 auto; min-height:var(--control-h); display:flex; align-items:flex-end; } }/* A field must not stretch to match a taller neighbour, and the controls line up along the bottom of the row rather than the top. */ .lavl-kit .grid2>.field,.lavl-kit .grid3>.field{align-self:stretch} .lavl-kit .grid2>*:not(.field),.lavl-kit .grid3>*:not(.field){align-self:start}/* FIX 5. A button standing in for a field matches the inputs beside it. WHY: a button in a field row has no intrinsic relationship to the 44px inputs around it, so it rendered a few pixels short and the row looked broken. Same for a checkbox, which additionally has to centre rather than sit on the baseline. */ .lavl-kit .grid2 .field>.btn,.lavl-kit .grid3 .field>.btn{min-height:var(--control-h)} .lavl-kit .grid2 .field>.chk,.lavl-kit .grid3 .field>.chk{min-height:var(--control-h);align-items:center;align-content:center}/* FIX 6. iOS zooms any focused input under 16px. WHY: the page visibly jumps and stays zoomed the moment a field is tapped. This is the one rule in the kit that is deliberately a viewport query rather than a container query, because it is about the device, not about the box the input is sitting in. Do not lower the 16px and do not remove the !important, which is there to beat the element level font-size above. */ @media (max-width:900px){ .lavl-kit input,.lavl-kit select,.lavl-kit textarea{font-size:16px !important} }/* ============================================================================= SECTION 4. PRIMITIVES Eight, and only eight: btn, field, card, tbl, badge, dlg, brandbar, alert. Anything a single tool needs and no other tool needs stays in that tool. ============================================================================= *//* --- 4.1 btn --------------------------------------------------------------- .btn is the neutral button. .pri is the brand gradient and is the one action a screen is actually for. .ok is the same weight in green for a confirming action. .ghost is an outline for anything reversible. */ .lavl-kit .btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3); background:var(--color-surface-2); border:1px solid var(--color-border-strong); color:var(--color-text); border-radius:var(--radius-sm); padding:11px 16px; min-height:var(--control-h); font-family:var(--font-display);font-weight:700;font-size:var(--text-md); letter-spacing:.02em;cursor:pointer; } .lavl-kit .btn:hover{border-color:var(--color-text-mute)} .lavl-kit .btn:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-focus-ring)} .lavl-kit .btn.pri{background:var(--color-gradient);border:0;color:var(--color-primary-ink)} .lavl-kit .btn.ok{background:var(--color-ok);border:0;color:var(--lavl-ink-900)} .lavl-kit .btn.pri:hover,.lavl-kit .btn.ok:hover{filter:brightness(1.08)} .lavl-kit .btn.ghost{background:transparent;border-color:var(--color-border-strong);color:var(--color-text-dim)} .lavl-kit .btn.ghost:hover{border-color:var(--color-primary);color:var(--color-text)} .lavl-kit .btn.sm{padding:var(--space-3) var(--space-5);font-size:var(--text-sm);min-height:0;border-radius:var(--radius-sm)} .lavl-kit .btn:disabled{ background:var(--color-surface-2);border:1px solid var(--color-border); color:var(--color-text-mute);cursor:not-allowed;filter:none; } .lavl-kit .btnrow{display:flex;gap:var(--space-4);flex-wrap:wrap}/* --- 4.2 field ------------------------------------------------------------- A label plus one control. min-height on the control is what makes a select exactly as tall as the input beside it. Padding and font-size alone were not enough, because the family and size are set on form controls but not the line-height, so a select fell back to its own intrinsic height. */ .lavl-kit .field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} .lavl-kit .field label{ font-size:var(--text-sm);font-weight:700;letter-spacing:.03em;text-transform:uppercase; color:var(--color-text-dim);display:flex;gap:7px;align-items:baseline;flex-wrap:wrap; } .lavl-kit .field label .hint{font-weight:500;color:var(--color-text-mute);text-transform:none;letter-spacing:0} .lavl-kit .field input,.lavl-kit .field select,.lavl-kit .field textarea{ width:100%;max-width:100%;min-width:0; padding:var(--space-4) var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-bg); color:var(--color-text); outline:none;line-height:1.4; min-height:var(--control-h); } .lavl-kit .field input:focus,.lavl-kit .field select:focus,.lavl-kit .field textarea:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-focus-ring); } .lavl-kit .field textarea{min-height:82px;resize:vertical} .lavl-kit .field input:disabled,.lavl-kit .field select:disabled{background:var(--color-surface-2);color:var(--color-text-mute)} .lavl-kit .field.ro input{background:var(--color-surface-2);color:var(--color-text-dim)}/* Two columns, not flex-wrap. A long label is wider than a phone, so with flex the whole text wrapped to the next line and left the tick sitting alone above it. A grid pins the tick and lets the words wrap inside their own column. */ .lavl-kit .chk{ display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--space-4); font-size:var(--text-md);padding:9px 0;cursor:pointer;color:var(--color-text);line-height:1.4; } .lavl-kit .chk input{width:18px;height:18px;accent-color:var(--color-primary);flex:0 0 auto;margin-top:1px} .lavl-kit .chk .hint{grid-column:2;font-weight:500;color:var(--color-text-mute);font-size:var(--text-sm)}/* Field rows. Container queried, not viewport queried: before this the grids keyed off the window, so a four across row fired at 680px of WINDOW and rendered four tiles inside a 308px rail, straight out through the side of the card. A block has to answer to the box it is actually sitting in. */ .lavl-kit .grid2{display:grid;gap:13px;grid-template-columns:1fr} @container (min-width:430px){ .lavl-kit .grid2{grid-template-columns:repeat(2,minmax(0,1fr))} } .lavl-kit .grid3{display:grid;gap:13px;grid-template-columns:1fr} @container (min-width:400px){ .lavl-kit .grid3{grid-template-columns:repeat(2,minmax(0,1fr))} } @container (min-width:580px){ .lavl-kit .grid3{grid-template-columns:repeat(3,minmax(0,1fr))} }/* --- 4.3 card -------------------------------------------------------------- A gradient hairline runs right around each card. Two backgrounds: the flat card colour clipped to the padding box, and the gradient clipped to the border box, which shows through the transparent 1px border. container-type is on the card on purpose. It is what makes every grid and table inside it measure the card rather than the window. Verified that container-type does not disturb a Google Places prediction dropdown, which is the thing it could plausibly have broken. */ .lavl-kit .card{ container-type:inline-size; min-width:0; border:1px solid transparent; border-radius:var(--radius-lg); padding:clamp(14px,3vw,20px); margin-bottom:16px; background:linear-gradient(var(--color-surface),var(--color-surface)) padding-box, var(--edge,linear-gradient(150deg,rgba(248,134,12,.55),rgba(194,22,7,.22) 48%,var(--color-border))) border-box; } .lavl-kit .card:last-child{margin-bottom:0}/* The one card that sends something out of the building gets the hairline at full strength, because that is the send with our name on it. */ .lavl-kit .card.hot{--edge:linear-gradient(150deg,var(--color-primary),var(--color-danger) 55%,rgba(194,22,7,.45))} .lavl-kit .card>h2{ font-family:var(--font-display);font-size:var(--text-sm);font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--color-text);margin:0 0 5px; display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap; } .lavl-kit .card>h2 .num{ width:22px;height:22px;border-radius:7px;background:var(--color-surface-2); border:1px solid var(--color-border-strong);color:var(--color-primary); display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:800; } .lavl-kit .card .sub{color:var(--color-text-mute);font-size:var(--text-sm);margin:0 0 16px;line-height:1.5}/* --- 4.4 tbl --------------------------------------------------------------- table-layout:fixed plus overflow-wrap is what stops one long unbroken cell value blowing the table past the viewport. Inside a .card the container query below turns each row into a stacked block on a narrow screen, because a real table cannot be made to fit a phone. */ .lavl-kit .tbl{width:100%;border-collapse:collapse;font-size:var(--text-md);table-layout:fixed} .lavl-kit .tbl th{ font-family:var(--font-display);text-align:left;font-size:var(--text-xs);font-weight:800; text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-mute); padding:0 var(--space-3) 9px 0;border-bottom:1px solid var(--color-border); } .lavl-kit .tbl td{padding:var(--space-4) var(--space-3) var(--space-4) 0;border-bottom:1px solid var(--color-border);color:var(--color-text)} .lavl-kit .tbl tr:last-child td{border-bottom:0} .lavl-kit .tbl td,.lavl-kit .tbl th{overflow-wrap:anywhere} .lavl-kit .tbl td.r,.lavl-kit .tbl th.r{text-align:right;padding-right:0;font-variant-numeric:tabular-nums} @container (max-width:620px){ .lavl-kit .tbl thead{display:none} .lavl-kit .tbl tr{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-4); padding:11px 0;border-bottom:1px solid var(--color-border); } .lavl-kit .tbl td{border:0;padding:1px 0} .lavl-kit .tbl td.r{text-align:right} }/* --- 4.5 badge ------------------------------------------------------------- A status word. Never a button, never clickable. white-space:nowrap keeps it on one line, and the narrow override exists because a badge that carries a whole sentence must not force horizontal scroll on a phone. */ .lavl-kit .badge{ display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius-pill); padding:5px var(--space-5); font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;letter-spacing:.03em; text-transform:uppercase; background:var(--color-surface-2);color:var(--color-text-dim); border:1px solid var(--color-border-strong); white-space:nowrap;flex:0 0 auto; } .lavl-kit .badge.ok{background:rgba(47,191,113,.13);color:var(--color-ok);border-color:rgba(47,191,113,.35)} .lavl-kit .badge.warn{background:rgba(240,180,41,.13);color:var(--color-warn);border-color:rgba(240,180,41,.35)} .lavl-kit .badge.danger{background:rgba(194,22,7,.16);color:var(--color-danger-text);border-color:rgba(194,22,7,.45)} .lavl-kit .badge.mute{background:var(--color-surface-2);color:var(--color-text-mute);border-color:var(--color-border)} @media (max-width:560px){ .lavl-kit .badge{white-space:normal} }/* --- 4.6 dlg --------------------------------------------------------------- Backdrop plus sheet. The sheet is capped at 680px and 88vh and scrolls inside itself, so a long body never pushes the buttons off screen. */ .lavl-kit .dlg{ position:fixed;inset:0;background:rgba(0,0,0,.72); display:none;align-items:center;justify-content:center; padding:var(--space-7);z-index:70; } .lavl-kit .dlg.on{display:flex} .lavl-kit .dlg .sheet{ container-type:inline-size; position:relative; background:var(--color-surface); border:1px solid var(--color-border-strong); border-radius:var(--radius-lg); max-width:min(680px,100%);width:100%;max-height:88vh;overflow:auto; padding:clamp(16px,4vw,22px); } .lavl-kit .dlg h3{margin:0 0 5px;font-size:var(--text-lg);font-family:var(--font-display);letter-spacing:.01em;padding-right:34px} .lavl-kit .dlg .dlgsub{color:var(--color-text-dim);font-size:var(--text-sm);margin:0 0 var(--space-6);line-height:1.5} .lavl-kit .dlg .dlgbody{font-size:var(--text-md);line-height:1.55} .lavl-kit .dlg .dlgact{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:flex-end;margin-top:var(--space-7)}/* The corner x closes exactly like the button at the bottom. Both exist on purpose: the bottom one is where your hands already are after reading, the corner one is where thirty years of windows taught everyone to look. The 34px padding-right on the h3 is what keeps a long title off the x. */ .lavl-kit .dlgx{ position:absolute;top:var(--space-4);right:var(--space-5); border:0;background:transparent;color:var(--color-text-mute); font-size:26px;line-height:1;cursor:pointer;padding:6px var(--space-3); border-radius:var(--radius-sm);z-index:2; } .lavl-kit .dlgx:hover{color:var(--color-text);background:var(--color-surface-2)}/* --- 4.7 brandbar ---------------------------------------------------------- The top brand strip. It is the anchor the Portal back link looks for first, so every tool should have one even if it only carries the wordmark. The safe-area top padding is not optional, see Section 2. */ .lavl-kit .brandbar{ background:var(--color-bg); border-bottom:1px solid var(--color-border); padding-top:env(safe-area-inset-top); } .lavl-kit .brandbar .bbin{ max-width:min(1760px,95vw);margin:0 auto; padding:var(--space-6) max(var(--gutter),env(safe-area-inset-left)) var(--space-6) max(var(--gutter),env(safe-area-inset-left)); display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap; }/* The horizontal lockup, 6.25:1. Height, never width, so the aspect holds. Verified legible down to 110px wide. */ .lavl-kit .brandbar .lavl-h{height:22px;max-width:62vw;display:block} @media (max-width:380px){ .lavl-kit .brandbar .lavl-h{height:19px} }/* Text fallback for a tool that has no logo file next to it. */ .lavl-kit .brandbar .wm{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.10em} .lavl-kit .brandbar .wsub{color:var(--color-text-mute);font-size:var(--text-sm);margin-top:1px}/* The gradient rule under the bar. This is the cheapest way to put the brand on a page that has no room for a logo. */ .lavl-kit .brandbar .rule,.lavl-kit .brandrule{height:4px;background:var(--color-gradient)}/* --- 4.8 alert ------------------------------------------------------------- In flow it is a banner. With .toast it is the transient fixed message. .info is deliberately neutral grey rather than blue: the brand rule is no blue and no purple, and the source stylesheet's blue info banner is the one place it was broken. */ .lavl-kit .alert{ border-radius:var(--radius-md);padding:var(--space-5) var(--space-6); font-size:var(--text-md);margin-bottom:var(--space-6);line-height:1.55; border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-dim); } .lavl-kit .alert.ok{background:rgba(47,191,113,.10);border-color:rgba(47,191,113,.38);color:#A7F3C0} .lavl-kit .alert.warn{background:rgba(240,180,41,.08);border-color:rgba(240,180,41,.40);color:#F7D488} .lavl-kit .alert.danger{background:rgba(194,22,7,.10);border-color:rgba(194,22,7,.45);color:#FFAB9D} .lavl-kit .alert.info{background:var(--color-surface-2);border-color:var(--color-border-strong);color:var(--color-text-dim)} .lavl-kit .alert b{color:var(--color-text)}/* The toast. Off screen by transform rather than display, so it animates and so it never takes part in layout. Centred, capped so a long message does not run edge to edge on a desktop, and lifted clear of the home indicator. */ .lavl-kit .alert.toast{ position:fixed;left:50%;bottom:calc(var(--space-8) + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(150%); background:var(--color-surface-2);border:1px solid var(--color-border-strong); color:var(--color-text); padding:13px 20px;margin:0;border-radius:var(--radius-md); font-size:var(--text-md);z-index:80;transition:transform .22s; max-width:min(92vw,540px);text-align:center;box-shadow:var(--shadow-2); } .lavl-kit .alert.toast.on{transform:translateX(-50%) translateY(0)} .lavl-kit .alert.toast.ok{color:var(--color-ok)} .lavl-kit .alert.toast.warn{color:var(--color-warn)} .lavl-kit .alert.toast.danger{color:var(--color-danger-text)} @media (prefers-reduced-motion:reduce){ .lavl-kit .alert.toast{transition:none} }/* Print. The tool is dark on screen and has to be black on white on paper. */ @media print{ .lavl-kit .noprint,.lavl-kit .brandbar,.lavl-kit .alert.toast,.lavl-kit .dlg{display:none !important} body.lavl-kit{background:#fff;color:#111} .lavl-kit .card{border:0;background:#fff;color:#111;page-break-inside:avoid;padding:0 0 var(--space-6)} .lavl-kit .card>h2,.lavl-kit .card .sub{color:#111} .lavl-kit .tbl td,.lavl-kit .tbl th{border-color:#ddd;color:#111} }/* ========================================================================== LAVL Portal Kit 1.1.0 additions Appended to 1.0.0. Nothing in 1.0.0 is modified or overridden. WHY A NEW CLASS NAMESPACE 1.0.0 already defines .lavl-shell, and it is a centred max-width CONTENT wrapper, not a page frame. Redefining it would silently change the layout of anything already using it. The app frame therefore lives under .lavl-app and .lavl-shell keeps working exactly as it does today, nested inside it. THE LAYOUT RULE Sidebar left, work right. On a phone the sidebar becomes a slide-in drawer rather than stacking above the content, because stacking pushes the actual work below the fold and every tool here gets used on a phone. Every value below comes from a 1.0.0 token. No new colours, no new spacing scale, no hard-coded hex. That is what makes the tools look like one product. ========================================================================== *//* --------------------------------------------------------------- app frame *//* Three rows, not two. The mode banner gets its OWN row. The first version gave the banner grid-area:bar, the same cell as the topbar, so in test mode the two stacked inside one cell: the banner covered the top of the sidebar and pushed the first heading out of view. Caught by screenshotting the render rather than by any assertion, which is the argument for looking at the thing you built. */ .lavl-app{ display:grid; grid-template-columns:var(--lavl-nav-w,264px) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"mode mode" "bar bar" "nav main"; min-height:100dvh; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); }/* ------------------------------------------------------------------ topbar */ .lavl-app__bar{ grid-area:bar; display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-4); padding-top:max(var(--space-2),env(safe-area-inset-top)); background:var(--color-surface); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:40; min-height:var(--control-h); } .lavl-app__brand{display:flex;align-items:center;gap:var(--space-2);min-width:0;text-decoration:none;color:inherit} .lavl-app__brand img{height:26px;width:auto;display:block} .lavl-app__tool{ font-family:var(--font-display); font-size:var(--text-md); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-left:var(--space-3); border-left:1px solid var(--color-border); color:var(--color-text); } .lavl-app__spacer{flex:1 1 auto;min-width:var(--space-2)}/* Hamburger. Hidden on desktop because the sidebar is already visible there. */ .lavl-app__burger{ display:none; align-items:center; justify-content:center; width:44px;height:44px; /* 44px is the kit's documented touch minimum */ border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-2); color:var(--color-text); cursor:pointer; flex:0 0 auto; } .lavl-app__burger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}/* --------------------------------------------------------------- side nav */ .lavl-app__nav{ grid-area:nav; background:var(--color-surface); border-right:1px solid var(--color-border); padding:var(--space-3) var(--space-2); padding-bottom:calc(var(--space-6) + env(safe-area-inset-bottom)); overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-1); } .lavl-app__navgroup{ font-size:var(--text-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-mute); padding:var(--space-3) var(--space-3) var(--space-1); } .lavl-app__link{ display:flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 var(--space-3); border-radius:var(--radius-md); color:var(--color-text-dim); text-decoration:none; font-size:var(--text-sm); border:1px solid transparent; cursor:pointer; background:none; width:100%; text-align:left; font-family:inherit; } .lavl-app__link:hover{background:var(--color-surface-2);color:var(--color-text)} .lavl-app__link:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px} .lavl-app__link[aria-current="page"]{ background:var(--color-surface-2); color:var(--color-text); border-color:var(--color-border-strong); font-weight:600; } .lavl-app__ico{flex:0 0 auto;width:18px;text-align:center;opacity:.85}/* ---------------------------------------------------------------- content */ .lavl-app__main{ grid-area:main; min-width:0; overflow-x:hidden; display:flex; flex-direction:column; } .lavl-app__body{flex:1 1 auto;min-height:0}/* Backdrop only matters once the nav is a drawer. */ .lavl-app__scrim{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:44; border:0; padding:0; }/* ---------------------------------------------------- phone, nav as drawer */ @media (max-width:900px){ .lavl-app{grid-template-columns:minmax(0,1fr);grid-template-areas:"mode" "bar" "main"} .lavl-app__burger{display:inline-flex} .lavl-app__nav{ position:fixed; inset:0 auto 0 0; width:min(300px,86vw); z-index:45; transform:translateX(-102%); /* 102 not 100, so the shadow clears too */ transition:transform .18s ease-out; box-shadow:var(--shadow-2); padding-top:max(var(--space-3),env(safe-area-inset-top)); } .lavl-app[data-nav="open"] .lavl-app__nav{transform:translateX(0)} .lavl-app[data-nav="open"] .lavl-app__scrim{display:block} .lavl-app__tool{font-size:var(--text-sm)} } @media (prefers-reduced-motion:reduce){ .lavl-app__nav{transition:none} }/* ------------------------------------------------------------ mode banner *//* Deliberately loud. The whole safety argument for test mode is that nobody is ever unsure which mode they are in. A subtle banner defeats the purpose. */ .lavl-mode{ grid-area:mode; display:flex; align-items:center; justify-content:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); font-size:var(--text-sm); font-weight:700; letter-spacing:.02em; color:var(--lavl-ink-900); background:var(--color-warn,var(--lavl-amber-500)); border-bottom:2px solid var(--lavl-ink-900); position:sticky; top:0; z-index:60; } .lavl-mode--dev{background:var(--color-primary);color:var(--color-primary-ink)} .lavl-mode__exit{ color:inherit; text-decoration:underline; font-weight:600; background:none; border:0; cursor:pointer; font-family:inherit; font-size:inherit; min-height:32px; } .lavl-app[data-mode="test"] .lavl-app__bar,.lavl-app[data-mode="dev"] .lavl-app__bar{top:var(--lavl-mode-h,40px)}/* ----------------------------------------------------------------- footer */ .lavl-foot{ border-top:1px solid var(--color-border); background:var(--color-surface); padding:var(--space-4) var(--space-4); padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2) var(--space-4); font-size:var(--text-sm); color:var(--color-text-mute); } .lavl-foot__act{ display:inline-flex; align-items:center; gap:var(--space-2); min-height:44px; padding:0 var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-surface-2); color:var(--color-text-dim); font:inherit; cursor:pointer; text-decoration:none; } .lavl-foot__act:hover{color:var(--color-text);border-color:var(--color-border-strong)} .lavl-foot__act:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px} .lavl-foot__meta{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-mute);text-align:right} .lavl-foot__ver{font-variant-numeric:tabular-nums} @media (max-width:900px){ .lavl-foot{flex-direction:column;align-items:stretch} .lavl-foot__act{justify-content:center} .lavl-foot__meta{margin-left:0;text-align:center} }/* ------------------------------------------------------- feedback dialog */ .lavl-fb{display:flex;flex-direction:column;gap:var(--space-3);min-width:min(520px,84vw)} .lavl-fb label{font-size:var(--text-sm);color:var(--color-text-dim);font-weight:600} .lavl-fb textarea{ width:100%; min-height:140px; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-bg); color:var(--color-text); font:inherit; font-size:16px; /* 16px or iOS Safari zooms the page on focus */ resize:vertical; } .lavl-fb textarea:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:1px} .lavl-fb__hint{font-size:var(--text-xs);color:var(--color-text-mute)} .lavl-fb__ctx{ font-size:var(--text-xs); color:var(--color-text-mute); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-sm); padding:var(--space-2); word-break:break-word; }/* Printing a tool should print the work, not the chrome. */ @media print{ .lavl-app__nav,.lavl-app__bar,.lavl-foot,.lavl-mode,.lavl-app__scrim{display:none !important} .lavl-app{display:block} } /* ============================================================================= LAVL Portal Kit 2.0.0. THE CHROME. Added 2026-09-02 at Cody's call: every staff tool except Funnel carries the same frame, from the logo down to the content, in the Box Sales palette and the Logistics header layout. Class names here are all lavl- prefixed and nothing below touches a bare element, so this file can be linked into a tool that already has its own stylesheet without changing anything in it. Frame, top to bottom: .lavl-strip the thin account strip: Back to portal, Signed in as, Sign out .lavl-head the branded header: mark, LIMITLESS AVL, tool name, right note .lavl-band optional strip under the header for status pills or tabs .lavl-page the content width .lavl-cols two columns on a wide screen: .lavl-main left, .lavl-rail RIGHT. The rail drops under the main column on a phone. .lavl-foot Report an issue, Guides, Suggest an improvement, build stamp Width: min(1760px, 95vw), the Box Sales shell, so the frame edges line up across tools when someone flips between them. ============================================================================= */ :root{ --lavl-shell:min(1760px,95vw); --lavl-gutter:clamp(12px,2.2vw,18px); --lavl-rail-w:clamp(300px,26vw,380px); } .lavl-chrome{background:var(--color-bg);color:var(--color-text);-webkit-text-size-adjust:100%} .lavl-in{max-width:var(--lavl-shell);margin:0 auto; padding-left:max(var(--lavl-gutter),env(safe-area-inset-left)); padding-right:max(var(--lavl-gutter),env(safe-area-inset-right))} /* --- account strip -------------------------------------------------------- */ .lavl-strip{background:var(--color-bg);border-bottom:1px solid var(--color-border); font-size:var(--text-sm);color:var(--color-text-mute);padding-top:env(safe-area-inset-top)} .lavl-strip .lavl-in{display:flex;justify-content:space-between;align-items:center;gap:12px; min-height:40px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px} .lavl-strip a{color:var(--color-text-dim);text-decoration:none;font-weight:600} .lavl-strip a:hover{color:var(--color-primary)} .lavl-strip b{color:var(--color-text);font-weight:600} .lavl-strip .lavl-who{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap} .lavl-strip .lavl-sep{opacity:.55} /* --- branded header ------------------------------------------------------- */ .lavl-head{background:var(--color-surface);border-bottom:1px solid var(--color-border);color:var(--color-text)} .lavl-head .lavl-in{display:flex;align-items:center;justify-content:space-between;gap:18px; flex-wrap:wrap;padding-top:16px;padding-bottom:16px} .lavl-brand{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:inherit} /* 2.0.1: the brand block IS the official horizontal lockup (LAVL Color Horizontal Logo.ai), cut into two vectors: the mark and the LIMITLESS AVL wordmark. The tool name sits exactly where "AUDIO . VIDEO . LIGHTING" sits in the original. No box, no border, no background. Proportions measured from the art: mark 61 x 35.7, wordmark 203.6 x 14, gap 8.9, wordmark 2.7 below the mark's top. */ .lavl-brand{gap:11px} .lavl-mark{height:44px;flex:0 0 auto;display:flex;align-items:center} .lavl-mark img{height:100%;width:auto;display:block} .lavl-word{display:flex;flex-direction:column;gap:7px;padding-top:3px;min-width:0} .lavl-wm{height:17px;width:auto;display:block} .lavl-word .lavl-tool{margin:0;padding-left:2px;font-family:var(--font-display);font-size:11.5px; font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--color-text);line-height:1;white-space:nowrap} .lavl-brand h1{margin:0;font-family:var(--font-display);font-size:15px;font-weight:800; letter-spacing:.14em;text-transform:uppercase;line-height:1.2;color:var(--color-text)} .lavl-brand p{margin:2px 0 0;font-size:12px;letter-spacing:.08em;color:var(--color-text-dim);font-weight:600} .lavl-brand p.lavl-tool{font-family:var(--font-display);text-transform:uppercase;font-size:12px;letter-spacing:.1em} .lavl-note{font-size:var(--text-sm);color:var(--color-text-dim);text-align:right;line-height:1.5} .lavl-note b{color:var(--color-text)} .lavl-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .lavl-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--radius-pill); border:1px solid var(--color-border-strong);background:var(--color-surface-2);color:var(--color-text-dim); font-size:var(--text-sm);font-weight:600;text-decoration:none;cursor:pointer} .lavl-chip:hover{border-color:var(--color-primary);color:var(--color-text)} .lavl-chip.lavl-chip--pri{background:var(--color-gradient);border-color:transparent;color:#fff} @media (max-width:700px){ .lavl-head .lavl-in{flex-direction:column;align-items:flex-start;gap:10px} .lavl-note{text-align:left} .lavl-mark{height:36px} .lavl-brand{gap:9px} .lavl-wm{height:14px} .lavl-word{gap:6px;padding-top:2px} .lavl-word .lavl-tool{font-size:10.5px} } /* --- optional band under the header --------------------------------------- */ .lavl-band{background:var(--color-surface);border-bottom:1px solid var(--color-border)} .lavl-band .lavl-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:9px;padding-bottom:9px} .lavl-band .lavl-right{margin-left:auto;color:var(--color-text-mute);font-size:var(--text-sm)} /* --- page and columns ----------------------------------------------------- */ .lavl-page{max-width:var(--lavl-shell);margin:0 auto; padding:var(--lavl-gutter) max(var(--lavl-gutter),env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--lavl-gutter),env(safe-area-inset-left))} .lavl-cols{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start} .lavl-main,.lavl-rail{min-width:0} @media (min-width:1080px){ .lavl-cols{grid-template-columns:minmax(0,1fr) var(--lavl-rail-w)} .lavl-rail{position:sticky;top:12px} } /* On a phone the work comes first and the rail follows it. */ @media (max-width:1079px){ .lavl-main{order:1} .lavl-rail{order:2} } /* --- footer ---------------------------------------------------------------- */ .lavl-foot .lavl-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);width:100%} .lavl-foot__brand{display:inline-flex;align-items:center;gap:10px;color:var(--color-text-dim);font-weight:600} .lavl-foot__brand img{height:20px;width:auto;display:block;opacity:.9} .lavl-foot__addr{color:var(--color-text-mute)} .lavl-foot__addr a{color:inherit;text-decoration:none} /* --- print: the frame never prints, the work does -------------------------- */ @media print{ .lavl-strip,.lavl-head,.lavl-band,.lavl-foot,.lavl-rail{display:none !important} .lavl-cols{display:block} }