37pxls \u2014 Progress in Small Pieces<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@700&family=Special+Elite&family=Bebas+Neue&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --black: #0D0D0D;\n --dark: #1F1F1F;\n --offwhite: #F2F2F2;\n --tan: #CFC6B8;\n --orange: #FF6A00;\n --slate: #48594D;\n }\n\n body {\n background: var(--black);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n font-family: 'Special Elite', monospace;\n }\n\n .hero {\n position: relative;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background: var(--black);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Noise grain overlay *\/\n .hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'\/%3E%3C\/svg%3E\");\n background-size: 200px 200px;\n opacity: 0.35;\n pointer-events: none;\n z-index: 1;\n }\n\n \/* Pixel grid subtle overlay *\/\n .pixel-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(242,242,242,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,242,242,0.03) 1px, transparent 1px);\n background-size: 37px 37px;\n pointer-events: none;\n z-index: 1;\n }\n\n \/* Orange accent corner bar *\/\n .corner-accent {\n position: absolute;\n top: 0;\n right: 0;\n width: 6px;\n height: 180px;\n background: var(--orange);\n z-index: 5;\n }\n\n \/* Top left small label *\/\n .top-label {\n position: absolute;\n top: 32px;\n left: 40px;\n font-family: 'Special Elite', monospace;\n font-size: 11px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.25);\n text-transform: uppercase;\n z-index: 10;\n animation: fadeIn 1.8s ease forwards;\n }\n\n \/* Top right label *\/\n .top-right-label {\n position: absolute;\n top: 32px;\n right: 40px;\n font-family: 'Special Elite', monospace;\n font-size: 11px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.25);\n text-transform: uppercase;\n z-index: 10;\n animation: fadeIn 2s ease forwards;\n }\n\n \/* Pixel art checkmark \/ broken pixel motif \u2014 decorative *\/\n .pixel-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n opacity: 0.04;\n }\n\n .pixel-mark svg {\n width: 600px;\n height: 600px;\n }\n\n \/* Main content *\/\n .content {\n position: relative;\n z-index: 10;\n text-align: left;\n padding: 0 60px;\n max-width: 1100px;\n width: 100%;\n animation: slideUp 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;\n }\n\n \/* Eyebrow *\/\n .eyebrow {\n font-family: 'Special Elite', monospace;\n font-size: 12px;\n letter-spacing: 0.35em;\n color: var(--orange);\n text-transform: uppercase;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n }\n\n .eyebrow::before {\n content: '';\n display: inline-block;\n width: 30px;\n height: 1px;\n background: var(--orange);\n flex-shrink: 0;\n }\n\n \/* MAIN HEADLINE \u2014 handwritten but not cursive *\/\n .headline {\n font-family: 'Caveat', cursive;\n font-weight: 700;\n font-size: clamp(72px, 10vw, 148px);\n line-height: 0.9;\n color: var(--offwhite);\n letter-spacing: -0.01em;\n margin-bottom: 40px;\n position: relative;\n }\n\n .headline .line-1 {\n display: block;\n color: var(--offwhite);\n }\n\n .headline .line-2 {\n display: block;\n color: var(--offwhite);\n }\n\n .headline .line-3 {\n display: block;\n color: var(--orange);\n position: relative;\n }\n\n \/* Underline swipe on \"pieces\" *\/\n .headline .line-3::after {\n content: '';\n position: absolute;\n bottom: 4px;\n left: 0;\n height: 3px;\n width: 100%;\n background: rgba(255,106,0,0.35);\n }\n\n \/* Divider line *\/\n .divider {\n width: 80px;\n height: 1px;\n background: rgba(242,242,242,0.15);\n margin-bottom: 28px;\n }\n\n \/* Sub tagline *\/\n .sub {\n font-family: 'Special Elite', monospace;\n font-size: 13px;\n letter-spacing: 0.22em;\n color: rgba(242,242,242,0.35);\n text-transform: uppercase;\n max-width: 420px;\n line-height: 2;\n }\n\n \/* Bottom left corner \u2014 brand lockup *\/\n .brand-lockup {\n position: absolute;\n bottom: 36px;\n left: 40px;\n z-index: 10;\n animation: fadeIn 2.4s ease forwards;\n }\n\n .brand-typewriter {\n font-family: 'Special Elite', monospace;\n font-size: 9px;\n letter-spacing: 0.32em;\n color: rgba(242,242,242,0.22);\n text-transform: uppercase;\n line-height: 2;\n display: block;\n }\n\n .brand-name {\n font-family: 'Special Elite', monospace;\n font-size: 13px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.55);\n text-transform: lowercase;\n display: block;\n margin-top: 4px;\n border-top: 1px solid rgba(242,242,242,0.1);\n padding-top: 8px;\n }\n\n .brand-url {\n font-family: 'Special Elite', monospace;\n font-size: 10px;\n letter-spacing: 0.22em;\n color: rgba(242,242,242,0.3);\n display: block;\n margin-top: 3px;\n }\n\n \/* Bottom right \u2014 pixel count *\/\n .bottom-right {\n position: absolute;\n bottom: 36px;\n right: 40px;\n z-index: 10;\n text-align: right;\n animation: fadeIn 2.6s ease forwards;\n }\n\n .coord {\n font-family: 'Special Elite', monospace;\n font-size: 10px;\n letter-spacing: 0.25em;\n color: rgba(242,242,242,0.18);\n display: block;\n line-height: 1.8;\n }\n\n \/* Orange pixel dot grid \u2014 decorative right side *\/\n .dot-grid {\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 3;\n opacity: 0.18;\n display: grid;\n grid-template-columns: repeat(5, 6px);\n grid-template-rows: repeat(7, 6px);\n gap: 8px;\n }\n\n .dot {\n width: 6px;\n height: 6px;\n background: var(--offwhite);\n }\n\n .dot.orange { background: var(--orange); }\n .dot.hidden { opacity: 0; }\n\n \/* Vertical rule *\/\n .v-rule {\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(242,242,242,0.03);\n z-index: 2;\n }\n\n \/* Horizontal rule *\/\n .h-rule {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background: rgba(242,242,242,0.03);\n z-index: 2;\n }\n\n \/* Scanning line effect *\/\n .scan-line {\n position: absolute;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(255,106,0,0.08), transparent);\n animation: scan 8s linear infinite;\n z-index: 4;\n pointer-events: none;\n }\n\n @keyframes scan {\n 0% { top: -2px; }\n 100% { top: 100vh; }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Vignette *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.65) 100%);\n pointer-events: none;\n z-index: 2;\n }\n\n \/* \"37\" large ghost number bg *\/\n .ghost-number {\n position: absolute;\n right: -20px;\n top: 50%;\n transform: translateY(-50%);\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(300px, 38vw, 580px);\n line-height: 1;\n color: rgba(242,242,242,0.025);\n letter-spacing: -0.05em;\n z-index: 2;\n user-select: none;\n pointer-events: none;\n }\n\n \/* Damaged pixel strip across the top *\/\n .pixel-strip {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n z-index: 20;\n display: flex;\n }\n\n .px {\n flex: 1;\n height: 100%;\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"hero\">\n\n \n <div class=\"v-rule\"><\/div>\n <div class=\"h-rule\"><\/div>\n\n \n <div class=\"pixel-grid\"><\/div>\n\n \n <div class=\"vignette\"><\/div>\n\n \n <div class=\"scan-line\"><\/div>\n\n \n <div class=\"corner-accent\"><\/div>\n\n \n <div class=\"pixel-strip\" id=\"pixelStrip\"><\/div>\n\n \n <div class=\"ghost-number\">37<\/div>\n\n \n <div class=\"dot-grid\" id=\"dotGrid\"><\/div>\n\n \n <div class=\"top-label\">Vision & Direction<\/div>\n <div class=\"top-right-label\">Est. 2024<\/div>\n\n \n <div class=\"content\">\n <div class=\"eyebrow\">A brand built one pixel at a time<\/div>\n\n <h1 class=\"headline\">\n <span class=\"line-1\">Progress<\/span>\n <span class=\"line-2\">in small<\/span>\n <span class=\"line-3\">pieces.<\/span>\n <\/h1>\n\n <div class=\"divider\"><\/div>\n\n <p class=\"sub\">Small details. Bigger picture.<br>Focus > Noise. Every pixel matters.<\/p>\n <\/div>\n\n \n <div class=\"brand-lockup\">\n <span class=\"brand-typewriter\">thirty‑seven‑pixels<\/span>\n <span class=\"brand-name\">37pxls<\/span>\n <span class=\"brand-url\">37pxls.com<\/span>\n <\/div>\n\n \n <div class=\"bottom-right\">\n <span class=\"coord\">40.7128\u00b0 N<\/span>\n <span class=\"coord\">74.0060\u00b0 W<\/span>\n <span class=\"coord\" style=\"margin-top:6px; color:rgba(255,106,0,0.3);\">■ ■ □ □ ■<\/span>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ Build pixel strip top\n const strip = document.getElementById('pixelStrip');\n const stripColors = ['#FF6A00','#1F1F1F','#0D0D0D','#CFC6B8','#48594D','#FF6A00','#0D0D0D'];\n for (let i = 0; i < 200; i++) {\n const px = document.createElement('div');\n px.className = 'px';\n const r = Math.random();\n if (r < 0.04) px.style.background = '#FF6A00';\n else if (r < 0.12) px.style.background = '#CFC6B8';\n else if (r < 0.18) px.style.background = '#48594D';\n else px.style.background = '#1F1F1F';\n strip.appendChild(px);\n }\n\n \/\/ Build dot grid\n const dotGrid = document.getElementById('dotGrid');\n const pattern = [\n 0,1,1,0,0,\n 0,1,1,0,0,\n 0,0,1,1,0,\n 0,0,1,1,0,\n 0,0,0,1,1,\n 0,0,0,1,1,\n 0,0,0,0,1,\n ];\n pattern.forEach((v, i) => {\n const d = document.createElement('div');\n d.className = 'dot' + (v === 0 ? ' hidden' : (i % 7 === 0 ? ' orange' : ''));\n dotGrid.appendChild(d);\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>37pxls \u2014 Progress in Small Pieces 37 Vision & Direction Est. 2024 A brand built one pixel at a time Progress in small pieces. Small details. Bigger picture.Focus > Noise. Every pixel matters. thirty‑seven‑pixels 37pxls 37pxls.com 40.7128\u00b0 N 74.0060\u00b0 W ■ ■ □ □ ■<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/37pxls.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43"}],"version-history":[{"count":3,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":43,"date":"2026-06-05T15:48:43","date_gmt":"2026-06-05T15:48:43","guid":{"rendered":"https:\/\/37pxls.com\/?page_id=43"},"modified":"2026-06-05T15:51:31","modified_gmt":"2026-06-05T15:51:31","slug":"thirty-seven-pixels","status":"publish","type":"page","link":"https:\/\/37pxls.com\/","title":{"rendered":"thirty-seven-pixels"},"content":{"rendered":"\n\n\n\n\n\n37pxls \u2014 Progress in Small Pieces<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@700&family=Special+Elite&family=Bebas+Neue&display=swap\" rel=\"stylesheet\">\n<style>\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --black: #0D0D0D;\n --dark: #1F1F1F;\n --offwhite: #F2F2F2;\n --tan: #CFC6B8;\n --orange: #FF6A00;\n --slate: #48594D;\n }\n\n body {\n background: var(--black);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n font-family: 'Special Elite', monospace;\n }\n\n .hero {\n position: relative;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n background: var(--black);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* Noise grain overlay *\/\n .hero::before {\n content: '';\n position: absolute;\n inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'\/%3E%3C\/svg%3E\");\n background-size: 200px 200px;\n opacity: 0.35;\n pointer-events: none;\n z-index: 1;\n }\n\n \/* Pixel grid subtle overlay *\/\n .pixel-grid {\n position: absolute;\n inset: 0;\n background-image:\n linear-gradient(rgba(242,242,242,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(242,242,242,0.03) 1px, transparent 1px);\n background-size: 37px 37px;\n pointer-events: none;\n z-index: 1;\n }\n\n \/* Orange accent corner bar *\/\n .corner-accent {\n position: absolute;\n top: 0;\n right: 0;\n width: 6px;\n height: 180px;\n background: var(--orange);\n z-index: 5;\n }\n\n \/* Top left small label *\/\n .top-label {\n position: absolute;\n top: 32px;\n left: 40px;\n font-family: 'Special Elite', monospace;\n font-size: 11px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.25);\n text-transform: uppercase;\n z-index: 10;\n animation: fadeIn 1.8s ease forwards;\n }\n\n \/* Top right label *\/\n .top-right-label {\n position: absolute;\n top: 32px;\n right: 40px;\n font-family: 'Special Elite', monospace;\n font-size: 11px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.25);\n text-transform: uppercase;\n z-index: 10;\n animation: fadeIn 2s ease forwards;\n }\n\n \/* Pixel art checkmark \/ broken pixel motif \u2014 decorative *\/\n .pixel-mark {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 2;\n opacity: 0.04;\n }\n\n .pixel-mark svg {\n width: 600px;\n height: 600px;\n }\n\n \/* Main content *\/\n .content {\n position: relative;\n z-index: 10;\n text-align: left;\n padding: 0 60px;\n max-width: 1100px;\n width: 100%;\n animation: slideUp 1s cubic-bezier(0.22,1,0.36,1) 0.3s both;\n }\n\n \/* Eyebrow *\/\n .eyebrow {\n font-family: 'Special Elite', monospace;\n font-size: 12px;\n letter-spacing: 0.35em;\n color: var(--orange);\n text-transform: uppercase;\n margin-bottom: 20px;\n display: flex;\n align-items: center;\n gap: 14px;\n }\n\n .eyebrow::before {\n content: '';\n display: inline-block;\n width: 30px;\n height: 1px;\n background: var(--orange);\n flex-shrink: 0;\n }\n\n \/* MAIN HEADLINE \u2014 handwritten but not cursive *\/\n .headline {\n font-family: 'Caveat', cursive;\n font-weight: 700;\n font-size: clamp(72px, 10vw, 148px);\n line-height: 0.9;\n color: var(--offwhite);\n letter-spacing: -0.01em;\n margin-bottom: 40px;\n position: relative;\n }\n\n .headline .line-1 {\n display: block;\n color: var(--offwhite);\n }\n\n .headline .line-2 {\n display: block;\n color: var(--offwhite);\n }\n\n .headline .line-3 {\n display: block;\n color: var(--orange);\n position: relative;\n }\n\n \/* Underline swipe on \"pieces\" *\/\n .headline .line-3::after {\n content: '';\n position: absolute;\n bottom: 4px;\n left: 0;\n height: 3px;\n width: 100%;\n background: rgba(255,106,0,0.35);\n }\n\n \/* Divider line *\/\n .divider {\n width: 80px;\n height: 1px;\n background: rgba(242,242,242,0.15);\n margin-bottom: 28px;\n }\n\n \/* Sub tagline *\/\n .sub {\n font-family: 'Special Elite', monospace;\n font-size: 13px;\n letter-spacing: 0.22em;\n color: rgba(242,242,242,0.35);\n text-transform: uppercase;\n max-width: 420px;\n line-height: 2;\n }\n\n \/* Bottom left corner \u2014 brand lockup *\/\n .brand-lockup {\n position: absolute;\n bottom: 36px;\n left: 40px;\n z-index: 10;\n animation: fadeIn 2.4s ease forwards;\n }\n\n .brand-typewriter {\n font-family: 'Special Elite', monospace;\n font-size: 9px;\n letter-spacing: 0.32em;\n color: rgba(242,242,242,0.22);\n text-transform: uppercase;\n line-height: 2;\n display: block;\n }\n\n .brand-name {\n font-family: 'Special Elite', monospace;\n font-size: 13px;\n letter-spacing: 0.28em;\n color: rgba(242,242,242,0.55);\n text-transform: lowercase;\n display: block;\n margin-top: 4px;\n border-top: 1px solid rgba(242,242,242,0.1);\n padding-top: 8px;\n }\n\n .brand-url {\n font-family: 'Special Elite', monospace;\n font-size: 10px;\n letter-spacing: 0.22em;\n color: rgba(242,242,242,0.3);\n display: block;\n margin-top: 3px;\n }\n\n \/* Bottom right \u2014 pixel count *\/\n .bottom-right {\n position: absolute;\n bottom: 36px;\n right: 40px;\n z-index: 10;\n text-align: right;\n animation: fadeIn 2.6s ease forwards;\n }\n\n .coord {\n font-family: 'Special Elite', monospace;\n font-size: 10px;\n letter-spacing: 0.25em;\n color: rgba(242,242,242,0.18);\n display: block;\n line-height: 1.8;\n }\n\n \/* Orange pixel dot grid \u2014 decorative right side *\/\n .dot-grid {\n position: absolute;\n right: 60px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 3;\n opacity: 0.18;\n display: grid;\n grid-template-columns: repeat(5, 6px);\n grid-template-rows: repeat(7, 6px);\n gap: 8px;\n }\n\n .dot {\n width: 6px;\n height: 6px;\n background: var(--offwhite);\n }\n\n .dot.orange { background: var(--orange); }\n .dot.hidden { opacity: 0; }\n\n \/* Vertical rule *\/\n .v-rule {\n position: absolute;\n left: 50%;\n top: 0;\n bottom: 0;\n width: 1px;\n background: rgba(242,242,242,0.03);\n z-index: 2;\n }\n\n \/* Horizontal rule *\/\n .h-rule {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background: rgba(242,242,242,0.03);\n z-index: 2;\n }\n\n \/* Scanning line effect *\/\n .scan-line {\n position: absolute;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, rgba(255,106,0,0.08), transparent);\n animation: scan 8s linear infinite;\n z-index: 4;\n pointer-events: none;\n }\n\n @keyframes scan {\n 0% { top: -2px; }\n 100% { top: 100vh; }\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n @keyframes slideUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n \/* Vignette *\/\n .vignette {\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.65) 100%);\n pointer-events: none;\n z-index: 2;\n }\n\n \/* \"37\" large ghost number bg *\/\n .ghost-number {\n position: absolute;\n right: -20px;\n top: 50%;\n transform: translateY(-50%);\n font-family: 'Bebas Neue', sans-serif;\n font-size: clamp(300px, 38vw, 580px);\n line-height: 1;\n color: rgba(242,242,242,0.025);\n letter-spacing: -0.05em;\n z-index: 2;\n user-select: none;\n pointer-events: none;\n }\n\n \/* Damaged pixel strip across the top *\/\n .pixel-strip {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n z-index: 20;\n display: flex;\n }\n\n .px {\n flex: 1;\n height: 100%;\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"hero\">\n\n \n <div class=\"v-rule\"><\/div>\n <div class=\"h-rule\"><\/div>\n\n \n <div class=\"pixel-grid\"><\/div>\n\n \n <div class=\"vignette\"><\/div>\n\n \n <div class=\"scan-line\"><\/div>\n\n \n <div class=\"corner-accent\"><\/div>\n\n \n <div class=\"pixel-strip\" id=\"pixelStrip\"><\/div>\n\n \n <div class=\"ghost-number\">37<\/div>\n\n \n <div class=\"dot-grid\" id=\"dotGrid\"><\/div>\n\n \n <div class=\"top-label\">Vision & Direction<\/div>\n <div class=\"top-right-label\">Est. 2024<\/div>\n\n \n <div class=\"content\">\n <div class=\"eyebrow\">A brand built one pixel at a time<\/div>\n\n <h1 class=\"headline\">\n <span class=\"line-1\">Progress<\/span>\n <span class=\"line-2\">in small<\/span>\n <span class=\"line-3\">pieces.<\/span>\n <\/h1>\n\n <div class=\"divider\"><\/div>\n\n <p class=\"sub\">Small details. Bigger picture.<br>Focus > Noise. Every pixel matters.<\/p>\n <\/div>\n\n \n <div class=\"brand-lockup\">\n <span class=\"brand-typewriter\">thirty‑seven‑pixels<\/span>\n <span class=\"brand-name\">37pxls<\/span>\n <span class=\"brand-url\">37pxls.com<\/span>\n <\/div>\n\n \n <div class=\"bottom-right\">\n <span class=\"coord\">40.7128\u00b0 N<\/span>\n <span class=\"coord\">74.0060\u00b0 W<\/span>\n <span class=\"coord\" style=\"margin-top:6px; color:rgba(255,106,0,0.3);\">■ ■ □ □ ■<\/span>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ Build pixel strip top\n const strip = document.getElementById('pixelStrip');\n const stripColors = ['#FF6A00','#1F1F1F','#0D0D0D','#CFC6B8','#48594D','#FF6A00','#0D0D0D'];\n for (let i = 0; i < 200; i++) {\n const px = document.createElement('div');\n px.className = 'px';\n const r = Math.random();\n if (r < 0.04) px.style.background = '#FF6A00';\n else if (r < 0.12) px.style.background = '#CFC6B8';\n else if (r < 0.18) px.style.background = '#48594D';\n else px.style.background = '#1F1F1F';\n strip.appendChild(px);\n }\n\n \/\/ Build dot grid\n const dotGrid = document.getElementById('dotGrid');\n const pattern = [\n 0,1,1,0,0,\n 0,1,1,0,0,\n 0,0,1,1,0,\n 0,0,1,1,0,\n 0,0,0,1,1,\n 0,0,0,1,1,\n 0,0,0,0,1,\n ];\n pattern.forEach((v, i) => {\n const d = document.createElement('div');\n d.className = 'dot' + (v === 0 ? ' hidden' : (i % 7 === 0 ? ' orange' : ''));\n dotGrid.appendChild(d);\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>37pxls \u2014 Progress in Small Pieces 37 Vision & Direction Est. 2024 A brand built one pixel at a time Progress in small pieces. Small details. Bigger picture.Focus > Noise. Every pixel matters. thirty‑seven‑pixels 37pxls 37pxls.com 40.7128\u00b0 N 74.0060\u00b0 W ■ ■ □ □ ■<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-43","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/37pxls.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=43"}],"version-history":[{"count":3,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/37pxls.com\/index.php?rest_route=\/wp\/v2\/pages\/43\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/37pxls.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}