; short.html paints its full-width

; about.html has a page-coloured "My Experience" block (inline style). 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. Short page keeps .noTimeLink / .NDAsign as plain text (see short.css). .noTimeLink.bottomNotime uses the tool-rail chrome further below. */ html[data-canvas] .topProjectsStack .topProject, html[data-canvas] div.dictionarySnippet, html[data-canvas] .storySnippet, html[data-canvas] body:not(#short) .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; } /* "Low on time?" — same floating chrome as .rgc-rail / .rgc-projects. In-flow at the page bottom (not sticky), pulled into the left gutter so it lines up with the projects rail. Desktop + fine pointer only. */ html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime { position: static; display: none; flex-direction: row; align-items: center; gap: 10px; width: fit-content; max-height: none; margin: 24px 0 20px 20px; padding: 8px 10px 8px 8px; background: var(--rgc-panel) !important; border: 1px solid var(--rgc-line) !important; border-radius: var(--rgc-radius) !important; box-shadow: var(--rgc-shadow) !important; color: var(--rgc-ink) !important; box-sizing: border-box; text-decoration: none !important; cursor: pointer; transition: background-color 120ms ease; } /* Sit on the same left edge as .rgc-projects (viewport 20px), not in the content column the gutter pushed inward. */ html[data-canvas][data-rgc-gutter] body:not(#short) a.noTimeLink.bottomNotime { margin-left: calc(20px - var(--rgc-rail-w) - 32px); } @media (min-width: 769px) and (any-hover: hover) and (any-pointer: fine) { html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime { display: flex; } } html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime:hover { background: var(--rgc-hover) !important; } html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: 2px; } html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime > svg, html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime svg#eiLeq2IX49s1 { width: 28px; height: 28px; padding: 0; flex: none; display: block; pointer-events: none; } html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime > div { display: flex; align-items: center; gap: 8px; min-width: 0; pointer-events: none; } html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime span:not(.noTimeLink__chip) { display: block; font-family: Inter, "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-align: left; text-transform: none; color: var(--rgc-ink); white-space: nowrap; } /* Chip label. Theme cycling paints fill + ink when short-themes.js runs. */ html[data-canvas] body:not(#short) a.noTimeLink.bottomNotime .noTimeLink__chip { display: inline-flex; align-items: center; justify-content: center; flex: none; margin: 0; padding: 6px 10px; background: var(--rgc-blue-soft); color: var(--rgc-blue); border: 0 !important; border-radius: 8px; box-shadow: none !important; font-family: var(--font-meta, monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; text-decoration: none; position: static; left: auto; top: auto; } /* 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: var(--accent) !important; -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent); mask-image: linear-gradient(0deg, #000 40%, transparent); } /* Soft colour behind the big things — project cards, demos, case-study animations, large images — was a layered coloured halo; keep a flat panel shadow only. */ html[data-canvas] .imageViewer.bigViewer, html[data-canvas] .kb-carousel { box-shadow: var(--rgc-card-shadow) !important; } html[data-canvas] .topProjectsStack .topProject { box-shadow: var(--rgc-card-shadow) !important; } 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: none !important; } /* Carousels / latest-project strips: no extra shadow 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. */ 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):not(.iosPhone *) { 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; } /* Research quotes in the case studies: the same bubble as their side of the chat, squared at the top-left corner where the avatar sits. */ html[data-canvas] .main .quoteText { background-color: #fff !important; border: 1px solid var(--rgc-line) !important; border-radius: 4px 16px 16px 16px !important; box-shadow: var(--rgc-card-shadow) !important; } /* Intro chat user bubbles: solid brand blue (must beat the pale Miro defaults below and any shared recommendation styles). */ html[data-canvas] .homeAssistant__bubble.homeAssistant__bubble--user { box-sizing: border-box !important; background-color: #5670ff !important; color: #fff !important; border: none !important; border-radius: 16px 16px 4px 16px !important; box-shadow: none !important; } /* Ricardo's replies in the homepage chat: pale Miro blue, squared toward the avatar at the lower right. body:not(#short) matches the bot rule above, whose id specificity would otherwise win. */ html[data-canvas] body:not(#short) .myreply .recommendation:not(.bigEmoji):not(.funGif):not(.iosPhone *) { 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):not(.iosPhone *) { 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. The home page's iPhone (.iosPhone, chat-reply.css) has a white screen, so it keeps its tails, and it skips the rules above: it wears iOS Messages colours. */ html[data-canvas] body:not(#short) .recommendation:not(.iosPhone *)::before, html[data-canvas] body:not(#short) .recommendation:not(.iosPhone *)::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 .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 has to sit above the board. Instructions use the toolbar flyout, not .slap-hint. */ html[data-canvas][data-rgc-tool="stickers"] .rgc-capture { cursor: none; } html[data-canvas] .slap-ghost { z-index: 2147482500; } html[data-canvas] .slap-hint { display: none !important; } html[data-canvas] .rgc-sticker { cursor: grab; } html[data-canvas] .rgc-sticker.is-dragging { cursor: grabbing; } /* Scribble: pen tip is the hotspot (near the bottom-left of the glyph). */ html[data-canvas][data-rgc-tool="scribble"] .rgc-capture { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='1' flood-color='%23050038' flood-opacity='0.35'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4 20l1-4L16.5 4.5a2.1 2.1 0 013 3L8 19l-4 1z' fill='%23050038' stroke='white' stroke-width='1.4' stroke-linejoin='round' filter='url(%23s)'/%3E%3C/svg%3E") 5 27, crosshair; } /* Sticky note: a faint post-it so you can see where it will land. --rgc-note-cursor is set from the selected paper colour (canvas-toolbar.js). */ html[data-canvas][data-rgc-tool="note"] .rgc-capture { cursor: var(--rgc-note-cursor, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cdefs%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='1' dy='2' stdDeviation='1.2' flood-color='%23050038' flood-opacity='0.2'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='0.42' filter='url(%23s)'%3E%3Cpath d='M6 6h28v22l-8 8H6z' fill='%23FFF9B1' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M34 28h-8v8' fill='none' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 6 6, 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. */ /* Black pointer, same Miro arrow + shadow weight as CaseStudies .bd-cur. */ 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='22' height='22' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeDropShadow dx='0' dy='1.5' stdDeviation='1' flood-color='%23000000' flood-opacity='0.28'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M5.5 3.21V20.8c0 .45.54.67.85.35l4.86-4.86a.5.5 0 0 1 .35-.15h6.87a.5.5 0 0 0 .35-.85L6.35 2.85a.5.5 0 0 0-.85.35Z' fill='%23050038' stroke='white' stroke-width='2' stroke-linejoin='round' filter='url(%23s)'/%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; } /* short.html has no tool rail; keep only the left projects gutter. */ html[data-canvas][data-rgc-gutter]:has(body#short) body { padding-right: 32px; } html[data-canvas]:has(body#short) .rgc-rail, html[data-canvas]:has(body#short) .rgc-flyout { display: none !important; } /* ------------------------------------------------------------------- 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; } /* Collabs icon: white strokes on the three cursors must not be clipped. */ html[data-canvas] .rgc-tool[data-rgc-id="collabs"], html[data-canvas] .rgc-tool[data-rgc-id="collabs"] svg { overflow: visible; } html[data-canvas] .rgc-tool[hidden] { display: none; } 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. Flyout tools (design, theme) use aria-expanded the same way. */ html[data-canvas] .rgc-tool[aria-pressed="true"], html[data-canvas] .rgc-tool[aria-expanded="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(circle, var(--swatch-dot) 0.9px, transparent 1.2px); background-size: 6px 6px; background-position: 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; } /* Stickers flyout is instructions-only — no swatch row above the note. */ html[data-canvas] .rgc-flyout__label + .rgc-flyout__note { margin-top: 0; } /* Design-system flyout — compact token panel */ html[data-canvas] .rgc-flyout--design { width: 236px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: color-mix(in srgb, var(--rgc-panel) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-canvas] .rgc-ds-head { display: flex; align-items: center; gap: 7px; margin: 2px 0 -2px; } html[data-canvas] .rgc-ds-head__icon { display: flex; color: var(--rgc-ink-soft); } html[data-canvas] .rgc-ds-head__icon svg { width: 13px; height: 13px; display: block; } html[data-canvas] .rgc-ds-head__title { font-family: var(--font-meta, monospace); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rgc-ink-soft); } html[data-canvas] .rgc-ds-field { display: flex; align-items: center; gap: 10px; } html[data-canvas] .rgc-ds-slider-wrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; } html[data-canvas] .rgc-ds-aa { font-family: 'Inter', "Inter Fallback", "Inter Fallback R", system-ui, sans-serif; font-weight: 600; color: var(--rgc-ink-soft); line-height: 1; user-select: none; } html[data-canvas] .rgc-ds-aa--sm { font-size: 10px; } html[data-canvas] .rgc-ds-aa--lg { font-size: 15px; } html[data-canvas] .rgc-ds-slider { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; margin: 0; border-radius: 999px; background: color-mix(in srgb, var(--rgc-ink) 12%, transparent); cursor: pointer; } html[data-canvas] .rgc-ds-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid color-mix(in srgb, var(--rgc-ink) 28%, transparent); box-shadow: 0 1px 3px rgba(20, 28, 22, 0.18); cursor: grab; transition: transform 120ms ease, border-color 120ms ease; } html[data-canvas] .rgc-ds-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1.5px solid color-mix(in srgb, var(--rgc-ink) 28%, transparent); box-shadow: 0 1px 3px rgba(20, 28, 22, 0.18); cursor: grab; } html[data-canvas] .rgc-ds-slider:hover::-webkit-slider-thumb { transform: scale(1.08); border-color: var(--rgc-ink); } html[data-canvas] .rgc-ds-slider:active::-webkit-slider-thumb { cursor: grabbing; } html[data-canvas] .rgc-ds-value { font-family: var(--font-meta, monospace); font-size: 10px; color: var(--rgc-ink); min-width: 2.8em; text-align: right; font-variant-numeric: tabular-nums; } html[data-canvas] .rgc-ds-swatches { display: flex; flex-wrap: wrap; gap: 7px; } html[data-canvas] .rgc-ds-swatch { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 0.5px solid color-mix(in srgb, var(--rgc-ink) 16%, transparent); cursor: pointer; position: relative; transition: transform 160ms ease, box-shadow 160ms ease; } html[data-canvas] .rgc-ds-swatch:hover { transform: translateY(-1px); } html[data-canvas] .rgc-ds-swatch[aria-pressed="true"] { box-shadow: 0 0 0 1.5px var(--rgc-panel), 0 0 0 3px var(--rgc-ink); } html[data-canvas] .rgc-ds-swatch:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: 2px; } html[data-canvas] .rgc-ds-swatch::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(2px); padding: 3px 6px; border-radius: 5px; background: var(--rgc-ink); color: #fff; font-family: var(--font-meta, monospace); font-size: 9px; letter-spacing: 0.02em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 120ms ease, transform 120ms ease; } html[data-canvas] .rgc-ds-swatch:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } html[data-canvas] .rgc-ds-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--rgc-ink) 5%, transparent); } html[data-canvas] .rgc-ds-seg { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 8px 4px 7px; border: 0; border-radius: 8px; background: transparent; color: var(--rgc-ink-soft); cursor: pointer; transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease; } html[data-canvas] .rgc-ds-seg__bars { display: flex; align-items: flex-end; gap: 2px; height: 10px; } html[data-canvas] .rgc-ds-seg__bars i { display: block; width: 2.5px; border-radius: 1px; background: currentColor; opacity: 0.7; } html[data-canvas] .rgc-ds-seg__bars i:nth-child(1) { height: 4px; } html[data-canvas] .rgc-ds-seg__bars i:nth-child(2) { height: 7px; } html[data-canvas] .rgc-ds-seg__bars i:nth-child(3) { height: 10px; } html[data-canvas] .rgc-ds-seg__bars i:nth-child(4) { height: 10px; width: 2px; } html[data-canvas] .rgc-ds-seg__label { font-family: var(--font-meta, monospace); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; } html[data-canvas] .rgc-ds-seg[aria-pressed="true"] { background: var(--rgc-panel); color: var(--rgc-ink); box-shadow: 0 1px 2px rgba(20, 28, 22, 0.08), 0 0 0 0.5px color-mix(in srgb, var(--rgc-ink) 10%, transparent); } html[data-canvas] .rgc-ds-seg:focus-visible { outline: 2px solid var(--rgc-blue); outline-offset: 0; } html[data-canvas] .rgc-ds-reset { margin-top: 2px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, #E5372B 14%, transparent); } html[data-canvas] .rgc-ds-reset__btn { appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #E5372B; font-family: var(--font-meta, monospace); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; } html[data-canvas] .rgc-ds-reset__btn svg { width: 13px; height: 13px; display: block; } html[data-canvas] .rgc-ds-reset__btn:hover { background: rgba(229, 55, 43, 0.12); color: #C42B21; } html[data-canvas] .rgc-ds-reset__btn:focus-visible { outline: 2px solid #E5372B; outline-offset: 1px; } /* ------------------------------------------------------- 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', "Inter Fallback", "Inter Fallback R", 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', "Inter Fallback", "Inter Fallback R", 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; } /* Arrow + tag sized like CaseStudies .bd-cur (~70% of the slide cursors). */ html[data-canvas] .rgc-collab svg { display: block; width: 22px; height: 22px; margin: -2.94px 0 0 -5.04px; overflow: visible; filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, 0.28)); transform-origin: 5.04px 2.94px; /* the arrow's tip */ transition: transform 120ms ease; } /* Clicking the homepage headline (canvas-collabs.js). */ html[data-canvas] .rgc-collab.is-pressing svg { transform: scale(0.86); } html[data-canvas] .rgc-collab svg path { stroke: #fff; stroke-width: 2; stroke-linejoin: round; } html[data-canvas] .rgc-collab__label { position: absolute; left: 11px; top: 15px; padding: 3px 5px; border-radius: 2px 6px 6px 6px; background: var(--rgc-collab, #4262ff); color: #fff; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.22); font-family: var(--font-meta, monospace); font-size: 8px; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; } html[data-canvas] .rgc-collab__bubble { position: absolute; left: 11px; top: 34px; /* .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', "Inter Fallback", "Inter Fallback R", 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; } /* Same chrome as agent tags, but black — only while agents are on. */ html[data-canvas] .rgc-you__label { position: absolute; left: 11px; top: 15px; padding: 3px 5px; border-radius: 2px 6px 6px 6px; background: #050038; color: #fff; box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.22); font-family: var(--font-meta, monospace); font-size: 8px; font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: opacity 400ms ease; } /* Intro name tag: visible briefly, then fades so it does not stick around. */ html[data-canvas] .rgc-you.is-label-gone .rgc-you__label { opacity: 0; } html[data-canvas] .rgc-you.is-off { display: none; } /* --------------------------------------------------------------- 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, "Inter Fallback", "Inter Fallback R", 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, #0A84FF 55%, #050038); border-radius: 50%; background: color-mix(in srgb, #0A84FF 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 #0A84FF; 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', "Inter Fallback", "Inter Fallback R", 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; } }