/* * RECAP "Highlighter" components. Builds only on tokens.css (load that first). * Class prefix rc- so these never collide with page or app styles. */ /* Highlighter mark: a hand-drawn swipe behind the text. Add .rc-mark-good, -bad or -info for marks that mean something. Wrapping lines keep the swipe. */ .rc-mark { color: var(--rc-on-hl); background-color: transparent; background-image: linear-gradient(100deg, rgba(var(--rc-hl-rgb), 0) 0, var(--rc-hl) var(--mark-fade-in, 0.6em), var(--rc-hl) calc(100% - var(--mark-fade-out, 0.5em)), rgba(var(--rc-hl-rgb), 0.3) 100%); background-repeat: no-repeat; background-size: 100% 78%; background-position: 0 70%; padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Dark mode: the soft ends of the swipe faded to the dark page under dark on-hl ink, so the first letter of a mark ("H" in "Happens.") nearly vanished. Keep the fades inside the padding there. */ :root[data-theme="dark"] .rc-mark, :root.dark .rc-mark { --mark-fade-in: 0.14em; --mark-fade-out: 0.1em; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rc-mark { --mark-fade-in: 0.14em; --mark-fade-out: 0.1em; } } .rc-mark-good { background-image: linear-gradient(var(--rc-mark-good), var(--rc-mark-good)); } .rc-mark-bad { background-image: linear-gradient(var(--rc-mark-bad), var(--rc-mark-bad)); } .rc-mark-info { background-image: linear-gradient(var(--rc-mark-info), var(--rc-mark-info)); } /* Tag: the small ink label that names a mark ("Key quote", "Action") */ .rc-tag { display: inline-block; font: 800 0.66rem/1 var(--rc-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rc-paper); background: var(--rc-ink); border-radius: 4px; padding: 0.28rem 0.4rem; white-space: nowrap; vertical-align: 0.2em; } /* Recap note: the yellow sticky that carries a recap */ .rc-note { background: var(--rc-hl); color: var(--rc-on-hl); padding: 1.1rem 1.2rem 1.2rem; transform: rotate(-2.5deg); box-shadow: var(--rc-shadow-note); font: 0.88rem/1.5 var(--rc-font-sans); } .rc-note h4 { font: 900 0.72rem var(--rc-font-sans); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.45rem; } .rc-note ul { list-style: none; display: grid; gap: 0.3rem; margin-top: 0.55rem; padding: 0; } .rc-note li::before { content: '\25A2 '; } /* Buttons */ .rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border: 0; cursor: pointer; font: 700 0.98rem/1.2 var(--rc-font-sans); padding: 0.85rem 1.45rem; border-radius: var(--rc-radius); text-decoration: none; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; } .rc-btn:active { transform: translateY(1px); } .rc-btn:focus-visible { outline: 3px solid var(--rc-hl-strong); outline-offset: 3px; } .rc-btn-primary { background: var(--rc-primary-bg); color: var(--rc-primary-fg); box-shadow: 4px 4px 0 var(--rc-primary-shadow); } .rc-btn-primary:hover { color: var(--rc-primary-fg); box-shadow: 6px 6px 0 var(--rc-primary-shadow); transform: translate(-1px, -1px); } .rc-btn-line { background: transparent; color: var(--rc-ink); box-shadow: inset 0 0 0 1.5px var(--rc-ink); } .rc-btn-line:hover { color: var(--rc-ink); background: var(--rc-surface); } .rc-btn-sm { padding: 0.55rem 1rem; font-size: 0.86rem; border-radius: 10px; } .rc-btn-primary.rc-btn-sm { box-shadow: 3px 3px 0 var(--rc-primary-shadow); } /* Card */ .rc-card { background: var(--rc-surface); border-radius: var(--rc-radius-lg); box-shadow: var(--rc-shadow); padding: 1.6rem; } /* Type */ .rc-kicker { font: 700 0.78rem var(--rc-font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--rc-ink-3); } .rc-display { font-family: var(--rc-font-serif); font-weight: 700; letter-spacing: -0.035em; line-height: 0.98; color: var(--rc-ink); } .rc-h2 { font-family: var(--rc-font-serif); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.03em; color: var(--rc-ink); } /* Logo: the word "recap" over a highlighter swipe */ .rc-logo { position: relative; z-index: 0; display: inline-block; font: 900 1.45rem/1 var(--rc-font-sans); letter-spacing: -0.05em; color: var(--rc-ink); text-decoration: none; } .rc-logo::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -1px; height: 0.45em; background: var(--logo-bar); z-index: -1; border-radius: 3px; transform: rotate(-1.5deg); } /* Logo swipe colours (Igor, 2026-10-15: the colour may rotate now and then). Light mode: dark ink on a pale highlighter, so every pale shade works. Dark mode: the letters stay light all the way down, so the swipe has to be a deeper highlighter that light ink reads on. Yellow there is ~1.1:1, which is why it is not in the dark list. Keep each list to shades that pass: light >= 4.5:1 against --rc-ink, dark >= 3.5:1 against the dark ink. lib/__tests__/highlighter-tokens.test.ts checks both. To rotate, point --logo-bar-light / --logo-bar-dark at another entry. */ :root { --logo-light-yellow: #ffe94d; --logo-light-green: #9dfc8a; --logo-light-orange: #ffb35c; --logo-light-blue: #8fd3ff; --logo-light-pink: #ff9ed0; --logo-light-violet: #c8a8ff; --logo-dark-green: #2b8a3e; --logo-dark-orange: #d0530f; --logo-dark-pink: #d6337f; --logo-dark-blue: #2f68d8; --logo-dark-violet: #7a4bd6; --logo-dark-magenta: #b8329e; --logo-dark-teal: #0f7f7a; /* Current picks. Light follows the accent (yellow unless an accent is set). */ --logo-bar-light: var(--rc-hl); --logo-bar-dark: var(--logo-dark-green); } .rc-logo { --logo-bar: var(--logo-bar-light); } :root[data-theme="dark"] .rc-logo, :root.dark .rc-logo { --logo-bar: var(--logo-bar-dark); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rc-logo { --logo-bar: var(--logo-bar-dark); } } /* Theme toggle: