/* ════════════════════════════════════════════════════════════════ desktop.css v1 - the site-wide design language distilled from design study 10, "The Desktop" (Sep 2026). The screen is the stage: a dotted paper ground, content in windows with metal titlebars, one sticky menu bar, a one-line footer. Import AFTER shared.css (tokens come from tokens.css). Per-page accent: set --acc on (defaults to cobalt). body.acc-machine { --acc: var(--mark-vermilion); } singulars body.acc-plays { --acc: var(--mark-azure); } computer theater body.acc-tools { --acc: var(--mark-viridian); } wikitongues The cobalt law survives: cobalt appears once per surface, on the start-a-conversation CTA (and focus rings). The accent is spent sparingly - live labels, chosen states, small dots. ════════════════════════════════════════════════════════════════ */ body.desktop { --pad: clamp(1.15rem, 4vw, 3rem); --shell: 1120px; --acc: var(--cobalt); --bar: linear-gradient(var(--paper), var(--ground-2)); color: var(--ink-85); background-color: #fdfdfb; background-image: radial-gradient( circle at 1px 1px, rgba(0, 0, 0, 0.06) 1px, transparent 0 ); background-size: 22px 22px; } body.desktop.acc-machine { --acc: var(--mark-vermilion); } body.desktop.acc-plays { --acc: var(--mark-azure); } body.desktop.acc-tools { --acc: var(--mark-viridian); } body.desktop a { color: inherit; text-decoration: none; } body.desktop :focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; } /* ── the label register ─────────────────────────────────────── */ .k, .strip, .mb__app, .mb__menu a, .win__t, .win__meta, .btn, .cta, .fb, .fr__s, .fr__d, .dk-label, .dk-input label span, .mascot { font-family: var(--font-mono); font-variation-settings: "slnt" 0, "MONO" 1; font-weight: 500; text-transform: uppercase; letter-spacing: 0.09em; } .k { font-size: 0.66rem; color: var(--ink-50); margin: 0; display: inline-block; } /* ── staging note strip ─────────────────────────────────────── */ .stripwrap { background: var(--ground-2); border-bottom: 1px solid var(--hair); } .strip { max-width: var(--shell); margin: 0 auto; padding: 0.9rem var(--pad); font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.9; color: var(--ink-50); } .strip a { color: var(--ink-60); border-bottom: 1px solid var(--metal); } .strip a:hover { color: var(--acc); border-color: var(--acc); } /* ── the menu bar (sticky; home is always one click) ────────── */ .mb { position: sticky; top: 0; z-index: 20; background: var(--ground-2); border-bottom: 1px solid var(--hair); } .mb__in { max-width: var(--shell); margin: 0 auto; padding: 0.42rem var(--pad); display: flex; align-items: center; gap: 1.15rem; min-height: 2.4rem; } .mb__appwrap { position: relative; display: flex; align-items: center; gap: 0.35rem; flex: none; } body.desktop .mb__app, .mb__app { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.11em; color: var(--ink); flex: none; } .mb__app:hover { color: var(--acc); } .mb__more { all: unset; cursor: pointer; font-family: var(--font-mono); font-variation-settings: "slnt" 0, "MONO" 1; font-weight: 500; font-size: 0.6rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-60); background: var(--bar); border: 1px solid var(--metal); border-radius: 4px; padding: 0.3rem 0.5rem 0.26rem; line-height: 1; display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.15rem; } .mb__more::before { content: "menu"; } .mb__more:hover, .mb__more[aria-expanded="true"] { color: var(--cobalt); border-color: rgba(28, 57, 232, 0.45); background: rgba(28, 57, 232, 0.05); } .mb .mb__drop.win, .mb__drop { position: absolute; top: calc(100% + 0.5rem); left: 0; min-width: 15rem; z-index: 40; padding: 0.4rem 0; } .mb__drop[hidden] { display: none; } .mb__drop a { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-variation-settings: "slnt" 0, "MONO" 1; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-60); } .mb__drop a:hover { color: var(--ink); background: var(--ground-2); } .mb__drop .rule { margin: 0.35rem 0; } .mb__drop .cdot { transform: none; } .mb__menu { display: flex; gap: 1rem; min-width: 0; overflow-x: auto; scrollbar-width: none; } .mb__menu::-webkit-scrollbar { display: none; } .mb__menu a { font-size: 0.66rem; color: var(--ink-50); white-space: nowrap; } .mb__menu a:hover { color: var(--acc); } .mb__menu a[aria-current="page"] { color: var(--ink); } body.desktop .cta, .cta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; flex: none; font-size: 0.66rem; color: var(--cobalt); border: 1px solid transparent; border-radius: 4px; padding: 0.3rem 0.5rem; } .cta i { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); } .cta:hover { border-color: rgba(28, 57, 232, 0.35); background: rgba(28, 57, 232, 0.05); } @media (max-width: 759px) { .cta .cta__t { display: none; } .cta::after { content: "talk"; } } /* ── the desktop grid ───────────────────────────────────────── */ .desk { max-width: var(--shell); margin: 0 auto; padding: 2.1rem var(--pad) 5.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem 1.4rem; align-items: start; } .desk > * { grid-column: 1 / -1; min-width: 0; } /* ── the window ─────────────────────────────────────────────── */ @media (pointer: fine) and (min-width: 760px) { .win__bar { cursor: grab; } .win.is-dragging { z-index: 15; } .win.is-dragging .win__bar { cursor: grabbing; } .win.is-moved { position: relative; } } .win { background: var(--paper); border: 1px solid var(--metal); border-radius: 6px; box-shadow: 0 16px 30px -28px rgba(0, 0, 0, 0.55); scroll-margin-top: 3.4rem; min-width: 0; } .win__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.72rem; border-bottom: 1px solid var(--hair); background: var(--bar); border-radius: 5px 5px 0 0; } .dots { display: flex; gap: 5px; flex: none; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--metal); } .win__t { font-size: 0.63rem; letter-spacing: 0.1em; color: var(--ink-50); margin: 0; min-width: 0; overflow-wrap: anywhere; } .win__meta { margin-left: auto; font-size: 0.6rem; color: var(--ink-40); flex: none; } .win__b { padding: clamp(1rem, 2.4vw, 1.5rem); } /* ── type ───────────────────────────────────────────────────── */ .disp { font-family: var(--font-display); font-size: clamp(2.8rem, 7.4vw, 5.4rem); line-height: 0.88; letter-spacing: -0.01em; font-weight: 400; font-variation-settings: normal; color: var(--ink); margin: -0.1em 0 0; overflow-wrap: break-word; } .sub { font-family: var(--font-h2); font-weight: 400; font-variation-settings: "wght" 400; font-size: 1.05rem; line-height: 1.35; color: var(--ink-60); margin: 0.5rem 0 0; } .h2 { font-family: var(--font-h2); font-weight: 500; font-variation-settings: "wght" 500; font-size: 1.3rem; line-height: 1.25; color: var(--ink); margin: 0; } .prose { font-family: var(--font-body); font-size: var(--step-body); line-height: 1.62; color: var(--ink-85); max-width: 62ch; margin: 0 0 0.85em; } .prose:last-child { margin-bottom: 0; } .note { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.5; color: var(--ink-60); max-width: 56ch; margin: 0.85rem 0 0; } .rule { height: 1px; background: var(--hair); margin: 1.15rem 0; } /* ── controls ───────────────────────────────────────────────── */ .btn { font-size: 0.66rem; color: var(--ink-60); background: var(--bar); border: 1px solid var(--metal); border-radius: 4px; padding: 0.42rem 0.75rem; cursor: pointer; display: inline-block; } .btn:hover { color: var(--ink); border-color: var(--ink-40); } body.desktop .btn--send, .btn--send { color: var(--cobalt); border-color: var(--cobalt); background: var(--paper); } body.desktop .btn--send:hover, .btn--send:hover { color: var(--paper); background: var(--cobalt); border-color: var(--cobalt); } /* ── form fields (the desk asks) ────────────────────────────── */ .dk-input label, .dk-input { min-width: 0; } .dk-input span { display: block; font-size: 0.62rem; color: var(--ink-50); margin-bottom: 0.35rem; } .dk-input input, .dk-input select, .dk-input textarea { appearance: none; width: 100%; background: var(--paper); border: 1px solid var(--metal); border-radius: 4px; color: var(--ink); font-family: var(--font-body); font-size: 0.98rem; line-height: 1.4; padding: 0.55rem 0.7rem; } .dk-input input:hover, .dk-input select:hover, .dk-input textarea:hover { border-color: var(--ink-50); } .dk-input select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23161617' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.7rem center; padding-right: 2.2rem; } .dk-input textarea { resize: vertical; min-height: 6.5rem; } .dk-check { display: flex; align-items: baseline; gap: 0.55rem; padding: 0.35rem 0; font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-85); cursor: pointer; } .dk-check input { width: 12px; height: 12px; flex: none; accent-color: var(--cobalt); } /* ── ledger file rows (details/summary) ─────────────────────── */ .file { border-top: 1px solid var(--hair); } .file > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.9rem; align-items: baseline; padding: 0.7rem 0; cursor: pointer; list-style: none; } .file > summary::-webkit-details-marker { display: none; } .file > summary:hover .fr__n { color: var(--acc); } .fr__n { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; font-family: var(--font-h2); font-weight: 500; font-variation-settings: "wght" 500; font-size: 0.98rem; color: var(--ink-85); overflow-wrap: anywhere; transition: color 0.2s ease; } .tri { flex: none; width: 0; height: 0; border-left: 5px solid var(--metal); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transform: translateY(-1px); transition: transform 0.2s ease; } .file[open] > summary .tri { transform: translateY(-1px) rotate(90deg); } .cdot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--metal)); transform: translateY(-1px); } .fr__s { font-size: 0.6rem; color: var(--ink-50); text-align: right; white-space: nowrap; } .fr__s.is-live { color: var(--acc); } .fr__w { font-family: var(--font-body); font-size: 0.88rem; line-height: 1.4; color: var(--ink-60); min-width: 0; overflow-wrap: anywhere; } .fr__d { font-size: 0.6rem; color: var(--ink-40); text-align: right; white-space: nowrap; } .fr__b { padding: 0 0 1.3rem 1.05rem; } .hdr { display: none; } @media (min-width: 720px) { .file > summary, .hdr { grid-template-columns: minmax(0, 1.35fr) 6.2rem minmax(0, 1.5fr) 7.6rem; gap: 0.9rem; } .fr__s { text-align: left; } .hdr { display: grid; padding: 0 0 0.55rem; } .hdr .k { font-size: 0.6rem; color: var(--ink-40); } } /* ── folders on the ground ──────────────────────────────────── */ .fold { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 0.8rem 0.4rem; border-radius: 6px; cursor: pointer; text-align: center; border: 1px solid transparent; min-width: 0; } .fold:hover { background: rgba(0, 0, 0, 0.03); border-color: var(--hair); } .fold__icon { width: 44px; height: 32px; position: relative; flex: none; } .fold__icon::before { content: ""; position: absolute; inset: 4px 0 0; background: var(--paper); border: 1px solid var(--metal); border-radius: 3px; } .fold__icon::after { content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 7px; background: var(--paper); border: 1px solid var(--metal); border-bottom: 0; border-radius: 3px 3px 0 0; } .fold__n { font-family: var(--font-mono); font-variation-settings: "slnt" 0, "MONO" 1; font-size: 0.62rem; letter-spacing: 0.05em; color: var(--ink-60); overflow-wrap: anywhere; } /* ── images ─────────────────────────────────────────────────── */ .shot { margin: 0.9rem 0 0; } .shot img, .win__b > img, .rot img { display: block; width: 100%; height: auto; border: 1px solid var(--metal); border-radius: 4px; } .rot { position: relative; } .rot img { display: none; } .rot img.is-on { display: block; } .rot__cap { margin-top: 0.5rem; font-size: 0.62rem; } /* ── the one-line footer ────────────────────────────────────── */ .fb { border-top: 1px solid var(--hair); background: var(--ground-2); } .fb__in { max-width: var(--shell); margin: 0 auto; padding: 0.8rem var(--pad); display: flex; align-items: center; gap: 0.4rem 1.1rem; flex-wrap: wrap; font-size: 0.62rem; color: var(--ink-40); } @media (min-width: 900px) { .fb__in { flex-wrap: nowrap; } } .fb__in a { color: var(--ink-50); white-space: nowrap; } .fb__in a:hover { color: var(--acc); } body.desktop .fb__in .fb__cta, .fb__in .fb__cta { color: var(--cobalt); } .fb__spacer { flex: 1 1 auto; } /* ── human / machine mascot ─────────────────────────────────── */ .mascot { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 0.6rem; background: var(--paper); border: 1px solid var(--metal); border-radius: 6px; padding: 0.45rem 0.7rem; font-size: 0.6rem; color: var(--ink-60); box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.5); max-width: min(72vw, 30rem); } .mascot__line { display: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-transform: none; letter-spacing: 0.04em; } .mascot.is-machine .mascot__line { display: block; } .mascot button { all: unset; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-40); display: inline-flex; align-items: center; gap: 0.3rem; } .mascot button i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--metal); background: var(--paper); } .mascot button[aria-pressed="true"] { color: var(--ink); } .mascot button[aria-pressed="true"] i { background: var(--acc); border-color: var(--acc); } /* ── legacy pages on the desktop ──────────────────────────── Detail pages, about, cv, books keep their own inner layout; on the desktop they sit as one large window on the ground. */ body.desktop .page, body.desktop main.page { box-sizing: border-box; width: calc(100% - 2 * var(--pad)); max-width: calc(var(--shell) - 2 * var(--pad)); background: var(--paper); border: 1px solid var(--metal); border-radius: 6px; box-shadow: 0 16px 30px -28px rgba(0, 0, 0, 0.55); margin: 2rem auto 3rem; } body.desktop .page > .page-content { min-width: 0; } /* ── phones: the bar and the directory ──────────────────────── */ @media (max-width: 759px) { body.desktop { padding-bottom: 2.9rem; } .mb__menu { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent); padding-right: 1.6rem; } .mascot { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; border-width: 1px 0 0; background: var(--ground-2); box-shadow: none; padding: 0.7rem var(--pad); gap: 0.9rem; } .fb__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 1rem; padding: 1.1rem var(--pad) 1.3rem; } .fb__spacer { display: none; } }