/* Mo Zhou — portfolio home. Paper palette by default; see docs/design.md. */ :root { --bg: #F4F5F2; --bg-2: #ECEEEA; --ink: #1B1F24; --ink-2: #5F666D; /* 5.3:1 on --bg, 5.0:1 on --bg-2 */ --rule: #CDD1CC; --model: 206 208 206; /* base grey of a stand-in model, as "r g b" */ --model-lo: 0.34; /* darkest shading multiplier on a stand-in */ --edge: 27 31 36; /* edge line colour on a stand-in, as "r g b" */ --display: "Chakra Petch", "Bahnschrift", "Arial Narrow", sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* Charcoal palette, kept for a later toggle. Opt in with . */ :root[data-theme="dark"] { --bg: #1A1B1D; --bg-2: #202224; --ink: #ECEBE6; --ink-2: #9A9C98; --rule: #35383A; --model: 190 192 190; --model-lo: 0.22; --edge: 236 235 230; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg-2); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; padding-inline: clamp(16px, 3vw, 40px); padding-block: clamp(16px, 2.5vw, 28px) 0; -webkit-font-smoothing: antialiased; } a { color: inherit; } a:focus-visible, button:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; } .page { max-width: 1400px; margin-inline: auto; background: var(--bg); border: 1px solid var(--ink); } .page > * { padding-inline: var(--pad); } :root { --pad: 20px; } /* header bar */ .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; border-bottom: 1px solid var(--rule); } .lockup { display: flex; align-items: baseline; gap: 16px; min-width: 0; } .name { font-family: var(--display); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .sub { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid var(--rule); padding-left: 16px; } .top nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .top nav a { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); } .top nav a:hover { color: var(--ink); } .menu { display: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: none; border: 1px solid var(--rule); color: var(--ink); padding: 8px 12px; border-radius: 2px; cursor: pointer; } .menu:hover, .menu[aria-expanded="true"] { border-color: var(--ink); } /* stage */ .stage { position: relative; border-bottom: 1px solid var(--rule); padding-inline: 0; } .stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 78vh; max-width: 100%; background: var(--bg); } .mark { position: absolute; width: 14px; height: 14px; border-color: var(--ink-2); border-style: solid; border-width: 0; opacity: 0.8; } .mark.tl { left: 10px; top: 10px; border-left-width: 1px; border-top-width: 1px; } .mark.tr { right: 10px; top: 10px; border-right-width: 1px; border-top-width: 1px; } .mark.bl { left: 10px; bottom: 10px; border-left-width: 1px; border-bottom-width: 1px; } .mark.br { right: 10px; bottom: 10px; border-right-width: 1px; border-bottom-width: 1px; } .progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--ink); } /* caption strip: reads like a title block */ .caption { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.8fr auto; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--rule); padding-inline: 0; } .caption > div { padding: 12px 14px 12px 14px; border-right: 1px solid var(--rule); min-width: 0; display: grid; gap: 2px; align-content: start; } .caption > div:first-child { padding-left: var(--pad); } .caption > div:last-child { border-right: 0; padding-right: var(--pad); } .caption small { color: var(--ink-2); font-size: 0.66rem; letter-spacing: 0.08em; } .caption .v { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .caption .open { font-size: 0.64rem; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; margin-top: 4px; justify-self: start; border-bottom: 1px solid var(--rule); } .caption .open:hover { border-bottom-color: var(--ink); } .caption .open[hidden] { display: none; } .caption .note .v { white-space: normal; } .caption > div.ctrl { display: flex; align-items: center; gap: 6px; align-self: center; padding-block: 0; padding-left: 14px; } .ctrl .idx { min-width: 5.5ch; text-align: right; margin-right: 8px; font-variant-numeric: tabular-nums; } .ctrl button { width: 34px; height: 34px; border: 1px solid var(--rule); background: transparent; color: var(--ink); border-radius: 2px; cursor: pointer; font-family: var(--mono); font-size: 0.9rem; display: grid; place-items: center; } .ctrl button:hover { border-color: var(--ink); } /* intro bar */ .intro { padding-block: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: center; } .intro p { margin: 0; font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.35; max-width: 34ch; text-wrap: balance; font-weight: 400; } .links { display: flex; gap: 24px; flex-wrap: wrap; } .links a { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--rule); } .links a:hover { border-bottom-color: var(--ink); } /* footnote under the frame */ .foot { max-width: 1400px; margin-inline: auto; padding-block: 14px 28px; padding-inline: 2px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); } @media (max-width: 900px) { .top nav ul { gap: 18px; } .sub { display: none; } .caption { grid-template-columns: 1fr 1fr auto; } .caption .tool, .caption .note { display: none; } .caption .model .v { white-space: normal; } .intro { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 560px) { /* the nav becomes ruled rows inside the frame, opened by the Menu button */ .top { flex-wrap: wrap; padding-block: 12px; } .menu { display: inline-block; margin-left: auto; } .top nav { flex-basis: 100%; display: none; } .top.open nav { display: block; } .top nav ul { flex-direction: column; gap: 0; margin-top: 12px; border-top: 1px solid var(--rule); } .top nav li { border-bottom: 1px solid var(--rule); } .top nav li:last-child { border-bottom: 0; } .top nav a { display: block; padding: 12px 0; color: var(--ink); } .stage canvas { aspect-ratio: 4 / 3; } .caption { grid-template-columns: 1fr auto; } .caption .date { display: none; } .caption .v { white-space: normal; } } /* print: the sheet on white, no controls */ @media print { body { background: #fff; padding: 0; } .page { border-color: #000; max-width: none; } .menu, .top nav, .progress, .ctrl, .pager, .caption .open, .foot { display: none !important; } a { color: inherit; text-decoration: none; } .stage canvas { max-height: none; } }