CSS Tracker - Inspect & Extract CSS Instantly<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\r\n rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Base Styles *\/\r\n body,\r\n html {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #030305;\r\n color: #ffffff;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Typography Gradients *\/\r\n .text-gradient {\r\n background: linear-gradient(135deg, #60A5FA 0%, #C084FC 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .text-gradient-sub {\r\n background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* Glassmorphism Cards *\/\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.02);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 24px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .glass-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-radius: 24px;\r\n padding: 2px;\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n pointer-events: none;\r\n }\r\n\r\n .glass-card:hover {\r\n transform: translateY(-8px);\r\n background: rgba(255, 255, 255, 0.04);\r\n box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.15);\r\n }\r\n\r\n .glass-card:hover::before {\r\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(167, 139, 250, 0.2));\r\n }\r\n\r\n \/* Interactive Buttons *\/\r\n .glow-btn {\r\n position: relative;\r\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .glow-btn:hover {\r\n box-shadow: 0 0 25px 0 rgba(59, 130, 246, 0.6);\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Ambient Background Glows *\/\r\n .ambient-glow {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(140px);\r\n z-index: -1;\r\n opacity: 0.5;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #030305;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #334155;\r\n border-radius: 5px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #475569;\r\n }\r\n\r\n \/* Accordion FAQ *\/\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-out, padding 0.3s ease;\r\n }\r\n\r\n .faq-checkbox:checked~.faq-answer {\r\n max-height: 200px;\r\n padding-top: 1rem;\r\n padding-bottom: 1rem;\r\n }\r\n\r\n .faq-checkbox:checked~.faq-label svg {\r\n transform: rotate(180deg);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"antialiased selection:bg-blue-500\/30 selection:text-white relative\">\r\n\r\n \r\n <div\r\n class=\"ambient-glow bg-blue-600\/20 w-[600px] h-[600px] top-0 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 pointer-events-none\">\r\n <\/div>\r\n <div class=\"ambient-glow bg-purple-600\/10 w-[800px] h-[800px] top-[40%] right-[-20%] pointer-events-none\"><\/div>\r\n <div class=\"ambient-glow bg-blue-600\/10 w-[700px] h-[700px] bottom-0 left-[-10%] pointer-events-none\"><\/div>\r\n\r\n \r\n <nav class=\"fixed w-full z-50 top-0 border-b border-white\/5 bg-[#030305]\/70 backdrop-blur-xl\">\r\n <div class=\"max-w-7xl mx-auto px-6 h-20 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3 cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/Css-Tracker-Favicon-bg.png\"\r\n alt=\"CSS Tracker Logo\" class=\"w-10 h-10 rounded-xl shadow-lg shadow-blue-500\/20 object-cover\">\r\n <span class=\"text-xl font-bold tracking-tight text-white\">CSS Tracker<\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex gap-10 text-sm font-medium text-gray-400\">\r\n <a href=\"#features\" class=\"hover:text-white transition-colors\">Features<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-white transition-colors\">How it Works<\/a>\r\n <a href=\"#use-cases\" class=\"hover:text-white transition-colors\">Use Cases<\/a>\r\n <a href=\"#pricing\" class=\"hover:text-white transition-colors\">Pricing<\/a>\r\n <\/div>\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\" target=\"_blank\"\r\n class=\"bg-white text-black px-6 py-2.5 rounded-full text-sm font-semibold hover:bg-gray-200 transition-all glow-btn flex items-center gap-2\">\r\n Add to Chrome\r\n <span class=\"text-xs bg-black\/10 px-2 py-0.5 rounded-full ml-1 font-bold\">Free<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"pt-48 pb-20 px-6 text-center relative z-10 max-w-5xl mx-auto\">\r\n \r\n <div\r\n class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full border border-blue-500\/30 bg-blue-500\/5 text-sm font-medium text-blue-300 mb-10 shadow-[0_0_15px_rgba(59,130,246,0.1)]\">\r\n <span class=\"relative flex h-2.5 w-2.5\">\r\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75\"><\/span>\r\n <span class=\"relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-500\"><\/span>\r\n <\/span>\r\n V2.0 is live! Featuring the new Design System Inspector.\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-5xl md:text-7xl lg:text-[5rem] font-extrabold tracking-tight mb-8 leading-[1.1]\">\r\n Stop inspecting. <br class=\"hidden md:block\">\r\n <span class=\"text-gradient\">Start extracting.<\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"text-lg md:text-2xl text-gradient-sub max-w-3xl mx-auto mb-12 leading-relaxed\">\r\n The ultimate Chrome extension for Web Designers and Frontend Developers. Hover over any element to steal its\r\n complete Color Palette, Typography rules, and Computed CSS in one click.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row justify-center items-center gap-4 mb-20\">\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\"\r\n class=\"w-full sm:w-auto bg-blue-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-blue-500 transition-all glow-btn flex items-center justify-center gap-3\">\r\n <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 0C8.74 0 8.333.015 7.053.072 2.695.116.174 2.562.127 7.01.07 8.29.057 8.712.057 12c0 3.287.015 3.708.072 4.988.047 4.453 2.52 6.891 6.884 6.94 1.28.057 1.706.072 4.987.072 3.288 0 3.709-.015 4.989-.072 4.364-.049 6.837-2.487 6.884-6.94.057-1.28.072-1.701.072-4.988 0-3.288-.015-3.71-.072-4.989-.047-4.453-2.52-6.891-6.884-6.94C15.71.015 15.288 0 12 0zm0 2.16c3.23 0 3.614.012 4.887.07 3.243.048 4.646 1.455 4.694 4.695.058 1.273.07 1.657.07 4.887s-.012 3.614-.07 4.887c-.048 3.241-1.45 4.647-4.694 4.695-1.273.058-1.657.07-4.887.07-3.23 0-3.614-.012-4.887-.07-3.243-.048-4.646-1.454-4.694-4.695-.058-1.273-.07-1.657-.07-4.887s.012-3.614.07-4.887c.048-3.24 1.45-4.647 4.694-4.695 1.273-.058 1.657-.07 4.887-.07zM7.759 12.005a4.24 4.24 0 108.48 0 4.24 4.24 0 00-8.48 0zm6.32 0a2.08 2.08 0 11-4.16 0 2.08 2.08 0 014.16 0zm3.328-4.823a1.416 1.416 0 100 2.832 1.416 1.416 0 000-2.832z\" \/>\r\n <\/svg>\r\n Add to Chrome \u2014 It's Free\r\n <\/a>\r\n <p class=\"text-sm text-gray-500 mt-4 sm:hidden\">No credit card required. Install in 2 seconds.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"relative mx-auto rounded-xl border border-white\/10 bg-[#0d0d12] shadow-2xl overflow-hidden aspect-video flex items-center justify-center group\">\r\n \r\n <div\r\n class=\"absolute top-0 left-0 right-0 h-8 bg-black\/40 border-b border-white\/5 flex items-center px-4 gap-2 z-20\">\r\n <div class=\"w-3 h-3 rounded-full bg-red-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-green-500\/80\"><\/div>\r\n <div class=\"mx-auto h-4 w-1\/3 bg-white\/5 rounded\"><\/div>\r\n <\/div>\r\n\r\n \r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/css_tracker_hero_mockup_lp-images.jpg\"\r\n alt=\"CSS Tracker Dashboard Interface\"\r\n class=\"w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity group-hover:scale-[1.02] duration-500 mt-2\">\r\n\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-t from-[#030305] via-transparent to-transparent pointer-events-none z-10\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-10 border-y border-white\/5 bg-white\/[0.01]\">\r\n <div class=\"max-w-7xl mx-auto px-6 text-center\">\r\n <p class=\"text-sm font-medium text-gray-500 uppercase tracking-widest mb-8\">Works flawlessly with all modern\r\n frameworks<\/p>\r\n <div\r\n class=\"flex flex-wrap justify-center items-center gap-12 sm:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-500\">\r\n \r\n <span class=\"text-2xl font-bold font-mono\">TailwindCSS<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">React<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">Vue.js<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">WordPress<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">Webflow<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"features\" class=\"py-32 px-6 max-w-7xl mx-auto relative z-10\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6 tracking-tight\">Everything you need. <br>Nothing you don't.<\/h2>\r\n <p class=\"text-xl text-gray-400 max-w-2xl mx-auto\">Chrome DevTools is incredibly powerful. But for visual design\r\n inspection? It's overkill. CSS Tracker is built specifically for design extraction.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500\/20 to-blue-600\/10 border border-blue-500\/20 flex items-center justify-center text-blue-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83c\udfa8<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Instant Color Palettes<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Automatically groups all background, text, borders, and\r\n input colors from the active page. Grab hex, RGB, or HSL codes with a single click and build your mood board\r\n instantly.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full pt-4 overflow-hidden rounded-xl border border-white\/5 group-hover:border-blue-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-1-1.png\"\r\n alt=\"Color Palette Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500\/20 to-purple-600\/10 border border-purple-500\/20 flex items-center justify-center text-purple-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n Aa<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Typography Extractor<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Discover exact font families, sizes, weights, and\r\n line-heights powering beautiful headings and body text.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-purple-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-2.png\"\r\n alt=\"Typography Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-emerald-600\/10 border border-emerald-500\/20 flex items-center justify-center text-emerald-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\udcd0<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Box Model Inspector<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Hover over any element to visualize margins, padding, and\r\n borders. No more guessing spacing units.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-emerald-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-3.png\"\r\n alt=\"Box Model Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500\/20 to-orange-600\/10 border border-orange-500\/20 flex items-center justify-center text-orange-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\udc41\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">WCAG Contrast Scanner & Copy CSS<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Ensure your designs meet global accessibility standards\r\n and copy production-ready CSS code directly to your clipboard.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-orange-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-4.png\"\r\n alt=\"WCAG Contrast & Copy\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group border-t border-indigo-500\/10\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500\/20 to-indigo-600\/10 border border-indigo-500\/20 flex items-center justify-center text-indigo-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \u26a1<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Design System & Shadow DOM<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Pierces through Web Components to extract hidden CSS\r\n Variables, Animations, and Font variations, transforming raw code into beautifully categorized Design Tokens.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1 border-t border-cyan-500\/10\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500\/20 to-cyan-600\/10 border border-cyan-500\/20 flex items-center justify-center text-cyan-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \u2601\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">History & Analytics<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Never lose a scanned site. Automatically save favorites,\r\n browse your history, and track usage via a built-in interactive dashboard.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"glass-card p-10 flex flex-col lg:flex-row items-center gap-10 lg:col-span-3 group bg-gradient-to-r from-transparent to-white\/[0.01]\">\r\n <div class=\"w-full lg:w-1\/2\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500\/20 to-pink-600\/10 border border-pink-500\/20 flex items-center justify-center text-pink-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\uddbc\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Advanced Asset & SVG Export<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Skip the network tab. CSS Tracker auto-detects\r\n background images, inline SVGs, and hidden assets, allowing you to bulk download them instantly in perfect\r\n resolution.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"w-full lg:w-1\/2 overflow-hidden rounded-xl border border-white\/10 group-hover:border-pink-500\/30 transition-colors shadow-2xl\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-5.png\"\r\n alt=\"Asset Export Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"how-it-works\" class=\"py-32 border-y border-white\/5 bg-[#050508]\">\r\n <div class=\"max-w-7xl mx-auto px-6\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">From inspiration to implementation <br>in 3 seconds.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-12 relative\">\r\n \r\n <div\r\n class=\"hidden md:block absolute top-[40px] left-[10%] right-[10%] h-[2px] bg-gradient-to-r from-blue-600\/0 via-blue-600\/30 to-blue-600\/0 z-0\">\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-gray-800 flex items-center justify-center text-2xl font-black text-white shadow-xl shadow-black mb-8\">\r\n 1<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4\">Install<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Download CSS Tracker from the Chrome Web Store and pin it to your\r\n browser for quick access.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-blue-500\/40 shadow-[0_0_30px_rgba(59,130,246,0.2)] flex items-center justify-center text-2xl font-black text-blue-400 mb-8\">\r\n 2<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Hover & Inspect<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Turn on Inspection Mode. Point your mouse at any element and watch\r\n its raw properties appear instantly.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-gray-800 flex items-center justify-center text-2xl font-black text-white shadow-xl shadow-black mb-8\">\r\n 3<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4\">Copy & Paste<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Click \"Copy All CSS\" and paste production-ready computed code\r\n directly into your code editor.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"use-cases\" class=\"py-32 px-6 max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">Built for the modern web workflow.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-blue-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\">\r\n <\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Web Designers<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Analyze the competition. Found a UI that converts perfectly?\r\n Extract its spacing, typography rules, and exact color palette to build your own mood board in seconds.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-purple-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"><\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Frontend Developers<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Stop writing CSS from scratch. Select elements and copy their\r\n computed CSS properties directly into your project or Tailwind configuration file seamlessly.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-emerald-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\">\r\n <\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Marketing Agencies<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Perform rapid UX\/UI audits. Deliver beautiful technical design\r\n reports to your clients without needing deep technical coding knowledge or viewing raw HTML.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"pricing\" class=\"py-32 px-6 max-w-7xl mx-auto border-t border-white\/5\">\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">Simple pricing. Professional power.<\/h2>\r\n <p class=\"text-xl text-gray-400 mb-10\">Manage your subscription easily. Upgrade, downgrade, or cancel anytime.<\/p>\r\n\r\n \r\n <div class=\"flex items-center justify-center gap-4 mb-10\">\r\n <span class=\"text-white font-medium pricing-label-monthly\">Monthly<\/span>\r\n <button id=\"billing-toggle\"\r\n class=\"relative inline-flex h-8 w-16 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#030305] shadow-[0_0_15px_rgba(37,99,235,0.3)]\">\r\n <span class=\"sr-only\">Toggle billing period<\/span>\r\n <span id=\"billing-toggle-knob\"\r\n class=\"inline-block h-6 w-6 translate-x-1 rounded-full bg-white transition-transform\"><\/span>\r\n <\/button>\r\n <span class=\"text-gray-400 font-medium pricing-label-annually flex items-center gap-2 transition-colors\">\r\n Annually\r\n <span\r\n class=\"bg-emerald-500\/20 text-emerald-400 text-xs font-bold px-2 py-1 rounded-full border border-emerald-500\/30 shadow-[0_0_10px_rgba(16,185,129,0.2)]\">Save\r\n 20%<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto\">\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col border border-gray-800 relative group hover:border-[#64748b]\">\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-b from-[#64748b]\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-2xl\">\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-white mb-2\">Developer Plan<\/h3>\r\n <p class=\"text-gray-400 mb-6 h-12\">Perfect for individuals needing quick inspections.<\/p>\r\n <div class=\"mb-8 flex items-baseline\"><span\r\n class=\"text-6xl font-black tracking-tighter text-white\">$0<\/span><span\r\n class=\"text-gray-500 font-medium ml-2\">\/month<\/span><\/div>\r\n\r\n \r\n <a id=\"btn-tier-free\" href=\"https:\/\/buy.stripe.com\/eVq4gAftS7AE68E8f8fAc04?client_reference_id=free\"\r\n class=\"w-full py-4 rounded-xl border border-gray-600 text-white font-bold hover:bg-gray-800 transition text-center mb-10 relative z-10\">\r\n Start for Free\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Included:<\/p>\r\n <ul class=\"space-y-4 text-gray-300\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 100 Scans per month<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Basic Box Model Inspector<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Color & Font Extraction<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 1 Active Device Limit<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"glass-card p-10 flex flex-col border-[#2563eb]\/50 bg-[#2563eb]\/10 relative overflow-hidden transform lg:-translate-y-4 shadow-[0_0_40px_rgba(37,99,235,0.15)]\">\r\n \r\n <div\r\n class=\"absolute top-0 inset-x-0 bg-gradient-to-r from-blue-600 to-blue-500 text-center py-1.5 text-xs font-bold tracking-widest text-white shadow-lg uppercase\">\r\n Most Popular\r\n <\/div>\r\n\r\n <h3 class=\"text-2xl font-bold text-blue-400 mb-2 mt-4\">Agency Premium<\/h3>\r\n <p class=\"text-blue-200\/60 mb-6 h-12\">Unlimited power for professional designers and agencies.<\/p>\r\n <div class=\"mb-8 flex items-baseline\">\r\n <span class=\"text-6xl font-black tracking-tighter text-white price-amount\" data-monthly=\"4.99\"\r\n data-annually=\"3.99\">$4.99<\/span>\r\n <span class=\"text-blue-200\/50 font-medium ml-2 billing-period-suffix\">\/month<\/span>\r\n <\/div>\r\n\r\n \r\n <a id=\"btn-tier-premium\" href=\"https:\/\/buy.stripe.com\/6oUcN60yYf36gNi1QKfAc03?client_reference_id=premium\"\r\n class=\"w-full py-4 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-500 transition text-center mb-10 glow-btn relative z-10 shadow-[0_0_20px_rgba(37,99,235,0.4)]\">\r\n Get Premium\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Everything in Free, plus:<\/p>\r\n <ul class=\"space-y-4 text-white font-medium\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Unlimited Daily Scans (Cloud History)<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 5 Active Devices<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Export Raw JSON & CSS Variables<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Design Tokens & Animations Tracker<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Save Favorite Sites Dashboard<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col border border-gray-800 relative group hover:border-[#8b5cf6]\">\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-b from-[#8b5cf6]\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-2xl\">\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-[#a78bfa] mb-2\">Team Enterprise<\/h3>\r\n <p class=\"text-gray-400 mb-6 h-12\">The ultimate CSS extraction toolkit for entire design teams.<\/p>\r\n <div class=\"mb-8 flex items-baseline\">\r\n <span class=\"text-6xl font-black tracking-tighter text-white price-amount\" data-monthly=\"14.99\"\r\n data-annually=\"11.99\">$14.99<\/span>\r\n <span class=\"text-gray-500 font-medium ml-2 billing-period-suffix\">\/month<\/span>\r\n <\/div>\r\n\r\n \r\n <a id=\"btn-tier-enterprise\" href=\"#YOUR_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\"\r\n class=\"w-full py-4 rounded-xl border border-[#8b5cf6]\/50 bg-[#8b5cf6]\/10 text-white font-bold hover:bg-[#8b5cf6]\/20 transition text-center mb-10 relative z-10\">\r\n Scale Your Team\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Everything in Premium, plus:<\/p>\r\n <ul class=\"space-y-4 text-gray-300\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Up to 15 Active Devices<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Unlimited Scans<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Bulk Asset Export<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Priority Enterprise Support<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Full Website PDF Report (V2.0)<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const toggle = document.getElementById(\"billing-toggle\");\r\n const toggleKnob = document.getElementById(\"billing-toggle-knob\");\r\n const prices = document.querySelectorAll(\".price-amount\");\r\n const suffixes = document.querySelectorAll(\".billing-period-suffix\");\r\n const labelMonthly = document.querySelector(\".pricing-label-monthly\");\r\n const labelAnnually = document.querySelector(\".pricing-label-annually\");\r\n let isAnnual = false;\r\n\r\n toggle.addEventListener(\"click\", () => {\r\n isAnnual = !isAnnual;\r\n\r\n \/\/ Update styling of the toggle switch\r\n if (isAnnual) {\r\n toggle.classList.remove(\"bg-blue-600\", \"shadow-[0_0_15px_rgba(37,99,235,0.3)]\");\r\n toggle.classList.add(\"bg-emerald-500\", \"shadow-[0_0_15px_rgba(16,185,129,0.3)]\");\r\n toggleKnob.classList.replace(\"translate-x-1\", \"translate-x-9\");\r\n\r\n labelMonthly.classList.replace(\"text-white\", \"text-gray-400\");\r\n labelAnnually.classList.replace(\"text-gray-400\", \"text-white\");\r\n } else {\r\n toggle.classList.remove(\"bg-emerald-500\", \"shadow-[0_0_15px_rgba(16,185,129,0.3)]\");\r\n toggle.classList.add(\"bg-blue-600\", \"shadow-[0_0_15px_rgba(37,99,235,0.3)]\");\r\n toggleKnob.classList.replace(\"translate-x-9\", \"translate-x-1\");\r\n\r\n labelAnnually.classList.replace(\"text-white\", \"text-gray-400\");\r\n labelMonthly.classList.replace(\"text-gray-400\", \"text-white\");\r\n }\r\n\r\n const btnPremium = document.getElementById(\"btn-tier-premium\");\r\n const btnEnterprise = document.getElementById(\"btn-tier-enterprise\");\r\n if (isAnnual) {\r\n btnPremium.setAttribute('href', \"#YOUR_ANNUAL_PREMIUM_STRIPE_LINK_HERE?client_reference_id=premium\");\r\n btnEnterprise.setAttribute('href', \"#YOUR_ANNUAL_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\");\r\n } else {\r\n btnPremium.setAttribute('href', \"https:\/\/buy.stripe.com\/6oUcN60yYf36gNi1QKfAc03?client_reference_id=premium\");\r\n btnEnterprise.setAttribute('href', \"#YOUR_MONTHLY_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\");\r\n }\r\n\r\n \/\/ Update prices with smooth fade animation\r\n prices.forEach((price) => {\r\n price.style.transition = \"opacity 0.2s ease\";\r\n price.style.opacity = 0;\r\n\r\n setTimeout(() => {\r\n price.textContent = '$' + (isAnnual ? price.getAttribute('data-annually') : price.getAttribute('data-monthly'));\r\n price.style.opacity = 1;\r\n }, 200);\r\n });\r\n\r\n \/\/ Update \/month text to \/month (billed annually)\r\n suffixes.forEach((suffix) => {\r\n suffix.style.transition = \"opacity 0.2s ease\";\r\n suffix.style.opacity = 0;\r\n\r\n setTimeout(() => {\r\n suffix.textContent = isAnnual ? '\/mo (billed annually)' : '\/month';\r\n suffix.style.opacity = 1;\r\n }, 200);\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n \r\n <section class=\"py-32 px-6 max-w-4xl mx-auto border-t border-white\/5\">\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"text-4xl font-bold mb-4\">Frequently Asked Questions<\/h2>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq1\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq1\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Does CSS Tracker work with Tailwind CSS or Webflow?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n Yes! CSS Tracker inspects the browser's native computed DOM. This means it extracts the final, active CSS\r\n properties effortlessly\u2014regardless of whether the website was built using Tailwind, Bootstrap, React, Vue, or\r\n Webflow.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq2\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq2\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Is my browsing data safe and private?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n Absolutely 100%. CSS Tracker only runs locally on the specific tab you actively choose to inspect. We abide by\r\n strict Chrome Web Store privacy practices. We do not track, store, or sell your browsing history. Period.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq3\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq3\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Can I use my subscription on multiple computers?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n It depends on your active plan. The Developer (Free) plan limits you to 1 active device. The Agency (Premium)\r\n plan allows for multiple concurrent device sessions so you can work seamlessly from your desktop and laptop.\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"pt-32 pb-12 text-center relative overflow-hidden bg-[#0A0A12] border-t border-white\/5\">\r\n <div class=\"absolute inset-0 bg-blue-600\/5\"><\/div>\r\n <div class=\"relative z-10 max-w-4xl mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-6xl font-extrabold mb-8 tracking-tight\">Ready to level up your <br>web design\r\n workflow?<\/h2>\r\n\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\"\r\n class=\"inline-block bg-white text-black px-10 py-5 rounded-full text-lg font-bold hover:bg-gray-200 transition-all mb-24 hover:scale-105 duration-300\">\r\n Add CSS Tracker to Chrome\r\n <\/a>\r\n\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8 text-left mb-16 border-b border-white\/10 pb-16\">\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Product<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"#features\" class=\"hover:text-blue-400\">Features<\/a><\/li>\r\n <li><a href=\"#how-it-works\" class=\"hover:text-blue-400\">How it Works<\/a><\/li>\r\n <li><a href=\"#pricing\" class=\"hover:text-blue-400\">Pricing<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Download<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Support<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"https:\/\/sis.startbigger.com\/\" class=\"hover:text-blue-400\">Client Area<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Help Center<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Contact Us<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Legal<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"https:\/\/startbigger.com\/home\/css-tracker\/terms-of-service-for-css-tracker\/\"\r\n class=\"hover:text-blue-400\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"https:\/\/startbigger.com\/home\/css-tracker\/terms-of-service-for-css-tracker\/\"\r\n class=\"hover:text-blue-400\">Terms of Service<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-gray-600 text-sm flex flex-col md:flex-row justify-between items-center\">\r\n <div>\u00a9 2026 CSS Tracker by StartBigger. All rights reserved.<\/div>\r\n <div class=\"flex gap-4 mt-4 md:mt-0 text-gray-500\">\r\n Made with <span class=\"text-red-500\">\u2665<\/span> for Web Developers\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSS Tracker – Inspect & Extract CSS Instantly CSS Tracker Features How it Works Use Cases Pricing Add to Chrome Free V2.0 is live! Featuring the new Design System Inspector. Stop inspecting. Start extracting. The ultimate Chrome extension for Web Designers and Frontend Developers. Hover over any element to steal its complete Color Palette, Typography […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7556","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/comments?post=7556"}],"version-history":[{"count":43,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556\/revisions"}],"predecessor-version":[{"id":7672,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556\/revisions\/7672"}],"wp:attachment":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/media?parent=7556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n CSS Tracker - Inspect & Extract CSS Instantly<\/title>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\r\n rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Base Styles *\/\r\n body,\r\n html {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #030305;\r\n color: #ffffff;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Typography Gradients *\/\r\n .text-gradient {\r\n background: linear-gradient(135deg, #60A5FA 0%, #C084FC 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .text-gradient-sub {\r\n background: linear-gradient(135deg, #E2E8F0 0%, #94A3B8 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n \/* Glassmorphism Cards *\/\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.02);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.05);\r\n border-radius: 24px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .glass-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n border-radius: 24px;\r\n padding: 2px;\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n pointer-events: none;\r\n }\r\n\r\n .glass-card:hover {\r\n transform: translateY(-8px);\r\n background: rgba(255, 255, 255, 0.04);\r\n box-shadow: 0 20px 40px -20px rgba(59, 130, 246, 0.15);\r\n }\r\n\r\n .glass-card:hover::before {\r\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(167, 139, 250, 0.2));\r\n }\r\n\r\n \/* Interactive Buttons *\/\r\n .glow-btn {\r\n position: relative;\r\n box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .glow-btn:hover {\r\n box-shadow: 0 0 25px 0 rgba(59, 130, 246, 0.6);\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Ambient Background Glows *\/\r\n .ambient-glow {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(140px);\r\n z-index: -1;\r\n opacity: 0.5;\r\n }\r\n\r\n \/* Custom Scrollbar *\/\r\n ::-webkit-scrollbar {\r\n width: 10px;\r\n }\r\n\r\n ::-webkit-scrollbar-track {\r\n background: #030305;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #334155;\r\n border-radius: 5px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: #475569;\r\n }\r\n\r\n \/* Accordion FAQ *\/\r\n .faq-answer {\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-out, padding 0.3s ease;\r\n }\r\n\r\n .faq-checkbox:checked~.faq-answer {\r\n max-height: 200px;\r\n padding-top: 1rem;\r\n padding-bottom: 1rem;\r\n }\r\n\r\n .faq-checkbox:checked~.faq-label svg {\r\n transform: rotate(180deg);\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body class=\"antialiased selection:bg-blue-500\/30 selection:text-white relative\">\r\n\r\n \r\n <div\r\n class=\"ambient-glow bg-blue-600\/20 w-[600px] h-[600px] top-0 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 pointer-events-none\">\r\n <\/div>\r\n <div class=\"ambient-glow bg-purple-600\/10 w-[800px] h-[800px] top-[40%] right-[-20%] pointer-events-none\"><\/div>\r\n <div class=\"ambient-glow bg-blue-600\/10 w-[700px] h-[700px] bottom-0 left-[-10%] pointer-events-none\"><\/div>\r\n\r\n \r\n <nav class=\"fixed w-full z-50 top-0 border-b border-white\/5 bg-[#030305]\/70 backdrop-blur-xl\">\r\n <div class=\"max-w-7xl mx-auto px-6 h-20 flex items-center justify-between\">\r\n <div class=\"flex items-center gap-3 cursor-pointer\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/Css-Tracker-Favicon-bg.png\"\r\n alt=\"CSS Tracker Logo\" class=\"w-10 h-10 rounded-xl shadow-lg shadow-blue-500\/20 object-cover\">\r\n <span class=\"text-xl font-bold tracking-tight text-white\">CSS Tracker<\/span>\r\n <\/div>\r\n <div class=\"hidden md:flex gap-10 text-sm font-medium text-gray-400\">\r\n <a href=\"#features\" class=\"hover:text-white transition-colors\">Features<\/a>\r\n <a href=\"#how-it-works\" class=\"hover:text-white transition-colors\">How it Works<\/a>\r\n <a href=\"#use-cases\" class=\"hover:text-white transition-colors\">Use Cases<\/a>\r\n <a href=\"#pricing\" class=\"hover:text-white transition-colors\">Pricing<\/a>\r\n <\/div>\r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\" target=\"_blank\"\r\n class=\"bg-white text-black px-6 py-2.5 rounded-full text-sm font-semibold hover:bg-gray-200 transition-all glow-btn flex items-center gap-2\">\r\n Add to Chrome\r\n <span class=\"text-xs bg-black\/10 px-2 py-0.5 rounded-full ml-1 font-bold\">Free<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <section class=\"pt-48 pb-20 px-6 text-center relative z-10 max-w-5xl mx-auto\">\r\n \r\n <div\r\n class=\"inline-flex items-center gap-2 px-4 py-2 rounded-full border border-blue-500\/30 bg-blue-500\/5 text-sm font-medium text-blue-300 mb-10 shadow-[0_0_15px_rgba(59,130,246,0.1)]\">\r\n <span class=\"relative flex h-2.5 w-2.5\">\r\n <span class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75\"><\/span>\r\n <span class=\"relative inline-flex rounded-full h-2.5 w-2.5 bg-blue-500\"><\/span>\r\n <\/span>\r\n V2.0 is live! Featuring the new Design System Inspector.\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-5xl md:text-7xl lg:text-[5rem] font-extrabold tracking-tight mb-8 leading-[1.1]\">\r\n Stop inspecting. <br class=\"hidden md:block\">\r\n <span class=\"text-gradient\">Start extracting.<\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"text-lg md:text-2xl text-gradient-sub max-w-3xl mx-auto mb-12 leading-relaxed\">\r\n The ultimate Chrome extension for Web Designers and Frontend Developers. Hover over any element to steal its\r\n complete Color Palette, Typography rules, and Computed CSS in one click.\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row justify-center items-center gap-4 mb-20\">\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\"\r\n class=\"w-full sm:w-auto bg-blue-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-blue-500 transition-all glow-btn flex items-center justify-center gap-3\">\r\n <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M12 0C8.74 0 8.333.015 7.053.072 2.695.116.174 2.562.127 7.01.07 8.29.057 8.712.057 12c0 3.287.015 3.708.072 4.988.047 4.453 2.52 6.891 6.884 6.94 1.28.057 1.706.072 4.987.072 3.288 0 3.709-.015 4.989-.072 4.364-.049 6.837-2.487 6.884-6.94.057-1.28.072-1.701.072-4.988 0-3.288-.015-3.71-.072-4.989-.047-4.453-2.52-6.891-6.884-6.94C15.71.015 15.288 0 12 0zm0 2.16c3.23 0 3.614.012 4.887.07 3.243.048 4.646 1.455 4.694 4.695.058 1.273.07 1.657.07 4.887s-.012 3.614-.07 4.887c-.048 3.241-1.45 4.647-4.694 4.695-1.273.058-1.657.07-4.887.07-3.23 0-3.614-.012-4.887-.07-3.243-.048-4.646-1.454-4.694-4.695-.058-1.273-.07-1.657-.07-4.887s.012-3.614.07-4.887c.048-3.24 1.45-4.647 4.694-4.695 1.273-.058 1.657-.07 4.887-.07zM7.759 12.005a4.24 4.24 0 108.48 0 4.24 4.24 0 00-8.48 0zm6.32 0a2.08 2.08 0 11-4.16 0 2.08 2.08 0 014.16 0zm3.328-4.823a1.416 1.416 0 100 2.832 1.416 1.416 0 000-2.832z\" \/>\r\n <\/svg>\r\n Add to Chrome \u2014 It's Free\r\n <\/a>\r\n <p class=\"text-sm text-gray-500 mt-4 sm:hidden\">No credit card required. Install in 2 seconds.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"relative mx-auto rounded-xl border border-white\/10 bg-[#0d0d12] shadow-2xl overflow-hidden aspect-video flex items-center justify-center group\">\r\n \r\n <div\r\n class=\"absolute top-0 left-0 right-0 h-8 bg-black\/40 border-b border-white\/5 flex items-center px-4 gap-2 z-20\">\r\n <div class=\"w-3 h-3 rounded-full bg-red-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-yellow-500\/80\"><\/div>\r\n <div class=\"w-3 h-3 rounded-full bg-green-500\/80\"><\/div>\r\n <div class=\"mx-auto h-4 w-1\/3 bg-white\/5 rounded\"><\/div>\r\n <\/div>\r\n\r\n \r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/css_tracker_hero_mockup_lp-images.jpg\"\r\n alt=\"CSS Tracker Dashboard Interface\"\r\n class=\"w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity group-hover:scale-[1.02] duration-500 mt-2\">\r\n\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-t from-[#030305] via-transparent to-transparent pointer-events-none z-10\">\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-10 border-y border-white\/5 bg-white\/[0.01]\">\r\n <div class=\"max-w-7xl mx-auto px-6 text-center\">\r\n <p class=\"text-sm font-medium text-gray-500 uppercase tracking-widest mb-8\">Works flawlessly with all modern\r\n frameworks<\/p>\r\n <div\r\n class=\"flex flex-wrap justify-center items-center gap-12 sm:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-500\">\r\n \r\n <span class=\"text-2xl font-bold font-mono\">TailwindCSS<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">React<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">Vue.js<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">WordPress<\/span>\r\n <span class=\"text-2xl font-bold font-mono\">Webflow<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"features\" class=\"py-32 px-6 max-w-7xl mx-auto relative z-10\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6 tracking-tight\">Everything you need. <br>Nothing you don't.<\/h2>\r\n <p class=\"text-xl text-gray-400 max-w-2xl mx-auto\">Chrome DevTools is incredibly powerful. But for visual design\r\n inspection? It's overkill. CSS Tracker is built specifically for design extraction.<\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-500\/20 to-blue-600\/10 border border-blue-500\/20 flex items-center justify-center text-blue-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83c\udfa8<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Instant Color Palettes<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Automatically groups all background, text, borders, and\r\n input colors from the active page. Grab hex, RGB, or HSL codes with a single click and build your mood board\r\n instantly.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full pt-4 overflow-hidden rounded-xl border border-white\/5 group-hover:border-blue-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-1-1.png\"\r\n alt=\"Color Palette Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-purple-500\/20 to-purple-600\/10 border border-purple-500\/20 flex items-center justify-center text-purple-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n Aa<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Typography Extractor<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Discover exact font families, sizes, weights, and\r\n line-heights powering beautiful headings and body text.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-purple-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-2.png\"\r\n alt=\"Typography Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-emerald-500\/20 to-emerald-600\/10 border border-emerald-500\/20 flex items-center justify-center text-emerald-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\udcd0<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Box Model Inspector<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Hover over any element to visualize margins, padding, and\r\n borders. No more guessing spacing units.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-emerald-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-3.png\"\r\n alt=\"Box Model Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-500\/20 to-orange-600\/10 border border-orange-500\/20 flex items-center justify-center text-orange-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\udc41\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">WCAG Contrast Scanner & Copy CSS<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Ensure your designs meet global accessibility standards\r\n and copy production-ready CSS code directly to your clipboard.<\/p>\r\n\r\n \r\n <div\r\n class=\"mt-auto w-full overflow-hidden rounded-xl border border-white\/5 group-hover:border-orange-500\/20 transition-colors\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-4.png\"\r\n alt=\"WCAG Contrast & Copy\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start lg:col-span-2 group border-t border-indigo-500\/10\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-indigo-500\/20 to-indigo-600\/10 border border-indigo-500\/20 flex items-center justify-center text-indigo-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \u26a1<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Design System & Shadow DOM<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Pierces through Web Components to extract hidden CSS\r\n Variables, Animations, and Font variations, transforming raw code into beautifully categorized Design Tokens.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col items-start group lg:col-span-1 border-t border-cyan-500\/10\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-cyan-500\/20 to-cyan-600\/10 border border-cyan-500\/20 flex items-center justify-center text-cyan-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \u2601\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">History & Analytics<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Never lose a scanned site. Automatically save favorites,\r\n browse your history, and track usage via a built-in interactive dashboard.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"glass-card p-10 flex flex-col lg:flex-row items-center gap-10 lg:col-span-3 group bg-gradient-to-r from-transparent to-white\/[0.01]\">\r\n <div class=\"w-full lg:w-1\/2\">\r\n <div\r\n class=\"w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500\/20 to-pink-600\/10 border border-pink-500\/20 flex items-center justify-center text-pink-400 text-3xl mb-8 group-hover:scale-110 transition-transform\">\r\n \ud83d\uddbc\ufe0f<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Advanced Asset & SVG Export<\/h3>\r\n <p class=\"text-gray-400 text-lg leading-relaxed mb-6\">Skip the network tab. CSS Tracker auto-detects\r\n background images, inline SVGs, and hidden assets, allowing you to bulk download them instantly in perfect\r\n resolution.<\/p>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"w-full lg:w-1\/2 overflow-hidden rounded-xl border border-white\/10 group-hover:border-pink-500\/30 transition-colors shadow-2xl\">\r\n <img decoding=\"async\" src=\"https:\/\/startbigger.com\/home\/wp-content\/uploads\/2026\/03\/CSS-Tracker-screenshot-5.png\"\r\n alt=\"Asset Export Feature\"\r\n class=\"w-full h-auto object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"how-it-works\" class=\"py-32 border-y border-white\/5 bg-[#050508]\">\r\n <div class=\"max-w-7xl mx-auto px-6\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">From inspiration to implementation <br>in 3 seconds.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-12 relative\">\r\n \r\n <div\r\n class=\"hidden md:block absolute top-[40px] left-[10%] right-[10%] h-[2px] bg-gradient-to-r from-blue-600\/0 via-blue-600\/30 to-blue-600\/0 z-0\">\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-gray-800 flex items-center justify-center text-2xl font-black text-white shadow-xl shadow-black mb-8\">\r\n 1<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4\">Install<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Download CSS Tracker from the Chrome Web Store and pin it to your\r\n browser for quick access.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-blue-500\/40 shadow-[0_0_30px_rgba(59,130,246,0.2)] flex items-center justify-center text-2xl font-black text-blue-400 mb-8\">\r\n 2<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4 text-white\">Hover & Inspect<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Turn on Inspection Mode. Point your mouse at any element and watch\r\n its raw properties appear instantly.<\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"relative z-10 flex flex-col items-center text-center\">\r\n <div\r\n class=\"w-20 h-20 rounded-full bg-[#0a0a0f] border border-gray-800 flex items-center justify-center text-2xl font-black text-white shadow-xl shadow-black mb-8\">\r\n 3<\/div>\r\n <h3 class=\"text-2xl font-bold mb-4\">Copy & Paste<\/h3>\r\n <p class=\"text-gray-400 leading-relaxed\">Click \"Copy All CSS\" and paste production-ready computed code\r\n directly into your code editor.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"use-cases\" class=\"py-32 px-6 max-w-7xl mx-auto\">\r\n <div class=\"text-center mb-20\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">Built for the modern web workflow.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-blue-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\">\r\n <\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Web Designers<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Analyze the competition. Found a UI that converts perfectly?\r\n Extract its spacing, typography rules, and exact color palette to build your own mood board in seconds.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-purple-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"><\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Frontend Developers<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Stop writing CSS from scratch. Select elements and copy their\r\n computed CSS properties directly into your project or Tailwind configuration file seamlessly.<\/p>\r\n <\/div>\r\n\r\n <div class=\"p-8 border border-white\/5 rounded-3xl hover:bg-white\/5 transition-colors\">\r\n <div class=\"text-emerald-400 mb-6\"><svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\">\r\n <\/path>\r\n <\/svg><\/div>\r\n <h3 class=\"text-xl font-bold mb-4\">Marketing Agencies<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-loose\">Perform rapid UX\/UI audits. Deliver beautiful technical design\r\n reports to your clients without needing deep technical coding knowledge or viewing raw HTML.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"pricing\" class=\"py-32 px-6 max-w-7xl mx-auto border-t border-white\/5\">\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"text-4xl md:text-5xl font-bold mb-6\">Simple pricing. Professional power.<\/h2>\r\n <p class=\"text-xl text-gray-400 mb-10\">Manage your subscription easily. Upgrade, downgrade, or cancel anytime.<\/p>\r\n\r\n \r\n <div class=\"flex items-center justify-center gap-4 mb-10\">\r\n <span class=\"text-white font-medium pricing-label-monthly\">Monthly<\/span>\r\n <button id=\"billing-toggle\"\r\n class=\"relative inline-flex h-8 w-16 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-[#030305] shadow-[0_0_15px_rgba(37,99,235,0.3)]\">\r\n <span class=\"sr-only\">Toggle billing period<\/span>\r\n <span id=\"billing-toggle-knob\"\r\n class=\"inline-block h-6 w-6 translate-x-1 rounded-full bg-white transition-transform\"><\/span>\r\n <\/button>\r\n <span class=\"text-gray-400 font-medium pricing-label-annually flex items-center gap-2 transition-colors\">\r\n Annually\r\n <span\r\n class=\"bg-emerald-500\/20 text-emerald-400 text-xs font-bold px-2 py-1 rounded-full border border-emerald-500\/30 shadow-[0_0_10px_rgba(16,185,129,0.2)]\">Save\r\n 20%<\/span>\r\n <\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-6xl mx-auto\">\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col border border-gray-800 relative group hover:border-[#64748b]\">\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-b from-[#64748b]\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-2xl\">\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-white mb-2\">Developer Plan<\/h3>\r\n <p class=\"text-gray-400 mb-6 h-12\">Perfect for individuals needing quick inspections.<\/p>\r\n <div class=\"mb-8 flex items-baseline\"><span\r\n class=\"text-6xl font-black tracking-tighter text-white\">$0<\/span><span\r\n class=\"text-gray-500 font-medium ml-2\">\/month<\/span><\/div>\r\n\r\n \r\n <a id=\"btn-tier-free\" href=\"https:\/\/buy.stripe.com\/eVq4gAftS7AE68E8f8fAc04?client_reference_id=free\"\r\n class=\"w-full py-4 rounded-xl border border-gray-600 text-white font-bold hover:bg-gray-800 transition text-center mb-10 relative z-10\">\r\n Start for Free\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Included:<\/p>\r\n <ul class=\"space-y-4 text-gray-300\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 100 Scans per month<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Basic Box Model Inspector<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Color & Font Extraction<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-gray-500 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 1 Active Device Limit<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div\r\n class=\"glass-card p-10 flex flex-col border-[#2563eb]\/50 bg-[#2563eb]\/10 relative overflow-hidden transform lg:-translate-y-4 shadow-[0_0_40px_rgba(37,99,235,0.15)]\">\r\n \r\n <div\r\n class=\"absolute top-0 inset-x-0 bg-gradient-to-r from-blue-600 to-blue-500 text-center py-1.5 text-xs font-bold tracking-widest text-white shadow-lg uppercase\">\r\n Most Popular\r\n <\/div>\r\n\r\n <h3 class=\"text-2xl font-bold text-blue-400 mb-2 mt-4\">Agency Premium<\/h3>\r\n <p class=\"text-blue-200\/60 mb-6 h-12\">Unlimited power for professional designers and agencies.<\/p>\r\n <div class=\"mb-8 flex items-baseline\">\r\n <span class=\"text-6xl font-black tracking-tighter text-white price-amount\" data-monthly=\"4.99\"\r\n data-annually=\"3.99\">$4.99<\/span>\r\n <span class=\"text-blue-200\/50 font-medium ml-2 billing-period-suffix\">\/month<\/span>\r\n <\/div>\r\n\r\n \r\n <a id=\"btn-tier-premium\" href=\"https:\/\/buy.stripe.com\/6oUcN60yYf36gNi1QKfAc03?client_reference_id=premium\"\r\n class=\"w-full py-4 rounded-xl bg-blue-600 text-white font-bold hover:bg-blue-500 transition text-center mb-10 glow-btn relative z-10 shadow-[0_0_20px_rgba(37,99,235,0.4)]\">\r\n Get Premium\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Everything in Free, plus:<\/p>\r\n <ul class=\"space-y-4 text-white font-medium\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Unlimited Daily Scans (Cloud History)<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> 5 Active Devices<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Export Raw JSON & CSS Variables<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Design Tokens & Animations Tracker<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-blue-400 shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Save Favorite Sites Dashboard<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass-card p-10 flex flex-col border border-gray-800 relative group hover:border-[#8b5cf6]\">\r\n \r\n <div\r\n class=\"absolute inset-0 bg-gradient-to-b from-[#8b5cf6]\/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none rounded-2xl\">\r\n <\/div>\r\n <h3 class=\"text-2xl font-bold text-[#a78bfa] mb-2\">Team Enterprise<\/h3>\r\n <p class=\"text-gray-400 mb-6 h-12\">The ultimate CSS extraction toolkit for entire design teams.<\/p>\r\n <div class=\"mb-8 flex items-baseline\">\r\n <span class=\"text-6xl font-black tracking-tighter text-white price-amount\" data-monthly=\"14.99\"\r\n data-annually=\"11.99\">$14.99<\/span>\r\n <span class=\"text-gray-500 font-medium ml-2 billing-period-suffix\">\/month<\/span>\r\n <\/div>\r\n\r\n \r\n <a id=\"btn-tier-enterprise\" href=\"#YOUR_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\"\r\n class=\"w-full py-4 rounded-xl border border-[#8b5cf6]\/50 bg-[#8b5cf6]\/10 text-white font-bold hover:bg-[#8b5cf6]\/20 transition text-center mb-10 relative z-10\">\r\n Scale Your Team\r\n <\/a>\r\n\r\n <p class=\"text-sm font-bold text-white mb-6 uppercase tracking-wider\">Everything in Premium, plus:<\/p>\r\n <ul class=\"space-y-4 text-gray-300\">\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Up to 15 Active Devices<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Unlimited Scans<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Bulk Asset Export<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Priority Enterprise Support<\/li>\r\n <li class=\"flex items-start gap-3\"><svg class=\"w-5 h-5 text-[#8b5cf6] shrink-0 mt-0.5\" fill=\"none\"\r\n stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path>\r\n <\/svg> Full Website PDF Report (V2.0)<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n document.addEventListener(\"DOMContentLoaded\", () => {\r\n const toggle = document.getElementById(\"billing-toggle\");\r\n const toggleKnob = document.getElementById(\"billing-toggle-knob\");\r\n const prices = document.querySelectorAll(\".price-amount\");\r\n const suffixes = document.querySelectorAll(\".billing-period-suffix\");\r\n const labelMonthly = document.querySelector(\".pricing-label-monthly\");\r\n const labelAnnually = document.querySelector(\".pricing-label-annually\");\r\n let isAnnual = false;\r\n\r\n toggle.addEventListener(\"click\", () => {\r\n isAnnual = !isAnnual;\r\n\r\n \/\/ Update styling of the toggle switch\r\n if (isAnnual) {\r\n toggle.classList.remove(\"bg-blue-600\", \"shadow-[0_0_15px_rgba(37,99,235,0.3)]\");\r\n toggle.classList.add(\"bg-emerald-500\", \"shadow-[0_0_15px_rgba(16,185,129,0.3)]\");\r\n toggleKnob.classList.replace(\"translate-x-1\", \"translate-x-9\");\r\n\r\n labelMonthly.classList.replace(\"text-white\", \"text-gray-400\");\r\n labelAnnually.classList.replace(\"text-gray-400\", \"text-white\");\r\n } else {\r\n toggle.classList.remove(\"bg-emerald-500\", \"shadow-[0_0_15px_rgba(16,185,129,0.3)]\");\r\n toggle.classList.add(\"bg-blue-600\", \"shadow-[0_0_15px_rgba(37,99,235,0.3)]\");\r\n toggleKnob.classList.replace(\"translate-x-9\", \"translate-x-1\");\r\n\r\n labelAnnually.classList.replace(\"text-white\", \"text-gray-400\");\r\n labelMonthly.classList.replace(\"text-gray-400\", \"text-white\");\r\n }\r\n\r\n const btnPremium = document.getElementById(\"btn-tier-premium\");\r\n const btnEnterprise = document.getElementById(\"btn-tier-enterprise\");\r\n if (isAnnual) {\r\n btnPremium.setAttribute('href', \"#YOUR_ANNUAL_PREMIUM_STRIPE_LINK_HERE?client_reference_id=premium\");\r\n btnEnterprise.setAttribute('href', \"#YOUR_ANNUAL_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\");\r\n } else {\r\n btnPremium.setAttribute('href', \"https:\/\/buy.stripe.com\/6oUcN60yYf36gNi1QKfAc03?client_reference_id=premium\");\r\n btnEnterprise.setAttribute('href', \"#YOUR_MONTHLY_ENTERPRISE_STRIPE_LINK_HERE?client_reference_id=enterprise\");\r\n }\r\n\r\n \/\/ Update prices with smooth fade animation\r\n prices.forEach((price) => {\r\n price.style.transition = \"opacity 0.2s ease\";\r\n price.style.opacity = 0;\r\n\r\n setTimeout(() => {\r\n price.textContent = '$' + (isAnnual ? price.getAttribute('data-annually') : price.getAttribute('data-monthly'));\r\n price.style.opacity = 1;\r\n }, 200);\r\n });\r\n\r\n \/\/ Update \/month text to \/month (billed annually)\r\n suffixes.forEach((suffix) => {\r\n suffix.style.transition = \"opacity 0.2s ease\";\r\n suffix.style.opacity = 0;\r\n\r\n setTimeout(() => {\r\n suffix.textContent = isAnnual ? '\/mo (billed annually)' : '\/month';\r\n suffix.style.opacity = 1;\r\n }, 200);\r\n });\r\n });\r\n });\r\n <\/script>\r\n\r\n \r\n <section class=\"py-32 px-6 max-w-4xl mx-auto border-t border-white\/5\">\r\n <div class=\"text-center mb-16\">\r\n <h2 class=\"text-4xl font-bold mb-4\">Frequently Asked Questions<\/h2>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq1\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq1\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Does CSS Tracker work with Tailwind CSS or Webflow?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n Yes! CSS Tracker inspects the browser's native computed DOM. This means it extracts the final, active CSS\r\n properties effortlessly\u2014regardless of whether the website was built using Tailwind, Bootstrap, React, Vue, or\r\n Webflow.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq2\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq2\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Is my browsing data safe and private?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n Absolutely 100%. CSS Tracker only runs locally on the specific tab you actively choose to inspect. We abide by\r\n strict Chrome Web Store privacy practices. We do not track, store, or sell your browsing history. Period.\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"border-b border-white\/10 relative\">\r\n <input type=\"checkbox\" id=\"faq3\" class=\"faq-checkbox absolute opacity-0 w-full h-16 cursor-pointer z-10\">\r\n <label for=\"faq3\"\r\n class=\"faq-label flex justify-between items-center w-full py-6 text-xl font-medium cursor-pointer text-white\">\r\n Can I use my subscription on multiple computers?\r\n <svg class=\"w-6 h-6 transition-transform duration-300 text-gray-400\" fill=\"none\" stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"><\/path>\r\n <\/svg>\r\n <\/label>\r\n <div class=\"faq-answer text-gray-400 leading-relaxed text-lg\">\r\n It depends on your active plan. The Developer (Free) plan limits you to 1 active device. The Agency (Premium)\r\n plan allows for multiple concurrent device sessions so you can work seamlessly from your desktop and laptop.\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"pt-32 pb-12 text-center relative overflow-hidden bg-[#0A0A12] border-t border-white\/5\">\r\n <div class=\"absolute inset-0 bg-blue-600\/5\"><\/div>\r\n <div class=\"relative z-10 max-w-4xl mx-auto px-6\">\r\n <h2 class=\"text-4xl md:text-6xl font-extrabold mb-8 tracking-tight\">Ready to level up your <br>web design\r\n workflow?<\/h2>\r\n\r\n <a href=\"https:\/\/chromewebstore.google.com\/detail\/css-tracker\/jdjpgdekcdhdgendbcoiiccgkhahkmcn\"\r\n class=\"inline-block bg-white text-black px-10 py-5 rounded-full text-lg font-bold hover:bg-gray-200 transition-all mb-24 hover:scale-105 duration-300\">\r\n Add CSS Tracker to Chrome\r\n <\/a>\r\n\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8 text-left mb-16 border-b border-white\/10 pb-16\">\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Product<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"#features\" class=\"hover:text-blue-400\">Features<\/a><\/li>\r\n <li><a href=\"#how-it-works\" class=\"hover:text-blue-400\">How it Works<\/a><\/li>\r\n <li><a href=\"#pricing\" class=\"hover:text-blue-400\">Pricing<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Download<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Support<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"https:\/\/sis.startbigger.com\/\" class=\"hover:text-blue-400\">Client Area<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Help Center<\/a><\/li>\r\n <li><a href=\"#\" class=\"hover:text-blue-400\">Contact Us<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold text-white mb-4\">Legal<\/h4>\r\n <ul class=\"space-y-3 text-gray-500 text-sm\">\r\n <li><a href=\"https:\/\/startbigger.com\/home\/css-tracker\/terms-of-service-for-css-tracker\/\"\r\n class=\"hover:text-blue-400\">Privacy Policy<\/a><\/li>\r\n <li><a href=\"https:\/\/startbigger.com\/home\/css-tracker\/terms-of-service-for-css-tracker\/\"\r\n class=\"hover:text-blue-400\">Terms of Service<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"text-gray-600 text-sm flex flex-col md:flex-row justify-between items-center\">\r\n <div>\u00a9 2026 CSS Tracker by StartBigger. All rights reserved.<\/div>\r\n <div class=\"flex gap-4 mt-4 md:mt-0 text-gray-500\">\r\n Made with <span class=\"text-red-500\">\u2665<\/span> for Web Developers\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CSS Tracker – Inspect & Extract CSS Instantly CSS Tracker Features How it Works Use Cases Pricing Add to Chrome Free V2.0 is live! Featuring the new Design System Inspector. Stop inspecting. Start extracting. The ultimate Chrome extension for Web Designers and Frontend Developers. Hover over any element to steal its complete Color Palette, Typography […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-7556","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/comments?post=7556"}],"version-history":[{"count":43,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556\/revisions"}],"predecessor-version":[{"id":7672,"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/pages\/7556\/revisions\/7672"}],"wp:attachment":[{"href":"https:\/\/startbigger.com\/home\/wp-json\/wp\/v2\/media?parent=7556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}