/* ====================================================================== Drawn controls - the one stylesheet for every button, badge and accordion toggle on absolv.ai. Decision (Shaun, 2026-08-20, Drawn Controls study): no flat orange chrome anywhere. Buttons are a graphite pencil contour with an orange scribbled fill (study option 4). Secondary buttons are contour only (option 1). Badges are a worn orange stamp (option 7). The accordion plus is a drawn cross with no box. Enforced by ~/.claude/hooks/block-flat-orange-controls.py, which names these class names in its remedy message, so the names here are load-bearing. The marks themselves are painted by /assets/drawn-controls.js as an inline at the element's MEASURED pixel size. Never a fixed viewBox stretched to fit: that squashes every vertical stroke as the element narrows. This file only lays out the box, the label and the states. Markup: Book a call See the working Costs us money (inside a row button) (standalone) Tokens used, with fallbacks so a page that has not adopted the v2 root still renders: --ink, --orange, --graphite, --font-sans, --font-mono. Add --graphite:#33302A to any :root that lacks it. ====================================================================== */ /* ---------- buttons ---------- */ .btn-drawn { position: relative; isolation: isolate; /* keeps the z-index dance below inside the button */ display: inline-flex; align-items: center; justify-content: center; gap: .5em; box-sizing: border-box; min-height: 48px; /* tap-target floor, never below 44 */ padding: .7rem 1.6rem; margin: 0; background: transparent; background-image: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink, #141414); /* ink label, not white and not paper */ font-family: var(--font-sans, "Plus Jakarta Sans", -apple-system, system-ui, sans-serif); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: .01em; text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: opacity .18s ease; } .btn-drawn:hover, .btn-drawn:focus, .btn-drawn:visited { color: var(--ink, #141414); text-decoration: none; } .btn-drawn.is-small { min-height: 44px; padding: .4rem 1rem; font-size: .88rem; } .btn-drawn.is-block { display: flex; width: 100%; min-height: 56px; font-size: 1.05rem; } .btn-drawn:disabled, .btn-drawn[aria-disabled="true"] { opacity: .5; cursor: default; } .btn-drawn:active:not(:disabled) { transform: translateY(1px); } .btn-drawn:focus-visible, .toggle-drawn:focus-visible { outline: 2px solid var(--orange, #DF5911); outline-offset: 4px; } /* The label is wrapped by the JS into .dc-lbl so it paints above the marks. An absolutely positioned SVG would otherwise sit over in-flow text. */ .btn-drawn > .dc-lbl, .badge-stamped > .dc-lbl { position: relative; z-index: 1; } .dc-marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; /* the filters roughen past the box edge */ pointer-events: none; z-index: 0; display: block; margin: 0; } /* ---------- badge (stamp) ---------- */ .badge-stamped { position: relative; isolation: isolate; display: inline-block; box-sizing: border-box; padding: 4px 9px; background: transparent; border: 0; border-radius: 0; color: var(--ink, #141414); font-family: var(--font-mono, "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace); font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: .14em; text-transform: uppercase; white-space: normal; /* a long chip wraps, as the live .cost-tag did; the stamp follows the measured box */ max-width: 100%; cursor: default; } /* ---------- accordion toggle (drawn cross, no box) ---------- */ .toggle-drawn { position: relative; display: inline-block; box-sizing: border-box; width: 28px; height: 28px; flex: none; margin: 0 0 0 1rem; padding: 0; background: transparent; border: 0; transition: transform .3s ease; } button.toggle-drawn { width: 44px; height: 44px; cursor: pointer; -webkit-appearance: none; appearance: none; } .toggle-drawn > .dc-marks { inset: 0; } /* Rotates to a cross when the row is open. The legacy .faq-q svg rule in index.html is scoped to direct children so it cannot double-rotate this. */ .open .toggle-drawn, [aria-expanded="true"] .toggle-drawn, [aria-expanded="true"].toggle-drawn, [open] > summary .toggle-drawn { transform: rotate(45deg); } /* ---------- pencil passes ---------- Graphite is layered: each line is struck two or three times and the tone accumulates. */ .dc-p1 { opacity: .86; } .dc-p2 { opacity: .48; } .dc-p3 { opacity: .3; } /* Hover redraws the line with a fresh seed. A drawn control should look drawn again, not lit up. */ .dc-hover { display: none; } .btn-drawn:hover .dc-rest, .btn-drawn:focus-visible .dc-rest { display: none; } .btn-drawn:hover .dc-hover, .btn-drawn:focus-visible .dc-hover { display: block; } /* ---------- draw-on ---------- pathLength is normalised to 1 so every stroke, long or short, lays down over the same duration. .dc-drawing is set by the JS until the element is reached by scrolling, then swapped for .dc-drawn. The JS counts anything already above the fold as reached, and reveals on a debounced scroll rather than an IntersectionObserver, which skips elements that never come to rest in view. */ .dc-drawing .dc-ink { stroke-dasharray: 1; stroke-dashoffset: 1; } .dc-drawn .dc-ink { stroke-dashoffset: 0; transition: stroke-dashoffset .62s cubic-bezier(.35, .75, .35, 1); } .dc-drawn .dc-fillmark { opacity: var(--o, 1); transition: opacity .5s ease .18s; } .dc-drawing .dc-fillmark { opacity: 0; } @media (prefers-reduced-motion: reduce) { .dc-drawing .dc-ink, .dc-drawn .dc-ink { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; } .dc-drawing .dc-fillmark, .dc-drawn .dc-fillmark { opacity: var(--o, 1); transition: none; } .toggle-drawn { transition: none; } } @media print { .dc-marks { display: none; } .btn-drawn, .badge-stamped { border: 1px solid var(--graphite, #33302A); } }