hanzo.ai/components/oss/HanzoOpenSourceShowcase.css

/* Scoped CSS for use inside an existing Hanzo landing page. */
.hanzo-oss{color-scheme:dark;--bg:#080a0b;--panel:#101214;--panel2:#131619;--border:#292e32;--subtle:#1d2124;--fg:#f5f6f5;--mid:#acb1b3;--dim:#737b80;--white:#f0f0ec}
.hanzo-oss *{box-sizing:border-box}
.hanzo-oss{scroll-behavior:smooth}
.hanzo-oss{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.hanzo-oss a{color:inherit;text-decoration:none}
.hanzo-oss button,.hanzo-oss input,.hanzo-oss select{font:inherit}
.hanzo-oss button{cursor:pointer}
.hanzo-oss button:focus-visible,.hanzo-oss input:focus-visible,.hanzo-oss a:focus-visible,.hanzo-oss select:focus-visible{outline:2px solid #e7e9e8;outline-offset:3px}
.hanzo-oss [hidden]{display:none!important}
.hanzo-oss .page-shell{max-width:1280px;padding:0 38px;margin:auto}
.hanzo-oss .preview-nav{height:73px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.hanzo-oss .brand{display:inline-flex;gap:12px;align-items:center;font-size:18px;font-weight:700;letter-spacing:-.065em}
.hanzo-oss .brand-symbol{width:30px;height:30px;font-size:18px;font-weight:900;letter-spacing:-.08em;display:flex;align-items:center;justify-content:center;border:1px solid #f3f3f1;border-radius:6px;transform:rotate(-7deg)}
.hanzo-oss .brand-sub{font-size:12px;color:#666e73;font-weight:450;letter-spacing:0}
.hanzo-oss .preview-navright{display:flex;align-items:center;gap:25px}
.hanzo-oss .preview-pill{font-size:11px;border:1px solid #2d3235;background:#111416;border-radius:999px;padding:6px 11px;color:#aeb3b4;display:inline-flex;align-items:center;gap:8px}
.hanzo-oss .pulse-dot,.hanzo-oss .status-dot{width:6px;height:6px;background:#c9cdca;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px #c9cdca12}
.hanzo-oss .nav-external{font-size:12px;font-weight:570;color:#dedfdd}
.hanzo-oss .nav-external span{margin-left:8px;color:#969da0}
.hanzo-oss .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:60px;min-height:400px;padding:66px 4px 58px;position:relative}
.hanzo-oss .hero-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;z-index:1}
.hanzo-oss .eyebrow,.hanzo-oss .section-kicker{font-size:10px;letter-spacing:.18em;font-weight:750;color:#a1a8ac;display:flex;gap:10px;align-items:center}
.hanzo-oss .eyebrow-line{width:20px;height:1px;background:#cbcecd;display:inline-block}
.hanzo-oss .eyebrow-index{color:#60676c;font-weight:500}
.hanzo-oss h1,.hanzo-oss h2,.hanzo-oss h3,.hanzo-oss p{margin:0}
.hanzo-oss h1{font-size:clamp(60px,7.1vw,100px);line-height:.98;letter-spacing:-.079em;font-weight:580;white-space:nowrap;margin:27px 0 23px}
.hanzo-oss h1 em{font-style:normal;color:#656c71}
.hanzo-oss .hero-desc{font-size:15px;color:#a4a9ad;max-width:520px;line-height:1.75;letter-spacing:-.015em}
.hanzo-oss .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:31px}
.hanzo-oss .btn{font-size:12px;font-weight:650;min-height:42px;padding:0 17px;display:inline-flex;gap:20px;align-items:center;justify-content:space-between;border-radius:7px;transition:background .18s,border-color .18s,transform .18s}
.hanzo-oss .btn:hover{transform:translateY(-1px)}
.hanzo-oss .btn-primary{background:#f1f1ee;color:#111314}
.hanzo-oss .btn-primary:hover{background:#d5d8d6}
.hanzo-oss .btn-outline{border:1px solid #3b4145;color:#d7dbdd;background:#0e1112}
.hanzo-oss .btn-outline:hover{background:#1a1f22;border-color:#636d72}
.hanzo-oss .hero-right{border-left:1px solid #272c30;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;min-height:280px;padding:1px 0 0 22px}
.hanzo-oss .signal-caption,.hanzo-oss .hero-art-footer{font-size:9px;letter-spacing:.12em;color:#71787c;font-weight:600}
.hanzo-oss .hero-art{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;pointer-events:none}
.hanzo-oss .hero-art::before{content:"";position:absolute;inset:15px;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:23px 23px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)}
.hanzo-oss .hero-art>span{display:grid;place-items:center;width:95px;height:95px;border:2px solid #979ea3;border-radius:20px;color:#f0f0ed;font-size:79px;line-height:1;font-weight:780;letter-spacing:-.09em;transform:rotate(-13deg);text-shadow:0 0 44px #fff3;box-shadow:0 0 90px #ddd2, inset 0 0 24px #ffffff1a;z-index:2;padding-right:6px}
.hanzo-oss .ring{position:absolute;border:1px solid #aeb5bc20;aspect-ratio:1;border-radius:50%}
.hanzo-oss .ring-1{width:175px}
.hanzo-oss .ring-2{width:295px}
.hanzo-oss .ring-3{width:440px}
.hanzo-oss .hero-art-footer{display:flex;justify-content:space-between;margin-top:auto;z-index:1}
.hanzo-oss .activity-panel,.hanzo-oss .repo-section,.hanzo-oss .directory-section{border-top:1px solid var(--border);padding-top:40px;margin-top:7px}
.hanzo-oss .section-leading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:23px}
.hanzo-oss .section-leading h2{font-size:clamp(28px,3vw,39px);letter-spacing:-.065em;font-weight:580;line-height:1.14;margin:13px 0 8px}
.hanzo-oss .period{color:#727a7e}
.hanzo-oss .section-hint{font-size:12px;color:#8a9195}
.hanzo-oss .mini-status{border:1px solid #31373b;border-radius:99px;padding:7px 10px;display:inline-flex;gap:9px;align-items:center;font-size:9px;letter-spacing:.1em;white-space:nowrap;color:#aeb4b7}
.hanzo-oss .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.hanzo-oss .stat{min-height:147px;padding:21px 21px 19px;background:#0e1012;border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column}
.hanzo-oss .stat-label{color:#8f989d;font-size:10px;letter-spacing:.075em;display:flex;justify-content:space-between;gap:8px;font-weight:650}
.hanzo-oss .stat-label span{color:#5d666d;font-size:11px}
.hanzo-oss .stat strong{font-size:52px;line-height:1;letter-spacing:-.075em;font-weight:580;margin-top:17px}
.hanzo-oss .stat small{font-size:11px;color:#72797e;margin-top:auto;padding-top:8px}
.hanzo-oss .stat-note{background:repeating-linear-gradient(125deg,#0f1214,#0f1214 12px,#111517 12px,#111517 13px)}
.hanzo-oss .contributor-strip{margin-bottom:14px;border:1px solid var(--border);border-radius:10px;background:#0d1012;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.hanzo-oss .strip-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hanzo-oss .strip-kicker{font-size:10px;letter-spacing:.08em;font-weight:700;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);padding:3px 8px;border-radius:4px}
.hanzo-oss .strip-title{font-size:12px;color:#8f989d}
.hanzo-oss .strip-tags{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hanzo-oss .contrib-tag{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #23292d;border-radius:8px;background:#121619;transition:border-color .15s,background .15s;text-decoration:none}
.hanzo-oss .contrib-tag:hover{border-color:#535d64;background:#181d21}
.hanzo-oss .contrib-avatar{width:30px;height:30px;border-radius:50%;background:#242c30;display:grid;place-items:center;font-size:11px;font-weight:700;color:#e1e5e7;border:1px solid #3c464c;flex-shrink:0}
.hanzo-oss .contrib-info{display:flex;flex-direction:column;min-width:0}
.hanzo-oss .contrib-name{font-size:12px;font-weight:600;color:#f0f3f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hanzo-oss .contrib-role{font-size:10px;color:#879196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hanzo-oss .stat .stat-subtext{font-size:22px;letter-spacing:-.05em;white-space:nowrap;margin-top:30px}
.hanzo-oss .graph-container{border:1px solid var(--border);border-radius:11px;padding:22px 22px 17px;background:linear-gradient(150deg,#111517,#0b0d0f 80%)}
.hanzo-oss .graph-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.hanzo-oss .graph-toolbar h3{font-size:14px;letter-spacing:-.025em;font-weight:620}
.hanzo-oss .graph-toolbar h3 span{font-weight:400;color:#737c81}
.hanzo-oss .graph-toolbar p{font-size:11px;color:#81898e;margin-top:5px}
.hanzo-oss .graph-controls{display:flex;gap:8px;align-items:center}
.hanzo-oss .segmented{padding:3px;display:flex;gap:3px;align-items:center;border:1px solid #343b3f;border-radius:7px;background:#080a0c}
.hanzo-oss .seg{border:0;background:transparent;color:#737b80;font-size:10px;padding:6px 10px;border-radius:4px}
.hanzo-oss .seg.active{background:#282e32;color:#f3f4f3}
.hanzo-oss .range-select{border:1px solid #343b3f;color:#b9c0c2;background:#0d1012;border-radius:7px;padding:7px 7px;font-size:10px}
.hanzo-oss .graph-area{min-height:156px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3c4347 transparent}
.hanzo-oss .calendar-frame{display:flex;gap:10px;min-width:630px;align-items:flex-end;padding:2px 0 7px}
.hanzo-oss .weekday-labels{display:grid;grid-template-rows:repeat(7,12px);gap:3px;color:#7c858a;font-size:9px;padding-bottom:1px;align-items:center}
.hanzo-oss .calendar-right{min-width:0;flex:1}
.hanzo-oss .calendar-months{height:18px;display:grid;gap:3px;font-size:10px;color:#838b91;margin-bottom:5px}
.hanzo-oss .calendar{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;gap:3px}
.hanzo-oss .cell{min-width:7px;min-height:12px;border:1px solid #20262a;border-radius:2px;background:#13181b;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;cursor:pointer;padding:0}
.hanzo-oss .cell:hover,.hanzo-oss .cell:focus-visible{transform:scale(1.25);filter:brightness(1.5);z-index:2;position:relative;outline:1px solid #10b981}
.hanzo-oss .cell[data-level="1"],.hanzo-oss .level1{background:#0e4429;border-color:#006d32}
.hanzo-oss .cell[data-level="2"],.hanzo-oss .level2{background:#006d32;border-color:#26a641}
.hanzo-oss .cell[data-level="3"],.hanzo-oss .level3{background:#26a641;border-color:#39d353}
.hanzo-oss .cell[data-level="4"],.hanzo-oss .level4{background:#39d353;border-color:#56e36d;box-shadow:0 0 6px rgba(57,211,83,0.35)}
.hanzo-oss .cell[data-level="5"],.hanzo-oss .level5{background:#56e36d;border-color:#86f199;box-shadow:0 0 10px rgba(86,227,109,0.6)}
.hanzo-oss .graph-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:10px;color:#8a9297}
.hanzo-oss .heatmap-legend{display:inline-flex;align-items:center;gap:4px}
.hanzo-oss .heatmap-legend span{padding:0 5px}
.hanzo-oss .heatmap-legend i{width:10px;height:10px;border-radius:2px;border:1px solid #333a3e}
.hanzo-oss .heatmap-legend .level0{background:#1b2023}
.hanzo-oss .graph-trend{display:flex;align-items:end}
.hanzo-oss .trend-plot{height:156px;display:flex;align-items:flex-end;gap:3px;width:100%;border-bottom:1px solid #3a4145;background:repeating-linear-gradient(to top,transparent 0,transparent 37px,#ffffff0c 38px,#ffffff0c 39px)}
.hanzo-oss .trend-plot i{flex:1;background:#9ea7ac;border-radius:2px 2px 0 0;max-height:100%;min-width:3px;transition:height .2s}
.hanzo-oss .trend-plot i:nth-child(4n){background:#e7ebe9}
.hanzo-oss .repo-section{margin-top:56px}
.hanzo-oss .inline-link{font-size:11px;color:#c8cccd;white-space:nowrap}
.hanzo-oss .inline-link span{padding-left:5px}
.hanzo-oss .repo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.hanzo-oss .repo-card{border:1px solid var(--border);border-radius:10px;background:#101214;padding:18px 17px;min-height:171px;display:flex;flex-direction:column;transition:background .2s,border-color .2s,transform .2s;min-width:0}
.hanzo-oss .repo-card:hover{border-color:#7b8589;background:#171b1e;transform:translateY(-2px)}
.hanzo-oss .repo-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:17px}
.hanzo-oss .repo-icon{height:32px;width:32px;border:1px solid #42484d;border-radius:7px;display:grid;place-items:center;font-size:15px;color:#d7dedf}
.hanzo-oss .repo-arrow{font-size:15px;color:#6e787e}
.hanzo-oss .repo-name{font-size:13px;font-weight:670;letter-spacing:-.02em;overflow-wrap:anywhere}
.hanzo-oss .repo-desc{margin-top:5px;font-size:11px;line-height:1.5;color:#888f94;flex:1}
.hanzo-oss .repo-meta{display:flex;align-items:center;justify-content:space-between;color:#747d82;font-size:10px;margin-top:15px}
.hanzo-oss .repo-meta span{border:1px solid #363d41;border-radius:3px;padding:2px 5px;font-size:9px}
.hanzo-oss .directory-section{margin-top:60px;scroll-margin-top:18px}
.hanzo-oss .directory-count{font-size:10px;color:#8d959a;letter-spacing:.12em;white-space:nowrap}
.hanzo-oss .directory-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;margin-bottom:12px}
.hanzo-oss .scope-tabs{display:flex;gap:4px;background:#101315;border:1px solid #31383c;border-radius:8px;padding:4px}
.hanzo-oss .scope{border:0;background:transparent;color:#848e93;border-radius:5px;padding:8px 13px;display:inline-flex;align-items:center;gap:11px;font-size:11px;font-weight:610;white-space:nowrap}
.hanzo-oss .scope span{font-size:10px;color:#7b858a}
.hanzo-oss .scope.active{background:#272e33;color:white}
.hanzo-oss .scope.active span{color:#bcc6ca}
.hanzo-oss .search-box{height:36px;background:#121618;border:1px solid #31383c;border-radius:7px;padding:0 10px;display:flex;align-items:center;gap:9px;color:#7f888e;min-width:235px}
.hanzo-oss .search-box input{border:0;background:transparent;color:white;outline:0;font-size:11px;min-width:0;flex:1}
.hanzo-oss .search-box input::placeholder{color:#778188}
.hanzo-oss .search-box kbd{font-family:inherit;font-size:10px;border:1px solid #3d4549;border-radius:3px;padding:0 5px;color:#a6acaf}
.hanzo-oss .filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.hanzo-oss .filter{border:1px solid #292f33;background:transparent;color:#858e92;font-size:10px;border-radius:99px;padding:6px 11px}
.hanzo-oss .filter[aria-pressed="true"]{color:#f0f0ef;border-color:#6b7377;background:#1d2225}
.hanzo-oss .filter:hover{color:white}
.hanzo-oss .org-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hanzo-oss .org-card{display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid var(--border);border-radius:9px;background:#101315;min-width:0;transition:background .15s,border-color .15s}
.hanzo-oss .org-card:hover{border-color:#798187;background:#181d20}
.hanzo-oss .org-icon{flex:0 0 37px;height:37px;border-radius:9px;border:1px solid #3c4449;background:#202629;color:#e9edeb;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:-.05em}
.hanzo-oss .org-copy{min-width:0;flex:1}
.hanzo-oss .org-head{display:flex;align-items:center;justify-content:space-between;gap:5px}
.hanzo-oss .org-name{font-size:12px;font-weight:640;overflow-wrap:anywhere}
.hanzo-oss .org-head span{color:#687277}
.hanzo-oss .org-slug{font-size:10px;color:#8f999d;margin-top:1px}
.hanzo-oss .org-description{font-size:10px;line-height:1.55;color:#7d878d;margin-top:9px}
.hanzo-oss .org-card[data-private="true"] .org-description::after{content:"  · private work excluded";color:#adb5b8}
.hanzo-oss .directory-footer{display:flex;align-items:center;justify-content:space-between;gap:13px;min-height:68px}
.hanzo-oss .expand-btn{border:0;background:transparent;color:#e5e7e6;font-size:11px;font-weight:650;padding:12px 0}
.hanzo-oss .expand-btn span{margin-left:11px;font-size:14px}
.hanzo-oss .expand-btn:hover{color:#a5adb2}
.hanzo-oss .directory-footer>div{font-size:10px;color:#707b80}
.hanzo-oss .directory-empty{grid-column:1/-1;border:1px dashed #454d50;border-radius:9px;color:#9aa2a6;font-size:12px;padding:32px;text-align:center}
.hanzo-oss .verification{display:flex;align-items:flex-start;gap:12px;border:1px solid #2e3538;border-radius:10px;padding:16px 18px;color:#88939a;background:#101416;margin-top:25px}
.hanzo-oss .verification-symbol{flex:0 0 20px;height:20px;border:1px solid #667078;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700}
.hanzo-oss .verification strong{font-size:11px;color:#cdd3d4}
.hanzo-oss .verification p{font-size:10px;margin-top:6px;line-height:1.7}
.hanzo-oss .verification em{font-style:normal;text-decoration:underline;text-underline-offset:2px}
.hanzo-oss .bottom-cta{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:52px 4px;margin-top:58px;display:flex;justify-content:space-between;gap:28px;align-items:center}
.hanzo-oss .bottom-cta h2{font-size:clamp(30px,4vw,52px);letter-spacing:-.07em;font-weight:590;line-height:1.15;margin:13px 0 10px}
.hanzo-oss .bottom-cta p{font-size:12px;color:#8a9298}
.hanzo-oss .bottom-actions{display:flex;gap:9px;flex-wrap:wrap}
.hanzo-oss .page-credit{height:76px;display:flex;align-items:center;justify-content:space-between;color:#586368;font-size:9px;letter-spacing:.08em;gap:10px}
@media (max-width:1040px){.hanzo-oss .hero{gap:10px}
.hanzo-oss .hero-right{min-width:220px}
.hanzo-oss .stat{padding:19px 14px}
.hanzo-oss .stat .stat-subtext{font-size:19px}
.hanzo-oss .repo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hanzo-oss .org-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.hanzo-oss .page-shell{padding:0 19px}
.hanzo-oss .preview-nav{height:65px}
.hanzo-oss .preview-pill{display:none}
.hanzo-oss .brand-sub{display:none}
.hanzo-oss .hero{display:block;min-height:auto;padding:48px 0 42px}
.hanzo-oss .hero-right{display:none}
.hanzo-oss h1{font-size:clamp(53px,10vw,70px);white-space:normal}
.hanzo-oss .hero-desc{font-size:14px}
.hanzo-oss .activity-panel,.hanzo-oss .repo-section,.hanzo-oss .directory-section{padding-top:31px}
.hanzo-oss .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.hanzo-oss .stat{min-height:135px}
.hanzo-oss .stat strong{font-size:46px}
.hanzo-oss .stat .stat-subtext{font-size:19px}
.hanzo-oss .section-leading{align-items:flex-start}
.hanzo-oss .mini-status{font-size:8px;margin-top:10px}
.hanzo-oss .graph-container{padding:16px 12px}
.hanzo-oss .graph-toolbar{gap:17px}
.hanzo-oss .calendar-frame{min-width:605px}
.hanzo-oss .directory-toolbar{align-items:stretch}
.hanzo-oss .scope-tabs{width:100%}
.hanzo-oss .scope{flex:1;justify-content:center;padding:7px 5px}
.hanzo-oss .search-box{flex:1}
.hanzo-oss .bottom-cta{flex-wrap:wrap}
.hanzo-oss .page-credit{font-size:8px}
.hanzo-oss .directory-count{display:none}}
@media (max-width:470px){.hanzo-oss .page-shell{padding:0 13px}
.hanzo-oss .brand{font-size:16px}
.hanzo-oss .hero{padding:38px 4px}
.hanzo-oss .hero-actions{width:100%}
.hanzo-oss .hero-actions .btn{width:100%}
.hanzo-oss .section-leading h2{font-size:31px}
.hanzo-oss .mini-status{display:none}
.hanzo-oss .stat{padding:16px 12px}
.hanzo-oss .stat-label{font-size:9px}
.hanzo-oss .stat strong{font-size:40px}
.hanzo-oss .stat .stat-subtext{font-size:17px}
.hanzo-oss .repo-grid,.hanzo-oss .org-grid{grid-template-columns:1fr}
.hanzo-oss .repo-card{min-height:143px}
.hanzo-oss .org-card{padding:14px}
.hanzo-oss .scope{font-size:10px;gap:6px}
.hanzo-oss .bottom-actions{width:100%}
.hanzo-oss .bottom-actions .btn{flex:1}
.hanzo-oss .page-credit{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px}}
@media (prefers-reduced-motion:reduce){.hanzo-oss{scroll-behavior:auto}
.hanzo-oss *,.hanzo-oss *::before,.hanzo-oss *::after{transition:none!important;animation:none!important}}

/* Embedded mode inside existing landing sections */
.hanzo-oss.embedded{background:transparent;width:100%}
.hanzo-oss.embedded .embedded-shell{width:100%;padding:0;margin:0}
.hanzo-oss.embedded .activity-panel{border-top:none;padding-top:0;margin-top:0}