/* ============================================================================= PK Pharma Solutions — R&D Intelligence Platform Island shell (CambOS/Benefit) re-skinned to the espa.pkarampetsos.com brand: near-black dark theme, lime-green accent (#CDFA8A), layered dark glass. Tokens lifted 1:1 from espa.pkarampetsos.com's :root. ========================================================================== */ :root{ --bg:hsl(240 15% 3%); --bg-2:hsl(240 14% 4.5%); --surface:hsl(240 12% 7.5%); --surface-2:hsl(240 12% 10%); --surface-3:hsl(240 11% 13%); --glass:hsla(240 14% 9% / 0.55); --glass-strong:hsla(240 16% 11% / 0.72); --line:hsla(0 0% 100% / 0.07); --line-2:hsla(0 0% 100% / 0.10); --line-strong:hsla(0 0% 100% / 0.14); --accent:#CDFA8A; --accent-ink:#0c1207; --accent-soft:hsla(86 92% 76% / 0.14); --accent-line:hsla(86 92% 76% / 0.30); --accent-glow:hsla(86 92% 76% / 0.20); --text:hsl(60 9% 96%); --text-2:hsl(240 8% 72%); --text-3:hsl(240 7% 52%); --text-faint:hsl(240 7% 38%); --ok:#9fe6b0; --ok-bg:rgba(140,224,163,0.13); --warn:#f5c462; --warn-bg:rgba(245,196,98,0.13); --bad:#f0908f; --bad-bg:rgba(240,138,138,0.13); --glass-shadow:0 8px 34px rgba(0,0,0,0.45); --shadow-card:0 16px 40px rgba(0,0,0,0.5); --radius:16px; --rail:72px; --rail-open:248px; font-synthesis:none; } /* Light theme — toggled via [data-theme="light"] on */ [data-theme="light"]{ --bg:#EEF1EA; --bg-2:#FFFFFF; --surface:#FFFFFF; --surface-2:#F2F5EC; --surface-3:#E7ECDD; --glass:rgba(255,255,255,0.72); --glass-strong:rgba(255,255,255,0.82); --glass-shadow:0 8px 30px rgba(30,40,15,0.10); --shadow-card:0 16px 36px rgba(30,40,15,0.13); --line:rgba(20,30,10,0.09); --line-2:rgba(20,30,10,0.13); --line-strong:rgba(20,30,10,0.20); --accent:#5d9e16; --accent-ink:#ffffff; --accent-soft:rgba(93,158,22,0.13); --accent-line:rgba(93,158,22,0.32); --accent-glow:rgba(93,158,22,0.18); --text:#1a2310; --text-2:#46503c; --text-3:#727c66; --text-faint:#9aa48d; --ok:#1f7a3d; --ok-bg:rgba(31,122,61,0.12); --warn:#946400; --warn-bg:rgba(245,196,98,0.20); --bad:#b32a2a; --bad-bg:rgba(179,42,42,0.10); } *{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;} body{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif; color:var(--text);background:var(--bg); font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .mono{font-family:'JetBrains Mono',ui-monospace,monospace;} a{color:inherit;} button{font-family:inherit;cursor:pointer;} ::selection{background:var(--accent-soft);} /* ---- mesh stage: near-black with faint green/blue glows ------------------ */ .stage{ position:fixed;inset:0;display:flex;overflow:hidden;padding:12px; background: radial-gradient(at 0% 0%, hsla(86,80%,55%,0.10) 0px, transparent 46%), radial-gradient(at 100% 0%, hsla(220,70%,55%,0.07) 0px, transparent 48%), radial-gradient(at 100% 100%,hsla(86,80%,55%,0.07) 0px, transparent 46%), radial-gradient(at 0% 100%, hsla(220,70%,55%,0.06) 0px, transparent 48%); background-color:var(--bg); } /* ---- dark glass --------------------------------------------------------- */ .glass{ background:var(--glass); backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%); border:1px solid var(--line-2); box-shadow:var(--glass-shadow); } /* =========================================================================== SIDEBAR ISLAND — hover to expand ======================================================================== */ .sidebar{ flex:none;width:var(--rail);border-radius:var(--radius); display:flex;flex-direction:column;overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1);z-index:40; } .sidebar:hover{width:var(--rail-open);} .sidebar .lbl{overflow:hidden;white-space:nowrap;max-width:0;opacity:0; transition:max-width .3s cubic-bezier(.4,0,.2,1),opacity .25s ease;} .sidebar:hover .lbl{max-width:180px;opacity:1;} .brand{display:flex;align-items:center;height:74px;padding:0 13px;flex:none;text-decoration:none;} .brand .mark{ width:44px;height:44px;flex:none;border-radius:12px; display:flex;align-items:center;justify-content:center; background:var(--surface-2);border:1px solid var(--accent-line); color:var(--accent);font-weight:700;font-size:15px;letter-spacing:.02em; box-shadow:0 0 18px var(--accent-glow); } .brand .who{padding-left:10px;overflow:hidden;max-width:0;transition:max-width .3s cubic-bezier(.4,0,.2,1);} .sidebar:hover .brand .who{max-width:175px;} .brand .who .lbl{display:block;} .brand .pname{font-weight:700;font-size:14px;color:var(--text);letter-spacing:-.01em;line-height:1.25;} .brand .pvendor{font-size:11px;color:var(--text-3);line-height:1.3;} .nav{display:flex;flex-direction:column;gap:3px;padding:6px 13px;flex:1;} .navitem{display:flex;align-items:center;border-radius:12px;color:var(--text-2);text-decoration:none; transition:background .15s,color .15s;border:1px solid transparent;overflow:hidden;} .navitem:hover{background:var(--surface);color:var(--text);} .navitem.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);} .navitem .ic{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;} .navitem .ic svg{width:18px;height:18px;} .navitem .txt{padding-left:2px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:7px;} .navitem .tag{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.05em;padding:2px 6px;border-radius:5px;text-transform:uppercase;font-weight:500;} .tag.live{background:var(--accent-soft);color:var(--accent);} .tag.soon{background:var(--surface-2);color:var(--text-3);} .side-foot{padding:10px 13px 14px;flex:none;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;} .foot-btn{display:flex;align-items:center;width:100%;border-radius:12px;color:var(--text-2);background:transparent;border:none;transition:background .15s,color .15s;overflow:hidden;} .foot-btn:hover{background:var(--surface);color:var(--text);} .foot-btn .ic{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;} .foot-btn .ic .cur{font-family:'JetBrains Mono',monospace;color:var(--accent);} .foot-btn .ic svg{width:18px;height:18px;} .foot-btn .txt{font-size:13px;font-weight:500;padding-left:2px;} /* =========================================================================== CONTENT ISLAND ======================================================================== */ .content{flex:1;min-width:0;margin-left:12px;border-radius:var(--radius);overflow-y:auto;position:relative;} .view{padding:38px clamp(22px,5vw,56px) 64px;max-width:1080px;margin:0 auto;animation:fade .35s ease;} @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} .phead{margin-bottom:26px;} .eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .eyebrow .pill{padding:3px 9px;border-radius:20px;font-size:9.5px;letter-spacing:.06em;} .pill.live{background:var(--accent-soft);color:var(--accent);} .pill.soon{background:var(--warn-bg);color:var(--warn);} h1{font-size:clamp(24px,3.4vw,33px);font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.12;} .sub{color:var(--text-2);font-size:15.5px;margin-top:10px;max-width:660px;} /* ---- overview ---- */ .hero{margin-bottom:34px;} .hero h1{max-width:720px;} .hero .sub{font-size:16.5px;} .modgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:34px;} .modcard{display:flex;flex-direction:column;text-decoration:none;background:var(--surface);border:1px solid var(--line-2); border-radius:14px;padding:20px 20px 18px;transition:.18s;position:relative;overflow:hidden;} .modcard:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow-card),0 0 0 1px var(--accent-line);} .modcard .micon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--accent);margin-bottom:14px;} .modcard .micon svg{width:21px;height:21px;} .modcard .mh{display:flex;align-items:center;gap:9px;margin-bottom:6px;} .modcard h3{font-size:16.5px;font-weight:650;color:var(--text);letter-spacing:-.01em;} .modcard p{font-size:13.5px;color:var(--text-2);line-height:1.5;} .modcard .badge{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:6px;font-weight:500;} .modcard .go{margin-top:13px;font-size:12.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:5px;} .badge.live{background:var(--accent-soft);color:var(--accent);} .badge.p1{background:var(--surface-3);color:var(--text-2);} .badge.p2{background:var(--warn-bg);color:var(--warn);} .badge.p3{background:var(--surface-2);color:var(--text-3);} .trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;margin-bottom:10px;} .trust .t{background:var(--surface);padding:18px;} .trust .t .ti{color:var(--accent);margin-bottom:9px;}.trust .t .ti svg{width:19px;height:19px;} .trust .t h4{font-size:13.5px;color:var(--text);font-weight:650;margin-bottom:4px;} .trust .t p{font-size:12px;color:var(--text-2);line-height:1.45;} /* =========================================================================== PATENTS module (live) ======================================================================== */ .search{display:flex;gap:10px;align-items:center;margin-top:4px;} .search input{flex:1;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;color:var(--text);font-family:inherit;font-size:16px;padding:14px 16px;outline:none;transition:border-color .15s,box-shadow .15s;} .search input:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);} .search input::placeholder{color:var(--text-3);} .btn{background:var(--accent);color:var(--accent-ink);border:none;font-weight:650;font-size:15px;padding:14px 26px;border-radius:11px;white-space:nowrap;transition:filter .15s,transform .1s;box-shadow:0 0 22px var(--accent-glow);} .btn:hover{filter:brightness(1.08);}.btn:active{transform:translateY(1px);}.btn:disabled{opacity:.45;cursor:default;box-shadow:none;} .chips{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap;align-items:center;} .chips .clbl{font-size:13px;color:var(--text-3);} .chip{background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);font-size:13px;padding:6px 13px;border-radius:8px;cursor:pointer;transition:.15s;} .chip:hover{border-color:var(--accent-line);color:var(--accent);} .steps{margin-top:26px;display:none;}.steps.on{display:block;} .step{display:flex;align-items:center;gap:11px;padding:7px 0;color:var(--text-3);font-size:14px;} .step.done{color:var(--text);} .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none;} .step.show .dot{background:var(--accent);}.step.done .dot{background:var(--ok);} .results{margin-top:30px;display:none;}.results.on{display:block;animation:fade .35s ease;} .molhead{font-size:23px;font-weight:700;color:var(--text);letter-spacing:-.01em;} .molsub{color:var(--text-2);font-size:14px;margin-bottom:18px;}.molsub .mono{color:var(--text-3);} .resolved{font-size:12.5px;color:var(--accent);background:var(--accent-soft);border-radius:7px;padding:7px 12px;margin-bottom:14px;display:inline-block;} .verdict{border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:10px;background:var(--surface);padding:15px 18px;margin-bottom:14px;} .verdict.open{border-left-color:var(--ok);} .verdict .vh{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px;} .verdict .vt{font-size:16px;font-weight:600;color:var(--text);line-height:1.4;} .stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:18px;background:var(--line);gap:1px;} .stat{padding:15px 16px;background:var(--surface);} .stat .n{font-size:27px;font-weight:700;line-height:1;color:var(--text);} .stat .l{font-size:11.5px;color:var(--text-2);margin-top:7px;line-height:1.3;} .stat.warn .n{color:var(--warn);}.stat.ok .n{color:var(--ok);}.stat.accent .n{color:var(--accent);} .section{margin-bottom:26px;} .section h2{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);font-family:'JetBrains Mono',monospace;font-weight:500;margin-bottom:11px;} .section h2 .pri{color:var(--accent);} details.secondary{border:1px solid var(--line-2);border-radius:10px;padding:0 14px;margin-bottom:24px;background:var(--surface);} details.secondary>summary{cursor:pointer;padding:13px 0;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);font-weight:500;list-style:none;} details.secondary>summary::-webkit-details-marker{display:none;} details.secondary>summary::before{content:"▸ ";color:var(--text-3);} details.secondary[open]>summary::before{content:"▾ ";} table{width:100%;border-collapse:collapse;font-size:13.5px;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--surface);} th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);background:var(--surface-3);font-weight:500;padding:10px 13px;} td{padding:9px 13px;border-top:1px solid var(--line);vertical-align:middle;color:var(--text);} tr:nth-child(even) td{background:var(--surface-2);} td.pn{font-family:'JetBrains Mono',monospace;font-weight:500;color:var(--accent);white-space:nowrap;} .badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:5px;font-weight:500;white-space:nowrap;} .badge.tip{cursor:help;text-decoration:underline dotted;text-underline-offset:2px;} .badge.barrier{background:var(--warn-bg);color:var(--warn);} .badge.gone{background:var(--ok-bg);color:var(--ok);} .badge.unk{background:var(--surface-3);color:var(--text-3);} .badge.live{background:var(--warn-bg);color:var(--warn);} .badge.exp{background:var(--ok-bg);color:var(--ok);} .ww{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;gap:1px;background:var(--line);} .ww .stat{border:none;} .jchips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;} .jchip{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--surface);border:1px solid var(--line-2);color:var(--text-2);padding:3px 9px;border-radius:5px;} .bytype{color:var(--text-3);font-size:12.5px;margin-top:11px;line-height:1.5;} .region{display:flex;gap:9px;align-items:baseline;margin-top:9px;flex-wrap:wrap;} .region .rl{font-size:12px;color:var(--text-3);min-width:150px;} .progress{font-size:13.5px;color:var(--text-2);margin-bottom:8px;} .pbar{height:6px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin-bottom:16px;} .pbar>div{height:100%;background:var(--accent);transition:width .3s;} .report-btn a{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--accent-line);color:var(--accent);text-decoration:none;font-weight:600;font-size:14px;padding:11px 18px;border-radius:10px;transition:.15s;} .report-btn a:hover{background:var(--accent-soft);} .limits{background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:13px 16px;margin-bottom:24px;font-size:12.5px;color:var(--text-2);line-height:1.55;} .limits b{color:var(--text);} .err{background:var(--bad-bg);border:1px solid rgba(240,138,138,0.3);color:var(--bad);padding:13px 17px;border-radius:10px;margin-top:22px;font-size:14px;} .foot{margin-top:46px;padding-top:18px;border-top:1px solid var(--line);} .foot .src{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-3);letter-spacing:.02em;} /* =========================================================================== PREVIEW modules ======================================================================== */ .preview-ribbon{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;color:var(--warn);background:var(--warn-bg);border:1px solid rgba(245,196,98,0.25);padding:7px 13px;border-radius:9px;margin-bottom:20px;} .preview-ribbon .d{width:7px;height:7px;border-radius:50%;background:var(--warn);} .demo-input{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;} .demo-input .field{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;padding:12px 15px;color:var(--text-2);font-size:14px;display:flex;align-items:center;gap:9px;} .demo-input .field .k{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-3);} .demo-input .field .v{color:var(--text);font-weight:500;} .uploadzone{border:1.5px dashed var(--line-strong);border-radius:12px;padding:26px;text-align:center;color:var(--text-3);background:var(--surface);margin-bottom:18px;} .uploadzone svg{width:26px;height:26px;color:var(--accent);margin-bottom:8px;} .uploadzone .f{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--text);margin-top:6px;background:var(--surface-3);display:inline-block;padding:5px 11px;border-radius:7px;} .verdict-row{display:flex;gap:1px;background:var(--line);border:1px solid var(--line-2);border-radius:10px;overflow:hidden;margin-bottom:18px;} .verdict-row .v{flex:1;background:var(--surface);padding:14px;text-align:center;} .verdict-row .v .n{font-size:24px;font-weight:700;line-height:1;color:var(--text);} .verdict-row .v .l{font-size:11px;color:var(--text-2);margin-top:6px;} .verdict-row .v.ok .n{color:var(--ok);}.verdict-row .v.warn .n{color:var(--warn);}.verdict-row .v.dim .n{color:var(--text-3);}.verdict-row .v.accent .n{color:var(--accent);} .flag{display:flex;gap:12px;align-items:flex-start;background:var(--warn-bg);border:1px solid rgba(245,196,98,0.25);border-radius:10px;padding:14px 16px;margin-bottom:18px;} .flag svg{width:20px;height:20px;color:var(--warn);flex:none;margin-top:1px;} .flag .ft{font-size:13.5px;color:var(--text);line-height:1.5;} .flag .ft b{color:var(--text);} td.mono{font-family:'JetBrains Mono',monospace;font-size:12.5px;} .disclaimer{font-size:12px;color:var(--text-3);font-style:italic;margin-top:18px;line-height:1.5;} /* =========================================================================== Responsive ======================================================================== */ @media(max-width:820px){ .modgrid{grid-template-columns:1fr;} .trust{grid-template-columns:repeat(2,1fr);} .stats{grid-template-columns:repeat(2,1fr);} .ww{grid-template-columns:1fr;} } @media(max-width:560px){ .stage{padding:8px;} .sidebar{position:fixed;bottom:8px;left:8px;right:8px;top:auto;width:auto !important;height:60px;flex-direction:row;} .sidebar:hover{width:auto;} .sidebar .lbl{display:none;} .brand,.side-foot{display:none;} .nav{flex-direction:row;justify-content:space-around;padding:0;align-items:center;} .navitem .txt{display:none;} .content{margin-left:0;margin-bottom:68px;} .view{padding:24px 16px 40px;} .verdict-row,.trust{grid-template-columns:1fr;} } /* =========================================================================== Module inputs (live modules: compliance / hplc / ivivc) + logo ======================================================================== */ .brand .mark svg{width:23px;height:23px;display:block;} textarea{width:100%;min-height:150px;background:var(--surface);border:1px solid var(--line-2);border-radius:11px;color:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px;line-height:1.7;padding:13px 15px;outline:none;resize:vertical;transition:border-color .15s,box-shadow .15s;} textarea:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);} .btnrow{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;} .btn.ghost{background:transparent;color:var(--text-2);border:1px solid var(--line-2);box-shadow:none;} .btn.ghost:hover{background:var(--surface);filter:none;color:var(--text);} .formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .fld{display:flex;flex-direction:column;gap:6px;} .fld>span{font-size:11px;color:var(--text-3);font-family:'JetBrains Mono',monospace;letter-spacing:.04em;text-transform:uppercase;} .fld input,.fld select{width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;color:var(--text);font-family:inherit;font-size:14px;padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s;} .fld input:focus,.fld select:focus{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft);} .fld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A93A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .65rem center;background-size:15px;padding-right:2rem;} .fld option{background:var(--surface-2);color:var(--text);} .badge.bad{background:var(--bad-bg);color:var(--bad);} .upload-btn{display:inline-flex;align-items:center;cursor:pointer;} .upstatus{font-size:12.5px;color:var(--text-3);margin-top:10px;min-height:1px;} .upstatus.on{color:var(--accent);} .upstatus.err{color:var(--bad);} @media(max-width:700px){.formgrid{grid-template-columns:1fr;}}