/* lila.markerleap.com - one small stylesheet, mobile-first, light and dark. */ :root { color-scheme: light; --bg: #fbfaf8; --ink: #1c1c1a; --muted: #6b6b66; --line: #e4e2dc; --accent: #0f5c3f; --accent-ink: #ffffff; --card: #ffffff; --flash: #eef6f1; --tone-idea: #fbe6c2; --tone-idea-edge: #d98e2b; --tone-evidence: #d5ecdb; --tone-evidence-edge: #2e8b57; --tone-deep: #d9e2f6; --tone-deep-edge: #3b63c4; /* Page column. The landscapes carry 4-5 column tables that were cramped at 820px. */ --column: 980px; /* The dark palette, every value written once. The two rules under it switch the page onto these, so a colour is edited in one place and cannot drift between the way a reader arrives at dark and the other way. */ --d-bg: #17181a; --d-ink: #e8e6e1; --d-muted: #94928c; --d-line: #2c2e31; --d-accent: #4cc08a; --d-accent-ink: #10261b; --d-card: #1e2023; --d-flash: #1d2a23; --d-tone-idea: #3a2c16; --d-tone-idea-edge: #e0a24a; --d-tone-evidence: #17331f; --d-tone-evidence-edge: #4cc08a; --d-tone-deep: #1b2a46; --d-tone-deep-edge: #7da2f0; } /* Dark is the default (2026-09-01): a reader with no stored choice gets the dark page whatever the operating system says; `data-theme` is the choice made in the header, and choosing light wins over the default. */ :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--d-bg); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --card: var(--d-card); --flash: var(--d-flash); --tone-idea: var(--d-tone-idea); --tone-idea-edge: var(--d-tone-idea-edge); --tone-evidence: var(--d-tone-evidence); --tone-evidence-edge: var(--d-tone-evidence-edge); --tone-deep: var(--d-tone-deep); --tone-deep-edge: var(--d-tone-deep-edge); } :root[data-theme="dark"] { color-scheme: dark; --bg: var(--d-bg); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --card: var(--d-card); --flash: var(--d-flash); --tone-idea: var(--d-tone-idea); --tone-idea-edge: var(--d-tone-idea-edge); --tone-evidence: var(--d-tone-evidence); --tone-evidence-edge: var(--d-tone-evidence-edge); --tone-deep: var(--d-tone-deep); --tone-deep-edge: var(--d-tone-deep-edge); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } main { max-width: var(--column); margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2rem) 4rem; } /* Page width is ONE variable, set on , and the header, the main column and the footer all read it. They used to carry their own maximums, so on a wide page the wordmark and the nav sat inset from the content they belong to and the toolbar looked borrowed from another page. Whatever a page's width is, the shell matches it. Project pages are layout (tile grid, team column) rather than prose, so they get the wider one. */ body.wide { --column: 1140px; } /* document prose keeps a readable measure; tables and code get the full card and scroll inside it */ .doc p, .doc li, .doc blockquote { max-width: 75ch; } h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; margin: 1.5rem 0 0.5rem; } h2 { font-size: 1.1rem; margin: 2.5rem 0 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } a { color: var(--accent); text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } .lede { font-size: 1.05rem; max-width: 60ch; } .muted { color: var(--muted); font-size: 0.9rem; } .empty { color: var(--muted); margin-top: 2rem; } /* header and footer */ .top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.5rem; max-width: var(--column); margin: 0 auto; padding: 1.25rem clamp(1rem, 4vw, 2rem); } /* Neither the wordmark nor a nav item ever breaks inside itself; on a phone the whole nav drops under the wordmark instead, still on the right. The pill used to split "Start an" / "idea" at 390px. */ .wordmark { font-weight: 700; letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; } /* The place crumb beside the wordmark: Copundit goes to the homepage, the crumb back to this surface's index (Dashboard, or Sample for a guest). Separated by a quiet slash so the pair reads as one location line. */ .crumb { color: var(--muted); white-space: nowrap; margin-left: 0.6rem; } .crumb::before { content: "/"; color: var(--line); margin-right: 0.6rem; } .top nav { display: flex; align-items: baseline; gap: 1.25rem; margin-left: auto; white-space: nowrap; } /* The theme control sits among the nav links and reads as one of them. Its label is the theme now showing, and a click swaps it for the other. It is `hidden` in the markup and shown by the script that works it, so a reader without JavaScript is never given a dead control: that page follows the operating system, which is what every page did before this existed. */ .theme { margin: 0; padding: 0; font: inherit; color: var(--accent); background: none; border: 0; cursor: pointer; } .theme:hover, .theme:focus-visible { text-decoration: underline; } /* `button, .button` further down sets a display, which beats the browser's own rule for `hidden`, so the control has to hide itself: without this a reader with JavaScript off gets a button that does nothing. */ .theme[hidden] { display: none; } footer { max-width: var(--column); margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem); color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); } /* project cards on home */ .cards { display: grid; gap: 1rem; margin-top: 1.5rem; } .card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; color: var(--ink); } .card:hover { border-color: var(--accent); text-decoration: none; } .card h2 { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--ink); } .card p { margin: 0.5rem 0 0; color: var(--muted); } .card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; } /* The kind marker: which of the two kinds of project this is (idea or need), a category and not a state. It takes the corner the status light lost on 2026-08-25 and must not look like it: no dot, no per-value colour, no pill; both kinds print in the same quiet label type. It changes once, when a need converts to an idea. */ .kind { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); white-space: nowrap; } .kind.eyebrow { display: block; margin-top: 1.5rem; } .kind-choice { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.5rem 0 0; } .kind-choice legend { padding: 0 0.4rem; color: var(--muted); } /* The two radio labels are sentences, not field names: regular weight (the lead carries the emphasis), the radio in a hanging indent so wrapped lines align with the text, not under the button. The global input rule's width:100% is what pushed the radio onto its own line; undo it here. */ .kind-choice label { display: block; margin: 0.5rem 0; max-width: 60ch; font-weight: 400; position: relative; padding-left: 1.6rem; } .kind-choice input[type="radio"] { width: auto; position: absolute; left: 0; top: 0.28em; margin: 0; } /* The index groups cards by kind; the heading's sentence is the legend, so the cards carry no label. */ .kind-group > h2 { margin-bottom: 0.25rem; } .kind-group .meaning { margin: 0; color: var(--muted); } .kind-group .cards { margin-top: 1rem; } .kind.eyebrow + h1 { margin-top: 0.15rem; } .light { font-size: 0.8rem; white-space: nowrap; color: var(--muted); } .light.progressing { color: var(--accent); } .light.waiting-on-you { color: #b3560e; } /* the elevator page leads with the pitch itself; the standing note and old versions fold below it */ .pitch { background: var(--flash); border: 1px solid var(--accent); border-radius: 10px; margin: 1rem 0; padding: clamp(1.25rem, 4vw, 2rem); } .pitch p { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5; margin: 0 0 0.75rem; } details.doc.minor { padding: 0.75rem 1.25rem; color: var(--muted); font-size: 0.9rem; } details.doc.minor summary { cursor: pointer; } details.doc.minor[open] { padding-bottom: 1.25rem; } /* counters and artifact tiles on a project page. One grid; the three groups (the idea, the evidence, going deep) are told apart by tile background, with a legend above the grid. */ /* The project page's two dates. They used to be a bordered strip of 1.4rem numerals directly above the gate box, which put the least useful thing on the page in front of the only thing asking for a decision. One quiet line at the foot instead (2026-08-24). */ .dates { color: var(--muted); font-size: 0.85rem; margin: 2.5rem 0 0; } /* The top margin was the removed "The work" heading's; the legend now opens the section on its own. */ .legend { color: var(--muted); font-size: 0.85rem; margin: 2.25rem 0 0.75rem; display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; } .swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; margin-right: 0.4rem; vertical-align: -0.2rem; border: 1px solid var(--line); } .artifacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; } /* Every tile is exactly two lines, the name and its state, each on one line with an ellipsis rather than a wrap, so all tiles in a band share one height (2026-08-26). Whatever the ellipsis hides, and the reason a document cannot be asked for yet, is in the tile's title attribute, shown on hover, never in a third line. */ .artifact { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .artifact > *, .artifact strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .artifact.off { opacity: 0.45; } .artifact .muted { font-size: 0.85rem; } /* A group always begins on its own row, so the colour blocks read as three bands, not a mosaic. */ .artifact.group-start { grid-column-start: 1; } /* The ask is a link-styled button inside the state line, so a requestable tile is no taller than its neighbours. */ .artifact form { display: inline; margin: 0; } .docbar form { display: inline; margin: 0; } button.ask { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } /* the operator inbox: one block per person, newest first */ .person-trail { margin-bottom: 2rem; } .person-trail h2 { margin-bottom: 0.25rem; } .trail { list-style: none; padding: 0; margin: 0; } .trail li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; } .trail .when { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .trail .asked { border: 1px solid var(--accent); border-radius: 6px; padding: 0 0.4rem; font-size: 0.8rem; } .tone-idea { background: var(--tone-idea); border-left: 4px solid var(--tone-idea-edge); } .tone-evidence { background: var(--tone-evidence); border-left: 4px solid var(--tone-evidence-edge); } .tone-deep { background: var(--tone-deep); border-left: 4px solid var(--tone-deep-edge); } .docs { list-style: none; padding: 0; } .docs li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); } .badge { color: #b3560e; font-size: 0.85rem; margin: 0.5rem 0 0; } .activity { color: var(--muted); } /* forms */ label { display: block; margin: 1.25rem 0 0.35rem; font-weight: 600; } input, textarea { width: 100%; padding: 0.6rem 0.75rem; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; } input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); border-color: var(--accent); } details { margin-top: 1.5rem; } summary { cursor: pointer; color: var(--muted); } button, .button { display: inline-block; margin-top: 1rem; padding: 0.55rem 1.1rem; font: inherit; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; } button.primary, a.primary, .cta { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .cta { padding: 0.35rem 0.8rem; border-radius: 8px; } .cta:hover { text-decoration: none; opacity: 0.9; } .dictate-row { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.35rem; } .dictate-row button { margin-top: 0; } /* Working-name suggestions: quiet chips under the name input; a chip fills the input, typing always wins. */ .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } .chips button { margin: 0; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.9rem; } /* document reading and editing */ .crumbs { margin-top: 1.5rem; color: var(--muted); } .flash { background: var(--flash); border: 1px solid var(--accent); border-radius: 8px; padding: 0.6rem 1rem; margin-top: 1rem; } .doc { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.25rem, 4vw, 2.5rem); margin: 1rem 0; overflow-x: auto; } .doc h1 { margin-top: 0; } .doc h2 { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1.3rem; } /* A landscape's company profile opens with an H4 and no page break separates profiles, so the heading does the separating: set above body size with room above, mirroring the \large subsubsection in the PDF style. */ .doc h4 { font-size: 1.1rem; margin: 1.9rem 0 0.5rem; } .doc table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } .doc th, .doc td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; } .doc pre { background: var(--bg); padding: 0.75rem 1rem; border-radius: 8px; overflow-x: auto; } .doc code { font-size: 0.9em; } .editor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; line-height: 1.55; min-height: 60vh; } /* Contents block on long documents (generated, not authored: see render_md). */ .doc .toc-wrap { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 0.5rem 1rem; margin: 0 0 1.5rem; } .doc .toc-wrap summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; } .doc .toc-wrap .toc ul { list-style: none; margin: 0.5rem 0 0; padding-left: 0; } .doc .toc-wrap .toc ul ul { padding-left: 1.1rem; } .doc .toc-wrap .toc li { margin: 0.15rem 0; font-size: 0.95rem; line-height: 1.4; } .doc .toc-wrap .toc > ul > li > a { font-weight: 600; } .doc .toc-wrap a { color: var(--ink); text-decoration: none; } .doc .toc-wrap a:hover { color: var(--accent); text-decoration: underline; } /* Document action bar: edit, view as PDF, download. */ .docbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } /* The team column beside the pitch, not beside the tile grid. The lede holds a 60ch measure inside a 1140px shell, so the top right of the page was empty for the whole first screen while the grid below used the full width; the portraits fill it and the page gets shorter (2026-08-24). Display only; nothing argues from it. */ /* The faces sit directly beside the pitch, not out at the page edge: the lede holds a 60ch measure inside a 1140px shell, and pushing the portraits to the far right only moved the gap rather than filling it. */ .intro { display: flex; align-items: center; gap: 2.5rem; } /* The team takes the whole width the pitch leaves and centres in it, so two founders and five both look placed rather than left over, and it centres against the pitch instead of hanging from its first line. */ .team { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; gap: 1.25rem 1.75rem; } /* A portrait and a name, and nothing else. The role and the bio belong on the person's own page, one click away; a line of title under every face turns the team from three people into three job descriptions and pulls the eye off the work. Do not add a second line here. */ .person { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); gap: 0.4rem; } .person:hover { text-decoration: none; } .person:hover strong { color: var(--accent); } .person img, .portrait-blank { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--card); } @media (max-width: 700px) { .intro { flex-direction: column; gap: 1.5rem; } .team { justify-content: center; align-self: stretch; gap: 1rem 0.75rem; } /* Three founders share one row and a long name wraps under its face; before, the widest name pushed the third person onto a second row centred under the other two. */ .person { flex: 1 1 96px; max-width: 9rem; min-width: 0; } } .person-page { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1rem; } .person-page .portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); margin-top: 1.5rem; } @media (max-width: 700px) { .person-page { grid-template-columns: 1fr; } } /* The evidence approval gate: shown while the manifest carries `waiting: evidence approval`. */ .gate { background: var(--flash); border: 1px solid var(--accent); border-radius: 10px; padding: 1rem 1.25rem; margin-top: 1.5rem; } .gate p { margin: 0; } .gate button { margin-top: 0.75rem; } /* The idea box on "Start an idea" and on a project's "write it": the page's one purpose, so it takes the viewport. A proportional font, not the editor's monospace: this is talking, not markdown. */ textarea.idea { min-height: 55vh; font: inherit; line-height: 1.6; resize: vertical; } label.inline { display: inline; margin: 0; } .dictate-row { margin-top: 1.5rem; } .count { margin: 0.35rem 0 0; min-height: 1.2rem; }