painted white with a 32px white glow, which covered nearly the whole canvas; short.html paints its full-width

; about.html has a page-coloured "My Experience" block (inline style) and a radial wash behind its manifesto. Smaller cards — the assistant, the recommendations — stay white and read as cards sitting on the board. */ html[data-canvas] article, html[data-canvas] .home article { background-color: transparent !important; box-shadow: none !important; } html[data-canvas] body#short main.shortContent { background-color: transparent !important; } html[data-canvas] main div[style*="background: var(--accent)"] { background: transparent !important; filter: none !important; } html[data-canvas] .Manifest { background: none !important; } html[data-canvas] #Welcome { background: none !important; } /* The homepage's project cards sit on the canvas now that

is clear, so give them a solid panel rather than letting the dots run through them. */ html[data-canvas] .topProjectsStack .topProject { background: var(--bkgd); } /* ---------------------------------------------------- cards and chats */ /* One surface language on the board, so nothing reads as white-on-white: anything that sits on the canvas as a card is white with a hairline border and a barely-there shadow, and chat bubbles follow one pattern everywhere — the homepage assistant, the homepage chat, and the recommendations. */ html[data-canvas] { --rgc-line-strong: #cfcfda; --rgc-user-bubble: #e8ecff; --rgc-user-line: #c9d3ff; --rgc-card-shadow: 0 1px 3px rgba(5, 0, 56, 0.06); } /* Cards that were white (or canvas-coloured) with nothing to separate them. */ html[data-canvas] .topProjectsStack .topProject, html[data-canvas] .noTimeLink.bottomNotime, html[data-canvas] div.dictionarySnippet, html[data-canvas] .storySnippet, html[data-canvas] .NDAsign, html[data-canvas] .imageViewer.bigViewer, html[data-canvas] .kb-carousel, html[data-canvas] li.is-muted-note, html[data-canvas] .main > .caseStudyInProgress > h4.caseStudyLabel { background-color: var(--bkgd) !important; border: 1px solid var(--rgc-line) !important; box-shadow: var(--rgc-card-shadow) !important; border-radius: 12px; } /* Headings painted the canvas colour punch flat patches out of the dot grid. */ html[data-canvas] main h3, html[data-canvas] main li h4.caseStudyLabel { background-color: transparent !important; } /* "Load more" fades the list into the page. It fades to white, which on the canvas is a white band across the dots; fade to the canvas colour instead. */ html[data-canvas] .load-more-footer { background: linear-gradient(1deg, var(--accent), var(--accent), transparent) !important; } /* Soft colour behind the big things — project cards, demos, case-study animations, large images — the way Miro sets its product shots on washes of colour. Tinted by the canvas theme (--rgc-halo-* in canvas-boot.js). Layered shadows rather than a pseudo-element, because most of these clip their own overflow and would cut a pseudo-element off. Never on buttons or highlights. */ html[data-canvas] { --rgc-halo: -70px 50px 190px -70px var(--rgc-halo-a, transparent), 80px -40px 190px -70px var(--rgc-halo-b, transparent), 0 80px 220px -90px var(--rgc-halo-c, transparent); } html[data-canvas] .imageViewer.bigViewer, html[data-canvas] .kb-carousel { box-shadow: var(--rgc-halo), var(--rgc-card-shadow) !important; } /* The homepage project cards are far taller than wide, so a sideways glow turns into two hard stripes down their edges. Light them from above and below instead. */ html[data-canvas] .topProjectsStack .topProject { box-shadow: -40px -70px 200px -80px var(--rgc-halo-a, transparent), 60px 90px 220px -80px var(--rgc-halo-b, transparent), var(--rgc-card-shadow) !important; } /* Soft wash on media that sits on the canvas — not inside a surface that already has one (project cards, qBand demos). Nested halos read as a second gradient on top of the first (e.g. .LatestProject--ainative). */ html[data-canvas] .LatestDemo:not(.qBand__demo .LatestDemo):not(.topProjectsStack .LatestDemo), html[data-canvas] .mediaAccentFrame:not(.topProjectsStack .mediaAccentFrame), html[data-canvas] .CaseStudyAnimation:not(.topProjectsStack .CaseStudyAnimation) { box-shadow: var(--rgc-halo) !important; } /* Carousels / latest-project strips: no halo on the track itself. */ html[data-canvas] .cs-carousel, html[data-canvas] .LatestProject, html[data-canvas] .LatestProject__track { box-shadow: none !important; } /* Project cards that hold a LatestProject already light the card; keep a flat panel shadow so the media inside is not washed twice. */ html[data-canvas] .topProjectsStack .topProject:has(.LatestProject) { box-shadow: var(--rgc-card-shadow) !important; } /* Chat surfaces: no white slab or glow behind a conversation — the bubbles sit on the canvas. */ html[data-canvas] .homeAssistant__inner, html[data-canvas] #recommendations.colleaguesContainer, html[data-canvas] .chat-container { background: transparent !important; box-shadow: none !important; } /* Intro chat is a Mac window, not a floating halo — keep its solid fill. */ html[data-canvas] [data-intro-chat] .homeAssistant__inner { background: #F4F6FA !important; } /* Their side of the conversation. background-color only, so the typing indicator keeps its animated dots. */ html[data-canvas] .homeAssistant__bubble--bot, html[data-canvas] body:not(#short) .recommendation:not(.bigEmoji):not(.funGif) { background-color: #fff !important; border: 1px solid var(--rgc-line) !important; /* The avatar sits beside the bubble's lower-left corner, so square that one. border-box keeps the new border inside the bubble's width: without it the bubble grows 2px, no longer fits beside the avatar, and wraps under it. */ box-sizing: border-box !important; border-radius: 16px 16px 16px 4px !important; box-shadow: var(--rgc-card-shadow) !important; filter: none !important; } /* Your side (and Ricardo's replies in the homepage chat): pale Miro blue, squared toward the avatar at the lower right. body:not(#short) matches the rule above, whose id specificity would otherwise win. */ html[data-canvas] .homeAssistant__bubble--user, html[data-canvas] body:not(#short) .myreply .recommendation:not(.bigEmoji):not(.funGif) { box-sizing: border-box !important; background-color: var(--rgc-user-bubble) !important; border: 1px solid var(--rgc-user-line) !important; border-radius: 16px 16px 4px 16px !important; box-shadow: none !important; } /* The typing indicator in the homepage chat: just the animated dots, no bubble fill or border behind them. */ html[data-canvas] body:not(#short) .chat-container .singlerecomendation:first-child .recommendation:not(.last-recomendation) { background-color: transparent !important; border: none !important; box-shadow: none !important; } /* The speech-bubble tails are drawn with a canvas-coloured wedge and a white mask, which leaves a stray white blob on the dotted canvas. The squared corner above stands in for the tail. short.html's carousel already hides them. */ html[data-canvas] body:not(#short) .recommendation::before, html[data-canvas] body:not(#short) .recommendation::after { display: none !important; } /* Suggestion chips and the composer, in the same quiet style. */ html[data-canvas] .homeAssistant__chip { background: #fff !important; border: 1px solid var(--rgc-line) !important; color: var(--frgd); } html[data-canvas] .homeAssistant__chip:hover:not(:disabled) { background: var(--rgc-hover) !important; border-color: var(--rgc-line-strong) !important; } html[data-canvas] .homeAssistant__input { background: #fff; border: 1px solid var(--rgc-line-strong) !important; box-shadow: var(--rgc-card-shadow); } html[data-canvas] .homeAssistant__field:focus-within .homeAssistant__input { border-color: var(--rgc-blue) !important; box-shadow: 0 0 0 3px var(--rgc-blue-soft) !important; } /* The animated grain is the portfolio's texture, not a board's. */ html[data-canvas] .sweaterContainer { display: none !important; } /* Buttons and calls to action: the board's fill colour (--action), the same yellow the rest of the page uses for its main buttons, with navy ink. .contactMe is the card around the contact buttons, not a button itself, so it keeps style.css's plain card and only its links take the button look. */ html[data-canvas] div#contactMeButtons a, html[data-canvas] a#contactMeBadge, html[data-canvas] a.contactMeLink, html[data-canvas] a.contactMeShort, html[data-canvas] a#downloadReferences, html[data-canvas] .load-more-footer button, html[data-canvas] body#short .s-next a, html[data-canvas] body#short .s-pill.is-current, html[data-canvas] body#short .sq-rec-carousel .carouselControls button { background: var(--action) !important; color: var(--frgd) !important; border-color: transparent !important; box-shadow: var(--rgc-cta-shadow) !important; } /* Homepage CV + chat send: flat fill with a hard border, no drop shadow. */ html[data-canvas] a#downloadResumeHome, html[data-canvas] .homeAssistant__submit { background: var(--action) !important; color: var(--frgd) !important; border: 2px solid var(--frgd) !important; box-shadow: none !important; } html[data-canvas] div#contactMeButtons a *, html[data-canvas] a#contactMeBadge *, html[data-canvas] a.contactMeLink *, html[data-canvas] a#downloadResumeHome *, html[data-canvas] a#downloadReferences *, html[data-canvas] body#short .s-next a * { color: var(--frgd) !important; fill: var(--frgd) !important; } html[data-canvas] div#contactMeButtons a:hover, html[data-canvas] a#contactMeBadge:hover, html[data-canvas] a.contactMeLink:hover, html[data-canvas] a.contactMeShort:hover, html[data-canvas] a#downloadResumeHome:hover, html[data-canvas] a#downloadReferences:hover, html[data-canvas] .load-more-footer button:hover, html[data-canvas] .homeAssistant__submit:hover, html[data-canvas] body#short .s-next a:hover, html[data-canvas] body#short .sq-rec-carousel .carouselControls button:hover { background: var(--rgc-action-hover) !important; } /* Highlighter: flat Miro yellow. The band is still drawn the way style.css draws it — one colour on the left half of a double-width background, slid into place — so the scroll-driven sweep keeps working. */ @media (min-width: 769px) { html[data-canvas][data-highlights="on"] mark { background-image: linear-gradient(to right, var(--rgc-mark) 0 50%, transparent 50% 100%); color: var(--frgd); } } /* ------------------------------------------------------------------ layers */ html[data-canvas] #rgc-board { position: absolute; top: 0; left: 0; width: var(--rgc-w); height: 0; overflow: visible; pointer-events: none; z-index: 2147482000; } html[data-canvas] #rgc-viewport { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; } /* Designer agent wireframes (canvas-collabs.js): fade when over text; keep in the margin. */ html[data-canvas] .rgc-doodle { transition: opacity 900ms ease; } html[data-canvas] .rgc-doodle.is-fading { opacity: 0; } html[data-canvas] .rgc-game__pad { fill: #fff; fill-opacity: 0.94; filter: drop-shadow(0 2px 6px rgba(5, 0, 56, 0.14)); animation: rgc-game-pad 400ms ease both; } @keyframes rgc-game-pad { from { opacity: 0; } } html[data-canvas] .rgc-ink { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; } html[data-canvas] .rgc-objects { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; } /* The only thing that ever intercepts input, and only while a placing tool is armed — so in Select mode the site underneath behaves completely normally. */ html[data-canvas] .rgc-capture { position: absolute; top: 0; left: 0; width: var(--rgc-w); height: var(--rgc-h); pointer-events: none; touch-action: none; } /* Text mode deliberately has no capture layer: it needs to reach the site's own paragraphs to hover and edit them, so it works off document-level listeners. */ html[data-canvas][data-rgc-tool="scribble"] .rgc-capture, html[data-canvas][data-rgc-tool="note"] .rgc-capture, html[data-canvas][data-rgc-tool="stickers"] .rgc-capture { pointer-events: auto; } /* Over a link or button the capture layer steps aside so it clicks, and the sticker ghost hides so the hand cursor reads (canvas-tools.js). */ html[data-canvas][data-rgc-pass] .rgc-capture { pointer-events: none; } html[data-canvas][data-rgc-pass] .slap-ghost { visibility: hidden; } /* Stickers: the ghost from sticker-slap.js is the cursor, so it and the hint have to sit above the board. */ html[data-canvas][data-rgc-tool="stickers"] .rgc-capture { cursor: none; } html[data-canvas] .slap-ghost, html[data-canvas] .slap-hint { z-index: 2147482500; } html[data-canvas] .rgc-sticker { cursor: grab; } html[data-canvas] .rgc-sticker.is-dragging { cursor: grabbing; } html[data-canvas][data-rgc-tool="note"] .rgc-capture { cursor: copy; } html[data-canvas][data-rgc-tool="text"] body { cursor: crosshair; } html[data-canvas][data-rgc-tool="text"] .rgc-note, html[data-canvas][data-rgc-tool="text"] .rgc-text { cursor: text; } /* Your own cursor, drawn like the agents' (canvas-collabs.js adds the "You" tag). A CSS cursor rather than a painted element, so it is exactly where the system pointer is. Text fields keep the text cursor. Declared before the note and rail rules so their grab and pointer cursors still win. */ html[data-canvas][data-rgc-tool="select"], html[data-canvas][data-rgc-tool="select"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5l13.2 7.4-5.9 1.5-1.6 5.8z' fill='%23050038' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, default; } html[data-canvas][data-rgc-tool="select"] :is(input, textarea, select, [contenteditable="true"], [contenteditable="plaintext-only"]) { cursor: text; } /* The arrow above reaches every element, including the logos and labels inside a control (the project list, the toolbar), so buttons, links and their contents get their hand back. */ html[data-canvas][data-rgc-tool="select"] :is(a[href], button, [role="button"], summary, label[for], select, input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])), html[data-canvas][data-rgc-tool="select"] :is(a[href], button, [role="button"], summary) * { cursor: pointer; } html[data-canvas][data-rgc-tool="select"] :is(button, input, select):disabled, html[data-canvas][data-rgc-tool="select"] [aria-disabled="true"] { cursor: not-allowed; } /* Without this every scribble drag also selects a paragraph. */ html[data-canvas][data-rgc-tool="scribble"], html[data-canvas][data-rgc-tool="scribble"] body { user-select: none; -webkit-user-select: none; } /* Full-bleed pages would otherwise have their edges under the rails (projects on the left, tools on the right); see applyGutter() in canvas-core.js for when this is switched on. */ html[data-canvas][data-rgc-gutter] body { padding-left: calc(var(--rgc-rail-w) + 32px); padding-right: calc(var(--rgc-rail-w) + 32px); box-sizing: border-box; } /* ------------------------------------------------------------------- rail */ html[data-canvas] .rgc-rail { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; background: var(--rgc-panel); border: 1px solid var(--rgc-line); border-radius: var(--rgc-radius); box-shadow: var(--rgc-shadow); pointer-events: auto; width: var(--rgc-rail-w); box-sizing: border-box; } html[data-canvas] .rgc-rail__page { font-family: var(--font-meta, monospace); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rgc-ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--rgc-line); width: 100%; } html[data-canvas] .rgc-rail__sep { width: 24px; height: 1px; background: var(--rgc-line); margin: 4px 0; flex: none; } html[data-canvas] .rgc-tool { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--rgc-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: background-color 120ms ease, color 120ms ease; flex: none; } html[data-canvas] .rgc-tool svg { width: 21px; height: 21px; display: block; } html[data-canvas] .rgc-tool:hover { background: var(--rgc-hover); } html[data-canvas] .rgc-tool[data-rgc-id="clear"] { color: #E5372B; } html[data-canvas] .rgc-tool[data-rgc-id="clear"]:hover { background: rgba(229, 55, 43, 0.12); } html[data-canvas] .rgc-tool:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: -2px; } /* Miro marks the active tool with a pale blue tile and a blue icon. */ html[data-canvas] .rgc-tool[aria-pressed="true"] { background: var(--rgc-blue-soft); color: var(--rgc-blue); } html[data-canvas] .rgc-tool__dot { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } /* Tooltip on the open side: the rail sits on the right edge now. */ html[data-canvas] .rgc-tool::after { content: attr(data-tip); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(4px); background: var(--rgc-ink); color: #fff; font-family: var(--font-meta, monospace); font-size: 11px; letter-spacing: 0.02em; white-space: nowrap; padding: 5px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } html[data-canvas] .rgc-tool:hover::after, html[data-canvas] .rgc-tool:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); } html[data-canvas] .rgc-tool__kbd { opacity: 0.55; margin-left: 6px; } /* ---------------------------------------------------------------- flyout */ html[data-canvas] .rgc-flyout { position: absolute; right: calc(var(--rgc-rail-w) + 32px); /* Wide enough for six 24px swatches and their gaps on one row. */ width: 212px; background: var(--rgc-panel); border: 1px solid var(--rgc-line); border-radius: var(--rgc-radius); box-shadow: var(--rgc-shadow); padding: 12px; pointer-events: auto; box-sizing: border-box; } html[data-canvas] .rgc-flyout[hidden] { display: none; } html[data-canvas] .rgc-flyout__label { font-family: var(--font-meta, monospace); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rgc-ink-soft); margin: 0 0 7px; } html[data-canvas] .rgc-flyout__label + .rgc-flyout__row { margin-bottom: 12px; } html[data-canvas] .rgc-flyout__row:last-child { margin-bottom: 0; } html[data-canvas] .rgc-flyout__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } html[data-canvas] .rgc-swatch { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid rgba(20, 28, 22, 0.18); cursor: pointer; position: relative; transition: transform 100ms ease; } html[data-canvas] .rgc-swatch:hover { transform: scale(1.12); } html[data-canvas] .rgc-swatch--canvas { border-radius: 7px; background-color: var(--swatch-bg); background-image: radial-gradient(120% 90% at 0 0, var(--swatch-glow), transparent 70%), radial-gradient(circle, var(--swatch-dot) 0.9px, transparent 1.2px); background-size: 100% 100%, 6px 6px; background-position: 0 0, 3px 3px; } html[data-canvas] .rgc-swatch:hover:not([aria-pressed="true"]) { box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--rgc-blue) 45%, transparent); } html[data-canvas] .rgc-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rgc-blue); } html[data-canvas] .rgc-swatch:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: 3px; } html[data-canvas] .rgc-size { appearance: none; -webkit-appearance: none; width: 30px; height: 30px; padding: 0; border: 1px solid var(--rgc-line); border-radius: 8px; background: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--font-meta, monospace); font-size: 11px; color: var(--rgc-ink); } html[data-canvas] .rgc-size i { display: block; border-radius: 50%; background: currentColor; } html[data-canvas] .rgc-size[aria-pressed="true"] { border-color: var(--rgc-blue); box-shadow: inset 0 0 0 1px var(--rgc-blue); } html[data-canvas] .rgc-flyout__note { font-family: var(--font-meta, monospace); font-size: 9px; line-height: 1.5; color: var(--rgc-ink-soft); margin: 10px 0 0; } /* ------------------------------------------------------- notes and text */ html[data-canvas] .rgc-note, html[data-canvas] .rgc-text { position: absolute; pointer-events: auto; box-sizing: border-box; } html[data-canvas] .rgc-note { width: 176px; min-height: 176px; padding: 16px 14px 20px; font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.35; color: var(--rgc-ink); box-shadow: 3px 4px 0 rgba(20, 28, 22, 0.13); cursor: grab; overflow-wrap: anywhere; } html[data-canvas] .rgc-note:focus-within { cursor: text; } html[data-canvas] .rgc-note.is-dragging { cursor: grabbing; } html[data-canvas] .rgc-note__body, html[data-canvas] .rgc-text__body { outline: none; min-height: 1em; cursor: text; } html[data-canvas] .rgc-note__by { position: absolute; left: 14px; bottom: 6px; color: var(--rgc-ink); font-family: var(--font-meta, monospace); font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; } html[data-canvas] .rgc-note[data-by] { border-left: 4px solid var(--rgc-by, currentColor); } html[data-canvas] .rgc-text { width: 260px; padding: 4px 6px; font-family: 'Inter', Arial, Helvetica, sans-serif; line-height: 1.35; cursor: grab; } html[data-canvas] .rgc-text.is-dragging { cursor: grabbing; } html[data-canvas] .rgc-text:hover, html[data-canvas] .rgc-text:focus-within { outline: 1px dashed rgba(66, 98, 255, 0.5); outline-offset: 2px; } html[data-canvas] .rgc-kill { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--rgc-line); background: #fff; color: var(--rgc-ink); font-size: 12px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(20, 28, 22, 0.18); } html[data-canvas] .rgc-note:hover .rgc-kill, html[data-canvas] .rgc-text:hover .rgc-kill, html[data-canvas] .rgc-note:focus-within .rgc-kill, html[data-canvas] .rgc-text:focus-within .rgc-kill { display: flex; } @keyframes rgc-pop { from { transform: scale(0.82) rotate(var(--rgc-rot, 0deg)); opacity: 0; } to { transform: scale(1) rotate(var(--rgc-rot, 0deg)); opacity: 1; } } html[data-canvas] .rgc-note.is-new { animation: rgc-pop 260ms cubic-bezier(0.34, 1.4, 0.64, 1); } /* ------------------------------------------------------- edit-in-place */ html[data-canvas][data-rgc-tool="text"] [data-rgc-hot] { outline: 2px dashed var(--action, #fcf7a7); outline-offset: 3px; border-radius: 3px; background: color-mix(in srgb, var(--action, #fcf7a7) 22%, transparent); cursor: text; } /* While a caret is in the page, a click inside a link should place the caret rather than navigate. */ html[data-canvas][data-rgc-editing] a, html[data-canvas][data-rgc-editing] button { pointer-events: none; } html[data-canvas] [data-rgc-editing] { outline: 2px solid var(--rgc-blue); outline-offset: 3px; border-radius: 3px; } html[data-canvas] [data-rgc-edited] { text-decoration: underline dotted var(--action, #fcf7a7) 2px; text-underline-offset: 4px; } /* ------------------------------------------------------- agents */ html[data-canvas] .rgc-collabs { position: absolute; inset: 0; pointer-events: none; transition: opacity 600ms ease; } html[data-canvas] .rgc-collabs.is-idle { opacity: 0.25; } /* Switched off from the rail: fade out, then leave the accessibility and hit trees once the fade has finished. */ /* is-waiting: on the homepage, while the chat fills the window (canvas-collabs.js). */ html[data-canvas] .rgc-collabs.is-off, html[data-canvas] .rgc-collabs.is-waiting { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; } /* Everyone starts invisible and fades up as they join (canvas-collabs.js), so nobody appears out of nowhere. Position is a spring in JS; only the fade lives here. */ html[data-canvas] .rgc-collab { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 600ms ease; will-change: transform, opacity; pointer-events: none; } html[data-canvas] .rgc-collab.is-in { opacity: 1; } html[data-canvas] .rgc-collab svg { width: 20px; height: 20px; display: block; filter: drop-shadow(0 1px 2px rgba(5, 0, 56, 0.25)); } html[data-canvas] .rgc-collab__label { position: absolute; left: 14px; top: 16px; background: linear-gradient(135deg, var(--rgc-collab, #4262ff), color-mix(in srgb, var(--rgc-collab, #4262ff) 60%, #fff)); /* Light Miro tag colours, so the name is set in navy rather than white. */ color: var(--rgc-ink); font-family: var(--font-meta, monospace); font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; padding: 3px 7px; border-radius: 4px 10px 10px 10px; } html[data-canvas] .rgc-collab__bubble { position: absolute; left: 14px; top: 38px; /* .rgc-collab is a zero-width box, so an absolutely positioned child would shrink-to-fit to one word per line without an explicit max-content width. */ width: max-content; max-width: 240px; background: #fff; color: var(--rgc-ink); border: 1px solid var(--rgc-line); border-left: 3px solid var(--rgc-collab, #4262ff); font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4; padding: 7px 10px; border-radius: 10px; box-shadow: var(--rgc-shadow); opacity: 0; transform: translateY(-4px); transition: opacity 260ms ease, transform 260ms ease; } html[data-canvas] .rgc-collab__bubble.is-on { opacity: 1; transform: translateY(0); } /* Your name tag. Follows the pointer with no lag (it is you); hidden over the toolbar, while typing, and when the pointer leaves the page. */ html[data-canvas] .rgc-you { position: absolute; top: 0; left: 0; pointer-events: none; transition: opacity 160ms ease; } html[data-canvas] .rgc-you.is-away { opacity: 0; } html[data-canvas] .rgc-you__label { position: absolute; left: 14px; top: 18px; background: #FFFFFF; /* White on the near-white canvas needs an edge to read as a tag. */ border: 1px solid var(--border, #E1E0E7); box-shadow: 0 1px 3px rgba(5, 0, 56, 0.14); color: var(--rgc-ink); font-family: var(--font-meta, monospace); font-size: 10px; letter-spacing: 0.02em; white-space: nowrap; padding: 3px 7px; border-radius: 4px 10px 10px 10px; } /* --------------------------------------------------------------- projects */ /* canvas-projects.js. One element, two shapes: a rail on the left while the board is mounted (same query as canvas-core.js), a "My projects" pill in the bottom-left corner everywhere else. Either way it stands in for the Work second-level bar. */ html[data-canvas][data-rgc-projects] .second-level-bar { display: none !important; } html[data-canvas] .rgc-projects { position: fixed; z-index: 2147483001; box-sizing: border-box; display: flex; background: var(--rgc-panel); border: 1px solid var(--rgc-line); border-radius: var(--rgc-radius); box-shadow: var(--rgc-shadow); color: var(--rgc-ink); font-family: Inter, Arial, Helvetica, sans-serif; text-align: left; } html[data-canvas] .rgc-projects__head { appearance: none; -webkit-appearance: none; margin: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } html[data-canvas] .rgc-projects__list { list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 2px; } html[data-canvas] .rgc-projects__list li { list-style: none; margin: 0; padding: 0; border: 0; } html[data-canvas] .rgc-projects__item { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 44px; padding: 0 3px; border-radius: 10px; color: var(--rgc-ink); text-decoration: none; background: transparent; box-shadow: none; transition: background-color 120ms ease; } html[data-canvas] .rgc-projects__item:hover { background: var(--rgc-hover); } html[data-canvas] .rgc-projects__item:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: -2px; } /* The page you are on: Miro's pale blue tile, like the active tool. */ html[data-canvas] .rgc-projects__item[aria-current="page"] { background: var(--rgc-blue-soft); } html[data-canvas] .rgc-projects__item[aria-current="page"] strong { color: var(--rgc-blue); } html[data-canvas] .rgc-projects__logo { flex: 0 0 40px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 3px; } html[data-canvas] .rgc-projects img { display: block; width: auto; height: auto; max-width: 34px; max-height: 18px; object-fit: contain; filter: grayscale(1); opacity: 0.75; transition: filter 160ms ease, opacity 160ms ease; } html[data-canvas] .rgc-projects__logo--pair img { max-width: 17px; } html[data-canvas] .rgc-projects__item:hover img, html[data-canvas] .rgc-projects__item:focus-visible img, html[data-canvas] .rgc-projects__item[aria-current="page"] img { filter: none; opacity: 1; } /* "See all": an arrow where the logo would be. */ html[data-canvas] .rgc-projects__all { border-top: 1px solid var(--rgc-line); border-radius: 0 0 10px 10px; } html[data-canvas] .rgc-projects__arrow { font-size: 18px; line-height: 1; color: var(--rgc-ink-soft); } html[data-canvas] .rgc-projects__all:hover .rgc-projects__arrow, html[data-canvas] .rgc-projects__all:focus-visible .rgc-projects__arrow { color: var(--rgc-blue); } html[data-canvas] .rgc-projects__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } html[data-canvas] .rgc-projects__text strong { font-size: 13px; font-weight: 600; white-space: nowrap; } html[data-canvas] .rgc-projects__text em { font-size: 11px; font-style: normal; font-weight: 400; color: var(--rgc-ink-soft); white-space: nowrap; } /* Rail: logos at rest, names on hover / focus / click. */ @media (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) { html[data-canvas] .rgc-projects { top: 50%; left: 20px; transform: translateY(-50%); flex-direction: column; width: var(--rgc-rail-w); padding: 8px 6px; overflow: hidden; transition: width 180ms ease; } html[data-canvas] .rgc-projects:hover, html[data-canvas] .rgc-projects:focus-within, html[data-canvas] .rgc-projects.is-open { width: 292px; } /* Same chip as the tool rail's page name. */ html[data-canvas] .rgc-projects__head { width: 100%; padding: 0 0 6px; margin-bottom: 2px; border-bottom: 1px solid var(--rgc-line); font-family: var(--font-meta, monospace); font-size: 8px; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; color: var(--rgc-ink-soft); text-align: center; } html[data-canvas] .rgc-projects:hover .rgc-projects__head, html[data-canvas] .rgc-projects:focus-within .rgc-projects__head, html[data-canvas] .rgc-projects.is-open .rgc-projects__head { text-align: left; padding-left: 6px; } html[data-canvas] .rgc-projects__head:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: 2px; border-radius: 4px; } html[data-canvas] .rgc-projects__strip, html[data-canvas] .rgc-projects__caret { display: none; } html[data-canvas] .rgc-projects__list { display: flex; } /* Fixed width so the names don't reflow while the rail widens. */ html[data-canvas] .rgc-projects__item { width: 278px; } html[data-canvas] .rgc-projects__text { opacity: 0; transition: opacity 120ms ease; } html[data-canvas] .rgc-projects:hover .rgc-projects__text, html[data-canvas] .rgc-projects:focus-within .rgc-projects__text, html[data-canvas] .rgc-projects.is-open .rgc-projects__text { opacity: 1; transition-delay: 60ms; } } /* Pill: phones, tablets, anything without the board. */ @media not all and (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) { html[data-canvas] .rgc-projects { left: 12px; bottom: 12px; width: max-content; max-width: calc(100vw - 24px); flex-direction: column-reverse; padding: 4px; overflow: hidden; } html[data-canvas] .rgc-projects__head { display: flex; align-items: center; gap: 8px; box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; font-size: 13px; font-weight: 600; white-space: nowrap; } html[data-canvas] .rgc-projects__strip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } /* An explicit box, not max-*: the logos' 72x28 attributes otherwise size the pill before the caps apply, and the strip spills past its edge. */ html[data-canvas] .rgc-projects__strip img { flex: none; width: 22px; height: 13px; max-width: none; max-height: none; } html[data-canvas] .rgc-projects__strip img:nth-child(n + 5) { display: none; } /* Points up: the sheet opens above the pill. */ html[data-canvas] .rgc-projects__caret { width: 5px; height: 5px; margin: 3px 2px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-135deg); opacity: 0.6; } html[data-canvas] .rgc-projects.is-open .rgc-projects__caret { margin-top: -3px; transform: rotate(45deg); } html[data-canvas] .rgc-projects__list { display: none; } html[data-canvas] .rgc-projects.is-open { width: calc(100vw - 24px); } html[data-canvas] .rgc-projects__caret { flex: none; } html[data-canvas] .rgc-projects.is-open .rgc-projects__head { border-top: 1px solid var(--rgc-line); } html[data-canvas] .rgc-projects.is-open .rgc-projects__list { display: flex; max-height: min(60vh, 420px); overflow-y: auto; padding: 4px 0; } html[data-canvas] .rgc-projects__item { min-height: 48px; } html[data-canvas] .rgc-projects__text strong, html[data-canvas] .rgc-projects__text em { white-space: normal; } } @media (max-width: 360px) { html[data-canvas] .rgc-projects__strip img:nth-child(n + 4) { display: none; } } /* Phones: the site nests article margin, .main padding, the card deck's inset and the card's own padding, so card copy sat ~50px in from each edge. One 16px page gutter instead, and flatter insets inside it. The full-bleed bands size themselves from --vw, so they are unaffected. */ @media only screen and (max-width: 768px) { html[data-canvas] article { margin-left: 0; margin-right: 0; width: 100%; } html[data-canvas] .main { padding-left: 16px; padding-right: 16px; } html[data-canvas] .cs-cards__stack { padding-left: 0; padding-right: 0; } html[data-canvas] .cs-card { padding-left: 14px !important; padding-right: 14px !important; } html[data-canvas] .qBand__inner { padding-left: 16px; padding-right: 16px; } /* About, Work: .mainHome (4px) + wrapper (16px) put cards at 20px. */ html[data-canvas] body:not(.homepage) .mainHome { padding-left: 0; padding-right: 0; } html[data-canvas] body:not(.homepage) .mainHome > div { padding-left: 16px; padding-right: 16px; } html[data-canvas] div.dictionarySnippet { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; } /* Its 16px padding sat on top of width: 100%, pushing the page 12px wide; the wrapper already supplies the gutter. */ html[data-canvas] .craftCards__cluster { box-sizing: border-box; padding-left: 0; padding-right: 0; } /* Leave room so the last lines aren't hidden under the projects pill. */ html[data-canvas][data-rgc-projects] body { padding-bottom: 72px; } } @media print { html[data-canvas] .rgc-projects { display: none !important; } } /* ---------------------------------------------------------------- toast */ html[data-canvas] .rgc-toast { position: absolute; left: calc(var(--rgc-rail-w) + 32px); bottom: 28px; max-width: 260px; background: var(--rgc-ink); color: #fff; font-family: var(--font-meta, monospace); font-size: 11px; line-height: 1.5; padding: 9px 12px; border-radius: 8px; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity 200ms ease, transform 200ms ease; } html[data-canvas] .rgc-toast.is-on { opacity: 1; transform: translateY(0); } /* ---------------------------------------------------- PM review comments */ /* Figma-style pins the PM leaves on copy. Sparse, quiet, click to read. Layer sits on the board so it scrolls with the page; only the pin itself takes pointer events. */ html[data-canvas] .rgc-pm-comments { position: absolute; top: 0; left: 0; width: 100%; height: 0; pointer-events: none; z-index: 6; } html[data-canvas] .rgc-pm-comments.is-off { opacity: 0; visibility: hidden; transition: opacity 400ms ease, visibility 0s linear 400ms; } html[data-canvas] .rgc-pm-comment { position: absolute; width: 22px; height: 22px; margin: 0; padding: 0; pointer-events: auto; z-index: 1; } html[data-canvas] .rgc-pm-comment.is-open { z-index: 2; } html[data-canvas] .rgc-pm-comment__pin { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, #A0C4FF 55%, #050038); border-radius: 50%; background: color-mix(in srgb, #A0C4FF 78%, #fff); color: #050038; box-shadow: 0 1px 2px rgba(5, 0, 56, 0.14); opacity: 0.52; cursor: pointer; transform: scale(0.92); transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease; } html[data-canvas] .rgc-pm-comment.is-new .rgc-pm-comment__pin { animation: rgc-pm-pin-in 320ms cubic-bezier(0.34, 1.35, 0.64, 1) both; } html[data-canvas] .rgc-pm-comment__pin:hover, html[data-canvas] .rgc-pm-comment__pin:focus-visible, html[data-canvas] .rgc-pm-comment.is-open .rgc-pm-comment__pin { opacity: 0.92; transform: scale(1); box-shadow: 0 2px 5px rgba(5, 0, 56, 0.18); outline: none; } html[data-canvas] .rgc-pm-comment__pin svg { width: 11px; height: 11px; display: block; } html[data-canvas] .rgc-pm-comment__panel { position: absolute; left: 28px; top: 50%; width: max-content; max-width: 220px; padding: 8px 10px 9px; border-radius: 8px; border: 1px solid rgba(5, 0, 56, 0.1); border-left: 3px solid #A0C4FF; background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 14px rgba(5, 0, 56, 0.12); color: var(--rgc-ink, #050038); opacity: 0; visibility: hidden; transform: translateY(-50%) translateX(-4px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; pointer-events: none; } html[data-canvas] .rgc-pm-comment.is-open .rgc-pm-comment__panel { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); transition: opacity 180ms ease, transform 180ms ease; pointer-events: auto; } html[data-canvas] .rgc-pm-comment.is-flip .rgc-pm-comment__panel { left: auto; right: 28px; } html[data-canvas] .rgc-pm-comment__by { display: block; font-family: var(--font-meta, monospace); font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, #5B8FD9 70%, #050038); margin-bottom: 3px; } html[data-canvas] .rgc-pm-comment__text { margin: 0; font-family: 'Inter', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.35; font-weight: 500; } @keyframes rgc-pm-pin-in { from { opacity: 0; transform: scale(0.55); } to { opacity: 0.52; transform: scale(0.92); } } @media (prefers-reduced-motion: reduce) { html[data-canvas] .rgc-pm-comment.is-new .rgc-pm-comment__pin { animation: none; } html[data-canvas] .rgc-pm-comment__pin, html[data-canvas] .rgc-pm-comment__panel { transition: opacity 160ms ease; } html[data-canvas] .rgc-pm-comment__panel { transform: translateY(-50%); } html[data-canvas] .rgc-pm-comment.is-open .rgc-pm-comment__panel { transform: translateY(-50%); } } /* ------------------------------------------------------------ gating */ /* Reduced motion: cursors stay put (see canvas-collabs.js) and nothing scales or slides. A plain fade is kept so they still don't blink into view. */ @media (prefers-reduced-motion: reduce) { html[data-canvas] .rgc-projects, html[data-canvas] .rgc-projects * { transition: none !important; } html[data-canvas] .rgc-collab { transition: opacity 300ms ease; } html[data-canvas] .rgc-collab__bubble { transform: none; transition: opacity 200ms ease; } html[data-canvas] .rgc-note.is-new { animation: none; } } /* Desktop only. The any- forms ask whether a mouse is available at all, so a touchscreen laptop keeps the board while a phone or tablet does not. */ @media not all and (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) { html[data-canvas] #rgc-viewport, html[data-canvas] #rgc-board { display: none !important; } } @media print { html[data-canvas] #rgc-viewport { display: none !important; } }