/* CarbonZero — the styles of the pages that have not converted yet. **This file is being emptied, one template at a time.** The design system is `design.css`: one set of classes, named for what a thing is, meaning the same thing on every page. What is left in here is what the templates that have not been converted to it still need, and it goes as each one converts (ADR 0035, ticket 19). When the last rule goes, so does the file. Every rule in here is scoped to the kind of page it was written for — the class is on , written by the page template, and a page can wear more than one: a project page is `reading project-page`, a team's own space is `operating inside space`. **A converted page wears none of them**, so nothing in this file can reach it. See § the faces, below. This file is linked after `design.css`, so where the two describe the same thing at the same specificity these rules win and an unconverted page keeps exactly what it had. Nothing links this file by name. The template links it with a version worked out from these very bytes, so changing one character here changes the address, and no browser can hand a returning visitor the old file. */ /* ── the faces ────────────────────────────────────────────────────────────── .reading a public page not yet converted — the serif face .project-page + one team's published page .operating every page somebody works in — the sans face .application + the founder's application form .inside + a page behind a sign-in .space + a team's own space: the page editor and the money asks .going-live + the last screen before a project is published Converted (they wear no face at all, and are styled by design.css alone): the homepage, and the page that explains applying. ───────────────────────────────────────────────────────────────────────── */ /* ── what design.css says that a page in here must not hear ────────────────── design.css describes the page itself — its box model, how text is sized, how it is smoothed — for every page, because there is no page the design system does not eventually describe. These three lines put back what a page that has not converted had before design.css existed, and **all three go when the last template converts**. ──────────────────────────────────────────────────────────────────────────── */ .operating, .operating * { box-sizing:content-box; } .operating { -webkit-text-size-adjust:auto; } .operating body { -webkit-font-smoothing:auto; } /* ── what is left for the pages that have not converted ───────────────────── The chrome — header, footer, drawer, buttons, dropdown — is **not** in here any more. It is described once, in design.css, in the shared vocabulary, and every page wears it from there including the ones below. What is left here is only what a page that has not converted still needs and the design system does not yet describe. ──────────────────────────────────────────────────────────────────────────── */ .reading .col { max-width:var(--measure);margin:0 auto;padding-left:1.5rem; padding-right:1.5rem; } .reading .lead { font-family:var(--sans);font-size:.74rem;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);margin:0 0 1rem; } .reading h2.sec { font-size:1.6rem;font-weight:normal;line-height:1.18;margin:0 0 .8rem; } /* a page of prose the founder reads before applying — same measure, same scale as the homepage's reading paragraphs */ .reading .doc { padding-bottom:3rem; } .reading .doc h1 { font-size:1.6rem;font-weight:normal;line-height:1.18;margin:2.4rem 0 .9rem; } .reading .doc p { font-size:1.08rem;line-height:1.66;margin:0 0 1.3rem; } /* ── a team's published page ─────────────────────────────────────────────────── */ .project-page .pp { padding-bottom:3rem; } .project-page .pp h1 { font-size:clamp(1.9rem,6vw,2.6rem);font-weight:normal;line-height:1.14; margin:2.6rem 0 0; } .project-page .pp .one-liner { font-size:1.15rem;line-height:1.5;color:var(--soft);margin:.7rem 0 0; } .project-page .pp .stack { margin-top:2.6rem; } .project-page .pp h2 { font-size:1.6rem;font-weight:normal;line-height:1.2;margin:2.8rem 0 .9rem; } .project-page .pp h3 { font-size:1.18rem;font-weight:normal;line-height:1.3;margin:2rem 0 .6rem; color:var(--soft); } .project-page .pp p.passage { font-size:1.08rem;line-height:1.66;margin:0 0 1.3rem;white-space:pre-wrap; } .project-page .pp figure { margin:2.2rem 0; } .project-page .pp figure img { display:block;width:100%;height:auto;border-radius:2px; } .project-page .pp figcaption { font-family:var(--sans);font-size:.82rem;color:var(--faint); margin-top:.6rem; } .project-page .pp .asks-of-time { border-top:1px solid var(--line);margin-top:3rem;padding-top:1.6rem; } .project-page .pp .asks-of-time p.asks { font-size:1.02rem;line-height:1.62;margin:0;white-space:pre-wrap; } /* what the team is asking money for. One block per request, each carrying the fixed disclosure — the amount the team authored is the largest number on it, and the approximate figures are visibly smaller and quieter, because only one of them counts */ .project-page .pp .money { border-top:1px solid var(--line);margin-top:3rem;padding-top:1.6rem; } .project-page .pp .ask { padding:1.6rem 0 .4rem; } .project-page .pp .ask + .ask { border-top:1px solid var(--line); } .project-page .pp .ask h3.ask-title { font-size:1.28rem;color:var(--ink);margin:0 0 .5rem; } .project-page .pp .ask p.amount { font-family:var(--sans);font-size:1.28rem;margin:0 0 .2rem; } .project-page .pp .ask p.amount .approx { font-size:.86rem;color:var(--faint);margin-left:.5rem;white-space:nowrap; } .project-page .pp .ask p.approx-note { font-family:var(--sans);font-size:.78rem;color:var(--faint); margin:0 0 1.2rem; } .project-page .pp .ask p.field-lead { font-family:var(--sans);font-size:.74rem;letter-spacing:.09em; text-transform:uppercase;color:var(--faint);margin:1.2rem 0 .35rem; } .project-page .pp .ask p.prose { font-size:1.02rem;line-height:1.62;margin:0;white-space:pre-wrap; } .project-page .pp .ask p.closed { font-family:var(--sans);font-size:.85rem;color:var(--faint); margin:1.2rem 0 0; } .project-page .pp .ask p.disclosure { font-family:var(--sans);font-size:.82rem;line-height:1.55;color:var(--soft); border-left:2px solid var(--line);padding-left:.9rem;margin:1.4rem 0 0; } /* the promise, at the foot of the page and made to the reader */ .project-page .pp .pledge-band { border-top:1px solid var(--line);margin-top:3rem;padding-top:1.6rem; } .project-page .pp .pledge-band p.pledge { font-size:1.02rem;line-height:1.66;margin:0;font-style:italic; color:var(--soft);border-left:2px solid var(--line);padding-left:.9rem; } .project-page .pp .pledge-band p.own-rhythm { font-family:var(--sans);font-size:.85rem;line-height:1.55; color:var(--faint);margin:1rem 0 0; } /* the video, before anybody has asked to watch it: the video's own still, fetched by our server and served from this host (ADR 0033), over a panel this site drew for where there is no still. Either way no request goes to YouTube or Vimeo on load (ADR 0010) */ .project-page .video { margin:2.2rem 0; } .project-page .video a.facade { position:relative;isolation:isolate;overflow:hidden;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:.6rem; aspect-ratio:16/9;background:var(--ink);color:#fff;text-decoration:none; border-radius:2px;font-family:var(--sans); } .project-page .video a.facade img.still { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0; } /* enough shade for white words over a bright still, and nothing more: the picture is the point of fetching it */ .project-page .video a.facade.with-still::after { content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:1; } .project-page .video a.facade .play { font-size:2.2rem;line-height:1;position:relative;z-index:2; } .project-page .video a.facade .watch { font-size:.9rem;letter-spacing:.02em;position:relative;z-index:2; } .project-page .video a.facade.with-still .play, .project-page .video a.facade.with-still .watch { text-shadow:0 1px 3px rgba(0,0,0,.55); } .project-page .video iframe { display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:2px; } /* how long since the team said anything, at the foot where somebody who has read the asks arrives at it. The flag is the one line in the reading face — it is meant to be seen — and the note under it is the quietest thing on the page */ .project-page .pp .last-word { border-top:1px solid var(--line);margin-top:3rem;padding-top:1.6rem; } .project-page .pp .last-word p.since { font-size:1.02rem;line-height:1.6;margin:0; } .project-page .pp .last-word p.flagged { font-size:1.02rem;line-height:1.6;margin:.8rem 0 0; border-left:2px solid var(--ink);padding-left:.9rem; } .project-page .pp .last-word p.note { font-family:var(--sans);font-size:.82rem;line-height:1.55; color:var(--faint);margin:1rem 0 0; } .project-page .preview-banner { background:var(--ink);color:#fff;font-family:var(--sans);font-size:.85rem; line-height:1.5;padding:.9rem 1.5rem;text-align:center; } .project-page .preview-banner a { color:#fff;text-decoration:underline;text-underline-offset:3px; } /* ── the operating face ──────────────────────────────────────────────────────── */ .operating body { margin:0;background:#fff;color:#141414; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI', Helvetica,Arial,sans-serif; font-size:16px;line-height:1.5;padding:2.5rem 1.5rem;max-width:33rem; margin:0 auto; } .operating h1 { font-size:1.4rem;font-weight:600;margin:0 0 1.6rem; } .operating h2 { font-size:1.05rem;font-weight:600;margin:2.4rem 0 .6rem; } .operating label { display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em; color:#6f6f6f;margin:1.1rem 0 .3rem; } .operating input { width:100%;box-sizing:border-box;font:inherit;padding:.6rem .7rem; border:1px solid #141414;border-radius:2px;background:#fff; } .operating button { font:inherit;font-size:.9rem;margin-top:1.4rem;padding:.6rem 1.6rem; background:#141414;color:#fff;border:1px solid #141414;border-radius:2px; cursor:pointer; } .operating .note { font-size:.86rem;color:#4a4a4a;margin:.8rem 0 0; } .operating .problem { font-size:.86rem;color:#141414;border-left:2px solid #141414; padding-left:.85rem;margin:1rem 0 0; } .operating .quiet { font-size:.85rem;color:#8a8a8a;margin-top:2.4rem; } .operating .quiet a { color:#8a8a8a; } .operating .empty { font-size:.9rem;color:#6f6f6f;border-top:1px solid #e6e6e6; padding:.9rem 0 0;margin-top:.6rem; } .operating .row { border-top:1px solid #e6e6e6;padding:.75rem 0;font-size:.86rem; } .operating .row .label { font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#6f6f6f; } .operating textarea { width:100%;box-sizing:border-box;font:inherit;padding:.6rem .7rem; border:1px solid #141414;border-radius:2px;background:#fff; } /* a box beside words somebody reads and means, rather than a field label: the box on the left, and the words in the same face and case as what a founder types into a field, not the small grey capitals a label wears */ .operating .tick { display:flex;align-items:flex-start;gap:.6rem;margin:0;cursor:pointer; font:inherit;text-transform:none;letter-spacing:0;color:#141414; } .operating .tick input { width:1.1rem;height:1.1rem;flex:none;margin:.25rem 0 0;accent-color:#141414; } /* the autosave word, in the corner of the eye: it says what just happened and asks for nothing */ .operating .save-state { font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#6f6f6f; min-height:1.2em;margin:1.6rem 0 0; } .operating .answer { font-size:.95rem;white-space:pre-wrap;margin:.2rem 0 1.4rem; } /* ── the application form ────────────────────────────────────────────────────── */ .application a { color:#141414; } .application .part { margin-top:3.6rem; } .application .part > h2 { font-size:1.15rem;margin:0 0 .6rem; } .application .part > .note { margin:0 0 .5rem; } .application .q { border-top:1px solid #e6e6e6;padding-top:1.6rem;margin-top:2rem; } /* a question that carries on the one above it — no rule and no gap, so the two read as one list */ .application .q.continued { border-top:0;padding-top:0;margin-top:0; } .application .q .q-label { display:block;font-size:1.02rem;font-weight:600;text-transform:none; letter-spacing:0;color:#141414;margin:0 0 .4rem; } /* the asterisk that marks a question which has to be answered — beside the label, never in place of it, and no underline of the abbr's own */ .application .q .q-label .required { color:#8a1c1c;text-decoration:none;border:0;margin-left:.15rem; } .application .q .ask { font-size:.95rem;color:#4a4a4a;margin:0 0 .9rem; } .application .q .hint { font-size:.82rem;color:#6f6f6f;margin:.45rem 0 0; } .application .q select { width:100%;box-sizing:border-box;font:inherit;padding:.6rem .7rem; border:1px solid #141414;border-radius:2px;background:#fff; } /* boxes to tick: a column, one to a line. The words are part of the target, which is what the label around them is for. */ .application .q ul.picks { list-style:none;margin:0;padding:0; } .application .q ul.picks li { margin:0; } .application .q ul.picks .tick { padding:.45rem 0; } /* documents — the list of what is attached, and the one form that adds another */ .application ul.files { list-style:none;margin:.6rem 0 0;padding:0; } .application ul.files li { border-top:1px solid #e6e6e6;padding:.7rem 0;display:flex; align-items:baseline;gap:.6rem;flex-wrap:wrap; } .application ul.files .what { flex:1;min-width:12rem; } .application ul.files .filename { font-size:.8rem;color:#6f6f6f;display:block; } .application .docs ul.needed { margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem; } .application .docs .add { border-top:1px solid #e6e6e6;margin-top:1.4rem;padding-top:.4rem; } .application .docs .add input[type=file] { border:none;padding:.6rem 0; } .application .docs button.remove { font-size:.75rem;margin:0;padding:.25rem .7rem;background:#fff; color:#4a4a4a;border-color:#e6e6e6; } /* the end of the form: what submitting does, and the button. Set off by a rule because it is the one irreversible thing on the page. */ .application .submit { border-top:2px solid #141414;padding-top:1.6rem; } .application .submit button.send { margin-top:1rem; } .application .not-sent { border-left:2px solid #141414;padding:0 0 0 1rem; } .application .not-sent ul.missing { margin:.4rem 0 .9rem;padding-left:1.1rem; } .application .not-sent ul.missing a { color:#141414; } /* what the gate decided, in the admin's own words */ .application .decided { border-left:2px solid #141414;padding:0 0 0 1rem; } .application .decided h2 { margin-top:0; } .application .save-state { position:fixed;right:1rem;bottom:1rem;margin:0;background:#fff; border:1px solid #e6e6e6;border-radius:2px;padding:.35rem .6rem; } .application .save-state:empty { display:none; } /* ── behind a sign-in ────────────────────────────────────────────────────────── */ .inside a { color:#141414; } .inside .row { display:flex;gap:.8rem;align-items:baseline;flex-wrap:wrap; } .inside .row .what { flex:1;min-width:14rem;font-size:1rem; } .inside .row .when { font-size:.8rem;color:#6f6f6f;display:block; } .inside .row form { display:inline; } .inside .row button { margin:0;font-size:.78rem;padding:.35rem .8rem;background:#fff; color:#141414; } .inside .sent { border-bottom:1px solid #e6e6e6;padding-bottom:1.2rem;font-size:.9rem; color:#4a4a4a; } .inside .sent div { margin:.2rem 0; } .inside ul.files { list-style:none;margin:.4rem 0 0;padding:0; } .inside ul.files li { border-top:1px solid #e6e6e6;padding:.7rem 0; } .inside ul.files .filename, .inside ul.files .late { font-size:.8rem;color:#6f6f6f;display:block; } .inside .notes textarea { margin-top:.4rem; } .inside .done { border-top:2px solid #141414;margin-top:3rem;padding-top:.4rem; } .inside .back { font-size:.85rem;margin:0 0 1.6rem; } .inside .gate { border-top:2px solid #141414;margin-top:3rem;padding-top:.4rem; } .inside .gate form { margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid #e6e6e6; } .inside .gate textarea { margin-top:.3rem; } .inside .gate button { margin-top:.9rem; } .inside .gate .deny button { background:#fff;color:#141414; } /* one funding request as an admin reads it — and the one lever */ .inside .ask-seen { border-top:1px solid #e6e6e6;padding:1.1rem 0 1.2rem; } .inside .ask-seen .what { font-size:1rem; } .inside .ask-seen .when { font-size:.8rem;color:#6f6f6f;display:block;margin-top:.15rem; } .inside .ask-seen form { margin-top:1rem; } .inside .ask-seen textarea { margin-top:.3rem; } .inside .ask-seen button { background:#fff;color:#141414;font-size:.8rem;padding:.35rem .8rem; } /* CarbonZero having stopped something, wherever that is read: on the team's own space, on the going-live screen, and beside an identity on the blocklist */ .inside .stopped { border-left:2px solid #141414;padding-left:1rem;margin:1.4rem 0 0; } .inside .stopped h2 { margin-top:0; } .inside .stopped p { font-size:.95rem;line-height:1.6; } .inside .levers { border-top:2px solid #141414;margin-top:3rem;padding-top:.4rem; } .inside .levers form { margin:1.8rem 0 0;padding-top:1.4rem;border-top:1px solid #e6e6e6; } .inside .levers textarea { margin-top:.3rem; } .inside .levers button { margin-top:.9rem;background:#fff;color:#141414; } .inside .blocked { border:1px solid #141414;padding:1rem 1.1rem;margin:1.4rem 0; } .inside .blocked h2 { margin-top:0; } .inside .blocked p { font-size:.95rem;line-height:1.6; } .inside .identity { font-size:.9rem;color:#4a4a4a;display:block; } /* ── a team's own space ──────────────────────────────────────────────────────── */ .space .piece { border-top:1px solid #e6e6e6;padding:1rem 0 1.4rem; } .space .piece .kind { font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#6f6f6f; } .space .piece .top { display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap; margin-bottom:.5rem; } /* the label on its own line, so the three buttons share the next one rather than wrapping one at a time on a phone */ .space .piece .top .kind { flex:1 0 100%; } .space .piece form.moves { display:inline; } .space .piece form.moves button, .space .piece form.drop button { margin:0 .4rem 0 0;font-size:.75rem;padding:.25rem .7rem;background:#fff; color:#4a4a4a;border-color:#e6e6e6; } .space .piece form.drop { display:inline; } .space .piece input, .space .piece textarea { margin-bottom:.2rem; } .space .piece button.save { margin-top:.6rem; } .space .piece img.shown { display:block;max-width:16rem;width:100%;height:auto;margin:0 0 .8rem; border-radius:2px; } .space .adding { border-top:1px solid #e6e6e6;margin-top:1.4rem;padding-top:.6rem; } .space .adding form { margin-bottom:1.2rem; } .space .adding button { margin:.4rem .4rem 0 0; } .space .adding input[type=file] { border:none;padding:.6rem 0; } .space .preview-link { font-size:.9rem;margin:.8rem 0 0; } .space .ask { border-top:1px solid #e6e6e6;padding:1.2rem 0 1.4rem; } .space .ask .state { font-size:.8rem;color:#6f6f6f;margin:0 0 .6rem; } .space .ask .state.collecting { color:#141414; } .space .ask .stopped { font-size:.86rem;border-left:2px solid #141414;padding-left:.85rem; margin:0 0 1rem; } .space .ask .amount-row { display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap; } /* the two halves of the amount share the row on a phone, and the currency gets the wider half — its name has to stay readable inside the chooser */ .space .ask .amount-row .sum { flex:1 1 7rem; } .space .ask .amount-row .money { flex:1 1 12rem; } .space .ask select { width:100%;box-sizing:border-box;font:inherit;padding:.6rem .7rem; border:1px solid #141414;border-radius:2px;background:#fff; } .space .ask .approx { font-size:.8rem;color:#6f6f6f;margin:.4rem 0 0; } .space .ask .guide { font-size:.84rem;line-height:1.5;color:#4a4a4a; border-left:2px solid #e6e6e6;padding-left:1rem;margin:.5rem 0 0; } .space .ask .guide ul { margin:.3rem 0 0;padding-left:1.1rem; } .space .ask .fixed { font-size:.82rem;line-height:1.55;color:#4a4a4a; border-left:2px solid #e6e6e6;padding-left:1rem;margin:1.2rem 0 0; } .space .ask .acts { margin-top:1.2rem; } .space .ask .acts form { display:inline; } .space .ask .acts button { margin:0 .4rem 0 0;font-size:.78rem;padding:.35rem .8rem;background:#fff; color:#141414; } .space .ask button.save { margin-top:1rem; } /* ── going live ──────────────────────────────────────────────────────────────── */ .going-live .check { border-top:1px solid #e6e6e6;padding:.9rem 0; } .going-live .check .name { font-size:.95rem; } .going-live .check .state { font-size:.8rem;color:#6f6f6f;display:block;margin-top:.15rem; } .going-live .check.met .state { color:#141414; } .going-live .pledge { border-left:2px solid #141414;padding-left:.9rem;margin:1.2rem 0 0; font-size:.95rem;line-height:1.6; } .going-live .signing { margin-top:1.6rem; } /* the signing tick is the shared one, standing off from what it follows */ .going-live .signing .tick { font-size:.95rem;margin-top:1.4rem; } .going-live .live { font-size:1rem;margin:0 0 .4rem; } .going-live .down { border-top:2px solid #141414;margin-top:3rem;padding-top:.4rem; } .going-live .down button { background:#fff;color:#141414; }