/* The introduction pages — one per product door hostname. * * Deliberately NOT public/unfussed-job.css. That stylesheet dresses a buy page: * an intake form, a price lock, a loading card, a result panel. A door page has * none of those and needs a reading column, a before/after pair and a single * outbound link, so importing the other one would mean shipping four fifths of a * stylesheet for the fifth that applies — on nineteen hostnames. * * The tokens are the same tokens, spelled the same way, so the two can converge * later without either being rewritten. * * --door-accent and --door-accent-ink are the seam for the category colour work * happening in parallel. Every accented rule in this file reads one of those two * variables and nothing else, and each page sets them once on from its * play's area. When the category palette lands, it lands as six new values in * the block below and no rule changes. */ /* Tokens that differ between the two themes are written twice on purpose: the plain light value, then the light-dark() pair. See the theme section at the foot of this file. */ :root { color-scheme: light dark; --ink: #162019; --paper: #f7f3ea; --paper: light-dark(#f7f3ea, #12180f); --card: #fffdf8; --card: light-dark(#fffdf8, #1b2717); --lime: #d9ff57; /* --forest sets TYPE here (the eyebrow), not a fill, so it has to lift on the unlit ground the way the ink colours do. */ --forest: #163d29; --forest: light-dark(#163d29, #a8d8ba); --rust: #b4400f; --line: #d8d5c9; --line: light-dark(#d8d5c9, rgba(243, 240, 230, .16)); --muted: #667064; --muted: light-dark(#667064, #a6b0a3); --text: var(--ink); --text: light-dark(var(--ink), #f3f0e6); --door-accent: var(--lime); --door-accent-ink: var(--rust); } /* The six areas config/plays.json declares, each with an accent ink derived from the brand palette — enough that nineteen pages do not read as one page. Every value clears 4.5:1 on --card in its own scheme. Each is written as a FALLBACK behind --cat, which is the variable the category colour system sets. So adoption is not a rewrite and not even an edit here: the day a door page links the category stylesheet and carries the job's category on its body, --cat resolves and wins, in both schemes, and these six lines quietly stop applying. Until then they are what a door is coloured by. Each is chosen for a paper background and goes muddy on a dark one, so on the unlit theme all six collapse to one legible warm ink. That is the second half of each pair, and it still defers to --cat, because the category system ships its own dark ramp and this must not sit in front of it. */ body[data-area="selling"] { --door-accent-ink: var(--cat, #b4400f); --door-accent-ink: var(--cat, light-dark(#b4400f, #ffab8f)); } body[data-area="occasions"] { --door-accent-ink: var(--cat, #8a3d7a); --door-accent-ink: var(--cat, light-dark(#8a3d7a, #ffab8f)); } body[data-area="safety"] { --door-accent-ink: var(--cat, #9a2f2f); --door-accent-ink: var(--cat, light-dark(#9a2f2f, #ffab8f)); } body[data-area="rights"] { --door-accent-ink: var(--cat, #1f5b6e); --door-accent-ink: var(--cat, light-dark(#1f5b6e, #ffab8f)); } body[data-area="paperwork"] { --door-accent-ink: var(--cat, #4a5320); --door-accent-ink: var(--cat, light-dark(#4a5320, #ffab8f)); } body[data-area="messages"] { --door-accent-ink: var(--cat, #2b5637); --door-accent-ink: var(--cat, light-dark(#2b5637, #ffab8f)); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(circle at 14% 4%, rgba(217, 255, 87, .3), transparent 26rem), radial-gradient(circle at 92% 22%, rgba(180, 64, 15, .1), transparent 26rem), var(--paper); background: radial-gradient(circle at 14% 4%, light-dark(rgba(217, 255, 87, .3), rgba(217, 255, 87, .1)), transparent 26rem), radial-gradient(circle at 92% 22%, rgba(180, 64, 15, .1), transparent 26rem), var(--paper); color: var(--text); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* --text rather than --ink: the two are the same colour on paper, and only --text follows the theme, so this is one declaration instead of two. */ :focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 4px; } .shell { width: min(760px, calc(100% - 40px)); margin: 0 auto; } /* Header ------------------------------------------------------------------ */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 84px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 850; letter-spacing: -.03em; } .brand-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 14px; background: var(--door-accent); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-3deg); } .brand-mark img { display: block; width: 32px; height: 32px; } .topbar nav { display: flex; align-items: center; gap: 18px; font-size: 14px; font-weight: 700; color: var(--muted); } .topbar nav a { text-decoration: none; } .topbar nav a:hover { color: var(--text); } /* A door is a different origin from unfussed.me, so it cannot know who is reading it: the buyer session cookie carries a __Host- prefix that binds it to the exact host that set it, and this page's CSP allows connect-src 'self'. Its account link therefore says the one thing that is true either way, and never a "Sign in" that would be wrong for half the people who see it. Three nav items will not fit beside the wordmark at 390px, and one of them is redundant at any width: the brand immediately to its left points at unfussed.me/ as well. So "All jobs" stands down on a narrow screen and the two links that go somewhere the wordmark does not — the job itself, and the way back to points already paid for — keep their place. */ @media (max-width: 560px) { .topbar { min-height: 70px; gap: 12px; } .topbar nav { gap: 14px; } .topbar nav a:first-child { display: none; } } /* Opening ----------------------------------------------------------------- */ .opening { padding: 34px 0 10px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--forest); font-size: 13px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 25px; height: 3px; border-radius: 99px; background: var(--door-accent-ink); } h1 { margin: 0; font-size: clamp(38px, 5.6vw, 60px); line-height: .98; letter-spacing: -.055em; font-weight: 900; } /* The highlighter stroke. Painted as a background on the span itself with box-decoration-break: clone, NOT as an absolutely positioned pseudo-element: a headline this size wraps on a phone and often on a laptop, and an absolute box tracks only the first line fragment — leaving a two-word stripe floating at the end of line one and nothing under line two. Cloning paints every fragment, which is what a real highlighter would do. */ h1 .marker { padding: 0 .05em; background-image: linear-gradient(var(--door-accent), var(--door-accent)); background-repeat: no-repeat; background-size: 100% .24em; background-position: 0 86%; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .standfirst { margin: 22px 0 0; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; letter-spacing: -.015em; } /* The opening image — the same cut-paper still life the buy page carries, named after the job's slug. See design/imagery/STYLE.md. A door is editorial and has no form to protect, so unlike the buy page this one is a real hero: full reading column, directly under the standfirst, before the first argument. Width and height are the real 1600x900 so the whole essay below it does not jump when the bytes land. */ .door-hero { display: block; position: relative; margin-top: 30px; border-radius: 18px; } .door-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: inherit; } /* The inner keyline, drawn ON the image rather than around it. An inset box-shadow cannot do this: on a replaced element the content paints over the inset shadow, so the rule applies and nothing appears. */ .door-hero::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(22, 32, 25, .12); border-radius: inherit; pointer-events: none; } /* Body -------------------------------------------------------------------- */ section { margin-top: 52px; } section + section { padding-top: 44px; border-top: 1px solid var(--line); } h2 { margin: 0 0 14px; font-size: clamp(26px, 3.2vw, 33px); line-height: 1.06; letter-spacing: -.04em; font-weight: 900; } h3 { margin: 32px 0 8px; font-size: 19px; letter-spacing: -.02em; } p { margin: 0 0 16px; } section p { color: var(--muted); } section p strong, section li strong { color: var(--text); } ul, ol { margin: 0 0 16px; padding-left: 22px; color: var(--muted); } li { margin-bottom: 9px; } /* The worked example. Two stacked panels rather than side-by-side columns: the pair is read top to bottom, and a listing rewrite is long enough that two narrow columns would set it at eight words a line on a phone. */ .example { display: grid; gap: 14px; margin: 20px 0 24px; } .example > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .example small { display: block; margin-bottom: 8px; color: var(--door-accent-ink); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .example p { margin: 0 0 10px; color: var(--text); } .example p:last-child { margin-bottom: 0; } .example .field { display: block; font-weight: 800; letter-spacing: -.01em; } .example mark { padding: 0 3px; border-radius: 4px; background: var(--door-accent); color: var(--ink); } /* The steps. Numbered by counter rather than by

rather than a scripted accordion because a door page runs no script at all, and because structured data describing text a reader cannot see is a penalty rather than a feature: the same words are in the DOM and in the FAQPage block, and a test compares them. No colour of its own. The marker is --door-accent-ink, which each page sets once on from its play's area and which the category system overrides through --cat, so this arrived already coloured in six ways and in both schemes. */ .faq details { border-top: 1px solid var(--line); } .faq details:last-of-type { border-bottom: 1px solid var(--line); } .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 4px; color: var(--text); font-weight: 800; letter-spacing: -.015em; cursor: pointer; list-style: none; } /* Two spellings of the same suppression. Blink and WebKit answer to the pseudo-element, Firefox to list-style, and a summary set to display: flex loses the marker in some engines and keeps it in others — so all three. */ .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; color: var(--door-accent-ink); font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq details[open] summary { padding-bottom: 10px; } .faq details p { margin: 0 34px 20px 4px; color: var(--muted); } /* The outline is drawn by the shared :focus-visible rule. It needs somewhere to sit: at 4px of side padding a 3px ring with a 2px offset would be cut off by the section edge on the left, which is the one place a keyboard reader looks. */ .faq summary:focus-visible { padding-left: 8px; padding-right: 8px; } /* The one outbound link that matters. */ .buy { margin-top: 52px; padding: 28px 26px; border: 2px solid var(--ink); border-radius: 20px; background: var(--card); box-shadow: 7px 7px 0 var(--ink); } .buy h2 { margin-bottom: 10px; font-size: clamp(24px, 3vw, 30px); } .buy p { color: var(--muted); } .buy p:last-of-type { margin-bottom: 20px; } .buy-link { display: inline-block; padding: 14px 22px; border: 2px solid var(--ink); border-radius: 999px; background: var(--door-accent); color: var(--ink); font-weight: 850; letter-spacing: -.01em; text-decoration: none; } .buy-link:hover { background: #eaffa0; } .terms { margin: 14px 0 0; font-size: 14px; color: var(--muted); } /* Footer ------------------------------------------------------------------ */ footer { margin: 56px 0 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } footer p { margin: 0 0 6px; } footer a { text-decoration: underline; } /* --- the three themes ------------------------------------------------------ Light, dark, and follow-the-system, out of one set of declarations. Every colour that differs between the themes is written once as light-dark(light, dark), and which half is used is decided by the root's used colour scheme: `color-scheme: light dark` follows the operating system, and an explicit choice narrows it to one — which is what lets an explicit light choice beat a system that says dark, and the reverse. `prefers-color-scheme` cannot do this. It reports the OS setting and is not re-pointed by `color-scheme` — measured, not assumed — so a media query would go on firing underneath an explicit light choice. The full reasoning, and the note on why each pair is preceded by its plain light value, is in /unfussed-job.css; the two sheets theme identically on purpose. */ :root[data-theme="light"] { color-scheme: only light; } :root[data-theme="dark"] { color-scheme: only dark; } .brand-mark, .steps li::before, .buy { border-color: var(--ink); border-color: light-dark(var(--ink), rgba(243, 240, 230, .3)); } /* The image keeps its paper ground on both themes, so on the unlit one it is a lit rectangle on an unlit page — and at the full width of the reading column it is the largest bright thing on the site. One hairline cannot hold that edge: a light rule vanishes against #f7f3ea and a dark one vanishes against #12180f, so whichever single colour is picked disappears on the side that needed it. The edge is built from both, which is what a printed card has. */ .door-hero img { border-color: var(--line); border-color: light-dark(var(--line), rgba(243, 240, 230, .34)); } .door-hero::after { border-color: rgba(22, 32, 25, .12); border-color: light-dark(rgba(22, 32, 25, .12), rgba(22, 32, 25, .5)); } .buy { box-shadow: 7px 7px 0 var(--ink); box-shadow: 7px 7px 0 light-dark(var(--ink), rgba(243, 240, 230, .16)); }