web/design.css

/* Peptara Labs visual system. Decorative motion is independent of calculation. */
:root{--design-gold:#c9a96e;--design-gold-light:#ead7b1;--design-charcoal:#1c1c1e;--design-shadow:0 20px 50px -30px #55432955,0 2px 7px #55432908;--design-surface:linear-gradient(145deg,#ffffff 0%,#fdfbf8 70%,#f4eee4 100%);--design-hairline:#ffffffd6}
body{background:radial-gradient(ellipse at 88% 8%,#d9bd8323,transparent 33%),radial-gradient(ellipse at 0 46%,#e7d9c222,transparent 40%),#faf8f5}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:linear-gradient(#80613404 1px,transparent 1px),linear-gradient(90deg,#80613404 1px,transparent 1px);background-size:44px 44px}
.app{max-width:1200px;padding:27px 44px 30px;position:relative}
.topbar{padding-bottom:18px;border-bottom-color:#b49a712e;gap:20px}
.brand-lockup{display:flex;align-items:center;gap:13px;min-width:0}
.brand-logo{display:block;width:76px;height:76px;object-fit:contain;background:#fff;border:1px solid #ded5c4;border-radius:15px;box-shadow:0 7px 16px -11px #4d3b22b3}
.brand-label{color:var(--muted);font-size:9px;letter-spacing:.18em;font-weight:650;line-height:1.7;max-width:80px}
.topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.preview-badge{font-size:10px;background:#ffffff6b;border-color:#c9a96e55;letter-spacing:.025em;padding:8px 12px}
.motion-toggle{appearance:none;border:0;background:transparent;min-height:36px;padding:7px 0;color:var(--muted);font-size:10px;text-decoration:underline;text-decoration-color:#bda88480;text-underline-offset:4px}
.motion-toggle:hover{color:var(--ink)}
.intro{display:grid;grid-template-columns:minmax(0,1.36fr) minmax(0,.84fr);align-items:center;gap:18px;padding:39px 0 43px;isolation:isolate}
.intro-copy{min-width:0;position:relative;z-index:2;animation:design-enter .7s ease-out both}
.intro .eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;margin-bottom:18px;color:#8b6837}
h1{font-size:clamp(34px,4.55vw,54px);font-weight:560;line-height:1.075;letter-spacing:-2.55px;text-wrap:balance}
h1 span{display:inline-block;color:#9c7840;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-1.8px;line-height:1.15}
.byline{font-size:13px;margin-top:15px;letter-spacing:.02em}.byline strong{font-weight:650}
.compatibility{margin-top:23px}
.lede{font-size:13px;line-height:1.75;margin-top:17px;max-width:380px}
.hero-stage{height:335px;min-width:0;position:relative;perspective:900px;isolation:isolate;animation:design-enter 1s .06s ease-out both}
.hero-stage::before{content:"";position:absolute;inset:4% -2% 0;background:radial-gradient(ellipse at 51% 45%,#d9bb7d4a 0%,#d9bb7d15 41%,transparent 70%);border-radius:50%;z-index:-2}
.hero-stage::after{content:"";position:absolute;width:170px;height:30px;left:50%;bottom:52px;transform:translateX(-50%);border-radius:50%;background:#4f391a25;filter:blur(12px);z-index:-1}
.hero-orbit{position:absolute;left:50%;top:44%;border:1px solid #c9a96e70;border-radius:50%;width:300px;height:300px;pointer-events:none;z-index:-1;transform-style:preserve-3d}
.orbit-one{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-30deg);animation:design-orbit 24s linear infinite}
.orbit-two{width:261px;height:261px;opacity:.35;transform:translate(-50%,-50%) rotateX(60deg) rotateY(41deg) rotateZ(18deg)}
.orbit-one::after{content:"";position:absolute;left:40px;top:35px;width:7px;height:7px;border-radius:50%;background:#c9a96e;box-shadow:0 0 0 5px #c9a96e13,0 0 15px #c9a96e55}
.hero-pedestal{position:absolute;left:50%;bottom:54px;width:214px;height:67px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg,#fefbf4 4%,#ece2d0 12%,#b9a783 15%,#e6d9c0 23%,#b8a381 55%,#7f6b4e 100%);box-shadow:inset 0 1px 1px #fff,0 20px 25px -18px #3526119c;z-index:0}
.hero-pedestal::before{content:"";position:absolute;inset:0 0 21px;border-radius:50%;border:1px solid #ddcdafff;background:radial-gradient(ellipse at 35% 28%,#fffdf9 5%,#e9deca 60%,#c7b58d 100%)}
.hero-vial{position:absolute;left:50%;top:20px;width:126px;height:228px;transform:translateX(-50%) rotate(-9deg) rotateY(-15deg);transform-style:preserve-3d;filter:drop-shadow(12px 14px 10px #4c391730);animation:design-float 7s ease-in-out infinite;z-index:2}
.vial-cap{position:absolute;top:0;left:8px;width:110px;height:41px;border-radius:20px 20px 8px 8px;background:repeating-linear-gradient(90deg,transparent 0 5px,#ffffff18 5px 6px,#16151123 7px 8px),linear-gradient(90deg,#65543a 0%,#b59a68 8%,#ead6a7 26%,#b2915c 53%,#6d583b 83%,#b89c6e 95%,#8c724a 100%);border:1px solid #82704f;box-shadow:inset 0 -3px 3px #34271740,0 2px 1px #1a151136;z-index:4}
.vial-cap::before{content:"";position:absolute;left:-1px;right:-1px;top:-5px;height:15px;border-radius:50%;border:1px solid #bfaa7e;background:radial-gradient(ellipse at 39% 32%,#e7d6b2,#b69c6b 55%,#7b6240 100%);box-shadow:inset 0 2px 3px #ffffff40}
.vial-cap::after{content:"";position:absolute;left:28px;right:28px;top:-1px;height:7px;border-radius:50%;background:#1c1c1e;box-shadow:0 1px 2px #ecddb080,inset 0 2px 2px #000}
.vial-neck{position:absolute;top:31px;left:22px;width:82px;height:31px;background:linear-gradient(90deg,#96877388,#fdfbf3bb 19%,#dbcfb244 45%,#a392764f 80%,#ede3ce99);border:1px solid #cabda280;border-radius:0 0 14px 14px;z-index:2}
.vial-body{position:absolute;left:0;right:0;top:48px;bottom:0;overflow:hidden;border-radius:32px 32px 23px 23px;border:1px solid #d5c7a7;background:linear-gradient(90deg,#ad9a7940 0%,#fffdf5bb 9%,#ffffff9c 20%,#ffffff24 35%,#e0d2b530 59%,#927d5c55 90%,#e8dfc590 100%),linear-gradient(180deg,#fdfaf173 0%,#ecdfc532 45%,#c8b38838 100%);box-shadow:inset 2px 0 2px #fff8, inset -3px 0 4px #5c48251f,inset 0 -7px 7px #b7a17a36}
.vial-body::before{content:"";position:absolute;inset:9px 9px auto;height:19px;border-radius:50%;border-top:1px solid #fff8}
.vial-highlight{position:absolute;top:17px;bottom:23px;left:9px;width:9px;border-radius:50%;background:linear-gradient(180deg,#fff0,#fffc 18%,#fff8 69%,#fff0);filter:blur(1px)}
.vial-label{position:absolute;left:5px;right:5px;top:47px;height:96px;display:grid;place-items:center;background:linear-gradient(90deg,#e6e2d9,#fff 22%,#fff 69%,#eee9de);border-top:1px solid #fefbf1;border-bottom:1px solid #c6bda980;box-shadow:0 1px 2px #45351c18}
.brand-logo-vial{display:block;width:82px;height:82px;object-fit:contain;background:#fff;border-radius:2px}
.vial-base{position:absolute;bottom:4px;left:10px;right:10px;height:12px;border-bottom:2px solid #9f8a6070;border-radius:50%;background:linear-gradient(180deg,transparent,#fff7)}
.hero-caption{position:absolute;bottom:0;left:0;right:0;text-align:center;line-height:1.8;color:var(--muted)}
.hero-caption strong{display:block;font-size:9px;font-weight:650;letter-spacing:.19em;color:#947243}.hero-caption span{font-family:Georgia,"Times New Roman",serif;font-size:16px;font-style:italic}
.workspace{gap:22px;position:relative;z-index:3;animation:design-enter .8s .14s ease-out both}
.entry-card,.result-card{border-radius:23px;padding:29px;box-shadow:var(--design-shadow);position:relative}
.entry-card{background:var(--design-surface);border-color:#d9cdbb;box-shadow:inset 0 1px 0 #fff,var(--design-shadow)}
.section-heading{margin-bottom:28px}.section-heading h2{font-size:15px;font-weight:650;letter-spacing:-.2px}.step{border:1px solid #c9a96e33;background:#f3eadb;color:#8d6b38;padding:6px 7px;border-radius:7px;font-size:10px}
.input-wrap{border-color:#d4c7b1;background:#ffffffd6;border-radius:11px;box-shadow:0 2px 3px #55432905,inset 0 1px 1px #7b603409;min-height:58px}
.input-wrap:focus-within{box-shadow:0 0 0 3px #c9a96e25;border-color:#ad8849}
input{font-variant-numeric:tabular-nums;font-size:23px;padding:14px 16px}
.input-wrap select,.syringe-type{color-scheme:light;color:#1c1c1e;background-color:#f1eade}select option{color:#1c1c1e;background-color:#faf8f5}
.syringe-type{min-height:44px;border-color:#d7cbb7;border-radius:9px}
.capacity-option{background:linear-gradient(145deg,#fff,#faf7f0);border-color:#e0d5c3;padding-top:15px;padding-bottom:15px;box-shadow:0 2px 3px #55432905;transition:box-shadow .18s,border-color .18s,background .18s}
.capacity-option:hover{border-color:#ad8849;box-shadow:0 3px 10px #a8854320}
.capacity-option:has(input:checked){background:linear-gradient(145deg,#f5eddb,#eadcc0);border-color:#af8d54;box-shadow:inset 0 1px 0 #fffc,inset 0 0 0 1px #af8d54}
.primary{min-height:50px;border:1px solid #b79558;background:linear-gradient(110deg,#d6b77d,#c6a364);box-shadow:inset 0 1px 0 #fff6,0 6px 12px -8px #7e5d22a6;border-radius:10px;transition:transform .18s,box-shadow .18s,background .18s}
.primary:hover{background:linear-gradient(110deg,#dfc58f,#cfad6b);box-shadow:inset 0 1px 0 #fff6,0 8px 15px -8px #7e5d2277;transform:translateY(-1px)}
.primary:active{transform:translateY(0)}
.result-card{background:radial-gradient(ellipse at 95% 0,#8e713333,transparent 52%),linear-gradient(145deg,#27272a,#1c1c1e 55%,#20201e);border-color:#4a4437;box-shadow:inset 0 1px 0 #ffffff12,0 20px 42px -27px #1c1c1e9c;overflow:hidden}
.result-card::before{content:"";position:absolute;width:290px;height:290px;right:-165px;bottom:-112px;border:1px solid #c9a96e13;border-radius:50%;box-shadow:0 0 0 32px #c9a96e04,0 0 0 64px #c9a96e03;pointer-events:none}
.result-card>*{position:relative}.result-card .step{background:#ffffff08;border-color:#c9a96e33;color:#d7b87e}.result-card .section-heading h2{color:#faf8f5}.result-tag{padding:6px 10px;border-color:#c9a96e3d;background:#c9a96e08;color:#dbc38f}
.fraction{font-size:30px;line-height:1.8;width:184px;color:#ddc99e}.empty-result p{font-size:16px;letter-spacing:-.2px}.empty-result>span{color:#bfb6a6}
.primary-result output{font-weight:520;letter-spacing:-2px;text-shadow:0 1px 12px #e2cb8b08}.formula-box{background:#ffffff05;border-color:#c9a96e36;box-shadow:inset 0 1px 0 #ffffff05}.result-footnote{border-top-color:#c9a96e24;color:#c2b8a6}
.equipment-card{background:var(--design-surface);border-color:#d9cdbb;border-radius:23px;box-shadow:inset 0 1px 0 #fff,var(--design-shadow);padding:29px;margin-top:11px;margin-bottom:28px}
.equipment-heading h2{font-size:25px;letter-spacing:-.7px;font-weight:550}.equipment-heading .eyebrow{letter-spacing:.14em}.reference-badge{background:#c9a96e0d;border-color:#c9a96e55;padding:8px 11px}
.diagram-object{border-color:#d9cdbb;border-radius:15px;background:var(--paper);box-shadow:0 7px 15px -12px #6b513155}.diagram-art{background:radial-gradient(ellipse at 52% 48%,#fdfaf3,#eee5d5);border-bottom:1px solid #dfd3be}.diagram-object figcaption{background:#ffffff54}
.brand-cta{padding:29px 32px;position:relative;overflow:hidden;border-color:#c9a96e6b;border-radius:22px;background:radial-gradient(ellipse at 45% -40%,#fff7e5 10%,transparent 75%),linear-gradient(120deg,#e8dac0,#f1e9db 55%,#e2cfaa);box-shadow:inset 0 1px 0 #fff9,0 10px 28px -22px #66491480}
.brand-cta::before{content:"";position:absolute;left:43%;top:-115px;width:300px;height:300px;border:1px solid #aa875a1c;border-radius:50%;pointer-events:none;box-shadow:0 0 0 24px #aa875a06}
.brand-cta>*{position:relative}.brand-cta h2{font-size:27px;font-weight:550;letter-spacing:-.9px}.cta-links{min-width:239px}.cta-links a{min-height:46px;font-size:12px;transition:transform .18s,background .18s,box-shadow .18s}.cta-main{background:#1c1c1e;box-shadow:0 7px 14px -9px #1c1c1e9e}.cta-main:hover{transform:translateY(-1px);background:#34302a}.cta-secondary{border-color:#b39b72;background:#ffffff20}.cta-secondary:hover{background:#ffffff66}
.status{margin:11px 2px;min-height:16px}.bottom-row{padding:0 2px}.education p{font-size:11px}.education strong{font-size:12px}footer{margin-top:27px;padding-top:20px;line-height:1.5}
body.embedded{background:transparent}body.embedded .app{max-width:1100px;padding:23px}body.embedded .intro{padding-top:29px}
:root[data-theme="dark"]{--design-shadow:0 20px 45px -30px #0009,0 2px 7px #0002;--design-surface:linear-gradient(145deg,#292722,#24221f 72%,#2c271f);--design-hairline:#ffffff14}
:root[data-theme="dark"] body{background:radial-gradient(ellipse at 88% 8%,#9270351f,transparent 33%),#181817}
:root[data-theme="dark"] body::before{background-image:linear-gradient(#c9a96e04 1px,transparent 1px),linear-gradient(90deg,#c9a96e04 1px,transparent 1px)}
:root[data-theme="dark"] .brand-logo{border-color:#6b5b40;box-shadow:0 8px 17px -10px #000b}
:root[data-theme="dark"] .preview-badge{background:#ffffff04;border-color:#c9a96e38}
:root[data-theme="dark"] .intro .eyebrow,:root[data-theme="dark"] h1 span{color:#d0af74}
:root[data-theme="dark"] .hero-stage::before{background:radial-gradient(ellipse at 51% 45%,#c9a96e28,transparent 65%)}
:root[data-theme="dark"] .hero-stage::after{background:#0009}
:root[data-theme="dark"] .hero-pedestal{filter:brightness(.72)}
:root[data-theme="dark"] .hero-vial{filter:drop-shadow(12px 14px 10px #0008)}
:root[data-theme="dark"] .hero-caption strong{color:#c9a96e}
:root[data-theme="dark"] .entry-card,:root[data-theme="dark"] .equipment-card{border-color:#504737;box-shadow:inset 0 1px 0 #ffffff0d,var(--design-shadow)}
:root[data-theme="dark"] .step{background:#c9a96e0d;color:#d2b779;border-color:#c9a96e2b}
:root[data-theme="dark"] .input-wrap{background:#1c1c1b;border-color:#746345;box-shadow:inset 0 1px 2px #0002}
:root[data-theme="dark"] .input-wrap select,:root[data-theme="dark"] .syringe-type{color-scheme:light;color:#1c1c1e;background-color:#e1d0ae;border-color:#746345}
:root[data-theme="dark"] .capacity-option{background:linear-gradient(145deg,#302b23,#24221e);border-color:#69573c;box-shadow:0 2px 3px #0002}
:root[data-theme="dark"] .capacity-option:has(input:checked){background:linear-gradient(145deg,#4a3b26,#352c20);border-color:#c9a96e;box-shadow:inset 0 1px 0 #ffffff12,inset 0 0 0 1px #c9a96e}
:root[data-theme="dark"] .primary{color:#1c1c1e;background:linear-gradient(110deg,#dfc58f,#c7a569)}
:root[data-theme="dark"] .primary:hover{background:linear-gradient(110deg,#ead7b1,#d6b77d)}
:root[data-theme="dark"] .result-card{background:radial-gradient(ellipse at 95% 0,#8e713323,transparent 52%),linear-gradient(145deg,#232325,#161618 68%,#1c1c1b);border-color:#6b5737}
:root[data-theme="dark"] .diagram-object{border-color:#5a4c36;background:#211f1c}.diagram-art{--diagram-gold:#c9a96e}
:root[data-theme="dark"] .diagram-art{background:radial-gradient(ellipse at 52% 48%,#393226,#28251f);border-color:#5a4c36}
:root[data-theme="dark"] .diagram-object figcaption{background:#ffffff02}
:root[data-theme="dark"] .soft-pill{color:#e8d2aa;background:#c9a96e0c;border-color:#c9a96e52}
:root[data-theme="dark"] .brand-cta{background:radial-gradient(ellipse at 45% -40%,#c9a96e18 10%,transparent 75%),linear-gradient(120deg,#342b1e,#2c2821 55%,#3b2f1f);border-color:#a4895559;box-shadow:inset 0 1px 0 #ffffff0a,0 10px 28px -22px #000b}
:root[data-theme="dark"] .cta-main{background:#c9a96e;color:#1c1c1e}.cta-links a:focus-visible{outline-offset:3px}
:root[data-theme="dark"] .cta-main:hover{background:#dfc58f}:root[data-theme="dark"] .cta-secondary{background:#ffffff02;border-color:#ad8d55}:root[data-theme="dark"] .cta-secondary:hover{background:#c9a96e13}
@keyframes design-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes design-float{0%,100%{transform:translateX(-50%) translateY(0) rotate(-9deg) rotateY(-15deg)}50%{transform:translateX(-50%) translateY(-9px) rotate(-6deg) rotateY(-9deg)}}
@keyframes design-orbit{from{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(-30deg)}to{transform:translate(-50%,-50%) rotateX(68deg) rotateZ(330deg)}}
@media(max-width:960px){.app{padding-left:30px;padding-right:30px}.intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:8px}h1{font-size:42px;letter-spacing:-2px}.hero-stage{height:320px}.hero-orbit{width:250px;height:250px}.orbit-two{width:230px;height:230px}.hero-pedestal{width:194px}.entry-card,.result-card{padding:24px}.cta-links{min-width:218px}}
@media(max-width:740px){.app{padding:20px}.brand-logo{width:66px;height:66px;border-radius:13px}.intro{grid-template-columns:minmax(0,1fr);gap:8px;padding:29px 0 30px}.intro-copy{max-width:560px}.intro .eyebrow{margin-bottom:15px}h1{font-size:43px;letter-spacing:-2px;max-width:570px}.compatibility{margin-top:18px}.hero-stage{height:260px;max-width:400px;width:100%;margin:0 auto}.hero-vial{top:11px;width:108px;height:192px}.vial-cap{left:7px;width:94px;height:34px}.vial-cap::before{height:13px}.vial-cap::after{left:23px;right:23px;height:6px}.vial-neck{left:19px;top:27px;width:70px;height:25px}.vial-body{top:40px;border-radius:28px 28px 20px 20px}.vial-label{top:39px;height:79px}.brand-logo-vial{width:70px;height:70px}.hero-pedestal{bottom:35px;width:188px;height:54px}.hero-pedestal::before{bottom:17px}.hero-stage::after{bottom:36px;width:150px}.hero-caption{bottom:-8px}.hero-caption span{font-size:14px}.hero-orbit{width:232px;height:232px;top:42%}.orbit-two{width:205px;height:205px}.workspace{gap:18px}.entry-card,.result-card{padding:23px;border-radius:20px}.equipment-card{padding:23px;border-radius:20px;margin-bottom:22px}.equipment-heading h2{font-size:23px}.brand-cta{padding:24px;gap:22px;border-radius:20px}.brand-cta h2{font-size:25px}.cta-links{min-width:0}.brand-cta::before{left:42%}.primary-result output{font-size:48px}.result-footnote{margin-top:25px}.bottom-row{gap:20px}footer{font-size:9px;gap:12px}.reference-badge{font-size:10px}}
@media(max-width:440px){.topbar{gap:10px;align-items:center}.brand-lockup{gap:9px}.brand-logo{width:59px;height:59px;border-radius:12px}.brand-label{font-size:8px;max-width:60px;letter-spacing:.12em}.topbar-actions{gap:5px;flex-direction:column;align-items:flex-end}.motion-toggle{font-size:9px;min-height:27px;padding:3px 0}.preview-badge{font-size:9px;padding:6px 9px}.intro{padding-top:25px}h1{font-size:36px;letter-spacing:-1.6px;line-height:1.12}.intro .eyebrow{font-size:9px;letter-spacing:.09em}.lede{font-size:12px}.hero-stage{height:240px}.hero-vial{top:3px;height:184px;width:104px}.vial-cap{left:7px;width:90px}.vial-neck{left:18px;width:68px}.vial-label{top:37px;height:77px}.brand-logo-vial{width:68px;height:68px}.hero-pedestal{bottom:28px;width:180px;height:51px}.hero-stage::after{bottom:31px}.hero-caption{bottom:-9px}.hero-orbit{width:222px;height:222px}.orbit-two{width:199px;height:199px}.brand-cta h2{font-size:24px}.brand-cta{padding:22px}.equipment-card{padding:20px}.equipment-heading h2{font-size:22px}.entry-card,.result-card{padding:21px}.section-heading .small-note{font-size:9px}}
@media(max-width:390px){.app,body.embedded .app{padding:16px}.intro{gap:7px}h1{font-size:34px}.entry-card,.result-card{padding:19px}.equipment-card{padding:18px}.equipment-heading h2{font-size:21px}.brand-cta{padding:20px}.input-wrap{min-height:55px}input{font-size:22px;padding:13px}.primary{font-size:11px;padding:12px}.capacity-option>span{font-size:19px}.capacity-option>small{font-size:8px}.capacity-option{padding:13px 4px}.syringe-options{gap:7px}.brand-label{max-width:54px}.reference-badge{font-size:9px}.hero-stage{height:240px}footer{font-size:8px;max-width:100%}footer span:first-child{max-width:64%}}
body[data-motion="paused"] *,body[data-motion="paused"] *::before,body[data-motion="paused"] *::after{animation-play-state:paused!important;transition:none!important}
body[data-motion="paused"] .intro-copy,body[data-motion="paused"] .hero-stage,body[data-motion="paused"] .workspace{animation:none!important;opacity:1;transform:none}
body[data-motion="paused"] .primary:hover,body[data-motion="paused"] .primary:active,body[data-motion="paused"] .cta-main:hover{transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.primary:hover,.primary:active,.cta-main:hover{transform:none}.intro-copy,.hero-stage,.workspace{opacity:1}}
/* Keep the mobile caption clear of the sculpted pedestal. */
@media(max-width:440px){.hero-stage{height:260px}.hero-pedestal{bottom:48px}.hero-stage::after{bottom:51px}}