Source code
Revision control
Copy as Markdown
Other Tools
/* Outer harness */
html,
body {
min-height: 100%;
}
body {
background-color: hsl(0, 0%, 95%);
font-family: "Helvetica Neue", Helvetica, Verdana, sans-serif;
font-size: 15px;
cursor: default;
-webkit-user-select: none;
}
body.showing-intro,
body.showing-results {
background-color: hsl(35, 100%, 100%);
background-image: url(crystal.svg), url(lines.svg);
background-size: auto 225%, auto 100%;
background-repeat: no-repeat;
animation: background-fade 1s ease-in 1s, background-color 60s linear infinite 2s;
animation-play-state: paused;
will-change: background-color;
}
body.showing-test-container {
overflow: hidden;
}
body.images-loaded {
animation-play-state: running;
}
@media screen and (min-width: 667px) {
body {
font-size: 24px;
}
body.showing-intro,
body.showing-results {
background-size: 200% 100%, 150% auto;
}
}
@media screen and (min-width: 1025px) {
body.showing-intro,
body.showing-results {
background-size: 150% 100%, 150% auto;
}
}
::selection {
background-color: black;
color: white;
}
.hidden {
display: none;
}
section {
display: none;
}
section.selected {
display: block;
}
svg.logo {
width: 350px;
height: 88px;
max-width: 100%;
padding-bottom: 1em;
color: hsl(35, 100%, 50%);
animation: foreground-color 60s linear infinite 2s;
animation-play-state: paused;
will-change: color;
}
body.images-loaded svg.logo {
animation-play-state: running;
}
@media screen and (min-width: 667px) {
svg.logo {
width: 525px;
height: 130px;
}
}
section .body {
margin: 0 1em;
max-width: 350px;
}
section .body p {
margin: 1em 0;
line-height: 1.5em;
-webkit-user-select: text;
cursor: text;
}
@media screen and (min-width: 667px) {
section .body {
margin-left: 2.5em;
max-width: 500px;
transform: skewX(-10deg);
}
section button {
transform: none;
}
}
button {
background-color: hsl(35, 100%, 50%);
color: white;
padding: 0.25em;
margin: 1.5em -0.25em 0 0;
min-width: 50%;
border: none;
font-family: inherit;
font-size: inherit;
transform: skewX(-10deg);
transition: 100ms filter ease-in-out;
animation: background-color 60s linear infinite 2s;
animation-play-state: paused;
will-change: background-color;
}
body.images-loaded button {
animation-play-state: running;
}
button:hover {
filter: brightness(115%);
}
button:active {
filter: brightness(130%);
}
button:disabled {
opacity: 0.5;
filter: none !important;
}
@media print {
button {
display: none;
}
}
.portrait-orientation-check {
display: none;
}
@media screen and (max-device-width: 1025px) and (orientation: portrait) {
.portrait-orientation-check {
display: block;
}
}
@media screen and (max-device-width: 1025px) and (orientation: portrait) {
.landscape-orientation-check {
/* This keeps the button color animation in sync with page, while display: none does not. */
visibility: hidden;
}
}
@keyframes background-fade {
100% {
background-color: hsl(35, 100%, 50%);
}
}
@keyframes background-color {
0%, 10% {
background-color: hsl(35, 100%, 50%);
}
12%, 20% {
background-color: hsl(75, 100%, 30%);
}
22%, 30% {
background-color: hsl(115, 100%, 30%);
}
32%, 40% {
background-color: hsl(155, 100%, 30%);
}
42%, 50% {
background-color: hsl(195, 100%, 30%);
}
52%, 60% {
background-color: hsl(235, 100%, 30%);
}
62%, 70% {
background-color: hsl(275, 100%, 30%);
}
72%, 80% {
background-color: hsl(315, 100%, 30%);
}
82%, 90% {
background-color: hsl(355, 100%, 30%);
}
92%, 100% {
background-color: hsl(395, 100%, 50%);
}
}
@keyframes foreground-color {
0%, 10% {
color: hsl(35, 100%, 50%);
}
12%, 20% {
color: hsl(75, 100%, 30%);
}
22%, 30% {
color: hsl(115, 100%, 30%);
}
32%, 40% {
color: hsl(155, 100%, 30%);
}
42%, 50% {
color: hsl(195, 100%, 30%);
}
52%, 60% {
color: hsl(235, 100%, 30%);
}
62%, 70% {
color: hsl(275, 100%, 30%);
}
72%, 80% {
color: hsl(315, 100%, 30%);
}
82%, 90% {
color: hsl(355, 100%, 30%);
}
92%, 100% {
color: hsl(395, 100%, 50%);
}
}
/* Intro section, About page */
#intro, #about {
padding: 2em;
}
#intro {
opacity: 0;
transition: opacity 500ms ease-in;
}
body.images-loaded #intro {
opacity: 1;
}
#about .body {
transform: none;
margin: 0;
max-width: initial;
}
#about li {
line-height: 1.5em;
}
#about button {
padding: .75em 2em;
margin: 1.5em auto 0;
min-width: initial;
transform: skewX(-10deg);
}
@media screen and (min-width: 667px) {
#about .body {
font-size: .7em;
margin: 1em;
}
#about ol, #about ul {
padding-left: 3em;
}
}
#intro a, #about a,
#intro a:visited, #about a:visited {
color: black;
}
/* Running test section */
.frame-container {
position: absolute;
top: 50%;
left: 50%;
}
.frame-container > iframe {
width: 100%;
height: 100%;
border: 0;
margin: 0;
}
body.small .frame-container {
width: 568px;
height: 320px;
margin-left: -284px;
margin-top: -160px;
}
body.medium .frame-container {
width: 900px;
height: 600px;
margin-left: -450px;
margin-top: -300px;
}
body.large .frame-container {
width: 1600px;
height: 800px;
margin-left: -800px;
margin-top: -400px;
}
/* Results section */
#results {
padding: 2em;
}
#results .body {
-webkit-user-select: text;
}
#results .score-container {
padding-bottom: 2em;
}
#results .table-container {
position: relative;
}
#results .table-container > div {
margin-left: 40%;
}
#results .score {
font-size: 5em;
font-weight: bold;
font-style: italic;
line-height: 1;
margin: 0;
}
#results .confidence {
font-size: 2em;
font-style: italic;
line-height: 1;
margin: 0;
text-indent: 1.75em;
color: hsl(0, 0%, 40%);
padding-bottom: .3em;
}
#results table {
border-spacing: 0;
margin: 0;
padding: 0;
min-width: 25%;
}
#results table td,
#results table th {
padding: 0.25em;
}
#results table td.suites-separator {
padding: 0;
}
#results table tr:nth-child(even) {
background-color: hsla(0, 0%, 0%, 0.05);
}
#results #results-header {
top: 0;
left: 0;
width: 40%;
position: absolute;
}
#results #results-score {
float: left;
}
#results #results-data span {
font-size: .75em;
color: hsl(0, 0%, 40%);
}
#results #results-header td,
#results #results-header th {
text-align: right;
padding-right: 1em !important;
padding-left: 0.5em !important;
}
#results #results-score td,
#results #results-score th {
text-align: left;
padding-right: 0.5em !important;
}
#results #results-score td {
cursor: text;
}
@media screen and (min-width: 667px) {
#results .score,
#results .confidence {
font-style: normal;
}
}
.detail span {
display: none;
}
body.small .detail .small,
body.medium .detail .medium,
body.large .detail .large {
display: initial;
}
#overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: hsla(0, 0%, 100%, 0.9);
}
@supports (-webkit-backdrop-filter: blur(10px)) {
#overlay {
background: hsla(0, 0%, 100%, 0.7);
-webkit-backdrop-filter: blur(20px);
}
}
#overlay > div {
position: absolute;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
top: 50%;
left: 50%;
}
#overlay > div div {
overflow: scroll;
font-size: 12px;
-webkit-user-select: text;
cursor: text;
max-height: 250px;
border: 1px solid hsla(0, 0%, 0%, 0.1);
padding: 1em;
}