/* OpenPeptide widget — matches the DosagePeptide design language (cream / slate-blue #3C6076 / Schibsted+IBM Plex). */ :root{ --op-cream:#FAF9F5; --op-ink:#1A2027; --op-ink2:#272D34; --op-muted:#5A636B; --op-teal:#3C6076; --op-teal2:#4E7189; --op-line:#E6EAEE; --op-line2:#EEF1F4; --op-user:#20323f; --op-shadow:0 24px 60px -18px rgba(20,32,45,.45); --op-disp:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --op-body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --op-mono:'IBM Plex Mono',ui-monospace,monospace; } html.op-lock{overflow:hidden} /* ---------- launcher ---------- */ .op-launcher{ position:fixed; right:24px; bottom:24px; z-index:2147483000; display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:12px 18px 12px 15px; border:none; cursor:pointer; font-family:var(--op-disp); font-weight:600; font-size:15px; letter-spacing:.1px; color:#fff; background:linear-gradient(135deg,#4E7189,#3C6076); border-radius:99px; box-shadow:0 14px 30px -10px rgba(60,96,118,.6),0 3px 8px rgba(20,32,45,.18); transition:transform .18s ease,box-shadow .18s ease; } .op-launcher:hover{transform:translateY(-2px); box-shadow:0 20px 38px -10px rgba(60,96,118,.7)} .op-launcher:active{transform:translateY(0)} /* Hello Elementor reset.css paints bare [type=button] magenta (#c36) and ties .op-launcher on specificity; on custom templates (no home.css neutralizer) the reset wins. Pin the launcher with a higher-specificity selector so OpenPeptide's own styling always wins, on every page. */ /* Elementor's kit (.elementor-kit-5 button, 0,1,1) and Hello Elementor's reset ([type=button], 0,1,0) both override our button styling on custom templates. The launcher carries id="op-launcher", so an id selector (1,x,x) beats them all cleanly — no !important needed. */ button#op-launcher,button#op-launcher:hover,button#op-launcher:focus{display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; width:auto; padding:12px 18px 12px 15px; border:0; border-radius:99px; line-height:normal; color:#fff; background:linear-gradient(135deg,#4E7189,#3C6076); font-family:var(--op-disp); font-weight:600; font-size:15px; letter-spacing:.1px; text-transform:none; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:auto} #op-launcher .op-launcher__spark{display:inline-flex; align-items:center; justify-content:center} .op-launcher__spark{display:inline-flex} .op-launcher__spark svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))} /* ---------- drawer ---------- */ .op-drawer{position:fixed; inset:0; z-index:2147483001; visibility:hidden; pointer-events:none} .op-drawer.is-open{visibility:visible; pointer-events:auto} .op-scrim{position:absolute; inset:0; background:rgba(20,32,45,.34); opacity:0; transition:opacity .28s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)} .op-drawer.is-open .op-scrim{opacity:1} .op-panel{ position:absolute; top:0; right:0; height:100%; width:min(444px,100%); display:flex; flex-direction:column; background:var(--op-cream); box-shadow:var(--op-shadow); transform:translateX(102%); transition:transform .34s cubic-bezier(.22,.61,.36,1); font-family:var(--op-body); color:var(--op-ink); /* Hello Elementor reset forces -webkit-font-smoothing:antialiased on of custom templates; it's inherited, so the drawer text renders grayscale (lighter/greyer, slightly thinner) vs the home's subpixel. Pin subpixel here so the panel reads identically dark/dense on every page. */ -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:auto; } .op-drawer.is-open .op-panel{transform:translateX(0)} /* head */ .op-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--op-line); background:#fff} .op-brand{display:flex; align-items:center; gap:9px} .op-brand__mark{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:9px; color:#fff; background:linear-gradient(135deg,#4E7189,#3C6076)} .op-brand__name{font-family:var(--op-disp); font-weight:700; font-size:18px; letter-spacing:-.2px; color:var(--op-ink)} .op-head__actions{display:flex; gap:4px} .op-iconbtn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:none; background:none; color:var(--op-muted); border-radius:8px; cursor:pointer; transition:background .15s,color .15s} .op-iconbtn:hover{background:var(--op-line2); color:var(--op-ink)} /* thread */ .op-thread{flex:1; overflow-y:auto; padding:20px 18px; display:flex; flex-direction:column; gap:16px; scroll-behavior:smooth} .op-greet{padding-top:2px} .op-greet__eyebrow{font-family:var(--op-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--op-teal2); margin:0 0 11px} .op-greet__title{font-family:var(--op-disp); font-weight:700; font-size:21px; line-height:1.24; letter-spacing:-.3px; color:var(--op-ink); margin:0 0 10px; text-wrap:balance} .op-greet__hi{margin:0 0 15px; font-size:15px; line-height:1.62; color:var(--op-ink2)} .op-greet__feats{list-style:none; margin:0; padding:15px 0 2px; border-top:1px solid var(--op-line); display:flex; flex-direction:column; gap:11px} .op-greet__feat{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.45; color:var(--op-ink2)} .op-greet__feat svg{color:var(--op-teal2); flex-shrink:0; margin-top:2px} .op-chips{display:flex; flex-direction:column; gap:8px} .op-chip{text-align:left; padding:11px 14px; border:1px solid var(--op-line); background:#fff; border-radius:12px; font-family:var(--op-body); font-size:14px; color:var(--op-teal); cursor:pointer; transition:border-color .15s,background .15s,transform .1s} .op-chip:hover{border-color:var(--op-teal2); background:#eef3f7} .op-chip:active{transform:scale(.99)} /* --- Neutralize the Elementor kit + theme reset that leak onto the widget's controls on custom-template pages (which don't load home.css). `.elementor-kit-5 button` (0,1,1) injects font-family (Schibsted), font-weight AND border-radius:30px onto EVERY