Showing source for: https://pixelperfections.com/
Duration: 0.115694s
Server: cloudflare
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="dark" name="color-scheme">
<meta content="#000000" name="theme-color">
<link as="font" crossorigin="" href="/assets/oxanium-500.f8f529dd97.woff2" rel="preload" type="font/woff2">
<link as="font" crossorigin="" href="/assets/outfit-400.1c27f13569.woff2" rel="preload" type="font/woff2">
<link href="/assets/icon.1b2d17316e.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<style>
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
*,:before,:after,::backdrop {
--tw-border-style : solid;
--tw-leading : initial;
--tw-font-weight : initial;
--tw-tracking : initial;
--tw-shadow : 0 0 #0000;
--tw-shadow-color : initial;
--tw-shadow-alpha : 100%;
--tw-inset-shadow : 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-inset-shadow-alpha: 100%;
--tw-ring-color : initial;
--tw-ring-shadow : 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset : initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-outline-style : solid;
--tw-blur : initial;
--tw-brightness : initial;
--tw-contrast : initial;
--tw-grayscale : initial;
--tw-hue-rotate : initial;
--tw-invert : initial;
--tw-opacity : initial;
--tw-saturate : initial;
--tw-sepia : initial;
--tw-drop-shadow : initial;
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-translate-x : 0;
--tw-translate-y : 0;
--tw-translate-z : 0;
--tw-content : ""
}
}
}
@layer theme {
:root,:host {
--font-mono : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-black : #000;
--color-white : #fff;
--spacing : .25rem;
--container-2xl : 42rem;
--container-5xl : 64rem;
--text-xs : .75rem;
--text-xs--line-height: calc(1 / .75);
--text-sm : .875rem;
--text-sm--line-height: calc(1.25 / .875);
--text-lg : 1.125rem;
--text-lg--line-height: calc(1.75 / 1.125);
--text-xl : 1.25rem;
--text-xl--line-height: calc(1.75 / 1.25);
--text-2xl : 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--text-4xl : 2.25rem;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-5xl : 3rem;
--text-5xl--line-height: 1;
--text-6xl : 3.75rem;
--text-6xl--line-height: 1;
--text-7xl : 4.5rem;
--text-7xl--line-height: 1;
--text-8xl : 6rem;
--text-8xl--line-height: 1;
--font-weight-medium: 500;
--tracking-tight : -.025em;
--default-font-family: "Outfit", "Outfit Fallback", sans-serif;
--default-mono-font-family: var(--font-mono)
}
}
@layer base {
*,:after,:before,::backdrop {
box-sizing : border-box;
border : 0 solid;
margin : 0;
padding : 0
}
::file-selector-button {
box-sizing : border-box;
border : 0 solid;
margin : 0;
padding : 0
}
html,:host {
-webkit-text-size-adjust: 100%;
tab-size : 4;
line-height : 1.5;
font-family : var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-feature-settings: var(--default-font-feature-settings,normal);
font-variation-settings: var(--default-font-variation-settings,normal);
-webkit-tap-highlight-color: transparent
}
hr {
height : 0;
color : inherit;
border-top-width : 1px
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration : underline dotted
}
h1,h2,h3,h4,h5,h6 {
font-size : inherit;
font-weight : inherit
}
a {
color : inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
-webkit-text-decoration: inherit;
text-decoration : inherit
}
b,strong {
font-weight : bolder
}
code,kbd,samp,pre {
font-family : var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: var(--default-mono-font-feature-settings,normal);
font-variation-settings: var(--default-mono-font-variation-settings,normal);
font-size : 1em
}
small {
font-size : 80%
}
sub,sup {
vertical-align : baseline;
font-size : 75%;
line-height : 0;
position : relative
}
sub {
bottom : -.25em
}
sup {
top : -.5em
}
table {
text-indent : 0;
border-color : inherit;
border-collapse : collapse
}
:-moz-focusring:where(:not(iframe)) {
outline : auto
}
progress {
vertical-align : baseline
}
summary {
display : list-item
}
ol,ul,menu {
list-style : none
}
img,svg,video,canvas,audio,iframe,embed,object {
vertical-align : middle;
display : block
}
img,video {
max-width : 100%;
height : auto
}
button,input,select,optgroup,textarea {
font : inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing : inherit;
color : inherit;
opacity : 1;
background-color : #0000;
border-radius : 0
}
::file-selector-button {
font : inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing : inherit;
color : inherit;
opacity : 1;
background-color : #0000;
border-radius : 0
}
:where(select:is([multiple],[size])) optgroup {
font-weight : bolder
}
:where(select:is([multiple],[size])) optgroup option {
padding-inline-start: 20px
}
::file-selector-button {
margin-inline-end : 4px
}
::placeholder {
opacity : 1
}
@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
::placeholder {
color : currentColor
}
@supports (color:color-mix(in lab, red, red)) {
::placeholder {
color : color-mix(in oklab, currentcolor 50%, transparent)
}
}
}
textarea {
resize : vertical
}
::-webkit-search-decoration {
-webkit-appearance : none
}
::-webkit-date-and-time-value {
min-height : 1lh;
text-align : inherit
}
::-webkit-datetime-edit {
display : inline-flex
}
::-webkit-datetime-edit-fields-wrapper {
padding : 0
}
::-webkit-datetime-edit {
padding-block : 0
}
::-webkit-datetime-edit-year-field {
padding-block : 0
}
::-webkit-datetime-edit-month-field {
padding-block : 0
}
::-webkit-datetime-edit-day-field {
padding-block : 0
}
::-webkit-datetime-edit-hour-field {
padding-block : 0
}
::-webkit-datetime-edit-minute-field {
padding-block : 0
}
::-webkit-datetime-edit-second-field {
padding-block : 0
}
::-webkit-datetime-edit-millisecond-field {
padding-block : 0
}
::-webkit-datetime-edit-meridiem-field {
padding-block : 0
}
::-webkit-calendar-picker-indicator {
line-height : 1
}
:-moz-ui-invalid {
box-shadow : none
}
button,input:where([type=button],[type=reset],[type=submit]) {
appearance : button
}
::file-selector-button {
appearance : button
}
::-webkit-inner-spin-button {
height : auto
}
::-webkit-outer-spin-button {
height : auto
}
[hidden]
:where(:not([hidden=until-found])) {
display : none!important
}
* {
border-color : var(--border);
outline-color : var(--ring)
}
html {
color-scheme : dark;
font-synthesis : none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family : Outfit,Outfit Fallback,sans-serif
}
body {
background-color : var(--background);
color : var(--foreground)
}
::selection {
background-color : var(--brand);
color : var(--color-black)
}
}
@layer components;@layer utilities {
.sr-only {
clip-path : inset(50%);
white-space : nowrap;
border-width : 0;
width : 1px;
height : 1px;
margin : -1px;
padding : 0;
position : absolute;
overflow : hidden
}
.absolute {
position : absolute
}
.relative {
position : relative
}
.-m-1\.5 {
margin : calc(var(--spacing) * -1.5)
}
.mx-auto {
margin-inline : auto
}
.mt-2 {
margin-top : calc(var(--spacing) * 2)
}
.mt-4 {
margin-top : calc(var(--spacing) * 4)
}
.mt-6 {
margin-top : calc(var(--spacing) * 6)
}
.mt-8 {
margin-top : calc(var(--spacing) * 8)
}
.mt-auto {
margin-top : auto
}
.block {
display : block
}
.flex {
display : flex
}
.grid {
display : grid
}
.inline-flex {
display : inline-flex
}
.size-1\.5 {
width : calc(var(--spacing) * 1.5);
height : calc(var(--spacing) * 1.5)
}
.size-4 {
width : calc(var(--spacing) * 4);
height : calc(var(--spacing) * 4)
}
.size-14 {
width : calc(var(--spacing) * 14);
height : calc(var(--spacing) * 14)
}
.h-11 {
height : calc(var(--spacing) * 11)
}
.min-h-dvh {
min-height : 100dvh
}
.w-full {
width : 100%
}
.max-w-2xl {
max-width : var(--container-2xl)
}
.max-w-5xl {
max-width : var(--container-5xl)
}
.flex-1 {
flex : 1
}
.shrink-0 {
flex-shrink : 0
}
.animate-pulse-twice {
animation : 2s cubic-bezier(.4,0,.6,1) 2 pulse
}
.flex-col {
flex-direction : column
}
.items-center {
align-items : center
}
.items-start {
align-items : flex-start
}
.justify-between {
justify-content : space-between
}
.justify-center {
justify-content : center
}
.gap-1\.5 {
gap : calc(var(--spacing) * 1.5)
}
.gap-2 {
gap : calc(var(--spacing) * 2)
}
.gap-3 {
gap : calc(var(--spacing) * 3)
}
.gap-4 {
gap : calc(var(--spacing) * 4)
}
.rounded-2xl {
border-radius : calc(var(--radius) * 1.8)
}
.rounded-lg {
border-radius : var(--radius)
}
.rounded-md {
border-radius : calc(var(--radius) * .8)
}
.border {
border-style : var(--tw-border-style);
border-width : 1px
}
.border-t {
border-top-style : var(--tw-border-style);
border-top-width : 1px
}
.border-input {
border-color : var(--input)
}
.bg-accent,.bg-accent\/10 {
background-color : var(--accent)
}
@supports (color:color-mix(in lab, red, red)) {
.bg-accent\/10 {
background-color : color-mix(in oklab, var(--accent) 10%, transparent)
}
}
.bg-brand {
background-color : var(--brand)
}
.bg-input\/30 {
background-color : var(--input)
}
@supports (color:color-mix(in lab, red, red)) {
.bg-input\/30 {
background-color : color-mix(in oklab, var(--input) 30%, transparent)
}
}
.bg-clip-padding {
background-clip : padding-box
}
.p-1\.5 {
padding : calc(var(--spacing) * 1.5)
}
.p-6 {
padding : calc(var(--spacing) * 6)
}
.px-2 {
padding-inline : calc(var(--spacing) * 2)
}
.px-2\.5 {
padding-inline : calc(var(--spacing) * 2.5)
}
.px-4 {
padding-inline : calc(var(--spacing) * 4)
}
.px-8 {
padding-inline : calc(var(--spacing) * 8)
}
.px-12 {
padding-inline : calc(var(--spacing) * 12)
}
.py-1 {
padding-block : var(--spacing)
}
.py-5 {
padding-block : calc(var(--spacing) * 5)
}
.py-8 {
padding-block : calc(var(--spacing) * 8)
}
.pt-6 {
padding-top : calc(var(--spacing) * 6)
}
.pt-8 {
padding-top : calc(var(--spacing) * 8)
}
.pb-12 {
padding-bottom : calc(var(--spacing) * 12)
}
.font-display {
font-family : Oxanium,Oxanium Fallback,sans-serif
}
.text-2xl {
font-size : var(--text-2xl);
line-height : var(--tw-leading,var(--text-2xl--line-height))
}
.text-4xl {
font-size : var(--text-4xl);
line-height : var(--tw-leading,var(--text-4xl--line-height))
}
.text-6xl {
font-size : var(--text-6xl);
line-height : var(--tw-leading,var(--text-6xl--line-height))
}
.text-lg {
font-size : var(--text-lg);
line-height : var(--tw-leading,var(--text-lg--line-height))
}
.text-sm {
font-size : var(--text-sm);
line-height : var(--tw-leading,var(--text-sm--line-height))
}
.text-xs {
font-size : var(--text-xs);
line-height : var(--tw-leading,var(--text-xs--line-height))
}
.leading-none {
--tw-leading : 1;
line-height : 1
}
.font-medium {
--tw-font-weight : var(--font-weight-medium);
font-weight : var(--font-weight-medium)
}
.tracking-\[0\.2em\] {
--tw-tracking : .2em;
letter-spacing : .2em
}
.tracking-tight {
--tw-tracking : var(--tracking-tight);
letter-spacing : var(--tracking-tight)
}
.text-pretty {
text-wrap : pretty
}
.wrap-break-word {
overflow-wrap : break-word
}
.whitespace-nowrap {
white-space : nowrap
}
.text-accent {
color : var(--accent)
}
.text-brand {
color : var(--brand)
}
.text-muted-foreground {
color : var(--muted-foreground)
}
.uppercase {
text-transform : uppercase
}
.ring-1 {
--tw-ring-shadow : var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.ring-accent\/25 {
--tw-ring-color : var(--accent)
}
@supports (color:color-mix(in lab, red, red)) {
.ring-accent\/25 {
--tw-ring-color : color-mix(in oklab, var(--accent) 25%, transparent)
}
}
.ring-border {
--tw-ring-color : var(--border)
}
.outline {
outline-style : var(--tw-outline-style);
outline-width : 1px
}
.filter {
filter : var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)
}
.transition {
transition-property : color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;
transition-timing-function: var(--tw-ease,var(--motion-ease));
transition-duration : var(--tw-duration,var(--motion-duration-fast))
}
.transition-all {
transition-property : all;
transition-timing-function: var(--tw-ease,var(--motion-ease));
transition-duration : var(--tw-duration,var(--motion-duration-fast))
}
.transition-transform {
transition-property : transform,translate,scale,rotate;
transition-timing-function: var(--tw-ease,var(--motion-ease));
transition-duration : var(--tw-duration,var(--motion-duration-fast))
}
.outline-none {
--tw-outline-style : none;
outline-style : none
}
.select-none {
-webkit-user-select : none;
user-select : none
}
@media (hover:hover) {
.group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
--tw-translate-x : calc(var(--spacing) * .5);
translate : var(--tw-translate-x) var(--tw-translate-y)
}
.group-hover\:-translate-y-0\.5:is(:where(.group):hover *) {
--tw-translate-y : calc(var(--spacing) * -.5);
translate : var(--tw-translate-x) var(--tw-translate-y)
}
}
.after\:absolute:after {
content : var(--tw-content);
position : absolute
}
.after\:inset-0:after {
content : var(--tw-content);
inset : 0
}
.after\:rounded-2xl:after {
content : var(--tw-content);
border-radius : calc(var(--radius) * 1.8)
}
@media (hover:hover) {
.hover\:bg-input\/50:hover {
background-color : var(--input)
}
@supports (color:color-mix(in lab, red, red)) {
.hover\:bg-input\/50:hover {
background-color : color-mix(in oklab, var(--input) 50%, transparent)
}
}
.hover\:bg-white\/\[0\.03\]:hover {
background-color : #ffffff08
}
@supports (color:color-mix(in lab, red, red)) {
.hover\:bg-white\/\[0\.03\]:hover {
background-color : color-mix(in oklab, var(--color-white) 3%, transparent)
}
}
.hover\:text-foreground:hover {
color : var(--foreground)
}
.hover\:ring-accent\/40:hover {
--tw-ring-color : var(--accent)
}
@supports (color:color-mix(in lab, red, red)) {
.hover\:ring-accent\/40:hover {
--tw-ring-color : color-mix(in oklab, var(--accent) 40%, transparent)
}
}
}
.focus\:not-sr-only:focus {
clip-path : none;
white-space : normal;
width : auto;
height : auto;
margin : 0;
padding : 0;
position : static;
overflow : visible
}
.focus\:fixed:focus {
position : fixed
}
.focus\:top-3:focus {
top : calc(var(--spacing) * 3)
}
.focus\:left-3:focus {
left : calc(var(--spacing) * 3)
}
.focus\:z-50:focus {
z-index : 50
}
.focus\:rounded-lg:focus {
border-radius : var(--radius)
}
.focus\:bg-accent:focus {
background-color : var(--accent)
}
.focus\:px-4:focus {
padding-inline : calc(var(--spacing) * 4)
}
.focus\:py-3:focus {
padding-block : calc(var(--spacing) * 3)
}
.focus\:text-sm:focus {
font-size : var(--text-sm);
line-height : var(--tw-leading,var(--text-sm--line-height))
}
.focus\:text-black:focus {
color : var(--color-black)
}
.focus-visible\:border-ring:focus-visible {
border-color : var(--ring)
}
.focus-visible\:ring-3:focus-visible {
--tw-ring-shadow : var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.focus-visible\:ring-ring:focus-visible {
--tw-ring-color : var(--ring)
}
.active\:translate-y-px:active {
--tw-translate-y : 1px;
translate : var(--tw-translate-x) var(--tw-translate-y)
}
.has-focus-visible\:ring-2:has(:focus-visible) {
--tw-ring-shadow : var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);
box-shadow : var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}
.has-focus-visible\:ring-ring:has(:focus-visible) {
--tw-ring-color : var(--ring)
}
@media (min-width:40rem) {
.sm\:mt-8 {
margin-top : calc(var(--spacing) * 8)
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2,minmax(0,1fr))
}
.sm\:flex-row {
flex-direction : row
}
.sm\:justify-between {
justify-content : space-between
}
.sm\:gap-6 {
gap : calc(var(--spacing) * 6)
}
.sm\:pt-12 {
padding-top : calc(var(--spacing) * 12)
}
.sm\:pb-16 {
padding-bottom : calc(var(--spacing) * 16)
}
.sm\:text-5xl {
font-size : var(--text-5xl);
line-height : var(--tw-leading,var(--text-5xl--line-height))
}
.sm\:text-7xl {
font-size : var(--text-7xl);
line-height : var(--tw-leading,var(--text-7xl--line-height))
}
.sm\:text-xl {
font-size : var(--text-xl);
line-height : var(--tw-leading,var(--text-xl--line-height))
}
}
@media (min-width:64rem) {
.lg\:col-span-2 {
grid-column : span 2/span 2
}
.lg\:col-start-2 {
grid-column-start : 2
}
.lg\:col-start-3 {
grid-column-start : 3
}
.lg\:row-span-3 {
grid-row : span 3/span 3
}
.lg\:row-start-1 {
grid-row-start : 1
}
.lg\:mt-0 {
margin-top : 0
}
.lg\:contents {
display : contents
}
.lg\:grid {
display : grid
}
.lg\:grid-cols-\[auto_1fr_auto\] {
grid-template-columns: auto 1fr auto
}
.lg\:grid-rows-\[auto_auto_1fr\] {
grid-template-rows : auto auto 1fr
}
.lg\:gap-x-5 {
column-gap : calc(var(--spacing) * 5)
}
.lg\:self-center {
align-self : center
}
.lg\:text-8xl {
font-size : var(--text-8xl);
line-height : var(--tw-leading,var(--text-8xl--line-height))
}
}
.\[\&_svg\]\:pointer-events-none svg {
pointer-events : none
}
.\[\&_svg\]\:shrink-0 svg {
flex-shrink : 0
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]) {
width : calc(var(--spacing) * 4);
height : calc(var(--spacing) * 4)
}
.\[\&\>svg\]\:h-7>svg {
height : calc(var(--spacing) * 7)
}
.\[\&\>svg\]\:w-auto>svg {
width : auto
}
@media (min-width:40rem) {
.sm\:\[\&\>svg\]\:h-8>svg {
height : calc(var(--spacing) * 8)
}
}
}
:root {
--brand : #ec4899;
--accent : #f9a8d4;
--background : #000;
--foreground : oklch(98.5% 0 0);
--muted : oklch(20.5% 0 0);
--muted-foreground : oklch(72% 0 0);
--border : oklch(100% 0 0/.1);
--input : oklch(100% 0 0/.15);
--ring : var(--accent);
--radius : .625rem;
--motion-duration-fast: .15s;
--motion-ease : ease-out
}
@font-face {
font-family
:
Oxanium
;
font-style
:
normal
;
font-weight
:
500
;
font-display
:
swap
;
src
:
url("/assets/oxanium-500.f8f529dd97.woff2")
format("woff2")
}
@font-face {
font-family
:
Outfit
;
font-style
:
normal
;
font-weight
:
400
;
font-display
:
swap
;
src
:
url("/assets/outfit-400.1c27f13569.woff2")
format("woff2")
}
@font-face {
font-family
:
Oxanium
Fallback
;
src
:
local(Arial)
,
local(Liberation Sans)
,
local(Arimo)
,
local(Helvetica)
;
size-adjust
:
105.6%
;
ascent-override
:
74.8%
;
descent-override
:
19.9%
;
line-gap-override
:
23.7%
}
@font-face {
font-family
:
Outfit
Fallback
;
src
:
local(Arial)
,
local(Liberation Sans)
,
local(Arimo)
,
local(Helvetica)
;
size-adjust
:
100.8%
;
ascent-override
:
99.2%
;
descent-override
:
25.8%
;
line-gap-override
:
0%
}
@media (prefers-reduced-motion:reduce) {
*,:before,:after {
scroll-behavior : auto!important;
transition-duration : .01ms!important;
animation-duration : .01ms!important;
animation-iteration-count: 1!important
}
}
@media (forced-colors:active) {
:focus-visible {
outline-offset : 2px;
outline : 2px solid canvastext
}
header svg [fill=white] {
fill : canvastext
}
}
@media (prefers-reduced-motion:no-preference) and (not (forced-colors:active)) {
.hero-resolve {
animation : .6s step-end both resolve
}
@media (min-width:64rem) {
.hero-resolve {
animation-name : resolve-lg
}
}
}
@keyframes resolve {
0%
{filter:url("#px-8")}
33%
{filter:url("#px-4")}
67%
{filter:url("#px-2")}
to {
filter : none
}
}
@keyframes resolve-lg {
0%
{filter:url("#px-12")}
33%
{filter:url("#px-4")}
67%
{filter:url("#px-2")}
to {
filter : none
}
}
@property --tw-border-style {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
solid
}
@property --tw-leading {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-font-weight {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-tracking {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-shadow {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
0
#0000
}
@property --tw-shadow-color {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-shadow-alpha {
syntax
:
"<percentage>"
;
inherits
:
false
;
initial-value
:
100%
}
@property --tw-inset-shadow {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
0
#0000
}
@property --tw-inset-shadow-color {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-inset-shadow-alpha {
syntax
:
"<percentage>"
;
inherits
:
false
;
initial-value
:
100%
}
@property --tw-ring-color {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-ring-shadow {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
0
#0000
}
@property --tw-inset-ring-color {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-inset-ring-shadow {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
0
#0000
}
@property --tw-ring-inset {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-ring-offset-width {
syntax
:
"<length>"
;
inherits
:
false
;
initial-value
:
0
}
@property --tw-ring-offset-color {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
#fff
}
@property --tw-ring-offset-shadow {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
0
#0000
}
@property --tw-outline-style {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
solid
}
@property --tw-blur {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-brightness {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-contrast {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-grayscale {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-hue-rotate {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-invert {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-opacity {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-saturate {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-sepia {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-drop-shadow {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-drop-shadow-color {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-drop-shadow-alpha {
syntax
:
"<percentage>"
;
inherits
:
false
;
initial-value
:
100%
}
@property --tw-drop-shadow-size {
syntax
:
"*"
;
inherits
:
false
}
@property --tw-translate-x {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
}
@property --tw-translate-y {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
}
@property --tw-translate-z {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
0
}
@property --tw-content {
syntax
:
"*"
;
inherits
:
false
;
initial-value
:
""
}
@keyframes pulse {
50%
{opacity:.5}
}
</style>
<title>
Pixel Perfections
</title>
<meta content="Pixel Perfections is an independent software studio. We make apps that are private by design, effortless to use, and crafted with care. Our first is falsetto, a voice analysis and training app." name="description">
<link href="https://pixelperfections.com/" rel="canonical">
<meta content="website" property="og:type">
<meta content="Pixel Perfections" property="og:site_name">
<meta content="Pixel Perfections" property="og:title">
<meta content="An independent software studio. We make apps that are private by design, effortless to use, and crafted with care." property="og:description">
<meta content="https://pixelperfections.com/" property="og:url">
<meta content="https://pixelperfections.com/og.png" property="og:image">
<meta content="1200" property="og:image:width">
<meta content="630" property="og:image:height">
<meta content="The Pixel Perfections P² mark on black" property="og:image:alt">
<meta content="summary_large_image" name="twitter:card">
</head>
<body class="flex min-h-dvh flex-col">
<a class="sr-only focus:not-sr-only focus:fixed focus:top-3 focus:left-3 focus:z-50 focus:rounded-lg focus:bg-accent focus:px-4 focus:py-3 focus:text-sm focus:text-black" href="#main">
Skip to content
</a>
<header class="mx-auto flex w-full max-w-5xl items-center px-4 py-5">
<a class="-m-1.5 inline-flex rounded-md p-1.5 outline-none focus-visible:ring-3 focus-visible:ring-ring [&>svg]:h-7 [&>svg]:w-auto sm:[&>svg]:h-8" href="/">
<svg aria-hidden="true" fill="none" viewBox="0 0 42.6094 33.12" xmlns="http://www.w3.org/2000/svg">
<path d="M2.38419e-07 33.12V-7.62939e-06H16.128C21.504 -7.62939e-06 24.192 2.68799 24.192 8.06399V14.496C24.192 19.872 21.504 22.56 16.128 22.56H6.912V33.12H2.38419e-07ZM6.912 16.32H15.84C16.8 16.32 17.28 15.84 17.28 14.88V7.67999C17.28 6.71999 16.8 6.24 15.84 6.24H6.912V16.32Z" fill="white">
</path>
<path d="M28.3054 19.968V13.584C28.3054 10.64 29.7454 8.87999 32.6254 8.30399L36.7054 7.53599C37.1854 7.43999 37.4254 7.13599 37.4254 6.62399V5.37599C37.4254 4.92799 37.2014 4.70399 36.7534 4.70399H28.8814V1.77599L31.1374 -7.62939e-06H36.7534C40.6574 -7.62939e-06 42.6094 1.95199 42.6094 5.85599V6.76799C42.6094 9.74399 41.1694 11.504 38.2894 12.048L34.2094 12.864C33.7294 12.96 33.4894 13.248 33.4894 13.728V15.264H42.6094V19.968H28.3054Z" fill="#EC4899">
</path>
</svg>
<span class="sr-only">
Pixel Perfections
</span>
</a>
</header>
<main class="flex-1" id="main">
<svg aria-hidden="true" class="absolute" height="0" width="0">
<filter height="1" id="px-12" width="1" x="0" y="0">
<feFlood height="1" width="1" x="6" y="6">
</feFlood>
<feComposite height="12" width="12">
</feComposite>
<feTile result="grid">
</feTile>
<feComposite in="SourceGraphic" in2="grid" operator="in">
</feComposite>
<feMorphology operator="dilate" radius="6">
</feMorphology>
</filter>
<filter height="1" id="px-8" width="1" x="0" y="0">
<feFlood height="1" width="1" x="4" y="4">
</feFlood>
<feComposite height="8" width="8">
</feComposite>
<feTile result="grid">
</feTile>
<feComposite in="SourceGraphic" in2="grid" operator="in">
</feComposite>
<feMorphology operator="dilate" radius="4">
</feMorphology>
</filter>
<filter height="1" id="px-4" width="1" x="0" y="0">
<feFlood height="1" width="1" x="2" y="2">
</feFlood>
<feComposite height="4" width="4">
</feComposite>
<feTile result="grid">
</feTile>
<feComposite in="SourceGraphic" in2="grid" operator="in">
</feComposite>
<feMorphology operator="dilate" radius="2">
</feMorphology>
</filter>
<filter height="1" id="px-2" width="1" x="0" y="0">
<feFlood height="1" width="1" x="1" y="1">
</feFlood>
<feComposite height="2" width="2">
</feComposite>
<feTile result="grid">
</feTile>
<feComposite in="SourceGraphic" in2="grid" operator="in">
</feComposite>
<feMorphology operator="dilate" radius="1">
</feMorphology>
</filter>
</svg>
<section aria-labelledby="hero-title" class="mx-auto max-w-5xl px-4 pt-8 pb-12 sm:pt-12 sm:pb-16">
<h1 class="hero-resolve font-display text-6xl leading-none wrap-break-word font-medium tracking-tight sm:text-7xl lg:text-8xl" id="hero-title">
pixel perfect
<span class="text-brand">
.
</span>
</h1>
<p class="mt-6 max-w-2xl text-lg text-pretty text-muted-foreground sm:mt-8 sm:text-xl">
Pixel Perfections is an independent software studio. We make apps that are private by design, effortless to use, and crafted with care.
</p>
</section>
<section aria-labelledby="projects-title" class="mx-auto max-w-5xl px-4 pb-12 sm:pb-16">
<h2 class="flex items-center gap-3 font-display text-sm font-medium tracking-[0.2em] text-muted-foreground uppercase" id="projects-title">
<span aria-hidden="true" class="size-1.5 bg-brand">
</span>
Projects
</h2>
<ul class="mt-6 grid gap-4 sm:grid-cols-2" role="list">
<li class="group relative flex flex-col rounded-2xl p-6 ring-1 ring-border transition hover:bg-white/[0.03] hover:ring-accent/40 has-focus-visible:ring-2 has-focus-visible:ring-ring lg:grid lg:grid-cols-[auto_1fr_auto] lg:grid-rows-[auto_auto_1fr] lg:gap-x-5">
<div class="flex items-start justify-between gap-4 lg:contents">
<img alt="" class="size-14 lg:row-span-3" height="56" src="/assets/falsetto.300d5600ee.svg" width="56">
<span class="inline-flex items-center gap-2 rounded-md bg-accent/10 px-2.5 py-1 text-xs text-accent ring-1 ring-accent/25 lg:col-start-3 lg:row-start-1 lg:self-center">
<span aria-hidden="true" class="size-1.5 animate-pulse-twice bg-accent">
</span>
In development
</span>
</div>
<h3 class="mt-6 font-display text-2xl font-medium tracking-tight lg:col-start-2 lg:row-start-1 lg:mt-0 lg:self-center">
falsetto
</h3>
<p class="mt-2 text-pretty text-muted-foreground lg:col-span-2 lg:col-start-2">
Voice analysis and training app. Live pitch, resonance and voice quality, with every recording kept on your device.
</p>
<p class="mt-auto flex pt-6 lg:col-span-2 lg:col-start-2">
<a class="inline-flex items-center gap-1.5 text-accent outline-none after:absolute after:inset-0 after:rounded-2xl" href="https://falsetto.me">
Visit falsetto.me
<svg aria-hidden="true" class="size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" viewBox="0 0 24 24">
<path d="M7 17 17 7M8 7h9v9">
</path>
</svg>
</a>
</p>
</li>
</ul>
</section>
</main>
<footer class="border-t">
<div class="mx-auto flex max-w-5xl flex-col gap-1.5 px-4 py-8 text-sm text-muted-foreground sm:flex-row sm:justify-between sm:gap-6">
<div class="flex flex-col gap-1.5">
<p>
© 2026 Pixel Perfections LLC
</p>
<p>
Falsetto is a trade name of Pixel Perfections LLC.
</p>
</div>
<p>
No cookies. No analytics.
</p>
</div>
</footer>
</body>
</html>
| # |
Url |
Url |
Source |
Date |
| 1 |
https://pixelperfections.com/ |
|
2026-10-17 14:54:06 |
| 2 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:06 |
| 3 |
https://henryl542sdo4.tdlwiki.com/ |
|
2026-10-17 14:54:06 |
| 4 |
https://play.google.com/store/games |
|
2026-10-17 14:54:06 |
| 5 |
https://awayjournal.org/ |
|
2026-10-17 14:54:05 |
| 6 |
https://www.texarkanatwins.com/%25… |
|
2026-10-17 14:54:05 |
| 7 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:05 |
| 8 |
https://stratfordh565evm4.ziblogs.… |
|
2026-10-17 14:54:04 |
| 9 |
https://www.classifiedads.com/ |
|
2026-10-17 14:54:03 |
| 10 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:02 |
| 11 |
https://www.hawaiigaga.com/ |
|
2026-10-17 14:54:02 |
| 12 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:01 |
| 13 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:01 |
| 14 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:01 |
| 15 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:54:00 |
| 16 |
https://auth.acog.org/OAuth/SignIn… |
|
2026-10-17 14:54:00 |
| 17 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:53:59 |
| 18 |
https://holdendxmew.blogscribble.c… |
|
2026-10-17 14:53:59 |
| 19 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:53:58 |
| 20 |
https://www.thebolditalic.com/?gi=… |
|
2026-10-17 14:53:58 |