Marcos Paulo
7f11b6e88e
`styles.css` line 1 carried a malformed rule for the life of the site:
@font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?...')}
`src:` in an @font-face must point at a font binary. That URL returns a CSS
stylesheet, so no browser could ever load a face from it. Every
`font-family:Manrope,Arial,sans-serif` fell through to Arial, and 'DM Mono' was
never declared as a family at all, so it fell through to generic monospace. The
intended typography has never once been seen.
Task 02 spotted this and was told to default to deleting the dead rule and
declaring the stacks that actually render. It recorded that decision, deferred
the deletion to "future component tasks", and nothing picked it up. The human
has now chosen the other branch: the real fonts.
Self-hosted rather than linked from fonts.googleapis.com because
scripts/audit-ui.mjs rejects any external <link>/<script>, and because the site
is presented in workshop rooms with unreliable networks. Latin and latin-ext
subsets only — the site is EN and PT-BR, so the cyrillic, greek and vietnamese
subsets Google also serves are dropped. Manrope ships as one variable file
covering 400-800. 89 KB total across six faces, all SIL OFL.
One public/fonts/fonts.css serves both trees, with relative url()s that each
consumer resolves against that file's own location: BaseLayout.astro links it
for Astro pages, the legacy root styles.css @imports it.
This changes how every page renders. That is the point, and it is the one
sanctioned visual change in the migration — screenshots taken before today show
Arial and are no longer a valid baseline. The three governing documents that
said "do not add a webfont" are updated so the next design-system-keeper does
not undo this.
Adds .stylelintignore, mirroring .prettierignore's legacy list for the same
reason: staging the minified styles.css to change one declaration produced ~180
declaration-block-single-line-max-declarations errors and blocked the commit.
public/fonts/fonts.css is deliberately excluded from that ignore list.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
3 lines
10 KiB
CSS
3 lines
10 KiB
CSS
@import url('public/fonts/fonts.css'); :root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px 'DM Mono',monospace}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px 'DM Mono',monospace}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px 'DM Mono',monospace;letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px 'DM Mono',monospace}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px 'DM Mono',monospace}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px 'DM Mono',monospace}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 'DM Mono',monospace}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px 'DM Mono',monospace}.repo strong,.map>div:not(.repo) strong{display:block;font:14px 'DM Mono',monospace}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px 'DM Mono',monospace}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 Manrope,Arial,sans-serif;letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}}
|
|
main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:0;height:100%;background:var(--gold);transition:width .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px 'DM Mono',monospace;color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px 'DM Mono',monospace}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}}
|