/* ─── Cat paw cursor ────────────────────────────────────────────── Its own file rather than part of style.css because only index.html loads that one — the landing page, login, privacy and the rest each carry their own inline styles, and the paw should follow you across all of them. White fur, pink beans, heart-shaped pad, deepening over anything clickable. The silhouette is drawn twice: once as a fat dark stroke, then filled white on top. Overlapping ellipses then share one continuous outline, which no single shape could give, and it stays legible on a dark or a light page. No or — internal references are unreliable inside a data URI, so the fur shapes are simply repeated. Drawn on a 24px canvas. 32 was noticeably too big in use, and below about 20 the beans and the pad smear into one blob. Gated behind (pointer: fine): that asks whether the primary input is a mouse or trackpad, which is the real question — screen width says nothing about input, and a touchscreen laptop still has a cursor. It is the same test hasMouse() makes in JS. */ @media (pointer: fine) { :root { --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236B5551' stroke='%236B5551' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='15.9' rx='7.9' ry='6.1'/%3E%3Cellipse cx='5' cy='9.4' rx='3.1' ry='3.8' transform='rotate(-22 5 9.4)'/%3E%3Cellipse cx='9.2' cy='5.9' rx='3.05' ry='3.9' transform='rotate(-8 9.2 5.9)'/%3E%3Cellipse cx='14.8' cy='5.9' rx='3.05' ry='3.9' transform='rotate(8 14.8 5.9)'/%3E%3Cellipse cx='19' cy='9.4' rx='3.1' ry='3.8' transform='rotate(22 19 9.4)'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Cellipse cx='12' cy='15.9' rx='7.9' ry='6.1'/%3E%3Cellipse cx='5' cy='9.4' rx='3.1' ry='3.8' transform='rotate(-22 5 9.4)'/%3E%3Cellipse cx='9.2' cy='5.9' rx='3.05' ry='3.9' transform='rotate(-8 9.2 5.9)'/%3E%3Cellipse cx='14.8' cy='5.9' rx='3.05' ry='3.9' transform='rotate(8 14.8 5.9)'/%3E%3Cellipse cx='19' cy='9.4' rx='3.1' ry='3.8' transform='rotate(22 19 9.4)'/%3E%3C/g%3E%3Cpath d='M12 10.7 C10 10.7 7.4 12.5 6.7 15.1 C6.1 17.3 7.5 19.6 9.7 19.8 C10.9 20 11.6 19.4 12 18.8 C12.4 19.4 13.1 20 14.3 19.8 C16.5 19.6 17.9 17.3 17.3 15.1 C16.6 12.5 14 10.7 12 10.7 Z' fill='%23F9C9D4' stroke='%23E89BAC' stroke-width='0.7'/%3E%3Cg fill='%23F9C9D4' stroke='%23E89BAC' stroke-width='0.7'%3E%3Cellipse cx='5' cy='9.6' rx='1.85' ry='2.4' transform='rotate(-22 5 9.6)'/%3E%3Cellipse cx='9.2' cy='6.2' rx='1.8' ry='2.5' transform='rotate(-8 9.2 6.2)'/%3E%3Cellipse cx='14.8' cy='6.2' rx='1.8' ry='2.5' transform='rotate(8 14.8 6.2)'/%3E%3Cellipse cx='19' cy='9.6' rx='1.85' ry='2.4' transform='rotate(22 19 9.6)'/%3E%3C/g%3E%3C/svg%3E") 5 3, auto; /* Over something clickable the toes spread and the body drops: a visibly wider silhouette, not just a deeper pink. Colour alone was the first attempt, and at 24px the two states were near enough to identical that the hover simply did not register. Shape is what reads at this size; the colour shift now only reinforces it. */ --paw-tap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236B5551' stroke='%236B5551' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='16.6' rx='7.2' ry='5.6'/%3E%3Cellipse cx='4.2' cy='9.8' rx='2.9' ry='3.6' transform='rotate(-32 4.2 9.8)'/%3E%3Cellipse cx='8.6' cy='5' rx='2.9' ry='3.7' transform='rotate(-13 8.6 5)'/%3E%3Cellipse cx='15.4' cy='5' rx='2.9' ry='3.7' transform='rotate(13 15.4 5)'/%3E%3Cellipse cx='19.8' cy='9.8' rx='2.9' ry='3.6' transform='rotate(32 19.8 9.8)'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Cellipse cx='12' cy='16.6' rx='7.2' ry='5.6'/%3E%3Cellipse cx='4.2' cy='9.8' rx='2.9' ry='3.6' transform='rotate(-32 4.2 9.8)'/%3E%3Cellipse cx='8.6' cy='5' rx='2.9' ry='3.7' transform='rotate(-13 8.6 5)'/%3E%3Cellipse cx='15.4' cy='5' rx='2.9' ry='3.7' transform='rotate(13 15.4 5)'/%3E%3Cellipse cx='19.8' cy='9.8' rx='2.9' ry='3.6' transform='rotate(32 19.8 9.8)'/%3E%3C/g%3E%3Cpath d='M12 11.8 C10.2 11.8 7.9 13.4 7.3 15.8 C6.7 17.8 8 19.9 10 20.1 C11.1 20.3 11.6 19.7 12 19.1 C12.4 19.7 12.9 20.3 14 20.1 C16 19.9 17.3 17.8 16.7 15.8 C16.1 13.4 13.8 11.8 12 11.8 Z' fill='%23F5A6BC' stroke='%23DC7F97' stroke-width='0.7'/%3E%3Cg fill='%23F5A6BC' stroke='%23DC7F97' stroke-width='0.7'%3E%3Cellipse cx='4.2' cy='10' rx='1.75' ry='2.25' transform='rotate(-32 4.2 10)'/%3E%3Cellipse cx='8.6' cy='5.3' rx='1.75' ry='2.3' transform='rotate(-13 8.6 5.3)'/%3E%3Cellipse cx='15.4' cy='5.3' rx='1.75' ry='2.3' transform='rotate(13 15.4 5.3)'/%3E%3Cellipse cx='19.8' cy='10' rx='1.75' ry='2.25' transform='rotate(32 19.8 10)'/%3E%3C/g%3E%3C/svg%3E") 5 3, pointer; } /* Typing and selecting keep the I-beam shape. That shape is doing a job — it is thin so you can see exactly which character the caret will land between — and a paw there would make text genuinely harder to place. So it gets the palette instead of a new silhouette: white beam, dark edge, one pink bean on top. The hotspot sits at the centre of the beam, where the caret actually goes. */ :root { --paw-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236B5551' stroke='%236B5551' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='11.1' y='7' width='1.8' height='11.5' rx='0.5'/%3E%3Crect x='9.2' y='6.6' width='5.6' height='1.5' rx='0.7'/%3E%3Crect x='9.2' y='17.9' width='5.6' height='1.5' rx='0.7'/%3E%3Cellipse cx='12' cy='3.2' rx='1.7' ry='2.1'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Crect x='11.1' y='7' width='1.8' height='11.5' rx='0.5'/%3E%3Crect x='9.2' y='6.6' width='5.6' height='1.5' rx='0.7'/%3E%3Crect x='9.2' y='17.9' width='5.6' height='1.5' rx='0.7'/%3E%3C/g%3E%3Cellipse cx='12' cy='3.2' rx='1.7' ry='2.1' fill='%23F9C9D4'/%3E%3C/svg%3E") 12 12, text; } /* Held down: the paw curls, toes tucked in and the body rounder. Only the two properties are redefined — every rule further down reads them, so the whole page switches at once without repeating a single selector. The hotspot is deliberately identical to the open paw's. If it moved, the pointer would appear to jump sideways at the exact moment of the click, which reads as a misclick. Typing is left out on purpose: --paw-text keeps the I-beam, so dragging to select text does not turn into a paw halfway through. */ :root.paw-down { --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236B5551' stroke='%236B5551' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='15' rx='8.5' ry='7'/%3E%3Cellipse cx='5.9' cy='10' rx='2.7' ry='2.7'/%3E%3Cellipse cx='9.8' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='14.2' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='18.1' cy='10' rx='2.7' ry='2.7'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Cellipse cx='12' cy='15' rx='8.5' ry='7'/%3E%3Cellipse cx='5.9' cy='10' rx='2.7' ry='2.7'/%3E%3Cellipse cx='9.8' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='14.2' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='18.1' cy='10' rx='2.7' ry='2.7'/%3E%3C/g%3E%3Cpath d='M12 10.6 C10.1 10.6 7.8 12.3 7.1 14.7 C6.5 16.8 7.9 19 10 19.2 C11.1 19.4 11.6 18.8 12 18.2 C12.4 18.8 12.9 19.4 14 19.2 C16.1 19 17.5 16.8 16.9 14.7 C16.2 12.3 13.9 10.6 12 10.6 Z' fill='%23F9C9D4' stroke='%23E89BAC' stroke-width='0.7'/%3E%3Cg fill='%23F9C9D4' stroke='%23E89BAC' stroke-width='0.7'%3E%3Cellipse cx='5.9' cy='10.2' rx='1.4' ry='1.5'/%3E%3Cellipse cx='9.8' cy='8.9' rx='1.4' ry='1.6'/%3E%3Cellipse cx='14.2' cy='8.9' rx='1.4' ry='1.6'/%3E%3Cellipse cx='18.1' cy='10.2' rx='1.4' ry='1.5'/%3E%3C/g%3E%3C/svg%3E") 5 3, auto; --paw-tap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%236B5551' stroke='%236B5551' stroke-width='2' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='15' rx='8.5' ry='7'/%3E%3Cellipse cx='5.9' cy='10' rx='2.7' ry='2.7'/%3E%3Cellipse cx='9.8' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='14.2' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='18.1' cy='10' rx='2.7' ry='2.7'/%3E%3C/g%3E%3Cg fill='%23FFFFFF'%3E%3Cellipse cx='12' cy='15' rx='8.5' ry='7'/%3E%3Cellipse cx='5.9' cy='10' rx='2.7' ry='2.7'/%3E%3Cellipse cx='9.8' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='14.2' cy='8.6' rx='2.7' ry='2.8'/%3E%3Cellipse cx='18.1' cy='10' rx='2.7' ry='2.7'/%3E%3C/g%3E%3Cpath d='M12 10.6 C10.1 10.6 7.8 12.3 7.1 14.7 C6.5 16.8 7.9 19 10 19.2 C11.1 19.4 11.6 18.8 12 18.2 C12.4 18.8 12.9 19.4 14 19.2 C16.1 19 17.5 16.8 16.9 14.7 C16.2 12.3 13.9 10.6 12 10.6 Z' fill='%23F5A6BC' stroke='%23DC7F97' stroke-width='0.7'/%3E%3Cg fill='%23F5A6BC' stroke='%23DC7F97' stroke-width='0.7'%3E%3Cellipse cx='5.9' cy='10.2' rx='1.4' ry='1.5'/%3E%3Cellipse cx='9.8' cy='8.9' rx='1.4' ry='1.6'/%3E%3Cellipse cx='14.2' cy='8.9' rx='1.4' ry='1.6'/%3E%3Cellipse cx='18.1' cy='10.2' rx='1.4' ry='1.5'/%3E%3C/g%3E%3C/svg%3E") 5 3, pointer; } /* Turned off from Settings. The properties fall back to the stock cursors and every rule below keeps working unchanged. The class only ever turns the paw OFF, so the paw is already correct straight from this file and there is no flash of the stock arrow while the page loads. Last on purpose: this and .paw-down carry the same specificity, so being later is what makes "off" beat "pressed" when both are set. */ :root.paw-off { --paw: auto; --paw-tap: pointer; --paw-text: text; } body { cursor: var(--paw); } /* The app stylesheet marks ~80 things cursor:pointer at varying specificity, so this rides over all of them at once instead of editing each one. Kept deliberately low-specificity so body.cursor-stolen still wins when a pet runs off with the cursor. */ a, button, summary, select, label[for], [role="button"], [onclick], .nav-item, .dash-card, .note-card, .tag, .color-swatch, .pet-card, .folder-item, .modal-close, .lang-toggle, .critter { cursor: var(--paw-tap) !important; } /* Cursors that carry information stay as they are. Trading a text caret or a resize arrow for a joke would cost real usability. */ input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]), textarea, [contenteditable="true"] { cursor: var(--paw-text) !important; } [disabled], .disabled { cursor: not-allowed !important; } } /* ─── Selection highlight ────────────────────────────────────────── Outside the media query on purpose: selecting text happens on a phone too, and there is nothing pointer-specific about the colour. Kept translucent rather than flat so whatever is underneath keeps its own contrast — the same rose reads on the dark theme and the light one without having to restyle the text colour for either. */ ::selection { background: rgba(244, 154, 180, 0.35); } ::-moz-selection { background: rgba(244, 154, 180, 0.35); }