toshiocn/HexTrails
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f3e91e35977f74ea099309be55148dba0a93d8d8
HexTrails/design/art-directions.css
T
cabinw 10cf93a324 feat: add Paper Routes and package five design systems 
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.
2026-09-13 13:24:34 +08:00

31 lines
9.7 KiB
CSS
Raw Blame History

.direction-review{padding:52px 0 24px}.review-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.review-heading h1{font-size:clamp(30px,4vw,48px);letter-spacing:-1.5px;margin:14px 0}.review-heading p{max-width:730px;color:#56687A}.review-heading>a{font-size:12px;white-space:nowrap;padding-bottom:22px}
.direction-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:28px 0 18px}.direction-card{border:1px solid #273b5020;border-radius:18px;overflow:hidden;background:white}.direction-switch{display:block;background:none;padding:0;width:100%;text-align:left;color:#273B50}.direction-switch canvas{display:block;width:100%;height:auto}.direction-switch[aria-pressed=true]{box-shadow:inset 0 -3px #6652B8}.direction-card:has([aria-pressed=true]){outline:2px solid #6652B8;outline-offset:3px}.direction-card-title{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:14px 12px;font-weight:650;font-size:13px}.direction-card-title small{font-weight:400;font-size:10px;color:#56687A}.keep-design{display:flex;align-items:center;gap:8px;border-top:1px solid #273b5010;padding:12px;font-size:12px;cursor:pointer}.keep-design input{width:17px;height:17px;accent-color:#6652B8}.review-summary-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.review-summary-bar p{font-size:12px}.review-summary-bar button,.sheet-link{background:#273B50;color:white;border-radius:10px;padding:12px 16px;font-size:12px;display:inline-block}.direction-detail{margin-top:24px;border-top:1px solid #273b5020;border-bottom:1px solid #273b5020;padding:30px 0;display:grid;grid-template-columns:1.25fr 1fr;gap:60px}.direction-detail h2{font-size:28px;margin:10px 0}.direction-detail p,.direction-detail li{font-size:13px;line-height:1.9}.direction-detail ul{padding-left:18px;color:#56687A;margin-bottom:22px}.review-note{font-size:13px;display:flex;flex-direction:column;gap:12px;padding-top:4px}.review-note textarea{resize:vertical;width:100%;min-height:110px;border:1px solid #273b5030;border-radius:12px;padding:14px;background:white;font:inherit;color:#273B50}.review-note small{font-size:11px;color:#56687A}.intro{padding-top:30px}.intro h1{font-size:34px}.direction-review~.intro .intro-note{max-width:520px}
body[data-design=vivid] .phone{border:3px solid #30264C;box-shadow:8px 8px #30264C;border-radius:18px}body[data-design=vivid] .icon-button{background:#4A24E8;border:2px solid #30264C;border-radius:8px;box-shadow:3px 3px #30264C}body[data-design=vivid] .phone-top strong{font-weight:900;letter-spacing:-.6px}body[data-design=vivid] .game-notice{border:2px solid #30264C;border-radius:8px;box-shadow:3px 3px #30264C}
body[data-design=toy] .phone{border:8px solid #F9EDCF;border-radius:42px;box-shadow:0 12px 0 #B5A68D,0 20px 30px #273b501f,inset 0 3px 3px #FFFFFF90}body[data-design=toy] .icon-button{background:#4279B7;border-radius:15px;box-shadow:0 4px #244F80,inset 0 2px #82ACD2}body[data-design=toy] .game-notice{background:#FFF9EB;border:2px solid #D8CBB0;box-shadow:0 3px #C4B598}
body[data-design=animals] .phone{border:3px solid #718763;border-radius:40px 40px 28px 28px;box-shadow:0 6px 0 #71876330}body[data-design=animals] .icon-button{background:#54795C;border-radius:16px 16px 12px 12px;box-shadow:0 3px #36523C}body[data-design=animals] .game-notice{background:#FFFCED;border:1px solid #71876380;border-radius:18px}.phone canvas{min-width:0}
/* Dedicated design sheets use the same tokens and real board renderer. */
.sheet-page{background:var(--paper);color:#273B50}.sheet-main{max-width:1320px;padding:40px;margin:auto}.sheet-nav{display:flex;justify-content:space-between;font-size:12px;border-bottom:1px solid #273b5020;padding-bottom:20px}.sheet-hero{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:44px 0 36px}.sheet-hero h1{font-size:52px;line-height:1.1}.sheet-hero p{font-size:15px}.sheet-token-row{width:100%;height:auto;background:var(--paper);align-self:center}.sheet-themes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.sheet-theme{border-radius:18px;background:var(--bg);color:var(--ink);padding:18px 8px;text-align:center}.sheet-theme h3{font-size:15px;margin:9px 0}.sheet-theme small{font-size:11px}.sheet-theme canvas{width:100%;height:auto;display:block}.sheet-swatches{display:flex;justify-content:center;gap:6px;margin:12px 0}.sheet-swatches i{width:18px;height:18px;border-radius:50%}.sheet-components{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.sheet-panel{border-top:1px solid #273b5020;padding-top:24px}.sheet-panel h2{font-size:22px}.sheet-panel ul{font-size:14px;line-height:2;padding-left:18px}.component-preview{background:var(--bg);padding:28px;border-radius:24px}.sample-controls{display:flex;justify-content:center;gap:12px}.sample-controls button{padding:12px 18px;color:white;background:var(--accent);border-radius:12px;font-size:13px}.sample-modal{background:#FFFCF5;border-radius:24px;padding:24px;margin-top:24px;text-align:center;color:#273B50}.sample-modal .stars{font-size:38px;color:#F7BB32;text-shadow:0 2px #C68525,0 0 16px #F8D776}.sheet-page[data-design=vivid] .sample-modal,.sheet-page[data-design=vivid] .sample-controls button{border:2px solid #30264C;border-radius:10px;box-shadow:4px 4px #30264C}.sheet-page[data-design=toy] .sample-modal,.sheet-page[data-design=toy] .sample-controls button{box-shadow:0 5px #B8A88D,inset 0 3px #FFFFFF55;border-radius:24px}.sheet-page[data-design=animals] .sample-modal{border:2px solid #718763;border-radius:30px}.sheet-page[data-design=animals] .sample-controls button{border-radius:18px;box-shadow:0 3px #36523C}.sheet-caption{font-size:12px;line-height:1.8;color:#56687A;margin:20px 0}
@media(max-width:900px){.direction-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.direction-detail{gap:24px}.sheet-themes{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-hero{gap:20px}.sheet-hero h1{font-size:38px}}
@media(max-width:650px){.review-heading{display:block}.review-heading>a{display:inline-block;padding:0}.direction-review{padding-top:30px}.direction-card-title{display:block;font-size:12px}.direction-card-title small{display:block;margin-top:5px}.direction-detail,.sheet-hero,.sheet-components{grid-template-columns:1fr;gap:22px}.review-summary-bar{align-items:start}.review-summary-bar button{flex-shrink:0;padding:10px;font-size:11px}.sheet-main{padding:22px}.sheet-themes{gap:12px}.sheet-theme{padding:12px 5px}}
body[data-design=vivid]:not(.editing) .game-shell .game-icon{filter:drop-shadow(3px 3px 0 #30264C)}
body[data-design=toy]:not(.editing) .game-shell .game-icon{filter:drop-shadow(0 4px 0 #B5A68D)}
body[data-design=animals]:not(.editing) .game-shell .game-icon{filter:sepia(.25) hue-rotate(320deg)}
.quick-review{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:22px;padding:10px 22px;background:#F7F6F2F5;border-bottom:1px solid #273b501c;backdrop-filter:blur(12px);font-size:12px}.quick-review label{display:flex;align-items:center;gap:9px}.quick-review select{font:inherit;color:#273B50;background:white;border:1px solid #273b5033;border-radius:8px;min-height:36px;padding:5px 10px}.quick-review a{font-size:11px}.direction-picker,.phone{scroll-margin-top:80px}
@media(max-width:500px){.quick-review{gap:10px;padding:8px 10px}.quick-review label{gap:5px}.quick-review select{max-width:130px;font-size:11px}.quick-review a{font-size:10px}.review-heading h1{font-size:28px}}
/* Paper Routes carries the light, flat drawing language of the variants lab. */
body[data-design=paper] .phone{border:1px solid #CBD7DD;border-radius:28px;box-shadow:none}
body[data-design=paper] .icon-button{background:#607B90;border:1px solid #FFFFFFB8;border-radius:12px;box-shadow:none}
body[data-design=paper] .game-notice{background:#FAFBF7;color:#506674;border:1px solid #D3DFE3;box-shadow:none}
body[data-design=paper] .rotations button>span,body[data-design=paper]:not(.editing) .rotate-button>.ui-icon{filter:brightness(0) saturate(100%) invert(43%) sepia(12%) saturate(987%) hue-rotate(161deg) brightness(94%) contrast(88%)}
body[data-design=paper][data-theme=midnight] .rotations button>span,body[data-design=paper][data-theme=midnight]:not(.editing) .rotate-button>.ui-icon{filter:none}
body[data-design=paper] .game-tool{--item-color:#477FC0;--item-border:1px solid #FFFFFFCC;--item-radius:50%}
body[data-design=paper] .game-tool[data-tool=restart]{--item-color:#D66C4D}
body[data-design=paper] .game-tool[data-tool=hint]{--item-color:#B58943;--item-icon-filter:none}
.sheet-reference{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin:0 0 48px;padding:28px;background:#EAF0F3;border-radius:24px}
.sheet-reference canvas{display:block;width:100%;height:auto}.sheet-reference h2{font-size:28px;margin:14px 0}.sheet-reference p{font-size:13px;color:#506674}.sheet-reference a{font-size:12px;text-decoration:underline;text-underline-offset:4px}
.reference-spec{display:grid;grid-template-columns:1fr auto;gap:12px;font-size:12px;padding:18px 0;border-top:1px solid #CBD7DD;border-bottom:1px solid #CBD7DD}.reference-spec dt,.reference-spec dd{margin:0}.reference-spec dd{font-family:ui-monospace,monospace;color:#506674}
@media(max-width:650px){.sheet-reference{grid-template-columns:1fr;gap:20px;padding:18px}.sheet-reference h2{font-size:24px}}
.sheet-nav{gap:16px;align-items:center;flex-wrap:wrap}.sheet-family-nav{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px}.sheet-family-nav a{font-size:11px;min-height:40px;padding:11px 13px;border:1px solid #CBD7DD;border-radius:10px}.sheet-family-nav a[aria-current=page]{background:#294D60;color:#FFFFFF;border-color:#294D60}
.sheet-agent-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:11px;color:#506674}.sheet-agent-links a{text-decoration:underline;text-underline-offset:4px}
Reference in New Issue View Git Blame Copy Permalink