/* 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. */ :root { color-scheme: light dark; --ink: #162019; --paper: #f7f3ea; --card: #fffdf8; --lime: #d9ff57; --forest: #163d29; --rust: #b4400f; --line: #d8d5c9; --muted: #667064; --text: var(--ink); --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. */ body[data-area="selling"] { --door-accent-ink: var(--cat, #b4400f); } body[data-area="occasions"] { --door-accent-ink: var(--cat, #8a3d7a); } body[data-area="safety"] { --door-accent-ink: var(--cat, #9a2f2f); } body[data-area="rights"] { --door-accent-ink: var(--cat, #1f5b6e); } body[data-area="paperwork"] { --door-accent-ink: var(--cat, #4a5320); } body[data-area="messages"] { --door-accent-ink: var(--cat, #2b5637); } * { 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); 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; } :focus-visible { outline: 3px solid var(--ink); 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); } /* 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

markers so the number can carry the accent without a list-marker hack. */ .steps { list-style: none; margin: 22px 0; padding: 0; counter-reset: step; } .steps li { position: relative; margin-bottom: 20px; padding-left: 46px; color: var(--muted); } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 11px; background: var(--door-accent); color: var(--ink); font-size: 15px; font-weight: 900; } .steps strong { display: block; color: var(--text); } /* Who it suits, and who it does not. Two panels, because the second is the one that earns the page its trust and it must not read as a footnote. */ .fit { display: grid; gap: 14px; margin: 20px 0 0; } @media (min-width: 680px) { .fit { grid-template-columns: 1fr 1fr; } } .fit > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); } .fit h3 { margin: 0 0 10px; font-size: 17px; } .fit ul { margin: 0; padding-left: 20px; } .fit li:last-child { margin-bottom: 0; } /* 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; } @media (prefers-color-scheme: dark) { :root { --paper: #12180f; --card: #1b2717; --line: rgba(243, 240, 230, .16); --muted: #a6b0a3; --text: #f3f0e6; --forest: #a8d8ba; } body { background: radial-gradient(circle at 14% 4%, rgba(217, 255, 87, .1), transparent 26rem), radial-gradient(circle at 92% 22%, rgba(180, 64, 15, .1), transparent 26rem), var(--paper); } /* The accent inks above are chosen for a paper background and go muddy on a dark one, so every area shares one legible warm ink in dark mode — and it defers to --cat exactly as the light values do, because the category system ships its own dark ramp and this must not sit in front of it. */ body[data-area] { --door-accent-ink: var(--cat, #ffab8f); } :focus-visible { outline-color: var(--text); } .brand-mark, .steps li::before, .buy { border-color: rgba(243, 240, 230, .3); } /* The image keeps its paper ground on both themes, so here 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 actually has. */ .door-hero img { border-color: rgba(243, 240, 230, .34); } .door-hero::after { border-color: rgba(22, 32, 25, .5); } .buy { box-shadow: 7px 7px 0 rgba(243, 240, 230, .16); } .buy-link { border-color: var(--ink); } }