/* ============================================================ LAZARUS LABS — COA LIBRARY (COA v2) — mockup-1:1 rebuild. Ports _local/mockups/coa-library.html onto the LIVE, real-data library generated by _local/tools/build-coa-library-page.ps1. Decision (operator-confirmed): adopt the mockup's visual language but keep the REAL Janoshik COA images + the existing rich viewer (gallery / prev-next / verify / keyboard). The mockup's stylized results table is NOT reproduced — the lab reports don't carry Identity/Mass/Appearance/Moisture and purity is often "Not shown", so each card frames the real certificate image instead. - All tokens + classes scoped under .ll-coa so nothing leaks. - Functional hooks stay as data-ll-coa-* (ll-coa-library.js); only the visual classes change, so the JS is untouched. - The legacy .ll-coa-hero/.ll-coa-library/.ll-coa-toolbar rules in style.css no longer match the new markup (dead, harmless); the viewer keeps its .ll-coa-viewer-* classes and is restyled below. ============================================================ */ /* ---------- design tokens (mockup :root, scoped) ---------- */ .ll-coa{ --bg:#0A0C0A; --panel:#11161C; --panel-2:#0F1318; --panel-3:#0A0F14; --line:#1E2631; --line-soft:rgba(255,255,255,.08); --line-lime:rgba(167,210,45,.30); --lime:#A7D22D; --lime-hot:#C7F33B; --on-lime:#0A0D06; --amber:#DCA34C; --text:#ECEFE6; --muted:#AEB6BF; --muted-2:#8A939D; --shadow:0 24px 70px rgba(0,0,0,.55); --shadow-sm:0 14px 36px rgba(0,0,0,.42); --inset:inset 0 1px 0 rgba(255,255,255,.05); --r:16px; --r-lg:22px; --r-pill:999px; --maxw:1240px; --ease:cubic-bezier(.2,.75,.2,1); --sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --display:Montserrat,Inter,sans-serif; } /* ---------- foundation + base typography ---------- */ .ll-coa{ position:relative; padding:clamp(20px,3vw,40px) 0 clamp(56px,7vw,96px); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } .ll-coa *{ box-sizing:border-box; } .ll-coa__inner{ width:min(100% - 40px, var(--maxw)) !important; max-width:var(--maxw) !important; margin-inline:auto !important; padding:0 !important; } body.ll-coa-v2{ background-color:#0A0C0A; } body.ll-coa-v2 .ll-coa-host{ margin-top:0; margin-bottom:0; padding:0; } body.ll-coa-v2 .ll-coa h1, body.ll-coa-v2 .ll-coa h2, body.ll-coa-v2 .ll-coa h3, body.ll-coa-v2 .ll-coa h4{ font-family:var(--display); text-transform:uppercase; font-weight:900; letter-spacing:.01em; margin:0; color:#fff; line-height:1; } body.ll-coa-v2 .ll-coa p{ margin:0; color:var(--muted); } body.ll-coa-v2 .ll-coa a{ color:var(--lime); text-decoration:none; } .ll-coa a.doc, .ll-coa a.ccard__view{ text-decoration:none; } .ll-coa img{ max-width:100%; display:block; } .ll-coa a:focus-visible, .ll-coa button:focus-visible, .ll-coa input:focus-visible{ outline:2px solid rgba(199,243,59,.7); outline-offset:3px; border-radius:6px; } /* shared bits from lab.css the mockup uses */ .ll-coa .eyebrow{ font:800 11px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--lime); } .ll-coa .tagln{ display:flex; align-items:center; gap:14px; margin-bottom:14px; } .ll-coa .tagln .ln{ height:1px; width:54px; background:linear-gradient(90deg,var(--lime),transparent); } .ll-coa .chip{ display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:8px 13px; border:1px solid var(--line-lime); border-radius:var(--r-pill); background:rgba(8,12,16,.6); color:var(--text); font:800 10.5px/1.3 var(--display); letter-spacing:.1em; text-transform:uppercase; } .ll-coa .chip svg{ width:14px; height:14px; flex:0 0 14px; stroke:var(--lime-hot); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .section__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.5fr); gap:30px; align-items:end; margin-bottom:30px; } .ll-coa .section__head h2{ font-size:clamp(1.9rem,3.6vw,3.1rem); color:#fff; } .ll-coa .section__head h2 em{ font-style:normal; color:var(--lime); } .ll-coa .section__head p{ max-width:40ch; font-size:15px; } /* reveal-on-scroll (progressive enhancement; visible without JS) */ .ll-coa .reveal{ opacity:1; transform:none; } .ll-coa.is-ready .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); } .ll-coa.is-ready .reveal.in{ opacity:1; transform:none; } .ll-coa.is-ready .reveal.d1{ transition-delay:.06s } .ll-coa.is-ready .reveal.d2{ transition-delay:.12s } .ll-coa.is-ready .reveal.d3{ transition-delay:.18s } /* ---- HERO + STAT PANEL ---- */ .ll-coa .coa-hero{ padding:clamp(12px,2vw,24px) 0 0; } .ll-coa .coa-hero__grid{ display:grid; grid-template-columns:minmax(0,1.32fr) minmax(280px,.92fr); gap:clamp(20px,2.6vw,34px); align-items:center; } .ll-coa .coa-hero__copy{ display:flex; flex-direction:column; justify-content:center; min-width:0; } .ll-coa .coa-hero .eyebrow{ margin-bottom:14px; display:inline-flex; align-items:center; gap:9px; } .ll-coa .coa-hero .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lime-hot); box-shadow:0 0 0 4px rgba(167,210,45,.14),0 0 14px rgba(199,243,59,.55); } .ll-coa .coa-hero h1{ font-size:clamp(2.2rem,5.2vw,3.7rem); color:#fff; line-height:1; } .ll-coa .coa-hero h1 em{ font-style:normal; color:var(--lime); } .ll-coa .coa-hero__sub{ margin-top:16px; max-width:56ch; font-size:15.5px; line-height:1.6; color:var(--muted); } .ll-coa .coa-ribbon{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .ll-coa .coa-stat{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid var(--line-lime); border-radius:var(--r-lg); background:radial-gradient(120% 80% at 100% 0%, rgba(167,210,45,.13), transparent 46%), linear-gradient(180deg, rgba(17,22,28,.92), rgba(8,12,16,.96)); box-shadow:var(--shadow), var(--inset); } .ll-coa .coa-stat::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--lime) 18%,var(--lime-hot) 50%,var(--lime) 82%,transparent); } .ll-coa .coa-stat__rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; } .ll-coa .coa-stat__row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:12px 15px; background:#0C1118; } .ll-coa .coa-stat__row dt{ margin:0; font:800 10px/1.3 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); } .ll-coa .coa-stat__row dd{ margin:0; font:900 1.05rem/1 var(--display); letter-spacing:.02em; color:#fff; text-align:right; font-variant-numeric:tabular-nums; } .ll-coa .coa-stat__row dd.hi{ color:var(--lime); font-size:1.7rem; text-shadow:0 0 18px rgba(167,210,45,.28); } .ll-coa .coa-stat__row dd small{ display:block; margin-top:4px; font:700 9px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); } .ll-coa .coa-stat__note{ display:flex; gap:12px; align-items:flex-start; font:500 12.5px/1.55 var(--sans); color:var(--muted); } .ll-coa .coa-stat__note svg{ width:22px; height:22px; flex:0 0 22px; padding:4px; border-radius:7px; background:rgba(167,210,45,.1); color:var(--lime-hot); stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .coa-stat__note b{ color:var(--text); font-weight:700; } /* ---- TOOLBAR: search + sort ---- */ .ll-coa .coa-bar{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; justify-content:space-between; padding:14px 0; margin:20px 0 4px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .ll-coa .coa-search{ position:relative; flex:1; min-width:240px; max-width:460px; } .ll-coa .coa-search input{ width:100%; min-height:52px; padding:0 18px 0 46px; border-radius:13px; border:1px solid var(--line); background:rgba(7,11,15,.7); color:#fff; font:500 16px/1 var(--sans); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .ll-coa .coa-search input::placeholder{ color:var(--muted-2); } .ll-coa .coa-search input:focus{ outline:none; border-color:var(--lime); box-shadow:0 0 0 3px rgba(167,210,45,.16); } .ll-coa .coa-search>svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted-2); stroke:currentColor; fill:none; stroke-width:1.8; pointer-events:none; } .ll-coa .coa-tools{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .ll-coa .coa-sort{ display:inline-flex; align-items:center; gap:8px; padding:6px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--panel-2); } .ll-coa .coa-sort__lbl{ padding-left:8px; font:800 9.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); } .ll-coa .coa-sort button{ padding:9px 15px; min-height:44px; border-radius:var(--r-pill); border:0; background:transparent; color:var(--muted); font:800 11px/1 var(--display); letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:color .2s var(--ease), background .2s var(--ease); } .ll-coa .coa-sort button:hover{ color:#fff; } /* ll-coa-library.js marks the active sort with .is-active */ .ll-coa .coa-sort button.is-active{ background:linear-gradient(180deg,var(--lime-hot),var(--lime)); color:var(--on-lime); } .ll-coa .coa-count{ font:700 11px/1.3 var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; } .ll-coa .coa-count b{ color:#fff; } .ll-coa .coa-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* ---- GRID ---- */ .ll-coa .coa-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px; padding:0; list-style:none; } /* ---- COA CARD ---- */ .ll-coa .ccard{ position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--panel-2)); box-shadow:var(--shadow-sm); transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease); } .ll-coa .ccard[hidden]{ display:none; } .ll-coa .ccard::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--lime) 18%,var(--lime-hot) 50%,var(--lime) 82%,transparent); transform:scaleX(.4); transform-origin:left; opacity:.7; transition:transform .4s var(--ease), opacity .4s var(--ease); z-index:3; } .ll-coa .ccard:hover{ transform:translateY(-4px); border-color:var(--line-lime); box-shadow:var(--shadow-sm), 0 0 0 1px rgba(167,210,45,.16), 0 26px 58px rgba(167,210,45,.1); } .ll-coa .ccard:hover::before{ transform:scaleX(1); opacity:1; } /* identity header */ .ll-coa .ccard__head{ display:flex; align-items:center; gap:13px; padding:16px 18px 14px; } .ll-coa .ccard__avatar{ width:46px; height:46px; flex:0 0 46px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-lime); background:radial-gradient(circle at 50% 30%, rgba(167,210,45,.14), transparent 60%), #070B0F; color:var(--lime-hot); } .ll-coa .ccard__avatar svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .ccard__id{ flex:1; min-width:0; } .ll-coa .ccard__name{ font:900 1.02rem/1.1 var(--display); text-transform:uppercase; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ll-coa .ccard__batch{ margin-top:5px; font:700 10.5px/1.4 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-variant-numeric:tabular-nums; } .ll-coa .ccard__pass{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:var(--r-pill); border:1px solid var(--line-lime); background:rgba(167,210,45,.1); color:var(--lime-hot); font:800 9.5px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .ll-coa .ccard__pass svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .ccard__pass--legacy{ border-color:var(--line); background:rgba(138,147,157,.08); color:var(--muted); } /* ---- the "document" preview = REAL COA image framed like a lab report ---- */ .ll-coa .doc{ position:relative; display:block; width:100%; margin:0 18px; width:calc(100% - 36px); padding:0; border:1px solid var(--line); border-radius:11px; overflow:hidden; background:linear-gradient(180deg,#0E141B,#0A0F15); cursor:pointer; text-align:left; } .ll-coa .doc__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(167,210,45,.1), rgba(167,210,45,.02)); } .ll-coa .doc__lab{ display:inline-flex; align-items:center; gap:8px; font:800 10px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:#fff; } .ll-coa .doc__mark{ display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:linear-gradient(135deg,var(--lime),#7f9e25); color:var(--on-lime); font:900 10px/1 var(--display); } .ll-coa .doc__rid{ font:700 9px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52%; } .ll-coa .doc__shot{ display:block; position:relative; height:208px; overflow:hidden; background:#0a0f14; } .ll-coa .doc__shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .5s var(--ease); } .ll-coa .doc:hover .doc__shot img{ transform:scale(1.04); } /* fade + hover affordance over the report image */ .ll-coa .doc__shot::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(8,12,16,.62)); pointer-events:none; } .ll-coa .doc__expand{ position:absolute; right:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:9px; border:1px solid var(--line-lime); background:rgba(10,14,18,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--lime-hot); font:800 9px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; opacity:0; transform:translateY(4px); transition:opacity .22s var(--ease), transform .22s var(--ease); pointer-events:none; } .ll-coa .doc__expand svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .ccard:hover .doc__expand{ opacity:1; transform:none; } /* touch devices have no hover — show the "view" hint on the cert by default */ @media (hover:none){ .ll-coa .doc__expand{ opacity:1; transform:none; } } .ll-coa .ccard--redacted .doc__bar{ background:linear-gradient(90deg, rgba(138,147,157,.14), rgba(138,147,157,.03)); } .ll-coa .ccard--redacted .doc__mark{ background:linear-gradient(135deg,#3c4858,#2c3540); color:#cfd6df; } /* ---- card meta strip ---- */ .ll-coa .ccard__meta{ display:grid; grid-template-columns:1fr 1fr; gap:1px; margin:14px 0 0; background:var(--line); } .ll-coa .ccard__meta>div{ display:flex; flex-direction:column; gap:3px; padding:11px 18px; background:#0C1118; } .ll-coa .ccard__meta dt{ margin:0; font:700 9px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); } .ll-coa .ccard__meta dd{ margin:0; font:700 12.5px/1.2 var(--sans); color:#fff; font-variant-numeric:tabular-nums; } .ll-coa .ccard__meta dd.pur{ font:900 1rem/1 var(--display); color:var(--lime); letter-spacing:-.01em; } /* ---- actions ---- */ .ll-coa .ccard__foot{ display:flex; align-items:center; gap:10px; padding:14px 18px; margin-top:auto; border-top:1px solid var(--line); } .ll-coa .ccard__view{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 12px; border-radius:11px; border:0; background:linear-gradient(180deg,var(--lime-hot),var(--lime)); color:var(--on-lime); font:800 10.5px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s var(--ease); } body.ll-coa-v2 .ll-coa a.ccard__view{ color:var(--on-lime); text-decoration:none; } .ll-coa .ccard__view:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(167,210,45,.26); } .ll-coa .ccard__view svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .ll-coa .ccard__pdf{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:0 14px; border-radius:11px; border:1px solid var(--line-lime); background:rgba(167,210,45,.06); color:#fff; font:800 10.5px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .ll-coa .ccard__pdf:hover{ background:rgba(167,210,45,.14); border-color:var(--lime); color:var(--lime); } /* tap/press feedback for touch */ .ll-coa .ccard__view:active, .ll-coa .ccard__pdf:active, .ll-coa .coa-sort button:active{ transform:scale(.97); } .ll-coa .ccard__pdf svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* ---- empty state ---- */ .ll-coa .coa-empty{ padding:64px 0; text-align:center; color:var(--muted); font-size:15px; } .ll-coa .coa-empty[hidden]{ display:none; } .ll-coa .coa-empty h3{ font:900 16px/1.2 var(--display); text-transform:uppercase; color:#fff; margin-bottom:8px; } .ll-coa .coa-empty b{ color:var(--text); font-weight:700; } /* ---- how-it-works strip ---- */ .ll-coa .coa-how{ margin-top:64px; } .ll-coa .coa-how__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; } .ll-coa .coa-step{ position:relative; padding:22px 20px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--panel),var(--panel-2)); box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), border-color .22s var(--ease); } .ll-coa .coa-step:hover{ transform:translateY(-3px); border-color:var(--line-lime); } .ll-coa .coa-step b.sn{ display:block; font:900 16px/1 var(--display); color:var(--lime); margin-bottom:12px; font-variant-numeric:tabular-nums; } .ll-coa .coa-step h4{ font:900 13px/1.2 var(--display); text-transform:uppercase; letter-spacing:.03em; color:#fff; margin-bottom:7px; } .ll-coa .coa-step p{ font:500 12.5px/1.5 var(--sans); color:var(--muted); } /* ---- compliance note ---- */ .ll-coa .coa-note{ display:flex; gap:13px; align-items:flex-start; margin-top:30px; padding:18px 20px; border:1px solid var(--line); border-radius:var(--r); background:rgba(167,210,45,.04); font:500 13px/1.5 var(--sans); color:var(--muted); } .ll-coa .coa-note b{ color:var(--text); font-weight:700; } .ll-coa .coa-note svg{ width:22px; height:22px; flex:0 0 22px; color:var(--lime-hot); stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; } /* ============================================================ VIEWER (kept rich; restyled to the mockup modal aesthetic). Structure + data-ll-coa-* hooks come from ll-coa-library.js. SOLE OWNER of .ll-coa-viewer__* styling — the legacy viewer rules that used to double-style this same markup from style.css and ll-mobile-overrides.css were removed; put any new viewer styling here only. ============================================================ */ .ll-coa-viewer[hidden]{ display:none; } .ll-coa-viewer{ position:fixed; inset:0; z-index:1300; } html.ll-coa-viewer-open, body.ll-coa-viewer-open{ overflow:hidden; } body.ll-coa-viewer-open .ll-intercom-intent-launcher, body.ll-coa-viewer-open .intercom-lightweight-app-launcher, body.ll-coa-viewer-open .intercom-launcher-frame{ display:none!important; } .ll-coa-viewer__scrim{ position:absolute; inset:0; background:rgba(4,6,5,.8); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); } .ll-coa-viewer__dialog{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1180px,calc(100vw - 32px)); height:min(94vh,960px); display:flex; flex-direction:column; overflow:hidden; border-radius:18px; border:1px solid var(--line-lime); background:#080C11; box-shadow:0 40px 100px rgba(0,0,0,.62); font-family:var(--sans); } .ll-coa-viewer__header{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px 14px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(167,210,45,.08),transparent); } .ll-coa-viewer__copy{ display:block; max-width:none; } .ll-coa-viewer__eyebrow{ display:inline-flex; align-items:center; gap:8px; font:800 9px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--lime); } .ll-coa-viewer__eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--lime-hot); box-shadow:0 0 10px rgba(199,243,59,.55); } .ll-coa-viewer__title{ margin:8px 0 0; font:900 1.15rem/1.15 var(--display); letter-spacing:.02em; text-transform:uppercase; color:#fff; text-shadow:none; } .ll-coa-viewer__body{ display:grid; grid-template-columns:minmax(0,1fr) 320px; flex:1; min-height:0; } .ll-coa-viewer__document-pane{ display:flex; flex-direction:column; min-width:0; min-height:0; background:#080C11; } .ll-coa-viewer__header-actions,.ll-coa-viewer__document-tools,.ll-coa-viewer__actions{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; } .ll-coa-viewer__icon-action,.ll-coa-viewer__document-tools button,.ll-coa-viewer__nav button{ min-height:44px; padding:0 13px; border:1px solid var(--line); border-radius:10px; background:#0F151C; color:var(--muted); font:800 10px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; box-shadow:none; } .ll-coa-viewer__icon-action:hover,.ll-coa-viewer__document-tools button:hover,.ll-coa-viewer__nav button:hover:not(:disabled){ border-color:var(--line-lime); color:var(--lime-hot); } /* close is a separate class in the generator, but uses the same quiet header-control treatment. */ .ll-coa .ll-coa-viewer__close{ min-height:44px !important; padding:0 13px !important; border:1px solid var(--line) !important; border-radius:10px !important; background:#0F151C !important; color:var(--muted) !important; font:800 10px/1 var(--display) !important; letter-spacing:.06em !important; text-transform:uppercase; cursor:pointer; box-shadow:none !important; } .ll-coa .ll-coa-viewer__close:hover{ border-color:var(--line-lime) !important; color:var(--lime-hot) !important; } /* batch strip — which number is on the vial vs on the lab report */ .ll-coa-viewer__batches{ display:flex; flex-wrap:wrap; gap:8px; margin:0; } .ll-coa-viewer__batches:empty{ display:none; } .ll-coa-viewer__batch{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:9px 12px 10px; border:1px solid var(--line,#1E2631); border-radius:10px; background:rgba(12,17,24,.85); } .ll-coa-viewer__batch--vial{ border-color:var(--line-lime,rgba(167,210,45,.30)); background:rgba(167,210,45,.07); } .ll-coa-viewer__batch dt{ margin:0; display:flex; align-items:center; gap:6px; font:800 8.5px/1 var(--display,Montserrat); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2,#8A939D); white-space:nowrap; } .ll-coa-viewer__batch dd{ margin:0; font:700 12.5px/1.2 var(--sans,Inter); color:#fff; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; } .ll-coa-viewer__batch-tag{ display:inline-flex; padding:3px 6px; border-radius:5px; font:800 8px/1 var(--display,Montserrat); letter-spacing:.1em; text-transform:uppercase; background:rgba(138,147,157,.16); color:var(--muted,#AEB6BF); } .ll-coa-viewer__batch--vial .ll-coa-viewer__batch-tag{ background:linear-gradient(180deg,var(--lime-hot,#C7F33B),var(--lime,#A7D22D)); color:var(--on-lime,#0A0D06); } /* plain-english explainer — shown by JS when the cert carries a supplier COA batch */ .ll-coa-viewer__note{ margin:0; padding:10px 12px; border-left:2px solid var(--lime,#A7D22D); border-radius:0 8px 8px 0; background:rgba(167,210,45,.05); font:500 12px/1.55 var(--sans,Inter); color:var(--muted,#AEB6BF); } .ll-coa-viewer__note[hidden]{ display:none; } .ll-coa-viewer__note b{ color:var(--text,#ECEFE6); font-weight:700; } .ll-coa-viewer__actions{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; margin:0; } .ll-coa-viewer__action{ display:inline-flex; align-items:center; gap:7px; padding:10px 14px; min-height:44px; border-radius:10px; font:800 10px/1 var(--display,Montserrat); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; cursor:pointer; border:1px solid var(--line,#1E2631); background:var(--panel-2,#0F1318); color:#fff; transition:border-color .2s, background .2s, color .2s, filter .2s; } .ll-coa-viewer__action[hidden]{ display:none; } .ll-coa-viewer__action--download{ border-color:transparent; background:linear-gradient(180deg,var(--lime-hot,#C7F33B),var(--lime,#A7D22D)); color:var(--on-lime,#0A0D06); box-shadow:0 10px 26px rgba(167,210,45,.2); } .ll-coa-viewer__action--download:hover{ filter:brightness(1.05); } .ll-coa-viewer__action--verify{ border-color:var(--line-lime,rgba(167,210,45,.30)); background:rgba(167,210,45,.08); color:var(--lime-hot,#C7F33B); } .ll-coa-viewer__action--verify:hover{ background:rgba(167,210,45,.16); } .ll-coa-viewer__action--ghost:hover{ border-color:var(--line-lime,rgba(167,210,45,.30)); color:var(--lime,#A7D22D); } /* the actions are tags — outrank `body.ll-coa-v2 .ll-coa a{color:var(--lime)}` so the lime download pill keeps DARK text (was lime-on-lime, unreadable) */ body.ll-coa-v2 .ll-coa a.ll-coa-viewer__action{ color:#fff; } body.ll-coa-v2 .ll-coa a.ll-coa-viewer__action--download{ color:var(--on-lime,#0A0D06); } body.ll-coa-v2 .ll-coa a.ll-coa-viewer__action--verify{ color:var(--lime-hot,#C7F33B); } body.ll-coa-v2 .ll-coa a.ll-coa-viewer__action--ghost:hover{ color:var(--lime,#A7D22D); } .ll-coa-viewer__asset-tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px 0; } .ll-coa-viewer__asset-tabs[hidden]{ display:none; } /* native