/* Red pen mode: Brock printed your doc and wrote on it. Reusable by any surface; see docs/ARCHITECTURE.md for the class catalog. Needs base.css (tokens) and the Caveat font. */ .desk { max-width: 860px; margin: 0 auto; } .paper { position: relative; background: var(--sheet); color: #23221f; border-radius: 3px; padding: 56px 64px 64px; box-shadow: 0 1px 1px rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.12); transform: rotate(-0.35deg); min-width: 0; } .paper.flat { transform: none; } .paper::before { /* printer margin line */ content: ""; position: absolute; top: 0; bottom: 0; left: 40px; width: 1px; background: rgba(210, 70, 60, .18); } .coffee { position: absolute; top: 18px; right: 26px; width: 130px; height: 130px; border-radius: 50%; border: 9px solid rgba(120, 78, 40, .10); box-shadow: inset 0 0 0 2px rgba(120, 78, 40, .06); transform: rotate(12deg); pointer-events: none; } .doc-meta { color: #8b877d; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: 28px; } .doc { font: 16px/1.75 var(--serif); overflow-wrap: anywhere; } .doc p { margin: 0 0 14px; white-space: pre-wrap; } .paper h2, .paper h3 { font-family: var(--serif); color: #23221f; } .ink { font-family: var(--hand); color: var(--pen); font-weight: 700; } /* Pen marks on text, by comment type */ .doc mark, mark.pen { background: none; color: inherit; cursor: pointer; transition: box-shadow .3s, text-decoration-color .3s, border-color .3s, background-color .3s; } .m-idea_theft { border: 2px solid var(--pen); border-radius: 48% 52% 45% 55% / 60% 45% 55% 40%; padding: 0 3px; margin: 0 -3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .m-misunderstanding { text-decoration: underline wavy var(--pen) 2px; text-underline-offset: 5px; } .m-scope_creep { text-decoration: underline double var(--pen) 2px; text-underline-offset: 4px; } .m-offline { text-decoration: underline dashed var(--pen) 2px; text-underline-offset: 5px; } .m-praise_self { background: linear-gradient(transparent 45%, rgba(255, 214, 0, .55) 45%, rgba(255, 214, 0, .55) 88%, transparent 88%) !important; } .doc mark.active, mark.pen.active { box-shadow: 0 0 0 3px rgba(210, 45, 35, .15); border-radius: 6px; } .pin { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: 2px; border: 2px solid var(--pen); border-radius: 50%; font: 700 15px/1 var(--hand); color: var(--pen); vertical-align: super; transform: rotate(-6deg); transition: opacity .3s; } .paper del { text-decoration: line-through wavy var(--pen) 2.5px; color: #6d6a62; transition: text-decoration-color .4s; } /* Handwritten notes, placed right under the paragraph they're about */ .note { position: relative; margin: -4px 0 18px var(--indent, 24px); max-width: 560px; transform: rotate(var(--tilt, -1deg)); transition: opacity .3s; } .note .ink { font-size: 23px; line-height: 1.15; display: inline; } .note .arrow { font: 700 24px/1 var(--hand); color: var(--pen); margin-right: 4px; } .note .num { font: 700 19px/1 var(--hand); color: var(--pen); border: 2px solid var(--pen); border-radius: 50%; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 6px; vertical-align: 2px; } .note.active .ink { text-shadow: 0 0 1px var(--pen); } /* Yellow sticky notes: the "What this actually means" layer. Hidden until an ancestor (usually ) has .show-real. */ .sticky { display: none; margin: 8px 0 0 30px; max-width: 480px; padding: 10px 12px; background: var(--sticky); color: #2d3a2f; font: 13.5px/1.45 var(--sans); box-shadow: 0 2px 6px rgba(0,0,0,.12); transform: rotate(calc(var(--tilt, -1deg) * -1.5)); } .sticky b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: #3c6b4d; margin-bottom: 2px; } .show-real .sticky { display: block; } .sticky.always { display: block; } .rp-general .note { margin-left: 0; } .rp-general:not(:empty) { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px dashed rgba(210, 45, 35, .3); } .reclaim { margin: 30px 0 0 12px; transform: rotate(-1.4deg); } .reclaim .ink { font-size: 24px; line-height: 1.15; } .reclaim .who { display: block; font: 700 17px/1 var(--hand); color: var(--pen); opacity: .8; margin-bottom: 2px; } .signoff { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; } .stamp { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 18px 6px; border: 3px double var(--stamp); color: var(--stamp); border-radius: 6px; font: 800 22px/1 var(--sans); letter-spacing: 3px; text-transform: uppercase; transform: rotate(-7deg); opacity: .85; mix-blend-mode: multiply; } .stamp span { font-size: 11px; letter-spacing: 2px; margin-top: 4px; } .signature { font-size: 26px; transform: rotate(-2deg); } /* Replay: Brock's pen cursor moves through the page (driven by shell.js createReplay) */ .brock-cursor { position: absolute; top: 0; left: 0; z-index: 5; display: flex; align-items: center; gap: 8px; pointer-events: none; transition: transform .7s cubic-bezier(.3,.7,.3,1); } .brock-cursor[hidden] { display: none; } .pen-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pen); color: #fff; font: 700 11px/1 var(--sans); box-shadow: 0 2px 6px rgba(0,0,0,.25); } .bubble { background: #23221f; color: #fff; font: 600 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.2); } /* While .replaying is on an ancestor, .pending elements are hidden or un-inked. */ .replaying .note.pending, .replaying .reclaim.pending, .replaying .signoff.pending, .replaying .pin.pending, .replaying .rp-hide.pending { display: none; } .replaying mark.pending { border-color: transparent; text-decoration-color: transparent; background: none !important; } .replaying del.pending { text-decoration-color: transparent; } .replaying .rp-fade.pending { opacity: 0; } .rp-fade { transition: opacity .4s; } .note:not(.pending), .reclaim:not(.pending) { animation: appear .25s ease-out; } @keyframes appear { from { opacity: 0; } } .stamp.slam { animation: slam .35s cubic-bezier(.2,.9,.3,1.4); } @keyframes slam { from { transform: rotate(-7deg) scale(2.2); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: .85; } } .btn.replay-active { border-color: var(--pen); color: var(--pen); } @media (prefers-color-scheme: dark) { .paper { box-shadow: 0 10px 30px rgba(0,0,0,.5); } .stamp { mix-blend-mode: normal; } } @media (max-width: 700px) { .paper { padding: 36px 20px 40px 28px; transform: none; } .paper::before { left: 14px; } .coffee { width: 90px; height: 90px; right: 10px; top: 8px; } .note { margin-left: 8px; } .sticky { margin-left: 10px; } .bubble { display: none; } } /* Markdown, typeset in place (see typesetMarkdown in redpen.js). */ .paper .md-mark { display: none; } .paper .doc p.md-h::first-line { font-weight: 700; font-size: 1.15em; } .paper .doc p.md-hr { color: transparent; border-top: 1px solid #d8d3c7; height: 0; margin: 18px 0; overflow: hidden; } .paper .doc p.md-table { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; white-space: pre; } /* Review: the sincere summary above the paper when the toggle is on. */ .real-top { background: var(--sticky); color: #2d3a2f; border-radius: 8px; padding: 12px 16px; margin: 0 auto 18px; max-width: 860px; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 15px; } .real-top b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #3c6b4d; margin-bottom: 2px; } .real-top p { margin: 0 0 6px; } .real-top a { color: #2d3a2f; font-weight: 600; } @media (max-width: 640px) { .paper .doc p.md-table { font-size: 11px; } }