/* Single-layer replacements for the removed Framer runtime. Everything visual the runtime used to do via JS lives here as plain CSS. */ /* --- hover states (measured from the hydrated site before removal). The runtime swapped the link for a "hover" variant: lavender pill, brand-purple label and caret, no underline. Inline styles carry the idle colours, hence !important. --- */ nav a[data-framer-name="btn-link"]:hover, nav .framer-1w0jhyg:hover { background-color: rgba(225, 219, 255, 0.25) !important; transition: background-color .15s ease; } nav a[data-framer-name="btn-link"]:hover p { --framer-text-color: rgb(68, 35, 252) !important; color: rgb(68, 35, 252) !important; text-decoration: none !important; } /* The export writes a colour attribute onto the and as well as the , which blocks inheritance, so the descendants are named too -- production recolours all three. */ nav a[data-framer-name="btn-link"]:hover svg, nav a[data-framer-name="btn-link"]:hover svg * { fill: rgb(68, 35, 252) !important; color: rgb(68, 35, 252) !important; } /* The caret sits in its own container next to the label and dims with it. */ nav a[data-framer-name="btn-link"]:hover .framer-1w9zncl-container { opacity: 0.85 !important; } /* Buy links. Production applies no filter to these -- brightness(1.25) was a stand-in and it fired on all 20 of them per page, including the outline buttons production leaves alone. Measured on live, the CTAs behave by component: the solid button swaps its fill and keeps its white label, the inline text links tint, and .framer-1ismqka is flat. */ .framer-v-1oss220.framer-2swqws:hover { background-color: rgb(123, 97, 255) !important; transition: background-color .15s ease; } .framer-v-1oss220.framer-2swqws:hover .framer-text:not(a) { color: rgb(255, 255, 255) !important; border-color: rgb(255, 255, 255) !important; } a.framer-styles-preset-13ft7jr:hover { color: rgb(202, 191, 255) !important; transition: color .15s ease; } .framer-1axksfv a:hover { opacity: .5; transition: opacity .15s ease; } /* --- avatar name tooltips: runtime kept these at opacity 0 until the avatar is hovered. !important because the export writes opacity:1 inline on every tooltip. The -56px is Framer's own .hover variant, which nothing adds the class for any more. --- */ .framer-DLwZG .framer-6eqqyq { opacity: 0 !important; pointer-events: none; transition: opacity .2s ease, top .2s ease; } .framer-DLwZG:hover .framer-6eqqyq { opacity: 1 !important; top: -56px; } /* --- back-to-top button. Three instances ship site-wide and production treats them differently: only the article one (.framer-pnnwkz, all 19 /learn/* pages) fades in on scroll and back out at the top. The /figma-plugins instance (.framer-160en92) and the icon-page one (.framer-yco38n, 704 pages) are visible from load, so they are left alone -- the export already ships them at opacity 1. Keyed by the instance class the same way the captured hover states are. --- */ [data-framer-name="Scrolltotop"].framer-pnnwkz { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; } body.fx-scrolled [data-framer-name="Scrolltotop"].framer-pnnwkz { opacity: 1 !important; pointer-events: auto; } /* --- mobile menu: production expands the header nav into this panel. Geometry and type below are measured off that expanded variant (390x638, 36px rows, 40px stride). --- */ .fx-overlay { position: fixed; inset: 0 0 auto 0; z-index: 9999; display: none; flex-direction: column; gap: 4px; padding: 12px 10px 16px; max-height: 100vh; overflow-y: auto; background: var(--token-f286fce1-72ae-4fb9-806e-5976843c8ef0, rgb(247, 247, 247)); font-family: Inter, "Inter Placeholder", sans-serif; } .fx-overlay.open { display: flex; } .fx-overlay .fx-top { display: flex; justify-content: space-between; align-items: center; height: 36px; } /* The panel covers the real header, so its logo and close button have to land exactly where the header's do or the logo appears to jump when the menu opens. Measured on live at 390px: logo at x=16 y=14 (28x32), close button at x=330 y=12 (48x36). */ .fx-overlay .fx-logo { display: flex; align-items: center; padding-left: 6px; } .fx-close { width: 48px; height: 36px; margin-right: -2px; border: 0; border-radius: 12px; font-size: 15px; line-height: 1; cursor: pointer; color: var(--token-e2b224dd-83c7-4784-bd9a-7883298d3fc6, rgb(33, 33, 33)); background: var(--token-b9f086d1-d6ed-4798-af48-c54d58fa58f8, rgb(224, 224, 224)); } .fx-overlay nav { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid var(--token-b9f086d1-d6ed-4798-af48-c54d58fa58f8, rgb(224, 224, 224)); } .fx-overlay nav a { display: flex; align-items: center; height: 36px; padding-left: 12px; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: var(--token-e2b224dd-83c7-4784-bd9a-7883298d3fc6, rgb(33, 33, 33)); } .fx-overlay nav a:hover { background: rgba(225, 219, 255, 0.25); } .fx-overlay .fx-extra { display: flex; flex-direction: column; gap: 3px; margin-top: 16px; } /* text-decoration: none is set, not merely omitted -- the export underlines anchors, and a line on this anchor is drawn through every descendant and cannot be taken back further down, so text-decoration: none on the glyph span did nothing and ↓ and 𓏗𓏗 came out underlined. The label below carries the underline instead. */ .fx-overlay .fx-extra > a { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border-radius: 12px; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--token-e2b224dd-83c7-4784-bd9a-7883298d3fc6, rgb(33, 33, 33)); } .fx-overlay .fx-extra > a > span { font-size: 16px; } /* These rows are flex containers, so a bare text node becomes an anonymous flex item that no rule can reach -- hence the label is a span with the underline on it. */ .fx-overlay .fx-extra > a .fx-lbl { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; } .fx-cta { background: rgb(68, 35, 252); color: #fff !important; font-size: 14px !important; text-decoration: none !important; } .fx-cta:hover { background: #7b61ff; } /* --- desktop nav dropdowns: geometry and type measured off the hydrated panels --- */ /* Fades rather than display:none/block. Two panels could also be on screen at once, because each closed on its own 180ms timer -- moving from Product to Resources showed both. site.js now closes the previous one the moment another opens. Production swaps instantly with no fade; the 140ms is a deliberate softening, asked for. */ .fx-dd { position: absolute; z-index: 9998; border-radius: 10px; overflow: hidden; /* Pinned to 0,0 until the first open. Without a top/left an absolutely positioned box falls back to its static position -- the end of -- and since these are no longer display:none, all three panels extended every page by 251px. */ top: 0; left: 0; background: rgb(250, 255, 255); font-family: Inter, "Inter Placeholder", sans-serif; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; } .fx-dd.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .14s ease, transform .14s ease, visibility 0s; } /* Live outlines the panel with a pseudo-element rather than a border on the box itself: .framer-1f4sfha::after { content:""; inset:0; border:1px solid rgb(224,224,224) }. Mine had no ::after, so the panel floated with no edge. There is no shadow on live -- box-shadow computes to none on the panel and on its wrapper. */ .fx-dd::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgb(224, 224, 224); border-radius: inherit; } .fx-dd a { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px; text-decoration: none; color: var(--token-51805f0a-b892-433f-b5a4-99aa98b6239a, rgb(74, 74, 74)); } /* 62.67, not 63: live's rows are fractional, so four of them plus three 1px gaps come to 253 rather than 255. Rounding them up left the panel 2px taller than live's. */ .fx-dd-wide a { align-items: flex-start; height: 62.67px; padding: 8px 12px; } /* gap, not a margin on each row: live spaces these with gap:1px and its rows are a fractional 63.x tall, so margins round the panel 2px taller than live's. */ .fx-dd-wide { display: flex; flex-direction: column; gap: 1px; } .fx-dd a:hover { background: rgba(225, 219, 255, 0.25); } .fx-dd .fx-dd-i { flex: none; width: 16px; height: 16px; display: flex; align-items: center; } .fx-dd:not(.fx-dd-wide) .fx-dd-i { order: 2; } /* the ↗ trails the label on the plain lists */ /* The row is align-items:flex-start so the two-line text block sits under the 8px top padding; the 16px icon inherited that and hung 15px above the text's middle. It centres against the whole title+description block. For centring on the title line instead, swap this for margin-top: 3px -- half the 22px title line minus half the icon. */ .fx-dd-wide .fx-dd-i { align-self: center; } .fx-dd .fx-dd-i:empty { display: none; } .fx-dd .fx-dd-t { display: flex; flex-direction: column; justify-content: center; min-width: 0; } /* Live leaves 4px between the row's title and its description; without it the pair sat flush and every description line rendered 4px high. The row height is fixed, so the panel height does not move: 22 + 4 + 20 + 16 padding = the 62.67px row. */ .fx-dd-wide .fx-dd-t { gap: 4px; } .fx-dd b { font-size: 13px; font-weight: 700; line-height: 22px; text-decoration: underline; text-underline-offset: 3px; } /* The two panel shapes are typed differently on live: the plain lists are 14px and capitalised by CSS -- which is why the row data reads "Affiliate program" and renders "Affiliate Program" -- while the wide, two-line rows stay 13px with no transform. */ .fx-dd:not(.fx-dd-wide) b { font-size: 14px; text-transform: capitalize; } .fx-dd small { font-size: 12px; font-weight: 500; line-height: 20px; text-decoration: none; } /* --- code blocks: the copy button on /code-components tints on hover. It is a different instance of the copy component from the icon-page one (.framer-18epsuv-container), which production leaves flat, so the rule names this container. The button carries no class of its own. Keyed on the block wrapper rather than the button: the code text is painted over the button, so the button never receives :hover and a rule on it could never fire. The wrapper is exactly button-sized (585x64), so this is not the container over-reach the rules further down were guilty of. --- */ .framer-130w71a:hover .framer-1ewra6z-container button { background-color: rgba(255, 255, 255, 0.06) !important; transition: background-color .15s ease; } /* --- icon tiles: the "Copied!" label ships at opacity 1 and was faded in by the runtime. The size is pinned because on a symbol tile the label inherits the glyph's type -- it came out at 28px/400 against the icon tiles' 16px/500. Live uses 16px/500 for both. --- */ button[aria-live] span[aria-hidden="true"] { font-size: 16px !important; font-weight: 500 !important; line-height: 16px !important; } button[aria-live] > span > span[aria-hidden="true"] { opacity: 0 !important; transition: opacity .2s ease; } /* The three install-snippet tiles (/code-components and home) were exported with their "Copied!" label stuck at inline opacity:1, so the tile read "Copied! npm i ..." at rest. Hidden here for every copy button -- icon tiles already rest at 0 -- and revealed again by the .fx-copied rule below, which must stay after this one to win the tie. The install tiles never get .fx-copied: their feedback is the command text itself (see site.js). */ button[aria-live] > span > span[aria-hidden="true"] { opacity: 0 !important; } button[aria-live].fx-copied > span > span[aria-hidden="true"] { opacity: 1 !important; } /* --- marquees (replaces the Ticker component's JS-driven translateX) --- */ @keyframes fx-ticker-l { from { transform: translateX(0) } to { transform: translateX(calc(var(--fx-shift) * -1)) } } @keyframes fx-ticker-r { from { transform: translateX(calc(var(--fx-shift) * -1)) } to { transform: translateX(0) } } /* Four hover rules that set `transform` on parallax layers were removed here: .framer-u8i48r:hover, .framer-nwsm3e:hover .framer-14rkj72, .framer-1hsjp5r:hover .framer-4bgioe, .framer-4bgioe:hover Each snapped its layer to a fixed -0.5/-1.5px, and being !important it beat the inline transform site.js drives on scroll, so pointing at a section yanked its screenshot layer out of position. Production does not move on hover -- verified with the pointer parked away and then moved on, without scrolling in between. They are capture artifacts: hover-capture sampled these while the parallax was mid-flight and read the difference as a hover effect. Its guard only drops deltas over 8px. */ /* ==== captured hover states ========================================================= Framer's hover variants lived in the deleted JS modules, not in the exported CSS: the runtime rewrote inline styles on mouseenter. hover-capture.mjs hovers every component on production, diffs the computed styles, and emits the deltas below, keyed by the component's own framer-* class so one rule covers every instance site-wide. Regenerate: node hover-capture.mjs --out f.json && node hover-capture.mjs --emit f.json --freq ================================================================================== */ .framer-2swqws:hover { background-color: rgba(225, 219, 255, 0.25) !important } /* .framer-f3rjmz (the