cabinw
10cf93a324
Add the paper direction with thin tracks, outlined hexagons and line arrows, without exterior color markers or piece numbers. Add a unified catalog for five designs and their 25 themes, with direct review links. Organize each design into an authored design.md, generated tokens.json and preview. Add Agent routing, shared integration guidance, a machine-readable manifest and an executable rendering example. Preserve legacy preview and document links. Validation: 16 focused design, theme and package tests passed; npm run design and static build passed. Confirmed all eight authored documents survive generation unchanged. Browser checks covered mobile, tablet and desktop layouts, theme links and migrated previews. Native engine integration and visual verification remain pending.
13 lines
5.5 KiB
CSS
13 lines
5.5 KiB
CSS
:root{font-family:'PingFang SC','Microsoft YaHei',sans-serif;color:#273B50;background:#F7F8F5;font-synthesis:none}
|
|
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #6652B8;outline-offset:5px}p{font-size:14px;line-height:1.85;color:#56687A}h1,h2,h3{letter-spacing:-.6px}h2{font-size:28px;margin:12px 0}main,.catalog-nav,footer{max-width:1320px;margin:auto;padding-left:40px;padding-right:40px}
|
|
.catalog-nav{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:24px;border-bottom:1px solid #D7DEDF;font-size:13px}.brand{font-size:19px;font-weight:750}.brand span{font-size:11px;font-weight:500;margin-left:14px}.eyebrow{font-size:10px;letter-spacing:2px;color:#56687A;font-weight:650}
|
|
.catalog-intro{display:grid;grid-template-columns:1fr 310px;align-items:center;gap:70px;padding:62px 0 50px}.catalog-intro h1{font-size:clamp(38px,5vw,62px);line-height:1.18;margin:18px 0}.catalog-intro p{margin-bottom:0}.latest-design{display:flex;flex-direction:column;gap:14px;border-left:2px solid #A9BDC7;padding:8px 0 8px 26px}.latest-design>span{font-size:12px;color:#56687A}.latest-design strong{font-size:25px}.latest-design small{font-size:13px;line-height:1.85;color:#56687A}.latest-design b{font-size:12px;font-weight:600}
|
|
.compare-heading{display:flex;justify-content:space-between;align-items:center;gap:22px;border-top:1px solid #D7DEDF;padding-top:32px}.compare-heading p{margin-bottom:0}.compare-heading>a{white-space:nowrap;font-size:12px}.catalog-theme-picker{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 12px}.catalog-theme-picker button{border:1px solid #BCC9CE;border-radius:24px;min-height:44px;padding:10px 20px;color:#273B50;background:transparent;font-size:13px}.catalog-theme-picker button[aria-pressed=true]{color:#FFF;background:#294D60;border-color:#294D60}.comparison-status{font-size:11px;margin:0 0 20px}
|
|
.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.catalog-card{border:1px solid #D7DEDF;background:#FFF;border-radius:20px;overflow:hidden;scroll-margin-top:24px}.card-preview{position:relative;padding:20px 16px 16px}.design-number{font-size:11px;letter-spacing:1px}.card-preview canvas{display:block;width:100%;height:auto;margin-top:4px}.preview-theme{display:block;text-align:center;font-size:12px}.card-body{padding:24px;display:flex;flex-direction:column}.card-body h3{font-size:22px;margin:10px 0 0;display:flex;align-items:center;gap:10px}.card-body h3 small{font-size:10px;letter-spacing:0;font-weight:500;background:#EAF0F3;border-radius:6px;padding:4px 7px}.card-body p{font-size:13px;min-height:72px;margin:12px 0 20px}.card-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:12px}.card-actions a:first-child{background:#294D60;color:white;padding:12px 14px;border-radius:10px}.card-actions a:last-child{padding:10px 0}
|
|
.theme-map{padding-top:64px;scroll-margin-top:24px}.theme-matrix{border-top:1px solid #D7DEDF;margin-top:26px}.theme-family{display:grid;grid-template-columns:170px 1fr;align-items:center;border-bottom:1px solid #D7DEDF;padding:20px 0;gap:20px}.theme-family h3{font-size:14px;margin:0}.theme-family h3 span{font-size:11px;color:#56687A;margin-right:8px}.theme-family>div{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.theme-entry{display:flex;gap:10px;align-items:center;min-width:0;padding:4px 0}.theme-entry i{width:28px;height:38px;border:1px solid #273B5020;border-radius:7px;flex-shrink:0}.theme-entry small,.theme-entry strong{display:block}.theme-entry small{font-size:10px;color:#56687A;margin-bottom:5px}.theme-entry strong{font-size:12px;font-weight:500;line-height:1.5}.theme-entry b{display:none;font-size:12px;font-weight:400}
|
|
.catalog-notes{display:grid;grid-template-columns:250px 1fr;gap:24px;padding:54px 0}.catalog-notes ul{margin:0;padding-left:18px;font-size:13px;line-height:2.2;color:#56687A}.catalog-notes>a{grid-column:2;font-size:12px;text-decoration:underline;text-underline-offset:5px}footer{display:flex;justify-content:space-between;gap:20px;padding-top:24px;padding-bottom:30px;border-top:1px solid #D7DEDF;font-size:11px;color:#56687A}
|
|
@media(max-width:1050px){.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-intro{gap:36px}.theme-family{grid-template-columns:1fr;gap:16px}}
|
|
@media(max-width:650px){main,.catalog-nav,footer{padding-left:22px;padding-right:22px}.brand{font-size:17px}.brand span{display:none}.catalog-nav{font-size:12px}.catalog-intro{grid-template-columns:1fr;gap:28px;padding:38px 0}.catalog-intro h1{font-size:40px}.latest-design{padding-left:18px}.latest-design small{display:none}.latest-design{gap:10px}.compare-heading{display:block}.compare-heading>a{display:inline-block;margin-top:16px}h2{font-size:24px}.catalog-theme-picker{gap:6px}.catalog-theme-picker button{padding:9px 13px;font-size:12px}.catalog-grid{grid-template-columns:1fr;gap:22px}.card-body p{min-height:0}.theme-map{padding-top:44px}.theme-family>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theme-entry b{display:block;margin-left:auto}.theme-entry{padding-right:6px}.catalog-notes{grid-template-columns:1fr;gap:16px;padding:40px 0}.catalog-notes>a{grid-column:auto}footer{flex-direction:column;gap:12px}}
|
|
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
|
|
.catalog-nav nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px;font-size:12px}@media(max-width:650px){.catalog-nav nav{gap:10px;font-size:10px}}
|