207 lines
3.4 KiB
CSS
207 lines
3.4 KiB
CSS
body {
|
|
font-size: clamp(var(--min-font-size, 11px), 2.1vw, var(--font-size, 28px));
|
|
}
|
|
|
|
#thinking-people-system {
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
li {
|
|
flex: 1;
|
|
list-style: none;
|
|
text-align: center;
|
|
padding: calc(var(--gap) / 2) var(--gap);
|
|
}
|
|
|
|
.focusable {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.focusable.no-focus {
|
|
background-color: var(--primary-color-no-focus);
|
|
}
|
|
|
|
.text-hide,
|
|
.text-hide a,
|
|
.text-hide a:visited,
|
|
.text-hide a:focus,
|
|
.text-hide a:focus-visible {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.no-focus.text-hide,
|
|
.no-focus.text-hide a,
|
|
.no-focus.text-hide a:visited,
|
|
.no-focus.text-hide a:focus,
|
|
.no-focus.text-hide a:focus-visible {
|
|
color: var(--primary-color-no-focus);
|
|
}
|
|
|
|
.focus.text-hide,
|
|
.focus.text-hide a,
|
|
.focus.text-hide a:visited,
|
|
.focus.text-hide a:focus,
|
|
.focus.text-hide a:focus-visible {
|
|
color: var(--color);
|
|
}
|
|
|
|
.customer-satisfaction-parent {
|
|
/* filter: url(#round); */
|
|
/* Making the triangle fit the rest of the house */
|
|
margin: 0 var(--gap);
|
|
}
|
|
|
|
.customer-satisfaction {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
text-align: center;
|
|
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
|
|
/* Set --min-height in JS or fallback to 150px if --font-size is 28px, otherwise 110px */
|
|
min-height: var(--min-height, 150px);
|
|
font-size: clamp(var(--min-font-size, 11px), 2.1vw, var(--font-size, 28px));
|
|
}
|
|
|
|
.customer-satisfaction h2 {
|
|
display: block;
|
|
}
|
|
|
|
.customer-satisfaction h2,
|
|
.customer-satisfaction p {
|
|
margin: 0;
|
|
padding: 0 calc(var(--gap) / 2) calc(var(--gap) / 2);
|
|
border-radius: 0;
|
|
}
|
|
|
|
.levers {
|
|
margin: calc(var(--gap) / 2) 0;
|
|
}
|
|
|
|
.levers ul {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-left: 0;
|
|
row-gap: calc(var(--gap) / 2);
|
|
gap: calc(var(--gap) / 2);
|
|
}
|
|
|
|
.people-improvement {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.people-improvement svg {
|
|
flex: 1;
|
|
min-width: max(15vw, 200px);
|
|
max-width: 20vw;
|
|
}
|
|
|
|
.pilars {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pilars h3 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding: var(--gap) 2rem;
|
|
width: calc(100% - (2rem * 2));
|
|
text-align: center;
|
|
}
|
|
|
|
.just-in-time-pilar,
|
|
.jidoka-pilar {
|
|
display: flex;
|
|
flex: 2;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.pilars ul {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
gap: calc(var(--gap) / 2);
|
|
}
|
|
|
|
.pilars li {
|
|
flex: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.ground {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: calc(var(--gap) / 2) 0;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.improvement ul,
|
|
.stability ul {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Wide screen */
|
|
@media only screen and (min-width: 521px) {
|
|
.pilars {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
main a {
|
|
color: var(--color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
main a:visited,
|
|
main a:focus,
|
|
main a:focus-visible {
|
|
color: var(--color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
details.hud {
|
|
font-size: 16px;
|
|
margin: var(--gap);
|
|
}
|
|
|
|
details.hud li {
|
|
text-align: left;
|
|
}
|
|
|
|
.round-svg {
|
|
visibility: hidden;
|
|
height: 0;
|
|
}
|
|
|
|
.use-value {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.display-use-value {
|
|
display: inline;
|
|
visibility: visible;
|
|
}
|