:root{ --being:#d4b88c; --thinking:#e585a1; --relating:#ef4136; --collaborating:#ff7e2a; --acting:#661a30; --bg:#FAF7F5; --surface:#FFFFFF; --ink:#141210; --ink-soft:rgba(20,18,16,.66); --ink-faint:rgba(20,18,16,.45); --divider:rgba(20,18,16,.1); /* The hover wash, used by the support button and the newsletter's. Matched between themes in ΔL* rather than in percent: sRGB's curve is steep near black and flat near white, so the same mix moves the two by visibly different amounts. 9% here and 7% on dark both land near ΔL* 7. */ --wash:color-mix(in srgb, var(--ink) 9%, transparent); /* Attention, not danger: something needs a second look and nothing has gone wrong. Dark takes a lighter tone — the rust reads as brown on near-black. */ --warn:#B4451F; --max-w:672px; } :root[data-theme="dark"]{ --bg:#17130F; --surface:#221D18; --ink:#F5F0EA; --ink-soft:rgba(245,240,234,.68); --ink-faint:rgba(245,240,234,.46); --divider:rgba(255,255,255,.12); --wash:color-mix(in srgb, var(--ink) 7%, transparent); --warn:#E3A76F; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:'Inter',system-ui,-apple-system,sans-serif; padding-inline:24px; background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; transition:background-color .3s ease, color .3s ease; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } a{ color:inherit; } button{ font-family:inherit; } button:focus-visible, a:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; } /* Column width and centring only — the page gutter lives on , and deliberately NOT here. Three separate rules (footer, .doc, .site-nav) set a `padding` shorthand on a .wrap element; class specificity meant each one silently wiped the gutter out. Keeping it off .wrap makes that impossible, so vertical padding can be set freely below. */ .wrap{ max-width:var(--max-w); margin:0 auto; } /* ---------- Nav ---------- */ .site-nav{ display:flex; align-items:center; gap:10px; padding:28px 0 0; } /* Brand mark — the five dimension symbols above the name, as on the app's start screen (see apps/web/app: .brand-mini). */ .brand{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-decoration:none; color:inherit; } .brand-icons{ display:flex; align-items:center; gap:6px; } .brand-icons img{ width:18px; height:18px; object-fit:contain; } .brand{ gap:5px; } .brand-name{ font-weight:800; font-size:13px; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; color:var(--ink); } /* The edition sits under the wordmark, the way the app stacks POCKET/EDITION under the lockup on its splash. Lighter and un-bolded on purpose: the Foundation's name is the brand, and this says which edition of it you are looking at — a distinction the app makes visually and the site did not. */ .brand-edition{ font-weight:500; font-size:12px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--ink-soft); margin-top:-2px; } /* ---------- Hero ---------- */ .hero{ padding:64px 0 56px; text-align:center; } .eyebrow{ font-size:13px; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); margin:0 0 18px; } .hero h1{ font-size:clamp(30px,6vw,44px); font-weight:800; line-height:1.12; letter-spacing:-.01em; margin:0 auto 20px; max-width:15ch; } .hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:52ch; margin:0 auto 32px; } .cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; } .hero .cta-row{ justify-content:center; } .btn-primary{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); font-weight:700; font-size:15px; padding:14px 24px; border-radius:100px; text-decoration:none; border:none; cursor:pointer; } /* The mark on a filled button takes the button's own text colour rather than the Relating red: red on ink is unreadable, and on the dark theme the button inverts to a light fill where a red mark would shout. currentColor means it is white on black in one theme and black on white in the other, without a second rule. */ /* `fill` for a filled mark, and nothing forced for a stroked one: HugeIcons draws with `stroke="currentColor" fill="none"` on the path itself, so setting fill here would flood its counters. Both kinds take the button's colour through currentColor either way. */ .btn-mark{ flex:none; } .btn-mark[data-fill]{ fill:currentColor; } /* The same pill as .btn-primary, outlined. For a real action that is not the page's main one — the receipt on the thanks page beside "Try the prototype". */ .btn-outline{ display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--ink); border:1px solid var(--ink-faint); border-radius:100px; padding:13px 23px; font-weight:600; font-size:15px; text-decoration:none; transition:background-color .2s ease, border-color .2s ease; } .btn-outline:hover{ border-color:var(--ink); background:var(--wash); } /* Store links, borrowed from photodove.one. Outlined rather than filled: the filled button is the one thing on the page you can actually do right now (open the prototype), and two solid buttons beside it would compete with it while promising something that does not exist yet. They are anchors, not disabled buttons — a control that looks interactive and does nothing is worse than one that takes you to the section explaining what is coming. Swap the href for the listing when each store goes live and drop .soon; the filled state is already defined. */ .store-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; } .store-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:var(--bg); font-weight:600; font-size:15px; padding:12px 22px; border-radius:100px; text-decoration:none; border:1px solid transparent; } .store-btn.soon{ background:transparent; color:var(--ink-soft); border-color:var(--divider); font-weight:500; } .store-btn.soon:hover{ color:var(--ink); border-color:var(--ink-faint); } /* The ten languages, in their own names. A list rather than a sentence: it is a list, and a screen reader saying "list, ten items" is the fact the line is there to convey. The bullets are off; the separators are drawn between items so the last one does not trail one. */ .langs{ list-style:none; padding:0; margin:18px auto 0; max-width:52ch; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 0; font-size:14px; color:var(--ink-faint); line-height:1.6; } /* Trailing, not leading. `li + li::before` put the separator at the START of every wrapped line, which reads as a bullet the list does not have. ::after leaves it at the end of a line instead, where it looks like the sentence continuing — which it is. */ .langs li:not(:last-child)::after{ content:"·"; margin:0 8px; color:var(--divider); } /* The support card, under the languages. Bordered rather than filled: the hero's one solid button is the prototype, and a second filled block here would compete with the thing the page is actually for. */ .support{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; text-align:left; margin:30px auto 0; max-width:46ch; padding:16px 20px; border:1px solid var(--divider); border-radius:18px; background:var(--surface); } /* Type sized to the step and value cards further down the page, so the card reads as one of the page's cards rather than as an advertisement inserted into it. */ .support-text{ flex:1 1 240px; } .support-text h3{ font-size:17px; font-weight:800; margin:0 0 6px; } .support-text p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .support-mark{ flex:none; color:var(--relating); fill:currentColor; } /* Relating, of the five — the only one a heart can borrow without the borrowing being the point, and fixed in both themes like every dimension colour. One colour rather than two because the hand and the heart are drawn as a single intertwined shape: there is no heart to colour separately, which is also why this one reads as an embrace rather than as an offering. */ /* Outlined, and outlined at a weight you can see. The first version borrowed the store buttons' 10% border so it would not compete with "Try the prototype" — but those buttons say "Coming to App Store", which is not something anybody can do, so the whole hero drifted quiet and this went past restrained into invisible. Ink rather than the mark's red: red at button size stops being a heart and starts being an alarm. */ .support-btn{ flex:none; display:inline-flex; align-items:center; background:transparent; color:var(--ink); border:1px solid var(--ink-faint); border-radius:100px; padding:10px 20px; font-size:15px; font-weight:600; text-decoration:none; transition:background-color .2s ease, border-color .2s ease; } /* A wash on hover — enough to answer the pointer, not enough to become a second filled button. The flat fallback comes first for anything that has not met color-mix. */ .support-btn:hover{ border-color:var(--ink); background:var(--bg); background:var(--wash); } .shape-row{ display:flex; gap:8px; margin:36px 0 0; } .shape-row img{ width:34px; height:34px; } /* ---------- Sections ---------- */ section{ padding:52px 0; border-top:1px solid var(--divider); } .section-title{ font-size:22px; font-weight:800; margin:0 0 8px; letter-spacing:-.005em; text-align:center; } .section-sub{ font-size:15px; color:var(--ink-soft); margin:0 0 36px; text-align:center; } /* Card containers for the step / value grids. */ .step, .value{ background:var(--surface); border:1px solid var(--divider); border-radius:18px; padding:24px; } .steps{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } @media (max-width:560px){ .steps{ grid-template-columns:1fr; } } .step h3{ font-size:17px; font-weight:800; margin:0 0 6px; } .step p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .values{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } @media (max-width:560px){ .values{ grid-template-columns:1fr; } } .value h3{ font-size:16px; font-weight:800; margin:0 0 6px; } .value p{ font-size:14.5px; color:var(--ink-soft); margin:0; } /* The translations directory reuses the landing's .values card grid; these make a whole card a link without it dressing like one. */ .doc-group{ margin-top:8px; border-top:none; padding-top:12px; } a.value{ display:block; color:inherit; text-decoration:none; } a.value:hover, a.value:focus-visible{ border-color:var(--ink-faint); } /* The guide page: a reading reference — one section per dimension, one row per skill. The icons carry the five colours (they are the brand, identical in both themes); text stays ink for contrast. --dim is set per section by the generator and deliberately unused for text. Every text rule is `.doc`-prefixed on purpose: the page lives inside main.doc, whose generic `.doc h2` / `.doc p` (further down) otherwise win the tie and restyle these — that happened, and it looked like the title hanging off its icon. */ .lang-nav{ display:flex; flex-wrap:wrap; gap:6px 14px; margin:22px 0 8px; font-size:13.5px; } .lang-nav a{ color:var(--ink-soft); text-decoration:none; } .lang-nav a:hover, .lang-nav a:focus-visible{ color:var(--ink); } .lang-nav a[aria-current="page"]{ color:var(--ink); font-weight:800; } .dim{ padding:34px 0 30px; border-top:1px solid var(--divider); scroll-margin-top:16px; } .dim-head{ display:flex; align-items:center; gap:14px; margin:0 0 12px; } .dim-head img{ width:56px; height:56px; flex:none; } .doc .dim-head h2{ font-size:22px; font-weight:800; margin:0; letter-spacing:-.005em; } .doc .dim-tag{ font-size:15px; font-weight:600; color:var(--ink-soft); margin:2px 0 0; } .doc .dim-desc{ font-size:15px; color:var(--ink-soft); margin:0 0 24px; } .skills{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; } .skills li{ display:flex; align-items:flex-start; gap:14px; scroll-margin-top:16px; } .skills img{ width:44px; height:44px; flex:none; margin-top:2px; } .doc .skills h3{ font-size:16px; font-weight:800; margin:0 0 3px; } .doc .skill-code{ color:var(--ink-soft); font-weight:600; } .doc .skills p{ font-size:14.5px; color:var(--ink-soft); margin:0; } .doc .provenance{ font-size:13.5px; color:var(--ink-soft); margin:30px 0 26px; } .not-list{ display:flex; flex-wrap:wrap; gap:10px 14px; font-size:14.5px; color:var(--ink-soft); padding:0; margin:0; list-style:none; } .not-list li:before{ content:"— "; color:var(--ink-faint); } .closing{ text-align:center; padding:56px 0 64px; border-top:1px solid var(--divider); } .closing .cta-row{ justify-content:center; } /* Sits under the section-sub, reaching into its 36px bottom margin. */ .read-guide{ margin:-14px 0 36px; } /* Light-only logo export — keep it on its own light ground in dark theme. */ .closing-logo{ max-width:400px; margin:0 auto 30px; background:#FAF7F5; border-radius:16px; padding:26px 30px; } .closing-logo img{ display:block; width:100%; height:auto; } /* Read aloud, never drawn: the sign-up field has a visible placeholder, which is not a label — a placeholder disappears the moment somebody types. */ .visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ---------- Newsletter ---------- */ /* Above the footer's own lines rather than inside them: it is the one thing down here somebody can do, and it should not read as small print. */ /* Centred, and ruled below as well as above: the footer already draws the line over it, so a second border here made two. The line underneath closes the block off, which is what keeps the nav and the small print reading as the footer rather than as more of this. */ .signup{ display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:0 0 30px; margin-bottom:30px; border-bottom:1px solid var(--divider); } .signup-say h2{ font-size:22px; font-weight:800; letter-spacing:-.005em; margin:0 0 4px; } .signup-say p{ font-size:14px; color:var(--ink-soft); margin:0 auto; max-width:44ch; } .signup-do{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .signup input[type="email"]{ width:15rem; max-width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--divider); border-radius:100px; padding:11px 18px; font:inherit; font-size:15px; } .signup input[type="email"]:hover{ border-color:var(--ink-faint); } .signup input[type="email"]:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; } .signup button{ cursor:pointer; border-radius:100px; padding:11px 22px; border:1px solid var(--ink-faint); background:transparent; color:var(--ink); font:inherit; font-size:15px; font-weight:600; transition:background-color .2s ease, border-color .2s ease; } .signup button:hover{ border-color:var(--ink); background:var(--wash); } /* Off-screen rather than display:none — a bot reading the DOM should find it. */ .signup-trap{ position:absolute; left:-9999px; top:0; width:0; height:0; overflow:hidden; } /* ---------- Footer ---------- */ footer{ border-top:1px solid var(--divider); margin-top:40px; padding:36px 0 64px; } /* nav on the left, appearance toggle on the right, on one row */ .foot-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .footer-nav{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14px; font-weight:500; margin:0; } .footer-nav a{ text-decoration:none; color:var(--ink-soft); transition:color .2s; } .footer-nav a:hover{ color:var(--ink); } .theme-toggle{ display:flex; gap:6px; margin:0; } .theme-toggle button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--divider); background:var(--surface); color:var(--ink-soft); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .theme-toggle button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .copyright{ font-size:13px; color:var(--ink-faint); line-height:1.7; margin:0; } .legal-line{ font-size:12.5px; color:var(--ink-faint); line-height:1.7; margin:10px 0 0; } /* No underlines anywhere — links carry a slightly stronger ink instead, and firm up to full --ink on hover. */ .copyright a, .legal-line a{ color:var(--ink-soft); text-decoration:none; transition:color .2s; } .copyright a:hover, .legal-line a:hover{ color:var(--ink); } /* ---------- Simple pages (privacy/terms) ---------- */ .doc{ padding:56px 0 72px; } .doc h1{ font-size:28px; font-weight:800; margin:0 0 8px; } /* The donate page's heading carries the same mark as the landing page's support card, so arriving from one lands on the other. Flex rather than an inline image: it keeps the mark on the heading's own centre line instead of sitting it on the baseline like a letter. */ .doc h1.with-mark{ display:flex; align-items:center; gap:12px; } .doc h1.with-mark svg{ flex:none; color:var(--relating); fill:currentColor; } .doc .doc-note{ font-size:13px; color:var(--ink-faint); margin:0 0 32px; } .doc p{ font-size:15px; color:var(--ink-soft); max-width:60ch; } .doc a.back{ display:inline-block; margin-bottom:28px; font-size:13.5px; font-weight:700; text-decoration:none; color:var(--ink-soft); } .doc a.back:hover{ color:var(--ink); } /* ---------- Donate ---------- */ /* The page is a .doc, so it inherits the reading measure and the type. These are only the two things it has that privacy and terms do not: a heading above each way of giving, and the controls themselves. The monthly tiers are outlined where "Give once" is filled, and that is not decoration — the filled button is the one most people want, and three solid buttons beside it would make choosing an amount feel like the point. It is the same reasoning as .store-btn.soon on the home page. */ .doc h2{ font-size:17px; font-weight:800; margin:36px 0 6px; } /* The receipt link on the thanks page: present only when there is a payment to point at, so it never renders as a dead promise. */ .doc p.receipt{ margin:18px 0 0; } /* A rejected attempt, said above the form it is about. Bordered rather than filled: it is a correction, not an alarm, and the page it interrupts is one somebody reached on purpose. */ .problem{ border:1px solid var(--warn); border-left-width:3px; /* Filled, softly: mixed from the same token as the border so it stays a tint of the warning rather than a second colour, and lands on the page's own surface in whichever theme is showing. */ background:color-mix(in srgb, var(--warn) 12%, var(--surface)); border-radius:12px; padding:16px 18px; margin:17px 0 24px; font-size:14.5px; color:var(--ink); max-width:60ch; } /* Each way of giving is a plain form: an amount, a currency, a button. No script anywhere on the page — the constraints are the input's own (min, max, required) and the server checks them again, because a browser is not a place to enforce anything. */ .give-form{ margin:18px 0 0; } .give-fields{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; } .give-amount, .give-currency{ font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--divider); border-radius:100px; padding:13px 16px; } /* Wide enough for five digits AND the stepper Chrome draws inside the field — at 7ch a three-digit default was already clipped. In characters rather than pixels so it follows the type. */ /* 11ch, not 10: the widest legitimate value is KRW's ceiling — 2500000, seven digits — and at 10ch the field clipped it. `ch` is the width of a zero in the current font, and digits in Inter are wider than that. */ .give-amount{ width:11ch; text-align:center; } /* No spinner. Stepping a donation up and down one unit at a time is not how anybody decides what to give, and the arrows put a fiddly two-pixel target next to the one field on the page that matters. The input stays type=number, so the numeric keypad still opens on a phone and the arrow keys still work for anyone who wants them. */ .give-amount{ appearance:textfield; -moz-appearance:textfield; } .give-amount::-webkit-outer-spin-button, .give-amount::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .give-currency{ padding-inline:14px; } .give-amount:hover, .give-currency:hover{ border-color:var(--ink-faint); } .give-per{ font-size:14px; color:var(--ink-soft); } /* Present for a screen reader, absent for everyone else: each field has a real label, and the visible text around it already says what it is. */ .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* Smaller and quieter than the body copy: it answers a question a careful reader will have (who takes the card details) without becoming part of the ask. */ .doc p.give-note{ font-size:13.5px; color:var(--ink-faint); margin-top:44px; } /* ---------- Embedded in the app ---------- */ /* Set by theme.js from ?embed=1, before first paint. The app shows these pages in its own reader with its own title and close control, so the site's header, footer and back link are duplicate navigation — and the appearance toggle would contradict the app's setting. Links become plain text rather than staying tappable. The reader is meant to stay in the app; a link that navigated away would either strand them in a web page with no way back, or hand them to a browser they did not ask for. The addresses are still readable, just not live. */ html[data-embed] .site-nav, html[data-embed] footer, html[data-embed] .back { display: none; } html[data-embed] .doc { padding-top: 8px; } html[data-embed] .doc a { pointer-events: none; text-decoration: none; color: inherit; font-weight: inherit; }