/*——————
FTON
——————*/
@font-face {
font-family: Optiker; font-weight: 300; src: url('../../assets/fonts/Optiker-K.woff2'); font-display: swap;
}
@font-face {
font-family: IBMPlexMono; font-weight: 300; src: url('../../assets/fonts/IBMPlexMono-Medium.woff2'); unicode-range: U+0030-0039;
}
/*——————
LAYOUT
——————*/
body {
overflow: scroll; line-height: 1.5; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; color: #232323; background: #ac7a36; background: rgba(172, 41, 32, 0.05);
}
header {
margin-bottom: -1.5em !important; color: #fefefe; /* border-bottom: 17px solid rgb(37, 2, 0); */ background: #333; background: linear-gradient(90deg,#89216b,#480602); box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.12), 0 8px 8px rgba(0,0,0,0.12), 0 16px 16px rgba(0,0,0,0.12);
}
header a {
display: block; font-weight: 200; text-decoration: none;
}
header a, header small {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
header svg {
display: inline-block; vertical-align: sub;
}
.wrapper {
margin: auto; padding: 0 1.5em 0.5em;
}
.wrapper:not(header) {
padding: 1.5em; max-width: 75em;
}
body, .article {
margin: auto; line-height: 1.8125rem; font-size: 1rem;
}
/*——————
TYPOGRAPHY
——————*/
h1, .h1 {
margin-top: 1.8125rem; margin-bottom: 3.625rem; line-height: 5.4375rem; font-size: 5.1875rem;
}
.wrapper h1 {
text-align: center;
}
h2, .h2 {
margin-top: 1.8125rem; margin-bottom: 1.8125rem; line-height: 3.625rem; font-size: 3rem; ;
}
h2:not(:first-of-type):before {
content: ''; display: block; margin: 3rem 0 2.5rem; width: 100%; height: 1px; background: #555;
}
h3 {
font-family: Optiker, sans-serif;
}
h3 + p {
margin-top: -2.5rem; margin-bottom: 1em; line-height: 1.2; font-size: 0.85em;
}
h3 + p {
margin-top: -1.8125rem;
}
h2 small, h3 small {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
}
header h1, h3, .h3 {
margin-top: 1.8125rem; margin-bottom: 1.8125rem; line-height: 1.8125rem; font-size: 1.75rem;
}
h4, .h4 {
margin-top: 1.8125rem; margin-bottom: 0; line-height: 1.8125rem; font-size: 1rem;
}
header h1, header p {
margin: 0;
}
@media screen and (min-width: 768px) {
header h1, header p { display: flex; align-items: baseline; } header a { padding: 0.5em 0 1em 0.5em; }
}
header a {
color: currentColor;
}
p, ul, ol, pre, table, blockquote {
margin-top: 0; margin-bottom: 1.5rem;
}
small {
font-size: 55%;
}
a {
color: currentColor;
}
.center {
margin: auto; text-align: center;
}
/*——————
BLOCK
——————*/
.presentation {
margin: 1.5em auto 2em; padding: 1em 1em 0.1em; max-width: 30em; line-height: 1.2; font-size: 1.5em; text-align: center; color: #fefefe; background: #111; border-radius: 10px;
}
/*——————
LIST
——————*/
.list-actions {
width: 100%; max-width: 100%;
}
.list-actions h3 {
margin-top: 1.5em; margin-bottom: -1em;
}
.list-actions ol, .list-actions ul {
margin: 2rem 0; padding: 0;
}
.list-actions-grid ol, .list-actions-grid ul {
display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); grid-gap: 0 1em;
}
.list-actions ol li, .list-actions ul li {
position: relative; display: flex; justify-content: space-between; box-sizing: border-box; margin-top: -1px; margin-bottom: 0; padding: 1em; list-style: none; counter-increment: index; border: 1px solid rgba(0, 0, 0, 0.5); background: #fefefe;
}
.list-actions ol li {
display: flex; align-items: center; padding-left: 3.5em; line-height: 1.3; word-break: break-all;
}
.list-actions ol li > *, .list-actions ul li > * {
display: flex; align-items: center; flex: 0 1 auto; margin: -1rem -1rem -1rem 0rem; padding: 1em 2em 1em 1em;
}
.list-actions ol li > *:first-child, .list-actions ul li > *:first-child {
position: relative; overflow: scroll; flex-grow: 999; white-space: nowrap;
}
.list-actions ol li > *:last-child, .list-actions ul li > *:last-child {
padding-right: 1em;
}
.list-actions-title ol li, .list-actions-title ul li {
margin-top: 6em;
}
.list-actions ol li h4, .list-actions ul li h4 {
position: absolute; top: -1.5em; left: 0; padding: 0.2em 0.8em; width: 100%; font-size: 1.2em; color: #fefefe; background: #333;
}
.list-actions ol li b, .list-actions ul li b {
justify-content: center; min-width: 6rem; max-width: 15rem; text-align: right; color: #fefefe; background: #333;
}
.list-actions ul .pointseco {
min-width: 3rem !important; max-width: 4rem !important;
}
.list-actions-table ul {
position: relative; margin-top: 1.8rem;
}
.list-actions-table ul::after {
position: absolute; content: 'Points'; top: calc(-1.7rem - 1px); right: 0; display: flex; align-items: center; justify-content: center; min-width: calc(5rem - 1px) !important; max-width: 4rem !important; height: 1.7em; text-align: center; color: #fefefe; border: 1px solid #555; border-bottom: none; background: #22961e;
}
.list-actions-title ul li::before {
position: absolute; content: attr(data-title); top: -3.9rem; left: -1px; padding: 0.6em; width: calc(100% - 1.2em); font-size: 1.25em; color: #fefefe; border: 1px solid rgba(0, 0, 0, 0.5); background: #333;
}
.list-actions ol li::before {
position: absolute; content: counters(index, '.', decimal); top: 50%; left: 0.5em; align-self: flex-start; padding-right: 12px; min-width: 1.5em; font-family: IBMPlexMono, optiker, sans-serif; font-size: 1.5em; font-weight: bold; transform: translateY(-50%); text-align: center; color: currentColor; font-variant-numeric: tabular-nums;
}
.list-stats {
display: flex; flex-direction: column-reverse;
}
.list-stats-title {
padding-top: 1em; white-space: nowrap;
}
@media screen and (min-width: 768px) {
.list-stats-title { display: flex; flex-wrap: nowrap; align-items: center; }
}
.list-stats-title > *, .list-stats-title div > * {
display: flex; align-items: center; margin: 0; flex: 1;
}
.list-stats-title .anchor {
max-width: 2em;
}
.list-stats-title > h2 {
flex: 5;
}
/** List Home */ .list-home {
text-align: center;
}
.list-home ul {
display: flex; flex-direction: column; margin: auto; max-width: 40rem; list-style: none;
}
.list-home li {
display: flex; align-items: center; margin-bottom: 1em; padding: 1em; line-height: 1; text-align: left; border-radius: 5px; background: #fff;
}
.list-home a {
font-size: 1.5em; text-decoration: none;
}
.list-home span {
display: flex; flex: 1; justify-content: flex-end;
} .list-home b {
padding: 0.45em 0.4em 0.25em; min-width: 2.5em; font-family: IBMPlexMono, optiker, sans-serif; font-size: 1.3rem; text-align: center; color: #fefefe; background: #333;
}
/** List Rank */ .list-rank {
margin: 2em auto; padding: 1em 3em 2em; max-width: 30rem; background: #fff;
}
.list-rank ul {
display: flex; flex-direction: column-reverse; margin: auto; padding: 0; list-style: none; border-top: 1px solid #ccc;
}
.list-rank li {
display: flex; align-items: center; justify-content: space-between; padding: 0.25em 0.25em; list-style: none; border-bottom: 1px solid #ccc;
}
.list-rank a {
margin-right: 0.2em;
}
.list-rank span {
display: flex; flex: 1; justify-content: flex-end;
} .list-rank b {
padding: 0.45em 0.4em 0.25em; min-width: 2.5em; font-family: IBMPlexMono, optiker, sans-serif; font-size: 1.3rem; text-align: center; color: #fefefe; background: #333;
}
.grid:not(:nth-last-child(-n+3)) ul li {
padding: 0.3em 0 0.3em 1em; max-width: 95%; list-style: none; border-left: 3px solid #333; background: rgba(0, 0, 0, 0.1);
}
.progressive-web-app {
order: 1;
}
.performance {
order: 2;
}
.best-practices {
order: 3;
}
.accessibility {
order: 4;
}
.list-actions ul li.progressive-web-app ~ .progressive-web-app, .list-actions ul li.performance ~ .performance, .list-actions ul li.best-practices ~ .best-practices, .list-actions ul li.accessibility ~ .accessibility, .list-actions ul li.seo ~ .seo, .list-actions ul li.pwa ~ .pwa {
margin-top: -1px;
}
.list-actions ul li.progressive-web-app ~ .progressive-web-app::before, .list-actions ul li.performance ~ .performance::before, .list-actions ul li.best-practices ~ .best-practices::before, .list-actions ul li.accessibility ~ .accessibility::before, .list-actions ul li.seo ~ .seo::before, .list-actions ul li.pwa ~ .pwa::before {
display: none;
}
.table {
display: flex; overflow-x: auto; flex-direction: column-reverse;
}
/*——————
BLOCKS
——————*/
.block_action {
margin: 1.5em -1.5rem; padding: 0.5em 1.5em; color: #fefefe; background: #333;
}
/*——————
GRID
——————*/
.grid {
display: flex; overflow: hidden; flex-wrap: wrap; margin: 0; max-width: 100%;
}
.grid:not(:nth-last-child(-n+3)) {
display: none !important;
}
.grid > * {
flex: 1 1 auto;
}
.grid-score {
display: grid; grid-template-columns: repeat(50, 1fr); box-sizing: border-box; margin: 2em 0 1em; grid-auto-flow: row dense;
}
.grid-score b {
display: flex; justify-content: center; padding: 1em; font-family: IBMPlexMono, optiker, sans-serif; text-align: center; border: 1px solid;
}
.grid-score span {
position: absolute; z-index: 10; bottom: 100%; left: 50%; visibility: hidden; padding: 0.1em 0.3em; font-size: 0.85em; transform: translateX(-50%); border-radius: 2px; background: #fff; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}
.grid-score div:hover span {
visibility: visible;
}
/*——————
FLEX
——————*/
.flex {
display: flex; flex-wrap: wrap; margin: 0 -1rem 1.5rem;
}
.flex > * {
flex: 1; margin: 0 1rem; max-width: calc(100% - 2rem);
}
@media screen and (min-width: 1024px) {
.grid { display: grid; grid-template-columns: repeat(10, minmax(100px, 150px)); } .flex > * { max-width: calc(50% - 2rem); }
}
/* flex-list color */ .flex-list-color {
clear: both; overflow: hidden; margin: 0 0 1.5em; padding: 2.5rem 0 1rem;
}
.flex-list-color br {
clear: both; width: 100%;
}
.flex-list-color > * {
position: relative; float: left; height: 2rem;
}
.flex-list-color span {
position: absolute; z-index: 10; bottom: 100%; left: 50%; visibility: hidden; padding: 0.1em 0.3em; transform: translateX(-50%); border-radius: 2px; background: #fff; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}
.flex-list-color div:hover span {
visibility: visible;
}
/* flex-list */ .flex-list {
padding: 0;
}
.flex-list > li, .flex-list > div {
display: flex; clear: both; margin: 0 0 0.3em; /* justify-content: space-between; */ width: 100%;
}
.flex-list > li a .flex-list > div a {
display: block; overflow: hidden; max-width: 50%; white-space: nowrap; text-overflow: ellipsis;
}
.flex-list > li > *, .flex-list > div > * {
flex: 1;
}
.flex-list > li > *:first-child, .flex-list > div > *:first-child {
padding: 0 1.5em 0 0;
}
/*——————
BOX
——————*/
.box {
position: relative; display: flex; overflow: hidden; align-items: center; flex-direction: column; justify-content: start; margin: 0 3px 5px; padding: 0.5rem 0.5rem 1rem; min-width: 3rem; line-height: 1; min-height: 3rem; font-weight: bold; text-align: center; color: #fff; border-radius: 4px; background: #fff; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); text-shadow: 1px 1px #000;
}
.box i {
flex: 0 1 1.1rem; font-size: 1.2rem;
}
.box span {
display: flex; align-items: center; flex: 0 1 1.7rem; padding-bottom: 0.5rem; line-height: 1; min-height: 1rem; text-transform: capitalize; word-break: break-all; font-variant-numeric: tabular-nums;
}
/*——————
META
——————*/
.score-difference {
position: absolute; z-index: 0; top: 0; bottom: 0; width: 100%; height: calc(100% - 8px);
}
.score-up {
/* background: rgba(255, 75, 75, 0.05); */ box-shadow: inset 0 0 25px rgba(255, 75, 75, 0.15);
}
.score-down {
/* background: rgba(125, 255, 100, 0.05); */ box-shadow: inset 0 0 25px rgba(125, 255, 100, 0.15);
}
.score {
color: #004c6d; background: #fff; /*letter-spacing: -4px;*/ box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0,0,0,0.2); text-shadow: none;
}
.date {
color: #fff; background: #d3465c; box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2); text-shadow: none;
}
.title {
font-weight: bold; letter-spacing: -1px;
}
.number {
line-height: 1.5; font-family: IBMPlexMono, optiker, sans-serif; font-size: 1.35rem; font-weight: bold;
}
.date p {
display: flex; align-items: center; flex: 1; margin: 0 auto;
}
.ct-chart {
position: relative; margin: 0 0 1.5rem; border: 1px solid #555; background: #fff;
}
.frappe-chart.chart {
position: relative; display: block; width: 100%; max-width: 100%;
}
/*——————
META COLOR
——————*/
.pointseco {
color: #fefefe; background: #22961e !important; box-shadow: inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
.top path {
stroke: #22961e;
}
.verygood path {
stroke: #30d42a;
}
.good path {
stroke: #346888;
}
.bad path {
stroke: #d68100;
}
.verybad path {
stroke: #b00202;
}
/*——————
SEO
——————*/
.screamingfrog li span {
float: right; align-self: start; flex: 0 1 auto; padding: 0 0.4em; color: #fff; background: #333; font-variant-numeric: tabular-nums;
}
.seocli ul li:first-child {
display: none;
}
/*——————
AXE
——————*/
.axe {
margin: 0; padding-left: 1em;
}
.axe > div {
display: flex; width: 100%;
}
.axe > div strong {
flex: 1;
}
.axe ul:not(:last-child):after {
content: '--'; display: inline; margin: 0 0.5rem; font-weight: bold; color: firebrick;
}
.axe ul {
padding: 0; list-style: none;
}
/*——————
TABS
——————*/
.invisible {
position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; width: 1px; height: 1px; border: 0;
}
.tabs-tabs__list {
margin: 0; padding: 0;
}
.tabs-tabs__item {
display: inline-block;
}
.tabs-tabs__link {
display: inline-block; margin-top: 0.5em; padding: 0.4em 0.5em 0.3em; cursor: pointer; text-transform: uppercase; color: #fefefe; border-radius: 3px 3px 0 0; background: rgba(0, 0, 0, 0.65);
}
[aria-selected='true'].tabs-tabs__link {
padding-top: 0.6em; color: #fff; background: rgba(0, 0, 0, 0.8);
}
.tabs-tabs__content {
padding: 1em; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
.js-tabcontent h3 {
margin: 0.5em 0 1em; text-transform: capitalize;
}
[aria-hidden='true'].tabs-tabs__content {
display: none;
}
/*——————
ACCORDEON
——————*/
.js-to_expand, .js-to_expand {
display: none;
}
.js-expandmore {
margin: 0;
}
.js-expandmore-button {
font: inherit; cursor: pointer; color: inherit; border: none; background: none;
}
/* optional */ .animated-expandmore__symbol:before {
content: '+'; margin-right: 0.5em; padding: 0 0.2em; line-height: 0; font-family: IBMPlexMono, optiker, sans-serif; color: #fefefe; background: #333;
}
.is-opened .animated-expandmore__symbol:before {
content: '-';
}
.js-expandmore-button > .expandmore__symbol:before, .js-expandmore-button > .expandmore__symbol:before {
content: '− ';
}
/* This is the opened state */ .animated-expandmore__to_expand {
display: block; /* magic number for max-height = enough height */ visibility: visible; overflow: hidden; max-height: 280em; transition: visibility 0s ease, max-height 1.2s ease, opacity 1s ease; transition-delay: 0s; opacity: 1;
}
/* This is the hidden state */ [data-hidden=true].animated-expandmore__to_expand {
display: block; visibility: hidden; max-height: 0; transition-delay: 1.5s, 0s, 0s; opacity: 0;
}
.progress {
display: grid; overflow: hidden; align-items: stretch; margin: 0; padding: 1rem 1.5rem; background: #fff;
}
@media screen and (min-width: 1024px) {
.progress { grid-template-columns: 20% 1fr; }
}
.progress + .progress {
padding-top: 0;
}
.progress ul {
display: flex; flex-wrap: wrap; justify-content: space-around; margin: auto; padding: 0; width: 90%;
}
.progress li {
min-width: 8rem; list-style: none;
}
.progress > * {
display: flex; align-items: center; margin: 0; padding: 1em 0; max-width: 100%; border: 1px solid rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 4px rgba(0,0,0,0.12);
}
.progress > *:not(:first-child) {
min-height: 7em;
}
.progress > div:first-child {
display: flex; align-items: center; flex: 0 1 20%; justify-content: center; text-align: center; color: #fff; background: #2a0301; box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.35);
}
.progress h4 {
margin: 0; font-family: Optiker, sans-serif; font-size: 1.5rem; word-break: break-all;
}
/*————————-
NUMBER PROGRESS
————————-*/
.progress.progress-number li {
line-height: 1; font-family: Optiker; font-weight: bold; text-align: center;
}
.progress.progress-number li b {
font-size: 2rem;
}
@media screen and (min-width: 1024px) {
.progress.progress-number li b { font-size: 4rem; }
}
/*————————-
CIRCULAR PROGRESS BAR
————————-*/
.progress-circular {
font-size: 0.60em;
}
.progress-circular ul {
display: flex; grid-template-columns: repeat(6, minmax(9em, 11rem)); grid-gap: 0.2em 1.5em; justify-content: start; margin: 0 auto; padding: 1.5em 1.5em 0; width: 100%; min-height: 7em;
}
.progress-circular ul > li {
position: relative; display: inline-block; flex: 1; margin-bottom: 4.5em; height: 100%; font-weight: 100; text-align: center;
}
.progress-circular ul > li:before {
position: absolute; content: attr(data-name); bottom: -2em; width: 100%; line-height: 1; font-family: IBMPlexMono, optiker, sans-serif; font-size: 1.5em; font-weight: bold;
}
.progress-circular ul > li:after {
position: absolute; z-index: 2; content: attr(data-percent); top: 3px; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 6.3rem; font-family: IBMPlexMono, optiker, sans-serif; font-size: 2.3em; text-align: center;
}
.progress-circular svg {
width: 100%; height: 10em;
}
.progress-circular svg:nth-child(2) {
position: absolute; top: 0; left: 0; transform: rotate(-90deg);
}
.progress-circular svg:nth-child(2) path {
animation: load 1s; fill: none; stroke-width: 20; stroke-dasharray: 629; stroke: rgba(255, 255, 255, 0.9);
}
@keyframes load {
0% { stroke-dashoffset: 0; }
}
/*————————-
PROGRESS BAR
————————-*/
.progress-bar-element {
position: relative; margin: 2rem auto; width: 75%; height: 1em; border: 1px solid #333; background: rgb(34, 150, 30); background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(48, 212, 42, 1) 20%, rgba(214, 129, 0, 1) 70%, rgba(176, 2, 2, 1) 100%);
}
.progress-bar-element::before {
position: absolute; content: ''; top: -1px; left: -10%; width: 100%; width: 120%; height: 1em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; /* background: linear-gradient(90deg, rgba(34, 150, 30, 1) 0%, rgba(34, 150, 30, 1) 50%, rgba(176, 2, 2, 1) 51%, rgba(176, 2, 2, 1) 100%); */
}
.progress-bar-score, .progress-bar-tooltip {
position: absolute; padding: 0 1em; min-width: 1em; line-height: 1.3; font-size: 1.1em; transform: translate(-50%, -50%); text-align: center; white-space: nowrap;
}
.progress-bar-score {
font-family: IBMPlexMono, optiker, sans-serif;
}
/* .progress-bar-score:first-child, .progress-bar-score:last-child {
top: 45%; right: calc(100% + 2em); height: 2em; text-align: left;
}
.progress-bar-score:last-child {
left: calc(100% + 2em);
} */
.progress-bar-tooltip {
bottom: 100%; font-size: 0.65em; color: #fff; border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 4px; background: #555;
}
.progress-bar-score, .progress-bar-tooltip {
animation: slide 1s;
}
.progress-bar-score {
top: 130%; min-width: 26px; transform: translate(-50%, 35%); font-variant-numeric: tabular-nums;
}
.progress-bar-score::before {
position: absolute; content: ''; bottom: 100%; left: 50%; width: 0; height: 5px; transform: translateX(-50%); border-left: 2px solid currentColor;
}
.progress-bar-score::after {
position: absolute; content: ''; bottom: 121%; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-right: 5px solid transparent; border-bottom: 6px solid currentColor; border-left: 5px solid transparent;
}
.progress-bar-tooltip::before {
position: absolute; z-index: 10; content: ''; top: calc(100% + 5px); left: 50%; width: 0; height: 28px; transform: translateX(-50%); border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.progress-bar-tooltip::after {
position: absolute; content: ''; top: 100%; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-top: 6px solid rgba(0, 0, 0, 0.85); border-right: 5px solid transparent; border-left: 5px solid transparent;
}
@keyframes slide {
0% { left: 100%; }
}