ouroboros / source /src /petase.css
REXWind's picture
Publish the Ouroboros scientific showcase to CladeTeam
03677d0 verified
Raw History Blame Contribute Delete
9.01 kB
/* Expanded PETase evidence, in the site's paper / forest / terracotta palette. */
.wetlab-outcome{display:flex;align-items:center;gap:26px;padding:24px 28px;border:1px solid var(--line);border-radius:8px;margin-bottom:18px;background:#f0f2e9}
.outcome-intro{flex:1}.outcome-intro>.micro{color:#65715d;font-size:8px}.outcome-intro p{font-size:14px;line-height:1.7;margin-top:6px}.outcome-intro strong{font-weight:600;color:#36564b}
.outcome-dots{display:grid;grid-template-columns:repeat(6,10px);gap:7px}.outcome-dots i{width:10px;height:10px;border-radius:50%;border:1px solid #aeb8a6;background:transparent}.outcome-dots i.active{background:#54745f;border-color:#54745f}
.outcome-counts{display:grid;gap:9px;font-size:10px;color:#667260}.outcome-counts span{display:flex;align-items:center;gap:8px}.outcome-counts i{width:6px;height:6px;border-radius:50%;background:#54745f}.outcome-counts span:last-child i{background:transparent;border:1px solid #94a18b}
.petase-section .wetlab-evidence{grid-template-columns:minmax(290px,.82fr) minmax(0,1.35fr);border-radius:8px;margin-bottom:52px}.petase-section .wetlab-story{padding:34px;display:flex;flex-direction:column;align-items:flex-start;background:radial-gradient(ellipse at 95% 5%,#f7f5e9 0,transparent 65%),#eaf0e5}
.petase-section .wetlab-story h3{font-size:clamp(34px,3.2vw,47px);letter-spacing:-.8px;line-height:1.1;margin:28px 0 18px}.wetlab-fold{margin:33px 0 29px}.wetlab-fold>strong{display:block;font-family:var(--serif);font-size:92px;line-height:1;letter-spacing:-4px;font-weight:400;color:#345647}.wetlab-fold strong em{font-size:65px;margin-left:5px}.wetlab-fold>span{display:block;font-size:12px;line-height:1.7;margin-top:10px;color:#60705b}
.wetlab-comparison{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:18px;border-top:1px solid #cdd7c5;border-bottom:1px solid #cdd7c5;padding:19px 0}.wetlab-comparison>div>span{display:block;font-size:9px;letter-spacing:.9px;margin-bottom:8px;color:#69755f}.wetlab-comparison strong{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.wetlab-comparison small{font-size:10px;font-weight:400;color:#687560}.wetlab-comparison>div:first-child strong{color:var(--coral)}
.petase-section .wetlab-story>.wetlab-selection{font-size:11px;line-height:1.8;margin:18px 0 26px}.wetlab-explore{margin-top:auto;color:#365647;font-size:11px;border-bottom:1px solid #bac9b3;padding:8px 0;gap:15px}
.petase-section .wetlab-chart{padding:30px 28px}.petase-section .wetlab-chart-heading p{font-family:var(--serif);font-size:25px;color:var(--ink);margin-top:8px}.petase-section .wetlab-chart>.segmented{margin-bottom:18px}.petase-section .assay-rows{gap:2px}.petase-section .assay-row{grid-template-columns:87px minmax(0,1fr) 80px 14px;width:100%;text-align:left;padding:10px 8px;gap:12px;border-radius:4px;background:transparent;transition:background .15s}
.petase-section .assay-row:hover{background:#eeeede}.petase-section .assay-row.featured{background:#f3e8dd}.petase-section .assay-row.reference{background:#eef1e9}.petase-section .assay-row.other-designs-start{margin-top:12px;border-top:1px solid var(--line);border-radius:0;padding-top:16px}.petase-section .assay-row-name strong{font-size:11px}.petase-section .assay-row-name>span{font-size:7px;letter-spacing:.7px}.petase-section .assay-bar{height:12px;background:#e8eade}.petase-section .assay-value{font-size:11px}.assay-row-arrow{font-size:13px;color:#86917d;opacity:.45}.assay-row:hover .assay-row-arrow{opacity:1;color:var(--coral)}.petase-section .assay-legend{margin-top:19px}.petase-section .assay-context{margin-top:19px;font-size:10px}.petase-section .assay-notes{border-top:1px solid var(--line);padding-top:14px}
.petase-section .case-tabs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px;border:0;margin-bottom:22px;overflow:visible}.petase-section .case-tabs button{padding:14px 8px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:#eeefe7;border:1px solid transparent;border-radius:5px;position:relative;transition:background .15s,border-color .15s}.petase-section .case-tabs button:hover{background:#e7ebdf}.petase-section .case-tabs button[aria-pressed=true]{background:#fbf6ee;border:1px solid var(--coral);box-shadow:0 3px 9px #80472f08}.petase-section .case-tabs .micro{font-size:8px;letter-spacing:.7px;white-space:nowrap}.petase-section .case-tabs strong{font-size:16px}.petase-section .case-tabs button>span:last-child{font-size:9px}.petase-section .case-tabs .top-design .micro{color:var(--coral)}.petase-section .explorer-heading h3{scroll-margin-top:32px;outline-offset:7px}
.candidate-assay{display:grid;grid-template-columns:1.7fr repeat(3,1fr) .9fr;gap:20px;padding:22px 26px;background:#e9eee5;border:1px solid var(--line);border-bottom:0;border-radius:7px 7px 0 0;align-items:center}.candidate-assay h4{margin:6px 0 0;font-size:24px;font-weight:500;line-height:1.2}.candidate-assay h4 span{display:block;font-size:10px;font-weight:400;color:#697560;margin-top:6px}.candidate-assay .micro{font-size:7px;color:#6b7862}.candidate-assay>div:not(:first-child)>span{font-size:9px;display:block;color:#6c7762;letter-spacing:.5px}.candidate-assay>div:not(:first-child)>strong{display:block;font-size:19px;font-weight:500;margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}.candidate-assay small{font-size:9px;color:#6d7765;font-weight:400}.candidate-assay .candidate-total>strong{color:var(--coral)}.candidate-assay>.candidate-ratio{border-left:1px solid #cdd7c4;padding-left:20px}.candidate-assay>.candidate-ratio>strong{font-family:var(--serif);font-size:31px;margin:0 0 4px}.candidate-assay>.candidate-ratio>span{font-size:8px;letter-spacing:0}.petase-section .petase-workspace{border-radius:0}.petase-section .structure-panel>.molecule{height:370px}.petase-section .sequence-downloads>div{display:flex;align-items:center;flex-wrap:wrap;gap:17px}.petase-section .sequence-downloads .text-button{font-size:10px}.copy-status{font-size:10px;color:#63735b}
@media(max-width:1100px){.petase-section .wetlab-story{padding:28px}.wetlab-comparison{grid-template-columns:1fr;gap:13px}.wetlab-comparison>div{display:flex;align-items:baseline;justify-content:space-between}.wetlab-comparison>div>span{margin:0}.wetlab-fold>strong{font-size:82px}.petase-section .wetlab-chart{padding:27px 20px}.petase-section .case-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.petase-section .case-tabs button{padding:12px;display:grid;grid-template-columns:1fr auto;gap:6px}.petase-section .case-tabs .micro{grid-column:span 2}.petase-section .case-tabs button>span:last-child{align-self:center}.candidate-assay{gap:15px;padding:20px}.candidate-assay>div:not(:first-child)>strong{font-size:16px}.candidate-assay>.candidate-ratio{padding-left:15px}.candidate-assay>.candidate-ratio>strong{font-size:27px}}
@media(max-width:780px){.wetlab-outcome{flex-wrap:wrap;gap:17px;padding:21px}.outcome-intro{flex-basis:100%}.outcome-intro>.micro{font-size:7px;letter-spacing:1px}.outcome-intro p{font-size:13px}.outcome-counts{font-size:9px}.petase-section .wetlab-evidence{grid-template-columns:1fr}.petase-section .wetlab-story{padding:27px}.petase-section .wetlab-story h3{font-size:38px}.petase-section .wetlab-story h3 br{display:block}.wetlab-fold{margin:23px 0;display:flex;align-items:center;gap:23px}.wetlab-fold>strong{font-size:76px}.wetlab-fold strong em{font-size:49px}.wetlab-fold>span{font-size:10px;margin:0}.wetlab-comparison{grid-template-columns:1fr 1fr;gap:12px}.wetlab-comparison>div{display:block}.wetlab-comparison>div>span{margin-bottom:8px}.wetlab-comparison strong{font-size:19px}.petase-section .wetlab-story>.wetlab-selection{margin-bottom:17px}.petase-section .wetlab-chart{padding:24px 15px}.petase-section .assay-row{grid-template-columns:70px minmax(0,1fr) 70px 10px;gap:7px;padding:10px 5px}.petase-section .assay-row-name strong,.petase-section .assay-value{font-size:10px}.petase-section .assay-legend small{width:auto;font-size:7px}.petase-section .case-tabs{gap:5px}.petase-section .case-tabs button{display:flex;padding:10px 6px;gap:7px}.petase-section .case-tabs .micro{font-size:7px;letter-spacing:.4px}.petase-section .case-tabs strong{font-size:13px}.petase-section .case-tabs button>span:last-child{align-self:flex-start;font-size:8px}.candidate-assay{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px;padding:20px}.candidate-assay>div:first-child{grid-column:span 2;grid-row:1}.candidate-assay>.candidate-ratio{grid-column:3;grid-row:1}.candidate-assay>div:not(:first-child)>strong{font-size:16px}.candidate-assay>.candidate-ratio>strong{font-size:28px}.candidate-assay .candidate-total{border:0}.petase-section .structure-panel>.molecule{height:320px}.petase-section .sequence-downloads{align-items:flex-start;gap:16px}.petase-section .sequence-downloads>div{gap:15px}.copy-status:empty{display:none}}
@media(prefers-reduced-motion:reduce){.petase-section .assay-bar i{transition:none}}