Hover Reveal Pill Nav

[{"id":"df1f5564-23f2-4d3d-9e89-0458af32f732","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: sans-serif;\\n background: #07080a;\\n}\\n\\na {\\n color: inherit;\\n text-decoration: none;\\n}\\n\\nul {\\n list-style: none;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\\n\\n.pill-nav {\\n width: min(100%, 690px);\\n}\\n\\n.pill-nav__list {\\n --nav-padding: 7px;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n width: 100%;\\n min-height: 92px;\\n padding: var(--nav-padding);\\n border-radius: 999px;\\n background: #f2f2f2;\\n overflow: hidden;\\n isolation: isolate;\\n}\\n\\n.pill-nav__item {\\n position: relative;\\n z-index: 2;\\n flex: 1 1 0;\\n min-width: 0;\\n height: 78px;\\n mix-blend-mode: difference;\\n}\\n\\n.pill-nav__link {\\n position: relative;\\n z-index: 3;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 14px;\\n border-radius: 999px;\\n font-size: 20px;\\n font-weight: normal;\\n line-height: 1;\\n text-transform: uppercase;\\n white-space: nowrap;\\n user-select: none;\\n cursor: pointer;\\n\\n color: #ffffff;\\n\\n transition: transform 180ms ease;\\n}\\n\\n.pill-nav__link:active {\\n transform: scale(0.97);\\n}\\n\\n.pill-nav__link:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: -8px;\\n}\\n\\n.pill-nav__cursor {\\n position: absolute;\\n z-index: 1;\\n top: var(--nav-padding);\\n left: 0;\\n width: 0;\\n height: calc(100% - (var(--nav-padding) * 2));\\n border-radius: 999px;\\n background: #000000;\\n opacity: 0;\\n pointer-events: none;\\n transform: translateX(0);\\n transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\\n}\\n\\n.pill-nav__list.is-hovering .pill-nav__cursor {\\n opacity: 1;\\n}\\n\\n@media (max-width: 720px) {\\n .preview {\\n padding: 24px 16px;\\n }\\n\\n .pill-nav__list {\\n min-height: 72px;\\n }\\n\\n .pill-nav__item {\\n height: 58px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .pill-nav__list {\\n min-height: 58px;\\n }\\n\\n .pill-nav__item {\\n height: 44px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 4px;\\n font-size: 10px;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Hover Reveal Pill Nav\\n \\n \\n \\n

\\n \\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/index.js\",\"name\":\"index.js\",\"code\":\"const navList = document.querySelector(\\\"#navList\\\");\\nconst navCursor = document.querySelector(\\\"#navCursor\\\");\\nconst navItems = document.querySelectorAll(\\\".pill-nav__item\\\");\\n\\nfunction moveCursorToItem(item) {\\n if (!item || !navList || !navCursor) return;\\n\\n const left = item.offsetLeft;\\n const width = item.offsetWidth;\\n\\n navCursor.style.width = `${width}px`;\\n navCursor.style.transform = `translateX(${left}px)`;\\n navList.classList.add(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n\\n item.classList.add(\\\"is-active\\\");\\n}\\n\\nfunction resetNav() {\\n if (!navList) return;\\n\\n navList.classList.remove(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n}\\n\\nnavItems.forEach((item) => {\\n item.addEventListener(\\\"mouseenter\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n item.addEventListener(\\\"touchstart\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n const link = item.querySelector(\\\".pill-nav__link\\\");\\n\\n if (link) {\\n link.addEventListener(\\\"focus\\\", () => {\\n moveCursorToItem(item);\\n });\\n }\\n});\\n\\nnavList.addEventListener(\\\"mouseleave\\\", resetNav);\\n\\nnavList.addEventListener(\\\"focusout\\\", (event) => {\\n if (!navList.contains(event.relatedTarget)) {\\n resetNav();\\n }\\n});\\n\\nwindow.addEventListener(\\\"resize\\\", resetNav);\",\"language\":\"javascript\"}]","template":"vanilla-ts","activeFile":"/index.js","showCode":"true","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]","splitRatio":"50","mobileSplitRatio":"50"},"children":[]},{"id":"701ebeb1-ddce-4938-8b19-78b1c5a71b4f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"a3d774fb-f418-42e2-9513-d79e9913c04d","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8f192dd7-4643-45b2-9ee5-13df8c017236","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"5c405de5-720e-42bb-9e42-4693eff324a8","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"*,\\n*::before,\\n*::after {\\n box-sizing: border-box;\\n}\\n\\n* {\\n margin: 0;\\n padding: 0;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n font-family: sans-serif;\\n background: #07080a;\\n}\\n\\na {\\n color: inherit;\\n text-decoration: none;\\n}\\n\\nul {\\n list-style: none;\\n}\\n\\n.preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\\n\\n.pill-nav {\\n width: min(100%, 690px);\\n}\\n\\n.pill-nav__list {\\n --nav-padding: 7px;\\n\\n position: relative;\\n display: flex;\\n align-items: center;\\n width: 100%;\\n min-height: 92px;\\n padding: var(--nav-padding);\\n border-radius: 999px;\\n background: #f2f2f2;\\n overflow: hidden;\\n isolation: isolate;\\n}\\n\\n.pill-nav__item {\\n position: relative;\\n z-index: 2;\\n flex: 1 1 0;\\n min-width: 0;\\n height: 78px;\\n mix-blend-mode: difference;\\n}\\n\\n.pill-nav__link {\\n position: relative;\\n z-index: 3;\\n width: 100%;\\n height: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n padding: 0 14px;\\n border-radius: 999px;\\n font-size: 20px;\\n font-weight: normal;\\n line-height: 1;\\n text-transform: uppercase;\\n white-space: nowrap;\\n user-select: none;\\n cursor: pointer;\\n\\n color: #ffffff;\\n\\n transition: transform 180ms ease;\\n}\\n\\n.pill-nav__link:active {\\n transform: scale(0.97);\\n}\\n\\n.pill-nav__link:focus-visible {\\n outline: 2px solid #111111;\\n outline-offset: -8px;\\n}\\n\\n.pill-nav__cursor {\\n position: absolute;\\n z-index: 1;\\n top: var(--nav-padding);\\n left: 0;\\n width: 0;\\n height: calc(100% - (var(--nav-padding) * 2));\\n border-radius: 999px;\\n background: #000000;\\n opacity: 0;\\n pointer-events: none;\\n transform: translateX(0);\\n transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\\n}\\n\\n.pill-nav__list.is-hovering .pill-nav__cursor {\\n opacity: 1;\\n}\\n\\n@media (max-width: 720px) {\\n .preview {\\n padding: 24px 16px;\\n }\\n\\n .pill-nav__list {\\n min-height: 72px;\\n }\\n\\n .pill-nav__item {\\n height: 58px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\\n\\n@media (max-width: 480px) {\\n .pill-nav__list {\\n min-height: 58px;\\n }\\n\\n .pill-nav__item {\\n height: 44px;\\n }\\n\\n .pill-nav__link {\\n padding: 0 4px;\\n font-size: 10px;\\n }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"13a7f785-8f3c-4ff2-8539-eee68ecaa87b","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Add JS","styles":{}}],"children":[]},{"id":"2a0d5851-b730-4b3b-8126-0e2ddcb19f45","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.js\",\"code\":\"const navList = document.querySelector(\\\"#navList\\\");\\nconst navCursor = document.querySelector(\\\"#navCursor\\\");\\nconst navItems = document.querySelectorAll(\\\".pill-nav__item\\\");\\n\\nfunction moveCursorToItem(item) {\\n if (!item || !navList || !navCursor) return;\\n\\n const left = item.offsetLeft;\\n const width = item.offsetWidth;\\n\\n navCursor.style.width = `${width}px`;\\n navCursor.style.transform = `translateX(${left}px)`;\\n navList.classList.add(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n\\n item.classList.add(\\\"is-active\\\");\\n}\\n\\nfunction resetNav() {\\n if (!navList) return;\\n\\n navList.classList.remove(\\\"is-hovering\\\");\\n\\n navItems.forEach((navItem) => {\\n navItem.classList.remove(\\\"is-active\\\");\\n });\\n}\\n\\nnavItems.forEach((item) => {\\n item.addEventListener(\\\"mouseenter\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n item.addEventListener(\\\"touchstart\\\", () => {\\n moveCursorToItem(item);\\n });\\n\\n const link = item.querySelector(\\\".pill-nav__link\\\");\\n\\n if (link) {\\n link.addEventListener(\\\"focus\\\", () => {\\n moveCursorToItem(item);\\n });\\n }\\n});\\n\\nnavList.addEventListener(\\\"mouseleave\\\", resetNav);\\n\\nnavList.addEventListener(\\\"focusout\\\", (event) => {\\n if (!navList.contains(event.relatedTarget)) {\\n resetNav();\\n }\\n});\\n\\nwindow.addEventListener(\\\"resize\\\", resetNav);\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dc5fc107-2454-4d51-af5a-7852b47c54b4","type":"divider","props":{},"children":[]},{"id":"b897a214-659a-47b3-8ee7-07448ee4223c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"ccf1efa9-8319-4a46-9428-a135204881a3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Style\n","styles":{"bold":true}},{"type":"text","text":"The nav uses a dark page background, a light pill container, uppercase menu text, and a black rounded cursor behind each item.","styles":{}}],"children":[]},{"id":"95c560cf-9dc0-4a72-b77c-fb7c1afdd46a","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout\n","styles":{"bold":true}},{"type":"text","text":"The component is centered horizontally near the top using ","styles":{}},{"type":"text","text":".preview","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"f6f1dbdb-3139-4f23-943e-2aa246628fc1","type":"procode","props":{"code":".preview {\n min-height: 100vh;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n padding: 32px 24px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"qimy0agoy\",\"name\":\"code\",\"code\":\".preview {\\n min-height: 100vh;\\n width: 100%;\\n display: flex;\\n justify-content: center;\\n align-items: flex-start;\\n padding: 32px 24px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"eb3ce8d6-d788-4946-9b06-11eb349672b4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover\n","styles":{"bold":true}},{"type":"text","text":"When hovering a nav item, the cursor moves to that item and matches its width.","styles":{}}],"children":[]},{"id":"c58aae9f-7599-4871-b65d-2061062cc719","type":"procode","props":{"code":"navCursor.style.width = `${width}px`;\nnavCursor.style.transform = `translateX(${left}px)`;\nnavList.classList.add(\"is-hovering\");","language":"javascript","filename":"","files":"[{\"id\":\"l4b71swxw\",\"name\":\"code\",\"code\":\"navCursor.style.width = `${width}px`;\\nnavCursor.style.transform = `translateX(${left}px)`;\\nnavList.classList.add(\\\"is-hovering\\\");\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fe322b0f-ac96-4721-aac0-be5e3fd220d3","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active\n","styles":{"bold":true}},{"type":"text","text":"When clicking a link, the text scales down slightly.","styles":{}}],"children":[]},{"id":"f34befc4-677c-45a6-b369-fb72e5627fb5","type":"procode","props":{"code":".pill-nav__link:active {\n transform: scale(0.97);\n}","language":"javascript","filename":"","files":"[{\"id\":\"s2hpw8zd2\",\"name\":\"code\",\"code\":\".pill-nav__link:active {\\n transform: scale(0.97);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bcf4e86a-0eae-4333-b14a-7b9abb2a3ff4","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation\n","styles":{"bold":true}},{"type":"text","text":"The cursor uses CSS transition for smooth movement and width changes.","styles":{}}],"children":[]},{"id":"629ae645-b269-40f2-8a1f-ba6596e712be","type":"procode","props":{"code":"transition:\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\n opacity 180ms ease;","language":"javascript","filename":"","files":"[{\"id\":\"85oaocbia\",\"name\":\"code\",\"code\":\"transition:\\n transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n width 430ms cubic-bezier(0.16, 1, 0.3, 1),\\n opacity 180ms ease;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bde0b5ec-f7ed-44e3-bad1-3da1be862f1f","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Duration\n","styles":{"bold":true}},{"type":"text","text":"Change ","styles":{}},{"type":"text","text":"430ms","styles":{"code":true}},{"type":"text","text":" to make the cursor movement faster or slower.","styles":{}}],"children":[]},{"id":"24daec69-c5c1-4293-8fda-6c104c3be2f9","type":"procode","props":{"code":"transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\nwidth 430ms cubic-bezier(0.16, 1, 0.3, 1),","language":"javascript","filename":"","files":"[{\"id\":\"iq5bz0ix7\",\"name\":\"code\",\"code\":\"transform 430ms cubic-bezier(0.16, 1, 0.3, 1),\\nwidth 430ms cubic-bezier(0.16, 1, 0.3, 1),\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"861aa711-8ffc-4489-ba61-be15682975c5","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Color\n","styles":{"bold":true}},{"type":"text","text":"Change the nav background here:","styles":{}}],"children":[]},{"id":"2dba6016-9332-4d44-a401-3e3756917fae","type":"procode","props":{"code":"background: #f2f2f2;","language":"javascript","filename":"","files":"[{\"id\":\"ceeof7bfy\",\"name\":\"code\",\"code\":\"background: #f2f2f2;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cc46f93b-236c-4ad8-a12c-708b67c1ad31","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the cursor color here:","styles":{}}],"children":[]},{"id":"daab5b2e-a543-413f-a2c0-863a1a05fe93","type":"procode","props":{"code":"background: #000000;","language":"javascript","filename":"","files":"[{\"id\":\"3jcehgdk0\",\"name\":\"code\",\"code\":\"background: #000000;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2d883d00-fc11-4b9d-9475-7b719a2f2f3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Change the page background here:","styles":{}}],"children":[]},{"id":"644dff84-b927-4e78-ac3b-6ed437c52342","type":"procode","props":{"code":"background: #07080a;","language":"javascript","filename":"","files":"[{\"id\":\"ll9rs7jvr\",\"name\":\"code\",\"code\":\"background: #07080a;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6cc34b62-8b01-4a64-a793-cbfa69225080","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text / Content\n","styles":{"bold":true}},{"type":"text","text":"Change the nav labels directly in ","styles":{}},{"type":"text","text":"/index.html","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"75f37122-58c8-45b1-a770-1d7b83b30331","type":"procode","props":{"code":"Pricing","language":"javascript","filename":"","files":"[{\"id\":\"sxa4wc91m\",\"name\":\"code\",\"code\":\"Pricing\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fd46e951-c9bd-4103-8532-74f4a16406af","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"JavaScript Logic\n","styles":{"bold":true}},{"type":"text","text":"The cursor position uses ","styles":{}},{"type":"text","text":"offsetLeft","styles":{"code":true}},{"type":"text","text":" and ","styles":{}},{"type":"text","text":"offsetWidth","styles":{"code":true}},{"type":"text","text":", so it follows the exact item size.","styles":{}}],"children":[]},{"id":"dc9fa309-c5d6-4ba6-9d6a-d829fce926bd","type":"procode","props":{"code":"const left = item.offsetLeft;\nconst width = item.offsetWidth;","language":"javascript","filename":"","files":"[{\"id\":\"twqx4fkv4\",\"name\":\"code\",\"code\":\"const left = item.offsetLeft;\\nconst width = item.offsetWidth;\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b32d2788-afe0-4066-a841-571342eae3c7","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Responsive\n","styles":{"bold":true}},{"type":"text","text":"The nav becomes smaller on tablet and mobile using media queries.","styles":{}}],"children":[]},{"id":"b37107cc-e86c-4522-bd03-11e6470e7ab1","type":"procode","props":{"code":"@media (max-width: 720px) {\n .pill-nav__link {\n padding: 0 8px;\n font-size: 14px;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"ii3eff2rx\",\"name\":\"code\",\"code\":\"@media (max-width: 720px) {\\n .pill-nav__link {\\n padding: 0 8px;\\n font-size: 14px;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"69be84de-5c4a-48de-9b83-f4be92920a34","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion\n","styles":{"bold":true}},{"type":"text","text":"Motion is disabled for users who prefer reduced motion.","styles":{}}],"children":[]},{"id":"68343ebe-72cf-4429-96f9-a4f50032a569","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .pill-nav__cursor,\n .pill-nav__link {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"hf03n6n0e\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .pill-nav__cursor,\\n .pill-nav__link {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"abf95ee3-2040-4e95-994b-76159810b254","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]