*,*::before,*::after{
box-sizing:border-box;
border-radius:var(--br1);
box-shadow:none;
}
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
margin:0;
background:var(--bg1);
color:var(--tx1);
font-family:var(--ff1);
font-size:var(--fz1);
line-height:1.6;
}
body>header,
body>main,
body>footer{
max-width:calc(var(--wd1) + 2*var(--pd1));
margin-left:auto;
margin-right:auto;
padding-left:var(--pd1);
padding-right:var(--pd1);
}
a{
color:inherit;
text-decoration:none;
}
a:hover,
a:focus-visible{
text-decoration:underline;
text-decoration-thickness:3px;
text-underline-offset:5px;
}
:focus-visible{
outline:4px solid var(--cl1);
outline-offset:4px;
}
main:focus,
.report-count:focus{
outline:none;
}
::selection{
background:var(--bg3);
}
h1,
h2,
h3,
p{
margin:0;
}
h1,
h2{
font-family:var(--ff2);
font-weight:800;
line-height:1;
text-transform:uppercase;
text-wrap:balance;
}
h2{
font-size:var(--fh3);
}
h3{
font-size:var(--fz4);
line-height:1.25;
}
ul,
ol{
margin:0;
padding-left:1.4em;
}
strong{
font-weight:700;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}
.skip{
position:absolute;
left:var(--pd1);
top:-200px;
z-index:20;
display:inline-flex;
align-items:center;
min-height:48px;
padding:10px 20px;
background:var(--cl1);
color:var(--tx3);
font-weight:700;
}
.skip:focus{
top:12px;
}
.site-head{
padding-top:32px;
}
.brand{
display:inline-flex;
align-items:center;
gap:14px;
min-height:48px;
font-family:var(--ff2);
font-size:38px;
font-weight:800;
line-height:1;
}
.brand:hover,
.brand:focus-visible{
text-decoration:none;
}
.mark{
width:52px;
height:52px;
flex:none;
}
.mark path{
fill:none;
stroke:var(--cl1);
stroke-width:5.5;
}
.mark circle{
fill:var(--cl1);
}
.page{
padding-top:var(--gp3);
}
.page>*+*{
margin-top:var(--gp2);
}
.page>h2{
margin-top:var(--gp3);
}
.page p a,
.page li a{
padding:11px 0;
color:var(--cl1);
font-weight:600;
}
.hero{
font-size:var(--fh1);
line-height:.88;
letter-spacing:.005em;
}
.hero-accent{
color:var(--cl1);
}
.lead{
font-size:var(--fz4);
line-height:1.4;
}
.check{
display:flex;
flex-wrap:wrap;
gap:var(--gp1);
}
.check-label{
display:flex;
flex-direction:column;
gap:8px;
flex:1 1 380px;
min-width:0;
font-weight:700;
}
.form-error{
color:var(--rd1);
font-weight:700;
}
.form-error:empty{
display:none;
}
.check-input{
width:100%;
min-height:72px;
line-height:1.4;
margin:0;
padding:16px 20px;
border:0;
background:var(--bg2);
color:var(--tx1);
font:inherit;
font-size:var(--fz4);
font-weight:400;
-webkit-appearance:none;
appearance:none;
}
.check-input::placeholder{
color:var(--tx2);
opacity:1;
}
.check-input:focus{
background:var(--bg3);
}
.check-input:focus-visible{
outline:4px solid var(--cl1);
outline-offset:4px;
}
.big-button,
.check-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:72px;
margin:0;
padding:14px 32px;
border:0;
background:var(--cl1);
color:var(--tx3);
font-family:var(--ff2);
font-size:32px;
font-weight:800;
letter-spacing:.03em;
line-height:1;
text-transform:uppercase;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
.big-button:hover,
.check-button:hover{
background:var(--cl2);
}
.check-button{
align-self:flex-end;
flex:0 0 auto;
}
.note{
color:var(--tx2);
font-size:var(--fz2);
}
.page .check+.note{
margin-top:16px;
}
.plain-list li+li{
margin-top:8px;
}
.site-foot{
display:flex;
flex-wrap:wrap;
gap:8px 28px;
margin-top:96px;
padding-top:0;
padding-bottom:48px;
color:var(--tx2);
font-size:var(--fz2);
}
.site-foot a{
display:inline-flex;
align-items:center;
min-height:48px;
color:var(--tx1);
}
.site-foot span{
display:inline-flex;
align-items:center;
min-height:48px;
}
.site-foot a[aria-current]{
text-decoration:underline;
text-decoration-thickness:3px;
text-underline-offset:5px;
}
.report-site{
font-size:var(--fh3);
text-transform:none;
overflow-wrap:anywhere;
}
.status:empty{
display:none;
}
.status{
display:flex;
align-items:center;
gap:18px;
font-family:var(--ff2);
font-size:var(--fh4);
font-weight:800;
line-height:1.15;
overflow-wrap:anywhere;
}
.status-text{
min-width:0;
}
.dots{
display:inline-flex;
gap:8px;
flex:none;
}
.dots span{
width:16px;
height:16px;
background:var(--cl1);
animation:pulse 1.2s ease-in-out infinite;
}
.dots span:nth-child(2){
animation-delay:.2s;
}
.dots span:nth-child(3){
animation-delay:.4s;
}
@keyframes pulse{
0%,
100%{
opacity:.2;
}
50%{
opacity:1;
}
}
@media (prefers-reduced-motion:reduce){
.dots span{
animation:none;
opacity:1;
}
}
.report-body>*+*{
margin-top:var(--gp2);
}
.report-body>h2{
margin-top:var(--gp3);
}
.report-body:empty{
display:none;
}
.report .report-body,
.report .status{
margin-top:20px;
}
.report-count{
font-family:var(--ff2);
font-size:var(--fh2);
font-weight:800;
line-height:1;
text-transform:uppercase;
}
.is-gaps{
color:var(--rd1);
}
.is-clear{
color:var(--gn1);
}
.report-body .report-date{
margin-top:16px;
font-size:var(--fz3);
font-weight:700;
}
.report-body .report-page{
margin-top:4px;
color:var(--tx2);
font-size:var(--fz2);
overflow-wrap:anywhere;
}
.gaps{
list-style:none;
padding:0;
}
.gap+.gap{
margin-top:56px;
}
.gap>*+*{
margin-top:12px;
}
.gap-count{
color:var(--tx2);
}
details>summary{
display:inline-flex;
align-items:center;
min-height:48px;
padding:8px 20px;
background:var(--bg2);
color:var(--tx1);
font-weight:700;
cursor:pointer;
list-style:none;
}
details>summary::-webkit-details-marker{
display:none;
}
details>summary:hover,
details[open]>summary{
background:var(--bg3);
}
details[open]>summary+*{
margin-top:20px;
}
.gap>details+details{
margin-top:12px;
}
.spots{
list-style:none;
padding:0;
}
.spot+.spot{
margin-top:32px;
}
.shot{
display:block;
max-width:100%;
height:auto;
background:var(--bg2);
}
.spot-text,
.spot-note{
margin-top:8px;
overflow-wrap:anywhere;
}
.spot-more{
margin-top:24px;
color:var(--tx2);
}
.tech-body{
font-size:var(--fz2);
overflow-wrap:anywhere;
}
.tech-body>*+*{
margin-top:12px;
}
.tech-spots li+li{
margin-top:16px;
}
.code{
font-family:var(--ff1);
font-weight:600;
overflow-wrap:anywhere;
}
.good-list li+li{
margin-top:6px;
}
.honest{
margin-top:var(--gp3);
color:var(--tx2);
}
.report-body .honest{
margin-top:var(--gp3);
}
.report>.again{
margin-top:var(--gp2);
}
.colors{
list-style:none;
padding:0;
display:flex;
flex-direction:column;
gap:12px;
}
.color{
position:relative;
}
.swatch{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 14px;
width:100%;
min-height:64px;
margin:0;
padding:10px;
border:0;
background:var(--bg3);
color:var(--tx1);
font:inherit;
text-align:left;
cursor:pointer;
}
.swatch:hover,
.swatch[aria-expanded="true"]{
background:var(--bg2);
}
.chip{
display:inline-block;
width:44px;
height:44px;
flex:none;
}
.sample{
display:inline-block;
max-width:100%;
padding:6px 12px;
font-size:var(--fz1);
line-height:1.4;
overflow-wrap:anywhere;
}
.sample::before{
content:attr(data-sample);
}
.swatch-label{
margin-left:auto;
padding-right:8px;
color:var(--cl1);
font-weight:700;
}
.pop{
position:absolute;
left:0;
top:100%;
z-index:10;
width:min(560px,100%);
padding:20px 24px 24px;
background:var(--bg2);
}
.pop[hidden]{
display:none;
}
.pop-title{
font-weight:700;
}
.codes{
list-style:none;
padding:0;
margin-top:12px;
}
.codes li{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px 12px;
}
.codes li+li{
margin-top:10px;
}
.code-label{
flex:1 1 180px;
}
.copy{
min-height:48px;
margin:0;
padding:8px 18px;
border:0;
background:var(--cl1);
color:var(--tx3);
font:inherit;
font-size:var(--fz2);
font-weight:700;
cursor:pointer;
}
.copy:hover{
background:var(--cl2);
}
.compare{
display:flex;
flex-wrap:wrap;
gap:16px;
margin-top:20px;
}
.compare-item{
display:flex;
flex-direction:column;
gap:6px;
flex:1 1 180px;
min-width:0;
}
.compare-label{
font-weight:700;
}
.compare .sample{
padding:12px 14px;
}
.copied{
margin-top:12px;
font-weight:700;
}
.copied:empty{
display:none;
}
.steps{
padding-left:1.3em;
}
.steps li+li{
margin-top:16px;
}
@media (max-width:699px){
.big-button,
.check-button{
font-size:28px;
}
.check-button{
width:100%;
}
.brand{
font-size:34px;
}
.mark{
width:46px;
height:46px;
}
.site-foot{
margin-top:72px;
}
}