/* ========================================================================== manual.css — "The Project Manual" -------------------------------------------------------------------------- The homepage is Lloyd Solves' project manual, not a page about one. The drawings say where; the specification says what — and when they conflict, the spec governs. Scoped entirely under `.manual` on so it can be evaluated on one surface before it propagates. It loads AFTER blueprint.css and overrides only what it names; nothing here leaks to another route. Three rules run the whole system: 1. Emphasis is LINE WEIGHT. Not shadow, not radius, not fill. 2. Nothing gets a box drawn around it. Fields and hanging indents carry hierarchy — there are no cards in this world. 3. Colour arrives as a flat solid field. There is not one gradient in this file, and there is not one shadow. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ .manual { /* Ink — the pinned harbor palette, re-rendered as flat fields ---------- */ --m-deep: #053b5b; /* Harbor Deep — cover, division bands, execution */ --m-blue: #0871a6; /* Deep Harbor — rules, links, keyed marks */ --m-cyan: #1ea1d6; /* Signal Cyan — reserved: tabs, active route, fills only */ --m-ink: #0f1e2e; /* Drafting Ink — body copy on light */ --m-slate: #4a5c6b; /* muted on light — 6.9:1 on white */ --m-pale: #a8cbdf; /* muted on deep — 6.9:1 on Harbor Deep */ --m-chrome: #8fb6cf; /* sheet chrome on deep — 5.6:1, clear of the line once hinting takes its cut */ --m-vellum: #eef7ff; /* flat wash, never a gradient */ --m-paper: #ffffff; --m-stamp-open: #9a5a00; /* 5.6:1 on white */ --m-stamp-set: #137a48; --m-stamp-out: #b03434; /* 5.1:1 on paper — the retired #d04a4a measured 4.0:1 */ /* Rules — the hairline family, all struck from the harbor hue --------- */ --m-rule: rgba(8, 113, 166, .30); --m-rule-soft: rgba(8, 113, 166, .16); --m-rule-deep: rgba(255, 255, 255, .26); --m-rule-deep-soft: rgba(255, 255, 255, .13); /* Line weight IS the hierarchy. Nothing else emphasises. -------------- */ --w-construction: 1px; /* hairline: grids, coordinates */ --w-hidden: 1px; /* dashed: what is there but not the subject */ --w-visible: 2px; /* the object */ --w-cut: 4px; /* what the section plane cuts through */ --w-division: 10px; /* a division opener */ /* Rhythm — one scale, used everywhere -------------------------------- */ --s1: .5rem; --s2: .75rem; --s3: 1rem; --s4: 1.5rem; --s5: 2rem; --s6: 3rem; --s7: 4rem; --s8: 6rem; --s9: 8rem; /* The rail: the manual's left margin, where section marks live -------- */ --rail: 8.5rem; --gutter: 2.5rem; --m-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --m-mono: 'Chivo Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --m-ease: cubic-bezier(.16, 1, .3, 1); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ .manual { background: var(--m-paper); color: var(--m-ink); font-family: var(--m-sans); font-variation-settings: 'wdth' 100; font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .manual main { position: relative; } /* Every corner in this world is square, and nothing is lifted. */ .manual :where(a, button, img, figure, section, div, input, textarea, select, dialog) { border-radius: 0; box-shadow: none; } .manual :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; } .manual ul, .manual ol { list-style: none; padding: 0; } .manual :where(a) { color: inherit; } .manual img { display: block; max-width: 100%; } /* Numerals in every table, schedule and mark line up. */ .manual { font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 3. BROWSER SURFACES The parts we did not draw still carry the design. -------------------------------------------------------------------------- */ .manual ::selection { background: var(--m-cyan); color: var(--m-deep); } .manual { caret-color: var(--m-blue); accent-color: var(--m-blue); scrollbar-color: var(--m-blue) var(--m-vellum); scrollbar-width: thin; } .manual ::-webkit-scrollbar { width: 12px; height: 12px; } .manual ::-webkit-scrollbar-track { background: var(--m-vellum); } .manual ::-webkit-scrollbar-thumb { background: var(--m-blue); border: 3px solid var(--m-vellum); } .manual ::-webkit-scrollbar-thumb:hover { background: var(--m-deep); } /* Focus is a drafted register mark, never a browser default. */ .manual :focus-visible { outline: var(--w-visible) solid var(--m-cyan); outline-offset: 3px; } .manual .mn-on-deep :focus-visible { outline-color: var(--m-cyan); } .manual .skip-link { border-radius: 0; font-family: var(--m-mono); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; } /* -------------------------------------------------------------------------- 4. TYPE ROLES -------------------------------------------------------------------------- */ /* The manual's own voice: identifiers, coordinates, stamps, measurements. Mono is used here for what it is — numbering and data — never as costume for body copy. */ .mn-mark, .mn-tag, .mn-coord, .mn-stamp, .mn-leader__num { font-family: var(--m-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; line-height: 1.2; } /* Display: Archivo pushed wide. The cover is the widest thing in the system; division openers step down; nothing else uses the width axis. */ .mn-display { font-family: var(--m-sans); font-variation-settings: 'wdth' 118; font-weight: 800; font-size: clamp(2.5rem, 5.6vw, 4.75rem); line-height: .96; letter-spacing: -.028em; text-wrap: balance; } .mn-h2 { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; } .mn-h3 { font-variation-settings: 'wdth' 106; font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.01em; } /* Spec body: a hanging-indent paragraph under a lettered article. */ .mn-para { font-size: 1.0625rem; line-height: 1.6; max-width: 66ch; color: var(--m-slate); } .mn-para strong, .mn-para b { color: var(--m-ink); font-weight: 700; } .mn-on-deep .mn-para { color: var(--m-pale); } .mn-on-deep .mn-para strong { color: #fff; } /* -------------------------------------------------------------------------- 5. SHEET CHROME — printed edge coordinates A drawing sheet is gridded and the grid is printed in the margin, so a callout can say "see C-4". Ours is real: the rail marks are these rows. -------------------------------------------------------------------------- */ .mn-sheethead { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-bottom: .55rem; margin-bottom: var(--s7); border-bottom: var(--w-construction) solid var(--m-rule-deep-soft); } .mn-sheethead__id { font-family: var(--m-mono); font-weight: 500; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--m-pale); } /* Head and foot column marks, distributed across the full sheet field. */ /* Row marks down both side margins, column marks along both the head and the foot: a sheet addresses on all four edges or it is not addressing. */ @media (max-width: 900px) { } /* -------------------------------------------------------------------------- 6. HEADER — the manual's index, carrying real section numbers -------------------------------------------------------------------------- */ .mn-head { position: relative; z-index: 5; background: var(--m-deep); color: #fff; border-bottom: var(--w-construction) solid var(--m-rule-deep-soft); } .mn-head__inner { display: flex; align-items: stretch; justify-content: space-between; gap: var(--s4); padding: 0 var(--gutter); min-height: 4.5rem; } .mn-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; padding: .9rem 0; } .mn-brand__mark { width: 30px; height: 30px; flex: none; } .mn-brand__name { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; line-height: 1; } .mn-brand__sub { display: block; font-family: var(--m-mono); font-weight: 400; font-size: .58rem; letter-spacing: .2em; color: var(--m-pale); margin-top: .28rem; } .mn-nav { display: flex; align-items: stretch; gap: 0; } .mn-nav__link { display: flex; flex-direction: column; justify-content: center; gap: .3rem; padding: .9rem 1.15rem; text-decoration: none; color: #fff; border-left: var(--w-construction) solid var(--m-rule-deep-soft); transition: background-color .18s var(--m-ease); } .mn-nav__link:hover { background: rgba(255, 255, 255, .08); } .mn-nav__link.is-active { background: rgba(255, 255, 255, .08); border-bottom: 3px solid var(--m-cyan); padding-bottom: calc(.9rem - 3px); } .mn-nav__no { font-family: var(--m-mono); font-size: .58rem; letter-spacing: .16em; color: var(--m-pale); } .mn-nav__label { font-variation-settings: 'wdth' 100; font-weight: 600; font-size: .875rem; letter-spacing: .005em; white-space: nowrap; } /* The one action in the chrome is a stamp, not a pill. */ .mn-nav__cta { display: flex; align-items: center; background: #fff; color: var(--m-deep); padding: 0 1.4rem; margin: .85rem 0 .85rem 1.15rem; text-decoration: none; font-family: var(--m-mono); font-weight: 700; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; border: var(--w-visible) solid #fff; transition: background-color .18s var(--m-ease), color .18s var(--m-ease); } .mn-nav__cta:hover { background: var(--m-cyan); border-color: var(--m-cyan); color: var(--m-deep); } .mn-head__toggle { display: none; align-items: center; gap: .5rem; background: none; border: var(--w-visible) solid var(--m-rule-deep); color: #fff; font-family: var(--m-mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; padding: .55rem .8rem; margin: .95rem 0; cursor: pointer; } .mn-head__toggle-bars { display: block; width: 15px; height: 9px; border-top: var(--w-visible) solid currentColor; border-bottom: var(--w-visible) solid currentColor; } @media (max-width: 1080px) { .mn-head__inner { padding: 0 1.25rem; } .mn-head__toggle { display: flex; } .mn-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--m-deep); border-bottom: var(--w-cut) solid var(--m-cyan); padding: 0 1.25rem 1.25rem; display: none; } .mn-nav.is-open { display: flex; } .mn-nav__link { border-left: 0; border-top: var(--w-construction) solid var(--m-rule-deep-soft); padding: .95rem 0; flex-direction: row; align-items: baseline; gap: .9rem; } .mn-nav__no { min-width: 5.2rem; } .mn-nav__cta { margin: 1rem 0 0; justify-content: center; padding: .95rem 1.4rem; } } /* -------------------------------------------------------------------------- 7. THE COVER — full-strength Harbor Deep, flat -------------------------------------------------------------------------- */ .mn-cover { position: relative; background: var(--m-deep); color: #fff; padding: var(--s7) calc(var(--gutter) * 2) var(--s7) var(--rail); overflow: hidden; } /* The sheet's right column: exhibit at the top, title block pinned to the foot — where every drawing sheet has carried it for a century. */ .mn-cover__main { display: flex; flex-direction: column; } .mn-cover__main .mn-cover__actions { margin-top: var(--s6); } .mn-cover__side { display: flex; flex-direction: column; gap: var(--s5); min-height: 100%; } .mn-cover__side .mn-issue { margin-top: auto; margin-bottom: 0; max-width: none; } .mn-cover__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s7); align-items: stretch; max-width: 100rem; margin: 0 auto; } .mn-cover h1 { color: #fff; margin-bottom: var(--s4); } .mn-cover__cut { border: 0; border-top: var(--w-cut) solid #fff; width: 8.5rem; margin: 0 0 var(--s4); } .mn-cover__sub { font-size: 1.09rem; line-height: 1.58; color: var(--m-pale); max-width: 46ch; margin-bottom: var(--s5); } /* Issued-for block: the administrative data every cover carries. */ .mn-issue { border-top: var(--w-construction) solid var(--m-rule-deep); margin-bottom: var(--s5); max-width: 34rem; } .mn-issue__row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: var(--s3); padding: .6rem 0; border-bottom: var(--w-construction) solid var(--m-rule-deep-soft); } .mn-issue__k { font-family: var(--m-mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--m-pale); padding-top: .14rem; } .mn-issue__v { font-family: var(--m-mono); font-size: .78rem; letter-spacing: .06em; color: #fff; } .mn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5); } .mn-cover__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); } /* The primary action is a stamp: square, inked, letterspaced. */ .mn-stampbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--m-deep); border: var(--w-cut) solid #fff; padding: 1.15rem 2.3rem; text-decoration: none; font-family: var(--m-mono); font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; transition: background-color .18s var(--m-ease), border-color .18s var(--m-ease), color .18s var(--m-ease); } /* The impression: a stamp is double-ruled, struck inside its own edge. */ .mn-stampbtn::before { content: ""; position: absolute; inset: 7px; border: var(--w-visible) solid currentColor; opacity: .5; pointer-events: none; } .mn-stampbtn:hover { background: var(--m-cyan); border-color: var(--m-cyan); color: var(--m-deep); } .mn-stampbtn--ink { background: var(--m-deep); color: #fff; border-color: var(--m-deep); } .mn-stampbtn--ink:hover { background: var(--m-blue); border-color: var(--m-blue); color: #fff; } /* A cited secondary action: the reference precedes the link, as in the book. */ .mn-cite { display: inline-flex; flex-direction: column; gap: .3rem; text-decoration: none; } .mn-cite__ref { font-family: var(--m-mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--m-pale); } .mn-cite__label { font-weight: 600; font-size: .96rem; color: #fff; border-bottom: var(--w-visible) solid var(--m-cyan); padding-bottom: .18rem; transition: border-color .18s var(--m-ease), color .18s var(--m-ease); } .mn-cite:hover .mn-cite__label { color: var(--m-cyan); } .mn-cite--light .mn-cite__ref { color: var(--m-slate); } .mn-cite--light .mn-cite__label { color: var(--m-ink); border-bottom-color: var(--m-blue); } .mn-cite--light:hover .mn-cite__label { color: var(--m-blue); } /* -------------------------------------------------------------------------- 8. EXHIBIT A — the founder film, filed The still is art-directed to the retired world, so it is carried duotone into the pinned inks until a native replacement is produced. -------------------------------------------------------------------------- */ .mn-exhibit { position: relative; margin: 0; } .mn-exhibit__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); border-bottom: var(--w-visible) solid #fff; padding-bottom: .5rem; margin-bottom: 0; } .mn-exhibit__id { font-family: var(--m-mono); font-weight: 700; font-size: .72rem; letter-spacing: .2em; color: #fff; } .mn-exhibit__name { font-family: var(--m-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--m-pale); } .mn-exhibit__frame { position: relative; border: var(--w-visible) solid #fff; border-top: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--m-deep); } .manual .bp-film { display: block; position: absolute; inset: 0; cursor: pointer; background: none; border: 0; padding: 0; } .mn-exhibit__still { width: 100%; height: 100%; object-fit: cover; /* The plate is shot in the pinned inks, so it needs no correction. */ } .mn-exhibit__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .65rem; background: var(--m-deep); color: #fff; border: var(--w-visible) solid var(--m-deep); padding: .7rem 1.2rem; font-family: var(--m-mono); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; transition: background-color .18s var(--m-ease), border-color .18s var(--m-ease); } .manual .bp-film:hover .mn-exhibit__play { background: var(--m-blue); border-color: var(--m-blue); } .mn-exhibit__play svg { display: block; flex: none; } .mn-exhibit__cap { display: block; font-family: var(--m-mono); font-size: .68rem; letter-spacing: .06em; color: var(--m-pale); padding-top: .7rem; max-width: 40ch; } /* The division tab bleeds off the sheet edge. */ .mn-tab { position: absolute; top: 2.4rem; /* Ink on cyan, not harbor-deep on cyan: 5.6:1 rather than 4.0:1. */ right: calc(var(--gutter) * -1); writing-mode: vertical-rl; /* stops at the coordinate margin: the two devices no longer overlap */ background: var(--m-cyan); color: var(--m-ink); font-family: var(--m-mono); font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; padding: .9rem .42rem 1.5rem; z-index: 3; } /* -------------------------------------------------------------------------- 9. CONTENTS — the manual publishes its own index, with dot leaders -------------------------------------------------------------------------- */ .mn-contents { background: var(--m-vellum); border-bottom: var(--w-construction) solid var(--m-rule); padding: var(--s6) var(--gutter) var(--s6) var(--rail); } .mn-contents__inner { max-width: 100rem; margin: 0 auto; } .mn-contents__title { font-family: var(--m-mono); font-weight: 700; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--m-blue); border-bottom: var(--w-visible) solid var(--m-blue); padding-bottom: .5rem; margin-bottom: .3rem; } .mn-toc__row { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: baseline; gap: .9rem; padding: .62rem 0; border-bottom: var(--w-construction) solid var(--m-rule-soft); text-decoration: none; color: var(--m-ink); } a.mn-toc__row:hover { color: var(--m-blue); } a.mn-toc__row:hover .mn-toc__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .mn-toc__name { font-variation-settings: 'wdth' 104; font-weight: 700; font-size: 1.02rem; letter-spacing: -.005em; } /* The section this manual deliberately does not specify. */ .mn-toc__row--void { color: var(--m-slate); } .mn-toc__row--void .mn-toc__name { color: var(--m-slate); } .mn-toc__void { justify-self: start; font-family: var(--m-mono); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--m-stamp-open); border: var(--w-visible) solid var(--m-stamp-open); padding: .16rem .5rem; } /* -------------------------------------------------------------------------- 10. SECTIONS — the spec's own structure -------------------------------------------------------------------------- */ .mn-section { position: relative; padding: var(--s8) var(--gutter) var(--s8) var(--rail); scroll-margin-top: 5rem; } .mn-section__inner { max-width: 100rem; margin: 0 auto; position: relative; z-index: 2; } .mn-section--deep { background: var(--m-deep); color: #fff; } .mn-section--wash { background: var(--m-vellum); } /* The section identifier: an addressable mark in the rail, not a label floating above a heading. The contents links here; cross-references cite it. */ .mn-section h2 { max-width: 20ch; margin-bottom: var(--s4); } .mn-section--deep h2 { color: #fff; } /* Section opening: the title takes the left measure, its general article the right, the way a spec page opens. */ .mn-lead { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: var(--s6) var(--s7); align-items: start; } .mn-lead h2 { margin-bottom: 0; } .mn-lead .mn-article { padding-top: .3rem; } @media (max-width: 980px) { .mn-lead { grid-template-columns: minmax(0, 1fr); gap: var(--s3); } } /* A lettered article — the spec's hanging indent, which is the whole layout. */ .mn-article { padding: var(--s3) 0; } .mn-rule { border: 0; border-top: var(--w-visible) solid var(--m-rule); margin: var(--s5) 0; } .mn-section--deep .mn-rule { border-top-color: var(--m-rule-deep); } /* -------------------------------------------------------------------------- 11. THE CURRENT-STATE DRAWING — registered layers, overlay-drafting style Six departments drawn as hidden-line ghosts; one future state drawn solid over them. The layers are real and separately toggleable. -------------------------------------------------------------------------- */ .mn-drawing { position: relative; margin-top: var(--s5); border: var(--w-construction) solid var(--m-rule); background: var(--m-paper); } .mn-drawing__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding: .7rem 1rem; border-bottom: var(--w-construction) solid var(--m-rule); background: var(--m-vellum); } .mn-drawing__title { font-family: var(--m-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--m-blue); } .mn-layers { display: flex; gap: 0; } /* Controls live on the annotation layer, never inside the drawing. */ .mn-layer { display: inline-flex; align-items: center; gap: .5rem; background: var(--m-paper); border: var(--w-construction) solid var(--m-rule); border-right-width: 0; color: var(--m-slate); font-family: var(--m-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: .45rem .8rem; cursor: pointer; transition: background-color .18s var(--m-ease), color .18s var(--m-ease); } .mn-layer:last-child { border-right-width: var(--w-construction); } .mn-layer:hover { background: var(--m-vellum); } .mn-layer[aria-pressed="true"] { background: var(--m-deep); border-color: var(--m-deep); color: #fff; } .mn-layer__swatch { width: 14px; height: 0; flex: none; border-top: var(--w-visible) dashed currentColor; } .mn-layer--solid .mn-layer__swatch { border-top-style: solid; border-top-width: var(--w-cut); } .mn-drawing__plate { display: block; width: 100%; height: auto; background: var(--m-paper); } /* Two registered plates of one drawing: landscape for a wide sheet, portrait for a narrow one. The drawing scales; it is never cropped. */ .mn-drawing__plate--portrait { display: none; } @media (max-width: 860px) { .mn-drawing__plate--landscape { display: none; } .mn-drawing__plate--portrait { display: block; } } .mn-drawing__cap { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .1em; color: var(--m-slate); padding: .7rem 1rem; border-top: var(--w-construction) solid var(--m-rule); } /* SVG layer state — driven by the annotation-layer controls above. */ .mn-drawing[data-current="off"] .mn-lyr-current { opacity: 0; } .mn-drawing[data-future="off"] .mn-lyr-future { opacity: 0; } .mn-lyr-current, .mn-lyr-future { transition: opacity .35s var(--m-ease); } /* -------------------------------------------------------------------------- 12. THE SCHEDULE — the seven deliverables as a ruled schedule -------------------------------------------------------------------------- */ .mn-schedule { margin-top: var(--s5); border-top: var(--w-cut) solid currentColor; } .mn-schedule__head { display: grid; grid-template-columns: 5rem minmax(0, auto) 1fr; gap: var(--s3); padding: .6rem 0; border-bottom: var(--w-construction) solid var(--m-rule-deep); font-family: var(--m-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--m-pale); } .mn-schedule__row { display: grid; grid-template-columns: 5rem minmax(0, auto) 1fr; align-items: baseline; gap: var(--s3); padding: 1.05rem 0; border-bottom: var(--w-construction) solid var(--m-rule-deep-soft); } .mn-schedule__mark { font-family: var(--m-mono); font-size: .82rem; letter-spacing: .1em; color: var(--m-cyan); } .mn-schedule__name { font-variation-settings: 'wdth' 106; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.35rem); letter-spacing: -.012em; color: #fff; } .mn-schedule__dots { border-bottom: var(--w-hidden) dotted var(--m-rule-deep); transform: translateY(-.34rem); min-width: 2rem; } /* -------------------------------------------------------------------------- 13. FIELD RESULTS — testimony, references, awards -------------------------------------------------------------------------- */ .mn-testimony { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s7); align-items: start; margin-top: var(--s5); } .mn-deponent__frame { border: var(--w-visible) solid var(--m-ink); overflow: hidden; } .mn-deponent__photo { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1) contrast(1.06); } .mn-deponent__meta { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .1em; line-height: 1.7; color: var(--m-slate); padding-top: .7rem; border-top: var(--w-construction) solid var(--m-rule); margin-top: .7rem; } .mn-deponent__name { display: block; font-family: var(--m-sans); font-variation-settings: 'wdth' 104; font-weight: 700; font-size: .98rem; letter-spacing: 0; text-transform: none; color: var(--m-ink); margin-bottom: .2rem; } .mn-quote { font-variation-settings: 'wdth' 102; font-weight: 500; font-size: clamp(1.4rem, 2.7vw, 2.3rem); line-height: 1.28; letter-spacing: -.018em; color: var(--m-ink); max-width: 32ch; text-wrap: pretty; } .mn-quote b { font-weight: 800; color: var(--m-blue); white-space: nowrap; } .mn-quote__ref { display: block; font-family: var(--m-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--m-blue); margin-bottom: var(--s3); } .mn-quote__links { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: var(--w-construction) solid var(--m-rule); } /* References — filed matters, real names, real marks. */ .mn-refs { margin-top: var(--s7); border-top: var(--w-cut) solid var(--m-ink); } .mn-refs__head { font-family: var(--m-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--m-slate); padding: .6rem 0; border-bottom: var(--w-construction) solid var(--m-rule); } .mn-refs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--s6); } .mn-ref { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3); min-height: 8.5rem; padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); text-decoration: none; color: var(--m-ink); transition: background-color .2s var(--m-ease); } .mn-ref:last-child { border-right: 0; } a.mn-ref:hover { background: var(--m-vellum); } .mn-ref__logo { max-height: 2.9rem; max-width: 9.5rem; width: auto; object-fit: contain; object-position: left center; filter: grayscale(1) contrast(1.05); opacity: .92; } a.mn-ref:hover .mn-ref__logo { filter: none; opacity: 1; } .mn-ref__name { font-variation-settings: 'wdth' 104; font-weight: 700; font-size: .95rem; line-height: 1.3; } .mn-ref__note { display: block; font-family: var(--m-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-slate); margin-top: .3rem; } /* -------------------------------------------------------------------------- 14. PRODUCTS — acceptable manufacturers, lettered, dot-leadered -------------------------------------------------------------------------- */ .mn-products { margin-top: var(--s5); border-top: var(--w-cut) solid var(--m-ink); } .mn-product { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: baseline; gap: .9rem; padding: 1.05rem 0; border-bottom: var(--w-construction) solid var(--m-rule); text-decoration: none; color: var(--m-ink); transition: color .18s var(--m-ease); } .mn-product:hover { color: var(--m-blue); } .mn-product__name { font-variation-settings: 'wdth' 106; font-weight: 700; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -.012em; } .mn-product:hover .mn-product__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .mn-product__dots { border-bottom: var(--w-hidden) dotted var(--m-rule); transform: translateY(-.3rem); min-width: 1.5rem; } .mn-product__role { font-family: var(--m-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-slate); text-align: right; } /* -------------------------------------------------------------------------- 15. EXECUTION — Part 3, the closing division -------------------------------------------------------------------------- */ .mn-exec__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s7); align-items: end; } .mn-exec__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s5); } .mn-note { font-size: .96rem; line-height: 1.6; color: var(--m-pale); max-width: 46ch; } .mn-note__k { display: block; font-family: var(--m-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; /* Cyan on Harbor Deep is 4.0:1 at label size; Pale clears at 6.85:1. */ color: var(--m-pale); margin-bottom: .4rem; } /* -------------------------------------------------------------------------- 16. THE CERTIFICATE — the manual's issue record and index -------------------------------------------------------------------------- */ .mn-cert { background: var(--m-paper); color: var(--m-ink); border-top: var(--w-division) solid var(--m-deep); padding: var(--s7) var(--gutter) var(--s5) var(--rail); } .mn-cert__inner { max-width: 100rem; margin: 0 auto; } .mn-cert__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: var(--s7); align-items: start; padding-bottom: var(--s6); border-bottom: var(--w-construction) solid var(--m-rule); } .mn-seal { display: flex; gap: var(--s4); align-items: flex-start; } .mn-seal__portrait { width: 5.5rem; height: 5.5rem; object-fit: cover; border: var(--w-visible) solid var(--m-ink); filter: grayscale(1) contrast(1.06); flex: none; } .mn-seal__body { font-family: var(--m-mono); font-size: .66rem; letter-spacing: .08em; line-height: 1.75; color: var(--m-slate); } .mn-seal__name { display: block; font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--m-ink); margin-bottom: .25rem; } .mn-seal__motto { display: block; margin-top: .6rem; padding-top: .6rem; border-top: var(--w-construction) solid var(--m-rule); color: var(--m-blue); letter-spacing: .12em; text-transform: uppercase; font-size: .6rem; } .mn-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: var(--s5) var(--s4); } .mn-index__col h3 { font-family: var(--m-mono); font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--m-blue); padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: var(--w-visible) solid var(--m-blue); } .mn-index__col li { padding: .3rem 0; } .mn-index__col a { text-decoration: none; font-size: .9rem; color: var(--m-slate); transition: color .16s var(--m-ease); } .mn-index__col a:hover { color: var(--m-blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } .mn-cert__record { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); font-family: var(--m-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-slate); } .mn-cert__record a { color: var(--m-slate); text-decoration: none; border-bottom: var(--w-construction) solid var(--m-rule); } .mn-cert__record a:hover { color: var(--m-blue); border-bottom-color: var(--m-blue); } /* -------------------------------------------------------------------------- 17. THE LEADER LINE + POSITION READOUT One drawn gesture against all this orthogonality, and a readout that always says where on the sheet you are. -------------------------------------------------------------------------- */ .mn-leader { position: absolute; left: 0; top: 0; width: var(--rail); height: 100%; pointer-events: none; z-index: 1; overflow: visible; } /* One continuous gesture crossing both light and deep fields, so it is struck in the one ink that reads on both. */ .mn-leader__path { fill: none; stroke: var(--m-cyan); stroke-width: 1.5; opacity: .8; transition: stroke-dashoffset 1.5s var(--m-ease); } @media (max-width: 900px) { } /* -------------------------------------------------------------------------- 18. MOTION — one authored moment: the sheet issues, then the leader draws -------------------------------------------------------------------------- */ .manual.js .mn-cover [data-issue] { opacity: 0; translate: 0 12px; } .manual.js .mn-cover.is-issued [data-issue] { animation: mn-issue .62s var(--m-ease) forwards; } .manual.js .mn-cover.is-issued [data-issue="2"] { animation-delay: .09s; } .manual.js .mn-cover.is-issued [data-issue="3"] { animation-delay: .18s; } .manual.js .mn-cover.is-issued [data-issue="4"] { animation-delay: .27s; } .manual.js .mn-cover.is-issued [data-issue="5"] { animation-delay: .36s; } @keyframes mn-issue { to { opacity: 1; translate: 0 0; } } /* Nothing is ever trapped invisible: no JS, no held-back state. */ html:not(.js) .manual .mn-cover [data-issue] { opacity: 1; translate: none; } @media (prefers-reduced-motion: reduce) { .manual.js .mn-cover [data-issue], .manual.js .mn-cover.is-issued [data-issue] { opacity: 1; translate: none; animation: none; } .manual .mn-leader__path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } .manual *, .manual *::before, .manual *::after { transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 19. RESPONSIVE The rail never wraps into a second column — it scales, then folds inline. -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .manual { --rail: 6.25rem; --gutter: 1.75rem; } .mn-cover__grid { gap: var(--s6); } } @media (max-width: 980px) { .mn-cover__grid, .mn-exec__grid, .mn-cert__top { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .mn-testimony { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .mn-deponent { display: flex; gap: var(--s4); align-items: center; } .mn-deponent__frame { width: 7rem; flex: none; } .mn-deponent__meta { border-top: 0; margin-top: 0; padding-top: 0; } .mn-quote { max-width: 34ch; } } @media (max-width: 980px) { } @media (max-width: 760px) { .manual { --rail: 1.25rem; --gutter: 1.25rem; font-size: 1rem; } .mn-cover, .mn-contents, .mn-section, .mn-cert { padding-left: var(--gutter); padding-right: var(--gutter); } .mn-cover { padding-right: var(--gutter); } .mn-cover { padding-top: var(--s6); padding-bottom: var(--s6); } .mn-section { padding-top: var(--s7); padding-bottom: var(--s7); } /* The section mark folds inline above the heading rather than reflowing the rail into a second column. */ .mn-section h2 { max-width: 16ch; } .mn-leader { display: none; } .mn-tab { right: calc(var(--gutter) * -1); top: 1.8rem; } .mn-toc__row { grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; } .mn-schedule__head, .mn-schedule__row { grid-template-columns: 3.2rem minmax(0, 1fr); } .mn-schedule__head span:last-child, .mn-schedule__dots { display: none; } .mn-product { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .mn-product__dots { display: none; } .mn-product__role { grid-column: 1; text-align: left; } .mn-refs__grid { grid-template-columns: minmax(0, 1fr); } .mn-ref { border-right: 0; min-height: 0; padding-right: 0; } .mn-issue__row { grid-template-columns: 7rem minmax(0, 1fr); } .mn-cover__actions, .mn-exec__actions { gap: var(--s3) var(--s4); } .mn-stampbtn { width: 100%; justify-content: center; text-align: center; padding: 1rem 1.1rem; font-size: .72rem; letter-spacing: .13em; } } /* -------------------------------------------------------------------------- 20a. THE TOKEN REBIND The highest-leverage part of the translation. Every legacy rule in blueprint.css is built on the --bp-* tokens, so rebinding the tokens themselves converts the whole sheet at once — gradients become flat fields, radii go to zero, the elevation scale goes to none, and the display face becomes Archivo. What the component overrides below still do is fix *composition*; this fixes material, everywhere, in one place. The pinned harbor hues are deliberately NOT rebound: they are a brand commitment (PRODUCT.md) and they were already correct. -------------------------------------------------------------------------- */ .manual { /* Flat fields. There are no gradients in this world. */ --bp-bg-deep: #053b5b; --bp-bg-soft: #eef7ff; /* Every corner is square. */ --bp-radius-sm: 0; --bp-radius-md: 0; --bp-radius-lg: 0; --bp-radius: 0; --bp-radius-pill: 0; /* Emphasis is line weight, so the elevation scale is retired outright. */ --bp-shadow: none; --bp-shadow-hover: none; --bp-shadow-featured: none; /* One hairline family, struck from the harbor hue. */ --bp-line: rgba(8, 113, 166, .30); --bp-muted: #4a5c6b; /* The display voice. */ --bp-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; --bp-font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Status inks, restruck as stamps rather than candy pills. */ --bp-status-decided-bg: transparent; --bp-status-open-bg: transparent; --bp-status-decided-ink: #137a48; --bp-status-open: #9a5a00; } /* The body face follows the rebind everywhere the legacy sheet set it. */ .manual body, .manual .container, .manual p, .manual li, .manual td, .manual th, .manual input, .manual textarea, .manual select, .manual button { font-family: var(--m-sans); } /* .blueprint-hero is the home/blueprint/case-studies cover; it takes the same flat field and left-hung composition as .bp-page-hero. */ .manual .blueprint-hero { position: relative; background: var(--m-deep); color: #fff; padding: var(--s7) calc(var(--gutter) * 2) var(--s7) var(--rail); text-align: left; overflow: hidden; } .manual .blueprint-hero__inner { max-width: 100rem; margin: 0; text-align: left; } /* ========================================================================== 20. THE TRANSLATION LAYER -------------------------------------------------------------------------- Every public page except the homepage was written against the retired Blueprint primitives. Rather than rewrite twenty-four templates, the primitives themselves are re-rendered here in the Manual's language: same class names, same markup, new world. manual.css loads after blueprint.css and every rule below is scoped under `.manual`, so it wins on ordinary specificity. The three rules of the world govern here too: line weight is the only emphasis, nothing gets a box drawn around it, and colour arrives as a flat field. Where a legacy primitive IS a box (the card grid) it is translated into what this world uses for the same job: a ruled schedule. ========================================================================== */ /* --- Sections and measure ------------------------------------------------- */ .manual .bp-section { position: relative; padding: var(--s8) var(--gutter) var(--s8) var(--rail); background: var(--m-paper); } .manual .bp-section--soft { background: var(--m-vellum); } /* Flat field. The 135deg harbor gradient is retired. */ .manual .bp-section--deep { background: var(--m-deep); color: #fff; } .manual .bp-section--tight { padding-top: var(--s7); padding-bottom: var(--s7); } .manual .bp-container { max-width: 100rem; margin: 0; } .manual .bp-container--narrow { max-width: 62rem; } .manual .bp-container--prose { max-width: 48rem; } /* A manual hangs from its left edge; it does not centre. */ .manual .bp-center { text-align: left; } .manual .bp-center > .bp-lede, .manual .bp-center > p { margin-left: 0; margin-right: 0; } /* --- Type ----------------------------------------------------------------- */ .manual .bp-h2, .manual .bp-page-hero h1, .manual .blueprint-hero h1, .manual .bp-statement { font-family: var(--m-sans); } .manual .bp-h2 { font-variation-settings: 'wdth' 112; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.022em; color: var(--m-ink); margin: 0 0 var(--s4); max-width: 20ch; } .manual .bp-section--deep .bp-h2 { color: #fff; } .manual .bp-h2--lg { font-variation-settings: 'wdth' 118; } .manual .bp-lede { font-size: 1.0625rem; line-height: 1.6; max-width: 66ch; color: var(--m-slate); margin: 0 0 var(--s4); } .manual .bp-section--deep .bp-lede, .manual .bp-section--deep .bp-lede--ink { color: var(--m-pale); } .manual .bp-statement { font-variation-settings: 'wdth' 108; font-size: clamp(1.35rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; } .manual .bp-stat__number, .manual .pattern-proof__number { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--m-blue); } .manual .bp-section--deep .bp-stat__number, .manual .bp-section--deep .pattern-proof__number { color: var(--m-cyan); } .manual .bp-stat__label, .manual .pattern-proof__label { font-family: var(--m-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--m-slate); } .manual .bp-section--deep .bp-stat__label, .manual .bp-section--deep .pattern-proof__label { color: var(--m-pale); } /* --- The eyebrow, retired into sheet chrome ------------------------------- A tracked label stacked over a heading is the one shape this world will not ship. The markup exists in twenty places, so the element is re-formed into what a manual actually prints: a rule across the measure with the mark set at its right end, reading as pagination rather than as a kicker. */ .manual .bp-eyebrow, .manual .execution-strip__eyebrow, .manual .case-block__label, .manual .blueprint-cta-band__eyebrow { display: flex; justify-content: flex-end; font-family: var(--m-mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--m-blue); background: none; border: 0; border-top: var(--w-visible) solid var(--m-rule); border-radius: 0; padding: .5rem 0 0; margin: 0 0 var(--s5); } .manual .bp-section--deep .bp-eyebrow, .manual .bp-section--deep .case-block__label, .manual .blueprint-cta-band__eyebrow { color: var(--m-pale); border-top-color: var(--m-rule-deep); } /* --- Page hero, re-formed as a sheet cover -------------------------------- */ .manual .bp-page-hero { position: relative; background: var(--m-deep); color: #fff; padding: var(--s7) calc(var(--gutter) * 2) var(--s7) var(--rail); text-align: left; overflow: hidden; } /* The retired sheet drew a CSS grid overlay here. This world states its addressing with printed coordinate marks instead, so the cover is a flat field like every other. */ .manual .bp-page-hero::before { display: none; } .manual .bp-page-hero__inner { position: relative; max-width: 100rem; margin: 0; text-align: left; } /* No pill, no translucent chip: a printed sheet header. */ .manual .bp-page-hero__eyebrow, .manual .blueprint-hero__eyebrow { display: block; width: 100%; padding: 0 0 .55rem; margin: 0 0 var(--s5); background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule-deep-soft); border-radius: 0; font-family: var(--m-mono); font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--m-pale); } .manual .bp-page-hero h1 { font-variation-settings: 'wdth' 118; font-size: clamp(2.5rem, 5.6vw, 4.75rem); font-weight: 800; line-height: .98; letter-spacing: -.028em; color: #fff; max-width: 18ch; margin: 0 0 var(--s4); } .manual .bp-page-hero__sub { margin: 0; max-width: 48ch; font-size: 1.09rem; line-height: 1.58; color: var(--m-pale); } /* --- Actions -------------------------------------------------------------- */ .manual .bp-cta, .manual .btn-primary, .manual .blueprint-hero__primary, .manual .blueprint-cta-band__primary { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--m-deep); color: #fff; border: var(--w-cut) solid var(--m-deep); border-radius: 0; padding: 1.15rem 2.3rem; font-family: var(--m-mono); font-weight: 700; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; box-shadow: none; transition: background-color .18s var(--m-ease), border-color .18s var(--m-ease), color .18s var(--m-ease); } /* The impression: a stamp is double-ruled, struck inside its own edge. */ .manual .bp-cta::before, .manual .btn-primary::before, .manual .blueprint-hero__primary::before, .manual .blueprint-cta-band__primary::before { content: ""; position: absolute; inset: 7px; border: var(--w-visible) solid currentColor; opacity: .5; pointer-events: none; } .manual .bp-cta:hover, .manual .btn-primary:hover { background: var(--m-blue); border-color: var(--m-blue); color: #fff; transform: none; } /* Inverted on a deep field. */ .manual .bp-section--deep .bp-cta, .manual .blueprint-hero__primary, .manual .blueprint-cta-band__primary { background: #fff; color: var(--m-deep); border-color: #fff; } .manual .bp-section--deep .bp-cta:hover, .manual .blueprint-hero__primary:hover, .manual .blueprint-cta-band__primary:hover { background: var(--m-cyan); border-color: var(--m-cyan); color: var(--m-deep); transform: none; } .manual .bp-cta--ghost { background: none; border: 0; border-bottom: var(--w-visible) solid var(--m-blue); color: var(--m-blue); padding: 0 0 .18rem; font-family: var(--m-sans); font-variation-settings: 'wdth' 100; font-weight: 600; font-size: .96rem; letter-spacing: 0; text-transform: none; } .manual .bp-cta--ghost::before { display: none; } .manual .bp-cta--ghost:hover { background: none; border-bottom-color: var(--m-cyan); color: var(--m-cyan); } .manual .blueprint-hero__secondary, .manual .blueprint-cta-band__secondary { color: #fff; font-weight: 600; text-decoration: none; border-bottom: var(--w-visible) solid var(--m-cyan); padding-bottom: .18rem; } .manual .blueprint-hero__secondary:hover, .manual .blueprint-cta-band__secondary:hover { color: var(--m-cyan); } /* --- The card grid, translated into a ruled schedule ---------------------- This world draws no box around content, so the icon-card grid becomes what a manual uses for the same job: hairline-ruled cells in a field. */ .manual .bp-card-grid, .manual .bp-problem-grid, .manual .who-in-room__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 var(--s6); max-width: none; margin: var(--s5) 0 0; border-top: var(--w-cut) solid currentColor; } .manual .bp-card, .manual .who-card { border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; transform: none; text-align: left; } .manual .bp-section--deep .bp-card, .manual .bp-section--deep .who-card { border-bottom-color: var(--m-rule-deep-soft); border-right-color: var(--m-rule-deep-soft); } .manual .bp-card:hover, .manual .who-card:hover { transform: none; } .manual .bp-card h3, .manual .who-card__role { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; color: inherit; margin: 0 0 .5rem; } .manual .bp-card p, .manual .who-card__note { color: var(--m-slate); font-size: 1rem; line-height: 1.55; } .manual .bp-section--deep .bp-card p, .manual .bp-section--deep .who-card__note { color: var(--m-pale); } .manual .bp-card__note { border-top: var(--w-construction) solid var(--m-rule); font-family: var(--m-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--m-blue); } /* --- Marks: line-weight glyphs, never emoji ------------------------------- */ .manual .bp-card__icon, .manual .who-card__icon, .manual .bp-card__ico, .manual .architect-lens__icon { font-size: 1.3rem; margin-bottom: var(--s3); color: var(--m-blue); } .manual .bp-section--deep .bp-card__icon, .manual .bp-section--deep .who-card__icon { color: var(--m-cyan); } /* --- Lists ---------------------------------------------------------------- */ .manual .bp-checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 var(--s6); border-top: var(--w-cut) solid currentColor; margin: var(--s5) 0 0; } .manual .bp-checklist li { position: relative; padding: 1.05rem var(--s5) 1.05rem 2.6rem; border-bottom: var(--w-construction) solid var(--m-rule); font-size: 1.05rem; font-weight: 600; color: inherit; } .manual .bp-section--deep .bp-checklist li { border-bottom-color: var(--m-rule-deep-soft); } /* The tick becomes a drafted mark on the rail. */ .manual .bp-checklist li::before { content: ""; position: absolute; left: 0; top: 1.45rem; width: 1.4rem; height: 0; border-top: var(--w-visible) solid var(--m-blue); background: none; border-radius: 0; } .manual .bp-section--deep .bp-checklist li::before { border-top-color: var(--m-cyan); } /* --- Quote card, translated to testimony ---------------------------------- */ .manual .bp-quote-card { background: none; border: 0; border-top: var(--w-cut) solid var(--m-ink); padding: var(--s5) 0 0; max-width: none; } .manual .bp-section--deep .bp-quote-card { border-top-color: #fff; } .manual .bp-quote-card__meta { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--m-blue); } .manual .bp-quote-card blockquote { font-family: var(--m-sans); font-variation-settings: 'wdth' 102; font-size: clamp(1.35rem, 2.4vw, 2.3rem); font-weight: 500; line-height: 1.28; letter-spacing: -.018em; max-width: 34ch; color: inherit; } .manual .bp-quote-card__attr { font-family: var(--m-mono); font-size: .68rem; letter-spacing: .1em; color: var(--m-slate); } /* --- Split ---------------------------------------------------------------- */ .manual .bp-split { gap: var(--s7); align-items: start; } /* --- CTA band, re-formed as the execution division ------------------------ */ .manual .blueprint-cta-band { background: var(--m-deep); padding: var(--s8) calc(var(--gutter) * 2) var(--s8) var(--rail); text-align: left; } .manual .blueprint-cta-band__inner { max-width: 100rem; margin: 0; text-align: left; } .manual .blueprint-cta-band__headline { font-family: var(--m-sans); font-variation-settings: 'wdth' 118; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.024em; max-width: 20ch; margin: 0 0 var(--s4); color: #fff; } .manual .blueprint-cta-band__sub { max-width: 52ch; margin: 0 0 var(--s5); color: var(--m-pale); font-size: 1.0625rem; line-height: 1.6; } .manual .blueprint-cta-band__actions { justify-content: flex-start; gap: var(--s4); } .manual .blueprint-cta-band__disclaimer { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .1em; color: var(--m-chrome); font-style: normal; max-width: 64ch; margin-top: var(--s5); } /* --- Ecosystem strip, translated to acceptable manufacturers -------------- */ .manual .execution-strip { padding: var(--s8) var(--gutter) var(--s8) var(--rail); background: var(--m-vellum); } .manual .execution-strip__header { max-width: 100rem; margin: 0; text-align: left; } .manual .execution-strip__header h2 { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.022em; max-width: 20ch; margin: 0 0 var(--s4); } .manual .execution-strip__header p { max-width: 66ch; margin: 0; color: var(--m-slate); } .manual .execution-strip__grid { max-width: 100rem; margin: var(--s5) 0 0; gap: 0 var(--s6); border-top: var(--w-cut) solid var(--m-ink); } .manual .execution-chip { display: flex; flex-direction: column; justify-content: center; gap: .3rem; background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); min-height: 0; padding: 1.15rem var(--s4) 1.15rem 0; text-align: left; transform: none; } .manual .execution-chip:hover { background: none; border-bottom-color: var(--m-blue); transform: none; } .manual .execution-chip__name { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; color: var(--m-ink); } .manual .execution-chip__sub { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--m-slate); } /* --- Deliverable cards, translated to schedule rows ----------------------- */ .manual .deliverables__header { text-align: left; } .manual .deliverable-card { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; transform: none; } .manual .deliverable-card:hover { transform: none; } .manual .deliverable-card__num, .manual .rab-step__num, .manual .form-icon { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; height: auto; min-width: 2.4rem; background: none; border: 0; font-family: var(--m-mono); font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--m-blue); } .manual .deliverable-card h3 { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; } /* --- FAQ, translated to spec articles ------------------------------------- */ .manual .faq-item { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); padding: 0; } .manual .faq-question, .manual .faq-toggle, .manual .faq-item summary { font-family: var(--m-sans); font-variation-settings: 'wdth' 104; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; padding: 1.15rem 0; color: var(--m-ink); } .manual .faq-answer, .manual .faq-item p { color: var(--m-slate); font-size: 1rem; line-height: 1.6; max-width: 66ch; } /* --- Decision register, translated to errata stamps ----------------------- */ .manual .decision-pill, .manual .bp-status { display: inline-flex; align-items: center; background: none; border: var(--w-visible) solid currentColor; padding: .16rem .5rem; font-family: var(--m-mono); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .manual .decision-pill--made { color: var(--m-stamp-set); } .manual .decision-pill--open { color: var(--m-stamp-open); } /* --- Case components ------------------------------------------------------ */ .manual .case-card { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); padding: var(--s5) 0; transform: none; } .manual .case-card:hover { transform: none; } .manual .case-card__name { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-weight: 700; } /* --- Architecture lens ---------------------------------------------------- */ .manual .architect-lens { background: var(--m-vellum); border: 0; border-top: var(--w-cut) solid var(--m-blue); } /* --- Forms ---------------------------------------------------------------- */ .manual .crm-form input, .manual .crm-form textarea, .manual .crm-form select, .manual .form-container input, .manual .form-container textarea, .manual .form-container select { border: var(--w-construction) solid var(--m-rule); font-family: var(--m-sans); font-size: 1rem; } .manual .crm-form label, .manual .form-container label { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--m-slate); } .manual .crm-form button[type="submit"], .manual .form-container button[type="submit"] { background: var(--m-deep); font-family: var(--m-mono); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; } /* --- The retired elevation language, wherever it still clings ------------- The base reset in section 2 already zeroes radius and shadow on the common elements; these are the named legacy components that set them on themselves with enough specificity to survive it. */ .manual .bp-card, .manual .bp-quote-card, .manual .execution-chip, .manual .deliverable-card, .manual .case-card, .manual .who-card, .manual .faq-item, .manual .architect-lens, .manual .bp-sheet, .manual .om-node, .manual .bp-page-hero__eyebrow, .manual .decision-pill { box-shadow: none; border-radius: 0; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 760px) { .manual .bp-section, .manual .bp-page-hero, .manual .blueprint-hero, .manual .blueprint-cta-band, .manual .execution-strip { padding-left: var(--gutter); padding-right: var(--gutter); } .manual .bp-card, .manual .who-card, .manual .execution-chip { border-right: 0; padding-right: 0; } .manual .bp-checklist li { padding-right: 0; } } /* -------------------------------------------------------------------------- 20b. COMPOSITION — the manual hangs from its left edge The retired world centred every section header. This world does not centre: the rail is the spine, and a centred heading has no spine to hang from. These are exactly the selectors in blueprint.css that set text-align:center. -------------------------------------------------------------------------- */ .manual .bp-faq__header, .manual .bp-process__header, .manual .decision-register__header, .manual .deliverables__header, .manual .engagement-tiers__header, .manual .execution-strip__header, .manual .operating-model__header, .manual .case-card__head, .manual .section-header, .manual .who-in-room .section-header { text-align: left; max-width: 100rem; margin-left: 0; margin-right: 0; } .manual .bp-faq__header h2, .manual .bp-process__header h2, .manual .decision-register__header h2, .manual .deliverables__header h2, .manual .engagement-tiers__header h2, .manual .operating-model__header h2, .manual .section-header h2 { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.022em; max-width: 20ch; margin: 0 0 var(--s4); } .manual .bp-faq__header p, .manual .bp-process__header p, .manual .decision-register__lede, .manual .deliverables__header p, .manual .engagement-tiers__header p, .manual .operating-model__header p, .manual .section-header p { max-width: 66ch; margin-left: 0; margin-right: 0; } /* Section-level padding, so every legacy band hangs off the same rail. */ .manual .bp-faq, .manual .bp-process, .manual .decision-register, .manual .deliverables, .manual .engagement-tiers, .manual .operating-model, .manual .pattern-proof, .manual .disqualifier, .manual .who-in-room, .manual .architect-lens { padding-left: var(--rail); padding-right: var(--gutter); } .manual .bp-faq__inner, .manual .architect-lens__inner, .manual .decision-register__table, .manual .engagement-tiers__grid, .manual .bp-process__steps, .manual .disqualifier__grid, .manual .pattern-proof__grid, .manual .operating-model__flow { max-width: 100rem; margin-left: 0; margin-right: 0; } /* -------------------------------------------------------------------------- 20c. THE LAST BOXES Components that still drew a container around their content. In this world they become ruled cells in a field. -------------------------------------------------------------------------- */ /* Engagement tiers — a schedule of options, not three floating cards. */ .manual .engagement-tiers__grid { gap: 0 var(--s6); border-top: var(--w-cut) solid var(--m-ink); } .manual .tier-card, .manual .engagement-tiers__grid > * { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; transform: none; } /* The featured tier is marked by weight, the way a cut line marks a section. */ .manual .tier-card--featured, .manual .engagement-tiers__grid > .is-featured { border-top: var(--w-cut) solid var(--m-blue); transform: none; } /* Disqualifier — two columns of a decision, ruled, not two tinted cards. */ .manual .disqualifier__grid { gap: 0 var(--s6); border-top: var(--w-cut) solid var(--m-ink); } .manual .disqualifier__col { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; } /* The one place colour still carries meaning: for / not-for, as a top rule. */ .manual .disqualifier__col--for { border-top: var(--w-cut) solid var(--m-stamp-set); } .manual .disqualifier__col--not { border-top: var(--w-cut) solid var(--m-stamp-out); } .manual .disqualifier__col h2, .manual .disqualifier__col h3 { font-family: var(--m-sans); font-variation-settings: 'wdth' 108; font-size: 1.3rem; font-weight: 800; letter-spacing: -.018em; } /* FAQ — spec articles under one continuous rule. */ .manual .bp-faq__inner > details, .manual .bp-faq details, .manual details.faq-item { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); padding: 0; } .manual .bp-faq summary, .manual details.faq-item summary { font-family: var(--m-sans); font-variation-settings: 'wdth' 104; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; padding: 1.15rem 0; background: none; } /* Process steps — numbered articles on the rail. */ .manual .bp-process__steps { gap: 0 var(--s6); border-top: var(--w-cut) solid var(--m-ink); } .manual .bp-step { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; transform: none; } .manual .bp-step__num { background: none; border: 0; width: auto; height: auto; font-family: var(--m-mono); font-size: .82rem; font-weight: 700; letter-spacing: .12em; color: var(--m-blue); } /* Operating-model flow — schematic nodes at visible line weight. */ .manual .om-node { background: var(--m-paper); border: var(--w-visible) solid var(--m-deep); padding: var(--s3) var(--s4); } .manual .om-node__label { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--m-slate); } /* Pattern proof — the numbers, hung left with their labels beneath. */ .manual .pattern-proof__grid { gap: 0 var(--s6); border-top: var(--w-cut) solid currentColor; } .manual .pattern-proof__metric { text-align: left; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); padding: var(--s5) var(--s5) var(--s5) 0; } .manual .pattern-proof__eyebrow, .manual .pattern-proof__caption { text-align: left; font-family: var(--m-mono); letter-spacing: .16em; } /* Decision register — this one already read as an artifact; keep the sheet, square its corners and put its type on the ramp. */ .manual .bp-sheet { border: var(--w-visible) solid var(--m-rule); background: var(--m-paper); } .manual .bp-sheet__id, .manual .bp-sheet__name, .manual .bp-sheet__rev, .manual .decision-row--header, .manual .decision-register__caption { font-family: var(--m-mono); letter-spacing: .14em; text-transform: uppercase; } .manual .decision-row { border-bottom: var(--w-construction) solid var(--m-rule); } /* Architecture lens. */ .manual .architect-lens__eyebrow { font-family: var(--m-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--m-blue); } .manual .architect-lens__cta { font-family: var(--m-mono); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } /* The film plate keeps its title-block idea; it just stops being a soft card. */ .manual .bp-plate { border: var(--w-visible) solid var(--m-rule); background: var(--m-paper); } .manual .bp-plate__titleblock, .manual .bp-plate__caption { font-family: var(--m-mono); letter-spacing: .14em; } .manual .bp-film__play { border-radius: 0; font-family: var(--m-mono); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } @media (max-width: 760px) { .manual .bp-faq, .manual .bp-process, .manual .decision-register, .manual .deliverables, .manual .engagement-tiers, .manual .operating-model, .manual .pattern-proof, .manual .disqualifier, .manual .who-in-room, .manual .architect-lens { padding-left: var(--gutter); padding-right: var(--gutter); } .manual .tier-card, .manual .disqualifier__col, .manual .bp-step, .manual .pattern-proof__metric, .manual .engagement-tiers__grid > * { border-right: 0; padding-right: 0; } } /* -------------------------------------------------------------------------- 20d. THE LANDING + GIFT SHEETS The /lp/* and /gifts/* pages run landing.css and gifts*.css, which carry their own token sets. Same move as the --bp-* rebind: convert the tokens and the whole sheet follows, then correct only the composition that remains. -------------------------------------------------------------------------- */ .manual { /* landing.css elevation scale — retired, like every other shadow here. */ --shadow-soft: none; --shadow-medium: none; --shadow-strong: none; --accent-light: #eef7ff; --accent-cyan: #eef7ff; --text-muted: #4a5c6b; } /* landing.css sets Inter on body and hardcodes radii on its own components. */ .manual .lp-section, .manual .lp-hero, .manual .lp-card, .manual .lp-cta, .manual [class^="lp-"], .manual [class*=" lp-"]:not([class*="__"]) { border-radius: 0; box-shadow: none; } /* Gift + landing headings join the ramp and the display face. */ .manual .lp-hero h1, .manual .gift-hero h1, .manual .rab-hero h1 { font-family: var(--m-sans); font-variation-settings: 'wdth' 118; font-weight: 800; line-height: .99; letter-spacing: -.028em; } .manual .lp-section h2, .manual .gift-section h2, .manual .rab-section h2 { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-weight: 800; line-height: 1.05; letter-spacing: -.022em; } /* Anything on these sheets still drawing a soft container. */ .manual .gift-card, .manual .rab-card, .manual .form-panel, .manual .form-container, .manual .download-card, .manual .checklist-card, .manual .value-card, .manual .step-card { border-radius: 0; box-shadow: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); background: none; } /* The gift pages' circular numeric tokens become drafted marks. */ .manual .rab-step__num, .manual .form-icon, .manual .step-card__num { border-radius: 0; background: none; color: var(--m-blue); font-family: var(--m-mono); font-weight: 700; letter-spacing: .1em; } /* Buttons on the landing sheets take the stamp. */ .manual .lp-cta, .manual .gift-cta, .manual .btn, .manual .cta-button, .manual button.submit-btn { border-radius: 0; box-shadow: none; font-family: var(--m-mono); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; } /* The architecture-lens banner that closes every landing page. */ .manual .architect-lens { border-radius: 0; box-shadow: none; } /* -------------------------------------------------------------------------- 20e. THE FLOOR A final sweep for the two properties this world does not have. Scoped to `.manual` and to the retired sheets' own component namespaces, so it cannot reach the Manual's own elements — which never set either property anyway. -------------------------------------------------------------------------- */ .manual [class^="bp-"], .manual [class*=" bp-"]:not([class*="__"]), .manual [class^="lp-"], .manual [class*=" lp-"]:not([class*="__"]), .manual [class^="gift"], .manual [class*=" gift"]:not([class*="__"]), .manual [class^="rab-"], .manual [class*=" rab-"]:not([class*="__"]), .manual .card, .manual .tier-card, .manual .who-card, .manual .case-card, .manual .execution-chip, .manual .deliverable-card, .manual .faq-item, .manual .om-node, .manual .decision-pill, .manual .disqualifier__col { box-shadow: none; border-radius: 0; } /* The film dialog is chrome we own; square it too. */ .manual .bp-film-dialog, .manual .bp-film-dialog__close { border-radius: 0; } /* -------------------------------------------------------------------------- 20f. THE LANDING VOCABULARY landing.css does not share the --bp-* component names; it has its own (hero-with-form, content-section, problem-card, timeline-step, …). These are those names, translated. Same three rules: flat fields, line weight, no box. -------------------------------------------------------------------------- */ /* Hero ---------------------------------------------------------------------- */ .manual--lp .hero-with-form, .manual--lp .hero, .manual--lp .lp-hero { background: var(--m-vellum); padding: var(--s8) var(--gutter) var(--s8) var(--rail); } .manual--lp .hero-content, .manual--lp .hero-with-form > .container { max-width: 100rem; margin: 0; } .manual--lp .hero-text h1, .manual--lp .hero h1 { font-family: var(--m-sans); font-variation-settings: 'wdth' 116; font-size: clamp(2.5rem, 5.6vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.028em; /* Headings are ink in this world; harbor blue is for rules and marks. */ color: var(--m-ink); max-width: 20ch; } .manual--lp .hero-text p, .manual--lp .hero-subtitle { font-size: 1.09rem; line-height: 1.6; color: var(--m-slate); max-width: 60ch; } /* The form is a panel on the sheet, not a floating rounded card. */ .manual .hero-form-container, .manual .form-container { background: var(--m-paper); border: var(--w-visible) solid var(--m-rule); border-top: var(--w-cut) solid var(--m-blue); border-radius: 0; box-shadow: none; padding: var(--s5); } .manual .hero-form-container::before, .manual .form-container::before { display: none; } .manual .hero-form-container h3, .manual .form-container h3 { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; text-align: left; color: var(--m-ink); } .manual .hero-form-container p, .manual .form-container p { text-align: left; color: var(--m-slate); font-size: .96rem; } /* Benefit ticks become drafted marks on the rail. */ .manual .hero-benefits li { padding-left: 2.6rem; } .manual .hero-benefits li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 1.4rem; height: 0; border-top: var(--w-visible) solid var(--m-blue); background: none; border-radius: 0; color: transparent; } /* Sections ------------------------------------------------------------------ */ .manual .content-section { padding: var(--s8) var(--gutter) var(--s8) var(--rail); } .manual .content-section:not(.bg-gradient):not(.bg-light):not([class*="dark"]:not([class*="__"])) { background-color: var(--m-paper); } .manual .content-section.bg-light, .manual .bg-light { background: var(--m-vellum); } .manual .content-section > .container, .manual .content-section .container { max-width: 100rem; margin: 0; } .manual .section-header h2 { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -.022em; color: var(--m-ink); max-width: 20ch; margin: 0 0 var(--s4); } .manual .section-header p { max-width: 66ch; margin: 0 0 var(--s4); color: var(--m-slate); } /* The card families, translated to ruled cells ------------------------------ */ .manual .problem-card, .manual .tech-card, .manual .outcome-card, .manual .proof-card, .manual .solution-point, .manual .deliverable-block, .manual .timeline-step, .manual .outcome-stat, .manual .proof-stat { border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-right: var(--w-construction) solid var(--m-rule); border-radius: 0; box-shadow: none; padding: var(--s5) var(--s5) var(--s5) 0; transform: none; text-align: left; } .manual .problem-card:hover, .manual .tech-card:hover, .manual .outcome-card:hover, .manual .proof-card:hover, .manual .solution-point:hover, .manual .deliverable-block:hover, .manual .timeline-step:hover { transform: none; box-shadow: none; background: none; } .manual .problem-card h3, .manual .tech-card h3, .manual .outcome-card h3, .manual .proof-card h3, .manual .solution-point h3, .manual .deliverable-block h3, .manual .timeline-content h3 { font-family: var(--m-sans); font-variation-settings: 'wdth' 106; font-size: 1.2rem; font-weight: 700; letter-spacing: -.012em; color: var(--m-ink); margin: 0 0 .5rem; } .manual .problem-card p, .manual .tech-card p, .manual .outcome-card p, .manual .proof-card p, .manual .solution-point p, .manual .deliverable-block p, .manual .timeline-content p { color: var(--m-slate); font-size: 1rem; line-height: 1.55; } /* Numeric tokens and icon discs become mono marks. */ .manual .deliverable-num, .manual .timeline-marker, .manual .solution-icon, .manual .timeline-week { background: none; border: 0; border-radius: 0; width: auto; height: auto; min-width: 2.4rem; color: var(--m-blue); font-family: var(--m-mono); font-size: .82rem; font-weight: 700; letter-spacing: .12em; box-shadow: none; } /* Stat figures join the ramp. */ .manual .outcome-stat, .manual .proof-stat, .manual [class*="proof-number"]:not([class*="__"]) { font-family: var(--m-sans); font-variation-settings: 'wdth' 112; font-weight: 800; letter-spacing: -.03em; } .manual .proof-label { font-family: var(--m-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; } /* Actions ------------------------------------------------------------------- */ .manual .btn, .manual .btn-primary, .manual .btn.large { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--m-deep); color: #fff; border: var(--w-cut) solid var(--m-deep); border-radius: 0; box-shadow: none; padding: 1.15rem 2.3rem; font-family: var(--m-mono); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transform: none; } .manual .btn::before, .manual .btn-primary::before { content: ""; position: absolute; inset: 7px; border: var(--w-visible) solid currentColor; opacity: .5; pointer-events: none; } .manual .btn:hover, .manual .btn-primary:hover { background: var(--m-blue); border-color: var(--m-blue); color: #fff; transform: none; box-shadow: none; } /* The secondary action is a cited link, never a second pill. */ .manual .btn-secondary, .manual .btn.secondary { background: none; border: 0; border-bottom: var(--w-visible) solid var(--m-blue); border-radius: 0; box-shadow: none; color: var(--m-blue); padding: 0 0 .18rem; font-family: var(--m-sans); font-variation-settings: 'wdth' 100; font-weight: 600; font-size: .96rem; letter-spacing: 0; text-transform: none; } .manual .btn-secondary::before, .manual .btn.secondary::before { display: none; } .manual .btn-secondary:hover, .manual .btn.secondary:hover { background: none; color: var(--m-cyan); border-bottom-color: var(--m-cyan); } /* FAQ ----------------------------------------------------------------------- */ .manual .faq-item { background: none; border: 0; border-bottom: var(--w-construction) solid var(--m-rule); border-radius: 0; box-shadow: none; padding: 0; } .manual .faq-question { font-family: var(--m-sans); font-variation-settings: 'wdth' 104; font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; color: var(--m-ink); padding: 1.15rem 0; background: none; } .manual .faq-answer { color: var(--m-slate); font-size: 1rem; line-height: 1.6; max-width: 66ch; padding: 0 0 1.15rem; } @media (max-width: 760px) { .manual--lp .hero-with-form, .manual--lp .hero, .manual .content-section { padding-left: var(--gutter); padding-right: var(--gutter); } .manual .problem-card, .manual .tech-card, .manual .outcome-card, .manual .proof-card, .manual .solution-point, .manual .deliverable-block, .manual .timeline-step { border-right: 0; padding-right: 0; } .manual .btn, .manual .btn-primary { width: 100%; padding: 1rem 1.1rem; font-size: .72rem; letter-spacing: .13em; } } /* -------------------------------------------------------------------------- 20g. THE ENFORCED FLOOR Two properties in this world are invariants rather than defaults: there is no rounded corner and no shadow anywhere in it. This block states that once, for every element, so a stray declaration cannot reintroduce the retired material one route at a time. It needed !important while the retired sheets, twenty-one per-page