15 lines
7.3 KiB
CSS
15 lines
7.3 KiB
CSS
.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(4,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}}
|