7 lines
15 KiB
CSS
7 lines
15 KiB
CSS
:root{--ink:#142434;--muted:#687788;--line:#e8edf0;--green:#18b88d;--green-dark:#079778;--green-soft:#eaf8f5;--blue:#2d7cf4;--purple:#9459ee;--orange:#fb922f;--red:#fb5d6e;--teal:#00a795;--page:#f6f9fa;--shadow:0 8px 24px rgba(18,44,55,.06)}*{box-sizing:border-box}body{margin:0;background:#f1f5f5;color:var(--ink);font-family:Manrope,Inter,system-ui,sans-serif;font-size:14px}.app-shell{max-width:1536px;min-height:100vh;margin:16px auto;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 3px 24px rgba(31,58,68,.08);display:grid;grid-template-columns:322px minmax(0,1fr);grid-template-rows:92px 1fr auto}.topbar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 40px 0 43px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97)}.brand{display:flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}.brand-mark{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#08a283;background:radial-gradient(circle at 65% 25%,#e8fcf0 0 13%,transparent 14%),linear-gradient(135deg,#e1f8f0,#e5f5ec)}.brand-mark svg{width:34px;height:34px;stroke:currentColor;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.brand strong{display:block;font-size:26px;line-height:1.2;letter-spacing:-1px}.brand small{display:block;color:var(--muted);font-size:13px;margin-top:3px}.top-nav{display:flex;align-items:center;gap:34px}.top-nav a,.profile{border:0;background:none;color:var(--ink);text-decoration:none;font:600 14px inherit;display:flex;align-items:center;gap:9px;cursor:pointer}.top-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.icon-button{border:0;background:none;color:var(--ink);cursor:pointer;padding:5px}.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}.profile{gap:10px}.profile>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#dcf7e1;color:#219447;font-size:13px}.profile svg{width:16px}.mobile-menu{display:none}.sidebar{padding:21px 17px 18px 35px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:calc(100vh - 92px)}button{font-family:inherit;cursor:pointer}.create-button{height:53px;border:0;border-radius:10px;background:linear-gradient(135deg,#10aa8b,#1ac3a2);box-shadow:0 7px 16px rgba(24,184,141,.2);color:#fff;font-weight:700;font-size:14px;text-align:left;padding:0 18px}.create-button span{font-size:28px;font-weight:300;vertical-align:-2px;margin-right:10px}.side-nav{margin-top:21px;display:grid;gap:5px}.side-nav a{height:44px;display:flex;align-items:center;gap:12px;padding:0 11px;color:var(--ink);text-decoration:none;border-radius:9px;font-weight:600;font-size:13.5px}.side-nav a.active{color:#059e7f;background:linear-gradient(90deg,#effbf8,#e2f6f2)}.side-nav p{font-size:12px;color:#728091;text-transform:uppercase;font-weight:700;margin:16px 10px 7px;letter-spacing:.3px}.side-nav hr{border:0;border-top:1px solid #eef1f2;margin:13px 2px}.icon{position:relative;display:inline-block;width:28px;height:28px;border-radius:7px;background:#f3f7f7;flex:none}.icon:before,.icon:after{content:"";position:absolute}.icon.home:before{width:13px;height:12px;border:2px solid #12ae8c;border-top:0;left:7px;top:12px;border-radius:1px}.icon.home:after{width:12px;height:12px;border-left:2px solid #12ae8c;border-top:2px solid #12ae8c;transform:rotate(45deg);left:8px;top:5px}.icon.drop:before{width:13px;height:17px;border:2px solid currentColor;border-radius:65% 35% 60% 40%;left:8px;top:5px;transform:rotate(45deg)}.icon.flask:before{width:11px;height:14px;border:2px solid currentColor;border-radius:2px 2px 7px 7px;left:8px;top:9px}.icon.flask:after{width:6px;border-top:2px solid currentColor;left:12px;top:6px}.icon.tubes:before{width:4px;height:20px;border:2px solid currentColor;border-top:0;left:6px;top:5px;border-radius:0 0 4px 4px;box-shadow:8px 0 0 -2px #f3f7f7,8px 0 0 0 currentColor,16px 0 0 -2px #f3f7f7,16px 0 0 0 currentColor}.icon.tubes:after{width:22px;border-top:2px solid currentColor;left:3px;top:8px}.icon.petri:before{width:19px;height:13px;border:2px solid currentColor;border-radius:50%;left:4px;top:7px}.icon.petri:after{width:15px;border-top:2px solid currentColor;left:6px;top:13px}.icon.bars:before{width:4px;height:10px;border:2px solid currentColor;border-bottom:0;bottom:6px;left:5px;box-shadow:8px -6px 0 -2px #f3f7f7,8px -6px 0 0 currentColor,16px -13px 0 -2px #f3f7f7,16px -13px 0 0 currentColor}.icon.chart:before{width:18px;height:16px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;left:5px;top:5px}.icon.chart:after{width:13px;height:7px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:skewY(-42deg);left:9px;top:11px}.icon.document:before{width:13px;height:17px;border:1.7px solid #677889;border-radius:1px;left:7px;top:5px}.icon.document:after{width:7px;border-top:1.7px solid #677889;left:10px;top:11px;box-shadow:0 4px #677889}.icon.book:before{width:14px;height:17px;border:1.7px solid #677889;border-radius:2px;left:6px;top:5px}.icon.book:after{height:15px;border-left:1.7px solid #677889;left:13px;top:6px}.blue{color:var(--blue)}.purple{color:var(--purple)}.green{color:#1dae80}.orange{color:var(--orange)}.red{color:var(--red)}.teal{color:var(--teal)}.plan-card{margin-top:auto;background:linear-gradient(135deg,#f0f8ff,#f8fbf9);border:1px solid #d5e5f0;border-radius:10px;padding:14px 14px 13px;font-size:12px}.plan-card b{font-size:13px}.plan-card b span{font-weight:500}.plan-card small{display:block;margin-top:3px;color:#526174}.progress{height:4px;background:#d6e8e8;border-radius:99px;margin:11px 0}.progress span{display:block;width:62%;height:100%;background:var(--green);border-radius:inherit}.plan-card button{width:100%;height:35px;border:1px solid #00a47e;background:#fff;color:#009a79;border-radius:8px;font-weight:700;font-size:12px}.main-content{padding:21px 35px 26px;background:linear-gradient(180deg,#fff,#fcfdfd)}.welcome-banner{height:207px;border-radius:14px;overflow:hidden;background:linear-gradient(111deg,#ecfbf8 0%,#effbfb 57%,#e4f5f6);display:flex;align-items:center;justify-content:space-between;padding:30px 38px;position:relative}.welcome-banner:after{content:"";position:absolute;width:310px;height:310px;right:-155px;top:-89px;border-radius:50%;background:rgba(123,210,208,.15)}h1,h2,h3,p{margin-top:0}.welcome-banner h1{font-size:24px;letter-spacing:-.8px;margin-bottom:14px}.welcome-banner p{font-size:15px;line-height:1.6;margin:0}.lab-illustration{position:relative;width:380px;height:170px;transform:scale(.9);transform-origin:right center}.petri-dish{width:159px;height:92px;position:absolute;bottom:27px;left:18px;border:2px solid #78b7c4;border-radius:50%;background:radial-gradient(ellipse at center,#e8f8ed 0 55%,#d4f1ee 56% 62%,transparent 63%);box-shadow:inset 0 -6px 0 rgba(101,187,195,.12),0 5px 0 rgba(77,148,162,.16)}.petri-dish span{position:absolute;width:10px;height:6px;background:#88c929;border-radius:50%;box-shadow:0 0 7px #d0ea6f}.petri-dish span:nth-child(1){left:45px;top:35px}.petri-dish span:nth-child(2){left:78px;top:25px}.petri-dish span:nth-child(3){left:97px;top:51px}.petri-dish span:nth-child(4){left:62px;top:58px}.petri-dish span:nth-child(5){left:112px;top:35px}.petri-dish span:nth-child(6){left:32px;top:49px}.beaker{position:absolute;width:93px;height:132px;left:182px;bottom:8px;border:2px solid #64a9ba;border-radius:12px 12px 28px 28px;clip-path:polygon(32% 0,68% 0,68% 48%,100% 94%,94% 100%,6% 100%,0 94%,32% 48%);background:linear-gradient(180deg,transparent 41%,#a2deb3 42% 82%,#54c77e 83%);filter:drop-shadow(0 4px 1px rgba(66,132,139,.25))}.beaker:before{content:"";position:absolute;width:42px;height:8px;border:2px solid #64a9ba;border-radius:50%;top:-3px;left:23px}.beaker i{position:absolute;width:58px;height:25px;left:18px;bottom:22px;border-top:1px solid #57b77a;border-radius:50%;opacity:.8}.rack{position:absolute;right:6px;bottom:31px;width:98px;height:75px;border-bottom:4px solid #5b8997;border-left:3px solid #5b8997;border-right:3px solid #5b8997;background:linear-gradient(#5b8997,#5b8997) 0 21px/100% 3px no-repeat,linear-gradient(#5b8997,#5b8997) 0 52px/100% 3px no-repeat}.rack b{position:absolute;width:14px;height:45px;bottom:0;border:2px solid #6aa7b5;border-radius:4px 4px 7px 7px;background:linear-gradient(180deg,transparent 42%,#ffc8d5 43%)}.rack b:nth-child(1){left:18px}.rack b:nth-child(2){left:42px;background:linear-gradient(180deg,transparent 42%,#ffb3a3 43%)}.rack b:nth-child(3){left:66px;background:linear-gradient(180deg,transparent 42%,#dbf1ce 43%)}.section{margin-top:19px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:18px;letter-spacing:-.5px;margin:0}.text-button{border:0;background:transparent;color:#00a37f;font-weight:700;font-size:12px}.text-button span,.tips button span{font-size:18px;vertical-align:-1px;margin-left:5px}.tool-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.tool-card{height:247px;border:1px solid #e8edf0;border-radius:13px;padding:19px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:center;background:#fff}.tool-icon{height:60px;display:grid;place-items:center}.tool-card .icon{transform:scale(1.6);background:transparent}.tool-card h3{font-size:14.5px;line-height:1.25;letter-spacing:-.35px;margin:11px 0 8px;min-height:36px}.tool-card p{font-size:11px;line-height:1.48;color:#596778;margin:0 auto}.tool-card button{margin-top:auto;height:38px;border-radius:7px;background:#fff;font-weight:700;font-size:12px}.tool-card.blue button{border:1px solid #b8d5ff;color:#1975ef}.tool-card.purple button{border:1px solid #ddc8ff;color:#8c54e7}.tool-card.green button{border:1px solid #abdeda;color:#11a482}.tool-card.orange button{border:1px solid #ffd2ae;color:#f28929}.tool-card.red button{border:1px solid #ffcbd1;color:#f75568}.tool-card.teal button{border:1px solid #a4dfd9;color:#009c8b}.lower-grid{display:grid;grid-template-columns:minmax(0,1fr) 362px;gap:19px;margin-top:20px}.table-card{border:1px solid #e7edef;border-radius:14px;overflow:hidden}.table-card table{width:100%;border-collapse:collapse;font-size:11px}.table-card th{height:33px;background:#fbfcfc;color:#728092;font-weight:600;text-align:left;padding:0 17px}.table-card td{height:44px;padding:0 17px;border-top:1px solid #edf0f1;white-space:nowrap;color:#344253}.table-card td b{font-weight:600;color:#203044}.tag{display:inline-block;padding:4px 8px;border:1px solid;border-radius:5px;margin-right:4px;font-size:10px;line-height:1}.tag.teal{color:#069e8d;border-color:#c6ebe5;background:#f1fbf9}.tag.red{color:#fa5768;border-color:#ffd7dc;background:#fff7f8}.tag.green{color:#23a563;border-color:#cdeedb;background:#f5fcf7}.tag.orange{color:#f28c2d;border-color:#ffe0bf;background:#fffaf5}.tag.purple{color:#925aed;border-color:#e4d4ff;background:#fbf9ff}.status{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;font-size:9px;font-weight:800;margin-right:5px}.status.done{color:#08a951;border:1px solid #12b75d}.status.draft{color:#3983c3;border:1px solid #74b7ec}.more{border:0;background:transparent;color:#607080;font-size:19px}.tips{border:1px solid #f6dfb8;background:linear-gradient(135deg,#fffdfa,#fffdf9);border-radius:14px;padding:20px 20px 15px}.tips-title{display:flex;align-items:center;gap:12px;margin-bottom:7px}.tips-title span{font-size:24px}.tips h2{font-size:14px;margin:0}.tips article{display:grid;grid-template-columns:36px 1fr;gap:9px;padding:10px 0;border-bottom:1px solid #f3ead8;align-items:center}.tips article i{font-style:normal;font-size:24px;color:#04a58d;text-align:center}.tips article .tip-petri{color:#f99a35;font-size:33px;line-height:1}.tips article p{font-size:11.5px;line-height:1.52;margin:0}.tips button{border:0;background:transparent;padding:12px 0 0;color:#009c78;font-size:11px;font-weight:800}footer{grid-column:2;padding:0 35px 18px;color:#758293;font-size:11px;display:flex;align-items:end;justify-content:space-between}footer div{display:flex;gap:30px}footer a{color:inherit;text-decoration:none}dialog{border:0;border-radius:18px;padding:0;width:min(430px,calc(100% - 30px));box-shadow:0 25px 80px rgba(16,38,48,.26)}dialog::backdrop{background:rgba(10,35,40,.35);backdrop-filter:blur(3px)}dialog form{padding:30px;position:relative}.close{position:absolute;right:15px;top:11px;border:0;background:none;color:#6f7c89;font-size:27px}.modal-icon{width:44px;height:44px;display:grid;place-items:center;background:#e8f8f3;border-radius:12px;font-size:23px}.modal-icon+h2{font-size:22px;margin:15px 0 7px}.modal-icon+h2+p{color:#657588;font-size:13px;line-height:1.5;margin-bottom:21px}dialog label{display:grid;gap:6px;font-size:12px;font-weight:700;margin-top:13px}dialog input{height:41px;border:1px solid #dce5e8;border-radius:8px;padding:0 11px;color:var(--ink);font:13px inherit}.submit{height:42px;width:100%;border:0;background:var(--green);color:#fff;border-radius:8px;margin-top:21px;font-weight:800}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#193c37;color:#fff;border-radius:9px;padding:12px 17px;font-size:13px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 9px 30px rgba(0,0,0,.18)}.toast.show{opacity:1;transform:translate(-50%,0)}
|
|
@media(max-width:1250px){.app-shell{margin:0;border-radius:0}.topbar{padding:0 25px}.sidebar{padding-left:19px}.main-content{padding:20px}.tool-grid{grid-template-columns:repeat(3,1fr)}.lower-grid{grid-template-columns:1fr}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.tips-title{grid-column:1/-1}.tips article{border:0;padding:0}.tips button{grid-column:1/-1;padding:0}footer{padding:0 20px 18px}}
|
|
@media(max-width:820px){.app-shell{display:block}.topbar{height:74px;padding:0 18px}.brand-mark{width:42px;height:42px}.brand strong{font-size:19px}.brand small{font-size:10px}.top-nav{display:none}.mobile-menu{display:grid;gap:4px;border:0;background:none}.mobile-menu span{display:block;width:21px;border-top:2px solid var(--ink)}.sidebar{display:none}.main-content{padding:15px}.welcome-banner{height:190px;padding:25px;border-radius:12px}.welcome-banner h1{font-size:20px}.welcome-banner p{font-size:13px}.lab-illustration{position:absolute;opacity:.45;right:-70px;bottom:-4px;transform:scale(.75)}.tool-grid{grid-template-columns:repeat(2,1fr)}.lower-grid{display:block}.recent{margin-bottom:18px}.tips{display:block}.tips article{border-bottom:1px solid #f3ead8;padding:10px 0}.table-card{overflow:auto}.table-card table{min-width:710px}footer{display:block;padding:5px 18px 18px;font-size:10px}footer div{margin-top:8px;gap:13px;flex-wrap:wrap}}
|
|
@media(max-width:450px){.tool-card{height:228px;padding:14px 10px}.tool-card h3{font-size:13px}.tool-card p{font-size:10px}.section-heading h2{font-size:16px}.text-button{font-size:10px}.welcome-banner p br{display:none}}
|
|
/* Works without fetching external font assets. */
|
|
body{font-family:Inter,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
|