| 1 | /* bill — the flyposted bill. |
| 2 | Structure lives in tokens.css; this file is colour, type and shape. |
| 3 | |
| 4 | The look: a sheet pasted on a wall. Cheap coloured stock, two inks, and |
| 5 | a heavy impression. Where the two inks cross they overprint to a third, |
| 6 | which is where the green comes from — it is a consequence of the |
| 7 | material, not a colour anyone chose, and it is why this sits next to |
| 8 | carlosframework.com's teal as a relative rather than a copy. |
| 9 | |
| 10 | Drenched, not accented: the stock IS the surface on the bill itself. |
| 11 | The stance pages drop to bone, because acid yellow is a shout and the |
| 12 | three responses are the part you actually read. |
| 13 | |
| 14 | No radius anywhere. A printed sheet has corners. Depth is ink and |
| 15 | perforation, never elevation — the one shadow in the system belongs to |
| 16 | a tab lifting off the wall, which is a thing paper does. |
| 17 | ─────────────────────────────────────────────────────────────────────── */ |
| 18 | |
| 19 | @font-face { |
| 20 | font-family: "Big Shoulders"; |
| 21 | src: url("fonts/big-shoulders-800.woff2") format("woff2"); |
| 22 | font-weight: 800; |
| 23 | font-style: normal; |
| 24 | font-display: swap; |
| 25 | } |
| 26 | @font-face { |
| 27 | font-family: "Public Sans"; |
| 28 | src: url("fonts/public-sans-400.woff2") format("woff2"); |
| 29 | font-weight: 400; |
| 30 | font-style: normal; |
| 31 | font-display: swap; |
| 32 | } |
| 33 | @font-face { |
| 34 | font-family: "Public Sans"; |
| 35 | src: url("fonts/public-sans-700.woff2") format("woff2"); |
| 36 | font-weight: 700; |
| 37 | font-style: normal; |
| 38 | font-display: swap; |
| 39 | } |
| 40 | |
| 41 | :root { |
| 42 | color-scheme: light; |
| 43 | |
| 44 | /* ── The stock ────────────────────────────────────────────────────── |
| 45 | Yellow is the bill. Bone is the reading surface. Both are paper, so |
| 46 | both are warm; neither is white, because white is a screen colour and |
| 47 | this is a printed thing. */ |
| 48 | --bill-stock: #f0e34a; |
| 49 | --bill-bone: #f7f4e6; |
| 50 | --bill-ink: #17140f; |
| 51 | --bill-blue: #1b2a8f; |
| 52 | --bill-cyan: #14a0c8; /* the second ink */ |
| 53 | |
| 54 | /* The sharpie. A third pen rather than a third press ink: a marker drawn |
| 55 | ON the stock does not overprint with what was printed under it, so the |
| 56 | pills render solid while everything else multiplies. */ |
| 57 | --pill-blue: #1f3fd0; |
| 58 | --pill-blue-line: #12246f; |
| 59 | --pill-red: #cf2233; |
| 60 | --pill-red-line: #7d1119; |
| 61 | --bill-over: #2f6b46; /* what cyan makes of the yellow stock */ |
| 62 | --bill-dim: #6b5f14; /* the ink thinned, for secondary text ON yellow */ |
| 63 | --bill-dim-bone: #6a6455; |
| 64 | |
| 65 | /* ── rastrillo's contract ─────────────────────────────────────────── |
| 66 | tokens.css reads these. Defaults here are the bone reading surface; |
| 67 | the bill itself overrides them on its own page. */ |
| 68 | --rst-bg: var(--bill-bone); |
| 69 | --rst-surface: var(--bill-bone); |
| 70 | --rst-surface-2: #efeada; |
| 71 | --rst-overlay: rgba(23, 20, 15, 0.55); |
| 72 | |
| 73 | --rst-text: var(--bill-ink); |
| 74 | --rst-text-muted: var(--bill-dim-bone); |
| 75 | --rst-text-faint: #8b8574; |
| 76 | |
| 77 | --rst-accent: var(--bill-blue); |
| 78 | --rst-accent-strong: #121d68; |
| 79 | --rst-accent-soft: rgba(27, 42, 143, 0.1); |
| 80 | --rst-on-accent: var(--bill-stock); |
| 81 | |
| 82 | --rst-line: rgba(23, 20, 15, 0.22); |
| 83 | --rst-line-strong: rgba(23, 20, 15, 0.55); |
| 84 | --rst-header-rule: var(--bill-ink); |
| 85 | |
| 86 | /* A printed sheet has corners. */ |
| 87 | --rst-radius: 0; |
| 88 | --rst-radius-sm: 0; |
| 89 | --rst-radius-pill: 0; |
| 90 | |
| 91 | /* The only depth in the system: paper lifting off a wall. Offset and |
| 92 | blur, because that is what a real shadow has. */ |
| 93 | --rst-shadow-lift: 0 6px 18px rgba(23, 20, 15, 0.28); |
| 94 | --rst-shadow-pop: 0 10px 30px rgba(23, 20, 15, 0.32); |
| 95 | --rst-shadow-knob: 0 2px 6px rgba(23, 20, 15, 0.3); |
| 96 | |
| 97 | /* Status stays legible against paper without becoming a second accent. */ |
| 98 | --rst-tone-positive-bg: rgba(47, 107, 70, 0.14); |
| 99 | --rst-tone-positive-fg: #1f5334; |
| 100 | --rst-tone-warning-bg: rgba(160, 96, 12, 0.16); |
| 101 | --rst-tone-warning-fg: #7a4708; |
| 102 | --rst-tone-negative-bg: rgba(158, 42, 26, 0.14); |
| 103 | --rst-tone-negative-fg: #8e2417; |
| 104 | --rst-tone-neutral-bg: rgba(23, 20, 15, 0.08); |
| 105 | --rst-tone-neutral-fg: #4a4437; |
| 106 | |
| 107 | |
| 108 | /* ── The type ramp ────────────────────────────────────────────────── |
| 109 | Four display steps and five text steps. Nothing sets a literal size: |
| 110 | a bill has a handful of sorts in the case, not a continuum. */ |
| 111 | --t-shout: clamp(4rem, 16vw, 10.5rem); |
| 112 | --t-display-1: clamp(2rem, 5vw, 3.25rem); |
| 113 | --t-display-2: clamp(1.5rem, 3.2vw, 2.75rem); |
| 114 | --t-display-3: clamp(1.35rem, 3vw, 1.9rem); |
| 115 | |
| 116 | --t-lede: clamp(1.0625rem, 1.3vw, 1.1875rem); |
| 117 | --t-body: clamp(1rem, 1.15vw, 1.125rem); |
| 118 | --t-base: 0.9375rem; |
| 119 | --t-sm: 0.875rem; |
| 120 | --t-xs: 0.8125rem; |
| 121 | --t-xxs: 0.75rem; |
| 122 | |
| 123 | --rst-font: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; |
| 124 | --bill-display: "Big Shoulders", "Haettenschweiler", "Arial Narrow", sans-serif; |
| 125 | --bill-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace; |
| 126 | } |
| 127 | |
| 128 | /* ── The browser's own surfaces ───────────────────────────────────────── |
| 129 | Selection, caret, focus and scrollbar ship with defaults that belong to |
| 130 | no design system. On a two-ink sheet they are the cheapest place to be |
| 131 | consistent: selection is the inks swapped, focus is a registration mark. */ |
| 132 | ::selection { |
| 133 | background: var(--bill-blue); |
| 134 | color: var(--bill-stock); |
| 135 | } |
| 136 | :root { |
| 137 | caret-color: var(--bill-blue); |
| 138 | scrollbar-color: var(--bill-ink) transparent; |
| 139 | scrollbar-width: thin; |
| 140 | } |
| 141 | :where(a, button, input, textarea, summary, [tabindex]):focus-visible { |
| 142 | outline: 3px solid var(--bill-blue); |
| 143 | outline-offset: 2px; |
| 144 | border-radius: 0; |
| 145 | } |
| 146 | |
amadan