@font-face{
font-family:"Big Shoulders";
font-style:normal;
font-weight:700 900;
font-display:swap;
src:url(fonts/big-shoulders.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"IBM Plex Sans";
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url(fonts/plex-sans.woff2) format("woff2");
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
*,*::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.55;
}
body>*{
box-sizing:content-box;
max-width:800px;
margin-left:auto;
margin-right:auto;
padding-left:20px;
padding-right:20px;
}
a{
color:var(--cl1);
font-weight:460;
text-decoration:none;
}
a:hover{
text-decoration:underline;
text-decoration-thickness:3px;
text-underline-offset:4px;
}
::selection{
background:var(--bg3);
}
:focus-visible{
outline:3px solid var(--cl1);
outline-offset:3px;
}
h1,
h2{
margin:0;
font-family:var(--ff2);
font-weight:800;
line-height:1;
text-transform:uppercase;
}
h1 em,
.brand em{
font-style:normal;
color:var(--cl1);
}
p{
margin:0;
}
.site-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding-top:28px;
padding-bottom:28px;
}
.brand,
.head-link,
.mode-button{
font-family:var(--ff2);
font-weight:800;
line-height:1;
text-transform:uppercase;
}
.brand{
color:var(--tx1);
font-size:var(--fh6);
}
.head-link{
font-size:var(--fh8);
text-align:right;
}
.brand:hover{
text-decoration:none;
}
.page{
padding-top:32px;
padding-bottom:64px;
}
.hero{
font-size:var(--fh1);
line-height:.92;
}
.hero:not(.hero-site) em{
display:block;
}
.site-title{
display:flex;
align-items:center;
gap:24px;
}
.site-icon{
flex:none;
width:64px;
height:64px;
object-fit:contain;
}
.site-icon.is-small{
image-rendering:pixelated;
}
.hero-site{
font-size:var(--fh2);
overflow-wrap:anywhere;
}
.title{
font-size:var(--fh3);
}
.page>h2{
margin-top:40px;
font-size:var(--fh5);
}
.page>p,
.page>ul{
margin-top:16px;
}
.plain{
padding-left:24px;
}
.plain li+li{
margin-top:6px;
}
.scan{
display:flex;
gap:12px;
margin-top:40px;
}
.scan-input{
flex:1;
min-width:0;
height:80px;
margin:0;
padding:0 24px;
border:0;
background:var(--bg2);
color:var(--tx1);
font:inherit;
font-size:var(--fh7);
-webkit-appearance:none;
appearance:none;
}
.scan-input::placeholder{
color:var(--tx2);
opacity:1;
}
.scan-input:focus{
outline:0;
background:var(--bg3);
}
.scan-button{
flex:none;
height:80px;
margin:0;
padding:0 36px;
border:0;
background:var(--cl1);
color:var(--tx3);
font-family:var(--ff2);
font-size:var(--fh6);
font-weight:800;
letter-spacing:.03em;
text-transform:uppercase;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
.scan-button:hover{
background:var(--cl2);
}
.form-error{
margin-top:16px;
color:var(--rd1);
font-weight:600;
}
.mode{
display:flex;
margin-top:64px;
}
.mode-button{
height:56px;
margin:0;
padding:0 24px;
border:0;
background:var(--bg2);
color:var(--tx1);
font-size:var(--fh8);
letter-spacing:.03em;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
.mode-button:hover{
background:var(--bg3);
}
.mode-button[aria-pressed="true"]{
background:var(--tx1);
color:var(--tx3);
cursor:default;
}
.progress{
margin-top:32px;
font-family:var(--ff2);
font-size:var(--fh4);
font-weight:800;
line-height:1;
text-transform:uppercase;
}
.scan-status{
margin-top:12px;
color:var(--tx2);
}
.scan-status:empty{
display:none;
}
.progress.is-complete{
color:var(--gn1);
}
.scan-status.is-error{
color:var(--rd1);
}
.sec{
margin-top:48px;
}
.runbook{
counter-reset:sec;
}
.sec{
counter-increment:sec;
}
.sec h2{
font-size:var(--fh5);
}
.sec h2::before{
content:counter(sec) ". ";
}
.mode-1 .item:not(.tier-1),
.mode-1 .sec:not(:has(.tier-1)),
.mode-2 .tier-3,
.mode-2 .sec:not(:has(.tier-1,.tier-2)){
display:none;
}
.items{
margin:12px 0 0;
padding:0;
list-style:none;
}
.item{
display:grid;
grid-template-columns:36px 1fr;
column-gap:16px;
padding:8px 0;
}
.tick{
width:36px;
height:36px;
margin:0;
border:0;
background:var(--bg2) center/26px no-repeat;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
.tick:enabled:hover{
background-color:var(--bg3);
}
.tick:checked{
background-color:var(--cl1);
background-image:var(--ck1);
}
.tick:disabled{
cursor:default;
}
.is-pass .tick:checked{
background-color:var(--gn1);
}
.is-fail .tick{
background-color:var(--rd1);
background-image:var(--ck2);
}
.is-warn .tick:indeterminate{
background-color:var(--yl1);
background-image:var(--ck3);
}
.is-pending .tick,
.is-skip .tick{
background-color:var(--bg3);
}
.text{
padding-top:4px;
}
.note{
grid-column:2;
margin-top:2px;
font-size:var(--fz2);
overflow-wrap:anywhere;
}
.is-pass .note{
color:var(--gn1);
}
.is-fail .note{
color:var(--rd1);
font-weight:600;
}
.is-warn .note{
color:var(--yl1);
font-weight:600;
}
.is-skip .note{
color:var(--tx2);
}
.site-foot{
display:flex;
flex-wrap:wrap;
gap:8px 28px;
padding-bottom:48px;
color:var(--tx2);
font-size:var(--fz2);
}
.site-foot a{
color:var(--tx1);
}
.site-foot a[aria-current]{
text-decoration:underline;
text-decoration-thickness:3px;
text-underline-offset:4px;
}
@media (min-width:700px){
body>*{
padding-left:40px;
padding-right:40px;
}
}
@media (max-width:699px){
.site-title{
align-items:flex-start;
gap:16px;
}
.site-icon{
width:48px;
height:48px;
}
.scan{
flex-direction:column;
}
.scan-input,
.scan-button{
flex:none;
height:68px;
}
.mode{
margin-top:48px;
}
.mode-button{
flex:1;
padding:0 8px;
letter-spacing:0;
}
}