Repository navigation
Expand file tree
/
Copy pathstyle.css
More file actions
11 lines (10 loc) · 7.97 KB
/
Copy pathstyle.css
File metadata and controls
11 lines (10 loc) · 7.97 KB
1
2
3
4
5
6
7
8
9
10
11
:root{color-scheme:light;--ink:#202526;--muted:#61686a;--paper:#fafafa;--line:#dedfe1;font-family:Inter,"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #3369bb;outline-offset:6px}a:hover{color:#32725d}p,h1,h2,h3{margin:0;letter-spacing:0}.wrap{width:min(1160px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;padding:14px;background:white;z-index:10}.skip:focus{top:10px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{font-size:23px;font-weight:800;display:inline-flex;align-items:center}.dot{color:#d75c78}.spectrum{width:22px;height:22px;margin-right:12px;background:conic-gradient(#df677e 0deg 60deg,#ecc657 60deg 120deg,#9fb977 120deg 180deg,#6aa8a5 180deg 240deg,#7685bb 240deg 300deg,#b78cb5 300deg);border-radius:50%}.header nav{display:flex;gap:32px;font-size:14px;font-weight:600}.header nav a{padding-block:12px}.hero{padding-top:64px;position:relative}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;line-height:1.8;color:var(--muted)}h1{font-size:96px;line-height:1.12;font-weight:800;margin-top:24px}.hero-copy{font-size:40px;line-height:1.5;font-weight:650;margin-top:28px}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-top:48px;padding-bottom:52px}.hero-bottom p,.detail{font-size:15px;line-height:1.9;color:var(--muted)}.text-link{display:inline-flex;gap:32px;align-items:center;min-height:44px;font-size:14px;font-weight:700;border-bottom:1px solid currentColor}.text-link span{font-size:21px}.color-line{height:7px;display:flex}.color-line i{flex:1}.color-line i:nth-child(1){background:#df677e}.color-line i:nth-child(2){background:#ecc657}.color-line i:nth-child(3){background:#9fb977}.color-line i:nth-child(4){background:#6aa8a5}.color-line i:nth-child(5){background:#7685bb}.color-line i:nth-child(6){background:#b78cb5}.work{padding-top:64px}.section-head h2{margin-top:14px}h2{font-size:34px;line-height:1.5;font-weight:700}.service{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;padding-block:50px 70px}.service-copy .eyebrow{color:#42735d}.service h3{font-size:34px;margin-top:12px;line-height:1.5}.description{font-size:23px;line-height:1.65;margin-top:20px}.service .detail{margin-top:18px}.service .text-link{margin-top:28px}.mascot{display:block;background:#f5f3ed;aspect-ratio:1;max-width:440px;width:100%;justify-self:end;overflow:hidden;border-radius:4px}.mascot img{display:block;width:100%;height:100%;object-fit:contain}.opensource{background:#ecf0f4;padding-block:84px}.open-grid{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}.open-grid h2{margin-top:16px}.open-grid .detail{margin-top:22px}.open-grid .text-link{margin-top:26px}.code-art{display:flex;flex-direction:column;min-height:300px;border-top:1px solid #aebbc8;border-bottom:1px solid #aebbc8;padding:24px 0;position:relative}.code-label{font-size:10px;letter-spacing:2px;color:#596675}.code-symbol{font-family:monospace;font-size:70px;color:#658ba6;line-height:1.3;margin-top:24px}.code-art strong{font-family:monospace;font-size:36px;font-weight:500}.code-caption{font-size:13px;color:#596675;margin-top:14px}.code-rule{position:absolute;right:8px;top:68px;width:6px;height:156px;background:#df677e}.games{padding-block:84px}.games .detail{margin-top:14px}.game-list{margin-top:40px}.game-list article{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;border-top:1px solid var(--line);min-height:112px}.game-list article:last-child{border-bottom:1px solid var(--line)}.game-number{font-size:12px;color:var(--muted)}.game-list h3{font-size:30px;font-weight:600;line-height:1.5}.game-type{font-size:10px;letter-spacing:2px;color:var(--muted)}.closing{background:#f2eaf0;padding-block:70px}.closing h2{margin-top:16px}.closing .text-link{margin-top:24px}footer{min-height:140px;display:flex;align-items:center;justify-content:space-between;gap:24px}footer .wordmark{font-size:20px}footer p,footer>span{font-size:12px;color:var(--muted)}
@media(min-width:1500px){.hero{padding-top:48px}.hero-bottom{margin-top:36px}.work{padding-top:48px}}
@media(max-width:800px){.wrap{width:calc(100% - 48px)}.header{height:84px}.header nav{gap:18px}.hero{padding-top:40px}h1{font-size:64px}.hero-copy{font-size:32px}.hero-bottom{align-items:start;flex-direction:column;margin-top:28px;gap:22px;padding-bottom:32px}.work{padding-top:40px}h2{font-size:28px}.service{gap:28px;padding-block:36px 48px}.service h3{font-size:28px}.description{font-size:19px}.open-grid{gap:32px}.opensource{padding-block:56px}.game-list h3{font-size:25px}.games{padding-block:56px}footer{flex-wrap:wrap;padding-block:32px;min-height:120px}}
@media(max-width:520px){.wrap{width:calc(100% - 40px)}.header{height:76px;gap:12px;flex-wrap:wrap;align-content:center}.wordmark{font-size:20px}.spectrum{width:18px;height:18px;margin-right:8px}.header nav{gap:16px;font-size:12px}.header nav a:first-child{display:none}.hero{padding-top:36px}h1{font-size:44px;margin-top:20px}.hero-copy{font-size:28px;margin-top:20px}.eyebrow{font-size:10px;letter-spacing:1px}.hero-bottom p,.detail{font-size:14px}.section-head h2{font-size:25px}.service,.open-grid{grid-template-columns:1fr}.service{gap:28px}.mascot{max-width:360px;justify-self:center}.service h3{font-size:29px}.description{font-size:21px}.open-grid{gap:36px}.code-art{min-height:260px}.game-list article{grid-template-columns:28px 1fr;gap:12px;min-height:102px;padding-block:18px}.game-list h3{font-size:24px}.game-type{grid-column:2;font-size:9px;letter-spacing:1px}.closing{padding-block:48px}.closing h2{font-size:25px}footer{gap:18px}footer>span{width:100%}}
.featured-game{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center;margin-top:40px}.game-image{display:block}.game-image img{width:100%;height:auto;display:block;border-radius:4px}.game-copy h3{font-size:29px;line-height:1.5;margin-top:12px}.game-copy .detail{margin-top:16px}.prototype-note{font-size:12px;line-height:1.8;color:var(--muted);margin-top:16px}.game-copy .text-link{margin-top:22px}@media(max-width:800px){.featured-game{grid-template-columns:1fr;gap:28px}.game-copy h3{font-size:27px}}
.footer-info{min-width:0;display:grid;gap:6px;padding-block:24px}.footer-info p{line-height:1.8;overflow-wrap:anywhere}.footer-info a{text-decoration:underline;text-underline-offset:3px}@media(max-width:520px){.footer-info{width:100%;padding-block:0}}
.project-links{display:flex;flex-wrap:wrap;gap:0 28px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.atlas-band{background:#f1eff7;padding-block:64px}.atlas-band h2{margin-top:14px}.atlas-band .detail{margin-top:18px}.atlas-band .text-link{margin-top:24px}.policy{max-width:960px;padding-block:48px 80px}.policy h1{font-size:clamp(32px,6vw,58px);line-height:1.3;overflow-wrap:anywhere}.policy-subtitle{font-size:18px;color:var(--muted);margin-top:18px;line-height:1.7}.policy .lead{font-size:22px;line-height:1.8;margin-top:32px}.policy section{margin-top:40px}.policy h2{font-size:25px}.policy h3{font-size:18px;margin-top:24px;line-height:1.7}.policy p,.policy li{line-height:1.95;overflow-wrap:anywhere}.policy section p{margin-top:14px}.policy ul{padding-left:24px;margin-block:16px}.policy li+li{margin-top:12px}.policy a:not(.text-link){text-decoration:underline;text-underline-offset:4px}.policy-date{font-size:13px;color:var(--muted);margin-top:30px}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}.policy .project-links{margin-top:36px}.footer-info nav{font-size:12px;line-height:1.9}.header nav{flex-wrap:wrap}@media(max-width:640px){.info-grid{grid-template-columns:1fr}.policy{padding-top:32px}.policy .lead{font-size:19px}.policy h2{font-size:22px}.atlas-band{padding-block:48px}.header{height:auto;min-height:96px;padding-block:16px}.header nav{gap:8px 16px}.header nav a{padding-block:4px}}